App: Branding for Schedule (Guidebook)

[sabrinang]

Description:

If we are using Guidebook's branded app this year there are a few design elements to prepare for it:

• [ ] App Icon
• [ ] Promotional Image
• [ ] Splash Screen
• [ ] Homepage Logo
• [ ] Cover Image
• [ ] App Screenshots
• [ ] Colour Scheme
• [ ] Menu Icons

Guidebook has support on how we can customize as we build the app.

Note: We should pay attention to colours and icon size to ensure that they are legible and accessible.

Previous Application

Reference from Last Year:

Github Issue: https://github.com/MozillaFoundation/mozfest-design-2017/issues/20

[marcwalsh]

@sabrinang - the delvierables have slightly changed this year as we are no longer having a native app on iOS / Android.

1. Guidebook 'Space' Logo

Shown in the 'Guidebook' mobile app when users search for the guide.

• 1024 x 1024 px (reccommended)

2. Theme Colours

The UI (hex) colors of the guide itself, which are required for:

• Base (Used for highlights, eg selected date on calendar or check boxes)
• Space Background (Used for main body background)
• Main Text (Used for headings in page/paragraph text)
• NavBar Background (Used for backgrounds of the banners on pages and navigation menu)
• NavBar Text (Used for titles inside the banners on pages / nav)
• NavBar Icon (Used for burger bar etc)

Reference Image:

3. Cover Image and Brand Icon

Shown on General Information screen when user opens the guide

• Cover Image - 1440 px wide by 720 px tall
• Brand Icon - 232 px wide by 192 px tall

4. Sidebar Icon Colour (Hex)

Custom (hex vaule) colour of pre-designed icons in Guidebook reference images below:

5. Icon for Experiences

[gideonthomas]

@mmmavis what is the latest time by which you need these designs by?

[mmmavis]

According to our original timeline Guidebook schedule will go live on October 8th Monday. Icons and banner etc need to be added to Guidebook before then and with Sarah's approval.

[Saallen]

@marcwalsh can you confirm from the top comment what asset we need for this year since the app layout is slightly different? @gideonthomas and @marcwalsh once this list is updated -can you review last years assets to see what we can reuse??

[marcwalsh]

@Saallen @gideonthomas the only requirements are those in my comment and ideally an icon for experiences (something similar to what is in the style guide).

We can reuse the App Icon for this year's Guidebook 'Space' Icon.

[Saallen]

It is hard to read in that format so to confirm here for @sabrinang

• [ ] Space logo
• [ ] Cover image/branding
• [ ] Theme colours
• [ ] sidebar icon colour
• [ ] icons for spaces
• [ ] icon for experiences

Icons for spaces is the same as last year

[sabrinang]

I logged into builder.guidebook.com to figure out what can be changed. I made changes to our guidebook space logo, space theme, guide cover, guide icon and I kept the pre-designed icon colour the same. I made an about icon, spaces/experiences mosaic icon, updated spaces colour and proportions and an experiences icon. I also made headers for the list:

@Saallen @marcwalsh Please review in guidebook https://builder.guidebook.com/#/guides/147793/ as I have made all these updates there.

Assets available on gdrive here: https://drive.google.com/open?id=150g5I2fbaY2YYhC4yBA3y1Eh0LOenhh1

/cc @gideonthomas

[sabrinang]

@marcwalsh gave me some feedback that the wordmark was cropped in the menu view as it is used as background that is cropped-in/lightened so it should just be a texture. I updated guidebook with a version without the wordmark:

[gideonthomas]

Closing as completed!

[sabrinang]

Post MozFest Note: additional related guidebook icon requests in issues #103 #102