: Critique: How to refine the appearance of flashcards in my web app I am creating a web app and I have got several questions about its appearance, first here's a "screenshot" (just a test with
I am creating a web app and I have got several questions about its appearance, first here's a "screenshot" (just a test with Pixelmator):
The element in the center is a flashcard, the arrows on the right and on the left let the user browse the cards.
Do you think that the flashcard looks like a card? How can I improve the "card feeling" while keeping the appearance as simple as possible?
Do you think that it's a good idea to keep the arrows white? Or should I use the same black than the other elements on the top? (I have chosen a white color because I think that these arrows are more linked to the card than the other elements, is it right to do that ?)
What do you think about the fact that I am not using the same font for the card and for the UI? I am doing that because I think that a serif font is more appropriate and that It helps to distinguish the text of the content. And also because I think that it might help the user to remember of the word more easily.
UPDATE (here is a new version, I followed the advice of Jenna and now the cards are displayed as a stack, and also added a letterpress effect to the words on the cards):
More posts by @Courtney577
1 Comments
Sorted by latest first Latest Oldest Best
I think a simple way to make it seem a little more card like would be to give a very subtle paper texture as below an have the colour a little off white; #ffffff is too white for paper. I also gave a little drop shadow which I think helps in keeping it both simple and a little more card-y.
I agree with the arrows being white, it's logical as they are the second most important piece of content on the page, second to the card itself. It makes sense that it fits with the body rather than the menu.
The different font I would say makes sense. It's good to separate the content from the menu a little. Also I agree that it being different makes it easier for a person to remember. For this same reasoning I have made the word 'montagne' a little largerand though it is not completely black (#000000) it is close. The contrast helps too.
I would also suggest that with different themed words you could change the background image, the colour will then be associated with the word to allow for easier memory. (i.e. now I associate montagne with green and mountain)
Here's the original on the left and a quick example of a little texture, off white colour and some dropshadow and increased text to keep it simple and clear.
Update
The stacking looks great, especially with the consistency of the light source and the nice shadowing. Here's another example with some added monochromatic noise (as was suggested by Aaron) it does bring out the paper texture. I added a little motion blur to the noise as paper does seem to have a bit of a rough brush finish to it if you look really closely and the noise brings out the little inconsistencies of the density of paper.
All in all though, yours is looking very well and this is just another suggestion to consider :)
Close comparison between paper before and after;
It's a bit of a rough example and again I stuck to keeping it subtle, dramatic noise would of course take away from the clean design.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.