Improve the UI Skills as a UX Designer

By Mārtiņš Zemlickis

Many UX designers struggle with the visual execution of their ideas. Understanding users and mapping journeys is one thing, but translating those insights into polished, functional interfaces requires a different skill set. The gap between UX thinking and UI execution often determines whether designs actually get built and adopted.

Having worked across enterprise environments and startup contexts, I've seen how strong UI skills can accelerate design impact and improve collaboration with development teams. This isn't about becoming a visual designer—it's about developing the technical and aesthetic capabilities to bring your UX insights to life. For context on how I apply these skills in practice, see my professional background.

Technical Skills Foundation

Strong UI execution starts with mastering the right tools and understanding technical constraints. These aren't just "nice to have" skills—they're essential for creating designs that actually work in production environments.

Design Tools Mastery

Proficiency in tools like Figma (which has a free plan), Sketch (which is Mac-only paid), Penpot (which is free), and others is crucial. These tools are essential for creating wireframes, prototypes, and final designs. But tool mastery goes beyond knowing where buttons are—it's about understanding how to structure files, create reusable components, and maintain design systems.

Responsive Design

Understanding how to design for various screen sizes and devices ensures that your UI is versatile and user-friendly. This means thinking in terms of flexible grids, scalable components, and progressive disclosure. Modern interfaces must work seamlessly across desktop, tablet, and mobile contexts without losing functionality or clarity.

Interaction Design

Understanding how elements and users interact with the interface is essential for creating intuitive and engaging designs. This includes micro-interactions, state changes, loading patterns, and feedback mechanisms. Good interaction design makes interfaces feel responsive and alive, not just static layouts.

Basic Coding Knowledge

While not always necessary, understanding HTML, CSS, and JavaScript can help you better communicate with developers and assess the feasibility of your designs. You don't need to become a developer, but knowing what's technically possible and what's expensive to implement will make your designs more realistic and easier to build.

UI in UX Design Context

UI design isn't separate from UX design—it's how UX insights get expressed visually. Strong UI skills allow you to communicate user needs through visual hierarchy, interaction patterns, and systematic design decisions.

User-Centered Design

UI design is a subset of UX design focused on the look and feel of the product. A well-designed UI ensures that users can interact with the product seamlessly. Every visual decision should support user goals and reduce cognitive load. Beautiful interfaces that confuse users aren't good UI design.

Visual Hierarchy

Good UI design emphasizes important elements and efficiently guides users through the interface. This means understanding how typography, color, spacing, and layout work together to create clear information architecture. Users should immediately understand what's most important and what actions they can take.

Consistency and Standards

A consistent UI with standardized components improves usability and reduces the learning curve for users. This is where design systems become crucial—they ensure that similar interactions behave the same way across different parts of your product. Consistency builds user confidence and reduces cognitive overhead.

Utilize DailyUI Challenges

DailyUI is a platform that sends daily design challenges with different briefs. Completing these tasks helps build a diverse portfolio and enhance design skills. While some dismiss these challenges as superficial, they're actually excellent for developing visual problem-solving skills and exploring different interface patterns.

Structured Practice Benefits

  • Diverse Briefs: Exposure to various design problems helps in thinking creatively and developing problem-solving skills. You'll work on everything from signup forms to complex dashboards, each requiring different approaches.
  • Regular Practice: Consistency is critical. Regularly working on these challenges helps you sharpen your skills progressively. Like any craft, UI design improves with deliberate practice.
  • Time Constraints: The daily format forces you to make decisions quickly and not overthink every pixel. This helps develop design intuition and prevents perfectionism paralysis.

The key is treating these challenges as learning exercises, not portfolio pieces. Focus on solving specific design problems rather than creating pixel-perfect artwork. Use them to experiment with new techniques, explore different styles, and practice fundamental UI principles.

Building Your UI Kit

Starting from scratch and building your UI kit from the ground up helps you understand the foundational principles of UI design. This isn't about reinventing the wheel—it's about understanding how the wheel works so you can use it effectively.

Why Build Your Own Kit

  • Customization: Creating your components allows for personalization and ensures the design aligns with your vision and standards.
  • Efficiency: A well-built UI kit saves time in future projects, ensuring you have ready-to-use components that maintain consistency across designs.
  • Understanding: Building components teaches you about states, variants, and systematic thinking that you miss when using pre-made libraries.

Steps to Build a UI Kit in Figma

  1. Identify Core Components: Buttons, icons, input fields, navigation bars, modals, cards, and other frequently used elements.
  2. Create Base Components: Start with the simplest versions in Figma, focusing on proper structure and naming conventions.
  3. Add Variants and States: Expand components to include different sizes, colors, and interaction states (default, hover, active, disabled).
  4. Test in Context: Use components in various scenarios and gather feedback from real design work.
  5. Iterate and Refine: Adjust based on usability and aesthetic considerations. Components should work in practice, not just look good in isolation.
  6. Document Usage: Create guidelines and best practices for when and how to use each component.
  7. Maintain and Evolve: Regularly update the UI kit as you learn and gather more insights from real projects.

Store documentation together with the components within Figma. This ensures that all the information about using each component is easily accessible and keeps the documentation and components in sync. Ensure the UI kit evolves with design trends and project requirements—it's a living system, not a static artifact.

Why This Matters

Developing strong UI skills as a UX designer creates several practical advantages:

  • Consistency: Ensures a uniform look and feel across all screens and components, reducing user confusion and development time.
  • Efficiency: Saves time in the long run by reusing components and established patterns rather than solving the same problems repeatedly.
  • Scalability: Easy to scale and adapt to different projects or platforms when you have systematic approaches to UI design.
  • Collaboration: Facilitates improved cooperation with other designers and developers, ensuring everyone is on the same page about visual and interaction standards.
  • Career Growth: UX designers who can execute visually compelling interfaces are more valuable to teams and more likely to see their designs actually implemented.

The goal isn't to become a specialist visual designer—it's to become a more complete UX practitioner who can bridge the gap between user insights and visual execution. In many organizations, especially smaller ones, this versatility is essential for getting things done.

Practical Next Steps

By following these approaches, you'll develop a robust foundation of both technical and design skills, enabling you to create effective and aesthetically pleasing user interfaces:

  1. Pick One Tool and Master It: Don't try to learn every design tool. Choose Figma, Sketch, or Penpot and become proficient before expanding.
  2. Start a DailyUI Practice: Commit to at least 30 days of daily challenges. Focus on learning, not perfection.
  3. Analyze Existing Designs: Study interfaces you admire. Break down how they achieve visual hierarchy, consistency, and usability.
  4. Build One Component at a Time: Start with buttons, then move to forms, then navigation. Build your library gradually.
  5. Get Feedback on Visual Work: Share UI designs with other designers and developers. Learn what works in practice, not just theory.

The key is consistent practice combined with real project application. UI skills improve through doing, not just studying. Start with your next project and apply these principles immediately rather than waiting until you feel "ready."