help me choose one design in terms of both functionality and aesthetic.
this is a library section for an online reading app comprising of the user annotations, bookmarks and current reads. Here are all the versions that I've designed for the annotations page however I can't decide which one is more suitable in term of both functionality and aesthetic, the first & second one are well defined however I think the spacing in the first version is a bit too tight while the third one looks clean & simple. Constructive feedback would be appreciated. ( btw the rectangle just above the annotations will be an illustration so don't count that ig )
9 Replies
you wouldnt have such small thumbnails for books but I like the middle option
you could go with the third option too
the other two are too boxy for 2024
I apologize for not mentioning it those small thumbnails aren't for books but a cover image that the user uses for their annotations.
the 3rd option is less busy, and isnt as space ineficient as the middle one, while keeping everything separated enough to have room for "breathing"
1st looks cramped because it is: everything is stuffed super close, with that background under the titlr
the middle one feels worse, specially with that tiny space for a preview
that sliver is nearly useless for anything, and making it bigger will force the user to scroll like a maniac
the middle one that expands to the left one, but the same image height (for a tablet or phablet or foldable)
that would probably work
note taking either uses the whole space or is a vertical list, which makes the middle one an absolute no-go for this, in my opinion
Here is something to give you ideas with your design: https://codepen.io/TurkAysenur/pen/JjGKKrP
It's not mobile, however is responsive. Resize your browser window and the columns will collapse. Now you can see what yours could look like and maybe help with the design aspect too! 😉
i like the 3rd best by far, mostly because you have removed the drop shadows and those just feel really outdated to me now.
One suggestion would be to mix it up, make some rows with 2 books, and some with a bigger 1 book block. It will break up the repetitiveness. I have found I really like the 2-2-1-2-1- pattern, or the reverse variation and use them frequently
thats a good suggestion, but the height of the 1-column needs to be greater than it is
it looks very weird, and you cant fit much information there, or any at all
Thank you
Srry for not mentioning it, the rectangles represent a preview of the annotation like a cover image its not books
Thank you so much for taking out the time to give such constructive feedback, it was rlly helpful.
you're welcome