Web Design - Internet Technologies

Website components in modern designs

  • Hero Sections

  • Call-to-Action buttons

  • Unique Typography

  • Mobile-friendly layouts

  • Whitespace

  • Accessibility

Hero sections

  • The first thing people see when they visit your website.

  • The area that immediately shows up on the screen under your logo and menu.

  • Ideally includes information about:- What you have to offer

    • Why people should trust you

    • The benefits of working with you

    • What action they should take next

  • Examples:- charity: water

    • Notion

    • Jasper

Call To Action buttons

  • A button placed in the wrong area of a page, which uses the wrong color, can stop a user in their tracks.

  • The button is meant to direct users into taking the action you want them to take.

  • Position the primary CTA below the header — either on the left, right, or center of the page.

  • Use a secondary call to action like Learn More or See Menu for users who aren’t ready to buy.

  • Include a benefit statement or urgency statement below the primary CTA on the hero section.

  • If necessary, use directional cues that point to the call to action.

  • Examples:- PAY FOR LASIK

    • Get Exclusive SEO Tips

    • Stripe Checkout

  • Types:- Primary CTAs: call visitors to do something relating to the app or website’s core purpose (e.g., subscribe).

    • Secondary CTAs: for visitors that are unsure about committing to the primary action (e.g., start a free trial instead).

    • Fallback CTAs: for those that aren’t interested in what’s being offered or aren’t interested at the moment (e.g., follow on social media).

  • Color codes will depend on the type of site you’re designing and its brand personality.

  • You should also think about the user and who is likely to be using the site and clicking on the buttons to inform your choices.

Website patterns

  • The F-Pattern: The standard for sites with a lot of text, such as news sites or blogs. The user’s eyes will scan across the page, left to right, then go left before dropping down and scanning across the page again. You’ll want to have your call to action where the eye ends as it scans left to right.

  • The Z-Pattern: You’ll find this pattern when content is more spacious and the user’s eye will scan the page like Zorro carving a Z. You’ll want to place your call to action along the Z line, preferably near the end of it.

Typography

  • Fonts (font faces or font families) are important for your content readability.

  • Clean typography will include the following elements:- Use of web-standard fonts.

    • Correctly sized text, usually bigger than 16px. FabrizioVanMarciano.com uses 17px for body text for improved readability.

    • Adequate line spacing for improved readability. I recommend 1.9em

    • Limited use of different colored fonts.

    • Grey or black typography, depending on the background tone/image

  • Popular web fonts include:- Roboto

    • Poppins

    • Open sans

    • Lato

    • Montserrat

    • Oswald

    • Raleway

    • Merriweather

    • Noto Sans

Website characteristics

  • In the early days of the Internet, web pages were designed for a particular screen size/resolution.

  • If the end-user has a different device than the designer, unwanted horizontal or vertical scrollbars would appear.

  • Hardware market evolution led to a variety of devices and screen sizes.

  • As a result, a concept for responsive web design is born.

  • Before that web pages were either following the liquid or fixed designs.

  • Liquid would allow content to stretch and fill the empty space in a web page.

  • Fixed design would have specific pixel widths and heights set for individual components.

  • The term responsive design was introduced by Ethan Marcotte in 2010.

  • Three techniques are used to build responsive design:- Using a fluid table grid (meaning organizing content first in rows, then in columns)

    • Setting a maximum allowed size for images

    • Using CSS rules to write styling rules for different media screen sizes.

  • Responsive design is not a separate technology or programming language. It’s a standard that has become pivotal in web design in the last 13 years.

Responsive design frameworks

  • Nowadays different frameworks are used to apply responsive design principles faster.

  • The most popular among them are:- Bootstrap

    • Foundation

    • Pure

    • Tailwind

  • The main benefits stem from the ready-to-use templates and the styling rules for specific screen resolutions.

Bootstrap

  • Bootstrap was created by Mark Otto and Jacob Thornton as an instrument to maintain standardization across Twitter development teams in 2011.

  • Bootstrap became widely adopted in WordPress, all modern WordPress sites are using Bootstrap.

  • The current major version is 5.

  • Some characteristics of Bootstrap are:- Easy to use: offers a straightforward and intuitive grid system, making it easy for developers to build layouts and responsive designs.

    • Rich components: provides a wide variety of UI components, including buttons, forms, navigation menus, and more, which can save a lot of time and effort in design and development

    • Large community: has a massive community, which means you can find a lot of resources and support if you need help with your project.

Tailwind

  • Tailwind is a newer framework that has been gaining popularity in recent years. It was created by Adam Wathan and Steve Schoger in 2017.

  • Currently, Tailwind is preferred among artisans and experts in web design.

  • Key characteristics are:- Flexibility: offers a lot of flexibility to developers, as it provides a wide variety of utility classes that can be used to customize the design of a website.

    • Lightweight: lightweight framework that can ship with less than 10kb in size, which means it is generally faster than Bootstrap in terms of loading times.

    • Modern Design: offers a more modern and minimalist design compared to Bootstrap, which can be more appealing to some users.

