Update icon: Book

[davewhitley]

I wanted to see if I could improve the book icon and use 2dp lines. What do you think?

Original on the left, my variations on the right.

[folletto]

I prefer all the three variations compared to the original. I'd maybe try with a single line for the title instead of two, but it's mostly to see how it looks in comparison. :)

If I had to pick one, I'd pick in order: 4 2 1

I'd probably exclude 3 just because I feel it's not very recognizable at a small size.

[davewhitley]

Thanks for the feedback, I think I like 4 the best. I'd like to adhere to 2dp lines as much as possible, and only deviate if I need to.

[afsheenirani]

I have no design experience, but just sharing my views as a layman...

• I somehow could relate to 1 most as a book, and thinking about why, I realize a few facts
  • The straight left edge gives it the feel of a closed book i.e., I would open the book from the side with the curved edge towards the side with the straight edge.
  • The straight white line down the left edge gives it the feel of a 'binder' type of book.

Funny story, I then showed these icons to someone else and they picked no. 4. So I asked why? They mentioned 4 displays the thickness of the book and that's when I realized that 2, 3, 4 were 3-D representations of the book.

So one thought after that realization is to have a vertical black line (like in 3) but a little more towards the left in order to distinguish between the cover of the book and the pages. Below is a depiction of what I'm thinking...

[jasmussen]

Though these designs are beautiful as always Dave, I'm slightly concerned about the 3 other versions, as they break our rule:

flat, bidimensional look (no faux 3D whatsoever)

I realize it's very difficult to make a book icon without any 3D effect at all, but nonetheless all the other icons follow this guideline, I'd feel it was a step back if we threw that rule out the window now.

If we have to redesign this icon, here are some alternatives that are also flat with no, or at least reduced faux 3D:

[davewhitley]

Thanks @jasmussen, I did consider the 3D aspect, but I think it's in the same ballpark as our other dimensional icons, like the flag.

Imo, the last two images you posted have the same amount of dimensionality as the icons that I proposed. I think we have to decide if there's a good reason for breaking the rule.

These are not rules, they are guidelines that can be broken with the proper reason. The purpose of them is to achieve a uniform look as we all work on it together.

So, above all it has to look like it's in the same family of icons, and I think the proposed icons are an improvement in that area over the current icon.

The icon is in a gray area. It's not really 3D, but there is some dimension. I could try to reduce the dimension, but not sure how to do that. I would have to think on it.

[davewhitley]

Thank you @afsheenirani that is very helpful.

[jasmussen]

We make the guidelines, so we can certainly break them :). But I don't think we should break them this far. The flag, it can be argued, is "folded flat". There's a curve on the bottom of the reader icon implying depth, but it's far less pronounced than this one, which not only curves all the way back, but folds around to the other side. It makes the book seem like it's leaning 45 degrees backwards, when all of the other icons are facing.

I don't say this because I don't like the design — I hope you know by this point you're my design hero. I say it because I feel like this icon uses an entirely different design language than the other icons, which so far feel impressively consistent to me.

[afsheenirani]

One idea might be (for version 1) to take the text whitespace at the top and have it display towards the bottom as well, so it visually reads as a "B"?! 😄