Design Terms for Non-Designers – Experts Zone Talks #20

Welcome back to Experts Zone Talks. Today, we will speak about the words which will be super useful in the design and software development processes. What are breadcrumbs? Wireframe? Our UI/UX designer will explain everything.

Transcription

Olga V

Hi everybody. Today we will speak with UX UI designer Olga about design terms.

Olga K

Hi, thanks for having me today. I'm Olga, I am UI/UX designer at Liki and Frontend House and today I will tell you a little about design terms.

Olga V

The design terms from graphic design vocabulary that you might not know but should know if you take part in the design process and development process.

Olga K

Yes, definitely.

Olga V

Because some terms are not obvious. But today we'll speak about it.

Olga K

Actually very few of them are obvious.

Olga V

Okay, so we'll see. Today we have an episode with 2 Olgas so you don't have too much to remember. So let's start. Firstly, let's imagine a situation when you are in a workshop with your clients. How usually clients don't understand what you are talking about?

Olga K

Usually during the workshops we are trying to use words that are familiar to clients. I think that the words which might not be familiar to them that’s usually names of the exercises that we are doing. For example MoSCow or something like that. These are terms that are widely used in design so that you can identify the specific exercise but clients might not understand them. So this is the first thing that comes to my mind.

Olga V

It's like a design slang nobody understands and design people think that everybody must understand that.

Olga K

I think that word like that is a component actually because this is a word that I use very often. Like I am using it all the time actually. And I kind of presume that everyone understands it. But actually it often turns out that some clients don't and actually some people are kind of ashamed to mention it. For example, components. Actually, a component is a design element that you design. This is an UI element. Like it can be a very small one for example, like an icon or it can be a bigger one, for example an app bar. And bar is a top navigation of the website or any other kind of navigation in the user interface.

Olga V

Okay, so we have already had one word components and navbar. But now let's play a game. I will choose words and ask you what that is. 

Olga K

Okay.

Olga V

And you explain it as a designer.

Olga K

Sure. Okay, so let's get to it.

Olga V

Okay, so I will find some words for you. I have prepared a lot. I think we will have two episodes of this because I have a lot of words for you. Okay, so my first word - letter A - is asset. What is an asset? It’s widely used in a design world.

Olga K

An asset is actually a graphical resource that is used, for example in web design. You need to fill your website with assets. So we have to prepare assets for a designer to use in your website. For example, photos that you want to use on your website are assets or illustrations of any kind that you are willing to use are also assets. Actually any kind of graphical material can be called an asset and sound, music and non graphical elements. Yeah, every kind of content you will find on your website but not text.

Olga V

So text is not an asset, you see. Okay, my second word is Figma.

Olga K

That is not technically a term or a word. It's the name of the software that we all use and it's Figma. 

Olga K

Figma is basically a software that designers worldwide use for design. Basically.

Olga V

Wow, designers use it for design?

Olga K

Yes, but this is a specific software that is widely used for user experience and user interface design because this is actually a vector graphic editor and the vector graphic is basically do you know what it is? Okay, so you might not know what vector graphics are. So vector graphics are basically the graphics that are built mathematically based on pictures. So you can scale it indefinitely without using its quality. But when you have raster graphics that are based on pixels, you cannot free scale basically. So that's the basic difference between these kinds of graphics. So Figma is basically a vector graphics editor and is widely used in user experience and user interface design because of its collaboration features. So due to this wide range of collaboration is it very convenient to work..

Olga V

Yes, it's very pleasant to use.

Olga K

Yes, it has a very pleasant interface and it's also very simple to use. Yeah, very pleasant.

Olga V

The next word is button. You may think it is obvious, but it's not always obvious so let's talk about it.

Olga K

Okay, so it might not be obvious, maybe it is for English speakers but when you speak in other languages this word could actually raise questions. A button basically is an element of our connection that enables interaction. Basically when you click on a button you tell the program to do something, for example to save a file or something like that. So that is basically a button.

Olga V

Do you usually have buttons which don't look like a button? Like a big red button you have to push?

Olga K

