Web design definitions
Accessibility is a big deal in web design nowadays. It means, essentially, how accessible your website is to people, including anyone with hearing or visibility impairment. It’s important to keep this in mind before and as you create your website. Take a look at these six steps to make your web design accessible if you aren’t sure where to start.
Below the fold (and above the fold)
Below the fold and above the fold are two terms that have their origins in newspapers. The “fold” is where the newspaper is folded Above and below describe wether the information appears on the top or lower half of the fold. For web pages, the “fold” is generally defined as the point where you have to start scrolling, but the principle is the same—information that is above the fold (ATF) is more accessible and visible than that below the fold (BTF).
An elastic layout is an approach to designing web pages that describes the relationships between elements and their positions on the page as percentages rather than specifically designed distances and sizes. This means that web pages are more adaptable—both for the preferences set by your visitors in terms of font size and spacing, but also when it comes to optimizing the page for viewing on a smartphone or tablet.
Nowadays, elastic layouts are a key part of responsive design approaches, but before the idea of responsive design was around, elastic layouts provided a simple way to make websites adaptable.
An Ex is a unit of measurement that uses the lowercase “x” in a font as a standard measure.
Fixed width (layout)
A fixed width layout is a method of designing web pages where a designer will specify how large a web page is and exactly where elements will appear in it. This gives designers much more control over the design of a web page than an elastic layout, but makes pages less adaptive to different screen sizes.
Hexadecimal, also known as “hex” numbers, are a base-16 number system, meaning they use 16 symbols to define colours. Hex numbers use numbers from 0 to 9 and letters from A to F. Each color is defined with three pairs of hexadecimal numbers. The first pair of numbers or letters related to red hue, the second pair to green hue and the third pair to blue hue.
Infinite scrolling is when the new content loads as you continue to scroll. This creates an “infinite,” never-ending scroll. Some popular examples of this is Facebook timelines, Pinterest, or Twitter feeds.
This method of scrolling creates a sense of depth in the site design. As the user scrolls, the elements on the website would appear to be at different distances and moving at different speeds as the user scrolls. This creates the illusion of depth and distances on a flat website.
Resolution is the number of pixels displayed on a screen. It is the standard method used in web design to specify the size of images. The quality of an image is usually described in terms of pixels per inch, with higher numbers of pixels resulting in a higher-quality image.
Responsive / mobile-friendly / mobile optimized
As of 2020, more than half of web traffic takes place on smartphones. This means that it’s becoming more important for a website to look its best on mobile, as well as desktop. To make websites responsive / mobile-friendly / mobile optimized means to design and develop a website that will adapt to the device or screen they are being viewed on.
Usability is a concept in web design that describes how usable your site is for the visitors it was designed for. Ideally, a visitor will be able to use your site with ease when they encounter it for the first time, with minimal obstacles, frustrations and need to ask for help. Understanding the principles of usability is a key step in building a great website.
UX (user research) / UI (user interface)
UX and UI design is work that improves the experience for the user. It’s important to know the differences of UX and UI in order to know how they work together.
UX, user research, involves all aspects of the user’s interaction with the website, from start to finish. The goal is to improve the quality of interaction between a user and the website.
UI, user interface, focuses on the visual and interactive elements of a website, such as buttons, icons, typography. The goal is to improve the website’s look and function.