What Is Web Design?

by
Monica Galvan
What is web design?
Web design is a constantly evolving field. In this article, you'll learn what web design is, key ideas that influenced web design like the mobile-first movement, as well as tips for how to design an effective website.

The first ever published website came to the Internet on August 6, 1991. Tim Berners-Lee created the site about the World Wide Web project, describing the Web and how to use it. Since then, web design has evolved with innovations in technology and design.

World Wide Web project, the first published website from 1991
World Wide Web project, the first published website from 1991

Defining web design

First, let’s define what web design is. Web design is the process of designing the visual look and feel of a website. As a web designer, you’ll focus on planning the user experience of the website, wireframe layouts, organize content and images in a way that tells a story, and design the final UI. 

Web design vs web development

With a client’s business goal in mind, a web designer comes up with ideas, creative solutions, and designs the final UI mockup for a website. A web developer takes the UI mockup and uses HTML and CSS code to translate it into a working webpage on the Internet. Essentially, they make the website function. 

If you’re a freelance web designer you can choose to add web development to your services. A tool like Weblow makes it easy to design and develop your websites so you can charge more for your value to a client. 

Evolution of web design

Web design has morphed and changed with technological advances over time. From JavaScript to flat design, here are a few key ideas that greatly contributed to the evolution of web design.

1995–Introduction of JavaScript

There are limitations when it comes to designing a website with only HTML. With JavaScript, the web became more dynamic. Essentially it transformed a static web page into one a user can interact with. Examples of Javascript in use are a popup window, an auto-refresh feature on your favorite social feed, or when Google auto-suggests keywords as you’re typing a question into the search bar.

1996–Flash debuts

Adobe Flash gave web designers the freedom to create more dynamic websites by adding video, audio, and animation. These multimedia elements were packaged into a file and sent to a browser to display. Unfortunately, the user had to have the correct flash version installed in order to see these animations. When Apple decided not to include flash in their first iPhone in 2007, Flash started to decline in popularity in web design.

1998–CSS joins HTML

Shortly after the introduction of flash, a better way of structuring design came in the form of Cascading Style Sheets (CSS). With CSS you can change font sizes and colors, add background colors, images, and more. Think of HTML as the content and CSS as the presentation. Together, they create a truly customizable experience on the web.

2000–Bringing businesses online

Paypal, the world’s leading online payment company, began to skyrocket in 2000. As more businesses started going online, there was a need for secure transactions. From Amazon to eBay and Etsy, slowly the idea of online shopping became more common.

2007 — The birth of mobile

With the launch of the first iPhone, designing for a web browsing experience on a mobile phone became its own challenge. Designers and developers had to adapt, design for a small screen, and think about things like load time. Remember life before unlimited data, when you had to pay for Internet access by the megabyte?

The biggest step to creating a better experience on mobile was the idea of column grids. 960-grid systems and the 12-column division spiked in popularity with designers. More on the importance of grids in web design later in this article.

2010–Responsive web design

Ethan Marcotte came up with the idea of responsive design as a challenge to the existing approach to web design. In his post, he writes “fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” For a designer, this meant designing multiple layouts to address the various screen sizes for iOS, Android, and tablet devices.

2012–Flat design

Before flat design started trending, web and app design used 3D design effects, skeuomorphism, and realism. Shadows, gradients, and highlights were aggressively used and often overdone. 

The stark transition from 3D to flat design
he stark transition from 3D to flat design

Over time, web design became more minimal. Flat design strips away the hyper-realistic representation of objects and instead focuses on clean lines and simple areas of color. The trend began to blow up around the time of Apple’s release of iOS 7 in 2013. The new interface was simple and a stark contrast from the skeuomorphism style made famous by Apple products.

Tips for designing an effective website

Now that you know more about the evolution of web design and how key events shifted design, what about how to design a good website now? Your homepage is your first impression to the world so it’s important to design it well. Design can be subjective but there are some things to keep in mind to design an effective and well-designed site.

Design for mobile-first

Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: Mobile. Designing and prototyping your websites for mobile devices first helps you ensure that your user’s experience is seamless on any device screen. Rather than designing the UI layout for a desktop website experience, design and prototype how it will look on mobile first. Then move onto the larger screen versions next like tablet and desktop. 

Example of a desktop and mobile version of a website (Source: Flo Steinle)
Example of a desktop and mobile version of a website (Source: Flo Steinle)

The mobile-first design concept first came about in 2010 when Eric Schmidt, CEO of Google at the time, announced at a conference that the company would be focusing more on mobile users in their design practices. “What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first. You should always put your best team and your best app on your mobile app.”

Mobile design is much more limited. You’re designing for a smaller screen and can only fit so many elements on one page. By designing for mobile first, you have to choose only what’s absolutely necessary for your users and leave out all the rest. As you expand and adapt the design for larger screens, you can choose to provide more information but you know exactly what you need to include on first. 

To learn more about how to design responsive websites, check out this video where Ran walks you through the process:

Use a grid to solve organization

Grids help you organize the content of a web page. Without one, elements are randomly placed, misaligned, and it becomes more difficult for the user to navigate throughout the website. If you’re stuck on how to get started with using a grid, a good place to start is a 12-column or 960 grid system.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions based on a width of 960 pixels. There are two variations: 12 and 16 columns.

The 960 grid follows the following structure:

  • The total width is 960px
  • Use 12 columns maximum, 60px each wide
  • Use 10px spacing to the left and right of each column for a total gutter spacing of 20px
  • Total content area is 940px

The 12-column grid system allows for plenty of flexibility. Here’s an example of how you can use the 12 column grid to add content in a 3 column layout.

Example of elements placed on a 12 column grid
Example of elements placed on a 12 column grid

Balancing negative space

Negative space, also known as white space, is a learned skill in design. New designers might be intimidated by the blank page but design isn’t about filling space with as much information and graphics as possible. Instead, use typography, images, and negative space with purpose to direct a user’s attention and create a seamless experience.

Here’s an example of negative and positive space can be used together to shift the focus of a design. There’s no right or wrong answer. But depending on the goal of your design, you may want to lean toward more negative space.

Examples of positive and negative space
Examples of positive and negative space

Legibility is king

Readability and legibility are often interchangeable terms but they’re actually quite different. Readability is the arrangement of fonts and words in order to make written content flow in an easy to read way. Legibility refers to how easily distinguishable the letters are from one another in a font. After all, if no one can read what’s on your website, then what purpose is it serving? Here’s an example of good and bad legibility for a sample body copy paragraph.

Good vs bad legibility
Good vs bad legibility

The paragraph on the left shows good legibility. There’s a balanced level of leading and tracking, it uses a regular font-weight and is displayed in upper and lower case. The second paragraph, on the other hand, is an example of bad legibility. The leading and tracking are so tight, the letters begin to overlap. The bold font-weight and all caps make it difficult to read, especially when there are multiple paragraphs.

Use high-quality images

Avoid blurry and pixelated images by designing your graphics at the right size and scaling your images appropriately. Use whole pixel numbers only. Instead of using an image sized at 600.5 x 800.1 px, resize to 600 x 800 px. 

In Adobe Photoshop, you can easily check this by navigating to Image > Canvas Size. At the top is the current size, if you want to change the size then make your adjustments under New Size.

Canvas Size dialog in Adobe Photoshop
Canvas Size dialog in Adobe Photoshop

Clear hierarchy

Hierarchy is how you show the importance of specific elements on a page or website. Through design elements like scale, color, contrast, alignment, repetition, and space you can achieve clear hierarchy and help direct the user to one outcome. Whether it’s the headline or a call to action, decide what’s most important for the user to see first. Have a goal first then use design to solve the problem.

Take a look at these two examples, which one has better hierarchy and why?

Bad vs good hierarchy in design
Bad vs good hierarchy in design

In the first example, all text is the same size, color, and weight. When everything is the same, nothing stands out, and it’s easy to skim past information. In the second example, there’s clear hierarchy. You notice the headline first because it’s the largest and displayed in a bold weight. Next, you notice the CTA because the white text is all caps and reversed out on a purple fill shape. Using a combination of scale and weight helps direct the user to the most important information, to read the headline first and then take action.

To learn more about why hierarchy is important in design, check out this lesson from our free web design course:

Clear calls to actions (CTAs)

When it comes to designing for the web, it’s important to have a clear path to one call to action. Many times a client will ask you to include more buttons, make them bigger, make them red, or just make them stand out more. It’s up to you as the designer to make these decisions. Use your design skills to organize the content of a website in an effective way. Good design is simple. When in doubt, lean toward less.

Don’t overwhelm or confuse the user

Last, but not least, avoid overwhelming your user by cutting all distractions from your design. You’ll be able to achieve this if you follow the above tips for good web design practices but it’s always a good reminder. If a client asks you to add or make changes to a website, ask why. Does it add value to the user experience? If not, it’s probably not necessary to include. 

The Google homepage is one of the best examples of minimal web design with a clear call to action. There’s distinct brand recognition with the large Google logo, a long search bar, and just two buttons. There’s no other distractions.

The Google homepage is an excellent example of minimal, non-distracting design
The Google homepage is an excellent example of minimal, non-distracting design

Learn web design

Now that you have a better idea of what web design is and best practices for designing an effective website, you may want to read our post on What is a Web Designer to learn more about what a web designer does. 

Or maybe you’re already interested in learning more about how to become a web designer. Check out our course The $10k Website Process where you’ll learn about creative strategy, how to use hierarchy to wireframe the layout of a website, design the final UI, and even how to develop it to charge more money and bring in repeat clients.

FREE WEBDESIGN COURSE IN YOUR INBOX

Start growing your business today with Ran’s High-Value Web Designer Secrets email course that teaches you the three most significant things he’s learned as a freelancer.