10 Essential Skills for the Modern UI & UX Designer
By: Danny Sapio
Tags: Visual Design, Design, UI, UX, Product Design

Typography involves much more than choosing a great font. When used effectively, it can enhance usability by improving readability, accessibility, and hierarchy within an interface.

If you’re reluctant to create typography guidelines from scratch, try the Material type scale generator to generate font sizes for paragraphs, headings, buttons, and so on. To create type scale guidelines for a UI project, here’s how I do it:

Select a font to work with. My favorite places to get high-quality UI fonts are Google fonts or Adobe fonts. Avoid more than 2 typefaces. Instead of introducing new fonts to the interface, use font families. Fonts from the same family are designed to work together, so they’re flexible and consistent. Establish a base font size. I start by establishing the most commonly used type scale for body copy and determine a suitable line-height. Line height. Keep line-height range between 130% and 150% for optimal readability. This isn’t always true, but it’s a good place to start and then make adjustments as needed. Define a scale. A scale provides consistency, rhythm, and hierarchy because they are predictable. To set type scale for h1, h2, h3, body, captions, buttons, and so on, we need a scale value to multiply by our base font size. Common scales for type are 1.250x,1.414x, 1.5x, 1.618x. Test scales on devices. Test font with different scales on multiple device sizes to decide on the right value.

4. How to craft a perfect case study

View a case study template I created — View Figma.

The ritual of crafting a comprehensive case study at the conclusion of a design project is a design project in and of itself.

Documenting the design process has become so ingrained in many up and coming designers that it seems designers go out of their way to use as many colorful sticky notes as possible to take the perfect picture for their case study.

Here is a format that I use for case studies:

Intro

