MOST LIKELY? It is less time than it took you to read that headline and this sentence.
So... Are you still here?
In all honesty, it normally takes between 5 to 15 seconds for people to decide do they stay or do they go. Following just a few web design tips & tricks will help you create a first impression that convinces people they want to stay.
We are hoping the following information will help you hook your target audience.
What we will cover:
How important is consistent design
why you need a visual hierarchy that highlights your most important content
The importance of easy navigation for people to browse your site
Plus plenty more helpful tips. Let’s jump in!
7 web design best practices and standards
Creating a great-looking website isn’t guesswork. There really are ways to build a website that looks professional and will help your visitors find the information they need. Or, if this all seems too much, get in touch with us for a free quote on one of our many website packages tailored to fit your needs.
1. Use consistent design elements across your website
Look at any professionally built website; you’ll notice each site uses the same fonts, colors, logos, and styles on every page. There’s a good reason for this consistency.
Using the same elements/graphics/colors results in a recognizable and coherent brand identity. Even if you don't think you have a "brand" odds are YOU DO! What’s more, you’ll save time when creating your site as you don’t have to think about how each element looks every time you add one. Here are 4 factors to consider that will help with design consistency. We’ve also included some free tools to help you set up. Create a logoAdding your logo to your site makes it obvious the page belongs to your business/brand and the visitor is still on your site. If you don’t already have a logo, there are several automated logo generators out there, two you might have heard of are Shopify and Adobe. Or, if you are feeling brave, you can use Canva for a simple way to put your graphic design skills to the test. Of course, if you don't have any success with these options, give us a call.Define your color paletteChoose colors that complement each other and reflect your brand. You can use a tool like ColorHunt to browse different color palettes and help you find one you like. Choose typographyMost professional brands use two or (at the MOST) three fonts across their website. This normally includes a font for your website copy (easy to read basic font) and one for your headings and buttons (typically bolder/heavier to stand out). Remember, whether serif (has "hats") or san-serif (used on the KODS site) make sure it is EASILY readable. Visitors will not take the time to decipher hard to read text. Some font pairings work better than others. Use Fontjoy to browse font sets until you find one you like.
Decide your style before starting the design process
Once you’ve chosen fonts and colors, decide where you will use them. Do this BEFORE designing your website so every element uses the same styles.
If you decide to use the Wix website builder it allows you to define global styles such as the colors & fonts of headings, titles, body text, and buttons from the settings menu before you start. The styles you choose are reflected on your website whenever you add any of these items.
Top tip: Take your branding to the next level - use your styles on all promotional material Use the colors and fonts you choose for your website across all branded materials, including emails, social media content, print, and videos. People will recognize the content as yours wherever they see it.
2. Prioritize content with a visual hierarchy
A visual hierarchy is how you rank and display website content. So, what does that mean?
Your most important elements should always be the most prominent.
Your content has a logical sequence and is easy for visitors to navigate.
Creating an optimized visual hierarchy can be complex, but it doesn't have to be. You can simply use an element’s size, color, contrast, and spacing to guide the visitor’s attention across the page.You can do this by following these three rules:
Figure out what are your most important elements are, make them large and near the top of your page
Use contrasting colors make things like your CTA buttons stand out
Make non-essential details smaller and put them further down under the "fold" of the page (the bottom of the screen when they first hit your site)
3. Get spacing right
White space (also known as negative space) is the space between page elements.
Website spacing is so important to good website design. Getting spacing right helps guide a visitors eye through the content, ensures your text is clear, content is organized, and visitors can focus on the most important parts of your page.
If you look through the KODS website, you will see white space between every element on the site to allow our content to "breath".
White space helps you group content
You can also use white space to group elements together. Elements in the same group are closer than elements in different groups.
Example: putting the top menu items grouped and separate from the main hero items, which are separate from the product explanation items that would be on down the page.
The white space would help make these groupings obvious, despite having no barriers or lines separating each element.4. Header menu
Your homepage isn’t always the first page people visit. If a customer has done a Google search and found you, they might end up anywhere on your site. Your header bar makes it easy for people to find the information they need no matter where they landed in your site.1. Logo
Lets people know who the page belongs to. It also normally links to the sites home page where people can learn more about the company.
Drop-down navigation menu: Provides access to product pages, content resources, etc.
Links: Guide people to important pages so they can find out more about the company and product.
Sign-up button: This is normally a prominent element due to its contrasting color. If. you are selling anything, you will want anyone who lands on your website to sign up for your product.
Login button: Makes it easy for existing customers to access their account from any page.
Your header bar might not include all of this information. Consider what your most important pages are and then add them to your main navigation menu.
2. Breadcrumbs
Breadcrumbs are navigational elements that reveal where the current page sits in your overall website structure.
Websites normally add breadcrumbs under the header.
Some sites, especially smaller sites, don't always use breadcrumbs. But, if you have several layers of drop-downs, then breadcrumbs would be a smart addition to your site navigation.
5. Make your CTA stand out
Each page on your website should have a purpose. Your visual hierarchy and navigation play a big part in pushing people to this goal, but your call-to-action (CTA) is where you convince them to take the next step. Make your CTA design effective by:
Giving it a prominent position on your page
Using contrasting colors to make it stand out
Using multiple buttons throughout your page
Combining your CTA with other elements to make your offer super clear
Using different CTAs for each page
6. Look great on all devices with responsive design
Optimizing your web design for desktop and mobile devices is SO important in today's world. You can achieve this by using a responsive design with a layout that changes depending on the screen size the page is being viewed on. Most websites use breakpoints to enable responsive design. These are the points when the web page layout changes to make it look better on smaller devices. For example, the website might organize its content horizontally when a browser has a widescreen 1920x1080 aspect ratio. But it will stack content vertically when it switches to a narrower 1080x1920 aspect ratio like many smartphones. The website may also start to remove content, move it to the bottom of the screen, or shrink links into dropdown menus when in a narrower aspect ratio. You can easily see how a website’s design changes responsively by opening a window on your computer and gradually resizing it.
If you decide to use Wix's website builder it automatically ensures that your website and landing pages look great on all devices. Before publishing, you can also preview how each page looks on mobile and desktop devices with a simple click of a button.
7. Always be sure to STAND OUT
You're unique, so your website design should be too. There are many ways to make your branding stand out from the crowd. Make sure your website represents YOU, not your neighbor. By using your personal attributes, your visitors will always recognize you even if they don't see your logo.
----------------------------------------------------------------------------
If all of this seems overwhelming, then here is a quick run down of "have to"s. Even though you want your website to be unique, you should always use the accepted website design principles when designing your website.
Odds are, these are principles you recognize yourself without realizing it while browsing websites:
Your header logo should take people to your home page
Underlined or highlighted body text should signify links to other pages
Use the hamburger button to let people expand a menu on mobile
Use the gear symbol to let people open settings if needed
Include a menu in your header
Use social icons to link to your social media profiles
Use app store buttons to link to your app store listing
