1

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 screenshot

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):

enter image description here

1 Answer 1

3

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.

enter image description here

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 :)

added noise

Close comparison between paper before and after;

closeup

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.

4
  • 1
    Some noise might help in addition to what is suggested here. Mar 2, 2014 at 2:56
  • Hello Jenna ! Thanks a lot for your answer ! I have followed all your advice and I also had a new idea : presenting cards in a stack ! I updated my post to show you what I did ! Thanks again ! It have helped me a lot ! BTW sorry, I haven't been able to up vote your answer because my score is too low on this stack exchange website... :( Mar 2, 2014 at 11:42
  • @AaronBenjamin nice suggestion, I'll include a version - it'll definitely bring out the content. Trevor Anne Denise, glad to help! It looks nice :) - Dominic I know, it was so glorious while it lasted!
    – Jenna
    Mar 2, 2014 at 22:29
  • @AaronBenjamin @ Jenna I'll do some tests for the noise, thank you !!!! :) Mar 3, 2014 at 9:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.