Web design for beginners: a crash course in appealing to the brain, eyes and heart

For online businesses, good web design helps you to stand out from a sea of competitors and adds great value to users.

Achieving good web design though, can be deceptively difficult.

It involves creating a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent. All of which are key elements for founders’ to keep in mind when you are building your next website.

At our recent Design Series workshops, we were lucky enough to have Ester, a web and interaction design lecturer from Nanyang Polytechnic, share about the principles of good web design.

Here are some of the basic principles we’ve distilled from her talk.

1. Appeal to the brain – set direction and key goals for your web site

A pretty website without a clear value proposition and goals is just another pretty website. While design is important, it’s horseshit if you’re not actually creating something of value for your users. Just think of popular sites such as Craigslist that look simple but yet solves a clear problem.

Before you even start to prototype, start by writing a creative brief. The brief, in its different forms, represents the start of a project.

Writing down answers to basic questions such as

• What is your website about?
• Who is your target audience?
• Why will it be interesting for them?
• How are you going to make it happen?

.. helps you to better address the needs of your users and understand your own motivations for creating the site. I’ve seen some offline businesses who just needed some form of web presence run solely on their Facebook and Flavors.me pages, and have been wildly successful at doing so without investing thousands to create a web site. So do some deliberation before you create your site.

An example answering the “Who is it” and “What is it for” questions would be:

Amazon.com is an e-commerce (noun) website offering competitive products such as books, toys and movies (type of service) to clever / lazy / time-starved (use adjectives) adults (noun that defines target audience) who enjoy the convenience of shopping in their own homes for affordable products (address their needs and wants).

Use a Persona

The use of personas also helps to take the “You” out of “Users” and lets you see your product better through the eyes of users. It also helps to end debates about User Interface (UI) and what features to include in your website.

2. Appeal to the eyes

Here’s the fun part where we introduce three key principles of web design:  color, type and layout.

Color

Based on this useful infographic from Visual News, studies have shown that a product’s color influences 60-80 percent of a customer’s purchasing decision, which makes choosing the right colors for your products and website even more important.

Colors are essentially made up of warm and cold colors. Warm colors such as red, yellow, orange and black are usually associated with energy, while cold colors such as purple, green, blue and white are  associated with calmness and security.

Some colors work better for companies in certain industries than others. For example, blue and green are popular colors for sites related to technology and finance, but not food and beverage.

 

Color Schemes 

A good color scheme for your site helps bring it alive and makes information more accessible to the eyes.

If you are bad at picking color schemes like myself, tools like Adobe Kuler or Color Scheme Designer really makes it much easier to do so. For beginners, stick to a maximum of 3 colors for your scheme and you should be just fine.

Type

There is no doubt that type is one of the most important elements of web design. Optimizing typography is optimizing readability, accessibility, usability and creating overall graphic balance for your website.

Sans Serif and Serif Fonts

A good resource of free web fonts is  Google Web Fonts, which has 501 free font families for your web design pleasure.

Some rules-of-thumb with type are:

1. Don’t use more than 3-4 fonts on any one page.
2. Don’t change the font in mid-sentence unless you have a very good reason.
3. Sans serif for online, serif for print. The New York Times can afford to ignore this and use Serif for their website, because well, they are The New York Times.

A common question with type is: Why is it important to use Sans serif fonts instead of Serifs? The answer is because computer monitors don’t have as good a resolution as paper. This means that when your readers view a page of serif font on the screen, the little serifs all blur together and start making the text harder to read. (Which is also why Apple is going on and on about their ‘Resolutionary’ devices.)

Other important elements to take note of include:

Measure: refers to the horizontal length of a column of type. A good measure for a single column of type is 40-50 characters (including spaces).

Size: A good font size for body copy is 9-12 points, depending on the audience. An older audience will likely prefer larger fonts due to deteriorating sight that usually comes with age.

Leading (or line-height): The amount of vertical space between lines of type. A good measure of leading so that the height of captital letters fit perfectly between lines of type, is around 1.5 times the font size.

[Read more about the basic rules of typography.]

Layout

With layout, three key concepts are involved: the rule of thirds, white space and grid design.

Rule of thirds

If you’re into photography, this concept be will familiar to you. The concept of Rule of Thirds is simple – which is why it’s easy to apply in your day-to-day design work. Divide any workspace, or layout, into thirds horizontally and vertically, and align key focus points of your composition to where the lines intersect.

White Space

Essentially, white space is the empty spaces in a design. It is used to separate disparate design elements and group similar ones. One way to recognise the use of white space is the lack of graphics or text in the layout.

White space is not always “white” — it is the empty parts of the page.

The key thing about white space is that it draws you into the content and forces your eyes to focus. It may not a visual feast for the eyes, but it does help your users to focus on the words or other imagery on the page instead of becoming distracted by elements in the background or menu. It provides a much needed visual rest.

The Grid System

Simply put, the Grid 960 is a CSS framework which facilitates developers to rapidly develop UI prototypes. For several years, it has been helping developers to structure and design web layouts. Its website states: ”the 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.”

In essence, the grid system is good. It is your friend. Use it.

3. Appeal to the heart

If you’ve made it thus far, congratulations. Hopefully you can now communicate better with your designer and understand what good web design is about. If you’re looking to start a new website, here’s a comprehensive resource list by Jamie Davidson that helps you to ‘hack design’.

One thing I especially enjoyed about what Ester said towards the end of the session is about appealing to the heart. Although the guidelines are there to help, they aren’t cast in stone.

There are plenty of rules in the guidebook, but what matters is that your design is innovative, useful and helps to tell a story of the brand.

SG Geek Girls is local initiative that serves as a platform for females to connect, share, contribute, mentor and learn from each other. We want to empower the next generation of women in technology through fun, informal and interactive activities!

Special thanks goes to Nicole Tay, who was the chief organiser and lead coach for the Design Series and the rest of the awesome coaches who made time to help. Look out for our upcoming workshop on Introduction to HTML/CSS in August. 

Front page image credit: woodleywonderworks

Comments