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.
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.
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:
- “Beginning Graphic Design – Layout and Compositon”, Goodwill Community Foundation
- “How design boosts conversation”, Maryna Samsyka for UX Collective
- “Using F and Z patterns to create visual hierarchy in landing page designs”, 99designs
- “Key Principles of Visual Hierarchy in UX Design”, Caleb Kingston for Adobe
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:
- “Beginning Graphic Design – Typography”, Goodwill Community Foundation
- “The best and worst fonts (and why they’re good or bad)”, Lindsay Kramer for 99designs
- “5 Types of Fonts & How to Use Them In Graphic Design”, Mydee Lasquite for visme
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:
- “Beginning Graphic Design – Color”, Goodwill Community Foundation
- “Color theory: a beginner’s guide for designers”, Neal O’Grady for webflow
- “How to strategically use color in website design”, Stephanie Corrigan for Flux Academy
- Material UI has color palettes and pickers to use.