Android: 2022 Redesign

[samuelclay]

It's time for this year's design changes. There's a good number of them.

You can see the redesign on beta.newsblur.com.

• Story titles changed the most
  • There's now a lot more margin and spacing between title, content, and date/author
  • Author moved from inline with title to next to date, losing color differences
  • Read stories are now bold, so unread and read story titles take the same space
  • Unread indicator and feed favicon switched positions
• All new icons. 100% SVGs, all found under media/icons/nouns/* on the pro branch
• Missing favicon icon also replaced (world.png -> world.svg)
• Almost all uppercase is now in regular, sentence case. Exceptions can and should be made, but buttons and such are now "Sentence case".
• Feed title background colors are slightly different to match each other better
• All feed favicons now have a border radius
• Blurblogs move to below a user's own feeds
• All menu icons (site menu, feed menu, folder menu, story menu) were replaced
• New icons in Feed Options popover (top style menu)
• Difference between Comfortable / Compact was further emphasized
• Borders between feeds, folders, and story titles were removed and deemphasized
• Story content header has fewer borders and more space
• Feed header bar no longer has borders, just the gradient
• Story action buttons at the bottom of each story are slightly different too
• Highlighted feeds have a border radius and margin to them now

I uploaded a whole bunch of screenshots of the before and after from the web for convenience, but realized it would be easier for you to just switch back and forth between beta.newsblur.com and www.newsblur.com. That should help guide the relative changes since it won't be a 1-for-1 with mobile.

[samuelclay]

Since we'll be deep in story title layout for this ticket, let's fix this screenshot. There needs to be more padding between elements when the font size goes up. We do this on the web and while it's a lot of work, the results are clearly better.

[sictiru]

@samuelclay The redesign changes we're pushed to the main repo and are ready for your initial live review. The world icon is different because its path was very long and it got flagged as having a bad performance impact.

The padding issue with enlarged font looks to be fixed by the new padding between elements.

[samuelclay]

Here's some notes on the design. Looking real good, we just need some tweaks to better match the web. I'm using this feed for screenshots: https://www.newsblur.com/site/654188/bbc-news-world

• Feed titles:
  • Feed Intelligence filter (All/unread/focus/saved) styling and border to match the web
  • Top-level special folders (all site stories, infrequent, saved story, saved searches, etc) lose the gradient and gain a bit of height
  • Those top-level folders also retain their Comfortable height in the Compact setting (too short in compact)

• Story titles:
  • Date/author color
  • Author needs to be added next to date
  • Move the image preview down to match the top of the title
  • A bit more margin above the title and below the date
  • A tiny bit less margin between the title and the content as well as the date and the content
  • Border color
  • Lowercase the "AM"
  • Bump up the story content and date font size by 1pt
  • The search icon is too large
  • A bit more space between the favicon and the feed title
  • Slightly more line height in content preview

Compare these two:

• Story detail:
  • Send to icon too large
  • More margin in title and header
  • "am" instead of "AM"
  • Slightly larger font for story title
  • Slightly more space between paragraphs

[samuelclay]

Sorry that took so long! I've been on infrastructure all week and it's been eating into my nighttime hours by quite a bit. But I finally released a big change last night that seems to be having a good impact.

[sictiru]

@samuelclay Thanks for the detailed list with photos. The branch is ready for another UI review.

[samuelclay]

Great work! Few more notes:

Feed list

• Let's match the three background colors on the web for saved stories, shared stories, and saved searches
• The All/Unread/Focus/Saved control in the bottom should have the text next to the icon if there's room. If not, successively remove from the right (saved goes first, then focus, then unread, then all). The web does this nicely, just resize the feed list width.
• Font size of top level folders is a point too small. On the web we have a letter-spacing of 0.5px which slightly widens it
• The left justification for top level folders and feed folders are off by a pixel or two

Story list

• Lighten the bottom and top border to match the web. Those borders should be nearly invisible
• Tiny bit more margin (~1-2px) above story title in Comfortable spacing
• Tiny bit more margin (~2-4px) above and below in Compact spacing
• There's too much space on story titles that have no story content but story content preview is enabled

Story content

• Remove the border for the colored feed favicon bar

[sictiru]

@samuelclay Ready for another test drive.

[samuelclay]

This is so, so good. I'm loving this new design with all of its increased space. Few notes:

Story titles list

• The search icon looks weird, can we switch that to the new icon? Or is this the new icon? I'd like to have a cleaner icon there
• Increase the right-side padding by ~8px. It should be comfortably far from the edge of the screen
• Hyphenation is happening at the character level. Let's switch that to word level.

Story detail

• There's some extra right padding on story tags

[samuelclay]

The order for the story content bottom buttons is "Train, Save, Share". Right now save and share are reversed.

[sictiru]

I'm delighted by the new design as well! Dark mode is nicer without the gradients and borders.

The search icon was new but I replaced it with a standard Android one which should do the job. On older devices these SVGs might be rendered a bit weird.

I worked on getting the hyphenation by word but the results weren't consistent for some reason. I suspect the returned measured text width is somehow incorrect. I won't continue on this due to the web having the same hyphenation rules but let me know if you want me to spend more time and give it another try.

[samuelclay]

Yeah, let's see what we can do about that hyphenation. It's bizarre and feels broken.

[samuelclay]

Feels broken on the web too! Ok then, ignore it for now and let's see if it bothers me later.

[samuelclay]

I'll get back to you with notes tomorrow, I want to let it sit for a day.

[samuelclay]

Perfect, last issue is that there's some extra right padding on story tags.

[sictiru]

@samuelclay Could you post a picture with the padding on story tags? I wasn't sure last time either if I was making the right change.

[samuelclay]

[sictiru]

Ah it's around the text, I was thinking about margin between the tags initially. Got it. I'll get to it today.

[sictiru]

Available in v12.0.0