A to Z Design Terms

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	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z

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.