Ashton Naef's profile

Project 4: Website Style Guide

For this project, we were asked to create a style guide for a web magazine called Insights. This magazine interviews various leaders and presents their profile. The project brief listed a number of elements that needed to be assigned specific styles. Using one page 800px wide and 3000px tall, the style guide needed to show one image with a caption, one column of text, a simple header and footer, at least three colors, and only use fonts from a select class list.

Here is a list of required elements and the styles I assigned to them:
  * Headline: Akko Rounded Std, bold, align left, 110 & 72 pt, R41, G149, B178
  * Subheadline: Avenir Next LT Pro, italic, align center, 21 pt, R145 , G44, B120
  * Subhead: Akko Rounded Std, bold, align left, 18 pt, R147, G45, B121
  * Bodycopy: Avenir Next LT Pro, regular, align left, 12 pt, black
  * Blockquote: background box C=83.36, M=7.42, Y=100, K=0.42
            - Quote: Akko Rounded Std, regular, align left, 24 pt, white
            - Attribution: Akko Rounded Std, bold, align right, 36 pt, C=1, M=13, Y=98,                    k=0
  * Author: Avenir Next LT Pro, regular, align left, 12 pt, black
  * Date: Avenir Next LT Pro, italic, align left, 12 pt, black
  * Caption: Avenir Next LT Pro, italic, align left, 12 pt, black
  * Question: Avenir Next LT Pro, heavy, align left, 12 pt, black
  * Answer: Avenir Next LT Pro, italic, align left, 12 pt, black
  * List: Akko Rounded Std, regular, align left, 14 pt, R229, G107, B120
  * Navigation (with 5 links): background box: R255, G214, B18
              - Links: Avenir Next LT Pro, demi, align left, 12 pt, black
I wanted my style choices to reflect the design sensibilities of Kate Moross, the designer featured in the article. I used Akko Rounded Std for it's contemporary, pop feel. I choose colors found directly in Moross's work and I made sure the alignment was crisp and consistent with plenty of white space.
Project 4: Website Style Guide
Published:

Project 4: Website Style Guide

Website style guide

Published: