Basic Principles of Web Design & Layout

Create a consistent look and feel across your website

While there are many factors that go into developing an appealing website, there are some basic principles of web design and layout – like creating a consistent look and feel across your website – that the good ones tend to follow.  If you’re new to developing a website or you’re in the process of refreshing an old one, there are a few aspects to take into account.

Make the layout simple and straight forward

• Select a domain name that fits your business’s name or offering so that it’s easy to remember.
• Determine whether a single page or multi-page site is best. There are pros and cons to each design.¹
  
• The navigation should be intuitive; the links, messaging, features, and images should make sense no matter where your user enters the site.
• Structure content on a website as if you’re creating an outline for a report.  Typically, site navigation uses a layout where top level pages display high level concepts and link to supporting webpages for more details.  As technology continues to evolve, encouraging new uses and creating new norms, however, you may decide to use a format where the messaging at the top of the webpage is high level or represents a general concept, but becomes much more detailed as one scrolls down the page.  Both types of layout are common and offer pros and cons to the user.  To determine which layout makes sense for your business, consider your target customer profile, devices they use to access your site, the type of content being presented, technology you plan to use, budget, and website goals and objectives being sought. If you keep important information “above the fold” or at the top of the webpage, visitors will not need to scroll or search for more information.  Some visitors may leave if they don’t see what they’re seeking so think through how your content is received and found.
• Make sure contact information can be easily found on every page.
• Design your website with users in mind.
  • Think about which devices your target customers are likely to use to access your site. Ensure your user interface renders content correctly and is flexible for viewing/participating in discussions along with e-commerce capabilities if applicable.
  • Use social media sharing capabilities that fit users’ needs and interests.
  • Make your website accessible to those with disabilities, especially if you market your offering to the US government.
  • Color tones should be easy to read and print.

When adding content…

• Make sure link descriptions direct to relevant content and accurately describe the page or document to which you are linking or you’ll confuse and frustrate your site visitor.
• Use correct grammar and spelling. Formatting of text, headers, and bullets, should be consistent across the website.  Errors will make your site look unprofessional.
• Keep link descriptions short whenever possible and avoid using generic “click here” anchor text.
• If you link to an Adobe® PDF or another file type, indicate the file type as part of the link description.
• If you link to another website:
  • Open the webpage in a new window, so that you give them an easy option to return to your site.
  • Check the link policy of the website. While most websites want you to link to them to help their search engine rankings, some websites and organizations are particular about who links to their site and the context under which it’s conducted.
  • Consider adding a warning to the user that they will be leaving your website; this gives them the option of staying and warns them that the privacy and usage policies will likely be different.
• Use fonts that are clear and easy to read. It’s preferred to use one that renders well across different platforms (Windows® Mac®, and Unix®) such as Ariel, Helvetica, Times New Roman, and Courier.  While there’s a tendency to use small fonts, keep in mind older users or people who read or write for their professions may prefer a larger font.
• Use bullets, subtitles, tables, and call-out boxes to break up text, and use bold or different colored text to emphasize points you want to make. People scan web pages; they don’t read them.
• “Post once. Link many.”  In general, do not post the same document to different places on the site.  It’s best to upload your document once and link to it from different pages.  If your document is later updated and needs to replace an earlier version, simply overwrite the earlier version once rather than replace it in multiple locations on your site.
• Don’t forget SEO because you’ll want users to find your website and its images easily via search engines.

Discover more…

Sources:
¹ Karri Stover, “Single-Page Vs. Traditional Site Design: How Many Pages Does Your Website Need?” Business 2 Community, last modified June 5, 2014, http://www.business2community.com/online-marketing/single-page-vs-traditional-site-design-many-pages-website-need-0904998.
² U.S. Department of Justice, Civil Rights Division Disability Rights Section. “ADA Update: A Primer for Small Business,” (Guide, Washington D.C., last modified March 2011), http://www.ada.gov/regs2010/smallbusiness/smallbusprimer2010.pdf.
³ “ADA Update: A Primer for Small Business.”
⁴ “Browser Market Share,” NetApplications.com, accessed January 17, 2024, https://netmarketshare.com/.

Note: All other trademarks are the property of their respective owners.