Okay, so this is actually quite a complex question because there are different kinds of bottles. So basically you have three primary buttons, secondary buttons and tertiary bottles. Basically all of them look differently. For example, the primary button is the third one, the one that has a background basically yes, the secondary one is the button with stroke only the tertiary button is without feeling at all. But there are also other interactive elements of course. For example, you can have a button that looks like an icon, for example the close button or the save icon for example in programs this is also a button even though it doesn't look like a pickle button.

Olga V

Yeah, it was interesting info about buttons, but let's go.

Olga K

Oh yeah, we could do the whole episode just about passive SSS 

Olga V

3 hours later. 

Olga K

Yeah. So what's the next one?

Olga V

The next one is UX. Like User Experience.

Olga K

Okay. You keep asking difficult questions, actually.

Olga V

Sure.

Olga K

Let's keep it simple. Okay, so user experience is basically a term that refers to designing user experiences, which means that we are basically designing how something will be used. It's based on the user's needs. Firstly, we do the research because we need to know our user. We need to know what his motivations are, what his needs are, what basically the user wants to achieve but also what the client wants to achieve. So based on that, we create a user experience.

Olga V

It's what the user can see and experience during the use. 

Olga K

Exactly. It's like first he opens an application, then he says start screen. But it is a user journey, isn't it?

Olga V

Yes. Basically what you just mentioned is the term used in the process of designing the user experience. And there are a lot of terms like that. Basically we need to take all that data that we gather and we have to organize it. We have to organize it, for example, into user journeys. So we understand our user better. And based on that, we can design a good user experience. But there are also terms like customer experience and others. 

So this is a very broad term, but it refers to designing the way humans interact with technology.

Olga V

Just humans?

Olga K

Yes.

Olga V

Okay, I just wanted to ask if there are apps for dogs or something, but okay, it doesn't matter.

Olga K

You must admit that it would be kind of difficult to interview a dog.

Olga V

Yeah, but it's like dogs choose one type of food and enough that they don't for example. And there are applications for cats when he just has to catch the fish…

Olga K

You probably could do that, I think, but it would be more game design. Okay. And there is a game design also which also uses some parts of user experience, but it's a different process. Okay, let's go ahead. We need another episode. 

Olga V

About apps for cats.

Olga K

Yeah. But also lately I've seen a video in which a monkey scrolls some kind of feed like Instagram, for example. I don't know what it was, but it was scrolling it and tapping on things and it looked so human, actually.

Olga V

Or maybe while scrolling the instagram feed we look like monkeys.

Olga K

I know. Okay, so what's the next one?

Olga V

The next word is accessibility.

Olga K

Okay. We keep using very broad terms. Okay. Accessibility actually is a term that refers to design meeting some kind of accessibility standards. You design for users and it should be accessible. Design should be designed not only for people who are average, but you have to understand that you are designing for very different users, a very broad range of users and you have to take other needs into account. So basically for design to be accessible, it has to pass these standards. For example, you have to provide a proper contrast ratio in your design for it to be easy to understand for everyone, basically for it to be clear for everyone to read.

Olga V

So your application or website has to be adjusted to the needs of every user.

Olga K

Yes. And also you have to think about things like font size. It can't be too small because the smaller it is, the harder it will be for the bigger group of people. There's two rates so we have to think about that. What is the next one? I hope this one will be simpler for the sake of ours.

Olga V

Okay, I'll try but I can promise that. Promise nothing. So what is MVP? 

Olga K

Okay, this one is also not a very simple one, but I think this one is actually a very important term if you want to cooperate with software houses. MVP stands for Minimum Viable Product. It is basically a version of the product that is fully functional, but it's a basic version. This is the version that we can already enter the market. You can test it on the market, get feedback and then develop it further. Basically, developing software is usually kind of expensive, as you probably know, but you can actually save money by developing your product and graduating. So MVP is basically the first version of your product and we basically make sure that it's fully functional. That is, we make sure that it meets basic needs of the users. That is basically for example, a bicycle and then you can develop it into a car but it stays functional all the way. So that's an MVP. Do you have any questions regarding it?

Olga V

I could have some. By the way, we have a video on our channel about MVP. I will add links here and you can watch it also. So I will not have questions about MVP because we have a video about it.

Okay, the next word is prototype.

Olga K

