Web Design Fundamentals

Accessibility

When beginning to create or remodel a website, accessibility should be at the foundation of your planning. Accessible features are easier to integrate at the start, but making inaccessible ones accessible after the fact is important to ensure your entire audience can use your site. You can learn more in depth about how to achieve accessibility on our Website Accessibility page. 

The W3C’s Web Content Accessibility Guidelines, or WCAG, are the gold standard for accessibility on the internet. They are updated yearly and account for all modes of online and digital content. They are provided both in their entirety as well as in a condensed version and W3C’s interactive cheatsheet.

Search Engine Optimization

Another technical consideration of web design is Search Engine Optimization, or SEO, the practice of making your website friendly to the search engines that provide the majority of internet traffic to your site. SEO has three major considerations: keyword inclusion, high-quality content, and backlinks. Keyword inclusion and high-quality content are done on the website-builder’s side, involving writing and keywording original information that answers people’s questions about your institution and the topics it covers. But backlinks, which are links to your website in other people’s websites, happen through networking and cultivating a good online reputation.

If you wish to optimize SEO on your own, Backlinko provides an in-depth look into the 200 ranking factors Google uses to sort sites. The same site also has a broader overview of SEO fundamentals if you want to learn more.

Like many aspects of web design can be done by anyone, you can improve SEO through DIY research and tutorials, but there are local and online SEO service experts who can help manage serious SEO concerns. This article from Search Engine Journal can help you determine your need level and how to factor SEO into your budget.

Layout

Effective web design creates accessible, intuitive, and attractive websites. Before you begin to create or redesign a website, you should make sure you have one thing prepared: the content you want to share. Modeling your site from a content map will result in a more streamlined layout. An easily-navigable site will allow your content to reach more viewers. This blog post from Webflow explains content-first design in depth.

Aside from refining your broader site layout, effective page layout is important as well. Ordering your content in a way that makes sense to the human eye improves people’s ability to absorb it. For denser content, like long spans of text, an F-pattern should be used. The Z-pattern format suits pages with less text or content like landing pages.

A graphic that illustrates different content pattern. It has a dark blue header and a light green body, and uses teal lines to show different content patterns. The F-pattern, an F shape, is illustrated on the left. The Gutenberg Diagram is in the middle. This Diagram demonstrates how the human eye moves between a Primary Optical area, a Strong Fallow Area, a Weak Fallow Area, and a Terminal Area in a "Z" pattern and a direct pattern (Primary to Terminal). A Z-Pattern, a Z-shape, is also shown on the right.
Originally included in “How design boosts conversation“ by Maryna Samsyka on May 12, 2019.

In addition to content patterns, one can take advantage of the natural visual hierarchy in web design. Larger, bolder, and brighter objects will draw a viewer’s eyes before smaller, thinner, and duller ones. Integrating visual hierarchy can help guide the viewer to what is important first.

For additional resources on layouts, check out:

Fonts

Typefaces or fonts help give websites, and by extension their institutions, a clear and defined identity. Selecting a harmonious family of fonts and sticking to them gives a site a professional, composed feel. Integrating existing institutional branding adds cohesion. When choosing fonts, it is important to keep accessibility in mind: choose simpler, more legible fonts over decorative, abstract ones to convey information better. A good rule of thumb is to have no more than three fonts included in a given page or design.

Website building tools often include a variety of fonts built in, but font webkits can provide additional options. You can find fully-licensed fonts through sites like Google Fonts. Another stand-out is Adobe Fonts, provided for free with any Adobe subscription, which will package fonts in easy-to-integrate web projects.

Here are additional resources on fonts, how they work, and how to choose them:

Color

Understanding color theory and integrating it into a website’s design can approve its appearance and accessibility. Key considerations include making sure your website’s palette goes well together, sets the right mood, and does not make things difficult for visitors with color blindness or vision impairments. Review our General Website Accessibility Resources page for specifics.

If there are existing institutional colors, integrating these adds to the site’s professionalism. Resources like Adobe Color, free to use, allow you to generate color palettes from scratch or from existing colors. This site has additional functions, including accessibility tools and gradient generation.

Here are additional resources on color in design: