What I Talk About When I Talk About Design

Taking a look at the aspects of Web Design

5 min read

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.

Design

Obviously, web design starts with design. I mean, it's in the title. So what does designing websites entail?

Layout and Hierarchy

Overview

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.

Go Deeper

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).

Read Principles of Visual Perception →

Color

Overview

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.

Go Deeper

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.

Read Erik's Color in UI Design article →

Typography

Overview

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.

Go Deeper

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.

Check out Typography for Lawyers →

Sketching and Wireframing

Overview

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.

Go Deeper

Tracy Osborn recently wrote an article for Smashing Magazine about how sketching with pen and paper can unlock your imagination.

Read The Power of Pen and Paper →

Design Comps

Overview

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.

Go Deeper

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.

Read Stephen Hay's Thoughts on Designing in the Browser →

Development

Development involves turning the design for a website into the necessary HTML, CSS, and JavaScript needed to make it run on the web. As I previously mentioned, I think it is important for a web designer to have a good understanding of HTML, CSS, and at least a general understanding of what is possible with JavaScript. In my own experience, having a deeper knowledge of web development has opened doors for me that would not have existed otherwise.

HTML

Overview

HTML, or Hypertext Markup Language, is the primary language of the web. You can use HTML without CSS or JavaScript to create a web page (although the page would look like a plain word processor document). Markup, as it is commonly referred to, is used to "tag" different parts of a document using angle brackets around a word. For instance, header tags are denoted with an h1-h5 wrapper: <h1>Title of the page</h1>.

Go Deeper

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.

Read HTML5 for Web Designers →

CSS

Overview

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.

Go Deeper

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.

Get a subscription to Frontend Masters →

JavaScript

Overview

JavaScript is a programming language that, along with HTML and CSS, is one of the core technologies of the web. Of the three, JavaScript has the steepest learning curve. It is a true programming language.

Go Deeper

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.

Visit Learn Vanilla JS →

Conclusion

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.