My web design process

Written by

Walter G.

Published on

May 19 2020

Modified on

May 25 2020

Web design is one of those things that is both personal but yet also needs to be very functional. At least, it should be aiming to be those two things. Sometimes the former may outweigh the latter or vice versa. By personal I mean that it is your idea of what something "should" be at a specific moment in time. Based on your understanding of color and minimalism and patterns and shapes and trends, you will come up with something that catches the eye, even if it is only your eye in the beginning. More on that below.

By functional, I mean that when you design for the web, you are designing for potentially anyone from anywhere in space and in time. Whether it be someone halfway across the world, or someone 6 months from now that stumbles on your work. The website needs to make sense across a broad spectrum of individuals to the best of your ability.

My web design process varies based on a number of factors, a few being:

- Is it personal
- Is it for a client
- Am I selling a product
- Am I experimenting with design
- What season are we in

I'll break each of these down in more detail throughout this article. But first, let's start off with personal work, because that's really where the freedom to design lives primarily and where I'd imagine most people reading this blog find themselves in.

Take this page as an example. The top header resembles the following, at least it did as of the writing of this article as it may have changed since then.

It is very very...white. Some would call that a minimalist design. That is the intent that I initially had when first designing it. A few other things to note:

- The very large uppercase title
- 3 primary colors
- 2 primary font-sizes
- Small menu links

Each of those design choices was purposeful and personal as well. Most people will not spend too much time in the header section of a web page in any case. But that is also why it is important to design it functionally well, otherwise you can think of it as wasted real estate.

If I were to ask you what stood out the most from the top image, there's a good chance that you might say "the giant title in the middle". Which essentially means, that everything else around it is of less importance and you may or may not have paid any attention to it.

And again, that goes back to the idea of wasted real-estate. If 99% of all people will ignore a tiny link hidden away next a bold header, then it serves little to no purpose in the design.

Here is a new design that I have been tweaking and playing around with recently.

It's similar from a formatting and layout perspective to the one above for one main reason. It's what the current audience is familiar with. Massive changes, while nice to do on occasion tend to create a strange anxiety in people as they navigate new links and new menu structures unsure of where to look. This is pretty much why websites such as Amazon and Google almost always maintain the same flow of content and tweak incrementally throughout the years.

A few things to note about the new design:

- Smaller title with regular casing
- Increase in color contrast
- Larger profile photo
- Default focus on menu items
- Clear separation between top menu bar and header

While maintaining the original design concept for the most part, this version targets functionality. The title no longer takes precedence, which makes sense from a logical perspective. Because if you are viewing this page, then you already know what the title is which is why you are here.

There's slightly more focus placed on the peripheral elements, such as the menu and the article information in this case. And the colors are better balanced, with an increase in black and gold, while leaving the header white.

It is a combination of personal design choices and providing a more useful overall web experience.

Designing for a client

Designing for a client is an entirely different process because there is a 3rd element added to the equation. And that is the client and their personal design preferences. Most people have never seen more than 10 - 20 websites in their lives. And most of those websites were more functional than anything. Examples include:

- Email providers
- Chat tools
- Shopping websites
- News sites

But what a client really wants is a marketing tool with a strong sense of design over functionality. They want to sell their product to the right audience. And more importantly, they want to find just who that right audience is. And that takes a designer eye.

Being loud, in this case, might make more sense. My approach when designing for a client is to present them with a list of options. Either from my own past work or from a template site. Remember, the client is a part of the equation too in this case. So you want to target something that they are comfortable with, but that is both designed well and makes sense.

It is difficult to pinpoint someone else's personal preferences when it comes to web design. And while taking on a certain creative freedom is important as well, so too is getting the job done.

Designing for a product

The key to designing for a product lies in the product itself. A good product sells itself without the need for bells and whistles. In fact, the more content and blurbs that you have when selling something, the more a person will read and begin to question if this is really what they want.

Most of the time when you make a purchase both online or in person, you made the purchase before you visited the store or the website. In your mind, you needed this thing and you were going to get it somehow. The website is just a mechanism for acquiring it.

And this is the approach that I personally take when designing for any type of product online. The person has already decided that this is what they want, now you just really have to get out of the way and make it as simple as possible for them to get it.

This is tricky when working with clients that have products. Because most clients want to focus on the content "around" the product, such as logos, banners, random wording and really just the fluff that more than likely you ignore when making a purchase online. And I make that clear when designing in that scenario.

Experimental design?

I mention this one last because it's probably the least relevant in terms of work or freelancing, but really, might be the most important when it comes to innovation and creativity and really designing the future.

What do I mean by experimental? Essentially designing in unconventional ways that have not been proven to be trendy or functional just yet. I say just yet, because something that isn't very appealing today might dominate the market in 5 years.

I tend to do this type of design on my personal projects that have not been released just yet that I can still test out and change as needed. A few elements that I play around with here are the following:

- Single page vs multipage design
- Ajax loading
- Animations on elements
- User interactions with page elements

The last item mentioned in that list is the most important I feel. Because at the end of the day, that is the goal of the website. To engage a user and to offer a service that they find satisfying and rewarding to use.

These are just a few guidelines that take when designing anything online and they come from having worked on hundreds of websites during the course of my career.

I hope you found them useful and that you incorporate them into your own web design work wherever it makes sense.

Comments

No messages posted yet

Add comment