Class 14: Quizlet and Midterm Styling Start

Class on 10.23.19

Quizlet

We will start with the quizlet live games

How to get on:

1. Download the app and put in the code I will show on the board. Search for Quizlet in your App Store
2. Go to quizlet.live and enter the code I will show on the board

After you get on quizlet you can and should join my “MMP 240 Web Design” class on Quizlet:

https://quizlet.com/join/XNhMKNwsY

Basic Site Style and Typographic Hierarchy

The next phase of the midterm project is to create a typographic hierarchy for your pages. Making the hierarchy will involve a few different parts:

Part 1: Know your Audience and Goals

In order to create the hierarchy you need to know:

• The goals of the people running the site
• Who is the audience (age range, interests, knowledge of and access to technology)
• Why the audience will visit the site and what they will hope to accomplish

In a typical site creation process this information will come from a combination of documents from the client, interactions with the client, user research and prior experience of the web designer. The ability to get these things right is part of what separates the great web design companies from the rest.

Part 2: Know Your Content

Make sure to read through the content with special attention to the following:

• determining what content is most important (the order in which you want users to view the content and what you want them to see as most important).
• What types of content you have (headings, sub-headings, dates, times, etc). To create a consistent hierarchy you will need to make sure that a) Each different type of content gets a different typographic treatment, b)the same type of content gets the same treatment.

Part 3: Determine your basic typographic properties (font-family, font-size, color)

These should match both the content of the site and the expectations of the audience. We are going to spend some time in class talking about both the audience and looking at tools to help you figure out and present these properties.

Fonts

When looking for fonts it can be good to do a combination of viewing sites that you think have a similar audience, looking at typography sites and looking at font sites.

For the similar sites I will ask you to take a few minutes and do some searching and post up possible reference sites in the comments to this post.

Here are some typography sites:

• Type Wolf: https://www.typewolf.com/ Trends, article examples and inspiration
• Typography.com: https://typography.com the site of the Hoefler & Co type company, also has news and inspiration
• I Love Typography & We Love Typography. https://ilovetypography.com/     http://welovetypography.com/
• NYC Type https://nyctype.co/
• Fonts in Use: https://fontsinuse.com/
  

Font Sites:

• Google Fonts https://fonts.google.com 
• Fonts.com https://fonts.com
• Adobe https://fonts.adobe.com/

Font Size

Some people use their eye and do this by what “feels right” to them. Others use a more systematic approach. These sites have CSS that is based on mathematical relationships (you don’t have to do the math, you can just copy the CSS).

• Type Scale: https://type-scale.com/
• Modular Scale: https://www.modularscale.com/
• Golden Ratio Calculator: https://grtcalculator.com/

Color

The following sites are places where people post color combinations that you can look at, use as inspiration, modify and make your own.

• Adobe Color https://color.adobe.com/
• Colour Lovers (the British spell it colour) https://www.colourlovers.com/
• Coolors https://coolors.co/

Presenting your work

We will look at Style Tiles http://styletil.es/ as a way to show case all of these decisions. Creating a Style Tile will be one option for completing assignment 7.