# Project 1B: Digital Typography Continued

# Web Typography Exploration

# Points: 50

There's more to a site than just the content. Remember, the web was originally a way to store documents that could be linked together. The idea of a website, as in a collection of related pages came later. So, what makes a website a website?

# Objectives

• Further practice studying existing websites for effective methods and patterns of layout, design and user interface.
• Further practice designing user-interfaces/web layouts in Photoshop/Illustrator.
• Applying the design of typographic hierarchies for the screen to some more specific content.

# The Masthead

One of the most important parts of a website’s layout is the masthead. It’s the first thing people see when visiting your site and sets the tone for the whole site. It’s also a commonplace to feature the company or organization’s logo and, often, the primary navigation that will be repeated on every page of your site.

Your masthead should answer the questions: Where am I?, What can I do here?

# The "Hero"

A hero section is a bit different. It may change from page to page. Its role is to sum up what this page is about with a tagline or welcome message and often containing a "Call-to-action." You can let the visitor know that they are in the right place, and what the primary value of the page is.

# The Footer

Footers have a different role. They act as a safety net of the website, often exposing useful links and contact information in case the user doesn't find what they're looking for in the masthead or primary navigation.

Both the masthead and the footer tend to stay consistent from page to page, anchoring the user and providing a sense that whatever page they're on, they're still on your site.

# Design

For the second part of our digital typography project, you'll add a masthead, a footer, and a hero to your blog design.

# Requirements

The Masthead will feature a site title (you can develop a simple logo if you want) and some basic navigation.

We'll look more at navigation later, so for now, you'll just include...

• links to
  • "Home"
  • "About"
  • "Contact"
  • "Blog"
• A search input

The Hero will simply need to give a sense of your articles content. You can move your main title to here, or it could simply be a large image. Refer back to examples and research from the first part of this project.

The Footer will feature...

• the same links as above
• some contact information
• social media links (at least 3)
• a copyright notice

# Screenshots/Research

Continue your research on other websites, paying specific attention to the three elements of this project. You'll need to include at least 3 each in the research section of your presentation.

Continue sticking to fonts available from Google's Font Library, Adobe Fonts if you have an Adobe CC Subscription, or Font Squirrel.

# Presentation

Save your final designs in PNG format.

1. Add your final graphics to your InVision board.
2. Make a section for your research with the title Project 1B, Research.
   • Drag your screenshots into this section.
3. Make a section called Project 1B, 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 1B, Designs should be on top.