The following is Part I of a 5-part series of posts I’m going to be running over the next few weeks on the most essential skills to know if you want to be an online entrepreneur. It’s a series meant for beginners who are interested in starting or growing an online business.
There are many different ways to earn an income online. You can sell physical products through a website. You can sell digital products, such as ebooks, online courses or audiobooks. You can sell services, such as consulting or coaching. You can sell other people’s products and receive a commission for each sale you make (called affiliate marketing). You can earn money through advertising by driving traffic to a site and having people click on the ads you display. The common thread through all of these examples is that your business is run through a website.
I initially was going to make this one post instead of a series, but it was getting pretty long and I realize that not everyone wants to read my 3000+ word posts. So instead I’ll be going into one lesson a week for the next 5 weeks. The topics I’m going to cover are:
- Web Design
- Web Programming
- Search Engine Optimization (SEO)
Of course, if you are running an online business you probably won’t be all of these jobs yourself. Instead, you may hire someone else who is a specialist to do certain tasks for you. I’ve found it’s difficult, though, to effectively hire someone if you don’t know the basics of the job yourself. Plus, learning new stuff is awesome. So without further ado, let’s start with Part 1.
Web design (not to be confused with web programming, to be covered next week) is the art of laying out a beautiful and functional website. You want your site to be:
- Aesthetically pleasing, so people like what they see.
- Functional, so it’s easy to navigate and find what you’re looking for.
The best websites have a balance of these two elements. It’s often better, though, to have a functional website that’s on the plain side than a flashy, overly-cluttered site that’s attractive. People don’t come to your website to marvel at your graphic design skills – they come to see the content or products that you provide.
As a side note: Keep in mind that hiring someone to design a website is not the same thing as hiring someone to program a website (and I’ll cover this more next week). A designer creates a mock-up of the site (in Photoshop, for example), and a programmer actually gets the site up and running on a server in the proper web programming language.
Here are some of the basic concepts of web design:
There are a couple essential sections of any website – header (plus or minus logo), content area, navigation, sidebar or sidebars, and footer. There’s a lot room for creativity when it comes to how you lay out these areas or if you include them at all.
One popular concept in web layout is the 960 grid system. With this system you create websites with a width of 960px, using the rule of thirds to create an aesthetically pleasing layout. Imagine drawing a grid inside your 960px website with vertical sections of 320px and keeping elements inside these sections. So for example, a layout with one sidebar would have a content column 640px (2/3 of 960) and a sidebar column 320px (1/3 of 960). You could also divide the 960px into 12 vertical sections of 80px each and use chunks of 80px for your elements.
Here’s an example of how you can use the 960 grid system to sketch out some potential layouts for your website:
(Image from The Principles of Beautiful Web Design)
You also should keep in mind which content is “above the fold,” meaning which part of your site is visible when you first visit the page, before scrolling down. Ideally, your most important headlines, content and links should be above the fold.
Typography refers to the fonts and typefaces you use. While typography can get pretty intricate, when you’re starting out the most important thing to pay attention to is the difference between serif fonts and sans-serif fonts. (Serifs are the little flourishes and strokes at the ends of letters and numbers of serif fonts). For print media, it’s common to use sans-serif fonts for headlines and serif fonts for text. However, given the way a computer screen affects readibility, it’s becoming popular to do the opposite with websites.
It’s generally thought that sans-serif fonts (such as Verdana, Arial and Helvetica) are better for reading on a screen, but there are plenty of great websites (like, ahem, mine? Eh? Maybe?) that use serif fonts for the main content area. It depends on the type of feeling you want to evoke.
The best serif font for text on a website is probably Georgia. For sans-serif, you can’t go wrong with Arial, Helvetica or Verdana.
Keep in mind that you can design your website with all sorts of crazy fonts, but if the person who’s viewing your site doesn’t have the font installed on their computer, it won’t display properly. That’s why it’s good practice to use web safe fonts like the ones I mentioned above (which are installed on essentially everyone’s computer). If you want a cool font for a header or headline, you can use an image for this effect.
The careful use of color can help you evoke the right emotions when a visitor comes to your site. Do you want your site to look calm? Trustworthy? Exciting? Creative? Elegant? Here’s a basic guide to the emotions and feelings each color is thought to communicate:
Red – Excitement, adrenaline, passion. Darker shades of red of good for communicating that your project or service is rich and indulgent – such as a fine wine or product for high-end living.
Orange – Happiness, enthusiasm, creativity. Good for sites related to food or cooking (it’s thought to make you want to eat more).
Yellow – Also a happy and energetic color, but be careful not to overuse it because it can get overwhelming.
Green – Nature, growth, hope, freshness. More calm and soothing than red, orange or yellow, so you can use it a little more heavily in your site design.
Blue – A very commonly used color in website design because of how it communicates trustworthiness, stability and clarity. Also can evoke images of nature, such as the ocean or sky.
Purple – Royalty, wealth, extravagance. An uncommonly used color in web design, so it can help your site stand out a little more.
White – More the absence of color than a color it self, white helps communicate feelings of space, purity and light. Having adequate white space (empty space) incorporated into your design is key to making your site uncluttered and easy to read.
Black – Power, elegance, strength. Often used just for text or accent. Consider using black and white alone to make a site pop.
You should also think about what kind of color scheme you want to use. Do you want to use one base color with tints and shades of that color for accent (monochromatic)? What about two base colors that are opposite each other on the color wheel, for contrast (complementary)? Or maybe three base color that are spaced apart on the color wheel (triadic)?
This Color Scheme Designer is a great tool to play around with to learn more about how color scheme and the color wheel work and to help you design a color palette for your website.
When it comes to websites, colors are best expressed with hexadecimal values rather than color names. So, for example, instead of white, you would use #FFFFFF. Instead of blue, you’d use #33FFCC. This way, you have more precise control over the colors you use and more consistency across web browsers. Here’s a good beginner’s explanation of hexadecimal values and color.
The Color Scheme Designer tells you the hexidecimal value for all the colors in the scheme you create – another reason it’s super useful for website design!
When a person arrives at a website, they make a split second decision about whether they want to stay or leave. You want to make it as easy as possible for your visitors to know what your site is about so if something interests them, they’ll stay around and explore a little longer. While the header text takes a second to read, an image can communicate your message in a fraction of the time. The careful use of images is a key part to creating a clear message for your site and making it aesthetically pleasing. Make sure that images you use are relevant, interesting, and appealing.
So where do you get the images? While it’s easy to do an image search on google and download the file to your desktop, it can get you in some copyright trouble. A better option is to use a site like Flicker and search for images under the “Creative Commons License,” which allows free use of images as long as your follow certain guidelines (usually crediting the person you took the image from).
I’ve found that graphic designers are extremely generous people. If you need a certain image element for your website, a google search will usually turn up a ton of sites where designers have uploaded their images for free use. For example, I was looking for texture images to use for this blog (I’m working on a major redesign – stay tuned!) and came across a ton of sites like this one with lots of cool and creative images resources.
One thing to keep in mind – images slow down the amount of time it takes to load a page. You’ll want to make sure to optimize your images for the web by decreasing the resolution so the file size is smaller.
Every choice you make about how you design your website, from the layout, colors, images and fonts should help communicate the same central theme and brand of your website and business. So first, you need to know what your brand is. Then, you need to create a website that is congruent with it.
Here’s an example of two blogs I read, both with great designs that communicate the central message of the site. Zen Habits is a blog about minimalism. Notice how the layout and colors help communicate the same message of simplicity and calm. On the other hand, The Art of Non-Conformity has a much different design, with a lot of images and textures, that evokes a feeling of adventure and world travel.
So there you have it – my beginner’s guide to website design. Stay tuned for next week when I’ll talk about web programming!
Principles of Beautiful Website Design – book on amazon
960 Grid System – layout system for web design
50 Helpful Typography Tools and Resources – Smashing Magazine
Flicker.com – free image source site (make sure to search for images under the “Creative Commons License”)
Color Scheme Designer – color wheel
Paint.net – free graphic design software
Gimp – also free graphic design software
Photoshop – decidedly unfree, but the de facto standard of professional graphic/web designers