My favorite part of the design process is the visual design aspect. It’s like a reward for all the hard work. Before I get to my favorite moment I spend hours on researching, planning, sketching (well, sketching is fun too…) and wireframing. So now it’s time to visualize all the ideas and add a nice cover to all that magic that is planned behind it.

In some projects you may have to meet the already specified brand style guidelines. That’s good if the company already has a well-defined brand. But that’s bad when that brand includes the “Comic Sans” font that should be used for all headings.

I had to deal with some of that in previous jobs and those projects are definitely not in my portfolio. If someone tells you what fonts you should use for their website, it’s kind of limiting and can kill your creativity.

However, I’d like to talk here about the projects where you can decide about the entire website style. You can probably do that for some clients that only have a logo and some defined basic colors, if you design a website for yourself, or if you design the website template (like a WordPress theme).

What is the best way to begin the visual design process?

If I have a possibility to create a completely new website style, I usually start the design process by defining the typography. I know, it may sound weird and you probably expected to plan the spacing first, do the layout next, and then fill it out with some content, etc.

The reason why I start with the typography first is that I don’t want the layout to influence how the typography should look.
Sometimes you may start designing the layout and then you realize that you can’t use big headings or you need smaller font sizes in some particular places.

I think the typography should influence the entire website style.

So choose your typography wisely and spend some time on deciding the text sizes, line heights and font styles. It will repeat over and over again throughout the rest of the project.

Of course, it may not be perfect the first time, and you’ll need to make some corrections later, but it’s a good place to start.

Let typography be the foundation element of your design.

While researching this article, I stumbled upon the Digital Telepathy blog post “Designer Quick Tip: Identify the Foundation Elements of a Great Design”.

I like the idea of finding the element that can be the foundation for the entire web design. It means that you should start by identifying a design element that you really like and then build the rest of the project around it.

Sometimes I find really nice fonts on some other websites, or I notice the poster in the theater, or I appreciate the signage in the mall or department store (Target has some good ones). I usually try to save those moments by taking a quick photo or sketching it in my notepad.

When I start the visual design of the new website, I can bring those ideas back and use them to plan the typography styles.

Let the typography be the foundation element of your design.

How to create and use typography styles?

I start by creating simple styles with one or two headings and short paragraphs. Then, I try to include some other content elements like quotes, lists, links, etc. This gives me a quick brand style guideline that I can base the entire website design on.

After I save it, I start designing the website layout, whitespace, and color scheme for the same project. I keep my typography styles open all the time on another screen for reference. It helps me to keep a consistent-looking design and manage the balance.

The content is my main focus. Since I know what it’s going to look like, I have a better idea how to design the navigation, breadcrumbs, and widgets in the sidebar in order to keep it all well balanced.

It’s like building the engine first and then the body of the car. The content is the engine of most websites.

Practice, practice, practice

Start practicing this method today. You don’t even need to have any specific project in mind. Just open your Photoshop (or other design software of your choice) and come up with your own typography styles inspired by some other designs you saw or some notes you took.

Design a few sample headings, paragraphs, lists, etc. You can also define the text color or background. Then, try to imagine how the entire design of that website could look. It’s really fun and makes the entire visual design process much easier.

I have many styles saved that are waiting for the right project. I’m going to choose my 3 favorite typography styles that I haven’t used for any project yet and publish them in my next blog post. So stay tuned because that might be the foundation element for your next website design.

Feel free to share your thoughts and typography styles that you’ve created by posting a comment below.