What’s the difference between UI and UX design? What the heck is a wireframe and more? We sat down with Metova designers Lorenzo Garnett and Manuel Velazquez to learn about the work of a mobile app designer.
What is the difference between UI and UX?
Garnett: The simplest way to put it is UI is what makes the design beautiful while UX is what makes the design useful.
Velazquez: It’s common these days to hear about the UI or UX Designer, and how we can be helpful on projects, but the terms are often confused. While they are both related, their approach to a solution for problems is different, and the perspective and knowledge may be even further than separated.
UI or “User Interface” is what the user sees. This can be a set of commands or menus through which a user communicates with a program. It is also the space where interactions between humans and machines occur. This refers to colors, fonts, shapes, buttons, imagery and the way they are presented; this may follow a trend, or be as disruptive as needed.
UX or “User Experience” is about designing products, processes, and systems to be useful to a set of end users. It is a broad concept applied during the design process. UXD or User Experience Design covers the technical use of a product or service and its essential physical interface.
To summarize, UI design conveys to a delightful familiarity for what they expect and love to see, and UX is about being visually legible, useful, functional and easy to decipher for the users.
What are some unique issues that are important to consider when designing?
Garnett:I think two of the biggest issues I see are knowing your audience and designing something that is easy to use for that audience. If the audience is older you wouldn’t want small text throughout the site or you wouldn’t want to use icons and gestures that are unfamiliar to them.
UX and UI Design is a more complex process than opening Design Software such as Photoshop, Sketch, Illustrator or Figma. Every project is different, and the requirements may vary from one to another. But a few factors that can alter processes are The Project, The Client, The Budget, Deadlines, Experience Level of the UX Designer. The usual steps of the process are: Product Definition, Research, Analysis, Design, Validation.
What is a wireframe and why is it important?
Garnett: A wireframe is a visual structure of a website or app. It is kind of like a blueprint for a building. Wireframes are important because everyone involved in the project can walk through the structure. In this phase of the design it is easier and faster to make changes the layout and functions for the site/app. Wireframes also help the client and designer both really think/plan usability.
Velazquez: Wireframes, also known as page architecture, page schematic, or a blueprint, are simplified sketches of the most important information. It’s a skeleton of the design and should contain all the important elements of the final product. A wireframe is usually made by the UX Designers and is not required to be a High-Quality Design.
How does design work with development?
Garnett: In my experience, we both work hand in hand. When designing, development is often there from the very beginning stages of the wireframe. For example, when designing out a feature we communicate with the development team to see if it will be easy for them to implement. Once the design is complete we still communicate in case things need explaining or need to change.
Velazquez: In present times it has been easier to work with the Dev team. As it depends on each project, the methodology used determines the way both teams will work.
Communication with the team otherwise, is a regular on each project. The Creative team will collaborate and tell the ideas to the Development team to share problem-solving ideas, and probably shortening work hours.
On handling the assets, there are several platforms that will allow the Development team to achieve a Design as truthful as the one approved. Systems like Zeplin, Figma, Invision, Marvel, to name a few are powerful tools to conquer the goal.
Are there important considerations when designing for phone vs. tablet vs. web?
Garnett: I believe the most important thing to consider is how the user interacts with the device. For example, phones are often used one-handed while a tablet usually uses both. This changes how I plan to lay things out. Since phones use one hand I often design things out where the most frequently tapped items are in a more reachable spot for one-handed use.
Velazquez: In the past, designing for so many different screens each time was a challenge to say the least, the way to design had to move to a more “Development Thinking” If by any case the project requires a responsive design, mobile first is the best option, starting from the smallest screen scoped. The design must remain modular, and thought as a mutable being that will adapt to any screen size.
When do you deviate from an OS best practice (such as on Android or iOS) when trying to differentiate a brand?
Garnett: When the client is really unique or has a unique feature in mind that is unlike something you see in an OS.
Velazquez: UX is not only to get to know whether there is the need to place a button or an image or how the wireframes are about to be approved. When in the Product Definition stage, the scope of work is also determined. Some clients may prefer iOS or Android devices, but with good research and analysis, there may be a completely different approach by their actual users. That’s why I recommend researching to get the best product possible. Developing an app requires a lot of resources, time and effort that will provide our client’s with the best results – if the target is well selected and not just decided by personal preferences.
What does it mean to do design work at Metova?
Garnett: Designing at Metova often involves problem-solving, adapting and innovating. It also means facing the challenge of helping clients transform whether it’s as small as a business card or as big as a website.
Velazquez: Every project is unique in its own way, and finding a functional way to solve client’s issues is my main goal. Having so many different points of views and such a talented and experienced team to support each other is very helpful.
