Mockup of Website Style Guide project.
This project is designed to establish styles for articles on a fictional website called “Insight”. Each element of a long-form article is addressed and shown in the defined style. Elements include header and footer, navigational links, headline, subheading, author and date, basic paragraph, introduction, subheading 2, list style, image and caption, block quote, and interview styles for questions and answers.
Using multiple colors, fonts, font-weights, and font-sizes the scheme creates hierarchy and emphasis. Important elements are larger. Color and font changes make the interview easy to follow. Images and block quotes break the margin to add emphasis and interest, guiding the eye to these elements that help a reader scan.
The header is simple. High contrast colors attract notice while not overwhelming the viewer. The color contrast also emphasizes “sight”, perhaps leading the viewer to new ideas about the nature of the contents: an inner understanding or new view of the world of creativity.
Navigational links are indicated by a red bar above the link on hover.
Using multiple colors, fonts, font-weights, and font-sizes the scheme creates hierarchy and emphasis. Important elements are larger. Color and font changes make the interview easy to follow. Images and block quotes break the margin to add emphasis and interest, guiding the eye to these elements that help a reader scan.
The header is simple. High contrast colors attract notice while not overwhelming the viewer. The color contrast also emphasizes “sight”, perhaps leading the viewer to new ideas about the nature of the contents: an inner understanding or new view of the world of creativity.
Navigational links are indicated by a red bar above the link on hover.