Overview. Provide a high-level description of the project. Client. Who was the client? Who was the solution for? Role. What was your role in the project? (i.e., Lead UX Designer) Duration. How long was the project? Tools. List the tools you used for the project. (i.e., XD, Whimsical,

Defining the problem

Hypothesis. State what problem was hypothesized that lead to the project being started. Create a problem statement. In exactly one sentence, sum up the problem you’re aiming to solve with your design. Discovery. This is the initial validation of our hypothesis. In the discovery phase, we research our problem and find existing solutions and possible opportunities for improvement.

Testing

Interviews. Assuming there have been potential opportunities uncovered in the discovery phase, it would now be time to interview potential customers. Outline the number of interviewees or surveys, age range (if applicable), gender (if applicable), and interview duration. Goals. Indicate the different discoveries that were trying to be made during the interviews.

Insights & Opportunities

Journey map. A journey map will help uncover these insights to refine your understanding of the users’ pain points and find potential opportunities. In your journey map, be sure to outline the opportunities in the user’s journey. Opportunities. Through discovery, research, and interviews, we’ve uncovered many potential opportunities for our product. Outline 3 key opportunities that your design could help solve.

Solution

State the solution. A solution statement that outlines how the design will solve the core problems people are encountering.

Design

Design principles. What principles guided design decisions? MVP. Show the minimum viable solution that you created to solve the aforementioned problems and opportunities. Gathering feedback. How did you gather feedback on the MVP? (i.e., user testing, hotjar, google analytics, surveys, etc.) Testing insights. Describe the findings that came out of your testing of the design. Include quotes from users as well. New iteration responding to feedback. The design process is inherently iterative and ongoing, so I like ending my case studies with updated designs based on initial feedback and a mention of roadmap features for the future.

Conclusion

Sum up your findings, challenges, client quotes, and other notes to bring it all together.

5. How to write effective UX copy

In a perfect world, UX writing is the task of professional UX writers. However, companies often rely on their UX team to convey clear messaging instead of hiring UX writers. If your team has a UX writer, great! If not, I have some tips you can use to convey clear messages to users.

Write all copy at once. It can be tempting to write the copy ad hoc while designing the product, but this can often lead to mixed tones and a lack of cohesion in the messaging. Create one document for all alerts, messages, modals, explainer text, and so on.

It can be tempting to write the copy ad hoc while designing the product, but this can often lead to mixed tones and a lack of cohesion in the messaging. Create one document for all alerts, messages, modals, explainer text, and so on. Keep it short and sweet. There is likely fluff in UX copy that can easily be removed with a quick audit. Instead of saying: “Only Premium members have access to this feature” saying “Join Premium to Access” will keep it concise and to the point.

There is likely fluff in UX copy that can easily be removed with a quick audit. Instead of saying: “Only Premium members have access to this feature” saying “Join Premium to Access” will keep it concise and to the point. Keep it consistent. When addressing the user, be sure to remain in first or second person, whichever was chosen. So instead of “edit your location in my account” say, “edit your location in your account.”

When addressing the user, be sure to remain in first or second person, whichever was chosen. So instead of “edit location in account” say, “edit location in account.” Avoid jargon. Unless we’re designing an app for experts. Avoid industry-specific terminology like “buffering” or “configuring.”

Unless we’re designing an app for experts. Avoid industry-specific terminology like “buffering” or “configuring.” Write in present tense. Instead of saying: “message has been sent” say, “message sent.”

Instead of saying: “message has been sent” say, “message sent.” Begin with the objective. When a phrase describes a goal and the action needed to achieve it, start the sentence with the goal. Instead of saying: “Drag a photo to the trash to remove it from this album” say, “To remove a photo from this album, drag it to the trash.”

6. How to give design critique

Giving constructive feedback and responding to less-than-constructive feedback is a critical skill that can be uncomfortable for new designers.

Lack of awareness about basic feedback skills leads to clients providing vague and useless feedback like “can you make it pop?”

To provide effective feedback, there are a few things we can do:

We must be clear and specific. “The imagery you used on the careers page doesn’t represent our culture well. Let’s show a playful and relaxed graphic to connect better with the candidates we hope to attract” is more useful feedback than “make it pop.”

“The imagery you used on the careers page doesn’t represent our culture well. Let’s show a playful and relaxed graphic to connect better with the candidates we hope to attract” is more useful feedback than “make it pop.” Present the designer with the problem, not just the solution. At first glance, we may think that we know the solution and request the designer “use this graphic for the careers page instead.” However, when we start by presenting the problem, the designer can understand why we want to change the graphic and can suggest ideas we may not have considered.

At first glance, we may think that we know the solution and request the designer “use this graphic for the careers page instead.” However, when we start by presenting the problem, the designer can understand why we want to change the graphic and can suggest ideas we may not have considered. Give high-quality examples. It’s always helpful to share patterns from other companies or designs we’ve found in portfolios. Not because the designer should copy these, but it can be a helpful reference for how the design can be improved.

It’s always helpful to share patterns from other companies or designs we’ve found in portfolios. Not because the designer should copy these, but it can be a helpful reference for how the design can be improved. Don’t forget compliments. As designers receiving a list of comments, revisions, issues, and so on can be daunting. Be sure to balance our feedback by calling out the parts of the experience that we think is working really well. For example, “I really like how you’ve laid out the welcome screen — it flows perfectly from the previous screen. However, it took me a second to notice the login button at the top. Can we make that button more prominent?”

As designers receiving a list of comments, revisions, issues, and so on can be daunting. Be sure to balance our feedback by calling out the parts of the experience that we think is working really well. For example, “I really like how you’ve laid out the welcome screen — it flows perfectly from the previous screen. However, it took me a second to notice the login button at the top. Can we make that button more prominent?” Tone matters. How we present our feedback and format sentences can greatly impact how designers (or people in general) respond to them. Instead of saying, “using that icon to represent a delivery doesn’t make any sense.” We could say, “the delivery icon is confusing to me. I’m used to seeing a package for delivery. Is this the best icon to represent delivery?”

7. How to create an unmoderated remote usability testing plan

Many different user testing methods can be used to gather findings. Some common tests are usability testing, card sorting, tree testing, a/b testing, and feedback surveys. To understand the different options for testing, I recommend reading Quantitative User-Research Methodologies: An Overview.

In this example, I will provide a template that can be used when conducting a qualitative test.

Define the goal

The first step in creating a remote user testing plan is to define what we hope to achieve from the test. Writing a statement that defines the goal will be our guiding light when constructing the test.

Write a simple statement like “explore if an onboarding flow is the best experience for onboarding new users.”

1. Hypothesis

Just like those science fair experiments in middle school, we should prepare a hypothesis. This will form the basis for what we are testing against. Continuing with the last example, our hypothesis might be, “users appreciate a seamless experience to welcome them into the app and explain the features as opposed to exploring for themselves.”

2. Screening Questions

Screening questions are asked to potential participants to ensure they’re a good fit for the test.

For example, if we’re testing a workout app, then we may want to ask questions like, “do you currently use any workout apps?” or “do you exercise regularly?” If the tester answers no to these questions, they wouldn’t be a good fit and wouldn’t continue to our test.

3. Scenarios

In this step, we need to define the different scenarios that a tester would go through to help us uncover insights. For example, a scenario might be testing out the app as a new user without an onboarding experience, exploring features on their own. Another scenario might be testing an onboarding experience that ushers new users through the app and explains features.

4. Tasks & questions for each scenario

Initial — Gather the tester’s expectations and explain the scenario.

Gather the tester’s expectations and explain the scenario. Questions & tasks — Explain the tasks to complete and define questions that will be asked throughout the test.

Explain the tasks to complete and define questions that will be asked throughout the test. Final questions — Ask how the experience compared to their expectations. It can help to see what they liked, didn’t like, were confused by, and final thoughts.

5. Final questionnaire

Gather final thoughts and ask any final questions to tie all the scenarios together. Which option did they prefer? How would you rate each experience on a scale of 1–5? Be sure to show visuals again to remind testers of each scenario.

6. Results

Here are a few tips for gathering the best results from remote user testing:

Not all users are tech-savvy , so it’s crucial to create tests that don’t require overly complicated tasks.

, so it’s crucial to create tests that don’t require overly complicated tasks. Ask detailed screening questions to ensure we get the right testers. Or better yet, recruit our own users or target customers.

to ensure we get the right testers. Or better yet, recruit our own users or target customers. Always use simplified phrasing as opposed to technical terms.

as opposed to technical terms. According to Neilson Norman Group, we only need to test 5 users to uncover 85% of usability issues.

8. How to design for development

When designing for development, there are considerations, constraints, and best practices we should keep in mind throughout the process. Considering development will make us better designers to work with and improve the overall quality of the products that we ship.

Some steps to ensure a seamless handoff and easier lift for developers:

Consider reusable patterns unless unique designs add real value. During the design process, we should audit our design when introducing new conventions, elements, animations, and so on. If these additions aren’t bringing additional value to the user, then they should be reconsidered. The elements that we do include; buttons, inputs, screen layouts, flows, and so on, should be reused as much as possible for consistency and to save time.

unless unique designs add real value. During the design process, we should audit our design when introducing new conventions, elements, animations, and so on. If these additions aren’t bringing additional value to the user, then they should be reconsidered. The elements that we do include; buttons, inputs, screen layouts, flows, and so on, should be reused as much as possible for consistency and to save time. Take advantage of collaboration tools like Zeplin for code snippets, inspection, easy asset downloading, and more. Figma, InVision, Adobe, or Marvel will also work just fine.

like Zeplin for code snippets, inspection, easy asset downloading, and more. Figma, InVision, Adobe, or Marvel will also work just fine. Avoid introducing new, unnecessary features . Don’t introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business objectives, user needs, project scope, timeline, and how products are developed will help prioritize which features are essential.

. Don’t introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business objectives, user needs, project scope, timeline, and how products are developed will help prioritize which features are essential. Organize all screens into sections in Zeplin and the design file.

in Zeplin and the design file. Name all artboards sequentially and appropriately for easy discovery and understanding.

and appropriately for easy discovery and understanding. Mark assets for export.

Keep an archive of old screens and ensure all new screens are up to date.

9. How to make low fidelity wireframes

Wireframing with a tool like Whimsical is faster and more lightweight for throwing ideas together and getting a feel for the layout and hierarchy of our design. It’s harder to fall in love with a design when it’s only a wireframe, so we can take criticism and feedback while holding on to our dignity.

Whimsical has predefined guard rails that make it easy to add components and define the hierarchy, layout, and content of screens — but not be distracted by the small details. Whimsical restricts us from getting caught up with colors, selecting typefaces, adding our own icon family, and so on.

The simplicity helps keep me focused on the overall experience and not get sidetracked by the little details like spacing and colors as I would in Sketch.

10. How to become a better designer every day

There will always be new trends, tools, design libraries, startups, product updates, and all the other things that we’re sure will make us a better designer.

Here are a few things I’ve done to help me improve my design skills by leaps and bounds: