close
Shot by

What is UI Design?

At it’s basic level, UI Design is the visual elements that make up a digital product or experience. This includes the design of screens, buttons, icons, images, text, and all other visual elements a user will see and interact with.

Sounds pretty straight forward, right? Well, even though UI (or User Interface) has increasingly become a widespread term over the years, it’s seemingly common for different companies and designers to approach UI Design in varying ways. As it turns out, there’s much more to designing for User Interfaces than one might think.

In hopes of getting a clearer picture, we asked 8 different UI Designers from different design teams ranging from small design studios to full-on creative agencies to describe what they do as a UI Designer and how their respective teams approach UI Design in their day-to-day.

1. Obys Agency

Obys is a creative digital design agency focusing on UI/UX Design, Branding, and Interaction Design. If you’re not familiar with their work already, make sure to check out their crazy cool showreel here. Founder and Art Director Viacheslav Olianishyn shares how the team at Obys defines UI Design and why it’s indispensable to their work:

  1. Vear website animation app black design fashion grid helvetica interaction knife logo minimal online site store swiss typography ui ux web website
  2. ZOLDY Webshop black design helvetica jewelery minimal modern pink product swiss ui ux webshop
  3. Africa africa helvetica interface obys photography search travel ui ux

“Firstly, UI Design is a form of Graphic Design. It works within the principles of Graphic Design in terms of grid, composition techniques, color, typography, and so on. UI Design is not only the appearance of a product and it’s aesthetics, but it’s also a product’s character and emotion.

“At Obys agency, we pay special attention to UI in order to create a visually unique design. Our team always creates mood boards before the visual design stage where we take inspiration from nature, architecture, and other types of design—but we never include examples of other websites and applications in the mood board. We don’t quite agree that the main task of a design is to solve problems. We believe this idea is an axiom and nothing else. Visual design and creative solutions help products to stand out against other brands that might purely focus on solving problems. UI Design is a friend that helps make the online world more beautiful and user-lovable.”


2. Mossio

Mossio is a creative agency based in Tampa, Florida on a mission to create brands, experiences, and interfaces that people love. Head of Design at Mossio Corey Haggard shares what UI Design means to their team:

  1. Harmony app application clean design home homepage interface landing landing page marketing site typography ui user interface website wordpress
  2. Wyeworks Blog blog branding clean design home homepage interface landing landing page marketing site ui user interface ux website wordpress wordpress blog wordpress theme
  3. Explore Colorado clean design interaction interface landing page travel ui ux web web design website

“To us, UI Design is more than just pretty visuals and more than just capability. It’s about combining exceptional strategy and compelling visual cue points to solve problems. It’s about making the complex simple through pixels, and focusing solely on user needs. This core philosophy is at the center stage of every User Interface we design. We are strong believers that a UI Design system should be directly reflective of the brand’s core values and qualities. This helps build lasting relationships with the user base of the product or service. We’re visual creatures by nature, and UI Design at its core drives us to interact with products, and if done correctly, it builds credibility between brands and their audiences.”


3. Brightscout

Brightscout is a Product studio founded in Austin, Texas. They design and develop beautiful digital products that have a lasting impact on businesses. Brightscout Creative Director Charles Haggas shares how their team defines UI and how it’s structured into their projects:

  1. Tipe Brand Refesh branding branding design purple purple gradient web design website
  2. dotCMS Home Page app code customer data device illustration isometric ui userinterface ux vector website
  3. Tipe Login V2 astronaut cat galaxy illustration landing login mars monitor moon register sign in signin signup space spaceship technician

“At Brightscout, we believe that “people buy brands, they don’t buy products.” That’s why we feel it’s so critical for our client’s success that we build highly polished interfaces that build irrational loyalty among their customers. If you can hang up an app interface on the wall as art, we’ve done our job! But, it’s not just about building something beautiful to look at. We’re very strategic in our design decisions and very aware that the product UI we build should be a logical extension of the client’s brand. Every visual design decision is made with specific intent. Everything down to kerning and capitalization is considered and how it communicates the essence of the brand.

“Typically, a project consists of a Creative Director that oversees the project plan, strategy, and creative direction and two or more senior design contributors that we feel are a good fit for the client. We typically have a mix of design contributors in charge of UI/UX and design contributors in charge of illustrations and iconography.”


4. MakeReign

MakeReign is a digital design studio based in Cape Town, South Africa. Creative Director Matt Thompson explains how UI is all about the details and why it connects strongly to UX:

  1. Shot Link
  2. WeThinkCode interface ui ux web
  3. Kith x CocaCola design details ecommerce pdp product shopping typography ui user interface ux web

“At MakeReign, the line between a UX and UI designer is blurred, as we take on multiple roles on any given project. Design is first and foremost about solving problems then we make it look damn good. Design has evolved—it’s no longer enough to only understand the user, it’s important to understand the intricacies of the product and the needs of the company we’re working with too. Meaning as designers, we need an extensive toolkit that brings business and product strategy to strong creative executions that drive results that matter.

“Typically on the UI side of the job, we focus on how the product looks. We typically work on the creation of a living design language through a style guide or design system that adapts as a product changes and is iterated on over time. A strong designer makes sure there is consistency in the UI elements used across the product and takes into consideration all interactive states of those elements. It’s important to pay attention to the small details and to aim for pixel-perfection here, whilst keeping in mind the product’s functionality and ease of use.”


