Content blocker redesign

[adguardteam]

Content blocker redesign

[ameshkov]

Notes for the first screenshots.

Onboarding

Some more notes:

1. Background should be "dark primary" color
2. Image-Text block proportion should be 1/1 (image takes 50% of the screen)
3. For now use this stub instead of the image (for every step): https://blog.adguard.com/en/content/images/2016/08/adguard_new.jpg
4. Image positioning: Horizontal: center Vertical: fill/stretch

[ameshkov]

Onboarding: browsers

Current screenshot:


1. Яндекс --> Yandex 2. Google Play icon: https://cloud.githubusercontent.com/assets/5947035/17894555/6bdd01bc-6952-11e6-8245-1ef558ad0a9e.png 3. Dialog layout: https://monosnap.com/file/PvQsKaGmCdwEhKPxJqTKZXozyGE1s0

[ameshkov]

Filters card

Font size issues:
https://monosnap.com/file/vNhdz972b7mHhjj8K7UsbYSgWwoG4H
https://monosnap.com/file/lr7i51H3cTo16KlV2IMwG6sQ0cUVT4

[ameshkov]

Card styles

This is very bad:
https://monosnap.com/file/DH6SfF0MPMjrRT3ObG21bCjoMXVUpN

You have different padding in two very similar cards.
There must be a common style for all cards!

[ameshkov]

Sidebar menu

Wrong selection color:
https://monosnap.com/file/HaDN7V0HZrD5F70guhpYZV3OSmFceg

Logo (temporary):
https://cloud.githubusercontent.com/assets/5947035/17895620/5caca770-6956-11e6-80ce-d6f176baba8a.png

Now about Logo layout, I have a proposition. Let's do it the same way as it's done in pocket app:


1. Place small Adguard logo in the action bar 2. Remove the "profile" section from the sidebar menu 3. Remove "Adguard Content Blocker" image and use standard action bar on a main screen.

[ameshkov]

Main view

Paddings, lack of the common style

[ameshkov]

Navigation drawer

Add "Whitelist" item:
https://monosnap.com/file/Kfyl61uIjpeCiRjuPm5yfzhB1IqdPm

[ameshkov]

Onboarding

Wrong paddings and button style:
https://monosnap.com/file/KNROURxN0QRggWzDLW73Qz1XjL9cwg

Also I insist on 50/50 screen division between an image and the content part.

[ameshkov]

Here, look at material guides:
https://material.google.com/components/cards.html#cards-actions

They specify proper padding values there.

[ameshkov]

Add a short AG description on the main view above all the cards:


Text:

Adguard blocks ads, protects your privacy, boosts page load speed and reduces your mobile data usage.

[ameshkov]

@nkartyshov please use these illustrations (use png files from the folder):
https://www.dropbox.com/sh/8e9tej90qxmu41j/AACqvs9MgOIUTEJ0ODxqJ_Lpa?dl=0

[ameshkov]

Done