Prototype is basically a version of the design that is interactive. We make it for our clients and our users to be able to go through the user experience. And that way we can also test it because the software is being tested before it gets released to the market. And in order to test the software without actually implementing it, you have to prepare a prototype that is interactive.You can call it an animated design, but that is kind of interactive. So it is clickable. It's clickable, you can go through some kind of user flow. Okay. I have to explain what user flow is. User flow is basically…

Olga V

It's flow.

Olga K

It's user and flow. It is a path for the user to go. For example the user experience for registering on the website or in application.

Olga V

Okay so first you see the screen of you have to register then you click register then you see all forms and this is the user.

Olga K

Basically when we design human forms we think of actions that have to be taken step by step. What’s the next one?

Olga V

Who is the end user?

Olga K

End user is the person for whom you design so it's basically the end receiver of your design. So this is basically your target audience.

Olga V

Next one is a brand book. What is a brand book?

Olga K

Brand book is basically a book where all the rules for brand identity are described so other designers can follow it.

Olga V

So it is logo use cases there, background, everything what has information on how to use logo, what your brand is.

Olga K

Brand book is much more than just logo and logo usage, because some complex brand books actually contain your brand strategy and visual appearance. It describes the rules of communication, it basically tells you what kind of how to build a communication for your company stuff, but it also describes how the logo should be used and how it should NOT be used. It describes how your brand should behave in different use cases so that's basically what a brand book is.

Olga V

Breadcrumbs.

Olga K

This one can be difficult for everyone. Breadcrumbs is actually kind of this is actually a component that is a breadcrumbs navigation. So basically for example when you are on a website and this is a complex one. For example Amazon: sometimes it can be hard to navigate through such a big website that has a lot of subpoenas so breadcrumbs is basically a kind of navigation that allows you to understand where you are on the website. So do you know what it looks like? It shows actual texture with tagged image file format for raster images to logo design, other graphic elements, using lowercase letters, horizontal space. It looks like it indicates the paths that you follow to get to that specific place on the website.

Olga V

For example you are buying something and it's like the main page, then it's items for home, then it is, for example, bathroom.

Olga K

And then it's exactly something. Exactly something like that. Yeah. It basically describes the relationships between parent pages and current pages because there are parent pages and toilet papers to them.

Olga V

But it is a strange name, right?

Olga K

Breadcrumbs. Yeah, not obvious, you know, because the breadcrumbs can lead you to something. I think that's how this term works. And also you have access to me. Breadcrumbs is similar to paths in folders, for example, the folder has to give you information about where it is stored on your computer. So it has a path. So that's how breadcrumbs work.

Olga V

Okay, let me see what I have more. And it is backlog.

Olga K

Okay. A backlog is a list of tasks required for the larger strategic plan. So it is like all tasks which have to be done during the development process, design process or basically any process.

Olga V

Okay, that was easy. That was fast. So we still have time for a couple more words. The next one on my list is SVG.

Olga K

Okay, so an SVG is a file format. This is a vector graphic format, it is widely used on websites because SVG is good for optimization. It's not as heavy as, for example, PNG or something like that. So if you can use the SVG formats for your graphics. For example, all the icons are in the SVG format. Photos usually are not because it's too complex and it's not vector. But if you can make something SVG, it's good to do it.

Olga V

Okay, one more word and we will finish because we are out of time.

Olga K

Okay.

Olga V

And it is a wireframe. What is a wireframe?

Okay, wireframe is basically a version of the design that is not yet high fidelity. Basically it's not a ready user interface, it's a simplified one because it's faster to prepare. So basically you first prepare designs in Wireframes so that you can prototype them, test them and so on. And it's easy because it's faster. You can go through the acceptance process before you actually jump to high fidelity design. So that's what we missed. It's basically a very simplified user interface design.

Olga V

Unfortunately, we have to finish now. You can always visit our website frontendhoused.com and do it. It's nice. And you can always click the Free consultation button and we will talk about your project and find the best solution for your product.

Olga K

Don't forget to check out our portfolio on Behance. Please visit it.

Olga V

Yeah, Olga works a lot on Behance profile, so please.Thank you very much. We will for sure make a second part of this episode. See you soon. Bye.