How to Design a Website: Tips Every Beginner Must Know
So far this week, we’ve shown you how to set your own website up. Now, we’re going to look at how to curate the perfect design for your little corner of the internet. By the end of this article, you will know how to do the following:
- Create a web page from scratch
- Web page design
- How to test a website frame
- How to create a website prototype
- How to apply your brand to your website
Before you start – consider your time and goals
In this section, we’ll get stuck into designing a website in detail, from early layout sketches to final production. It’s really important to realise that creating large, quality websites is a time-consuming, iterative process.
That process starts now but will continue…forever. The web is an ever-changing arena and its expected to keep moving. You’ll always be working on your website as you improve its performance over time or you change your website goals to react to changes in the market.
To get something up and running quickly you need to be very strategic about what you choose to do first. You don’t need to launch with EVERYTHING immediately. Look back to your goals and outline what the smallest possible website would look like to meet those goals – a minimum viable product.
Now focus all your attention on achieving that. If you go too big, too soon, you are going to end up bogged down for weeks. Be clever about the work you choose to take on.
Perhaps all that you can achieve this week is getting a one-page website up with your prototype logo and ‘coming soon’ text on! That’s definitely better than nothing and gets you set up to expand on later.
Building your website might seem like a daunting task but as you plan your website, you’ll realise which pages are absolutely essential for launch and which pages can be added in later. It’s better to create a smaller, high-quality website than to create a broad site with lots of pages containing poor or missing content. You will lose nothing from cutting these extra pages to begin with. Websites are expected to evolve and change over time and you can easily expand your website post-launch.
Planning a website page
When you start to build your website, the first thing you need to consider is what pages to launch your website with and how you are going to link them together so users can easily find the content you create.
Navigation is incredibly important to get right. If visitors can’t find what they are looking for quickly they’ll leave just as quickly as they arrived!
This is usually tackled by having a navigation bar that stays locked to the top of the page when the user scrolls down. Navigation for 95% of websites comes in the form of a bar at the top which collapses to an icon when on mobile sites. It’s therefore essential to pick the right top-level pages to sit in this navigation bar. You don’t necessarily want every single page to be linked at the top as this will cause the bar to get cluttered very quickly, hindering navigation.
If your website does require a lot of pages, even from launch, you’ll need to group them into categories and nest them into drop-down menus in your navigation bar. You’ll have seen this plenty of times in fashion websites where they have a large range of products split into multiple categories. They generally use large, spacious dropdown panels to accommodate this. The best examples manage to display a large range of options clearly without it turning into a jumbled heap of menus inside menus. If you are planning a fashion business or any business with a diverse range of products, it is worth spending a lot of time here getting navigation right. If people can’t find your products, they can’t buy them either.
Refer back to your market research to understand what your visitors might want to achieve by visiting your website and get them to that point as quickly as you can with as little confusion as you can.
Your market research should also help inform the general design of your website.
Web page design
One of the things you have to think about when designing a web page from scratch is the design.
Last week we went through creating a mood board to help establish the look and feel of your brand and to gather together inspiration. You should draw upon this again for your website. You could even create an entire mood board dedicated to website inspiration. Once again, there are plenty of resources showcasing incredible website designs.
Below are some resources you could use to help you with this process:
- Abduzeedo website articles
- Dribbble website examples
- Behance website examples
- Pinterest website examples
Wireframing is a common and exceedingly useful step in design whether you are creating a one page landing site or an expansive e-commerce store.
It allows you to quickly play around with layouts without having to work up high-quality designs. Wireframing can be done with pen and paper and the process involves mocking up each web page using lines and boxes to indicate where content can be placed. This allows you to quickly generate layouts and imagine the flow of the page without spending a huge amount of time over it. Use this to consider the placement of your calls to action (CTAs), images, blocks of text and navigation.
This is an extra step you can take when building your website. This is far easier than it sounds as it involves zero coding since there are plenty of apps out there designed to make this process quick and easy.
The idea is to digitise your wireframes (you can still use placeholders for text and image) and use the prototyping software to link them together so that you can get an even clearer feel for the flow and navigation of the site.
You can create greyscale, static images of your wireframe layouts in image software such as Photoshop and then upload them to these prototyping sites. The sites will then allow you to link multiple prototypes together to create a mockup of your website that you can preview and test.
Many of these apps will allow you to make designs directly inside the software:
You can start to use your prototypes to work out where you are going to place your messages to be most effective. As you replace placeholder content with real content, ensure that it is working toward achieving your strategy. When someone arrives at your landing page, will they know exactly what your business does within a few seconds? Is the website quickly driving them towards the actions you want users to complete?
Of course, this is as much about the messages themselves as where they are placed and presented on the page.
Branding website design
Once you’ve established your ideal layouts the design will naturally be fulfilled by your brand. You need to apply the work you completed last week to your website since, consistency is key to building your brand. Your website needs to look the part and fit in with the rest of your marketing activities and communication.
The brand imagery you have chosen is going to be critical for creating an appealing and engaging looking site. High-quality images are essential to ensure your website looks sharp at lots of different sizes. A blurry image creates a bad first impression.
The logo that you designed in the branding week should be your first port of call. Make sure it’s visible at the top of your website on every page. Many websites will embed it into the top navigation menu which will likely be on every page. You can also use the logo for navigation, clicking can return to the homepage of the site.
Brand colour locations
Applying your brand colour palette to your website ensures your brand comes through clearly, this alone can be enough to make your website instantly recognisable. Your primary brand colour should feature consistently across your site.
Here are common places to get your primary brand colour in:
- Navigation headings
- Top banner background colours (be careful if you have a dominating colour)
- Page titles and subtitles
- Text hyperlinks
- Button colours – (although you may wish to choose a contrasting colour to make your CTAs stand out)
- Colour icons
- Overlays on top of your stock photos
You can use your secondary colours in similar ways to create interest, variation and contrast. Just be consistent with your method of application. Remember, you can use your prototyping software to experiment as much as you want. Testing variations and iterating on your designs is the key to arriving quickly on a final design you are happy with.
Choosing the right images
Picking good graphics for your website should utilise the brand assets we described how to create in week 8. Here are some further tips for applying them to your website:
- Make sure the images you pick compliment the text you write to go with it. They should support the clear message you are trying to get across.
- Be careful about putting text on top of images. It can hurt readability. Applying an accent colour over the top can help by reducing the noise in the background.
- Large images can affect loading times. You can always save them as jpegs to compress the file size if this is the case.
- Avoid stock that looks too generic or fake. It’s really obvious and will hurt your website trust and authenticity (more on that later).
- Don’t go overboard with imagery. Images are very powerful and can be distracting if overused. Remember your website goals and make sure each image has a role and isn’t hindering them.
Focus on website
Another critical element to web design is how you write and present your content in a way that people will actually take the time to read it. Writing essays about products on your homepage just doesn’t work and is not engaging enough.
Some of this is solved by using a clear web font, with good contrast, size and spacing. If you are using themes built into a website platform then there are plenty of themes out there that naturally have great legibility built in. However, this is only half the battle. Reading fatigue, especially on screens, is very real and you need to get clever about ensuring you write and position your text in a way that will actually get read.
Follow these guidelines:
- Ensure your copy is clear and avoid ambiguities.
- Keep sentence structure simple. Avoid complex words and combinations.
- Get to the point quickly.
- Break up large amounts of text into separate, smaller blocks with their own title.
- Don’t try and get across too much at once. Decide the point that each text block is trying to get across and stick to it.
- Use images alongside text to encourage people to read.
- Use white space! Provide generous space (padding) around your content so that it’s not crowded.
How to make sure you build a mobile friendly website
It’s incredibly important for your website to work smoothly on mobile phones and tablets as so many people consume content through these devices now. Google will actually penalise websites in their searches if you don’t fulfil this!
Fortunately, this is pretty easy these days. Most standard themes that come with a website platform should use ‘responsive’ design. This means that as the screen width decreases, content will automatically adjust to fit in this new size, perfect!
Still, it’s worth checking that images and videos you are using remain viewable when scaled down and that text is still readable. If you don’t own several different types of tablets and mobile phones you might be wondering how to check this. Well, the quickest way is to grab the left or right edge of your browser (make sure it isn’t fullscreen) and drag it to the left or right to make the window larger or smaller. You’ll see your website content adjust as you do this and so you can analyse your layouts at different sizes. There is also a more precise method which involves using a tool that is built into the Chrome browser:
- Right click on your web page
- Click ‘Inspect’ (this brings up a panel)
- In the bottom left of this new panel is an icon of a screen and phone (toggle device toolbar)
- Click this icon
Now along the top you have several grey bars that allow you to simulate what your browser looks like at specific resolutions. There is even a dropdown for choosing popular phones/tablets and the resolutions they use. Neat!
Whether you choose to build your company website yourself or hire an agency to do it for you, there are a lot of costs associated with designing a website. Not only will you have to pay for your domain name, hosting costs and whichever web platform you go for, there will also be ongoing website maintenance fees.
If you hire a design agency to do it for you this will be a big cost for your startup. You should consider whether your funds will cover this cost or whether it will be cheaper to do it yourself. As we’ve shown over the past few articles, setting up a website is a lot easier than you think. While there are costs associated with both approaches to designing your website , you need to determine which is more feasible for you.
When designing a website, think about how you want your brand to be represented. Chances are, your website will be one of the first impressions customers get of your brand. This means it’s crucial that you get the messaging right. You also need to ensure that your website is user friendly and that it can be used across a wide range of devices. A website that doesn’t look great on mobile may cause a user to leave.
Refer back to your strategy and think about how you can use your design to encourage your users to move around the website the way you want them too to achieve your desired goal.
Once you’ve designed and launched your website you’ll want to check whether it’s actually serving its purpose. To find out about how to track the success of your website, click here.
This blog post forms part of our series on how to start a business in 90 days. For an overview of the series and all the blog posts so far click here.
The 90 Day Challenge is also available as a series of free chapters here.