Every industry carries its own set of insider terms or lingos and the same goes with the web designing scene. However, for the newbies in the designing sector, these lingos are completely alien, leaving them kind of clueless about communication. Whether you are an aspiring designer or a client looking to have your website designed for the first time- there are 18 web design terms you should know to fathom the workings of the industry.
Related article: The principles of good web design
Colour Scheme
It refers to a belt of harmonizing shades that work together to produce an identifiable brand identity. You mostly find it in marketing materials, logos, websites or mobile apps. Colour schemes could range from complementary to monochromatic to analogous to triadic and so on.
Contrast
This is a sort of design technique which stresses differences between elements carrying different meanings or roles. Complementary colours are mostly used to define contrast- yet visual differences in style, shape, typography or page element layout could bring in that same effect as well.
Fixed layout
It’s a type of layout where a website & its elements deploy the same width for all resolutions that are defined in static values like pixels. It was most popular for the traditional web-building process.
Fluid layout
It’s a form of layout that zeroes on relative units for defining website elements and width. The most usual relative units here are rems, ems and of course percentages. Such layouts resize according to the width of the viewport. It is also known as the liquid layout.
Responsive design
It refers to designing websites in such a way that the whole design will fit according to the screen dimension of various browsing devices. This way, you no longer have to worry about the typical shrunk pages on small screened mobile and tablets -and you will have a seamless view of the webpage, irrespective of the dimension of the browsing device used to open the website. Such designs take to different techniques like flexible grids, relative units, media queries etc.
Adaptive design
Unlike responsive layout which zeroes in on a single layout that always alters as per the screen size- the adaptive one follows multiple distinct layouts needed for multiple screen dimensions. The adaptive design takes to a static layout based on the breakpoints that do not respond when they are initially loaded. The adaptive quotient aims to detect screen size & load the most suitable layout for that particular screen dimension.
Flat design
It’s a form of a UI design language which stresses minimalist and clean styles- devoid of complicated patterns, textures, gradients & other forms of fancy effects. The motto of flat design is to ensure maximum emphasis on the content.
Landing page
It means a page where the visitor lands as he enters the site. However, in recent times, the term is mostly used to refer to standalone pages meant for particular business purposes- say a product page linked to an ad banner
Hero image
It points to the oversized image banners which are positioned above the fold on a website. These are generally high-quality image banners with full-width images, pertinent to the site content. The banners here are generally topped with little text and a CTA button.
The "Fold"
You have two related terms here- “above the fold” and “below the fold”. The first one implies that part of the web page that visitors would be able to view without taking an action whilst the second one refers to the rest part of the webpage that is only visible by any action like swiping or scrolling.
Breadcrumbs
Breadcrumbs can be defined as some sort of navigation type which informs the users regarding their present location on the website. It refers to the path to be followed to reach the present page right from the homepage and every element of that path is clickable.
Clutter
In the web design lingo, “clutter” spells danger as it indicates a poorly designed webpage. The designers say “clutter” when one has cramped too much data on the same page with no consideration of white space and proper content structure. Such deformed pages mean low readability & negative user experience.
Empty State
As the name suggests, Empty Space means a particular state of an application or website where you have no content on a certain page- but your design elements are all laid out in proper place. These spaces call for special design techniques like onboarding design to educate users on what should be on that page.
Graceful degradation
It refers to a certain web designing strategy which counts in all the advanced features by default on a website and then later simplifies or removes things which do not work with older browsers or at weaker bandwidths or less compatible devices. It emphasizes more on appearance rather than content. Graceful degradation is mostly used today for legacy or older sites.
Media query
It can be termed as a CSS feature which helps with responsive website design by allowing the designers to generate different designs for various device dimensions, orientations as well as media types. Generally, responsive websites come up with separate layouts for tablets, desktops, and mobile screens and breakpoints in between them would be stated by the media queries added to CSS.
Lazy Loading
This can be defined as the technique deployed for loading static contents shortly before making them visible to the users. When a site takes to lazy loading, just the images to be placed above the fold would be loaded first & the rest would be loaded when the user will scroll through the page. Such a technique is mostly used in mobile and responsive design to save resources.
Skeuomorphism
It’s a UI design language which banks on the principle of familiarity & stresses generating design elements which resemble real-world equivalents. You can take the example of buttons (think of CTA buttons) which are framed bearing similarities to real-life buttons found in clothes and apparel. Various effects like drop shadows, bevel & emboss and gradients go to create such a realistic aura.
Transition
It’s a type of website designing technique which helps to visualize simple changes as an on-screen element conveniently altering in between the beginning & end state. Unlike animations, transitions don’t carry in-between states and you only have a start & end points here. Thus, these are mostly for subtle changes like visualizing the hover states.
So, next time you march to talk to a web designer, surprise them with your knowledge of their typical lingo.
Hexadesigns is a web design company located in Kolkata, India. We design, redesign and develop websites. Build custom software, eCommerce, and mobile apps and do digital marketing. This is our blog where we publish information for the general people and web developers for their knowledge enhancement.
Next PostPrevious Post
