A to Z Design Terms
Last Updated :
19 Apr, 2024
The A to Z Terms of Web Design covers a wide range of topics that are important for designing visually appealing and attractive designs. It covers concepts like fundamentals of design, User Interface, User Experience, etc making the design process a necessity for any development process. Each letter contains various topics that depict the vast fundamentals and principles used in design.
A to Z Design Terms
A to Z Design Terms
A
|
Description
|
Accessibility |
Designing Interfaces that can be accessed and used by everyone including people with special needs and disabilities. |
Alignment |
Placing elements such as images, texts, videos, etc in a similar ordered manner in an interface. |
Adobe Creative Cloud |
A set of Software and Applications provided by Adobe used for Design and Editing like Photoshop, Illustrator, Premiere Pro, etc. |
Aesthetics |
Aesthetics refers to the visual appeal and aspects of a design, or an interface. |
Analogous Colors |
A color scheme to pick out colors. Colors adjacent to each other are called adjacent colors. |
Aspect Ratio |
The ratio of width to height of a component is called its aspect ratio. |
Animation |
Series of images or frames shown one after another is called Animation. It is used to enhance user experience by making user understand things better. |
B
|
Description
|
Balance |
Arranging and placing visual components in an interface in a harmonical manner. |
Brand Identity |
Designing visual elements of a brand including its theme, logo, banners, etc to give them a unique image in market. |
Breadcrumb Navigation |
It is a navigation method that helps the user to navigate forward or backword through a website. |
Banner |
A design used for advertisements, announcements, and promotions. |
C
|
Description
|
Color Theory |
The theory of understanding and mixing colors to use them together for creating attractive and appealing designs |
Contrast |
Contrast creates a difference between visual elements pressent on a design that is mostly used to highlight certain important elements. |
CSS (Cascading Style Sheets) |
A style sheet language used to give style to the elements present in a HTML document. |
CMYK |
A color model containing Cyan, Magenta, Yellow, Key(Black). Used for printing consistency. |
D
|
Description
|
DPI (Dots Per Inch) |
DPI is a type of resolution that depicts the number of dots present in one inch vertically and horizontally. |
Drop Shadow |
An effect that gives a shadow behind the element which creates depth and give elevation to an element. |
Dynamic Content |
Content that changes itself based on user interactions and other events. |
Design Iteration |
The cyclical process of reviewing, enhancing, and upgrading designs in reaction to input and testing is referred to as layout new release. |
Duotone |
A design or an element made up of two colors. |
E
|
Description
|
Emphasis |
Emphasis is highlighting certain elements in a design to make them capture user’s attention and focus. |
EPS (Encapsulated PostScript) |
A file format for vector graphics that helps in maintaining the quality. |
Exit Intent Popup |
A popup that appears when a user tries to exit an interface asking for user’s confirmation. |
Exposure |
The amount of light on a design that helps in determining its brightness is called Exposure. |
F
|
Description
|
Favicon |
A small icon associated with a website that is present in the address bar. |
Flat Design |
A flat design is a design approach that focuses on minimalism and simiplicity and doesn’t contain heavy elements like shadows and other effects. |
Font |
A specific size and styling of set of letters that is used to represent a text in a design. |
Flexbox |
A CSS layout model that is used to build flexible layouts. |
Footer |
The bottom area of the design interface or media. |
Figma |
A design tool that is used to create user interafaces and can do prototyping, collaboration, etc. |
Fill Tool |
A feature in design tools like figma that is used to color an element in the design. |
G
|
Description
|
Grid System |
A layout system with horizontal and vertical lines that are used to align content in a design. |
Gradient |
A type of effect that blends multiple colors together which is often used in backgrounds. |
GIF (Graphics Interchange Format) |
An file format for images that support animated graphics that is widely used on web interfaces. |
Graphic Design |
Graphic Design is the art of sharing information and ideas in the form of appealing visual content. |
Golden Ratio |
A mathematical ratio used in design to create visually appealing designs. |
Grayscale |
A design containing only shades of gray color to convey neutral tone. |
H
|
Description
|
Hex Code |
A six digit color code in hexadecimal format that represents a specific color. |
HTML (Hypertext Markup Language) |
A markup language that is used to create and structure websites. |
Hamburger Menu |
A design element that contains three horizontal lines which is a hidden navigation menu. |
Hierarchy |
The organization of elements in a way that it depicts their importance is hierarchy. |
Hue |
 Hue is another word for color. All of the primary and secondary colors are hues. |
