What is Web Design?

Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.

A web designer works on the appearance, layout, and, in some cases, content of a website. Appearance, for instance, relates to the colors, font, and images used. Layout refers to how information is structured and categorized. A good web design is easy to use, aesthetically pleasing, and suits the user group and brand of the website. Many webpages are designed with a focus on simplicity, so that no extraneous information and functionality that might distract or confuse users appears. As the keystone of a web designer’s output is a site that wins and fosters the trust of the target audience, removing as many potential points of user frustration as possible is a critical consideration.

Two of the most common methods for designing websites that work well both on desktop and mobile are responsive and adaptive design. In responsive design, content movesdynamically depending on screen size; in adaptive design, the website content is fixed in layout sizes that match common screen sizes. Preserving a layout that is as consistent as possible between devices is crucial to maintaining user trust and engagement. As responsive design can present difficulties in this regard, designers must be careful in relinquishing control of how their work will appear. If they are responsible for the content as well, while they may need to broaden their skillset, they will enjoy having the advantage of full control of the finished product.

Elements of web design

The Politics of Design, the iconic designer Paul Rand wrote, “Design is a problem-solving activity. It provides a means of clarifying, synthesizing, and dramatizing a word, a picture, a product, or an event.”

Web designers are constantly solving problems for their users. Websites should make it easy for users to go where they want to go and do what they want to do. A frustrated user is less likely to stick around, let alone come back to a website.

That’s why each web design element is in service of making the website as easy to use as possible: so people visit and interact with the website over and over again.

Layout: The layout is the arrangement of a website’s header, navigation menu, footer, content, and graphics. The layout depends on the website’s purpose and how a web designer wants the user to interact with the website. For example, a photography website would prioritize big beautiful images, while an editorial site would prioritize text and letter spacing.

Visual hierarchy: A user should be able to access the information they need by glancing at a website. This is where visual hierarchy comes in. Visual hierarchy is the process of determining which aesthetic aspects of the website should stand out using size, color, spacing, and more.

The headings in this article are a basic example of visual hierarchy. They quickly let you, the reader, know what this article is about.

Navigation: Navigation helps a user get from point A to point B using navigational tools like site architecture, menus, and search bars. Simple, effective navigation helps users find the information they’re looking for quickly and easily.

Color: Color gives a website personality, makes it stand out, and shows the user how to take action. The color palette might be determined by a brand’s existing identity or by the content of a website (like how this plant website uses hues of green). A consistent color palette helps give order to a website.

Graphics: Graphics are the logos, icons, and images that live on a website. They should complement the color palette, layout, and content.

Speed: A user’s first impression relies on how long it takes for a website to load. If it takes too long, chances are the user won’t stick around.

Accessibility: Who can or cannot use a website is dependent on a website’s accessibility. Making accessibility a priority ensures that all users are able to access and use a website and its functions equally.

The web design process in 7 simple steps

1.   Goal identification

In this initial stage, the designer needs to identify the end goal of the website design, usually in close collaboration with the client or other stakeholders. Questions to explore and answer in this stage of the design and website development process include:

• Who is the site for?
• What do they expect to find or do there?
• Is this website’s primary aim to inform, to sell (ecommerce, anyone?), or to amuse?
• Does the website need to clearly convey a brand’s core message, or is it part of a wider branding strategy with its own unique focus?
• What competitor sites, if any, exist, and how should this site be inspired by/different than, those competitors?

This is the most important part of any web development process. If these questions aren’t all clearly answered in the brief, the whole project can set off in the wrong direction.

It may be useful to write out one or more clearly identified goals, or a one-paragraph summary of the expected aims. This will help to put the design on the right path. Make sure you understand the website’s target audience, and develop a working knowledge of the competition.

Tools for website goal identification stage

• Audience personas
• Creative brief
• Competitor analyses
• Brand attributes

2.   Scope definition

One of the most common and difficult problems plaguing web design projects is scope creep. The client sets out with one goal in mind, but this gradually expands, evolves, or changes altogether during the design process — and the next thing you know, you’re not only designing and building a website, but also a web app, emails, and push notifications.

This isn’t necessarily a problem for designers, as it can often lead to more work. But if the increased expectations aren’t matched by an increase in budget or timeline, the project can rapidly become utterly unrealistic.

Tools for scope definition

• A contract
• Gantt chart (or other timeline visualization)

3.   Sitemap and wireframe creation

The sitemap provides the foundation for any well-designed website. It helps give web designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements.

Building a site without a sitemap is like building a house without a blueprint. And that rarely turns out well.

The next step is to find some design inspiration and build a mockup of the wireframe. Wireframes provide a framework for storing the site’s visual design and content elements, and can help identify potential challenges and gaps with the sitemap.

Tools for sitemapping and wireframing

• Pen/pencil and paper
• Balsamiq
• Moqups
• Sketch
• Axure
• Webflow
• Slickplan
• Writemaps
• Mindnode

