A Net Design Dictionary for Enterprise Homeowners

A Net Design Dictionary for Enterprise Homeowners


Web sites are essential for any kind of enterprise. Whether or not you’re operating an e-commerce retailer, a vogue line, a femtech answer, SaaSor perhaps a manufacturing concern, an internet site helps you construct belief and credibility and attain wider audiences. Even 71 p.c of small companies right this moment have an internet site. That’s why having a well-designed web site is important.

Not all enterprise house owners are conversant in net design and its greatest practices, nevertheless. Thankfully, I’m right here with my net design dictionary so you possibly can be taught a few of the mostly used terminologies.

However earlier than that …

UX Vs. Net Design: What’s the Distinction?

UX design and net design each concentrate on fixing customers’ issues. UX design covers a variety of merchandise, nevertheless — web sites, cellular apps, desktop apps, software program, dashboards, video games, and extra. In the meantime, net design is proscribed to desktop and cellular web site interfaces.

Extra in Design + UX9 Materials Design Tips, In response to Google

What’s the Distinction Between UX and Net Design?

Though these phrases are used interchangeably, I urge to vary. And understanding the distinction can assist you make a greater determination when hiring a design group member.

UX design and net design each concentrate on fixing customers’ issues. UX design covers a variety of merchandise, nevertheless — web sites, cellular apps, desktop apps, software program, dashboards, video games, and extra. In the meantime, net design is proscribed to desktop and cellular web site interfaces.

So, merely put, UX is the broader discipline during which net design belongs. And this text will information you to be taught the glossary so you possibly can talk higher together with your net designers.

The Net Design Dictionary

As a lot as I’d like to actually create the A to Z of UX glossary, I can’t since no terminology beginning with X, Y, and Z exists. So, right here’s the A to W of UX and net design:

The A to (Nearly) Z of UX Net Design

  • A — A/B Testing, Accessibility, Above the Fold
  • B — Breadcrumbs, Under the Fold
  • C — Name to Motion, Playing cards
  • D — Dashboard
  • E — Empathy Map
  • F — Flat Design, Floating Ingredient, Flowchart
  • G — Grid, Gutters
  • H — Heatmap, Hierarchy
  • I — Data Structure
  • J — Journey Map
  • Okay — Kerning
  • L — Touchdown Web page
  • M — Mockup, Modal Window
  • N — Navigation Menu
  • O — Onboarding
  • P — Picker, Prototype, Progress Bar
  • Q — High quality Assurance
  • R — Responsive Design, Readability
  • S — Sidebar, Sitemap
  • T — Toggle, Tooltip
  • U — UX Writing, Usability Testing
  • V — Visible Hierarchy
  • W — Wireframe, Whitespace

P.S. Don’t let the in depth listing scare you away. Deal with this listing like an online design dictionary or guidebook.

A/B Testing, Accessibility, Above the Fold

A/B testing entails experimenting between two design, format, and/or copy choices to see which one performs higher. Accessibility means ensuring everybody can entry your design, no matter customers’ degree of potential. And above the fold is the highest part of the web site format that customers can see earlier than scrolling down the web page.

Breadcrumbs, Under the Fold

Breadcrumbs are a navigation instrument that permit customers to know the place they’re on an internet site — identical to the breadcrumbs Hansel and Gretel used as a path. Breadcrumbs are often positioned on prime of the display screen and look one thing like this: Dashboard > My Account > Settings.

In the meantime, under the fold is what customers see on the display screen after scrolling down.

Name to Motion, Playing cards

You may create a name to motion as a button or a hyperlink that encourages customers to do one thing — add to cart, subscribe, e-book a name, and extra.

Playing cards come in useful once you need to place content material from the identical group facet by facet so customers don’t need to scroll up and right down to see every thing. Subscription plans and product options are often displayed as playing cards.


A dashboard is the place customers can discover all the knowledge and knowledge they want. A buyer dashboard can include their private knowledge, transaction historical past, rewards, referrals, standing, and others. There are different sorts of dashboards too:

4 Forms of Net Dashboards

  • Strategic dashboard: For monitoring and report KPI or DISTRICT progresses.
  • Operational dashboard: For real-time knowledge comparable to these in ticketing software program.
  • Analytical dashboard: For monitoring engagement. Examples embrace Google Analytics or social media insights.
  • Technical dashboard: For offering present and previous knowledge, in addition to forecasts and proposals.

Empathy Map

You should utilize empathy maps to visualise what every target market or person persona would say, assume, really feel, and do in several eventualities. Try this empathy map instance from my e-book Made to Promote: Creating Web sites That Convert.

An empathy map
Picture created by the writer.

With this map, you get the insights you should know to grasp your audiences as they attempt to accomplish a particular objective. Don’t simply assume, although. Work together with your colleagues from the technique, advertising, and even dev groups to analysis or conduct surveys and get dependable knowledge. A/B testing may additionally come in useful right here.

