"That Design Thingie" Alphabet

Remember those board toddler books we had to learn the alphabet, colors, numbers and animals from? Everyone reading this page is past that. But we still get to learn new words.

As a design studio, we've been in many meetings, chats, and email threads where a design team would use a concept specific for a design niche that wasn't clear to the client team. Even though it wasn't technical jargon, it certainly didn't add clarity.

So for all business managers and marketers who do not spend a lot of time researching the design glossary, we've handpicked a design alphabet.

(pssst – there's a clickable table of contents on your right so you can easily switch between the words you are actually curious about).

Accessibility on the web is a set of best practices that make web pages readable and usable for everyone – primarily, people with sight impairment, daltonism, or total blindness. Yes, making those practices work takes extra effort, but it also makes your website (and the product on it) open for everyone.

So when your design team recommends changing the colors a bit to make sure they are clear for color-blind visitors or recommend organizing assets in a certain way, they work towards presenting your brand as inclusive. (Also, in case you are curious how your current website performs in the color-blind specter you can test it at this link)

"What-goes-on-behind-the-surface", or the part of the website or app which is not accessible by the visitor. The back end layer stores content displayed on the page (see Front end), integrates with the other apps like maps, forms, payment transactions, etc.

Essentially it is an engine in a car – you don't see it under the hood, but you are surely not getting anywhere without it.

CMS is a sort of high-convenience preconfigured backend, which doesn't require much technical knowledge to maintain (comparing to a raw codebase). They come in all kinds and colors, and boy, have we got a whole article on CMS for you.

That's a block that customers usually see at the beginning of the project plan. Discovery phase research is handled by a Business Analytic on the design team and builds a deep understanding of customer's business challenges and ambitions. Which in turn helps the creative team to make better, business-focused, and user-centered design decisions. And surprise-surprise – we cover it in-depth in yet another article on our blog.

The email marketing platform is not really a part of the design, but if your brand is focused on building a customer newsletter, endorses sales requests over email, or shares pro-tips and discounts on a regular basis, you're ought to request email client to be included in the project.

The design team will position the subscription form on the page in a section where it will be logical and convenient for the user, and a developer will integrate your website back end with the email client platform of your choice.

The front end is what you see on the screen right now – texts, images, interactive elements, or animations. It defines the interface for the user (see Layout), and well-crafted front end adjusts to different screen sizes, rearranging some elements for the mobile and tablet view, enhancing the view area for large displays (see Responsive).

When the designer community gathers together they eat a lot of aged cheese and criticize messy vertical rhythms.

Just kidding. But there is a seed of truth to that.

Vertical rhythm in layman's terms is how the content blocks are aligned going from the top to the bottom. They are not always following a straight, consecutive line, it depends on the content type. But if the similar content sections form a jagged, irregular vertical, it is much harder to read.

To solve that problem and focus the reader on what the company wants them to see and read, we use a grid. It is like a foundation for the building, that defines the form of the future creation (seems like your author is into estate metaphors lately). A grid divides a page into abstract blocks which are reusable across pages, making a consistent layout. Using a logical grid boosts the creation of a mobile version about x5. Using a grid is great.

When dragging a mouse over a text, image or button makes them change visually – that's what we call the hover effect. It can be changing color, making font bolder or more subtle, zooming in, skewing, or rotating – any transformation or animation that can be done to an element can be programmed as a hover effect.

Keep in mind though, it is not applicable for mobile design, for obvious reasons – there's no mouse involved.

Of course you know what an icon is, a small abstract image representing an item, or direction, or a virtual concept. This entry is not an explanation, it is a message.

There are 4 000 000+ icons from thousands of icon sets at a Flaticon website alone, and Google alone knows how many other icon resources are there (but definitely more in orders of magnitude).

They come in a variety of styles: rounded and sharp, thick and thin, colored and monochrome. When the design team comes up with icons in the project concept they take care to use consistent icons of the same style, the ones that represent the content on the page and look clear and informative to the user. They also know how to steer clear of the copyright infringement on the icons publicly available, but not licensed for commercial use.

So what's the message? I've had a few experiences when a customer wanted to contribute to the website's look'n'feel by selecting "other" icons, usually random. And I want to ask you here to trust your designer and let them do their job. You should, by all means, ask for icon replacement if the current one doesn't convey your idea to the target audience, and it is clear from the previous paragraph that there are enough custom icons to find a perfect match. But the icons are used to support the user and provide clarity, and consistency is key to that.

Adventure map? Treasure map? User experience map!
Think of the last time you've visited a website and went through several pages (maybe even this one). Did it feel like walking a paved street with neatly organized blocks and clear signs? Was it comparable to clicking through a jungle with a machete?

For every app or website project we create a journey map based on user persona research, website structure and visitor analytics. Logical and thorough journey map allows you, as a company representative, step into your user's shoes and see how they interact with your brand digitally.

The weak places on that map (pages which make people leave most often or forms that get way too little transactions finished) are the points for improvement, they are emergency that requires user experience designer's effort. The strong parts that deliver conversions and/or sales are considered as well – to keep the existing patterns in the new design and enhance them without ruining it.

The space between the letters has a name, apparently! Maybe it is not very likely to come up on project planning meetings, but in the rebranding cases, picking fonts and their pairings (a combination of decorative headline font and a regular text one) is essential.

So here's a fancy word for referring to your favorite font examples: "Our CEO loves that cryptocurrency website font, but the kerning around W and M seems a bit narrow", or "We want to come off minimalist, maybe you could experiment with a wide kerning uppercase font, if possible".

The web design layout is the arrangement of all page elements – text blocks, headers, images. It is essentially putting all content within a one-dimension plane, restricted by the screen width (see Responsive). In the layout phase of project, designers propose layout concepts before they become live pages, so that they can adjust the content blocks easier based on the customer feedback.

Eye-catching, emotionally appealing, delightful, and visually engaging... if you look up "how motion graphics increase sales", there's a whole choir chanting that motion design takes the digital brand presence to a whole new, memorable level.

Motion graphics is essentially any kind of animation, a pre-produced GIF, or programmed object transitions. With some amount of work, they can be interactive, responding to mouse movements or scrolling. Want it in your project already?

If there is more than one screen to show, if there is any user functionality offered, if there is a specific button for requesting or buying or following – they are all organized in a navigation menu.

It takes the forms of the huge header bar on the top of the screen, a three-line hamburger menu that appears and disappears on click, and a bunch of other ways. On this page, you can see a navigation bar on the top which takes you from one page to another, and inside-article navigation for switching between each section, as this text is kinda lengthy).

