Arek Dvornechuck
Branding Expert
Web Design Process From Start To Finish
.webp)
.webp)
In this article I’m gonna show you how to design a company website, the strategic way.
Every website needs to attract visitors and help people understand the product or service and the company behind it.
This can be done through using the right visuals, content, and interactions.
That means every element of your site needs to be designed strategically.
Everything from how the website looks: the colors and fonts you’re using, but also the content itself: the headlines and paragraphs.
The design of a website is extremely important, but what actually sells is the words.
That's why apart from good design, you'll also need a clear strategy on what content you should create and how to structure it.
So in this article, I will teach you how to do just that—I will walk you through my proven 7-step web design process.
BTW. Understanding the full scope of branding is crucial for a cohesive web design. Learn more about the entire journey in my branding process.
You can also watch this tutorial on my YouTube channel
I will show you an example of a homepage I designed for one of my clients (Periti Digital)—from start to finish.
I'll cover every stage of my web design process—everything from the initial discovery session, to creating a wireframe and writing the messaging, to the design and the development phase of course.
That way you can get an overview of how web designers work—if you’re a business owner or it can help you optimize your process—if you’re a designer.
I know that you want to see the result—so here’s the wireframe and the final design of the new website (live at peritidigital.com).
Before I talk about the steps I took that led me to that final design, It’s important to remind ourselves what makes a great website in the first place.
I probably don't have to explain why having a great website is important to any business—we all know that, but what makes a great website?
Every designer will go on telling you how design is extremely important and every copywriter will argue that copy is more important.
You guessed that right: the visual and verbal identity—they're both equally important and they need to work together.
A great website is not just about awesome design, animations and interactions, because what actually sells is the words—how you tell your brand story.
We can judge effectiveness of a website by the 3 criteria:
Now, let’s explain on each of those principles shortly.
Your website need to be clear and easy to understand.
A lot of entrepreneurs make this common mistake of thinking that they have to absolutely include everything on their website.
That's why they often end up making their website super busy which confuses people.
That's why you shouldn't go in length talking about how great your company is.
You should rather be very selective with the words you use and focus more on your customers or clients, and less on yourself.
And for this I run storytelling workshops with my clients to help me understand the business and craft key pieces of messaging.
The second very important thing when it comes to creating an effective website is of course good design—does your website look presentable?
Be consistent with your branding.
Before you start designing your website, you should have a solid logo and identity to work with and preferably a style guide as well.
I’d urge you to pay attention to consistency with the rest of your marketing materials, so that you can create that unified brand image across the board.
The third very important thing to consider when creating your website is to make sure it’s designed with a clear objective in mind.
Your website must be easy to navigate and it must include calls to action (CTA's).
Your website is a marketing tool.
Whether you sell products or offer services, you want people to take some kind of an action.
You want your visitors to either simply buy a product, or schedule a call, or request a quote, or donate to a charity, or attend an event etc.
While it might seem obvious to you, I can see often see people making the same mistake of assuming that clients or customers will "find their way" if they wanted to engage.
In reality it doesn't work like that—you need to make it easy for them to take action.
Your website must be optimized so it can become your selling machine.
However, it doesn’t have to come across as salesy or pushy, not at all—And I will teach you how to do just that.
With those 3 basic web design rules in mind, let’s start with the first step in my process which is discovery.
First, you need to run a discovery session with your client, so that you can understand the business and its objectives.
Understand the business and define key elements of brand storytelling.
The problem is that most designers ask the wrong type of questions during their meetings with clients.
When a client approaches them with a new website project, they tend to ask questions like:
These questions are irrelevant because a website is not a place to celebrate yourself.
You need to use language that would resonate with your customers.
So you need have some clarity on how to write your brand story in a way that speaks to them...
So the right questions to ask are:
These are just examples of questions you can ask your client during the discovery session, but if you want to learn more—then check out my Storytelling Guide.
I use this structured framework to help me run discovery workshops with my clients.
That way I can extract all the necessary information from them and organize it in a way that I will be able to use.
Later on, I’m going to be able to combine these insights with my own research.
I will also add some extra details taken from other documents my client might have sent me—like internal presentations etc.
All of these findings will allow me to write their brand story.
So here I collect these key pieces of information that will help me later on craft the actual copy—the headlines and paragraphs for our new website.
Before I show you how to write the messaging, let's first sketch a simple wireframe.
You need to create a wireframe in order to get clarity on what type of sections you'll need the content for.
Prepare a rough sketch of your website to figure out what content you’ll need to create later on.
A wireframe is just a low-fidelity kind of a sketch on how you want to structure your page.
You can draw a wireframe on a piece of paper, or you can use some dedicated tools like Balsamiq, Axure or Justinmind.
Otherwise you can even simply use Photoshop, Illustrator, Adobe XD or Figma—is all up to you.
Personally, I like to create rough sketches on paper.
Since I’m a designer—it's easy for me to imagine how the website can look like.
Alternatively, you can support yourself here with some UI Kits or premium templates to help you figure out how can you lay-out the content.
Anyways, there are certain principles and good practices to follow here when it comes to structuring the content for your homepage.
Here are the 7 common sections every website should include:
Now let me explain shortly on each of these sections, so that you can learn how to effectively create them.
Which is the very top of your website, where you naturally have the logo, some menu etc.
And for this, we you will most likely need a short headline and a little paragraph underneath and a call to action.
In the header you should use very few words to let people know what the company offers—and I will explain on that later.
Here, we can also have some photos or graphics, or we can even embed a video etc.
Now in the section below you explain what you are saving your customers from—what’s at stake in your story?
You can use the "Challenge" part of your storytelling script—you can simply list the pain points your customers face.
This could be done in the form of bullet points with questions, or just statements etc.
Or alternatively you can go positive here and talk about the value proposition (list of benefits) or you can do both.
Which I actually did for this client, so that we talk about problems the brand solves, but also about benefits the customers get or how they feel once their problems are solved.
Now, in the section below, you should introduce yourself as the brand or person who can solve your customer’s problems.
Or help them enjoy these benefits for that matter—so basically you just need some headline with a paragraph or two.
You can also reserve some space for your team photos, or your product photos here.
The next section could be either a video or a paragraph that invites your customers into a story.
Here you basically provide more information and this is also where you will improve your SEO.
Again, we could do a short headline but this time we can have a longer paragraph with a button “read more” that unfolds more text when you click it.
That way, you don't overwhelm your visitors with heavy text, but if they want they can red the whole thing.
Another section you should have on your website it the plan.
The plan your brand (the guide) gives to your customers (the hero) to help them achieve success.
This is simply where you reveal the path a customer must take to do business with you.
Of course, you need to simplify the steps here—the goal is to lift the client’s confusion and make it look easy.
Somewhere by the end, we also must include testimonials or endorsements.
But at minimum you need to show the logos of clients the company has worked with.
Either way, you need to show some proof that you can deliver on its promise—that will help you build trust.
Finally, you wrap it all up with a footer where you can list all links to other pages.
You can repeat the logo here, but a common practice is to make the footer black or dark.
You can also include here links to social media, perhaps the company address or phone number etc.
Remember that you don’t have to have these sections in that exact order—you can mix them up.
Besides the header and the footer of course—they’re like covers of a book, but inside you can have more or less chapters, depending on your project.
And if you followed my process, you will be able to easily create additional sections by using the insights from your storytelling script.
For example: you can have a section where you give people your pricing options or packages.
That’s a common practice for SaaS companies as you probably already know.
But anyways—remember to repeat your CTA’s often, if not on almost every section of your homepage.
Once you have your wireframe done—then you're ready to write the messaging.
Next, I spend some time refining my notes from the workshop (the storytelling script).
Transform your storytelling script into actual copy for each section of the website.
Here I may supplement some information from other documents that my client have emailed me like e.g. internal presentations, or other marketing materials.
I also check out competitors' websites and what type of messaging they're using.
Next, with all that input, I simply look at my wireframe and then I create a new Word document—and I just start writing the actual copy: the headlines, paragraphs, text for bullet points and so on.
Starting with the header—You headline in the header must be clear and concise.
Here I know that I must use very few words to let people know what the brand offers.
The header basically needs to answer three questions that visitors ask themselves when they land on a new website:
That’s it—don’t try to be clever or cute here, but rather focus on clarity.
Remember—you only get one chance to make a positive first impression on your website visitors.
According to Microsoft Research study—the first 10 seconds are the most critical.
This is because within those 10 sec most visitors will decide whether to stay or leave.
So you need to hook them, and get their attention—but it doesn’t mean you have to be clever or cute—not at all.
Your header should use simple language and speak directly to you customers.
Now, that might be a challenge to write something so concise, yet unique and catchy.
So it often takes a few tries to get it right—and this applies basically to all sections on your website.
Just look at wireframe and then identify what type of content you'll need.
Next, look at your Storytelling Script and start using thee insights to craft the actual messaging.
When you're writing the content also remember to consider the brand's tone of voice and personality.
That might influence your word selection or your style of writing.
The next section is probably “Stakes” right?—here you can simply list problems that you solve.
This can come in the form of questions or perhaps statements as bullet points, or whatever else you might choose to do—be creative here!
Just remember that your wireframe was just a sketch—so that you can always change it if you need to.
You might also decide to change the order of sections if you come to conclusion that it will work better as a whole.
At this point you simply need to make those important decisions on how to lay out the content on your website.
So is it an image on the left and the headline with a paragraph on the right,
Or do we have a bullet-point list here that we can turn later into icons during the design phase?
As a result of this step you want to end up with the actual content written for all 7 or so sections in a word document.
Alternatively, if you can now go back now and create a digital version of your wireframe and with the actual copy on it—that’s even better!
Either way, we should end up with this word document and a sketch of the homepage—which is a very efficient way of working with web designers.
Whoever is going to be working your website—they will be provided with all of that, which makes the whole process a lot easier and smoother.
This much likely will save you a ton of headache and wasting time and money on revisions that seem to never end.
Clients are engaged from get go, and designers get a green light at each step of the process.
Once you have your client’s approval on the messaging and the overall wireframe of your homepage, then it’s time to dress it all up with the actual high-fidelity design, right?
Create high-fidelity design, based on the wireframe and by following the style guide.
My client came to me for a full rebrand—so that now we have a style guide that I can follow when designing the new website.
But, If you don’t have a style guide for your brand yet, and you wanna learn how to create one—then check out my other tutorials.
Assuming that you already have at least the new logo, and some specifications on fonts and colors you wanna use—then in this case we just basically need put all of this together.
From now on, this is going to be basically a downhill journey.
This is because there are so many web design tools out there—there are almost endless ways in which you can design and develop your website.
Depending on your project (the client’s budget, or the scope of work etc.) you might want to design this website from scratch—meaning from a blank page.
Or alternatively, you can do what I did—you can purchase a quality template that kind of fits your needs (more or less).
These premium website templates often come with the actual design file.
For example: mine came with the Figma design file so that I was also able to save so much time because I didn't have to design everything from scratch.
All of these common website components like hero sections or listicles or quotes and so on—they're already there.
Think about all it, someone spent a lot of time and resources trying to figure this all out.
Someone created a beautiful, fully responsive template with a series of UI elements that you can just simply reuse and redesign to your liking.
So I purchased the Consultancy X template for Webflow and then I simply modified it.
I replaced the logo, colors, fonts, and the whole content in that Figma file and I made it into a custom website design.
But if you want to design your website totally from scratch—hey, be my guest.
I’ve designed many websites from the ground up as well—just like the one for Medihuanna for example.
Either way—this is not a typical tutorial where you learn how to actually use the many web design tools like Figma or Adobe XD.
My intention was to just give you an overview of my overall web design process focusing especially on what precedes the actual deign and development.
So whichever method you go with, finally you simply present that web design to your client and get their approval.
Once you've settled on the design part, then next step would be naturally to develop that website and that may involve some coding.
Code your website manually (HTML & CSS) or use visual "no-code" tools e.g. Webflow
My client initially wanted to use the WordPress CMS on the back-end, but I convinced them to go with Webflow.
You should know how you gonna develop your website before you even started the project.
Because if you decide to design a website from scratch, then you’ll naturally need to develop that website from scratch as well.
So if you don't want to write the code, then you can use the fore-mentioned Webflow.
Another popular way to build websites visually with no-coding is by using the Elementor visual builder on WordPress.
So again, the same with the design part—I’m not going to go into details here because there are many ways in which you can develop your website.
You already know that I purchased for my client a Webflow template that came with the Figma design file that I customized in the previous step.
Now, I naturally need to make the same exact changes to the actual live template on my Webflow account.
Basically I just go ahead and start making the same changes to the template that I made in the design file.
And that way I can basically have this homepage up and running in no time.
But then, of course I will have to develop other pages that I haven’t designed earlier in the process.
However, if your project requires to do so—You can wireframe and design each of these pages as well.
But since this project is just a simple business website for a B2B company—we just needed to get the homepage design approved.
And now, based on that, I can go ahead and create other pages and perhaps some new sections or new UI elements.
Like for example: I created the Team Members section here, or Certifications section here and so on.
I also created a JavaScript interaction on the Contact page—because I thought it’s kind of a fun, playful element of surprise.
You can play with these shapes taken from the logo while filling out the form.
And so it makes the website a bit more interesting and engaging—so I thought it’s a nice little touch.
And once I’m done I simply publish that website online (which is just click of a button on Webflow) and then I present the website to my client.
Once the site is live with all of its visuals and content in place—you’re ready for testing now, right?
Check your website for coding & usability issues: page-speed, broken urlsresponsiveness etc.
So inevitably some hiccups may occur as a result of small coding mistakes and now it’s time to fix them before you launch the website officially.
Because the last thing you want to do is to rush here and then launch a website that is not 100% done.
Remember, your website is your primary marketing tool.
So that if something is not working properly e.g. people can’t send the form, or they can’t click the button or there's an 404 error—that's going to lead to a bad customer experience.
You don’t want your visitors to leave with a bad first impression of your brand (and perhaps last), so don't put it off for later—thoroughly test each page and on all devices.
So make sure all the links work, and all your animations render properly.
And so make sure that the website looks good on all devices and using all popular browsers.
You will also need to connect the website to their ecosystem and prepare for launch.
For example—my client wanted to embed their Hubspot contact form, so I had to do that.
They also wanted to embed their Google Analytics code, and had to use API to be able to use Google Maps on their Contact page.
You will also need to test the site speed and perhaps optimize some images, minify the CSS and JS if any and so on.
Also remember to do some on-page SEO like setting the page title, description, cover image for sharing on social media etc.
Once you’ve tested things out and you're confident that everything is 100% done—then, it's time for everyone’s favorite part!
Plan your launch and schedule maintenance or website updates.
Which is publishing this new website under the company's official domain (www.peritidigital.com) and announcing it to the World.
You should also consider planning that launch and your communication strategies.
You might want to announce it on social media or send an email campaign or both.
A key thing to remember is that the launch is not the end of the job.
This is because clients usually need some maintenance for at least a few weeks.
The beauty of the web is that it’s almost never finished.
Once the website goes live, you can start monitoring you analytics and you can even do some A/B testing.
That can make you want to fine tune some things like your messaging or visuals on the website.
That's why I record some tutorials for my clients on how to edit the website using the Webflow CMS.
I simply identify what my client will need change one the website and then I screen-record myself doing it using Loom.
For example: adding a new team member, adding a new office location, updating the text and images etc.
Usually, I include links to those tutorials in their style guide—so that my clients have everything is in one place.
Great websites do not happen by accident—they are the result of strategic thinking, clear messaging and design excellence.
Following a proven web design process will allow you to stay focused and use your creativity more efficiently.
How long does it take to design a website?—People always ask this question, but the truth is that there are many variables.
It depends on the designer and how fast he or she can work and how accurate they can be, what's the scope of the project, how responsive the client is, how many revisions you go through etc.
However, when it comes to creating a company website it is important to NOT skip the initial steps of preparation.
Just see what my client said:
The problem is that most entrepreneurs and creatives alike often tend to skip the initial steps and they jump straight into design.
They often assume that some dummy text and stock images will do for now and they can replace that later while now focusing on the website design.
However, it doesn’t work like that because most of what "website design" is—it's actually about laying out the content (text and graphics) on a page.
Therefore the content will very much influence your design choices, so that you must figure that out first.
Another very important thing to remember is visual consistency with your overall branding.
If you don't have a solid brand identity—they even the best looking website won't hold up as a whole brand.
That's why creating a website should never be the first step in the process of branding your business.
Prior to creating your website, first get a well-designed logo and identity and preferably some sort of a style guide as well.
A solid style guide will ensure that your website looks “on brand“ and a solid discovery will ensure that your messaging is on point.
Ultimately it is all about creativity and skillset, but also you must stay focused and make informed, strategic decisions along the way.
If you're a creative, then check out my Storytelling Guide.
You can use that structured framework together with this article to run your next website project.
Want to learn technical skills?—I highly recommend the Webflow Academy.
If you're a business owner who's looking for an effective, good-looking website—then schedule a call and let's discuss your project.
Anyways, don’t forget to check out the end result live at peritidigital.com
I hope you learned something new today—Let me know in the comments below.
As an Amazon Associate, I earn from qualifying purchases.
I'm a branding expert and graphic designer based in NY. I specialize in the development of brands: brand strategy, identity & web design. Need help with your project?—Get in touch
