## Visuals
#### 👉 [Zeplin](https://app.zeplin.io/project/57a120b91998d8977642a238/dashboard?seid=5f493336b4c4cf8483777b61)
#### 👉 [Prototype](https://www.sketch.com/s/8ff8fb81-5af1-4e30-a9f3-ad710c04bd16/a/VazVKa/play?hotspots=false)
---
### Design principles
- Avoid cards in cards
- Separate content from features
- Eliminate redundancy (e.g. repetition of dates)
- [ ] **Experiment with this:** Keep dates sticky (e.g. `On this day`) when scrolling to provide orientation (titles) and avoid repetition (dates
- Use alternation in presentation of content, after bigger elements show smaller ones
- Less icons (e.g. for sections like `In the news`)
- Apply pinch to zoom gesture whenever possible
- As little truncation as possible (for text and horizontal content)
- Allow for more easy scanning (more visuals, better teasers)
- Remember the user‘s scroll position when possible, e.g. when
- ...revisiting the feed at a later point in time
- ...transitioning to a detail screen
- Reduce amount of font styles, bases on overhauled baseline grid (`4sp`) and typographical system
- `font-size: 14sp;`
- `line-height: 21sp` (Featured/random article)
- `font-size: 16sp;`
- `line-height: 24sp` (Picture of the day, Because you read, In the news, On this day, Recent deaths)
- `line-height: 28sp;` (Featured/random article)
- `font-size: 20sp;`
- `line-height: 24sp;` (Subtitles)
- `line-height: 28sp;` (Longer text in bold)
- `font-size: 24sp;`
- `line-height: 32sp;` (Titles)
- Exception: `Droid Serif` (Article titles)
---
### Featured article
- Output the first sentence completely
- Image format → 2:1
### Top read
- Formerly trending → rename to “Top read”
- Rank uses a transparent fill and gradient on border
- [ ] **Brainstorming:** is there a source we can use to indicate why it’s trending (instead of showing the article description) ?
### Picture of the day
- Image format → keep original image format from Commons
- Tapping the image leads to the new image detail page
### Because you read
- Lead item uses blurred/upscaled version of thumbnail image and applies it as a background color with a white overlay to make text legible
### In the news
- Prioritize articles with images for first item
- Horizontal swipe allows users to check out other items
- New interface element: dots to indicate to users that there’s more content
- Image format → 2:1
### On this day
- New design
- Card teases one article from the featured on this day event
- When tapping the year (1988), users should be scrolled to the corresponding event on the detail page
- Image format → 2:1
### Random article
- Uses the same design as “Featured article
### Today on Wikipedia
- Features “Recent deaths” as a teaser for the “Today on Wikipedia” page
- Uses the same article group card used in “Because you read”
- Age of the deceased person is shown in parenthesis
### Suggested edits
- Outputs 1 card per day (design shows all three types)
- Article description image format → 2:1
- File image format → keep original image format from Commons
---
### Todos / Feedback processing
- [x] Move “More X (...)” → arrow to the right side? @mwilliams
- 👍 Moved it to the right side. Feels more natural.
- [x] Perhaps it might be helpful to make the header (card header) sticky in some way? As the cards can be quite long right now? @cmadeo
- 👍 Added this the conceptual descriptions, we’re going to experiment with it.
- [x] Redesign without obfuscate thumbnails for `Top read` and `Recent deaths` @cmadeo @mwilliams @alexhollender @Prtksxna
- [x] Dates not bold to add more contrast? @mwilliams
- 👎 To keep it consistent with other areas of the app, we’ll use bold. Contrast is provided through different type sizing: `16sp` for the date and `24sp` for the titles
- [x] Consider a card group for “Top read”, “Because you read” and “Recent deaths” @alexhollender
- 👍 Great idea → applied it in the latest designs.
- [x] Make the feed more visual, like the iOS app store feed @alexhollender
- 👍 Tweaked this here and there (Top read, On this day). But the “bread and butter” of Wikipedia is text, so I’d say the recipe is a mix of both.
- [x] Square icons for language? Are they understood? @Prtksxna
- 👍 This feedback will be considered at a later stage as this affects many other areas of the app.
- [x] Consider not showing the article description in cards on Explore, as they’re redundant in most of the cases @alexhollender
- 👎 You definitely have a point here, but since we want to raise awareness for article description editing in the feed as well (Suggested edits), we should keep them so users learn that they exist.
- [x] Infinite scrolling or should we think about “an end” of the feed. E.g. a pattern from newspaper articles → after scrolling to the end the next article is teased @alexhollender
- 👍 We’re going to consider adding sticky dates so users will know when they’re scrolling content from another date. In regards to the “scroll lock” (end of feed):
- I mentioned this to Android team yesterday and the tone is that users should have choice when to scroll further and wenn to stop.
- From an engineering standpoint, this is also quite a hack on Android.
- [x] Apple Photos uses large elements in the beginning and then gradually reduces the sizes of the elements the more users scroll. At the end, there’s just a list.
- 👎 We’re going to stick with the current concept of alternation, mainly because this is a visual design refresh rather than a functional one.
- [x] On this day:
- [x] Perhaps the article cards could just be shown on click through? @cmadeo
- 👍 This makes sense, rather than allowing users to scroll vertically, we’re going to only tease one card w/o the possibility to scroll. Check out the latest designs.
- [x] Carousel dots also look a little confusing to me in relationship to the date dots on this card, maybe differentiating color here could help? @cmadeo
- 👍 Possibility to scroll horizontally in “On this day” has been removed.
- [x] Curious how the transitions might help to make the transition from the article card to the article view nice a seamless? @cmadeo
- 👍 Transitions will be explored during development. Currently there’s lots of room for improvement in “On this day“.
- [x] Rename to “Trending” to “Top read”, according to discussion with @cmadeo
- [ ] Tablet layout (@cooltey)
- [ ] How are we displaying content when multiple languages are set?(@Charlotte)
- [ ] Fill in analytics questions, usage before and after (@Charlotte @schoenbaechler)