Dashboards

Converse US re-imagines the dashboards virtually every time they launch a new homepage. Below are examples to some of the variations we've come across thus far.

Re-ordering the boxes and layouts for new iterations is fairly simple to achieve with flexbox.

You have flexibility with image sizes but you need to be good at maths to make sure everything slots together correctly.

Additional info for designers

While the text on dashboards is entered via the CMS and the title font adjusts in size based on the screen size that it's viewed on, for mockup purposes the following might be helpful:

Text Specs

Global Font Proxima Nova

Big Portrait Image Title

• Font-size: Desktop 60px, Mobile 47px
• Line-height: Desktop 60px, Mobile 47px
• Font-weight Bold or 700
• Uppercase
• Max width of title before it wraps is 480px
• Eg: Dashboard Three - "Shop Slip-ons & Sandals"
• Eg: Dashboard Four - "Shop the Collection"

Always On - Image Label, Product Title Text, Instagram Handle

• Font-size 15px
• Line-height 22px
• Font-weight Regular or 400
• Capitalised or Sentence Text
• Text Positions
  • Bottom Left for Instagram Handles & amp; Product Titles
  • Top Left for Image Labels
• Eg: Dashboard One - "@sweet_thangxo", "Dip Dye Collection" x 2, "Shoreline Slip-On"
• Eg: Dashboard Two - "@rixhist", "Chuck Taylor All Star Handmade Crochet Lift Low Top, $120.00", "Platforms"
• Eg: Dashboard Three - "Shoreline Slip-On"
• Eg: Dashboard Four - "Pride By You", "See the Story"

Other Images - Hover Titles

• Font size: Desktop: 33px, Mobile 19px;
• Font-weight Bold or 700
• Uppercase
• Eg: Dashboard One - "Lorem Ipsum etc" on Dip Dye Collection x 2 and Shoreline Slip-on
• Eg: Dashboard Two - "Lorem Ipsum etc" on Platforms
• Eg: Dashboard Three - "See the Story", "Shop the Collection", "Lorem ipsum..." on the three smaller images on the right hand side of the dashboard.
• Eg: Dashboard Four - "Shop the Collection", "See the Story" on Pride by You and See the Story images respectively.

Text Blocks

• h2 / Heading
  • Font-size: Desktop 50px, Mobile 37px
  • Line-height: Desktop 50px, Mobile 37px
  • Font-weight Bold or 700
  • Uppercase
  • Egs: Dashboard 1 "Headliner Looks", Dashboard 2 "The Unofficial Staple", Dashboard 3 "The Go-Getter Edit", Dashboard 4 "Show Your Pride"
• Body Text
  • Font-size 15px
  • Line-height 22px
  • Font-weight Regular or 400
  • Sentence case
  • Egs: Body text on all four dashboard text blocks.
• Arrow Links
  • Font-size 15px
  • Line-height 44px
  • Font-weight SemiBold or 600
  • Capitalised
  • Egs: Arrow links in text blocks on Dashboards 1, 2 and 3
• Buttons
  • Font-size 15px
  • Line-height 22px
  • Font-weight SemiBold or 600
  • Capitalised
  • Egs: Buttons in text block on Dashboard 4

Image & Video Specs

Check out each dashboard's wireframe for more detail.

Dashboard Examples

Dashboard One

Dashboard One - Wireframe

Dashboard Two

Dashboard Two - Wireframe

Dashboard Three

Dashboard Three - Wireframe

Dashboard Four

Dashboard Four - Wireframe