18 Web Design Lingos that you should know

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 the 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

1. Color Scheme

It refers to a belt of harmonizing shades that work together to product an identifiable brand identity. You mostly find it in marketing materials, logos, website or mobile app. Color schemes could range from complementary to monochromatic to analogous to triadic and so on.

2. Contrast

This is a sort of design technique which stresses on differences in between elements carrying different meaning or role. Complementary colors 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.

3. Fixed layout

It’s a type of layout where a website & its elements deploy same width for all resolutions that are defined in the static values like pixels. It was mostly popular for traditional web building process.

4. 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 width of viewport. It is also known as liquid layout.

5. Responsive design

It refers to designing websites in such a way where 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.

6. 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. Adaptive design takes to 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.

7. Flat design

It’s a form of UI design language which stresses on minimalist and clean styles- devoid of complicated patterns, textures, gradients & other form of fancy effects. The motto of flat design is to ensure maximum emphasis on the content.

8. 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 purpose- say a product page linked to an ad banner

9. 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 CTA button.

10. The “Fold”

You have two related terms here- “above the fold” and “below the fold”. The first one implies to that part of the web page which visitors would be able to view without taking an action whilst the second one refers to rest part of the webpage that is only visible by any action like swiping or scrolling.

11. 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.

12. 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 same page with no consideration of white space and proper content structure. Such deformed pages mean low readability & negative user experience.

13. 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.

14. 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 the appearance rather than on the content. Graceful degradation is mostly used today for legacy or older sites.

15. 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 tablet, desktops, mobile screens and breakpoints in between them would be stated by the media queries added to CSS.

16. Lazy Loading

This can be defined as the technique deployed for loading static contents shortly before making them visible for 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 user will scroll through the page. Such a technique is mostly used in mobile and responsive design to save resources.

17. Skeuomorphism

It’s a UI design language which banks on principal of familiarity & stresses on generating design elements which resemble the real-world equivalents. You can take the example of buttons (think of CTA buttons) which are framed bearing similarity to real-life buttons found in clothes and apparels. Various effects like drop shadows, bevel & emboss and gradients go to create such realistic aura.

18. 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 start & end point here. Thus, these are mostly for the 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, 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.

If you liked the information feel free to share it on social network by clicking the buttons below.

Previous Post Next Post

Categories

Recent Posts

Archive

Have a project? Call us at 8001000123 for a Free Consultation and Quotation.