Whitespace

  • Whitespace is an often-used element of minimalist web design, but is now a critical feature of effective modern site frameworks.

  • By balancing content such as links, text, and videos with similar amounts of whitespace, users are naturally drawn to key aspects of your site.

  • While there’s no hard-and-fast standard for the amount of whitespace you need, a good rule of thumb is to create at least some whitespace between every content element.

  • Whitespace helps focus user attention on the elements that matter most to your business.

  • For example, if you have a featured product image or video at the top of your homepage, separate it from further content with whitespace. This helps it stand alone and highlights its importance compared to the rest of your site. If you surround it with visually noisy elements, however, the focus is quickly lost.

Web Accessibility

  • Accessibility is another crucial aspect of web page design, as it ensures that people with disabilities can access and navigate web pages.

  • The topic has been in discussion since the start of the century (Paciello, 2000) and numerous advances have been made to ensure equal opportunity for all users of the Internet.

  • Throughout the years a number of guidelines are introduced to allow web content to be accessible for people with disabilities.

  • In the most common case, users who are visually impaired use an application that reads aloud the content of the web page.

  • Because not all content is in a text format, e.g., media like images, video, interactive maps, and so on, specific attributes are assigned to these components, to describe and caption their meaning.

  • Accessibility is often abbreviated as A11y.

  • Accessibility does not always pertain to people with disabilities. It is also used to improve user experience in general when ICT is used by the elderly when the environment is causing difficulties for the user, e.g., bright sunlight or low connectivity.

  • Accessibility is important not only for compliance with regulations but also for improving user experience and search engine ranking.

  • Rules for creating accessible web pages:- Alternative text for images – the alt attribute should be always used to provide a text alternative for images.

    • Headings – proper headings should be included to provide a clear and logical structure to your content.

    • Descriptive link text – descriptive link text should be providing context about where the link will take the user.

    • Color contrast – there must be sufficient color contrast between text and background to ensure readability for all users.

    • Spacing – there must be enough space between clickable/tappable targets such as buttons or links on smaller screen sizes so that users do not accidentally interact with the wrong element.

Web Accessibility standards

  • EN 301 549 is a European standard that sets the accessibility requirements for information and communication technology products and services.

  • The first iteration of the standard is developed in 2014.

  • Countries in the European Union are required to comply with EN 301 549 when administrative bodies are offering public ICT services, including for example municipality official websites.

  • The standard is relevant for many industries, including e-commerce, education, government, and healthcare, as it ensures that everyone has equal access to digital services and resources, regardless of their physical or cognitive abilities.

  • Adhering to the standard can also help organizations avoid legal and financial penalties, as many countries have laws and regulations that require digital resources to be accessible.

  • Web Content Accessibility Guidelines (WCAG) are developed by the World Wide Web Consortium.

  • WCAG is a set of guidelines for making web content more accessible to people with disabilities.

  • Americans with Disabilities Act (ADA) is a US law that prohibits discrimination against people with disabilities and requires that all electronic and information technology be accessible to people with disabilities. It covers a broad range of digital content, including websites, mobile applications, and electronic documents.

  • Section 508: It requires federal agencies to make their websites, software and hardware more accessible.

Audit tools for accessibility

  • When it comes to measuring accessibility, different instruments can be used in conjunction.

  • PageSpeed Insights by Google: a free and popular platform for evaluating web pages. With PageSpeed Insights developers and regular users can provide a hyperlink to a page and analyze both Desktop and Mobile versions of the page.

  • Lighthouse: Browsers, based on the Google Chrome engine Chromium, also have built-in functionality called Lighthouse (similar to PageSpeed Insights) that can be used to test several aspects of good web design, including performance, accessibility, best practices, and search engine optimization.

  • WAVE: a free web accessibility evaluation tool developed by WebAIM that provides visual feedback and suggestions on how to improve the accessibility of your website.

  • Axe: a browser extension that can be used to test for accessibility issues in real-time, providing detailed explanations and suggested solutions.

  • aXe Coconut: a cloud-based accessibility testing tool that can scan entire websites and provide detailed reports on accessibility issues.

  • Accessibility Insights: a suite of accessibility tools that can be used to test websites for accessibility issues, including automated tests and manual checks.

  • Tenon: a cloud-based accessibility testing tool that can be used to scan websites for accessibility issues and provide detailed reports and suggested solutions.

  • Tota11y: a free accessibility visualization toolkit that provides easy-to-understand visual feedback and guidance on how to improve the accessibility of your website.

  • Pa11y: an open-source accessibility testing tool