Typographic Layouts: Create Layouts for Content Heavy Websites and Apps

Claudio Guglieri, Creative Director / Hands on Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (3h 2m)
    • 1. Introduction and Setup

      11:01
    • 2. The Ideation Phase

      25:16
    • 3. Sketching a top level Framework

      19:42
    • 4. Building a Grid

      32:08
    • 5. Typography, Look and Feel

      31:49
    • 6. Visual Weight and Composition Balance

      15:13
    • 7. Sharpening your Design

      38:13
    • 8. The Importance of a Case Study

      8:24

Project Description

Design a new generation custom news reader

Introduction and Setup

  1. Browse news websites

    Welcome to the class. Browse through your favorite news websites and consider how content is represented on their pages. Take note of how empty space is utilized. Be sure to browse the same sites on different devices to experience their responsive layouts. 

  2. Websites I referenced

    Medium

    www.medium.com

    New York Times Snowfall

    http://www.nytimes.com/projects/2012/snow-fall

    New York Times New Article Experience

    http://www.nytimes.com/marketing/prototype/

     

The Ideation Phase

  1. Upload your ideas and sketches on the RSS Reader

    In this unit we covered the importance of the ideation phase along with creating sketches for it. Spend some time thinking about your idea for the RSS reader. Create sketches of the main components that show how they are going to behave on different sized displays.

    Nadia Merola's skethes

  2. Sites I referenced

    Escape Flight

    www.escapeflight.com

    Flipboard

    www.flipboard.com

Sketching a Top Level Wireframe

  1. Create a framework for your RSS Reader

    Upload a framework for your RSS reader.

    Describe:

    • How the sections are connected to each other
    • What components are responsive, adaptive or fixed
    • Interaction methods
    • Describe animation between sections
    • Feel free to upload sketches  (or whatever visual format you prefer) that show a clear flow of the process.

    Kevin Hamil shares his wireframe sketch. 

Building a Grid

  1. Upload your framework and describe your grid

    Upload a rough version of your framework and describe the grid you used to build it. Describe how the different sections are going to work, what is going to be fluid and what will use fixed break points.

    Aj Halbrook demonsrates their grid.

    Attached below is the grid I used for the assignment example.

  2. Accolades for grids

    Grids are good. A talk by Khoi Vinh
    http://www.subtraction.com/pics/0703/grids_are_good.pdf

    Fluid Type
    http://trentwalton.com/2012/06/19/fluid-type/

    Readability; The Optimal Line Lenght: http://baymard.com/blog/line-length-readability

    UX Design QA with Christian Holst: http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/

Typography, Look and Feel

  1. Compose your type

    Use your wireframing and grid to arrange the basic type elements of your feeder. Add several examples of where text will land on your pages. Be sure to use different fonts and sizes.

    An example of where Kris Lennen's type lands across multiple pages.

  2. Typography resources

    8 Simple Ways to Improve Typography In Your Designs
    http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/ 

    Five simple steps to better typography
    http://markboulton.co.uk/journal/five-simple-steps-to-better-typography

    Basic rules of good typography
    http://www.troytempleman.com/2010/02/08/basic-rules-of-good-typography/

    Typography Rules
    http://typophile.com/files/typography_rules.pdf

Visual Weights and Composition Balance

  1. Arrange your visual weights

    Create an in depth mock-up of 2-3 pages of your news feeder.

    Consider the visual elements  we discuss in the video lesson:

    • Size
    • Color
    • Density
    • Value
    • White Space

  2. Learning about visual weight

    Below are articles that helped me build this unit. You should read to get a deeper look into the concepts explained in the video lecture.

    Visual Weight Building balance with the use of contrasting elements.
    http://zurb.com/word/visual-weight

    Visible Narratives: Understanding Visual Organization
    http://www.lukew.com/ff/entry.asp?981

    Visual Balance and Weight Allocation for Usability
    http://uxmag.com/articles/visual-balance-and-weight-allocation-for-usability

    19 Factors That Impact Compositional Balance
    http://www.vanseodesign.com/web-design/visual-balance/

    Does your design flow?
    http://www.vanseodesign.com/web-design/does-your-design-flow/

Sharpening your Design

  1. Share design mock-ups

    At this point of the course it would be nice to start posting some hands on design examples of the RSS Reader we have been working on.

    J.J. Springer's design.

Project Wrap-up

  1. Create a case study

    Create an in-depth case study of your project.

    Include the sections we discuss in the video lesson:

    • The Set Up
    • Concept Sentence
    • The Body
    • Wrap it up
    • Call to Action

Resources(1)

Student Projects

project card
Nikita Yarygin
6 comments
project card
Josu Albarez
3 comments
project card
7 comments
project card
Anthony Dines
6 comments
project card
Nadia Merola
3 comments
project card
J.J. Springer
1 comment
project card
Rob Sutcliffe
4 comments
project card
Tanner Lai
3 comments
project card
Kevin Hamil
5 comments
project card
AJ Halbrook
2 comments
project card
Stephanie Jiang
4 comments
project card
Ben Hsu
7 comments
project card
Vitor Levi
2 comments
project card
Nandan Rao
2 comments