Search Menu


This site is available only to JEA members. Please log in below.

Lesson: Creating A Design Style Guide


Creating A Design Style Guide


A lesson on development and rationale for a consistent and codified style

Maintaining consistency between already established publications and also within the website should be a priority. A style guide should clearly establish linking colors, fonts, headers, and HTML size text. The other guide for the website should include style and standardization for content (stories, photos, images, videos, links, byline, headlines, keywords, and categories).


  • Students will increase their understanding of workflow.
  • Student will appreciate the need for consistency of design, content and file types.

Common Core State Standards

CCSS.ELA-Literacy.W.9-10.2a Organize complex ideas, concepts, and information to make important connections and distinctions; include formatting (e.g., headings), graphics (e.g., figures, tables), and multimedia when useful to aiding comprehension.
CCSS.ELA-Literacy.W.9-10.2b Develop the topic with well-chosen, relevant, and sufficient facts, extended definitions, concrete details

Partnership for 21st Century Skills — Student Outcomes

Skills P21 outcomes
Critical Thinking Reason effectively
Make judgments and decisions
Communication Communicate clearly
Information Literacy Access and evaluate information
Use and manage information
Media Literacy Analyze media


50 minutes

Lesson step-by-step

1. Building background — 10 minutes

Have students list a variety of ways files should or should not be used to discuss as a group the next day. A few considerations are below:

File Types Recommendations to consider.
Graphic Types Identify all graphic type styles.
Name all of the fonts (used within images) and HTML fonts (by name) and point size, colors, and any special spacing.
Photo/Image Treatment Specify any Photoshop/Photo treatment (for example, edge or border treatments on photos). Is there a specific size for headshots?  Will you show full version or add a thumbnail version and what size will it be?
What information must accompany images (Alt tags), captions, photo credit?
Extra Graphics Describe additional graphic treatments such as using bullets, lines, etc.
Colors Are there any colors to avoid or treatments to avoid, such as white text on black fill?
Specify hex numbers for backgrounds, palette, text, buttons, bullets, accents and all text/content and links.