d
c

Web Design Guide

A beginners guide to design a practical yet stunning website.

1. Stick to one font family.

Focus on consistency and readability rather than being fancy.

Check other sites using Whatfont (a Google Chrome extension)

SAN SERIF

San-Serif

Libre Franklin (Current)

Open Sans

Lato

Roboto

You can also try: Raleway, Monsterrat & PT Sans

Simple, Clean and Modern. Most websites will use this typeface.

 

SERIF

Serifs

Cardo

Merriweather

Pt Serif

Traditional, Elegant & Handcrafted Look. 

Also good for long reading, such as blogs.

Examples 1   2   3

2. Body font size 15-25px

12px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci odio. In vitae lectus ac tortor vehicula eleifend. Donec pharetra mattis magna, et pellentesque nulla pharetra vel. In eu blandit magna.

18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci odio. In vitae lectus ac tortor vehicula eleifend. Donec pharetra mattis magna, et pellentesque nulla pharetra vel. In eu blandit magna.

28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci odio. In vitae lectus ac tortor vehicula eleifend. Donec pharetra mattis magna, et pellentesque nulla pharetra vel. In eu blandit magna.

3. Line Length

Use 45-90 characters per line for an easy read.

(especially if you have alot of text)

Good

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum consequat sollicitudin. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus.

Bad

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum consequat sollicitudin. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus. Donec semper ligula a purus fringilla varius. Quisque ut nisi dui. Maecenas libero eros, sagittis quis dui in, tristique dignissim sapien. Sed vel dui ornare, varius massa sed, scelerisque libero. Quisque dignissim sapien id augue efficitur lobortis sed at eros. Quisque vitae volutpat ex. Suspendisse in egestas turpis.

4. Be Consistent with Capitals

 

UPPER CASE WORDS SLOW PEOPLE DOWN BY 10%

Can use CAPS in headings, navigation menus and buttons.

Sentence case – Most of the time you will be using sentence case for your website.

Title Case – Use Title Case for Blog Post Titles and Product Titles.

Exclude words

Conjunctions (and or but)
Prepositions (to and in)
Articles (a or the)

5. Using Headlines & Subheadlines

Define hierarchy by reducing font size, font weight or colour.

BAD

Create an Amazing Headline

Design an “app like” mobile responsive website.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, duis nec orci odio.

GOOD

Create an Amazing Headline

Design an “app like” mobile responsive website.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit, duis nec orci odio.

6. Use Neutral Colours

Can be used to seperate content, header, footer & anywhere you don’t know which colour to use.

#ffffff
#f6f6f6
#cccccc
#999999
#4d4d4d
#222222

7. How to Add Text Over Images

Focus on relevance and readability.

Normal Image with Text Overlay

Normal Image with Text Overlay

Click image to see how to do it.

Added 15% Opacity Colour Overlay

Click image to see how to do it.
Normal Image with Text Overlay

Normal Image with Text Overlay

Click image to see how to do it.

Change Positioning and Added Colour Overlay

Click image to see how to do it.
Click image to see how to do it.

Change Positioning and Added Blur Effect

Click image to see how to do it.
Looks pretty good but wanted to show another way to do it.

Normal Image with Text Overlay

Looks pretty good but wanted to show another way to do it.
Click image to see how to do it.

Add Background to Text

Click image to see how to do it.

Note: Not every image may be perfect

8. How to Set Button Colours

 

  1. Determine your main colour
  2. Go to 0to255.com
  3. Put in your #hexcode and pick colour e.g. #333333
  4. Choose a colour that is -/+ 2 shades the original e.g. #222222
  5. Apply it to all your buttons.

9. Image Size Guide

Images directly from websites/cameras might be too big e.g (5000 x 3000px) hence when uploaded to site, it would load slowly.

Below are some guidelines to help you decide what to crop them as before uploading to your website.

1. You can find images at thestocks which compiles all the good sites all in one place!

2. You can crop & edit your images for free on fotor.com

Approx size (px) = 400 x 305

Small (JPG)

Approx size (px) = 400 x 305
Approx size (px) = 800 x 615

Medium (JPG)

Approx size (px) = 800 x 615
Approx size (px) = 1200 x 915

Large (JPG)

Approx size (px) = 1200 x 915

Hero Image

Approx (px) = 1800 x 1000

Size (KB) < 400KB

Saved Format = JPG

 

10. Product Images

 

All uploaded sizes should be around be 800 x 800 px

 

Keep it proportional

 

White background recommended

 

If page loads x10 Images at 287KB each = 2.87MB

Whereas x10 Images at 61 KB each = 610 KB

Note: For non feature images you can use images which have a background and may show the product in use. As this doesn’t show/load on main shop page.

11. Product Descriptions (Long & Short)

 

Not enough people spend enough time on this, but its crucial to making sales!

You need to convert visitors into sales so provide them all the information so they can make an informed decision.

Here is the template but also a guide of what to include.

 

