How to learn web design

When starting out as a web designer, it is crucial that you learn the basics and the foundations of web design. This step-by-step guide will help you understand web design as you go through the creation process.

What is website design?

Creating a website is not limited to just making it look good for users. There is a science to it. Website designers are trained to create stunning visuals from concepts given by stakeholders to allow audience to make the intended actions on your website. Be it for an e-commerce business or paying for a service.

We acknowledge that website design covers more than one discipline of design. They also include UX (user experience), UI (user interface) and SEO (search engine optimization). Good designers know how to work this around to create a website that not only captivates the audience but also create an impact for your business.

There are a few skills that our designers have learned and applied along the years:

1. Attention to detail
2. Being adaptable
3. Innovative

How web design works?

Web design stems from an idea and then this idea turns into something tangible to allow users to feel, see, understand what the business is trying to convey. Most of the time, there will be many departments putting in their hard work starting from the stakeholders all the way to the designer and developer.

Backend development

The backbone of the website.

Most websites will definitely have a backend to handle how the website loads correctly for the users. Back-end developers are usually the programmers who work in coding languages or frameworks to make sure that the servers and databases work correctly.

Frontend development

The front end = to what the users see.

When website builders were pretty much non-existent, we had to rely on HTML/CSS and a little bit of javascript to create a website. While these skills are still essential in web design, Webflow and other website builders pretty much have done a good job of reducing the pain of learning this.

Learn how to design a website

Website designers are pretty much still in demand considering the fact that everything seems to be going online nowadays. Apart from the many website builders that allow a lot of non-designers or non-tech startup founders to start building their MVP website, we still believe that a solid foundation and a good learning attitude is still pretty applicable even in today's context.

Understanding the basics of visual design

We think as designers, we need to understand the basics of visual design first. Creating web designs that can be appealing to users are somewhat non-negotiable in this new age design industry. There are many visual design elements that every designer should know.

Balance

Design is all about balance. How our designers integrate all the design elements such as typography, colours, images and shapes (amongst many other things) into a structured layout. Each particular element has a visual weight which creates an even distribution of design.

Colours

Colour in website design is one of the most important element in website design. One of the few things that users will see first when they load up your website so this generally has a huge impact (both positive and negative). Choosing a proper colour theme or colour sets that doesn't affect your brand is important.

Lines

Being the most basic element of design doesn't mean that they are not important. Lines are generally used to lead a user's eye to something that is crucial in your design. Even though it is simple in nature, it possess a large variety of properties that allows the design to convey a range of expressions.

For example, a thicker line can convey that this has more importance.

Shapes

Using shapes to enhance your visual design in your website can have an advantage to trigger a user's response.

A good example would be the usage of buttons rather than just text links.

By simply adding a shape to your text, it already changes the focus and the importance of the design element.

Space

Nobody likes a cluttered looking website. Space is our friend.

It gives the design a room to breathe and ultimately, gives the audience room to breathe and digest the content that is on your website. It creates a basic structure and define the boundaries of your content.

Do not be afraid of space (our designers usually call them whitespace).

Contrast

Our designers use contrast to make a design element standout. It usually involves changing the colour, value, size and other factors.

But these factors have to be used properly. Has anyone seen a green-coloured delete button?

Almost all design systems are designed with a systematic colour approach to create contrast in their designs. For example, a "delete" button would almost always be in a bright red, to signify that once this action has been taken, it is irreversible.

{{ad-campaign-2="/directory"}}

Learn about basic HTML

When we first started out learning HTML, we were just armed with a notepad and a laptop.

Basically, in short, HTML is used to determine how your website content, images, and other elements display in a browser.

The good thing today is that you do not need to be an expert in HTML language if you are using Webflow or other web builders. But it is good to be familiar with the terms that are being used in HTML.

You would need to know the basics such as heading tags (your H1 and H2), paragraphs, links, images and etc. The tags will create your content hierarchy and this in turn will allow web crawlers to help your website be ranked in search engines.

Understanding CSS

What's the main difference between HTML and CSS?

• HTML. How your content is being display on your preferred browser.
• CSS. How your content is designed.

CSS provides the instructions to your browser how to style your content. The basic things include your font types, sizing, padding, alignment and colours. Understanding CSS to a certain extent will help you to create good looking websites and even customize certain web page templates.

Understand the foundations of UX design

Nowadays, it feels like a crime if designers don't have the basics of UX (user experience). So, it is best to try to understand website UX as your foundation to UX (we will definitely cover more about the different types of user experience across multiple platforms and disciplines). UX refers to how your users experience your site, simply said. How they find it super easy to navigate through your website and how they feel when they land or use your website.

Although UX and UI (user interface) are different, they have to complement each other to ensure your website has a positive impact towards your users.

Information Architecture

Why is this important as part of your website design process?

Without clear organization of your website, your audience might or will get confused and leave your website disappointed. When users are not able to comprehend what your website is trying to convey, it just means the content organization is not clear enough for them hence they start to lose interest.

Organizing your content is one of the top most thing to do first before you even start on the design of your website.

User Personas

Have you ever heard "My product/service is for everyone!"?

Usually when this happens, our UX researcher will pause for a moment to get you back on track. Each product or service will cater to different sets of users.

For example, if you are selling top notch kitchen knives, most likely, even though every person in the world might own kitchen knives, your target persona would be those who are in the culinary world. Your design and content might have to be optimized for chefs who are specifically looking for exquisite kitchen knives.

User Flows

How a user navigate through your whole website is called user flows.

Understanding this will help you to prioritize certain sections and allow users to get there eventually.

Getting to know UI design

UI involves the user directly interacting with the interface of your website. They should be consistent throughout your website so that the users get familiarize with your website.

For example, let's take a look at something that is being used daily. A volume knob. Turn it clockwise to increase and vice versa. Most radio devices have volume knobs that works the same way.

Understanding layouts

Generally, people are drawn to familiar design patterns. So in layout design, the most commonly used patterns are the Z-pattern or the F-pattern.

Z-patterns are usually used for landing pages while F-patterns are used for blogging purposes. You can see these type of patterns in most websites that you have encountered before.

Learn about typography

Typography is an important aspect of design. Choosing the right font type adds to the overall aesthetic of your website.

Start designing

Learning these fundamentals is crucial when you start to learn website design. Overall, you need to put what you learn to practice. By building more websites and gaining experience, you will start to encounter more complex websites which you might want to replicate.

While Webflow gives you the advantage of designing a website without code, understanding these will propel you further into website design.

We all start from somewhere, Webflow gives you a headstart.

Want to learn more about website design? Contact us. The least we can do is to give you good advice.