4.   Content creation

Once your website’s framework is in place, you can start with the most important aspect of the site: the written content.

Content serves two essential purposes:

·      Content drives engagement and action

First, content engages readers and drives them to take the actions necessary to fulfill a site’s goals. This is affected by both the content itself (the writing), and how it’s presented (the typography and structural elements).

Dull, lifeless, and overlong prose rarely keeps visitors’ attention for long. Short, snappy, and intriguing content grabs them and gets them to click through to other pages. Even if your pages need a lot of content — and often, they do — properly “chunking” that content by breaking it up into short paragraphs supplemented by visuals can help it keep a light, engaging feel.

·      SEO

Content also boosts a site’s visibility for search engines. The practice of creation and improving content to rank well in search is known as search engine optimization, or SEO.

Getting your keywords and key-phrases right is essential for the success of any website. I always use Google Keyword Planner. This tool shows the search volume for potential target keywords and phrases, so you can hone in on what actual human beings are searching on the web. While search engines are becoming more and more clever, so should your content strategies. Google Trends is also handy for identifying terms people actually use when they search.

My design process focuses on designing websites around SEO. Keywords you want to rank for need to be placed in the title tag — the closer to the beginning, the better. Keywords should also appear in the H1 tag, meta description, and body content.

Content that’s well-written, informative, and keyword-rich is more easily picked up by search engines, all of which helps to make the site easier to find.

Typically, your client will produce the bulk of the content, but it’s vital that you supply them with guidance on what keywords and phrases they should include in the text.

Content creation tools

• Google Docs
• Dropbox Paper
• Quip
• Gather Content
• Webflow CMS (content management system)

Handy SEO tools

• Google Keyword Planner
• Google Trends
• Screaming Frog’s SEO Spider

5.   Visual elements

This part of the design process will often be shaped by existing branding elements, colour choices, and logos, as stipulated by the client. But it’s also the stage of the web design process where a good web designer can really shine.

Images are taking on a more significant role in web design now than ever before. Not only do high-quality images give a website a professional look and feel, but they also communicate a message, are mobile-friendly, and help build trust.

Visual content is known to increase clicks, engagement, and revenue. But more than that, people want to see images on a website. Not only do images make a page feel less cumbersome and easier to digest, but they also enhance the message in the text, and can even convey vital messages without people even needing to read.

I recommend using a professional photographer to get the images right. You can try free stock photos but keep in mind that massive, beautiful images can seriously slow down a site. I use Optimizilla to compress images without losing quality, saving on page-load times. You’ll also want to make sure your images are as responsive as your site.

The visual design is a way to communicate and appeal to the site’s users. Get it right, and it can determine the site’s success. Get it wrong, and you’re just another web address.

Tools for visual elements

• The usual suspects (Sketch, Illustrator, Photoshop, etc.)
• Moodboards, style tiles, element collages
• Visual style guides

6.   Testing

Once the site has all its visuals and content, you’re ready for testing.

Thoroughly test each page to make sure all links are working and that the website loads properly on all devices and browsers. Errors may be the result of small coding mistakes, and while it is often a pain to find and fix them, it’s better to do it now than present a broken site to the public.

Website testing tools

• W3C Link Checker
• SEO Spider

7.   Launch

When everything has been thoroughly tested, and you’re happy with the site, it’s time to launch. Web design is a fluid and ongoing process that requires constant maintenance.

Web design — and really, design in general — is all about finding the right balance between form and function. You need to use the right fonts, colors, and design motifs. But the way people navigate and experience your site is just as important.

Skilled designers should be well versed in this concept and able to create a site that walks the delicate tightrope between the two.

A key thing to remember about the launch stage is that it’s nowhere near the end of the job. The beauty of the web is that it’s never finished. Once the site goes live, you can continually run user testing on new content and features, monitor analytics, and refine your messaging.

Examples of web design

Partners & Spade

Partners & Spade is a New York City–based branding studio. Their website design is interactive without sacrificing simplicity. You know exactly what they’re about as soon as you visit their home page, and it’s easy to find their contact info, work examples, client list, and location.

The Sill

The Sill’s website is visually cohesive, with navigation tools that make it easy to find information about plant care, upcoming events, and plants available for purchase.

Agnes Lloyd-Platt

This portfolio website for fashion and beauty photographer and filmmaker Agnes Lloyd-Platt is visually striking and easy to use. The homepage pretty much gives a visitor all the information they need to know from the jump: work examples, contact info, and her representation.

The navigation menu is simple, so if someone wants to learn more about her work and who she is, they can. Plus, her portfolio can be filtered by type or color, making it easy to find specific projects.

Conclusion

Building a website involves a lot of moving parts. And knowing how each role complements the next will make you a better designer. Maybe you want to learn coding languages, or maybe you want to focus on the user experience aspect. Whatever it is, having a firm grasp of what web design and development actually entails will serve as a guiding light throughout your career.