Typography in Web Design
A lot of people think of design, both graphic design and web design, as something that is focused on images. However, it's important to stretch yourself and discover a way to design without images. This project explores that very idea.
The idea behind this project was to design a page for a fictional website called HUE. Each page of the site was all about a specific color. It was a very information-heavy page, thus typographic hierarchy was at the forefront of the page. Images can still be used, but they shouldn't be the only thing used.
Sketching Process
For each of these boxes that I sketched in, I created mini-wireframes. I blocked out images, text boxes, and buttons. You'll notice that each box on the page has a dotted line through the top. That line indicates the "fold." Everything above that line on the sketch is what would show in a browser window upon opening the page. Everything below that line would be what the user would see when scrolling.
After I sketched, I chose some ideas to explore in InDesign.
Above the Fold Variations
The first thing I did was design four variations of the site above the "fold." Once I had figured out which design to go with, I could focus on everything else on the page.
Each of these designs had strengths and weaknesses. One thing I noticed is that I had already begun to rely on imagery. Because of this, I chose the least image-heavy design to explore further.
This draft is the first time I added all of the content. All imagery applied to the content it was with. The typography wasn't quite right though. There wasn't enough differentiation between the section headings and the body copy. Everything leaned too into the blue color a bit too much.
Another issue with this layout was that it was too uniform. The text and image location keeps flip-flopping, a common trope in modern web pages. I decided to explore further.
Digital Drafting
For my final design, I addressed the issues that were state above. I added more variety in the color palette. I changed up the structure of the text. Headings were made to stand out more against the body copy. The imagery was added in a way that felt like it was part of the text rather than a separate entity.
