Glossary
This is a small dictionary of UX/UI elements on a web page. Learn what are the names of functionalities. Feel free to browse around or use the search field to refine your results.
Above the Fold
This is a UX technique where you use the initial viewport to display the most crucial information about the site. Usually includes the menu, the main H1 and a Call to Action (CTA) button
Accordion
This is a component that can toggle (show / hide) a part of its content. Often used in forms that have many steps, or on a FAQ component.
Banner Blindness
Banner blindness is a phenomenon in which website visitors ignore or overlook banner-like advertisements or other design elements that are perceived as ads. Users have learned to filter them out as irrelevant noise.
Call to Action
A CTA is a button that you want your users to press. A call to action, enticing the user to click the button. Examples include: "Add to Cart", "Write a review", "Contact us"
Component
A component is a functional part of a website. Components can be really small for example a single button, or a component can be something like a search bar with a button. Making reusuable components and treating them like LEGO bricks, where you can mix and match components to make new components is the best. Reinventing the wheel when something can be built from existing components usually ends in extra tech debt that you don't need
Developer Experience
Similar to User Experience. It's about making a developers life easier. This includes various automations, documentation, ease of use of tooling. By prioritising DX, development teams can create a productive and collaborative work environment that fosters innovation and produces high-quality code.
Menu icons
Menu icons have a couple forms. The most popular being the hamburger menu used in most cases. A Kebab menu is usually a context menu, and a chocolate box menu usually opens a grid of options
Modal
A modal is a dialog window that popups up and covers the entire viewport. Its used to fully grab the attention of a user and makes the content under the popup not interact-able. Best used for login modals. User hate promotional popups or adverts in modals, which can lead to banner blindness.
Tooltip
A tooltip shows additional information when a user hovers over a trigger. Usually a trigger is an info icon or text. This component hovers over an element.
Vertical Rhythm
Vertical (and horizontal) Rhythm is about maintaining the same multiples of 4px in all spacing, margins, sizes.
Read the full article here
Viewport
This is the visible window that the user sees before scrolling. This is the entirety of the real estate that you can use for your design. It's recommended to place some key information above the fold