# Project 1A: Intro to Digital Typography

# Web Typography Exploration

# Points: 50

Often, we'll be discussing in class how designing for screens and the web is different than designing for print. However, one thing they have in common is that typography is often the cornerstone of a successful design. There are differences in the details, but the foundational concepts are the same.

We'll start this multi-part project by focusing on good typographic hierarchy by designing a post for a blog.

# Objectives

• Practice studying existing websites for effective methods and patterns of layout, design and user interface
• Introduction to
  • designing user-interfaces/web layouts in Photoshop/Illustrator/XD
  • designing typographic hierarchies for the screen
  • considerations of screen size in your designs (responsive design)

# Examples:

• Help Scout
• 500px
• Wistia
• Invision (Inside Design)
• Kari Narrator
• Emergence
• Oceanographic
• Christmas HQ
• Up Bank

# Process

You must find or write an article for your blog design. It can be from an existing blog, or this could be an article from a magazine (the content does not have to be original, the design does).

To be a good candidate for your blog, your chosen article must have:

• at least 2 levels of headings
• at least 2 images with captions
• blockquote/pull-quote or highlight (you get to define this)
• some links to other articles

# Responsive Design

Your design should be “responsive”. The simplest requirement is that the content should be accessible on a mobile device, as well as a desktop computer. It does not mean that the site looks the same on all devices, just that the content is accessible regardless of device. We’ll go over more of these details in class.

# Research

Research other blogs, considering overall design, but pay close attention to their use of typography. Sizes, hierarchies, line-length, leading, etc. Take screenshots of 3-6 examples present.

# Explore Hierarchy

Try using Archetype App to explore your typographic hierarchy. With this app, you can choose fonts, and adjust font sizes. It's a live web view, so what you can do here, you can actually do on the web.

This app will also let you select from Google's library of free fonts. We'll be using Google's fonts resources a lot in this class, since it's easy and free to include these in your project, and they have some of the most popular typefaces for the web.

# Font Use

For our digital design projects, we'll mostly want to stick to Google Fonts. This will allow us to easily code our designs if we choose since we won't have to worry about font-licensing and other font restrictions. The fonts on your computer will not work on the web as they currently are.

If you have a valid Adobe Creative Cloud subscription, you could use Adobe Fonts if you choose. The installation process is different, but they are usable on the web, if they have a specific web font version, and your subscription remains valid.

One more option is Font Squirrel, they only host commercially free-to-use typefaces. Just make sure whichever font you choose has a web version (there will be a little globe icon).

If you wish to use any other font, please discuss with me first.

# Design

I'll provide some templates to get you started. You'll design your article only (we'll worry about headers and footers, etc. in the next part of the assignment) at the given artboard sizes. So, you'll be designing three times, once each for desktop, tablet, and mobile.

If you chose a particularly long article, it is ok to cut off the design at a certain point, as long as the required elements are all present. In fact, you may want to edit your article, to show those required parts in a more condensed format, while still maintaining a natural look.

# Templates

• Illustrator
• Photoshop
• XD

# Presentation

Save your final designs in PNG format. I will show you how to do this in class.

1. Add your final graphics to your InVision board.
2. Make a section for your research with the title Project 1A, Research.
   • Drag your screenshots into this section.
3. Make a section called Project 1A, Designs
   • Drag your final designs (PNG files) from each
   • Do this for each of your artboards.

In InVision, make sure your Assignment and graphics flow so that the newest items are at the top. Project 1A, Designs should be on top.

# Resources

A More Modern Scale for Web Typography