Designing a website is a daunting task. Even in today’s web landscape of pre-made themes and so-called “foul-proof” design tools, a basic understanding of graphic design can help push a site to greatness, while a lack of understanding can ruin a perfectly good theme. Here are some tips and terms to keep your site looking polished and modern.
The layout is the arrangement of elements on a page, usually referring to the specific placement of text, images, and style. Layouts can make or break your site. A good layout can help make the site user-friendly, highlight specific content, and push traffic in the right direction. Bad layouts will confuse your users, causing your message to be lost.
Layouts in web design need to be flexible and adaptable. Remember that users will be accessing your site from different devices or browsers. A layout that looks great on a large 1920×1440 screen may end up looking cramped and busy on someone’s iPhone. Even different browsers can have an effect on your layout, as they use different resolutions and process code differently. Web layouts cannot be one size fits all.
The number of mobile users across the globe is now estimated at over 3.7 billion and growing. The United States is the third-largest mobile market. According to Pew Research, virtually all Americans (over 95%) currently own a cell phone. Having a website that functions and looks good on mobile is essential. This is known as having a responsive design. This means that a responsive site layout will flex and/or grow depending on the user’s screen size. Good responsive sites will pay special attention to making sure images have specialized sizes for different devices and content resizes in a way that is pleasing without losing functionality.
Website responsiveness can also affect your Google ranking. Google tests to see how responsive your site is. They may rank your site lower if it is not optimized for mobile users. Your site may even disappear completely if a user is searching for it on a mobile device.
Hierarchy is the design process of ordering web elements by importance. Where this differs from the layout, but there is an important difference. Say you have your layout done and you stand back and notice that nothing really jumps out at you. None of your content “pops”. It might not be a problem with the layout or content, but with your visual hierarchy.
Good visual hierarchy will help break up your content into more readable chunks. It helps the user identify what is most important by arranging the content clearly. There are many different ways to do this. The most obvious is to use scale. “Can you make it bigger?” is one of the most common phrases a designer hears. But there are other ways to improve your hierarchy; such as color, space/texture and finally, an understanding of typography.
Typography is a discipline that has evolved out of the printing press era but today is an important part of web design. Good graphic designers pay special attention to things like font pairing, kerning, line length, line space, and contrast. This all contributes to better readability on your site.
Typography isn’t just choosing the right font. Typography is, in essence, the art and technique of arranging type. It’s central to the skills of a designer and is about much more than choosing a font. Many great sites have been let down by a poor understanding of typography. A few simple rules to follow when starting out are:
- Do not use more than two font families on a site
- Make sure the same font is used across the entire site
- When emphasizing something in a paragraph, just bold it. Don’t underline, Make it bigger or MAKE IT ALL CAPS. It throws off the hierarchy.
- Keep it simple. A clean san-serif font like Arial is always a safe bet.
Want to learn more about typography? Check out our Typography on the Web guide.
Color. Simple to understand, hard to master. When it comes to web design color must be used carefully. An understanding of color theory can help you choose what colors will work best on your site. Tons of research has been done on the feeling certain colors evoke in people. There is a reason restaurants use red and financial institutes’ logos are blue. Red makes people feel hungry, while blue evokes a sense of trust and stability.
That being said, choosing a beautiful palette is not all there is to color. You must keep in mind things like contrast, complementary colors and the cultural context around each color. The last one is particularly important when it comes to web design. For example, making the cancel button green and the confirmation button red will just confuse your users and lead to frustration.
UI can be one of those terms that people use but don’t understand. UI stands for User Interface. UI is the design of the interface of your product with the focus on maximizing usability and user experience. It basically encompasses all the topics discussed above and all these disciplines are used to serve the UI. But unlike say, good typography and color; good UI will go unnoticed. The goal of user interface design is to make the user’s interaction as simple and efficient as possible. To have the user achieve their goal easily without mistakes.
So if good UI is unnoticeable, how do you check if you achieved it? When critiquing your UI –or anyone’s for that matter — ask the following questions
- Can the user complete their tasks with little difficulty?
- Does the interface allow the user to complete tasks in a timely manner?
- After leaving a website, how likely will the user be able to remember how to use it the next time they visit?
- What steps does the interface take to lessen the chance of user error, and how do they let the users correct an error?
- Does the user enjoy interacting with the design?
User testing is also a very useful tool in UI design. The more people interact with your interface, the better. Proper usage analytics can reveal differences in how users navigate your website. By monitoring these analytics you’ll see if there is a step in the process users get stuck on or if they are spending a lot of time looking for specific information or pages. Once you have this data, you can go back and find a better solution.
User experience refers to the singular and accumulated experiences that occur for users as a consequence of them interacting with an object in a given context. User experience is a design philosophy where all design decisions are made to enhance the user’s satisfaction and create a certain feeling when using your product.
Due to their similarities, UX and UI are commonly confused with one another. It helps to think of UI as the discipline that reacts to an established product and as trying to create a visual language for said product. UX, on the other hand, is a discipline that creates the context in which the product will be formed. UX designers are looking at factors, such as how users expect established design language, what their competitors are doing and how the website will navigate from page to page.
UI is visual, while UX is data driven. UX is less concerned with the look and feel of a site and more concerned with how it functions; especially in regards to how users will interact with it. UX design starts at the very beginning of the design process and asks the question of how should this website work, unlike UI which is more concerned with how it looks.
For example, say that a travel site needs a page for users to book a ticket online. UX designers are responsible for deciding what information needs to be on the page, how users are going to find it, and if it needs links to other pages or if other pages need to link to it. They will also research how other ticket bookers work on other sites and possible structural approaches. With the UX design done, it then passes to the UI phase. Using the data from UX, UI designers will create something visually using all the disciplines discussed before. Now that has been established, how can you create good UX?
To create a good UX, you must know your users and what kind of experience you want them to have. Ask the following questions when designing:
- Who are my users?
- Why would they be coming to this site?
- What are they trying to do on the site?
- What information are they trying to find?
- How am I making sure that they can find it?
- How do I want them to feel when visiting the page?
- In what context are they interacting with my site?
- What is the problem or need we are aiming to solve or improve?
- What does the site need to do?
The answers to these questions should inform any design decision you make. Great UX is the foundation of any great design. When applying any of the design lessons from above, make sure to keep these answers in the back of your mind. All the other terms and disciplines discussed are just tools that you can use to improve your UX.