Each profession has its own unique vocabulary of words used to describe people, objects, and process. Developers throw around terms such as terminal, code and repository like they are everyday words. However, if you are not a member of that profession, it might sound like gibberish to you. Working with an app designer is no different, they have their own set of commonly used words that most people may not be familiar with. So, before working with an app designer, here are 10 design terms that you should know.
User Experience Design (also commonly referred to as UX Design) is the process of designing screens focusing on the interactions between the user and the product. Its main purpose is to determine the structure of the app for ease of use, intuitive interactions, and accessibility for the user. During this phase, designers will often use wireframing, a common technique to lay out content functionally on the page that takes into account the user’s needs. These screens are considered “low fidelity design,” often in greyscale, using a rectangle with an “x” in it for where images will go, and boxes with text for buttons. It will not look visually appealing yet, but this step is crucial as it serves as a blueprint for the app, determining all of the screens needed.
User Interface Design (also commonly referred to as UI Design) is where the visuals come into the process. Once the app has its UX structure, the elements are ready to be enhanced with brand colors, fonts, images, and other design elements. UI Design also serves as a way to enhance the UX Design of a screen, using colors to guide a user’s eye through the page, making the interactive elements apparent that they can be clicked on, and easily guide the user through the app. During this phase, the wireframes created in the UX Design process are transformed into mockups, screens that include the structural functionality but also detail the visual design of the app, using the brand colors and typography. These screens are considered “high fidelity design,” as they are used by developers when they code the final product, therefore representing the final look and feel of the app.
A persona is a fictional representation of your target user of the application. These are created based on research and data collected during the discovery phase. Personas represent your user’s needs, wants, likes, dislikes, experiences, behaviors, and aspirations. While they are not actual people, they help identify the user you are designing for and help the designer think in the mindset of the end user, which influences the UX and UI Design. If designers have questions about how to best design the app, a persona can help them get into character and think like the target user. Using personas helps the designer empathize with their target user throughout the entire design process. There are often multiple personas created during the process to create a picture of the varied demographic/s the app is targeting. For example, if you are creating a ride-sharing app like Uber, you have two main personas, the driver and the passenger. You can then create different personas of types of drivers and types of passengers to make sure your thought process is wide enough to accommodate everyone who will use the app. Whenever questions arise during the process, return to your persona and think “What would they do?”
A user flow defines the path taken by a typical user to complete a certain task. It starts with every entry point the user could interact with and defines every step towards the desired outcome and final action. User flows help determine screens needed for the UX Design process. This is the first step in figuring out how the app will function, all of the features that need to be included, and exposes any missing functionality. This also helps a developer define the scope of work and understand the functionality needed in the app. Personas are used in this process to help think in the mindset of the target user, how they interact with an app might be different than how the designer would interact with it. Additionally, if you have multiple personas, you might discover the need for a multi-user application, an application that adapts to the needs of each user and how they intend to use the application.
A UI Kit is a collection of files and resources that create standards for the User Interface Design of an application. It typically includes any components that provide functionality to a user, such as buttons, widgets, forms, navigation elements, fonts, and colors. This kit is created after determining the User Interface Design of an app. Creating a UI Kit helps standardize how the app should look and feel and simplifies the process of turning the low-fidelity screens created in the User Experience process to high-fidelity screens. A common method of creating a UI Kit is through Sketch, a standardized software used for app design. UI Kits also aid in the development process, as it helps developers save time by creating components they can code once and reuse throughout the app.
A clickable prototype is an interactive prototype (composed of static screens) that behaves like a real app. These screens are created throughout the design process in both low and high-fidelity to test that the user flows created are navigable and that the app is easy to use. While there is no code behind these, buttons can appear to be clickable, pages can be swiped through, and pop-ups can appear. Clickable prototypes are invaluable to user testing and getting real user feedback as they are interacting with how the app will actually function once coded. They are also great for presenting to investors to get funding, as it shows the full vision and the value it will provide. Clickable prototypes are often created in Invision, an online tool that connects with Sketch that allows you to highlight areas on a page, create an interaction, and link it to another page. As screens are updated in Sketch, the Invision can be updated with a click of a button and any new changes or screens will be added.
An edge case is a problem or situation that only occurs in a rare or extreme circumstance that is normally unexpected. In design, people rarely use the app the way you expect, so while it’s important to plan for the ideal situation, it’s also important to plan for “fringe” situations. If a user comes across a scenario that hasn’t been planned for, their experience can quickly be ruined. Often times, edge cases are discovered during the User Experience phase when asking “What if the user does this?” While some edge cases might not be apparent until you put the app in the user’s hands, you can plan what the screen can look like if an error ever occurs. 404 pages are a prime example of this scenario: a user searches for something on your website that doesn’t exist so a premade error page appears. However, you can control the experience of the error by designing the page, you could make it funny, add some branding, and make it feel less like an error and more like an experience.
A branding styleguide is the visual dictionary of your company’s branding that sets the standards for how any marketing piece associated with your company should look. It includes the logos, colors, fonts, and tone of the companies brand and how it translates across various visuals such as business cards or brochures. It is important to keep your brand consistent across every media, so when designing an app, it is critical to share these branding guidelines with the designer so they can style the app in a way that is compatible with the brand. If you do not have a branding styleguide when starting an app, the designer can help create one for you before starting the app design process. You need to have the tone and feel of what you want your brand to be so the designer knows how to best design the experience of your app.
Visual hierarchy is a method of organizing design elements in order of importance that influences how a user will interact will the page. The most important element on the page should be noticed first, followed by the second most important and so on. Hierarchy can be achieved by use of color, size, proximity, contrast or imagery and is created in the user interface phase of design. Our eyes are drawn to what is the most unique first, so by using this design principle, designers can control the order of how elements are viewed on a page. While we cannot control what a user interacts with first on a page, we can guide them in the desired direction through the use of hierarchy.
Native Design is specific to mobile apps and takes into account the differences between iOS and Android platforms. Each platform has native components specific to the the software that influences how an app is designed. For example, Android has a universal navigation bar at the bottom of the device that has a back button to return to a previous screen, whereas iOS has no such thing. These differences influence the UX and UI Design of an app if it is being developed for a specific platform. You wouldn’t want an iOS user to have to interact with an app made for Android users because it would disrupt their user experience by having to learn a new visual language. Each app has its own standards and guidelines of how to best optimize the design for the software. Android has material design developed by Google as their app standards, while iOS has iOS design (also known as flat design) developed by Apple as their app standards. While the native apps should look almost identical across platforms, there will be subtle differences to account for the different standards expected by each platform.
By understanding these design terms, designers can better align themselves with the product’s core users and create solutions for any difficult problem. At Lithios, we specialize in focusing on the user to design solutions that can provide the most value. Let us know if you need our help designing something for you!
Contact us to see why the brightest companies trust Lithios.
Get in touch
Social
.svg){kind=logo}
©2023 Lithios LLC. All Rights Reserved
