Do you want to launch your business website? Or to refresh an existing one? These true-and-tried steps will help you to turn your vague idea into a purposeful website. That not only looks good, but also delivers.
Following a well established plan can help you to
- focus your efforts on the right things from the beginning;
- avoid vicious cycles of adjusting this here, and adding that there;
- build a website quicker than you thought.
Sounds good, doesn’t it? So: where should you start?
Well, with your
Many people will tell you that imagery is the main pull factor when visitors come to your website. But even if they see enticing visual aids, if the content and by that I mean the website copy itself is lacking or is not aligned with what they see, they won’t come back.
And if you are selling products or services that’s definitely not something you want.
- what you say
- who you talk to
- how you talk, and
- the length of the text itself
will all influence the layout options for your website.
So instead of jumping into selecting graphics and photos, start thinking about your business and write everything down. Then re-read it and amend it. And do it once again.
Believe me, writing good copy that engages and converts is not easy. It takes practice. And it’s easier to tweak and adjust it now then after you’ve loaded everything to your actual website.
If it’s not something you want to work on yourself, search for copywriters and ask for help. Review their websites, check out their style, to find a good fit. A good copywriter will cost you money, but it can also speed up things for you in this phase.
While working with me, I’ll send you some guided templates to collect your website copy for each page that you need for your website.
When building a website another crucial factor is readability. We read and process information differently when looking at
- computer screens,
- mobile devices or
- printed brochures.
Thus, the typeface itself and the selected size for headings and body text should be carefully considered. Make sure that your web pages and blog posts are scannable.
- Aim for shorter paragraphs,
- Avoid lengthy sentences,
- Choose a lightweight structure with the right balance of whitespace.
All this contributes to legibility and to a thoughtful, polished design experience.
Where to find fonts?
A quick way to find free fonts is from Google’s depository.
At the time of this blog post there are 915 font families to chose from. So prepare to spend a few hours with this step. Search for a font that you like, and that also reads well in various sizes on your screen.
For body text calculate at least 14px and check if your selected fonts remain legible or not. If at this size the fonts features do not show well, it’s best to find another one.
Once you’ve settled for a font for your body text, choose a title/header font in a different style and weight. This will make your website more catchy and interesting.
Hint: When you select a font on Google Fonts, at the bottom of the specimen page you’ll find a few popular font pairing suggestions. Or you can use Canva’s font combination service. Select a starter font and Canva will give you a recommended font pair.
After all the copy is ready it’s time to select the accompanying visual materials. Here comes the brand board into play. Always follow your brand board’s design aesthetics when creating online or offline materials. Curate all images, photographs and graphics according to its guidelines.
If you haven’t worked with a designer on your branding, check out my blog post about how to boost your business with branding – the right way. It includes a free checklist, that walks you through the steps of how you can brand your own business if you are on a tight budget.
And while you are at it, it’s a good time to think a bit further. Not only look for images for your website, but also for your social media accounts linked to your business.
If you batch this task, you can end up with tons of good materials for the future. It would also ensure that your visual representation stays aligned on every online channel.
#4 Wireframe before #5 final design
Let’s put the puzzle together. Once both copy and images/graphics are at hand, you can start working on your website layout. This phase should take into account various aspects of the design process, like
You may have guessed, repetition is the most important from those four. A consistent and easy navigation system across all webpages is crucial.
You’ve probably seen websites where after clicking through a maze of 3-4 pages you still couldn’t find what you were looking for. And you left and never looked back! Don’t make the same mistake. You would want your website visitors to find everything quickly and to stick around.
Also, the repeated application of the same
- colours and highlights,
- structures and blocks
all aid visitors to understand the website at a glance and not to mention contribute to a cohesive look.
If you are like me, then you enjoy planning the website structure the old fashioned way. Yes, I’m talking about sketches on paper. There are also a variety of digital wire framing programs available in case that’s your preference.
While working on the wireframe, one of the key decisions to make is the expected
#6 Behavior flow
For each webpage, think about the following:
- Once visitors find your website, what do they do?
- Better to say, what would you like them to do and in what ideal order?
Every business and blog has different goals and each and every page on your website should assist you reaching that goal. So what should your website visitor do?
- Buy your seasonal offer?
- Review your portfolio?
- Sign up for your newsletter?
- Book your services?
- Send you a contact message?
You should plan the
- website copy,
- visual highlights,
- call-to-action buttons accordingly.
Feel free to look at other websites you admire. How do they do it? What structure do they use, that pulls you back again and again. They must do something right. Learn from them!
After all the pieces have come together always test the layout and design in various browsers and on different screen sizes.
Also ensure that everyone visiting from a tablet or smartphone will have a flawless experience. Sometimes it may mean that some design elements are only visible on larger screens but not on smaller ones.
You can use
to test if your page is mobile friendly.
Always make sure that you adapt the primary behavior flow and browsing experience to the visitor’s choice of device. Your website doesn’t have to look the exact same across all devices. What it has to deliver is a flawless user experience.
If you have that, your visitors will likely come back and become your future customers/clients.
Page speed matters, too
One of the often neglected steps before launching a website is to test the loading speed.
Studies show that about 75% of website visitors will not return after 4 seconds of loading time. There are plenty of free testing platforms available:
Use at least three different testing services and sessions to capture as much improvement prompts as possible.
Some of those recommendations will be server side related. About those you can contact your web hosting provider to help you with those settings. If you’ve built your website on WordPress there are free and premium plugins that can help speeding up your website.
Others will be about website elements that you can amend yourself.
One of the most common problems is formatting and optimizing images. The excessive usage of videos or photographic materials can slow down a site’s loading speed. While applying stimulating visuals is crucial to captivate your visitor’s attention, aim for a delicate balance. The meaningless overuse of images won’t win anyone over.
Remember: Ultimately web design is not about fancy animations. It’s about making sure visitors can understand and use the website. And if they are your dream client and your desired target audience, they will come back.
#8 Launch and celebrate
You did an amazing work and launched your website. It’s time to pop that champagne and celebrate!