Type specimen page

After I chose a single typeface, then created three unique design ideas for a type specimen webpage, exploring hierarchy, focal points, and different ways to express the same information.

Overview

A type specimen is a booklet that demonstrates the range of a typeface, applied to headlines and text in a variety of sizes. Each variation of the typeface should be labeled on the page.

Type Specimen

  1. Create focal points in a layout

  2. Design with whitespace

  3. Design with a grid

  4. Design for scrolling and fold elements

  5. Create highly expressive and exciting designs

Objectives

I chose Josefin Sans typeface

Typeface

I got the mood board and ideation of the typeface from various research.

Mood board / Ideation

I created each element with three different styles of wireframing

Wireframing

After several tests, stakeholders' comments, surveys, questionnaires, and direct comments, I was able to evaluate the effectiveness, identify areas for improvement, address usability issues, and finally ensure the three different visuals meet the needs of the users and businesses.

Testing / Iteration

Final

@2023 by Lingzhi Hu