Design Tutorial: 5 Steps for a Successful Website Design

This article will walk you through 5 essential steps to how to design a website, and the website design process will help you become a more productive and successful website designer.

One of the most important factors of the design industry today, especially freelance design, is a successful business workflow and doing more with less time. And to be time efficient, you must take the time to plan your project, by breaking it down to basic steps in order to achieve a successful outcome. This way, you improve productivity.

“Productivity is never an accident. It is always the result of a commitment to excellence, intelligent planning, and focused effort.” ~ Paul J. Meyer

Each designer has his own favorite design process. In this article I will explain my suggested time-efficient design workflow that works for me every time. This article is targeted at newcomers to the web design industry rather than experienced designers. The point of the article is to provide a general 5 step guide to a successful website design.

Step 1: Client’s needs

Before starting your plan, you’ll need as much information from your client as possible. The more you know, the more back-and-forth e-mails you’ll save.

Listen to their ideas

Usually, clients won’t tell you what they want, it’s up to you to ask them. They want reassurance that their brief will be fulfilled the way they visualized it, but they have a hard time explaining how they see their future website. The best way to overcome this problem is communication. It’s essential to get to know your website design clients by asking questions that will tell you about their business. You want to find out the mood they’re going for, what they like and what they don’t.

Client questionnaire

My favorite approach to find out about my client is by filling a form. List the most important questions that will help beginning your project. What’s the purpose of this website? Who’s the target audience? Who are your competitors? What actions do you want the visitors to take? Etc.. The form should not exceed 10 questions, because let’s be realistic, not all clients have the time nor the patience to fill out 20 or 30 fields. Make sure to send the client your form before you start drafting the proposal and not after. If you want to see an example, you can check out this form. For accessibility reasons and ease of use, I recommend you set up your form on Google Drive Forms. Now that the client has filled your form, you can send your proposal, and finalize your formal agreement on budget, scope of project, timeline, and ownership. After signing the agreement, it’s time to get to work.

Step 2: Research, ideas & sketch

This step is always the hardest. When I first started in the industry, I used to jump into Photoshop and start designing. I can’t stress enough how wrong that is. The best thing to do is to start on a piece of paper.

Start sketching

If you’re a designer and you don’t have a personal notebook, you better drive to your nearest library. Writing down your notes using a pen and paper is the most efficient way when it comes to any activity that involves brainstorming. Take some time and start sketching any idea that pops to your head. You don’t have to know how to draw. You can start with a circle, then your ideas will flow naturally. You can be in your taxi on your way to work, and a creative idea can pop. Write it down.

Compile your inspiration

Create a bookmark folder with the project’s name. Start researching and then save any webpage you deem relevant. Make sure not to copy exact elements or ideas as this will be considered plagiarizing. Find your best looking websites and layouts based on the client’s needs and search for other websites in the same business. Write down what you like and what you don’t like about them. Layouts, colors, shapes, animations.. Anything that will give you ideas and inspiration for your next step.

Know your competitors

Take a good look at your competitors’ websites. Check all the local and international competitors and learn from their content. What do they all have in common? This is what you should include in your website. What are they missing? That’s what you can improve in your website.

Step 3: Wireframes

Wireframes are the blueprint of your website. It’s what gives your website a visual structure. Some designers have the tendency to include design elements in their wireframes. This should be avoided completely, as this will distract the purpose of the wireframes, which is to state where things go, not how things look like. Wireframes should be in grayscale to focus only on the layout. The first approach to a wireframe is, yes, a pen and paper. List all your elements to include on a web page. Next, arrange them on the page. You can do that also on paper or by using any wireframe tool such as proto.io, wireframe.cc or even Photoshop. It’s a simple layout to start working from. Here’s a nice example of a wireframe:

You can check the entire project here. Basically, wireframes should define these main elements:

Element placement

You can’t start your website without knowing where things go. Here’s where you decide that. You can even meet up with your client to discuss the best placement for your content.

Information hierarchy

A sitemap with a list of links can be overwhelming to a client and even the designer. By laying out the sitemap, you will be able to see how the pages fall into place which will allow you to make adjustments before you get too far ahead.

Interactivity

When creating your wireframes, you must ask your questions: How are these elements going to interact with each other? Will the visitor take the actions I want him to take? How will the visitor move around the site? Here’s where user experience plays its role. So you created your layout. Next, you will create your interface.

Step 4: Style tiles

Style tiles (also known as style guides) are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles are based on visual preference discussions with the client The usual elements consist of the logo, typography, colors and tone of voice. Here are two quick examples of style tiles.

More here. Here’s why you should use style tiles:

From concept to visual

Composing your style tiles will translate the mood, feeling and tone of your website based on what you learned from your client’s needs. It will help you make choices about how to use the elements of design in a way that the client will understand.

Maintain consistency

With a style tile, you are able to maintain a look and feel by creating a set of rules which the design follows. The process becomes flexible, easily to maintain and consistent.

Time efficient

Designing your style tiles will show your client the website’s skin. Instead of composing your full designed website in a certain style, now you can update your style tiles with the client’s requests in a quick and efficient way. Now that you have designed your skin. Next, you will apply it.

Step 5: Prototype

Designing a website is very much like building a house; the floor plans are the wireframes, and the visual interior design is your style tiles. The wonderful thing about this design process is how easy this step has become. By composing your wireframe and style tiles, all you need to do now is combine them together. Here’s where you start seeing how your website will look like. Prototyping means building a model of the website before you build the actual website. Some designers like to design their prototypes on Photoshop, while others like to skip Photoshop and move onto a web framework such as inVision and UXpin.

Prototyping is based on 3 steps:

Prototype

Implement the style tiles into the layout while adapting user experience and ensuring design ease-of-use.

Test

This step is essential as it evaluates whether the website meets the client’s needs and expectations. You can even share your prototype with your users to test your interactivity and user experience.

Fine-tune

Here’s where you refine any alterations and elements that need to be improved. This process may take time depending on how many cycles that you and the user/client will take in order to have a final polished design.

Finishing up

So now you should be able to have an idea about the best process for a successful website design. By following this workflow, you can now plan your website ahead, prevent surprises that can block your workflow, and most importantly avoid time-consuming projects. The next step will be the development part. If you have the skills to develop your website then the process should be familiar to you. If not, then a web developer should be hired. In my next articles, I will explain step-by-step tutorials for each section mentioned in this tutorial. Stay tuned!