To design a good-looking and user-friendly website, there are some key points you need to know before you even begin to write any code. You’ll need to understand colors, how users will interact with your site and whether it meets their needs, and how will you organize and lay out the site. This article will cover design basics that will enable you to start designing web sites.
These things must be considered when designing a To design a good-looking and user-friendly website, there are some key points you need to know before you even begin to write any code. You’ll need to understand colors, how users will interact with your site and whether it meets their needs, and how will you organize and lay out the site. These things must be considered when designing a website. When coding a site, it is important to remember some best practices.website. When coding a site, it is important to remember some best practices.
The Color Wheel
Red, yellow, and blue are considered primary colors. Orange, green, and purple are the secondary colors. Primary colors can be used to create the secondary colors. For instance, yellow + blue = green, red + blue = purple, red + yellow = orange, and so on.
Warm colors are red, orange, yellow, and the combinations of these colors. Warm colors are usually associated with warmth, passion, energy, and happiness.
Cool colors are blue, green, and purple, and the combinations of these colors. Cool colors usually represent calm, relaxation and a sense of professionalism. For this reason, blue tends to be a common color used in a lot of business websites.
Shades of black, gray, beige, and white are considered neutral colors. They can be used alone or combined with other colors.
Red, Green, Blue
All the colors on a website are displayed through varying amounts of light on the monitor. The stronger the light, the more color is produced.
Colors for websites are described using a three byte hexadecimal format. The first two digits are Red, the next two are Green, and the last two are Blue. White is represented by all three colors set at 100%. Black is the absence of color, so all three colors are set at 0%. Thus, white is FFFFFF and black is 000000.
The amounts of each color are adjusted by setting the values of red, green, and blue to different amounts. For example, to produce green, set the green digits to 100% (FF) which results in the hexadecimal value 00FF00.
There are 16 million different colors that can be represented—256 possibilities for each red, green, and blue → 256 x 256 x 256 = 16,000,000. That’s a lot of colors!
In order to design an eye-pleasing site, you need to know which colors go well together. To describe some of the popular color schemes, we will refer to the color wheel that we discussed in The Color Wheel section.
There are many different types of color schemes. Keep these definitions and the color wheel in mind when picking out what to use for your website design.
Monochromatic: uses several shades of the same color
Achromatic: a type of monochromatic color scheme using black, white, and gray
Triadic: uses three colors which are 1/3 of the way apart from each other on the color wheel
Analogous: uses colors which are adjacent to each other on the color wheel
Complementary: uses colors which are opposite to each other on the color wheel
Tradic, Source: Lemon Stand
Analogous, Source: Ecoki
Complementary, Source: Frenzy Labs
Organization and Layout
Now we understand colors, usability and utility. But how do we put these on a website and organize the site in such a way to optimize the user experience?
When users visit your website, the first thing they will see is the homepage—and they might not return to the homepage again. This page should have content organized in such a way that users can easily find what they need. It should also suggest that they take action, such as visit the store or sign up for a newsletter.
The website header should appear at the top of every page in your site. This lets users know that they are still on your site and it helps to keep things uniform. Many times clicking on the header will take the user back to the homepage. Some websites do not make a header clickable, and instead have a menu bar item for “Home”.
The menu is one of the most important parts of the website. Users must know where the menu is because that is how they will navigate the site. A menu bar is usually part of the header, but it can also appear on the side, either right or left. The menu bar contains the main highlights of the site, organized into categories. An online department store may have categories such as “Clothing”, “Shoes”, and “Home” for major categories of shopping.
Other items that need to be placed in the header are any user account activity, such as Log in and Log out. This makes it easy for the user to find how to perform these functions.
The footer of a website is usually used for the site map, an overall way that the site is organized. Users use the footer when they can’t find something in the menu and the footer should make it easy for them to find what they are looking for.
The organization and layout of a site plays an important role in the usability and utility of a website. An example of a good layout is shown below. There is a clear logo at the top, a menu bar with categories, and user account buttons in the upper right. Some sites further break down the categories with secondary menus.
Usability and Utility
Usability is a quality attribute which assesses how easy user interfaces are to use and methods for improving the ease of use. If a website is too difficult to use or it doesn’t satisfy their needs, people tend to leave and go to a site that they can figure out how to use immediately. In an e-commerce site, if the user cannot find the product they are looking for, they leave and go to another. Usability is important because you need users to use your site in order to gain web traffic and thus, make money.
Utility refers to the design’s functionality and whether the site meets the user’s needs. This combined with usability equals a useful website design.
Think about these components when designing a site:
Learnability: Can users accomplish basic tasks the first time they encounter the design?
Efficiency: After they learn the design, can they perform tasks in timely manner?
Memorability: After returning to the site after a period of time, can they remember how to use it?
Errors: How many errors does the user make when using the design and can they recover easily?
Satisfaction: Is the design pleasant to use?
Before writing code, make paper prototypes. You can draw out the design and do testing to see if it makes sense. Go through multiple iterations of paper prototypes and gradually move to a computer representation of the design. Even once you come up with the final design, continue to test because sometimes problems arise after implementation.
Coding Best Practices
Organize and Comment
Photoshop was originally developed for photographers but has since evolved into a very common tool and is acceptable for designing and creating website designs. After learning HTML and CSS coding, go through a Photoshop tutorial and use online resources to learn as many techniques as possible. Use Photoshop to visualize your design before translating it into HTML and CSS code.
Many design concepts involve how to use colors correctly and make a site that is user friendly. Following these best practice tips will help you on your way to designing your website.