Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#2491 closed change (fixed)

Fix design elements in onboarding slides

Reported by: annlee@… Assignee: rjeschke
Priority: P2 Milestone: Adblock-Browser-for-Android-beta-1.0.0.2015052225
Module: Adblock-Browser-for-Android Keywords:
Cc: Blocked By:
Blocking: Platform: Adblock Browser for Android
Ready: yes Confidential: no
Tester: Verified working: no
Review URL(s):

http://codereview.adblockplus.org/6296160390086656/

Description (last modified by annlee@…)

Background

The current onboarding slides do not completely match the design that was submitted. For example, there are elements from the previous design (grey border, adblock browser icon at the top of each slide), the images are not centered, the font type and weight are not correct - as seen in these screenshots

What to change

  1. Remove the Adblock Browser icon at the top of each slide. This is from sven's old design but is not in the current design. This icon is currently pushing content down (at least in my device) so that the images are cut off and the user must scroll down to see text at the bottom, which is not desirable.
  1. Remove the grey border around the slide. This is also from sven's old design. There is no grey border in the current design
  1. in the 2nd slide, change the headline text from 'You are in control' to 'You're in control', as seen in the current design

3a. Also in the 2nd slide, 'Adblocking' is missing from the instructions on how to optin/out of Acceptable ads

Change text from: 'Tap the Menu icon >> Settings >> Acceptable Ads'
To: 'Tap the Menu icon >> Settings >> Adblocking >> Acceptable Ads'

This text should fit on one line if possible, so you can make the font smaller to do so, that would be ideal

  1. Change the arrow in the blue button at the bottom of each slide to this '>' character - as seen in the design
  1. Change the font and weights for the text in each slide to the below:

headline: 48pt, open sans, light
text: 30pt (line height 42pt), open sans, light
text on button: 32pt, semi bold, open sans
small text on slide 3: 18pt, open sans, semi bold

  1. Change the color value of the blue button at the bottom of each slide to the below:

button: #107fa9
arrow colour: #70b2cb

  1. All of the images are placed slightly to the left. Center the images in all slides.

Change History (10)

comment:1 Changed 4 years ago by annlee@…

  • Summary changed from Fix design errors in onboarding slides to Fix design elements in onboarding slides

comment:2 Changed 4 years ago by rjeschke

  • Owner changed from rene@… to rjeschke

comment:3 Changed 4 years ago by annlee@…

  • Description modified (diff)

comment:4 Changed 4 years ago by rjeschke

A remark: on Android there is landscape and portrait mode, and tablets are normally operated in landscape mode. The slides will be 'unviewable' there.
(I do not have a tablet to test this, just an educated guess)

comment:5 Changed 4 years ago by fhd

  • Sensitive unset

comment:6 Changed 4 years ago by rjeschke

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:7 Changed 4 years ago by rjeschke

  • Priority changed from Unknown to P2
  • Ready set

comment:8 Changed 4 years ago by rjeschke

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:9 Changed 4 years ago by fhd

  • Milestone set to Adblock-Browser-for-Android-next

comment:10 Changed 4 years ago by philll

  • Platform changed from Android to Adblock Browser for Android

See #2673

Note: See TracTickets for help on using tickets.