Not everyone is a designer. In fact, most people aren’t designers! This is because, like most things that matter, design takes time and practice, and most of you are busy running your business.
And website design is complicated. Besides traditional design skills, coding and user experience concerns add time and complexity to the website design process. If you’re not tech-savvy, even building a website with a simple store builder can feel complicated.
But website design is also important to your business. Just consider these statistics:
- 42% of customers base their opinion of your business entirely on your website
- 94% of base their first impressions of your website on its design
- 94% of shoppers don’t trust a poorly designed site
You have the tools you need to create a great website. If you’ve finished your ecommerce checklist, you’re ready for website design 101, a comprehensive guide to design for first-time ecommerce site creators.
Let’s get started.
Website Design 101: A Guide for the Non Tech-Savvy Entrepreneur
Fundamental skills before starting Website Design 101
When I was a professional graphic designer, I spent a lot of time resizing pictures of Celine Dion. That may sound funny, especially if you haven’t spent much time around designers. But, like adding products to your online store, any graphic design project involves intense attention to detail and a lot of repetition.
So, if you don’t have a natural sense of design, there is a lot that you can do to create a great-looking website. Website design can be like a paint by number. You pick what you like, then figure out how it’s put together and make tiny tweaks to personalize. The fun part of web design is often coming up with ideas. It’s the little details that pull it all together that will make your site shine.
With some time and hard work, your website design can look good and be easy and intuitive to use.
The foundation of any website
Developers build websites and web builders using code. The structure of code is open, which means that there are a lot of different paths a developer can take to deliver a final product.
So, while most websites have similar qualities and features, there’s a good chance that the structure beneath the visuals you see on your two favorite websites are completely different, even if they look similar. This is why you can’t just copy any site you see with any WYSIWYG (what you see is what you get) website builder.
That said, it can be overwhelming to start with a blank page, so many non tech-savvy users will start with an existing theme in a website builder. Let’s use the professional themes from Selz as an example. Scroll through the themes and make notes about what you like.
It can be tempting to sign up for a free trial and start tweaking a theme with the store builder right away. But there’s nothing worse than spending a ton of time customizing a theme only to discover that the colors were what you liked about the theme, not the structure. So, it’s a good idea to do a little more planning before you start to design.
Website Design 101: User experience
When you went through your ecommerce checklist, you created a lot of the content and structure for your website design. In this stage, it’s time to review and refine the elements you’ll include in your final site design.
Try to see your website from the point of view of your average customer and how they shop online. For example, if your target market is mostly baby boomers they are more likely to be new to ecommerce. You’ll want to design your type so it’s large and easy to read at a glance and create simple navigation. If you’re taking your brick-and-mortar store online and plan to offer ecommerce to your current customers, you may want your site navigation and category names to match the terms you use in your offline location.
If most of your customers are Millennials or Gen Z, these customers will be more tech-savvy. This audience tends to consume multiple forms of media at the same time. They spend more time on sites like Twitch that offer a lot of options for interaction. So for this audience, it’s a good idea to add a video to your homepage. You may also want to think about a chatbot to quickly answer common questions instead of an FAQ page.
Website Design 101: Site structure
As you decide on a site structure, don’t limit yourself to personal likes and dislikes. Your top goal is to guide users to their goals on your site in the fewest clicks possible.
There are a few different ways you can map out your site navigation. You may want to create sticky notes for each page on your site to begin plotting navigation. You can also use pen and paper or a tool like Miro to map out your site navigation. Get ready to draw more than one version, because site navigation can get complex. Make notes of what pages you want most viewers to land on and how you want customers to navigate between pages.
Think about the path you want most site visitors to take, both forward and backward. It can sometimes feel strange to design a backward path, but if you pay attention to how you use websites when you’re online, you probably use the back button more than you think you do.
At this stage, you’ll also want to think about your SEO strategy. Answer questions like how many pages it takes to get a first-time visitor to make a purchase or what experience your website design can create for your return customers. These decisions will make a big impact on your final site design.
Website Design 101: Page layout
When you start thinking about page layouts, it can be helpful to start with a grid. Many web designers use a 12 column grid and understanding how grids work can help you get a better sense of what is possible as you design your site.
Many designers will start with your landing page. A grid helps you see how all of the different parts of your site can connect and still look appealing to the eye. Just as a clean kitchen looks better at a glance than a dirty one, an organized layout looks better to visitors than a website with many different elements, sizes and shapes.
As you start to lay out what you want each page to look like, don’t forget to think about what you want to show above and below the fold on your website. If your site has a big image at the top you may lose visitors before they get to the information you’ve included below the fold.
Keep your layout as simple and uncluttered as possible. The more design elements you add, the harder it will be to get your site visitor to focus and engage with your site.
White space around a section of your website draws attention to that section. If you’re having a hard time visualizing this, think of a park with a fountain or sculpture in the center of a field of grass or an island in the center of a pond. The extra space around the thing that you want to focus on gives it more impact.
Custom ecommerce website development
At this point in the process, you wonder if you’ve taken on too much. If you have other business priorities that are more in line with your skillset, it’s a good idea to outsource. There are experts who can help you build an incredible website that can work with your budget.
Custom website design can help your brand stand out. There are a lot of great results you can get from a template, but depending on what you want from your site, it could be difficult to get to that ideal with a store builder. A custom site will give your site the finishing touches that can establish and build respect and recognition for your business and brand.
Think carefully about how you want your site to look on mobile, not just on the desktop. Mobile shopping is more popular than ever before and many visitors will be looking at your site with their mobile devices.
After your site launches keep close track of your numbers. Your site navigation or where your CTA lands on the page on mobile could affect your conversions.
Website Design 101: Aesthetic decisions
Color choices are easy if you’ve already created a brand guide. But if you are updating your brand as you design your website, color choices are very important.
It’s a good idea to limit the number of colors you use to 2-3. This guide to color is a helpful way to understand the psychology and effects of color as you design your website.
There is one essential thing to remember when choosing fonts for your website: It doesn’t matter how cool your favorite font is if it’s hard to read.
Anyone visiting your ecommerce website should be able to quickly read everything on your site. Test it out, and if there’s a single moment you have to pause for readability while skimming your site, you should think about trying a different font.
Use more than one typeface to create interest. If you’re using more than one font, you’ll want to choose one serif and one sans serif font. More than two typefaces can end up feeling chaotic on a web page.
Size matters with web copy. The biggest copy on the page will be what your site visitors read first. Try to use serif fonts for headlines, because these fonts are harder to read at small sizes. If you want to do a quick test to see if your fonts are the right size, try reading on your phone. Type appears much smaller on mobile than it is in a typical Word document on your desktop.
Photography and videos
You have limited space and resources to communicate on your website, so you want to make sure everything you include is powerful, useful and contributes to your goal.
Images will have a big impact on how people respond to your website design. You want to use images that communicate something useful. Images are great for multitasking on your ecommerce website. So, add images that not only show off your product but also display how your products can help your audience achieve the desired outcome.
For example, if you’re selling athletic necklaces, don’t just show off your necklace. Show someone wearing your necklace while accepting a marriage proposal on the Jumbotron at a baseball game.
You can use photographs to show what your product does, how it does it and why you started your business. You can also use photos to connect your visitors with other parts of the site that they might not usually notice right away. Photographs are the quickest and most effective way you can tell the story of your products and brand with your website design.
Site speed is important, and most of what slows a site down are images. Web resolution is 72 PPI, so your images don’t need to be at a higher resolution. This article has some other great tips for creating product photographs and resizing your photos.
A quick note: You may also want to avoid gifs. They can slow down a site and some visitors find moving elements on a website distracting. But video is a great way to add interactivity to your site. It’s also a big boost for your SEO.
Focus on features that help you reach your goal
A website is an ongoing project and will need to evolve as your business grows. At the same time, after the initial rush of designing it can be tempting to add every new option and feature to your website, which can turn your beautiful site into a cluttered mess.
Create a checklist that will help you hold on to the vision of your original website. This way, when you need to make additions or refresh your site it won’t feel jarring or uncomfortable for your best customers.
Website Design 101: Time to design
You’re ready to design your website. Keep in mind, most of the design process is attention to detail and repetition. This step will require patience and asking your community for feedback. If you’ve done a thorough job of planning, designing your website should be a smooth and effective process!