Header |
The top section of an interface design or media. |
I
|
Description
|
Image Compression |
Reducing the size of images to optimize them for websites without a major decrease in quality. |
Illustrator |
A design software by Adobe that is used to edit vectors, create logos and other design elements. |
Information Architecture |
The organization of the content on the website that helps the user to understand the content better and navigate through the website. |
Icon |
A graphical representation of an object or a button that is used in User Interfaces as a CTA(call to action). |
Interface |
The point of interaction between User and the digital machine or device. |
J
|
Description
|
JPEG (Joint Photographic Experts Group) |
A file format for images that is mostly used because of its lossy compression. |
Justification |
Aligning text in a straight line on both left and right sides. |
Juxtaposition |
Placing elements side by side in a design to highlight their differences or show similarities. |
JavaScript |
A programming language used to create dynamic elements in a Website. |
K
|
Description
|
Kerning |
Adjusting or maintaining the spaces between the characters to improve the readability in a design. |
Keyframe |
An important frame in an animation that is usually the start frame or the ending frame. |
Keyword |
A word or phrase that depicts the main content present on the website which helps with the SEO of that website. |
L
|
Description
|
Landing Pages |
A important standalone page that is used to present a set of content or advertise a certain campaign often containing a CTA(Call To Action). |
Line Height |
The vertical length between two lines in a design that helps in improving the readability of the text. |
Logo |
A symbol that represent a brand and is used everywhere on that brand’s assets. |
Layout |
The arrangement of Visual Elements in a design is called Layout. |
Layers |
Different levels in a digital design file each representing a part of design file. |
Lorem Ipsum |
Placeholder text used in User Interface designs. |
M
|
Description
|
Mockup |
A visual representation of an interface which depicts how the final product will look. |
Mobile-First Design |
A design approach where the Mobile’s UI is more focused than desktop. |
Mood Board |
A collection of images, texts, and colors that is used to represent the mood of the design. |
Masking |
A technique used to hide or show portions of a design using image or shapes. |
Monochrome |
A color model with mulitple shades of the same color. |
Megapixel |
A unit of measuring representing 1 million pixels. |
Motion Graphics |
Animated Visual elements used in design to give it a more appealing look and convey information efficiently. |
Material Design |
Material design is an open-sourced design system built and supported by Google in order to provide a specified and consistent design language for their products and services. |
Master Page |
A layout template used to maintain consistency throughout the design. |
N
|
Description
|
Negative Spaces |
The white spaces or the empty spaces that are used in the design to shift the focus of the user to the main content of the design. |
Navigation |
The linked structure between different pages of a website through which the users go through. |
Neuromorphic Design |
A design approach that focuses on replicating real world elements like shadows and icons. |
Noise |
Various random irregularities in a design are called noise. |
NavBar |
A portion of User Interfaces containg buttons and links that helps the user to move through different pages. |
O
|
Description
|
Opacity |
It is the measure of tranparency of an element in the design. |
Outsource |
Outsourcing is having external individuals or agencies work on something on a contract basis. |
Overlay |
Overlay is placing elements on top of one another with some translucent effects. |
Outline |
The outer border of any design or image is called outline. |
P
|
Description
|
Parallax Scrolling |
A scrolling effect in which the background images moves slower in comparision of the images above which gives off a 3D effect. |
Pixel |
Smallest unit of an image representing a single color block. |
Prototype |
A functioning model of the final product which helps understand how the final project will look and if it requires any changes. |
PNG(Portable Network Graphics) |
A file format used for images for lossless compression. |
Q
|
Description
|
Quality Assurance (QA) |
A process that ensures that the current design meets certain standards and benchmarks. |
Quick Response (QR) Code |
A special code that is used to quickly convey information and web links. |
Quicktime |
A framework by Apple that is used for video playback. |
R
|
Description
|
Responsive Design |
Responsive Design is a website design that is both desktop friendly and mobile friendly i.e. a website design that adjusts itself according to the screen size of the device. |
RGB (Red, Green, Blue) |
A color model that represents how much red, green, and blue color a specific color has. |
Raster Graphics |
These are the images made up of grid of pixels. |
Rule of Thirds |
A guideline that divides an image or a design in 9 equal parts for better placement of elements. |
S
|
Description
|
Sitemap |
Sitemap is the representaiton of a website’s structure. |
SVG (Scalable Vector Graphics) |
It is a file format for vector graphics that is scalable which means its size can be adjusted without any resolution loss. |
Storytelling |
Using visual elements of a design to convey specific information to the viewers. |
Serif Fonts |
The fonts in which small strokes are attached to the ends of a characters are Serif Fonts. |
Sans Serif Fonts |
The fonts that lacks the small strokes at the ends of characters are Sans Serif Fonts. |
Saturation |
The intensity of a color is called the saturation of that color. |
Scalability |
A design is scalable if can be resized without a quality loss. |
Shadow |
An effect that can be applied on the elements to give them a sense of depth. It creates a shadow around the element. |
T
|
Description
|
Typography |
Typography is the art of using text in design to convey information while looking visually appealing. |
Template |
A template is an already made design that is used to start a design project. |
Texture |
A pattern or a feel of a surface that is used to enhance a design project. |
Thumbnail |
A small image used to show the content or the gist of a video. |
Transparency |
The ability of being see-through is called Transparency. The more an element is transparent the more we can see through it |
Tone |
The amount of Gray color added to a natural Hue is Tone. |
U
|
Description
|
UI (User Interface) |
User Interface is the component a user interacts with to communicate with the machine. |
User Flow |
User Flow is the path that user goes through to navigate between different pages of an interface. |
User Persona |
A visual representation of data of a user that is mostly collected through research by a brand to replicate their ideal customer so that they can meet their user needs for their product or service. |
UX(User Experience) |
The experience and the journey that user goes to while interacting with an interface is called User Experience. |
UnderLine |
A horizontal line below the text which helps to emphasize it. |
UCD(User Centered Design) |
A design approach that focuses on solving User needs and requirements. |
V
|
Description
|
Vector Graphics |
Images or Illustrations that are created using mathematical equations and are adjustable in size without any loss in quality. |
Visual Hierarchy |
Visual Hierarchy is showing the visual elements in design in such a way that certain content looks more appealing and highlighted than other content. This is mostly done for important content present in a design. |
Viewport |
The area visible in a browser that is used to display a web page. |
Vibrancy |
The vividness of a color or an element in the design is called Vibrancy. |
W
|
Description
|
Water Mark |
A watermark is an image or a text present with low opacity at the back of a design which helps in identifying the brand. |
Wireframe |
A wireframe is a 2D visual representation of the structure of a website that focuses on allocation of the elements present on the webpage. |
Web Safe Colors |
Web safe colors are the colors that can be viewed the same across different browsers. |
Web Design |
The field and process of desiging websites is called Web Design. |
Web Development |
The process of creating a website from the design is called Web Development. |
Wordmark |
A type of Logo which only contains the name of the Brand or the service. |
Web Accessbility |
Websites that can be used by everyone including people with special needs is called and Accessible Website. The process of designing such a website is called Web Accessibility. |
X
|
Description
|
X-height |
It is the height of the letter ‘x’ which is used to set reference for font size. |
XD (Adobe Experience Design) |
A tool by Adobe that is used to design website interfaces. |
XML (eXtensible Markup Language) |
It is a markup language that gives rules to define data that is both human and machine readable. |
X-axis |
The horizontal axis that represents width of content. |
Y
|
Description
|
YUI (Yahoo User Interface) |
It is a set of libraries and tools for website development developed by Yahoo. |
YouTube Thumbnail |
Youtube Thumbanil is a picture designed to represent what the video is about and attracts the viewers. |
Y-axis |
It is a vertical axis that represents height of content. |
Z
|
Description
|
Zeplin |
It is a tool which is used by designers and developers to convert design into code. |
Zoom |
Zoom is a command that is used to magnify or reduce focus on a certain part of a digital interface. |
Z-index |
It is a CSS property that determines the visibility of an element over other. |
Share your thoughts in the comments
Please Login to comment...