We all know it is important to make sure our website is eye catching but what if this is your first time trying to make or even pick a design? Where do you begin? Not to worry Edge Weaver is here to help with some design tips for websites to get you started.

Color

This is usually a good place to get started. People tend to notice what colors you use before they see anything else. Colors will set the mood for your whole website so you want to make sure you think about how your colors make people feel. The other thing you want to keep in mind, especially on a website, is how easy it is to read content with a color scheme you have picked? Always check that you can still read your content in what colors you have chosen.

If you are new to design one easy way to develop a simple color scheme that works well is to use a three color scheme. Why three? You can have as many or as few colors as you want but if you have too few your website can be boring or hard to read and if you have too many it can be confusing or hard to look at. Three colors is a wonderful place to start because you have a nice balance between visual appeal and clean business look. This can be three colors that are very similar or two that are similar with one different color or accent color. There are many different ways to think about color but here are a couple of the basic ones.

Warm Colors vs. Cool Colors

Warm colors are reds, yellows and oranges. These colors tend to make people excited, pay attention and represent passion, warmth and fire.

Cool colors are blues, greens, and purples. These colors make people feel calm, peaceful and contented and represent tranquility, coolness and water.

Row 1: Warm Colors

Row 2: Cool Colors

Row 3: Cool Colors with a Warm Color Accent

 

 

Warm Colors, Cool Colors, Cool Colors with a Warm Accent
Warm Colors, Cool Colors, Cool Colors with a Warm Accent

Neutral Colors vs. Loud Colors

Neutural colors are colors that can be found in nature. This can be browns, whites, black, greys, or pale/muted shades of other colors. These colors don’t stand out and will blend in with their surroundings.

Loud colors are bright and usually fond in synthetic or man made things. Examples of loud colors are hot pink, lime green, electric blue and highlighter yellow. These colors really stand out and will grab people attention.

Row 1: Neutral Colors

Row 2: Loud Colors

Row 3: Neutral Colors with a Loud Color Accent

 

 

Analogous Colors vs. Complementary Colors

For these colors schemes we have to look to the color wheel. The most basic color wheel is made of the three primary colors (red, blue and yellow) and the three secondary colors (green, purple and orange). Primary colors are colors that cannot be made by mixing colors together. The secondary colors are made by mixing two of the primary colors together in equal proportions.

Analogous colors are colors that are located next to each other on the color wheel. Analogous colors schemes are harmonious and blend together smoothly.

Complementary colors are colors that are opposite one another on the color wheel. You will often find complementary colors used for sports teams, packaging, advertisements and even holidays because these colors stand out strongly against one another.

Row 1: Analogous Colors

Row 2: Complementary Colors

Row 3: Analogous Colors with a Complementary Color Accent

 

 

Pattern

Okay so you know what a pattern is, a predictable repetition of elements, how is that supposed to help in web design? Well it is more useful then one might expect. Pattern is a great way to develop cohesion and emphasis. If you make a regular pattern out of the content on your website by for example using your text and images you make your content easier to manage for someone who is new to your site. Then when you break that pattern you make an impact and draw attention to that element that doesn’t fit with the established pattern.

Non-Visual Patterns

For someone new to design work this can be the simplest pattern to develop and will really help your users find what they are looking for fast. Examples of non-visual patterns are putting items in alphabetical or numerical order, or by topics from broadest to more specific.

Your website will undoubtedly use at least one of these pattern types. Think about how you want to set up your main menu items for example. You want to decide what are the few broad topics that are really important to your website. It wouldn’t make any sense to fill your menu with tiny details, a series of descending numbers or even to have too may options. This is why we make use of the menu and sub-menu items so our users can find what they are looking for quickly. Design is all about “form follows function”; you want the design you create to help your website be more functional.

Depending on what type of non-visual patterns are applicable to your site you can use them in different ways to remove emphasis or create emphasis. To most people alphabetical order means all of these items are to be treated in generally the same way, meaning there isn’t much importance in being first or last on this list, it just makes it easier to find. It’s just like the dictionary, no word is more important, it is just what order they come in. Numerical order is different. Number one is the best, the most popular, perhaps the cheapest, the newest or the most important. That can be a powerful tool to direct your users where you want them to be.

Visual Patterns

Visual patterns can be a great way to add some visual appeal to your website and they are not just limited to decorative elements. Visual patterns can be a useful tool in organizing your websites content in a way that makes it more manageable for your site visitors and can help them know what is really important.

Patterns in Text

Text is a visual element even though we don’t often think of it that way. It is important when dealing with website layouts to remember people will see your text before they read it. You want to make sure that when visitors see your text it looks appealing. Lets look at a few website diagrams to see how we can use text as a visual element.

Imagine the wavy lines are text.

In the first example the text is in one giant block. No one wants to read that. Sometimes when we are focused on content it is easy to forget about layout. We want to get our thoughts on the page and it is tempting to use every pixel but think of a new visitor to your site. This is a little much even if they are truly interested. Even the most dense text book breaks up their text. Give your visitors a little breathing room.

In the second example our text has been broken up. This is great, we have just developed a visual pattern with our text. This may be a simple pattern but we as a user, even a new one, know that every time there is a break there is a  subject change. Sometimes you need to get a lot of information to a user and text is the way to do it. The pattern emphasizes the text so we know just looking at it that the information we need is in the text.

Visual Patterns with Varied Content

This is where watching your patterns can really help you and your website visitors. When you start to add other elements to your webpage such as images they have a profound effect on what information you are presenting as important.

In the next example we have both text and pictures. People are very visual and will almost always notice a picture first, especially if it is in color. We can get more information from a picture faster then we can from text. Many visitors will look at your pictures and decide if they want to read your article. In order to encourage people to read your content you need to know how much power pictures have.

 

In this example the pictures and the text are balanced. The space on the page is evenly split between text and images and the side that the text and images are on alternates. Here come our visual patterns again. We can guess as a new visitor that the picture goes with the text across from it. The other effect of this particular pattern is that even though we will look at the pictures first our line of site will zig zag through all of the content. You may catch a potential readers attention because of that.

Now here is the real secret our “pictures” don’t have to be photographs or drawings. All you need to create this effect is any visual element that communicates information quickly and is different from the rest of the text. This could be a quote from the article in a different font and color, a customer review of the product you are discussing, a technical diagram, or even a link to a related article.

Text is not always going to be the most important element of your page. For the last example we have a web page where all the emphasis is on the images. They take up so much more space and are all in a row like a list. This is a pattern that lets you visitors ignore the text unless they want to learn more. We can see that each image has a small amount of text that accompanies it. We can fairly accurately assume because of the pattern that the text is a description of what is next to. This pattern can be great if you have a photography blog and just want to tell your visitor when and where the picture was taken or if you are selling furniture and the question your user is asking is will it look good in my living room.

You can use any arrangement of patterns to help your users and a happy user is one that comes back. When considering any sort of pattern always consider if it is helping you give your website visitors the information they need and if it is developing the emphasis you want it to.

 

Now that you have learned more about design what would you like to do?

I still have some questions about websites.

I want to look at some website templates.

I’m ready to create my own custom website.