Onboarding, or welcoming a new user to your app (less often a website) is a way to show them around and explain what benefit they get with using it. Because you want them to use it a lot, right?

It is not necessary for every app, but if you have decided that a guided introduction is in your audience's best interests, you want it to be thought-out. Make it one welcoming page, and it is not sufficient, even useless; make it too long, and it becomes irritating. So we'd suggest listing just a few critical features or settings that are valuable for each user of your app regardless of their user persona, and highlighting them one per screen, ideally 3-5, before they start using the functionality. Oh, and don't forget the skip button for know-it-alls!

This mesmerizing motion effect, which adds depth and vividness to a web page, came to the design arena from the platformer videogames and 2D cartoons. The parallax effect is achieved by a background image that upon scrolling moves slower than the foreground elements, creating a 3D impression. It resembles how optics work when we look at a landscape: moving objects that are closer to us appear to move faster, the ones that are further are subjectively slower.

Parallax trend has been used in websites for several years now and is not so hot anymore, but in certain use cases, it adds to visual storytelling and user engagement.

a.k.a. testing the website/app functionality, loading speed, checking for broken links and bugs. Especially important for custom, "from scratch" solutions.

While the whole design team is working on creative concepts, business goals or code delivery, the QA is standing on guard for the customer to make sure that the final product will look flawless on any browser and perform intact in practically any use case.

Meaning, responsive to a screen size change. A fully responsive web design is not likely to look the same on all kinds of screens – after all, different desktop, tablet, and mobile devices differ not only in resolution but in height-width ratio and orientation. A good, responsive layout will be shifting to adjust, but it doesn't just happen magically.

Animation by Shannon McNamara

