Basics to Website Design 101
New to website design? Web designing can be intimidating, but it can be amazingly easy if you have a good guide. Don’t be scared to start designing. Our web design company will provide all the things you need to know about website design here for you. Viva One Digital is a web design agency which has been recognized as a Top 30 B2B Web Design Agency in Bangkok.
This guide will help you effortlessly design the ultimate websites for your brand.
Here are the content :
What is Website Design?
Website design is the process of planning, designing, arranging elements and contents on the websites. Web design is an important process that will make or break your website. Website design is not only about the aesthetic of the website but also usability and functions of the website as well.
The Purpose of Good Website Design
Have you ever wondered how much effort you should put in web design? Here are reasons why you must put 100% effort into designing your website.
Website design sets the first impression of your brand and your customer service. It says a lot about your brand, characteristics and how much you care about the customers. Good web design indicates care and effort that your brand offers. While bad web design also says that your brand doesn’t really care if the customers have a great experience with your brand or not. Well-designed website shows that your brand is legit and trustworthy. Also, it helps with your search engine optimization (SEO) strategy.
Stepping into the Web Design World
Let’s take a look at foundations of website design. We are going to learn about User Interface (UI) and User Experience (UX) and all little elements in UX and UI design.
Here are the lists of everything you need to know to build a solid website.
User Interface (UI)
First up, we have the User Interface (UI) design. UI design is about aesthetic elements of the website. Colors, layouts, typography, buttons and images are parts of UI design.
Colors
Colors play a big role in web design. Colors tell brand personality and draw attention to important elements on the website. Each color has its own meaning, for example, green represents nature which is perfect for eco-friendly brands or gardening brands. Choose the colors that can represent your brand value to better your web design game.
To make your website look good, consider using a color palette. Color palette is a set of colors that compliment each other and work well together. Color palette helps designers keep the colors on the website coordinate. Using a unique color palette for your website can also create brand recognition.
Layouts
Website layouts are the patterns of how elements like contents, images, on the website pages are arranged. Layouts influence how information on the website is delivered and it also plays a big role in website navigation.
The key to selecting the layout is to make your customers have a great experience on the website. You want the layout that will support the customers to find what they need on the website easily.
Each type of layout fits with different kinds of pages and websites. There are many layouts to choose from. Single column layout works best for blog websites, z-shape layout works best for landing pages, and grid of cards layout is perfect for products pages or pages that provide many options for the users to choose like YouTube. Learn more about types of layouts and choose the one that fit the purposes of your website the most.
Typography
Typography is the art of letters and text arrangement. It is often overlooked in the web designing process, but it does have a lot of impact on the design and usability of the websites. Typography in website design is about the fonts, sizes, and how they are placed on the website. If you want to ace your typography game, you need to pay attention to the fonts.
Fonts affect readers’ feelings. Fonts also represent the brand’s personality. The design of fonts that are bold, curvy, layered, or play with shadows indicate more fun than simple and lean fonts. You will see that most minimalistic brands will avoid using bold fonts and shadow fonts. They will often go for fine lines and slimmer fonts.
Fonts play a big part in how people read and how well they can read. Choosing fonts isn’t based solely on what emotions the fonts bring, but also where and what texts will the fonts be used. For example, shadow fonts, calligraphic fonts and other fancy fonts are not suitable for a longer text, it fit better on the logos, labels, short texts like taglines. The fonts used for long texts like copies or stories should be easy to read, stick with formal fonts.
Here is example of font that could be use for logos, headlines, and labels (left) compared to font for copies and longer texts (right)
Website Background
Website backgrounds are pictures, solid colors, illustrations, or video used to fill the websites screens. Background is in the back but it plays a part of the attention drawer. Good background will guide the viewers’ eyes to highlights of the websites while the bad background will distract the viewers.
To use a background image effectively, make sure it is high quality and make sure it fits both desktop and mobile screens. You should use an image that is relevant to your brand, consider using an image that matches your color palettes or brand’s personality.
Minimalist Design Trend
These past few years, minimalist is a big trend in many aspects including website design. Minimalist web design helps bring the spot light to your contents and products due to its simplicity and uses of negative space in the design. Also, it makes your brand look modern, professional, and classy.
To design a minimalist website, there are many tips you could follow. But the most used and important one is to use a lot of negative space. You want to get rid of other elements that are not necessary and focus on making the contents and products shine. Learn more tips and get inspirations from other minimalist websites.
Mobile-friendly design
In these modern days, most people use their mobile devices to access the internet and explore websites. To have a killing UI design, you need to make sure everyone can access your website anywhere, anytime and get the same great experience whether they use desktop, smartphone, or tablet.
To make mobile-friendly websites, you could use a responsive theme on WordPress. If not, make sure you make every element on the website responsive. Responsive design is when you tailor elements on the websites like logo, texts, images, and navigation bar to fit and work well on every screen size.
There are many tips to perfect the mobile-friendly website design. Most useful tip is to make sure everything is in the right sizes. Texts should be big enough to read in the small screens, images should not be too big or too small. Most importantly, make sure the buttons are big enough to click with the finger.
User Experience (UX)
Now that we know all about UI design, let’s get to know UX design together.
User Experience design focuses on the experience of the users from the beginning to the end of interactions between users and your brand. UX design is all about the satisfaction of the website’s users and usability of the websites. UX design aims to calculate every step that the users take on the website to create the best experience and great emotions possible for them.
There are a few things that you should consider when doing UX website design. Let’s start with the user journey.
User Journey
User journey is every step of the path that users take on your website from the start to the end to finish their goals. It is also about their emotions and thoughts during each step of using your websites as well. You should do this before starting the website design process.
To design user journey, you need to do the process of user journey mapping. This process will make your website user-centric and user-friendly. It makes the users feel cared for and important.
You will start with researching on the users and potential customers, Then create a user persona which is an imaginary customer of your brand based on the research result. After that you can start mapping their journey on the website.
Refine the user journey map until there is no difficulty for the users to complete their tasks. Have your teammate look at and comment on the user journey map to get opinions from different perspectives to get a perfect result. Don’t forget to always consider the customers emotions, Think of the customers in every second of the process and you will have the best user journey
User Flow
User flow design is similar to user journey design but it is only concerned about the path that the users take on the website to finish the tasks. It does not care about user feelings and emotions. It focuses on how the user travel from page to page, what action do the users make, and what do they have to decide.
User flow design makes your website design better. It helps a lot with creating a great user experience. Users will get to where they want easier and quicker if you design the user flow well. User flow aims to make the user journey short, easy , and effectives.
User flow design process is to make a user flow chart. User flow chart uses arrows and shapes like circles, rectangles, and diamonds to represent actions and steps that users might take to complete their tasks on the website. Circles are entry or end points. Diamonds are decisions and rectangles are actions. And most importantly, arrows represent directions and orders of events.
Pages for Website
Now that you know all about interface and user experience design, let’s go into details of website design. You know how to make the web pages look good, but what are the important pages that you should have?
First of all, you need to design a homepage. Homepage is the most important page for any website, it is the center of the websites. Homepages should tell who your brand is and what you do or offer. Homepage has an important job to grab users’ attentions and make sure they stay in your website which is why you need a well-designed homepage. After that, the homepage will then guide the users to other pages.
Other pages that you must have are about page, products or services page, contact us page, and blog page. However, these are not all, there are many more pages that you could add to your websites to better you website design. Go take a look at all the pages for website you should have.
Navigation Bars
Navigation bar is a very crucial part of website design, it allows users to travel from page to page in order to achieve their goals. Navigation bar will have pages of the websites linked in it for the users to click on them and go to other pages like homepage or about page.
There are many types of navigation bars, vertical or sidebar, horizontal, drop down, hamburger, and footer. Each type has its advantages and downfalls. You need to choose the one that fits your website design the most.
When designing a navigation bar, make sure it is responsive as well. Don’t forget to order the pages in the navigation bar in the order of what you want the customers to see first and later. Also, keep the navigation bar short and concise. You do not need more than seven pages on the navigation bar, and don’t use a long name for each page.
Wrapping Up
Now that you know about UX and UI design and elements in both of them including colors, layouts, font design, user journey and user flow, you should be able to design your own solid websites. Pay attention to every element, every factor, and every detail. Most importantly, don’t forget to put the users first and always first. Users and customers should be your number one priority in the website design process. Remember that the best website design is the one that makes your users have the best experience.