How We Do Our Website
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.
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.
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.
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’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.
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.
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.
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.
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.
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.
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!
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.
Step 2: Research, ideas & sketch
Step 3: Wireframes