UI/UX design guide
Scope of the guide
Short answer: The UI/UX designer designs how a website, mobile application or software panel will be understood and used by users through research, flow, wireframe, prototype and visual interface studies and turns these decisions into files that the developer can implement.
I'm Selçuk Aker. I have been designing brands and digital products for over 19 years; Website, e-commerce, mobile application and management panel interfaces constitute an important part of my business. On this page, instead of listing the UI/UX designer's duties as a list of items, I will try to show them in a real flow. I will also explain what deliverables were produced, who I worked with, and how the job changes whether working in an agency, in-house or freelance. For basic definitions of UI and UX concepts, you can look at the UI/UX design guide.
Who is a UI/UX designer?
A UI/UX designer is a person who designs both the usage flow and screens of a digital product. On the UX side, “What does the user want to do and in what order?” On the UI side, "How should this step look and behave on the screen?" answers the question. Since the answers to the two questions are interconnected, these two tasks are often combined in the same person in small and medium-sized teams.
The point is not to draw a screen, but to decide. Which field will be mandatory in a form, what an error message will say, what a list will suggest to the user when it is empty on first launch; they are all decisions that come to the designer's table. Screens are the visible version of these decisions.
Tasks on the UX side
UX work starts before the screens are drawn and continues after the product goes live. The main tasks are:
- Writing a research question: “What do users want?” Instead of a broad question like “What information is the user looking for when they want to change their appointment?” Posing answerable questions such as: Interviews, surveys, support tickets and analytical data are selected based on these questions.
- Information architecture: Determining under which headings the content and functions will be collected and how the menu will be named. It is seen here that the terms used within the company may be unfamiliar to the user.
- User flow: Diagramming the steps, decision points, and possible exits of a task. A good flowchart asks “what happens if the user gives up?” It also answers the question.
- Wireframe: Preparing screen layouts with actual content lengths, without color and visual detail.
- Prototype: Setting up a clickable trial version by connecting screens together.
- Usability testing: Testing the prototype with certain tasks by people close to the target audience and noting the sticking points.
I explained the methods of these stages and which research at which risk to choose in detail in the user experience design guide.
UI side tasks
Once the flow becomes clear, the interface layer becomes denser. UI tasks are not limited to just producing a “pretty screen”:
- Visual hierarchy: Determining what is seen first on the screen by size, weight, color and space.
- Component design: Defining repetitive parts such as buttons, form fields, cards, tabs and tables with their variants in a single library.
- State design: Drawing the default, hovered, pressed, passive, faulty and loading states of each component.
- Typography and color: Establishing readable font scales, font families that display Turkish characters correctly, and a color system that does not attribute meaning to color alone.
- Accessibility: Controlling text contrast, focus indicator and touch area size with W3C's WCAG 2.2 criteria.
- Micro-interaction: Defining short transitions and feedback that indicate that an element has been added, deleted or saved.
Another frequently forgotten task on the UI side is adaptation to screen widths. Will the three cards lying side by side on the desktop be arranged one under the other on the phone, or will they turn into a horizontally scrollable list? What columns will the table display on the small screen? If these decisions are not made in the design file, they are often made hastily during development. That's why I got into the habit of drawing important screens at least two widths wide and writing down the behavior in between as notes.
Designing a flow from start to finish: membership screen example
To concretize the tasks, let's consider a seemingly simple task: signing up for a service application. This is often shown in portfolios with a single screen; In reality, it is like a small project.
- Question: Why does the user have to become a member? Can the service be reviewed without membership? This decision is made with the product team; The designer shows the impact of the options to the user.
- Flow: Registration by e-mail, verification by phone or login with an existing account options are charted. If the verification code does not arrive, what will happen if the user has already registered with the same email is written.
- Screen inventory: Registration form, verification screen, success screen and error screens are listed. Most of the time, a job that is thought to be 1 screen consists of 6–8 screens and situations.
- Wireframe: The order of the form fields, when the password rules will be displayed, and where the terms of use will appear are tested in the draft.
- Microtext: Instead of “Invalid login” it says “An account already exists with this email address. Would you like to log in?” Texts such as that tell the user the next step are written. I also discussed this issue in UX writing article.
- Visual interface: Form fields and buttons from the component library are used; When the keyboard is opened, it is checked whether the primary button remains visible.
- Prototype and trial: A few people are given the task “Sign up to the app and make your first appointment”; Note where they stopped.
- Transfer: The screen, field validation rules, error texts and transitions for each state are explained to the developer.
In this example, a significant portion of the designer's time is spent not on the "ideal" screen, but in moments when things go wrong. I explained the section from screen flow to circuit in mobile projects in more detail in the article delivery of the mobile application designer.
What deliverables does the UI/UX designer produce?
Although it varies depending on the scope of the project, common deliverables include:
| Delivery | What does it do? | Who uses it? |
|---|---|---|
| Flow chart and site map | Shows steps of tasks and page relationships | Product manager, developer, content team |
| Wireframe set | Allows discussion of placement and content priority independent of visual detail | Product team, decision makers |
| Clickable prototype | Allows testing and presenting the stream without coding | Test participants, investors and stakeholders |
| High resolution displays | The final visual shows the interface and all statuses | Developer, testing team |
| Component library | Collects variants and rules of recurring items in one place | Design and development team |
| Transfer notes | Describes the measure, behavior, error text, and entities to export | Developer |
| Test findings | Prioritizes observed issues and recommended changes | Product team |
I explained which interface files you should request from a designer in the article Expected deliverables from the UI designer and the scope of research and testing in the article Scope of working with the UX designer. The programs with which these deliveries are prepared are the subject of the UI/UX design programs guide.
Who does a UI/UX designer work with?
The UI/UX designer rarely makes decisions alone. On a typical project, he is in constant contact with:
- Product manager or project owner: Decides which problem to solve first, boundaries of the first release, and business goals. The designer makes visible the impact of these decisions on the user side.
- Developers: Knows the technical constraints, data structure and at what cost a component can be made. Showing the design to the developer at an early stage reduces surprises later on.
- Content manager or UX writer: Determines interface texts, terms and tone of voice.
- UX researcher: Undertakes the research plan and test management in large teams.
- Brand and graphic designer: Work together on how brand elements such as logo, color and typography will be used in the interface.
- Support team: Knows the most frequently asked questions from users; This information is valuable in determining design priorities.
A UI/UX designer's day by project stage
“What to do in one day?” There is no single answer to the question; The stage of the project determines the content of the day. The following table provides a general outline of how work is distributed by phases in a medium-sized implementation project:
| Project phase | Main tasks of the day | What emerges at the end of the day |
|---|---|---|
| Discovery | Meeting with the project owner, reviewing the current product and support records, listing questions | List of open questions, job descriptions |
| Flow and structure | Drawing a flowchart, taking a screen inventory, discussing boundaries with the product manager | Flowchart, screen and status list |
| Wireframe and prototype | Draft screens, alternative layouts, prototype links | Prototype ready to try |
| Essay | Short sessions with participants, sorting of notes, prioritization | List of findings and recommendations for change |
| Visual interface | Component and variant editing, status screens, contrast controls | Approval-ready screens and library |
| Development support | Answering developer's questions, comparing implemented screens with design | List of corrections, updated notes |
There is another job added to this table every day: communication. Writing the justification for a decision, collecting the feedback in a way that does not conflict with each other, and keeping the changes trackable in the file can take as much time as drawing a screen. One of the things that distinguishes an experienced designer is that he does this invisible work regularly.
Titles: UX designer, UI designer, product designer and others
The titles encountered in the advertisements describe the same job from different aspects:
| Title | Outstanding responsibility | Note |
|---|---|---|
| UX designer | Streaming, information architecture, wireframe, testing | Someone else can handle the visual interface |
| UI designer | Visual interface, component, design system | Participation in streaming decisions varies from team to team |
| UI/UX designer | Two fields together | Comprehensive description frequently seen in advertisements in Turkey |
| Product designer | Product objective and measurement in addition to UI/UX | More in product companies |
| UX researcher | Research plan and findings interpretation | Screen design may not be expected |
| Interaction designer | Transition, movement and interaction behaviors | Separate expertise in large teams |
“Interface designer” is mostly used as UI designer in Turkish. The title alone does not say anything; It is necessary to look at the list of responsibilities of the posting and the actual role in the candidate's portfolio.
How does the job description change in agency, in-house and freelance work?
| Working model | Weight of work | Things to consider |
|---|---|---|
| In-house | Long-term work on a single product, design system maintenance, release planning | Knowing the product in depth is an advantage; We should not lose the perspective from the outside |
| Agency | Short and medium term projects, presentation and proposal processes to different customers | The schedule can be tight; scope of research and testing may shrink depending on budget |
| Freelance | Working directly with the client; Responsibility for scope, schedule and transfer lies with the designer | Design, software and publishing responsibilities must be separated in writing in the proposal. |
In freelancing, the designer also takes on some of the work done by an agency or in-house project manager: clarifying the scope, gathering feedback, managing the deliverable list. I explained how I work in this model on my freelance UI/UX designer page.
My scope of work
In my projects, I undertake flow, wireframe, prototype and visual interface design; I work with the team until the developer transition. For example, in the Danone and ERP Software projects, my role was interface design: I designed the new screens. At Yatcim, I prepared the entire website. You can review the screens of these projects on the Danone and Yatcim pages.
Software development, server, uploading to the application store and post-release maintenance are separate areas of expertise and responsibility. When starting a project, I distinguish in writing which tasks are within the scope of design and which belong to the software team. For a brief introduction, you can check out my UI UX designer page.
I mostly work remotely from my office in Eyüpsultan, Istanbul. I usually start a project by reviewing the existing screens, any user feedback, and the constraints of the software team. The first deliverable is often a flowchart and screen list; I move on to visual design after agreeing on the flow with the team. This sequence later led to the question “where did this screen come from?” It prevents the question from being asked and makes the feedback more concrete.
Summary: The job of the UI/UX designer
- On the UX side, research question, information architecture, flow, wireframe, prototype and testing.
- On the UI side, hierarchy, component, states, typography, color, accessibility and micro-interaction.
- A significant part of the time is spent not on the ideal screen, but in error and exception situations.
- Deliveries are not just about screens; flow chart, component library and handover notes are also part of the work.
- Instead of title, look at the list of responsibilities and the actual role in the portfolio.
If you want to enter this profession, you can continue with the UI/UX designer skills guides to see the skills required How to become a UI/UX designer.
Frequently asked questions about UI/UX designer
What is the difference between UX designer and UI designer?
The UX designer determines the steps through which the user will complete the task; The UI designer designs how these steps will look and behave on the screen. In small teams, the two roles are often held by the same person. Large teams may be separated, but they must work closely.
Does the UI/UX designer conduct user research himself?
It depends on the size of the team. In small and medium-sized projects, the designer can plan and conduct interviews and tests. In large companies, this job is given to the UX researcher; the designer translates the findings into screen decisions.
Does the UI/UX designer code the application?
Usually no. The designer defines the interface and its behavior; coding, testing and publishing is the job of the software team. Some designers may also write front-end code, but this should be defined as a separate skill and separate responsibility.
How are the duties of the UI/UX designer and the product manager separated?
The product manager decides what to do, in what order, and why. The UI/UX designer designs how this decision will work for the user and makes the impact of the options visible. The two roles inform each other; The final priority decision usually falls on the product side.
What does a UI/UX designer do in a day?
The day varies depending on the stage of the project. One day it might be summarizing interview notes and drawing a flowchart, another day it might be editing component variants or answering the developer's questions. Meeting, feedback evaluation and documentation are also regular parts of the day.
What jobs does a freelance UI/UX designer undertake?
Usually prepares flow, wireframe, prototype, visual interface and component library. Research, testing, design system documentation and support for the development process are also defined in the proposal. Coding and publishing responsibility are out of scope in most projects.
Are UX writer and UX designer the same?
No. UX writer writes the texts in the interface, namely button labels, error messages and redirect sentences. The UX designer designs the flow and structure. For small projects, the designer may also write texts; For large products, a separate specialist carries out this work.
Are the interface designer and web designer the same?
There are aspects of overlap, but they are not the same. The title of web designer usually covers the design, and sometimes coding, of websites. Interface designer designs the screens of different digital products such as web, mobile applications and software panels. For website-focused work, you can check out my web designer page.
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)
