Design and layout – a professional-looking website

1. Introduction

The visual elements of a website should assist users in understanding its content, structure, and navigation. Design should not merely entertain but make the website informative and professional. Design elements must add meaning, clarification, or context and should not distract from the content.

2. Main principles when designing a website

2.1 Organising information effectively on pages

  • Display similar or related elements together, ensuring they have a cohesive appearance.
  • Position important items at the top of pages.
  • Highlight key information or concepts.
  • Avoid cluttered pages.
  • Eliminate horizontal scrolling.
  • Maintain visual contrast between different fonts, text blocks, and surrounding whitespace.
  • Use whitespace strategically to create a professional aesthetic without unnecessarily lengthening pages.
  • Ensure visual consistency, including themes, layout, graphic elements, colours, backgrounds, and typography.
  • Use CSS (Cascading Style Sheets) to maintain consistency and flexibility across multiple pages. Avoid using tables for layouts; instead, utilise CSS Flexbox or Grid for responsive and modern designs.

2.2 Avoid frames

Frames are outdated and pose usability and technical challenges:

  • Users cannot bookmark framed pages as all frames share the same URL.
  • Frames hinder search engines, preventing proper indexing.
  • Printing framed pages often fails, and many browsers no longer support them.
  • Opening external links in a frame may create copyright implications.

2.3 Graphics, images, and animation

  • Optimise images: Use WebP format for superior compression and performance.
  • Scalable graphics: Employ SVGs for icons and logos to ensure scalability and clarity.
  • Limit the use of animation, flashing text, or overly elaborate graphics, ensuring they enhance rather than distract from the content.
  • Implement lazy loading for images and videos to improve page load times.
  • Provide alternate text descriptions (alt attributes) for images to improve accessibility.
  • Avoid using images to convey textual information where possible.

2.4 Typography and readability

  • Ensure text is easily legible, avoiding busy backgrounds and maintaining sufficient contrast between text and its background.
  • Use accessible font sizes and offer options for users to adjust text scaling.
  • Limit typefaces to create a cohesive appearance. Use Google Fonts or other web-friendly options for modern typography.
  • Left-align text for optimal readability and maintain appropriate spacing between lines (e.g., using “line-height normal” in CSS).

2.5 Colour

  • Apply colour conservatively to avoid clutter and ensure readability.
  • Provide high-contrast options for users with visual impairments.
  • Avoid overly saturated colours for backgrounds or foreground elements.

2.6 Responsive resign

  • Adopt a mobile-first design philosophy, ensuring the site is optimised for various devices and screen sizes.
  • Support dark mode preferences for better user experience and accessibility.
  • Avoid splash pages or site covers, as they hinder usability and waste time.

3. Technical design principles

3.1 Document formats

  • Use HTML as the primary file format, and PDFs for downloadable, lengthy documents requiring precise formatting.
  • Clearly label PDFs, including file size and an estimated download time, where applicable.

3.2 Performance optimisation

  • Minimise the use of redundant CSS and JavaScript files by combining them into single files.
  • Leverage image sprites for repeated graphic elements.
  • Optimise HTML by removing unnecessary tags and comments.
  • Use critical CSS to prioritise loading essential elements for above-the-fold content.

3.3 JavaScript and AJAX

  • Adopt modern JavaScript frameworks like React, Vue.js, or Angular for enhanced interactivity.
  • Load JavaScript at the bottom of the page to avoid blocking other elements.
  • Ensure JavaScript is cacheable using expires or cache-control headers.

3.4 Search engine optimisation (SEO)

  • Incorporate structured data using schema.org to improve search engine visibility.
  • Optimise metadata, such as titles and descriptions, for all pages.
  • Use Open Graph tags to ensure social media previews display correctly.

3.5 Browser and screen resolution

  • Focus on compatibility with modern browsers like Chrome, Edge, Safari, and Firefox. Avoid supporting outdated browsers such as Internet Explorer.
  • Design for responsive resolutions, accommodating devices from 360px width (mobile) to 1920px (desktop and high-resolution screens).

3.6 Accessibility

  • Comply with WCAG 2.1 standards for web accessibility.
  • Use ARIA roles and landmarks for assistive technologies.
  • Ensure full keyboard navigation and provide alternatives for multimedia content.

3.7 User experience (UX)

  • Include sticky navigation bars, breadcrumbs, and clear feedback mechanisms to guide users.
  • Implement personalisation options, such as theme selection or font resizing.

3.8 Page load speed

  • Host assets on a Content Delivery Network (CDN) for faster load times.
  • Reduce unnecessary redirects and implement caching for static assets.

By following these updated guidelines, your website will meet current design standards, ensuring it is professional, accessible, and optimised for modern users.