UI/UX design guide
Scope of the guide
Short answer: Basic skills sought in a UI/UX designer; research and problem definition, information architecture and flow establishment, visual design, situation and interaction thinking, accessibility, prototyping and testing, being able to explain the decision rationale and technical literacy that facilitates working with the developer; Each of these is evaluated not by title, but by output.
I'm Selçuk Aker. I have been designing brands and digital products for over 19 years; Web, mobile application and management panel interfaces are an important part of my job. In this guide, I describe the skills not as a list of adjectives, but in terms of what each one looks like on the job and how to prove it in a portfolio. I try to answer the same question for both those who want to be a designer and those who are looking for a designer for their team: "Does this skill really exist, how can it be understood?"
Evaluate skill by output, not by title
Phrases such as “empathic”, “detail oriented”, “user-oriented” are frequently used in resumes. These may be true, but cannot be verified. A more reliable way to evaluate a skill is to look for the mark left by that skill:
| Skill | Here is the trace it left behind |
|---|---|
| Research and problem definition | Answerable research questions, notes separating observation from interpretation |
| Information architecture and flow | Flow chart including error and abandonment paths, logical menu names |
| Visual design | Consistent type scale, readable hierarchy, grid-fit layout |
| Status and interaction | Blank, error, loading and success screens; component variants |
| Accessibility | Measured contrast values, visible focus, sufficient touch area |
| Prototype and testing | Task scenario, observation notes, changes made based on findings |
| Contact | Screens with decision reasons written, clear presentation |
| Technical literacy | Handover notes that the developer can implement without asking questions |
This table is a summary of the next sections. Let's consider each skill separately.
Research and problem definition
The first skill of a good UI/UX designer is to ask the right questions. “Users don't like the app” is not a problem statement. "Some of the new users leave the application at the address step of the first order" is a definition that can be worked on. By looking at available data, support tickets, and conversations, the designer distills a broad complaint down to a concrete question.
An important part of this skill is separating observation from interpretation. “The participant searched for the filter button three times” is an observation. “Filter button is not visible enough” is a comment and there may be other explanations. A designer who can make this distinction in his research notes will be less likely to lead the team to wrong solutions. I explained with examples how research turns into screen decisions in the article translating user research into screen decisions.
Information architecture and flow establishment
Information architecture ensures that content and functionality are available where the user is looking. This skill shows itself most in menu names and grouping. A section within the company called the “current account module” may be “my payments” for the user. The ability to establish flow is being able to see all the paths of a task: not just the “happy path,” but also the paths where the user backtracks, gives up, or makes mistakes.
To improve this skill, try choosing a task from an application you use frequently and drawing its complete flow. It is often surprising to see how many decision points and how many error situations arise. When you are unsure about menu and category names, seeing how users group content with simple methods such as card sorting is also part of this skill. The aim here is not to make the user design the menu, but to understand the categories in their mind.
Visual design: hierarchy, typography, color, grid
Visual design in the interface is more about showing direction than embellishing. When the user looks at the screen, what should he see first and then move on to? This order is established by size, weight, color, spacing and position.
- Typography: Limited and consistent font scale, readable line length, font families that display Turkish characters correctly.
- Color: Defining meaningful colors (error, warning, success) in addition to brand colors and not attaching meaning to color alone.
- Grid and spacing: Consistent margins and alignment between screens; Predictable behavior at different widths.
Those with a graphic design background have an advantage in this field. I discussed the equivalent of these basic skills in graphic design in the characteristics of a good graphic designer guide.
Interaction and situation thinking
The skill that most quickly distinguishes an experienced interface designer, in my opinion, is situational thinking. A screen is not a single image; It looks different when there is no data, when data is being loaded, when an error occurs, when the user is not authorized, and when the operation completes successfully. If each of these situations is not designed, improvised solutions will arise during development.
I explained in detail the loading and error states caused by a data request in the interface in the article API integration and interface states. The way to showcase this skill in the portfolio is simple: Add at least one empty status and one error status next to the main screen.
Accessibility and inclusive design
Accessibility aims to enable people with vision, hearing, mobility or cognitive differences to use the product. But the results benefit everyone: anyone looking at their phone in the sun, carrying a bag with one hand, or working on a slow connection.
W3C's WCAG 2.2 directive is the main reference source in this field. At AA level, a contrast ratio of at least 4.5:1 is required for normal text and at least 3:1 for large text and interface components; With version 2.2, a minimum size criterion for touch or click targets was also added. A designer is not expected to know these ratios by heart, but to measure their screens accordingly. I listed the controls on the design side in the article web standards and accessibility control.
Prototyping and testing
Prototyping is a way to try out an idea without coding it. The trick is in building the prototype at the right level of detail: It's not necessary to draw every animation to try out a flow; It is not necessary to connect the entire application to try a micro-interaction.
Testing skills also begin with writing tasks. Instead of “Review the application,” a real task should be given, such as “Make an appointment for Tuesday next week.” Watching without helping the participant, noting the observation, and ranking the findings in order of importance are parts of this skill. I explained which decisions should be tested in the prototype in the article wireframe and decisions to be tested in the prototype.
Communication: writing justification, getting feedback, working with developer
Design decisions are discussed within the team. Instead of defending a decision by saying "it's better this way", being able to explain which user task it serves and which alternative was eliminated and why determines the designer's impact. The same skill is required when receiving feedback: not to apply every comment, but to find the problem the comment points to.
Working with a developer is the most concrete form of this skill. Instead of delivering screens and withdrawing, answering questions during development and comparing the implemented screen to the design directly affects the quality of the result.
In my own projects, I keep important decisions as a short decision record: What changed, why it changed, which alternative was eliminated. This recording occurred a few months later when the question "Why is this button here?" It prevents the team from having the same discussion over again when the question comes up. A designer's habit of leaving this kind of written mark is invisible to the outsider, but very valuable within the team.
Technical literacy
The UI/UX designer does not need to write code; but he must know roughly how to do what he designs. This literacy includes:
- HTML and CSS logic: box model, flexible layout, layout changing according to screen width.
- Data and status: Knowing that a list comes from the server and loading and error situations occur during this time.
- Platform guidelines: Basic approach of Apple Human Interface Guidelines for iOS, Material Design 3 for Android.
- Transfer: How the dimensions, color and text variables, and assets to be exported will be transferred to the developer.
I discussed the delivery relationship between design and front-end development in the article HTML, CSS and JavaScript delivery.
Exercises to improve skills
None of the skills are developed by reading alone. The following exercises help you practice each in short, repeatable practice:
| Skill | Exercise |
|---|---|
| Problem definition | Read negative reviews on an app store; Turn each complaint into a one-sentence problem description. |
| Stream | Select a single task in a banking or shipping app; Draw all decision points and error paths. |
| Visual hierarchy | Take a screenshot of a crowded screen; rearrange with size and spacing only, no colors. |
| Situation thought | Draw a list as four separate screens: empty, single record, multiple record and error. |
| Accessibility | Measure the contrast ratio of all text and button colors in your own design and write it in a table. |
| Test | Give a friend a single task; Watch without assistance and take notes with observation sentences alone. |
| Contact | Write a design decision that would explain it in three sentences to someone who doesn't know design. |
The outputs of these exercises can also be used as small pieces of evidence supporting your case studies in your portfolio. The important thing is to note in a sentence or two what you learned at the end of each exercise; These notes will be useful when explaining your way of thinking in the interview.
One more tip: Practicing skills one by one is helpful in the beginning, but in real projects they all come into play at the same time. So do a small end-to-end project periodically: define a task, draw its flow, design its screens with states, try it with two or three people and write down the result. Repeating this cycle allows you to see how the skills you've learned separately connect together.
Skill expectation by seniority
The same skills are desired at all levels of seniority, but the depth and independence expected varies:
| Skill area | Junior | Mid | Senior |
|---|---|---|---|
| Problem definition | Understands the given problem and asks questions | Clarifies the problem with data | Determines with the team which problem needs to be solved first |
| Flow and structure | Draws the flow of a single task | Consistently establishes interconnected flows | Drives information architecture across the product |
| Visual design | Uses existing library correctly | Proposes and documents new component | Determines the direction of the design system |
| Cases and exceptions | Adds when reminded | Spontaneous lists | Anticipates exceptions together with the technical team |
| Test | Watches the test and takes notes | Plans and executes testing | Decides what needs to be tested |
| Contact | Announces his decision | Presents to stakeholders, manages feedback | Provides consensus among teams and guides young designers |
I explained what working with a senior designer means for business in the article Working with a senior UI/UX designer in Istanbul.
How do you test these skills when hiring?
When choosing a UI/UX designer, looking at the screens in the portfolio is not enough. These methods give more information:
- Ask for a case study narrative: Ask the candidate to describe a project from problem to outcome. Pay attention to whether he states his role clearly.
- Ask about status screens: “What did this list look like when it was empty?” The question tells a lot.
- Practice a short critique: Show a screen from your current product and listen to what the candidate would change and why.
- Request a sample handover file: See how a file delivered to the developer is organized.
When choosing a freelance designer, it is necessary to additionally evaluate the scope, revision and delivery items; For this, you can refer to the freelance UI/UX designer selection guide.
Summary: UI/UX designer skills checklist
- Can it reduce the problem to an answerable question and separate observation from interpretation?
- Can it draw the flow with error and abandonment paths?
- Can it establish a consistent typography, color and grid system?
- Does it automatically design empty, error, loading and success states?
- Does it measure contrast and tactile fields?
- Can they justify their decisions and work with the developer?
You can find the order in which you can acquire these skills in the guide How to become a UI/UX designer and how they are used in daily work What does a UI/UX designer do. You can look at UI/UX design principles for the basic rules on which the skills are based, and UI/UX design programs for the tool side. The general framework of the concepts is included in the UI/UX design guide.
Frequently asked questions about UI/UX designer skills
What is the most important skill for a UI/UX designer?
It's hard to pick just one skill; But defining the problem correctly determines the efficiency of all other skills. Elaborate screens prepared for an ill-defined problem may not solve the actual problem of the product. That's why questioning and observation skills are at the top of the list.
Is drawing ability required?
No advanced drawing required. It is enough to be able to draw enough boxes, arrows and simple shapes to quickly put the idea on paper. Work requiring illustration is usually carried out with a separate expertise.
How does empathy develop as a skill?
Empathy develops by observing and listening to the user. Participating in user interviews, reading support tickets, and watching testing sessions corrects the “this is what I would do” assumption. Seeing that your own habits do not represent everyone else is the beginning of this skill.
What distinguishes a senior UI/UX designer from a junior?
The senior designer spontaneously anticipates exceptions and situations, can determine with the team which problem needs to be solved first, and communicate their decisions to different stakeholders. The junior designer, on the other hand, focuses on solving a given problem and needs more guidance. The difference is often not in knowledge of the tools, but in judgment and independence.
Should a UX designer know statistics?
Advanced statistics are usually not required. However, it is important to be able to read analytical data, know the risk of drawing general conclusions from a small sample, and interpret percentages correctly. If large-scale experiments are involved, we work together with data analysts.
Why is typography important for the UI designer?
Most of the information in the interface is conveyed through text: titles, labels, buttons, error messages. A consistent font scale and readable line structure make it easier for the user to scan the screen and find the right element. Poor typography can make even a well-established flow difficult to use.
How are these skills displayed in the portfolio?
In each case study, show the problem, your role, flow, alternatives tried, status screens, and trial findings, if any. Adding a sample of contrast control, component variants, and cycle notes simultaneously proves technical and visual skills.
How much technical knowledge is required?
It is not necessary to be at a level to write code. It is enough to know how screens behave at different widths, that the data comes from the server and that this creates error situations with loading, and the basic approach of the platform rules. This information allows creating designs that the developer can implement and not have to change later.
Do you have a digital product project?
This guide gives information about UI/UX design. You can share your current screens and goals for your digital product.
- Target user of the product
- Prioritized task and flow
- Platform (web, iOS, Android)