5. Dogstudio

Dogstudio is an award-winning design and technology firm crafting beautiful products. Their Senior Designer Loïc Leser tells us about his role and how UI plays a part in it:

  1. Kikk Festival 2018 - Homepage blue colors design festival illustration kikk webdesign website
  2. Shot Link
  3. Mary - Homepage chocolate dogstudio layout luxury mary product webdesign website white

“At Dogstudio, we’re convinced that teamwork’s the only way. My role as a team member is to bring my own experience and vision to my other teammates in order to find appropriate solutions. Meaning: thousands of micro-decisions during the project. Now as a Senior Designer, my own role is to provide an appropriate, but exciting look and feel, based on the needs and goals of each project. The visual design is the first visible part of a website, and we all know that first very impression is important. You’ve only got a few shots at leaving a mark (and often just one). Good UI will provide the desire to discover the website, but will also facilitate engagement and conversion.

“My daily work consists of playing with typography, color combinations, shapes, pictures, grids, and more in order to provide (hopefully most of the time) relevant & shiny interfaces. The best part of my work is most certainly when I start a new project with a discovery phase. Discovery allows me to conceptualize, search for inspiration, and bring to life my own vision of the visual side of the project. I also really love this phase because it’s the perfect opportunity to challenge myself, to find new techniques, test new styles, etc.”


6. EL Passion

EL Passion is full-service creative agency covering all aspects of a project from concept and strategy, UI/UX, to development. Product Designer Mateusz Koziorowski shares where UI Design falls into their process and why it can be one of the most challenging aspects of a project:

  1. Hotjar Mobile App Concept analytics app chart dashboard heatmap hotjar mobile red traffic
  2. Shot Link
  3. Qwick Platform - Landing Page dashboard desktop education gantt chart landing page milestones one pager project management task management ui web app

“For me, the UI Design process is about translating functional requirements into a final look & feel. Here at El Passion, UI Design is the last step in our creative process but considered to be one of the most important. With each project, we want our visuals to not only to stand out from the crowd but also correspond with the brand identity and fit the end user’s expectations. Creating a UI is very challenging because it has to be intuitive for the end-user. This means that testing is an integral part of our UI design process.

“We also always make sure that every single project we create is possible to develop. All of the UI Designers at our software house have vast front-end knowledge. Understanding the limitations and restrictions is especially crucial when designing native apps because small changes can make huge cost differences.”


7. BrandBox

BrandBox is a digital creative agency based in Buenos Aires and Miami. They focus on web and mobile UI/UX design for startups and other agencies. Founder and Design Director Mariano Sanchez explains what UI Design means for his team below:

  1. Neon slider #1 colorfull mondrianizm neon slider style ui uidesign ux uxdesign
  2. Xplore slider #2 color ui landscapes mondrianizm scenery uidesign ux uxdesign
  3. Houses Slider #1 blue colors design houses marble minimalist mondrianizm ui uidesign ux uxdesign

“In recent years, design has evolved in a surprising way together with the tools and forms used to work on a project. UI and UX play a fundamental role here. When we start designing the UI of a product, we take into account everything that we’ve learned during the UX process, but also adapt the style to the corporate identity of the client. User Interface is the ‘look & feel’ of the product with the structure and interaction of the elements of the interface. In other words, a good UI is an instrument to support a good UX.

“Important aspects of UI design we need to consider are attractiveness and clean design (contents are well organized so as not to be overwhelming or boring), branding (use of colors, typography, and aesthetics so the brand is recognizable), images, (think about the function we want the images to fulfill at all times), and contents (visually order the different content so the user can find what they need in a simple way without forcing them to read the rest).

“Our workflow for UI Design consists of wireframing, designing, then prototyping. Once our workflow for the UI is completed, the design is passed along to our developers for testing, uploading, and subsequent maintenance. Our main objective when designing user interfaces is to communicate better with fewer elements.”


8. Leo Natsume

Leo Natsume works as a UI /UX designer for Grupo RBS of Brazil and below explains how UI is all about experimenting and trying to things:

  1. Atomic DNA Manifesto - Principle 03 app character design futuristic gradient illustration interface minimalism ui ux web
  2. Atomic DNA Manifesto - Introduction app character creative design gradient illustration interface minimalism ui ux vector web
  3. Atomic DNA Manifesto - Principle 06 app brand character creative design flat futurism illustration interface minimalism ui ux vector web

“One of my responsibilities as a Creative Designer is to work with UI Design, and I believe it is important to master the Visual Design languages and their principles very well. I work as a UI/UX designer and whenever it’s possible I take the time to experiment with minimalist elements, colors, whitespace, etc. Experimentation in UI Design is the key to bringing new ideas and solutions to your project.

“UI can be experimental (artistic/conceptual), but also needs to be associated with the Digital Product that is being developed and meet usability needs, while also collaborating in the problem-solving process.”


These perspectives help us to conclude that UI design closely ties into many other aspects of a project lifecycle—including branding, UX, and also development. With that being said, UI design tends to be an extremely collaborative process ensuring not only that a product is aesthetically pleasing, but also highly functional, recognizable to the brand, and can be built out by developers without any issues.

Thank you to all of the teams who contributed! If you haven’t already, be sure to check out What is UX Design next to learn how different teams are defining User Experience.

Find more Updates stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next