Typographic Layouts: Create Layouts for Content Heavy Websites and Apps Premium class

Claudio Guglieri, Creative Director / Hands on Designer

8 Videos (3h 2m)
  • Introduction and Setup

    • Introduction and Setup

      3
      3
      11:01
  • The Ideation Phase

    • The Ideation Phase

      4
      4
      25:16
  • Sketching a Top Level Wireframe

    • Sketching a top level Framework

      19:42
  • Building a Grid

    • Building a Grid

      2
      2
      32:08
  • Typography, Look and Feel

    • Typography, Look and Feel

      31:49
  • Visual Weights and Composition Balance

    • Visual Weight and Composition Balance

      15:13
  • Sharpening your Design

    • Sharpening your Design

      38:13
  • Project Wrap-up

    • The Importance of a Case Study

      08:24

About This Class

This class will teach you how to  make an effective use of typography when creating a layout.

Considering sites like Reuters or the new iteration of New York Times and USA Today we can see how the web is shifting towards typographic compositions where the content is king and the user interface is minimal but relevant. During this  course we will learn how to structure an effective layout for a splash page and a news article template. We will go through the basics of responsive design, grid composition and using typography to build the visual hierarchy of the composition.

What You'll Learn

  • Sketching a Top Level Wireframe. We'll cover the visual backbone of UX, wireframing.
  • Building a Grid. You'll design your perfect grid, detailing how your app looks on different sizes and different devices.
  • Typography, Look and Feel. We'll cover the basic components of typography, including headlines and subtitles.
  • Visual Weights and Composition. We'll prepare elegant compositions using visual weights like size, color, density, value, and white space.

 This is a design only course. No development will be taught! 

 

What You'll Make

You'll design a news reading  app that relies heavily on tasteful typography. During the process of creating a wireframe, you will consider user interaction, asset placement, and responsive design elements. By the end of this class you will have a detailed mock-up displaying all of your app's functions. 

99% Positive Reviews 70 See All

You can learn/refresh-in-mind a lot from this class at any level of experience. And it's not about just typographic layouts, it's about those important details you need to keep in mind during the whole design process!
So much valuable information here to improve no matter what skill level.
High quality info and very very good examples of how to present work to clients. From this course I take one phrase with which I agree tremendously: "love is in the details". Thak you!
Wanda Granata

Graphic design - Art direction

50

Projects

1,922

Students

Claudio Guglieri

Creative Director / Hands on Designer

Claudio Guglieri is an independent product designer and creative director living in San Francisco. Claudio has been responsible for directing and executing interactive experiences for clients like Google, Kayak, EA, CNN, Nickelodeon, Microsoft, History Channel and Motorola to name a few. He led the Design Department at Fantasy Interactive as Design Director before starting his own venture.