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
|Critical Thinking||Reason effectively
Make judgments and decisions
|Information Literacy||Access and evaluate information
Use and manage information
|Media Literacy||Analyze media|
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.|