Long Description

  1. Add as much detail as possible. Normally when people go to the store, you can ask the staff for recommendations and ask any questions you may have. However online, its a different story – if they are not sure, they just leave. Most can’t be bothered to send an email.
  2. Another tip is to create a FAQ page which includes details about delivery/shipping and refunds, which you can do later.
  3. Learn from Amazon’s product description. By the way for those of you who really want to dominate the eCommerce space is to read the Everything store and Delivering Happiness.
  4. Add Images > Click “Add Media” above and Upload files from your computer.
  5. Add Video > Copy and Paste the YouTube URL straight into here.

 

Short Description

  1. Include the summary of product
  2. Shipping Info – e.g. Domestic delivery: 2-3 days
  3. Link to Size Guide

#77A464 (Same as “stock count” colour)

12. Taxes Explained

 

Disclaimer: I am not an tax expert and taxes vary for each country/states. But I still want to explain what it actually means to you (seller), what you need to do and how to input the settings into WooCommerce.

Note: I recommending getting in touch with your contact your local accountant.

Most countries have a standard nationwide tax rate. Which makes things fairly simple, as you only need to enter one tax rate into WooCommerce.

However, if you are a seller in the USA. There is no standard nationwide taxes, instead there are states/district taxes. Which means it’s all different and you may need to enter in thousands of tax rates into WooCommerce. (Don’t worry, there is a simple way of doing it which I’ll show you)

There are two types of States.

  1. Origin Based State Tax
  2. Destination Based State Tax

Note: 6 States don’t have sales tax.

 

Origin Based Sales Tax (Simple)

  • Tax rate based on the location of your business
  • You only need to add one tax rate, if you have one location.

Destination Based Sales Tax (A little bit more work)

  • Tax rate based on the location of the shipping address
  • Since each area has a different rate, you will need to know thousands of tax rates.

 

 

 

So when you need to pay and charge sales tax?

You only have to pay sales tax if you have a nexus in that state.

A nexus basically means, do you have a “significant presence” in the state. i.e. have a shop or employee there. Read more here.

 

What it means?

If your business is based in Houston, Texas. And if a buyer from New York buys something from your online store – then you don’t need to pay/charge sales tax.

But if your buyer is from Dallas, Texas – then you need to pay/charge sales tax.

 

So what do you need to do now?

For Origin based sales tax state:

  1. Find the rate here.
  2. Add the rate into WooCommerce.

For Destination based sales tax state:

  1. Install & Activate the plugin Tax rate upload (we need to upload all the rates for your state)
  2. Go to get all the rates at Taxrates.com (enter your info and download)
  3. Import into the plugin and Configure settings (check if shipping is taxable on TaxJar)
  4. Check the WooCommerce tax rates, you should have imported a few thousand rates.

 

How it works?

When buyers enter in their zip codes to ship to, it will calculate the rate from imported rates.

13. Shipping Zones & Shipping Classes

 

  1. Create a Domestic Zone
  2. If you ship internationally, I recommend setting a shipping zone for each country – if your shipping cost differs.
  3. Leave the “Rest of the world” as no shipping methods offered to this zone.
  4. If you have “heavy items” that are different price to ship. e.g. a sofa. Then you will need to create a shipping class  e.g. “heavy items” and then go to that product specifically and set the shipping class to “heavy items”.
  5. Go back to the “flat rate shipping” and add in the cost of that shipping class. This enables you to automatically charge a different rate for heavy items.

Note: If you offer free shipping for normal items, I recommend using a plugin “WooCommerce Advanced Free Shipping” so that you can set it so, if people have the heavy items class in cart – the free shipping option won’t be available. Also allows you to set in more advanced conditions.

14. Choosing Colours

“92.6% of people say the visual dimension is the #1 influencing factor affecting their purchase decision.” – KISSmetrics.

Colours should be chosen with care, it should evoke emotions that you want your brand to reflect.

Method

1. Understand audience and think about what emotion you want to evoke.

2. Choose primary colour – see colour meanings.

3. Find the right shade for your base colour on materialuicolors.

4. Find complementary accent colour on paletton by entering base colour.

5. Add neutral colours 

  • White (#ffffff)
  • Light Grey (#f6f6f6)
  • Dark Grey (#4d4d4d)

6. Save colour codes by signing in to Adobe Color CC or write them down.

Tips on Apply Colours

  1. Try use base colour for most things. But if it doesn’t look good or is not visible, use a neutral colour.
  2. Use Accent colours for buttons, icons, sale tags and things you want to draw attention to.
  3. Header/Footers – use neutral colours because you don’t want to draw too much attention away from your products and content.
  4. You can also use shades of your colours you have chosen by using 0to255.
  5. Doesn’t need to be perfect but does need to be consistent and never sacrifice readability for design.

15. Amazing Resources

 

Automate Sales Taxes with TaxJar (USA & Canada)

Recommended Readings

Sales Tax Guide for eCommerce Sellers (USA)

16. Additional Videos