Aside from learning HTML, CSS and a host of other web-based languages and technologies, a basic understanding of how the Internet and the WWW work is crucial. On top of this, you must consider many factors when designing your site. This area of expertise falls to the User Experience (“UX”) designers and User Interface (“UI”) designers in the working world
In this post:
Required knowledge:
1. Target audience
The purpose and target audience of the website will inform your decisions relating to many of the below considerations.
You must also consider what types of device(s) you foresee your target audience using to access your site. Modern website development trends favour mobile-first, responsive design techniques.
2. Consistency
Colours, font styles, font sizes, contrast, and positioning of key elements such as menu structures are all aspects you must consider when planning your website.
3. Legibility
In the post Font faces for a formal report I discuss guidelines for selecting fonts. The post Mastering fonts in HTML deals specifically with fonts and HTML. Research has shown that sans-serif fonts are more legible on screens.
Other considerations:
- Font size
- Contrast
- White space
4. Navigation
A consistently placed set (or sets) of links used to navigate the website is generally known as a menu. Text or images must indicate clearly what the target of the link is, for example, a house icon often indicates the homepage, like so: .
There must be no broken links; not only is this frustrating for the user but it negatively affects SEO ranking.
5. Layout
5.1 The Fold
The concept of the fold comes from the days of selling newspaper advertising space.
Years ago, when you bought your newspaper from the vendor at the traffic lights, the newspapers would be folded in half and stacked. All you would see would be the top half of the front page: the half above the fold. Website developers adopted this term to refer to the part of the webpage visible in the browser when a page loads and before the user scrolls down vertically.
5.2 Header
As a result, most web pages have a header section with the website’s name and logo at the top of the page with the main navigation menu below it. There is often a wide image of some kind at the top, traditionally referred to as the banner image. This is a prime spot for advertising as well as any “call to action” links or buttons.
References:
- Coursera. (no date) What Does a UX Designer Do? Available at: https://www.coursera.org/articles/what-does-a-ux-designer-do (Accessed: 16 November 2023).
- Galante, A. (2020) Accessible Font Sizing, Explained: CSS-Tricks, CSS. Available at: https://css-tricks.com/accessible-font-sizing-explained/ (Accessed: 6 November 2023).