Philip Westfall, November 7, 2018
Web design is the process of planning, conceptualizing, and arranging content intended for the Internet. Modern web design goes beyond how things look (aesthetics) to include how things work (functionality). Web design is not limited to websites as it includes other uses such as web apps, mobile apps, and user interface design.
To help simplify this guide, let’s take at how web design relates specifically to websites.
Table of contents
When designing a website, it’s imperative to consider both the look and the functionality of the site. Integrating these elements into the design will help maximize the performance of the site, regardless of how performance is measured.For example, did you know that, because of search engine optimization, web design can have a huge impact on your performance in search engines like Google?
Here’s a quick overview of the elements you need to consider in your design to make sure everything looks good!
Fundamentally, the look of a website and its words go hand in hand. The two should never really be considered separate. Having your designers and content writers work together, instead of in sequence, can enable a more powerful design.
When designing a website, it’s imperative to choose easy-to-read font pairings that complement the design. Tools like Canva’s Font Combinator can help you find the perfect match for your font. Web design tools like PageCloud even include numerous font pairings within their app.
Colors are one of the most important elements to consider when designing a website. Keep in mind that here are a lot of misconceptions about the psychology of color. When choosing colors for your site, it’s important to focus on aligning your colors with your brand and the message you are trying to convey.
How you decide to arrange your content will have a dramatic impact on both the appearance and functionality of your site. Although there aren’t any specific rules when it comes to website layouts, there are definitely some principles you should follow. If you don’t know how to write code, it becomes essential to understand the limitations of different website design tools so you don’t get stuck halfway through your design.
The use of graphical elements in web design has really taken off over the past few years. Combining beautiful colors and shapes can be used to accomplish many things, such as directing the attention of your site visitors. The biggest challenge with this trend are the complications that arise when looking to implement the design without having to rely on code.
There is a space that exists between every element within your design: the images, the paragraphs, the lines... even the letters have spacing! As a rule of thumb, having too much space is better than having things crammed together. The concept of whitespace is definitely top of mind with modern web designers.
Images & Icons
Amazing designs can communicate a lot of information in just a few seconds. One of the ways to accomplish this is through the use of powerful images and icons. A quick Google search for stock images or icons will produce thousands of options. To help simplify your search, here are a few of our favorites:
Free images and icons
Premium images and icons
Videos are an increasing trend amongst web designers. When used properly, they can help your website visitors experience something that simply can’t be described with words or images. One thing to keep in mind is that eye-catching videos can be distracting and should never compete with your content.
Navigation is one of the main components that determines if your website actually “works”. Depending on the audience, your nav can serve multiple purposes. It helps first time visitors discover what you have to offer while guiding returning visitors to specific sections within your site. In both cases, there are a few best practices you’ll want to follow.
No one likes slow websites. Regardless of how nice your design is, if it doesn’t load within a reasonable time, it will not perform in search, and it will not accomplish your goals. Although the top site builders typically compress your content to maximize load times, there are no guarantees; do your homework to ensure the tool you choose provides optimum performance.
Related: Google’s Page Speed Test
There are tons of web animation techniques that can help your design accomplish a wide range of tasks, from grabbing a user’s attention to giving feedback on certain interactions with content like buttons or forms. If you’re new to web design, we’d recommend sticking to simple animations at first. Complex animations typically require developer intervention.
Your site visitors have multiple ways of interacting with your site depending on their device (scrolling, clicking, typing). The best designs always simplify these interactions giving the user the impression they are in complete control. Here are just a few examples:
A website’s structure plays an important role in both user experience and SEO. If people are getting lost navigating through your site, chances are, crawlers will too. Although there are some free sitemap builders available online, for small sites sometimes the best approach is to lay out your pages on a whiteboard or on a piece of paper.
Cross-browser & cross-device compatibility
A great design will look good on all devices and browsers (including Internet Explorer). If you’re building your site from scratch, we’d recommend using a cross browser testing tool to make this tedious process faster and more efficient. On the other hand, if you’re using a website building platform, the cross browser testing is typically taken care of by the company's development team, which lets you focus on the design.
Although you might come across articles online that talk about a whole bunch of website design styles (fixed, static, fluid, etc), in today’s mobile first world, there are only two ways to properly design a website: adaptive and responsive websites.
The best part is that with modern design tools, you don’t need to know how to code to build out stunning websites that look great on all devices.
Understanding the pros and cons of adaptive and responsive websites will help you determine what’s best for you.
Adaptive web design uses two or more versions of a website that are customized for different screen sizes. Adaptive websites can be split in two main categories based upon how the site detects what “version” needs to be displayed.
Adapts based on device type
When your browser (aka client) connects to a website, the HTTP request will include a field called “user-agent” that informs the server about the type of device attempting to view the page.
Basically, this means the site knows what version to display (ex: desktop or mobile). The only problem with this approach is that if you shrink the browser window on a desktop, the page will not adapt because it continues to show the full “desktop version”.
Adapts based on browser width
Instead of using the “user-agent”, the website uses media-queries and breakpoints to switch between versions. So instead of having a desktop, tablet, and mobile versions, you’d have 1080px, 768px, and 480px width versions. On top of offering more flexibility when designing, this approach offers a more “responsive” look when changing the size of your browser on a large screen.
(image credit: UX Alpaca)
WYSIWYG editing (What you see is what you get)Custom designs are faster and easier to build without codeCross-browser and cross-device compatibilityFast-loading pages
Websites that use “device type” can look broken when viewed in a small browser window on a desktopLimitations on certain effects that only responsive sites can accomplish
Responsive websites use a combination of flexible grids (based on percentages) with breakpoints (using media queries) to create a custom look at every screen size. Unlike adaptive sites that adapt only when they hit a breakpoint, responsive websites are constantly changing according to the screen size.
(image credit: UX Alpaca)
Great experience at every screen size, regardless of the device typeResponsive website builders are typically rigid which makes the design hard to “break”Tons of available templates to start from
Requires extensive design and testing to ensure quality (when starting from scratch)Without accessing the code, custom designs can be challenging
Note: Adaptive websites can contain responsive elements. For example, image galleries can be built to be fully responsive while the rest of the site is adaptive.
There are two main ways to design a website: using a desktop app or using a website builder. The tool you decide to use will vary greatly based upon your team size, your budget, the type of site, and its technical requirements.
The most popular desktop apps for designing a website are Photoshop and Sketch. This process requires designers to build out a design before sending it to a development team to convert the design to code.
Typically, this is the de facto standard for large or complex websites because it allows the designer to focus on the look and feel while transferring all the technical challenges to the dev team.
Unfortunately, this process can be expensive and time-consuming as multiple resources and specific skills are involved.
To avoid involving a developer, it may be beneficial to use a website builder to design a website with fewer technical requirements.
There are several website building options on the market today. Not all of them can be considered “web design tools” as editing limitations can make it very difficult to create something custom without having to rely on code.
For example, although Wordpress is the most used website platform, it’s not very popular with visual designers. Typically, it is used by developers who implement designs.
As mentioned above, there are only two types of web design: adaptive and responsive. Let’s take a quick look at the most popular web design tools based on the type of code they produce.
Wix and PageCloud are arguably the two best visual website builders on the market today. Because they use an adaptive approach, their drag and drop and WYSIWYG capabilities are second to none. This means you can build just about anything without having to write a single line of code.
Wix has been around since 2006 and has since developed a wide range of features and templates to suit just about every business need. Today, it’s considered as one of the easiest tools to use for beginners.
On the other hand, PageCloud was founded in 2014 and its revolutionary technology allowed designers and developers to collaborate in a visual editing experience like no other. Today, it’s considered among the most easily customizable website builders.
Although there is no distinct winner in this category, here are a few things to keep in mind:
If you’re looking for the most customizable experience, choose PageCloud.If you’re looking for something really easy and don’t have a lot of design experience, choose Wix.If you’re looking to work with a developer, choose PageCloud.If you’re looking to work with lots of templates, choose Wix.If you like shortcuts and the experience found in desktop publishing apps, choose PageCloud.
As both platforms offer free trials, we’d recommend trying them both before deciding.
Creating a fluid responsive website is hard. Despite the fact that tools like Squarespace produce responsive sites, the editing experience uses grids and boxes that makes building unique designs close to impossible without having to code extensively.
This is where the more complex web design tools come in.
Here are a few of the pros and cons to consider when looking to adopt one of these tools:
Ability to create custom responsive sites without having to write codeUnmatched control over every element on the pageAbility to export code to host elsewhere
Complex tools with steep learning curvesSlower design process that adaptive website builders
Every designer looks for inspiration somewhere. Here are some of the best spots where web designers go to get your creative juices flowing:
Note: Keep in mind that some of the highly curated designs you’ll find on these sites are either mockups (images made in a tool like Photoshop) or sites that got implemented by a developer. If you’re trying to copy these sites, remember that complex animations or effects can be hard to recreate without code.