In this video, we’ll cover changing the design of your website’s template – such as modifying your website’s colors, font faces, font sizes, and swapping images. We’ll also discuss responsive web design and how you can make your site look good for mobile viewers.
Now that you understand the importance of structuring both your page and its content, let’s talk about changing the design of your website’s template. This is the physical appearance of your website, which as you may suspect, is also important.
As I mentioned in the previous step, website builders by nature, are meant to offer pre-designed templates that are effective and ready to go. You pick a template that matches your style and then you make some quick edits by swapping out text and images and you’re basically done.
However, you are by no means limited to the template you have selected. Here in Wix, I can fully customize the template or even delete it and redesign it from scratch.
As I mentioned earlier, the design of your website depends on your creativity and the dedication you’re willing to put into it.
Although most modern website builders today do come with some nicely pre-designed templates, there are a few important modifications to make regardless of what template you choose. When you pick a template for your own website, at the bare minimum, you’ll want to make the following modifications:
The first, is color. Using the right colors on your website is not only important for the design, but for your business branding and product marketing as well. If your business already has an existing color scheme, then you’ll want to use those colors on your website. If you don’t, then now is the time to determine a good, new color scheme.
Note: Color psychology is often used in marketing. Different colors have different meanings associated with them and it’s a good idea to choose a color that matches your type of business. Just look around and you’ll see evidence of this marketing strategy – fast food restaurants are usually red and orange, banks and financial institutions are often blue, while luxury products are typically packaged in black.
On the web, colors are determined by using a hexadecimal value. For example, the color red is defined as #FF0000 in hexadecimal.
It’s important to understand and use your website’s colors in their hexadecimal value as you’ll need it to get the exact color down every time. When you determine your website’s colors, write down each of the color’s hexadecimal value on a notepad so you can always reference them later. These colors are important and now part of your business branding.
Note: There are many free tools available online that allow you to determine a color’s hexadecimal value. For example, you can visit www.colorpicker.com to pick a color and find its hexadecimal value.
After you determine your website colors, you can start swapping them into your template. Some website builders, like Wix, allow you to add and save your colors within the editor to make using them later easier.
Note: If you’re having difficulty choosing a good color scheme, there are several great tools you can find online, including this color wheel from Adobe: https://color.adobe.com/create/color-wheel
The next modification for your template is typography. Typography and the font-faces you choose have an impact on multiple aspects of your website – including readability, mood, perceived article length, user experience, and more. Just like with color, there is a psychology to it that can give your viewer an impression about your message, before they even beginning to actually read it.
Spend time looking at the different fonts your website builder provides. Remember, you want to choose a style that best expresses all of the multiple aspects typography conveys.
In general, its best to only use 2 or 3 different font types throughout your entire website. For example, you could use one font for your headings and another font for your body text. And, if needed, you could add a third font – perhaps for the navigation menu or for content that needs stand out from the others. Be sure to choose fonts that go well together.
Once you’ve chosen your new font faces, you’ll want to check the font size. Font size is typically measured in pixels (px) for most website builders.
Make sure your font size is legible for your readers. Especially for the body text. Most body text on a web page is usually 16px in size.
Headings are typically larger and of course, vary depending upon your website’s design and the font face you chose. It is ok to use multiple sizes for different headings. For example, an h1 heading can be 36px in size while an h2 heading might only be 30px in size and an H3 might be 24px.
In general, just remember to use fonts on your website that match the mood and style of your business, that look good together, and are sized appropriately so that your text is legible.
The last modification for any template is changing the default images. Fortunately, images are very easily swappable in website builders and you should do so. Although it may be tempting to use the stock images that come with your template, it’s better to swap them out with your own custom ones. Especially for local small business owners, you should almost always use images of your own, real business. For example, Sarah shouldn’t use stock images of a bakery shop – she should use real images of her own bakery shop! And most definitely, she’d want to use real images of the goodies she bakes every day, not just a stock image of a generic product.
Note: I do want to mention that Stock images are not always a bad choice. Most website builders, like Wix, offer a variety of free and paid stock images you can use on your website. These images are professionally shot and usually look really good. Using stock images really depends on the type of business you have and how you use them. That being said, more often than not, using your own real images are usually the best choice for a small business.
If you don’t have a good camera or are not very skilled in photography, have a friend do this or hire a local professional photographer. Using relevant, good quality images are well worth the extra cost and time.
Another common issue, regardless of whether you’re using stock images or your own, is editing the image so that it perfectly blends in with the design of your website. And by editing, I mean more than just cropping, resizing, or enhancing the color of an image. A well designed website will use images with advanced image editing techniques. As you can see in the examples below, this really gives your website a professional touch.
Now, unfortunately, many small business owners won’t have access or the knowledge to use Adobe Photoshop, which is the industry standard tool that many professional web designers use to design websites. So you will be at a bit of a disadvantage here.
Most website builders do have their own tools for basic image editing, such as cropping and resizing, however – it’s typically very basic. For more advanced image editing functionality, there are some free image editors on the web that you can use if you’d really like to get creative. You can check out our resource guide on creating website visuals for non-designers to learn more.
So, at this point, you’re already well on your way to having a good looking website. I’ve already talked about modifying your template’s color, typography, and images. By applying these modifications, your website should now be able to match your business’s branding and utilize a unique, custom design.
However, there’s just one more important aspect that relates to the design of your website, that I want to talk about. And that’s designing for mobile users.
In this modern day and age, many of your website visitors will most likely be viewing your site on mobile devices such as tablets and smartphones. These devices have much smaller screen sizes than a desktop computer and thus your website will need to respond or adapt to a smaller screen to look good on it.
This is technically called responsive web design. You have may have heard term before as it’s a popular topic. It is important to make sure your website will be viewable and accessible to mobile devices. Most website builders will either offer responsive or adaptive templates that are suitable for both desktop and mobile viewers. Note that responsive designed templates are ideal and hopefully soon every website builder will start to offer these.
In our case, Wix currently offers adaptive templates. We can switch editor view modes between designing for the desktop and designing for mobile. In the mobile view, you can make adjustments and hide less important elements to make your site look good on mobile screens. You should preview your site on both modes to make sure everything looks great.
Note: The desktop and mobile versions of your website represent different viewing modes of the same website – they are not separate websites. Therefore, its best to design, build, and edit your entire website in the desktop view and then when finished, switch to the mobile view and make the proper adjustments. Refer to your website builder’s documentation on additional tips for editing for mobile users.