Join Now

MuseThemes Guide to Web Design Basics

If you are using Muse, chances are pretty good you are a designer, but you may be anywhere from a baby-bird beginner to weathered and wise advanced – the beauty of this software is that it works for such a variety of individuals and organizations. But no matter what your skill level it’s always a good idea to bring it back to the basics so we have curated the main principles we live by when designing.

Grid System

 

Using a consistent grid for all of your web pages will help create balance and encourage consistency throughout. By creating order within your site, visitors will be able to obtain information relevant to them and walk away with a sense of your brand.

What your grid looks like depends on what you want your visitor to focus on – the critical content. Overall, a grid allows you to take advantage of alignment, order, proximity, enclosure, similarity, and contrast – all of which will allow you to highlight and group critical information, making it easy on your visitor.

You certainly do not need to design only within a grid system. Being too much of a stickler to the grid can actually make your design look boxy, but knowing how they work will help you break outside this grid intelligently.

 


 

Visual Hierarchy

Visual hierarchy defines what elements go where. The way that content – both image and text form – is arranged, defines what is read first and what might only be read by the most committed of visitor. Using different approaches you can ensure your typical visitor is focusing on the most relevant info, e.g. a call to action button signing up a visitor for your newsletter.

 

reading patterns

Reading Patterns: Although your painstaking efforts to include only the most relevant information should not go unnoticed, the vast majority of visitors on the web don’t read every word or view every image – they scan. The z-pattern, for example, indicates a visitor that scans the top of a page, and then darts diagonally to the bottom left and scans the bottom. Using this principle to dictate placement, putting key information within this pattern can improve your website.

 

proximity

Proximity: How close you place your objects to each other defines their relationship with each other, as well as helps define their importance on the overall page.

 

color

Color: Using color within images or text is a great way to draw attention to specific details. By using color consistently for similar items you can also define the organization of your page, making it easier to read.

 

size

Size: A good rule of thumb is that the larger the element, the more attention it will draw. If you want to highlight a specific object or text area, make it big.

 

spacing

Spacing: Space can be used to emphasize objects; adding white/negative space surrounding an element you place emphasis on it and draw the eye.

Although each approach can dictate how your visitor evaluates your website, keep in mind that combining any of these techniques may cause one to negate another. Make sure that you test out your website on members of your audience to ensure it is having the intended effect.

 


 

Typography

The typefaces you choose will help reinforce your brand, give your content structure, and organize your website. Although seemingly a small part of your overall design, typography should reflect your voice; the fonts you choose should represent your message/brand and should be appealing to your audience. When done right, typography can define the web page’s structure and assist with visual hierarchy by defining what is most important and what relates to each other.

When deciding on specific fonts for your website, remember: simplicity, consistency, and readability. Don’t pick too many; using more than 2-3 might confuse your audience and keep them from exploring your website further. Use consistency throughout your text; apply the same font to similar elements within your site. Just as you use placement or color to highlight comparable text or graphic objects, typeface can be used to define what items should be classified together in your visitor’s eye. Finally, choose easy-to-read fonts for the bulk of your text. Bold fonts are ideal for drawing attention in headlines, but you want to select a font for paragraphs of text to encourage visitors to keep reading.

 


 

Color

The colors you choose for any element on your website can convey meaning and define your brand, while giving the potential to draw attention to specific elements.

Perception and meaning are critical considerations in your color-choice. Culture, social status, demographics, and more could define your visitors’ perception. Each color can also convey meaning and value, which may differ from visitor to visitor. So use colors that reflect your brand, but do your research behind the color. Does it mean anything different or possibly offensive to your audience?

Color can be used to draw attention, but are most effective when used sparingly. Focusing on a select set of colors and using them consistently throughout your design helps reinforce your message and define similar elements.

These are the principles that guide us – does anyone have any concepts that they bring to their projects?

Tags: Tutorials
Mackenzie Petursson
Mackenzie Petursson / Calgary, Canada

Mackenzie Petursson started at MuseThemes in 2014 when she ditched that corporate life in favor of working in her sweatpants. Obsessed with people, words, and grammar (in that order), Mackenzie works as the Communications/Support Specialist.

Comments

Wes
Wes

I agree with everything you said in this post. I would add graphics and where to place them. I guess that could go in the “Visual Hierarchy”. I have seen websites with way to many graphic elements. This takes away from the meaning of what the website is for. Information purposes. But then, that would be a matter of taste.
Great article Ms. Campbell. Good job

Post A Comment

Trusted by over 75,000 Muse Designers

Join now to download our entire library of templates, widgets, and tutorials Join Now