Web design is a term that gets thrown around a lot but is not clearly defined. I have had several jobs as a “Web Designer”, yet each job had wildly different responsibilities (some solely focused on visual design, while others were mostly development). In this article, I want to clarify what I am talking about when I use the term Web Design.
Obviously, web design starts with design. I mean, it’s in the title. So what does designing websites entail?
Layout and Hierarchy
This is the foundation of any design project. It includes learning about rhythm and balance, size and scale, figure and ground, and grids to create consistent layouts.
Steven Bradley put together a comprehensive 6-part series on Design Principles that is a great place to learn more about layout. The series starts with a deep dive into visual perception and gestalt theory (a fancy German term for the way we perceive design elements).
Most traditional design education starts with the color wheel. This is a useful tool for understanding the relationships between colors. It can be used to choose “harmonious” colors that complement each other.
Usually, I would say you don’t need to reinvent the wheel. Still, Erik D. Kennedy wrote a great article about why traditional color theory sucks and how you should think about using colors on the web instead. Erik is the creator of a popular series of design courses called Learn UI and Learn UX. Erik recommends keeping things much simpler than the complex color wheel palettes. For example, instead of starting your design with 4-5 different colors, try starting with one color and use lighter or darker variations and only add additional colors as needed.
Over the years, I have developed a borderline obsession with typography and spent thousands of dollars on font licensing. However, you DO NOT need to spend money on fonts to achieve good typography.
An aside: Typography is the overall study of how fonts are used and implemented, while a font is just one part of typography. The words are not interchangeable.
My favorite resource for learning typography and all of the various facets and rules employed in good typography is actually a book written for lawyers.
Sketching and Wireframing
Many web designers tend to skip this step and go straight to a design tool like Photoshop, Sketch, or Figma. However, spending some extra time sketching at the beginning of a web design project pays dividends later on in the process. I use a special notebook for sketching thumbnails of websites, but you can start with regular pen and paper. Often, I will set a timer for myself and try to sketch as many possible variations as I can in 10-15 minutes. This process helps me to identify problems and work through possible solutions.
Wireframing is the next step after sketching. Wireframes are higher fidelity than a pen sketch, but still do not include final design elements and often even leave out the color. You can purchase wireframe UI kits for Figma or Sketch that can be used to scaffold out a website design quickly. There are also some great online tools like Miro or Whimsical that allow you to build wireframes quickly.
Tracy Osborn recently wrote an article for Smashing Magazine about how sketching with pen and paper can unlock your imagination.
This is short for “comprehensive design layout” but is commonly referred to as a “comp”. A design comp is a high-fidelity mockup of how the design will translate into a website. Historically design comps were built in a design tool like Adobe Photoshop, but many modern web designers use an app like Sketch or Figma. Some newer apps like Webflow or InvisionApp are blurring the line between design and actual working code.
In Responsive Design Workflow, Stephen Hay even goes so far as to say that static mockups/design comps are not practical for responsive design on the web. He recommends creating “web-based” design mockups that show how a design will look on various devices.
The best resource for learning about HTML is the book from A Book Apart called HTML5 for Web Designers. It describes the history of HTML and how it is used to build websites.
CSS, or Cascading Style Sheets, is the language used to define design styles for HTML documents. CSS code is where you specify colors, font styles, images, and layouts for your web pages. CSS is one of my favorite things about web design. It is where you make things look pretty.
A Book Apart published a great reference for getting started with CSS called, CSS3 for Web Designers. This is a great resource for understanding the basics. If you want to go further you could take a free class from Codeacademy or a paid class from Frontend Masters.
I wrote a whole post about all of the tools and resources I used to help me learn JS, but one of the best places to start is Chris Ferdinandi’s Learn Vanilla JS website. His site includes a lot of really helpful blog posts, a newsletter, several ebooks, and a paid course.
Being a web designer necessarily means being a generalist. It can be really helpful to have a general knowledge of a lot of adjacent topics but choose a single area to develop a deep well of knowledge. This is commonly referred to as having “t-shaped skills”.
T-shaped skills have been especially valuable to me as a freelance web designer. There have been several opportunities for me to “upsell” my skills by offering a client an adjacent skill. For example, I was once hired by an agency to help design and develop a website for a client. During the course of this project, I got to know the General Manager of the agency. He had an emergency project come up for a different client and because of my knowledge of User Experience design, I was hired to lead the UX design efforts on this new project. T-shaped skills to the rescue!
The single most important skill needed to be a great web designer is the ability to learn quickly. If you love to learn, there are endless opportunities and areas of web design to choose from.