3.4. Style guide assignment#

Assignment#

Exercise 3.1

Create a style guide for your website and choose a site topic. Include a color palette and a font palette using two Google Fonts. Submit a PDF of your style guide, including the site topic, in #style-guides channel on Slack.

Before beginning the assignment, complete the following steps:

  1. Review the pages in this section.

  2. Watch Khan Academy’s videos on the RGB and HSL color models.

  3. Read Steve Schoger’s Building your color palette to learn how to not overdo on color choices.

  4. Scan

Create your style guide

Include the following in your style guide:

  • a color palette

  • a font palette using two Google Fonts

I recommend using FontPair to find complementary Google fonts.

You are welcome modify my simple style guide in Google Slides, which is based on Zech Nelson’s style guides, here and here. Another popular style guide format is Style Tiles.

Before you submit, check that your background and foreground color choices have enough contrast by using the WebAIM Color Contrast Checker.

Add a second page with your site topic. Since this class is more about learning the underlying tech, the topic isn’t that important. Choose something that interests you and that you can easily write about and find images for. Remember, we will share sites in class, so don’t pick a super personal topic that you wouldn’t want other students to see.

Submit a PDF of your style guide and site topic in #style-guides on Slack.

Rubric#

Rubric

Requirement

Points

Color palette

Include:

  • at least four colors in your palette, but no more than six

  • a dark grey color for text

    Assuming you use a white background - if you want a different background color, indicate that and make sure that the contrast ratio is acceptable.

Each color must include:

  • a sample of the color

  • the color’s hex value

  • a name (you can name the colors yourself)

20

Fonts

Choose two complementary Google fonts, one for heading text, one for body text. Give samples of each and include the font names.

Display styles for 4 heading levels

If you are using Google Slides to create your style guide, you can easily import the fonts.

10

Aesthetics

The stylesheet should have a clean layout, with items aligned and proper use of whitespace.

5

Site topic

Site topic is list on a separate page.

5