Working on design responsiveness is making sure that whole content and functionality are available and logically organized, regardless of the gadget used to view it. It is a tricky and not so obvious part of the job, but definitely worth the investment, because no fancy branding can be sufficient if its elements "fall off" the screen or scatter between giant blank spaces.

A textbook definition would sound like "a collection of brand standards, including tone, visuals, term usage and more". A watercooler description would be "a playbook that tries to summarize the company image to help designers to build appropriate style and sales/marketers to present their products in a consistent, professional way".

Maybe yours doesn't have to be as detailed as Auth0 Guideline (which has already become viral in less than a week), but you can take a few useful hints from it:

• Put together branding assets – logo variations, fonts and accent colors
• Show "do's" and "dont's"
• Explain why these guidelines matter to the brand

Templates for the websites are a fast way to put the brand content online without investing much time into building a responsive layout. There is a huge selection of template themes for different website builders available, both free and paid.

Templates also have a downside – despite the variety, they mostly come in a general, "safe" style with limited layout options. If you are aiming for a unique digital experience and "wow" effect, using a template is off the table.

Those letters stand for User Experience and User Interface, used together so often that many people confuse one with another. Both are areas of design development, and the best way to display the difference between these two is to give an example of questions they provoke.

• UX – focuses on how the user interacts with a digital medium, overlaps with marketing a lot:
  "How difficult it is to understand what this business is offering?"
  "What is the most noticeable action on this screen?"
  "How many clicks does it take to get from the product description to actual purchase?"
  "Are there distracting elements, that prevent user from completing the action that would count as a conversion?"
• UI – targets the elements on a page, prepares the ground for designing a layout:
  "How this call-to-action button can be highlighted without breaking predefined style system?"
  "Does this layout follow a clear hierarchy? Can you tell most important info on this page from secondary?"
  "Does this icon convey a clear message?"
  "How can we show interface feedback on completed action?"

Have you seen a blurry, pixelated image, thinking "why can't they use a better quality picture?"

There's a 99% probability that what you saw was an image in a raster format, consisting of colored pixels, which get larger and larger upon zooming in, up until the point when it is just a squarish mess. Raster format is used in .png, .jpg, .jpeg, .gif.

Vector is another image format, built with points, lines, and curves. Their placement is defined by mathematical proportions, which makes them scale-proof: no matter how much you zoom-in, all the lines and colors will stay consistent, because they are computed. File types like .svg, .ai, .eps are vector files. To create them you certainly need professional software and some skills using it, and recreating complex visuals like ultra-detailed landscape is probably not worth the effort, but for logos and illustrations which are intended to be resized at different resolutions or printed, vector is a way to go.

A lot of entries on this page mention websites and apps, referring to the online page(s) hosted at a certain domain and mobile applications, respectively. There is also a term "web app", quite common around engineers, and confusing for people outside of tech. What's the difference, is it a website, an app, or something else entirely?

In very simple words, you can access websites and web apps with a browser, while an app requires installation. The difference between websites and web apps is more subtle:

• website is displaying content that cannot be edited by a reader – you are reading a website right now, for example;
• web app allows users to create and manipulate data. Gmail, Twitter, e-commerce platforms are just a few use cases.

XD is not a laughing emoji, that is the actual name of the app for creating and presenting UI. You might see a project in Adobe XD during the design phase, when the designer shares a link to the prototype or design concept, and later on, when working on the final version of the mockup.

While InVision, Figma, and a bunch of other apps are catching up in popularity, there are still plenty of reasons why the designers work with Adobe XD: for instance, seamless integration with other Adobe graphic apps. If you are into UI design software, here's a short field report on our experience with a couple of them.

Funnily, "Y" letter doesn't really fit into the design ABC. But that letter reminded us of Generation Y, a label for people born between 1980 and 1996. Not huge fans of age-based tagging, but let's face it, that is the first generation that grew up interacting with the digital medium. As users, they pretty much defined the internet patterns. Also, they are reported to make the most average monthly purchases online.

This is why your audience is likely to contain a significant portion of Generation Y – something to take into account when building a digital brand face.
We know we certainly do.

A digital space that a lot of us have inhabited for both work and personal communications while living through the new normal. You could even use Zoom to chat with us – drop us a word if you are interested in discussing a design project, and we'll see you there!