Flat Design, Floating Ingredient, Flowchart

Flat design is kind of widespread within the graphic design world — in net design, it means making a webpage utilizing easy layouts and two-dimensional components. Floating components hover (often) on the underside proper nook of the display screen, even when customers scroll up and down. They’re generally used for dwell chat, assist, or back-to-top buttons.

A flowchart diagram helps you and the opposite group members map out every doable step that customers may take and what eventualities would unfold from it. Right here’s what it appears to be like like:

A userflow map
Picture created by the writer.

Grid, Gutters

You should utilize grids to assist set up your layouts. Grids assist you estimate the place you’ll place texts, pictures, icons, and different components. The areas between every grid are known as guttersthey usually assist you hold your components from crashing into one another.

Heatmap, Hierarchy

A heatmap reveals which space of your web site will get probably the most person interplay. Do they interact together with your essential CTA or are they extra desirous about your hero video as a substitute? This can assist you resolve if you should revamp your format, replace the copy, or change the visuals to drive customers to take the specified motion.

A hierarchy permits you to present the extent of significance of every component. For instance, make your headline larger with a extra hanging shade so customers take note of it first.

Data Structure

Data structure (IA) is the way you set up data on the web site so every thing is simple to grasp, simple to search out, and simple to entry. This is a vital course of once you arrange your web site navigation.

Journey Map

A journey map or person journey map helps you visualize the method that customers undergo from the very starting till they take the specified motion. This course of consists of no matter touchpoints they encounter; their actions, ideas, and feelings; their issues; and their ultimate determination.


A part of typography and design, kerning is the way you alter the spacing between characters so the texts are simple to learn, look neat, and spotlight the primary message.

Touchdown Web page

A touchdown web page is a single web page that customers find yourself on after clicking a hyperlink from e-mail newsletters, adverts, social media, blogs, or different sources — however often not from a search engine end result web page. Every touchdown web page serves one marketing campaign, with one goal and one CTA, obtainable for sure goal audiences solely.

Mockup, Modal Window

A mockup is a high-fidelity illustration of your completed net design. You should utilize it for ultimate approval and presentation to the stakeholders. In the meantime, a modal window is one other time period for a pop-up window.

Navigation Menu

The navigation menu is that menu bar you discover on prime of the display screen, containing your data structure.


Onboarding is the preliminary course of the place you information customers to get used to your web site, telling them the place to search out necessary data and tips on how to take sure actions.

Picker, Prototype, Progress Bar

You should utilize a picker to let customers select a time, date, or shade. A prototype is the mid-fidelity design of your net design with restricted interactive illustration. Prototypes are often introduced to the stakeholders earlier than the ultimate mockup. And a progress bar is the visible illustration of an ongoing course of like a obtain or set up course of.

High quality Assurance

High quality assurance (QA) is likely one of the ultimate steps earlier than an internet site goes dwell. Each designers and builders evaluation and check the location to see if every thing runs with no downside.

Responsive Design, Readability

Responsive design is once you make your web site format look nice and work nicely on various kinds of gadgets with totally different display screen sizes. Readability means how simply customers can learn the texts in your net design.

Sidebar, Sitemap

A sidebar is a collapsible-expandable bar on the facet of the display screen that comprises your web site menu, options, or different components.

Toggle, Tooltip

Toggle is a design component that lets customers activate or flip off a setting or characteristic. Tooltip is that small (i) on a web page that explains what a characteristic does once you hover your cursor over it.

UX Writing, Usability Testing

No, you don’t want to jot down the web site copy by your self. You’re employed with a UX author who comes up with all the web site content material and microcopyUX writing — and also you deliver them to life with the appropriate format and visuals. Actual customers consider your web site in the course of the usability testing course of so you possibly can acquire their suggestions and make enhancements.

Visible Hierarchy

Yep, one other hierarchy. Visible hierarchy permits you to information your customers’ consideration from a very powerful to the least necessary design components, which additionally guides them to take the specified motion.

Wireframe, Whitespace

Creating wireframes is the early step of net design the place you present solely the skeletal layouts of the online pages — no visuals, no textual content, and no colours. The aim is to let the stakeholders focus solely on the proposed layouts. And lastly, whitespace is the empty house in your net design, separating every design component so the interface doesn’t look jumbled in.

Extra in Design + UXWhat Are Consumer Flows?

The best way to Use the A to Z of UX

Phew, that’s fairly an inventory! However, hey, you don’t have to memorize every one among them.

The listing is right here to assist familiarize your self with the scope of labor of net design, recruit the most effective net designers, and work with them extra successfully. It’s also possible to bookmark this web page so you possibly can come again right here in case you possibly can’t keep in mind a time period or two.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *