You're reading for free via Danny Sapio's Friend Link. Become a member to access the best of Medium.
Member-only story
10 Essential Skills for the Modern UI & UX Designer
A how-to for fundamental skills every designer should hone.

Designers are often eager to jump straight into UI animations, trendy UIs, and high performing roles before really honing the basics.
Well, I’m here today to take a step back and explain topics like creating a usability test or the perfect color palette as simply as I can.
1. How to space objects properly
Following a convention for spacing brings uniformity to our designs and ensures that we create consistent designs while collaborating with other designers.
There are two methods that designers frequently rely on to accurately space elements on the page. The most common spacing systems are the Hard grid (also called baseline grid) or Soft grid.
Hard grids align content to a fixed vertical grid, and Soft grids define the space between items on the page.
Why use a Hard grid? The argument for using a Hard Grid (8px or 4px) is that by utilizing transparent background boxes, then grouping them with foreground elements; it’s easier to keep track of margin and padding on a per-element basis. We can then snap these containers to the grid like puzzle pieces.
Why use a Soft grid? The argument for using a Soft Grid is that when an interface is developed, programming languages don’t use that kind of grid structure, so the grid is irrelevant. A soft grid is also less constraining for designers and requires less tedium.
I prefer a soft grid because I can adjust the spacing to fit content rather than adjust content to fit spacing guidelines. It’s also a quicker design process and invokes *less* perfectionistic tendencies.
Why design with spacing in increments of 8? Whether it’s a soft grid or a hard grid, it’s standard that designers space elements using 4 or 8 px.
We use magic number 8 because it renders odd numbers properly. As opposed to 5, for example, on a device with a 1.5x resolution, odd numbers won’t render correctly.
Additionally, the vast majority of modern screen dimensions are divisible by 8, making it simple to align our designs appropriately on those devices.
2. How to pick the perfect color palette

Color themes are meant to be harmonious, accessible and help distinguish UI elements and surfaces from one another.
Designers are often reluctant to create a color palette from scratch, but it’s easier than one might think. Here is my 4 step process to consistently create clean and aesthetic color palettes:
- Select a brand color. I start with a primary color that I determine based on the brand, personal preference (if it’s a side project), research, or color psychology.
- Choose system colors. Define a color for various elements like background, text, error, success, and so on.
- Creating a palette from base colors. Once I have selected base colors for the brand and UI, I put the colors into the Google color tool (near the bottom) to get the different shades and tints of that color.
- Ensure accessibility. Web Content Accessibility Guidelines recommend a color contrast ratio of at least 4.5:1 between all text and background. Get the Stark plugin to ensure palettes are accessible (they should be if generated with the Google color tool).
3. How to create type scale guidelines for typography

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.
- 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.
- 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.”
- Avoid jargon. 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.”
- 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.”
- 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.
- 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.
- 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?”
- 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.
- Questions & tasks — 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.
- Ask detailed screening questions 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.
- 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.
- 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.
- 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.
- Organize all screens into sections in Zeplin and the design file.
- Name all artboards sequentially 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:
- Side projects. Side projects are what lead me to discover my interest in product design in the first place. If we’re relying solely on an employer’s design work, then we’re limiting our growth potential. If you have free time on nights and weekends, try dabbling with an idea you’re excited about. Side projects are great for portfolios and show authentic design work without client interference.
- Paying attention. It’s easy to mindlessly use apps or go through digital experiences without giving much thought to them. It’s often the design that goes unnoticed that is the best designs. As designers, we should note the design decisions other more established brands and products are making.
- Interview, even if you’re happy at your job. Interviewing at other companies can reveal a lot about the holes in our knowledge or what skills are currently in demand. Design challenges can also be a great exercise to flex our creative muscles and solve interesting problems.
- Read design system documentation. Reading design documentation from popular design systems is a foolproof way to gain more tactical UI/UX knowledge. Some of my favorite design systems are IBM Carbon, Zendesk Garden, Workday Canvas, Atlassian, and Material.
👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.