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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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 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.
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.
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.
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.
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.
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?
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:
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.
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.
Need a laptop for web design? check out these recommendations.
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.
