Web design has so many different facets and it can be hard to know just where you should begin. We want to make things easier for you and we’ve put together a wealth of great information to help get you on your way to becoming a web designer.

We’ll explore these fundamental steps to learning web design:

1. Understand the key concepts of visual web design
2. Know the basics of HTML
3. Understand CSS
4. Learn the foundation of UX design
5. Familiarize yourself with UI design
6. Understand the basics of creating layouts
7. Learn about typography 
8. Put your knowledge into action and build something
9. Get a mentor

What is web design and what elements make it work?

If you want to learn how to design websites, the first step is understanding what exactly web design is.

Web design is part artistry and part science, tapping into both the creative and analytical sides of a person’s mind.

Web designers take what’s conceptual and translate it into visuals. Images, typography, colors, text, negative space, and structure come together offering not only a user experience but a conduit for communicating ideas. Web design skills cover a variety of techniques and expertise in creating websites that are both functional and visually engaging.

A good web designer understands the significance of each piece of a design. They make choices on a granular level, styling each element, while never losing sight of how the elements will come together and function in delivering on the design’s greater goals.

No matter how spectacular the visuals of a web design are, they're meaningless without organization. Logic needs to guide the arrangement of ideas and visuals on each page, as well as direct how users will travel through it. A skilled web designer creates designs that deliver in the least number of clicks.

Web design can be broken down into several subdisciplines. Some designers make their careers specializing in areas like user interface (UI), user experience (UX), search engine optimization (SEO), and other areas of expertise. As you begin your journey as a designer, you should know a little bit about all these different facets of web design.

Web designs are powered by the back end

You’re going to come across the terms back end and front end as you learn to design websites. Most beginners mix these up, so it’s important to know how they’re different.

The back end is everything that runs behind the scenes in displaying a website. Websites reside on servers. When a user requests to navigate to a specific section of a website, the server takes this incoming information and in turn, shoots out all of the HTML and other code so that it displays in the user’s browser correctly. Servers host the data a website requires to function.

Web developers who specialize in back-end development are often programmers who work in such languages as PHP. They also might use a Python framework like Django, write Java code, manage SQL databases, or use other programming languages or frameworks to make sure that servers, applications, and databases are all working together.

To become a web designer, you don’t need to go too deep into what happens on the back end, but you should at least understand its purpose. This is an advanced topic but for those who want to become full-stack developers, it’s as important as understanding front-end fundamentals like HTML & CSS. And speaking of front-end web development...

Front end relates to what site visitors see

The back end is considered the server side while the front end is the client side. The front end is where HTML, CSS, JavaScript, and other code work together to display a website. This is the part of a web design that people engage with.

As you advance in your career you might get into more specialized areas of learning web development. You may end up working with frameworks like React or Bootstrap or go deeper with JavaScript or jQuery. These are more advanced areas that you shouldn’t worry too much about in the beginning.

Good visual design make websites stand out

‍

Though the best web designs look effortless in execution, they’re all based on the guiding principles of visual design. Though there are those rare web designers who have an innate eye for visual design, for most of us, this is a topic that we must learn on our own. Those who can tell the difference between good and bad design will have an easier time learning web development. Understand how visual design works. Know the rules of composition and understand how elements like shapes, space, color, and geometry come together.

A great starting point is our post about visual design principles for web designers. Studying concepts like reification, emergence, and invariance will allow you to incorporate these principles into your design process. Learning how to be a web designer also means understanding the history of design and web design trends. We’ve put together this in-depth graphic design archive to show you all of the major developments in design that have brought us to where we are today.

How to become a web designer

1. Understand the key concepts of visual design

Line

Every letter, border, and division in a layout is made up of lines that make up their greater structure. Learning web design means understanding the how to use lines to create order and balance in a layout.

Shapes

The three basic shapes in visual design are squares, circles, and triangles. Squares and rectangles work for blocks of content, circles work for buttons, and triangles are often used for icons that accompany an important message or call to action. Shapes also have a sense of emotion, with squares associated with strength, circles with harmony and comfort, and triangles with importance and action.

Texture

Texture replicates something in the real world. Through texture, we get an idea of whether something is rough or smooth. Textures can be seen throughout web design. From paperlike backgrounds to the colorful wisps of a Gaussian blur, be aware of the different kinds of textures that can make your designs more interesting and can give them a sense of physicality.

Color

If you want to learn how to web design and create websites that aren’t an eye strain, you should educate yourself in color theory. Understanding the color wheel, complementary colors, contrasting colors, and the emotions that different colors evoke will make you a better web designer. A huge part of knowing how to web design is knowing what color combinations look good together.

Grids

Grids have their roots in the earliest days of graphic design. They  bring order to images, texts, and other elements in a web design. Learn how to structure your web layouts using grids.

2. Learn HTML basics

Hypertext markup language (HTML) provides the directions for how the content, images, navigation, and other elements of a website display in someone’s web browser. Though you don’t need to be an expert in HTML, it still helps to have some familiarity with how it works, even if you’re using a visual-based design platform like Webflow. 

HTML tags are the instructions a browser uses to generate a website. Headings, paragraphs, links, and images are all controlled by these tags. You’ll especially want to know how header tags like H1, H2, and H3 tags are used for content hierarchy. In addition to affecting layout structure, header tags are important in how web crawlers classify a design and affect how they show up in organic search rankings.

Visit Webflow University to learn more about the basic concepts of HTML and CSS.

3. Understand CSS

CSS (or Cascading Style Sheets) provides styling and additional instructions on how an HTML element is going to appear. Doing things like applying fonts, adding padding, setting alignment, choosing colors, and even creating grids are all possible through CSS.

Knowing how CSS works will give you the skills to create unique-looking websites and to customize existing templates. Let’s go over a few key concepts of CSS.

CSS classes

A CSS class is a list of attributes that come together in styling an individual element. Something like body text could have the font, size, and color as part of a single CSS class.

CSS combo classes

A combo class is built on an existing base class. It inherits all of the attributes like sizing, color, and alignment that may already be in place. Attributes can then be changed up. Combo classes save you time and let you set up variations of a class that you can apply wherever you need to in a web design.

Knowing how CSS works is essential when learning web design. Visit Webflow University to see our courses on CSS styling and CSS layouts.

4. Learn the foundations of UX design

Those who want to learn web development often confuse UI and UX. User experience is the magic that brings a website to life, transforming it from a static arrangement of elements into something that engages with the emotions of someone scrolling through it. 

The color scheme, content, typography, layout, and visuals all come together to serve your audience. User experience design is about precision and evoking feelings. It offers someone not only a smooth journey but connects them with the entity or brand behind the web design.

Here are a few UX principles you’ll need to know.

User personas

If you want to learn website design, you must be cognizant of the connections between websites and the people who visit them.

Web design means understanding end users. You should learn how to do user research and how to create user personas. In addition, you’ll need to know how to use this information to create a design that’s optimized for an audience’s needs.

Information architecture

Without clear organization, people will get confused and bounce. Information architecture and content mapping provide a blueprint for how the website and each section will work together in providing a clear customer journey.

User flows

Constructing user flows may come into play when you work your way up to more extensive design projects, but you’ll be better off in the future if you start thinking about these and building them out for your early designs. User flows communicate how people will move through a design. They help you to prioritize the most important sections and make sure that people can access them.

Wireframes

Wireframes show where on a web page headings, text, visuals, forms, and other elements are going to be placed. Even if you’re building a simple one-page web design, mapping out a wireframe will give you a solid guide to work from. As you move on to more complicated websites, wireframes are essential in creating a consistent experience, structuring layouts, and not missing anything that needs to be included. 

Prototyping

Prototypes can have different levels of fidelity but act as a representation of a functioning design. Images, interactions, content, and other important elements are all in place and replicate the real-world design. Prototypes are used to get feedback and fine-tune a design throughout the process.

5. Familiarize yourself with UI design

UI (user interface) design is another huge subject you’ll dive into as you learn website design. A user interface is a mechanism that puts a piece of technology into action. A doorknob is a user interface. The volume control on your car radio that your significant other won’t stop messing around with is a user interface. And the keypad that you enter your PIN into at an ATM is a user interface. Just as buttons and other mechanisms in the real world allow someone to interact with machines, the user interface elements on a website allow someone to put actions into motion.

Let’s review two key UI principles: intuitive design and simplicity.

How to create intuitive interfaces

Interacting and engaging with a website should be consistent and follow repeatable patterns. People landing on a website should immediately understand the systems that are in place in navigating through it.

Make UI simple

UI exists to optimize usability. This means making the controls easy to use, as well as obvious in their functionality. Whether you’re minimizing the number of navigational options, making the checkout process quick, or integrating other interactive elements that increase accessibility, understanding UI will help you streamline someone’s experience in interacting with a website.

Of course, UI is a vast subject that can’t be captured in just a few paragraphs. We suggest you check out the blog post 10 essential UI (user interface) design tips as a primer to UI.

6. Understand the basics of creating layouts

Our eyes latch on to certain design patterns automatically, making for an easy route through a web design. We intuitively know where to look because we’ve seen these same patterns over and over as we’ve consumed media throughout our lives. Knowing design patterns will help you create websites that have a smooth flow to the content and visuals. Two common web layout patterns you need to know about are Z-patterns and F-patterns.

Z-pattern

For layouts with an economy of words and images and generous amounts of negative space, the Z-pattern makes for an efficient way to cruise through a website. When you start paying attention to where your eyes are going through a design, you’ll recognize right away when a Z-pattern is in place.

F-pattern

Designs heavy on text, like for an online publication or a blog, often follow a distinct F-pattern. On the left-hand side of the screen, you’ll see a list of articles or posts, and in the main body of the page, you’ll see rows of related information. This pattern is optimized to give people all the information they need, even if they’re quickly glancing through it.

Related reads: Web page layout: website anatomy every designer needs to learn

Understand responsive web design

Along with understanding layout patterns, it’s also important to know the fundamentals behind responsive web design. A responsive website functions and has a consistent look no matter what device they’re being displayed on.

Related reads: Intro to responsive web design

7. Learn about typography

Fonts can impart different tones or emotions as well as affect readability. If you’re learning about web design, knowing how to use typography is essential.

Typography serves several purposes in web design. First, it serves the utilitarian purpose of making content legible. But it can also evoke emotion and atmosphere, and the tasteful use of stylized typography can add to the overall aesthetic.

Here are three basic typographic concepts you should know.

Serif

Serif typefaces have minuscule lines known as serifs that grace each letter. This typographic style can be traced back to print.

Sans serif

As the name implies, sans serif typefaces lack the identifying lines of serif typefaces. These typefaces are found throughout the digital realm of websites and apps.

Display

Display typefaces are often used for headlines and can be either large and impactful or made of sharp, thin lines. They usually have sophisticated letterforms and are meant to grab someone’s attention.

Related reads: Typographic design: font styles and resources for designers

8. Put your knowledge into action and build something

You can watch tutorials, read blog posts, enroll in free web design courses, and absorb all of the theory and information you can about web design, but the only way to become a web designer is to begin web designing.

Start with a simple project. Maybe someone you know needs help creating a portfolio or has a side hustle that is lacking any sort of web presence. Offer to design them something for free.

A blog is also another great beginner project. This will give you practical design experience in learning how to use things like a content management system (CMS), as well as provide a showcase for your writing skills.

Building a website for a fake company or business is another fun creative exercise in developing your design chops. Plus, you can add it to your portfolio.

9. Get a mentor

Mentors are valuable because they’ve been where you are — at the very beginning — and have the desire to help you out through the hard-earned lessons they’ve learned. They have a deep well of expertise and knowledge. They’re a great resource for getting feedback on your work and finding what you’re doing right and what needs improvement.

In searching for the appropriate mentor, make sure you find someone who does the type of design you admire and specializes in what you want to learn. Mentors can give you a clear path from years spent in the field so you don’t have to stumble through learning web design.

Visual development provides an easy entry into web design

There was a time, not that long ago when you had to have a deep understanding of HTML and CSS to manually write the code behind a web design. Today, visual development tools like Webflow, it’s possible to put together a website and launch it in a short amount of time. What took days or weeks can now happen in hours.

Of course, so much goes into creating a good web design. Learning the fundamentals behind visual design, the basics of UI and UX, and knowing how the front end and back end function will make you a more well-rounded designer.

Whether you’re just starting or are an expert, Webflow offers an intuitive visual web development platform to empower you to realize your creativity. Webflow has an entire community to give you advice and to help you level up your skills. We look forward to seeing your work in our user submitted Made in Webflow collection of websites.