A lot of misunderstandings and a lot of questions related to UX and UI among beginners. Often due to the fact that people do not know the essence of the concept of UI/UX, things are not called by their proper names.
First, I want to explain in simple terms what UI/UX design means.
UI — User Interface — is what the interface looks like and what physical characteristics it acquires. It determines what color your “product” will be, whether it will be convenient for a person to hit the buttons with a finger, whether the text will be readable, and so on …
UX — User Experience — is what experience the user gets from working with your interface. Is he able to reach the goal and how easy or difficult to do it?
The first official use of the term UX refers to 1993rd year when Donald Norman came to Apple as an UX Architect. He came up with the name of this position, and a bit earlier with the term User Experience itself.
UI/UX design — is the design of any user interfaces, in which usability is just as important as the appearance.
Three main components of the design:
Information architecture (IA) aims to organize content so that users can easily adapt to the functionality of the product and can find everything they need with less effort. In most of the cases UX designer is the one who work on it.
UI designer responsible for design the project in interactive interface, icons, logo, buttons and other related elements. Creates user friendly and appealing layouts.
UX designer responsible for:
- research of user needs
- creation of logic wireframes of the interface
- prototype testing
- writing design specifications
UI/UX Designer is a superman who can do all of the above.
To sum up, the difference between UX and UI is that the UX designer plans how user will interact with the interface and what steps he needs to take to do something. And the UI designer comes up with how each of these steps will look. As you can see UX and UI are so closely related that sometimes the line between concepts is washed away. Therefore, both UX and UI are often taken by one designer and his profession is written with “/”.
UX design for beginners
And now let me dive you in the process of UX design. I will talk about the necessary tools, how to create ideas and what is the main stages of the design you should be familiar with at the beginning.
Software and tools of UX designer
- laptop or desktop computer, plus phone with Android or IOS
- notebook for sketches and ideas
- software: Sketch, Adobe, Axure, Mockplus, Fireworks, UXPin
And if first three point are pretty clear I want to explain what I meant about the last one. You have to learn new thing each day, constantly evolve yourself. Technologists are developing. Demand for sites is growing and digital applications appear like mushrooms. New trends and features in design are coming almost every day and you need to be aware of them.
UX Designer in the Project Creation Process
UX designer can come in at any stage of a project, but they are generally most useful in the design stages, before developers actually start the coding process. UX designer not only creates interfaces, but understands how to design them from a business point of view.
Ideas and their producing
When you begin your journey as designer you may face the problem of having some new ideas and thoughts. And it is okay, everyone going through the same thing at some point of time. There is a tip, take few or more other people’s ideas and out of them take something and implement it in your own project.
But this is not the best practice, I would suggest to go for techniques which help you to create ideas by James Webb Young. There are five critical steps that everyone follows whenever they produce a new idea:
Step 1. Gather new material. This includes specific material (related to the product or task) and general material (fascination with a wide range of concepts). For example, you got involved in a project of creating online shopping mobile app, so start with e-commerce knowledge, what people buy, when they do it, go through some statistic, make a notes while diving into the new knowledges.
Step 2. Work over the materials in your mind. Mentally “chew” your new material by looking at the facts from different angles and experimenting with fitting ideas together. At this point don’t forget to write key phrases on the paper and draw some small images.
Step 3. Retention of your thoughts. Put the problem completely out of your mind and go do something else that excites you and energizes you. At least for one or more hours stop thinking of your task and do anything else.
Step 4. Brainstorming. Your idea will return to you with a flash of understanding, only after you stop straining. At this point brainstorm will help you generate new ideas.
Step 5. Shape and develop your idea into practical usefulness. Put your idea out into the world, submit it to criticism, and adapt it as needed. It is necessary to clearly assess how good the idea is, does it allow to solve the required tasks? And if not, do all the steps again.
One more practical exercise I want to talk about is 10+10 method. Whereby you will learn to apply the design funnel method that develops your creativity. First, you develop 10 ideas (let’s say the task is to develop a non-standard scroll view for the application). Then from these 10 ideas you choose the best and offer 10 more options for its improvement. Exercise should be carried out periodically to develop it as a habit.
Process of designing your first app/website
Sketch. It’s basically just a raw freehand drawing on a piece of paper. It is the fastest way to get your idea ready for brainstorming. Even a simple sketch can describe your idea better than words. Draw, change details, visualize what you have on your mind. This step is essential for getting to the wireframe stage.
Wireframe. A wireframe is equivalent to simple structure of your website or app. It used to describe the functionality of a project as well as relations between views (what will happen when you click a certain button). This step does not cover the product’s design.
Mockup. Add colors, fonts, text, images, logos and anything else that will shape your wireframe. Your result is a static map of the app. Think about User Interface practices while shaping this step.
Prototypes. It’s like a mockup enriched with UX pieces, interactions, animation and anything else you’d like to experience when clicking buttons. The only thing that missing is functionality. It can give you a feeling of using a real app, but they are only images connected with each other.
The world of UI/UX design is much deeper than that which I discussed in this post. UI/UX design is now one of the most hoped-for professions in the digital industry. And, apparently, it is only gaining momentum. In the field of UX design you should never stop learning and never feel like you’ve “made it”. To keep excelling, you need to keep pushing yourself by learning the latest tools and be updated with ever-changing user preferences and expectations.
I hope this article gave you an idea of who is UI/UX designer and what do you need to know in order to start great journey of becoming one. If you have any feedback to share please do so.