Insight Web Style Guide

We were assigned to design a style guide for a web magazine named Insight. Insight presents interviews and ideas from thought leaders. The final product will be a single “web-page” showing how each part of an interview is to be designed. It's meant to function as a style guide, used as a reference by other designers to create future pages.

Insight Web Style Guide
Web Magazine Style and Layout Guide, Typography, ART 230
This project was another project for my Typography class, ART 230. I'm majoring in Web Design and Development, so this project was much more familiar to me than some of the other projects I've been assigned!
We were assigned to design a style guide for a web magazine named Insight. Insight presents interviews and ideas from thought leaders. The final product will be a single “web-page” showing how each part of an interview is to be designed. It's meant to function as a style guide, used as a reference by other designers to create future pages.
For this interview, I used the article "Stacy London Doesn’t Do Style Rules Anymore" from Man Repeller. We had to choose an article from the web and collect all of the page elements that might be used on an interview page, and then collect and construct a page that shows examples of all of the elements. We then had to tag each element of the content with an InDesign paragraph style.
From there, we gathered examples of typographic hierarchy, created concept thumbnails, first drafts, specific brand concept thumbnails, headers and footers for the article, and then second drafts. We chose our best digital drafts to refine and turn in, and received and gave in-class critiques.
My finished project should be easy to read and digest, as well as attractive! I wouldn't want someone to find my article and immediately navigate away, so I wanted it to draw attention and keep it. Let me know what you think of my project, and be sure to check out my other projects, either on Behance or on my portfolio website!
I found the digital device mockups used for my web style guide at Smartmockups.
I specifically used this desktop mockup and this mobile mockup
Back to Top