Transitioning from Graphic Design to UI Design

Graphic design and UI design are distinct fields with different requirements, but many people mistakenly believe they can transition from one to the other without much effort. While your skills as a graphic designer give you an edge, there is still a lot to learn to improve your skills and become a proficient UI designer.

Graphic Design is the art and practice of planning and projecting ideas and experiences with visual and textual content. It typically involves creating visuals for branding, advertising, print, and digital media. Graphic designers use typography, images, color, and layout to communicate messages that attract and engage an audience, often focusing on aesthetics and visual appeal.

UI (User Interface) Design, on the other hand, focuses on designing interactive interfaces for software and digital devices, such as websites and mobile apps. The primary goal of UI design is to create interfaces that are easy to use and enhance the user's experience. This involves designing layouts, interactive elements, and ensuring that the design is intuitive and accessible. UI design is more concerned with the functionality and usability of the design rather than just its visual appeal.

Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

Personally, I was a graphic designer before deciding to transition into UI design. Unfortunately, I think I got off on the wrong foot, and that's why I'm making this post to help those who might be on the same path avoid the mistakes I made. Over the years, I've observed others making the same mistakes without knowing. Below are some of those mistakes:

• Thinking UI design is just another variation of Graphic Design: As I've already established, these two design fields are not the same, nor is one a variation of the other. Graphic designers use design elements to create designs that attract customers or are aesthetically pleasing to the audience, whereas UI designers create interfaces that help users interact seamlessly with a product.
• Jumping in without understanding what it entails: Most newbies don't really know what UI design is about or what it entails. They just see it as an avenue to display their creative skills. UI design doesn't only entail the colorful design aspect but is rather divided into stages, including wireframes (low-fidelity designs), mockups (high-fidelity designs involving colors, typography, etc.), and prototyping (interactive flows of the entire design). All these don't exist in graphic design and revolve around a deep understanding of the users.
• Knowledge of user experience: UI design is greatly influenced by a deep understanding of the users and how they interact with and experience a product or platform. This means the designs are tailored to users based on what would suit them, unlike graphic design, which is mostly influenced by trends, pleasing colors, and aesthetics to capture the attention of the preferred customers.
• Focusing on aesthetics: Unlike graphic design, which requires a lot of aesthetics to be visually appealing, UI design is more concerned with usability and functionality rather than visual appeal.
• Complicating designs: Newbies tend to add a lot of unnecessary elements to their UIs, just like they do for graphic design, to complement the designs. Unfortunately, this practice tends to complicate the UI for users. In UI design, simplicity is key. As Dieter Rams once said, "Good design is as little design as possible."
• Platform knowledge: Graphic designers mostly use platforms like Adobe Photoshop, Adobe Illustrator, Canva, CorelDRAW, and many more. The most used platforms by UI designers are Figma, Adobe XD, and Sketch. Though the tools used on these platforms are similar, a deep understanding of the platform would greatly improve workflow and work quality while saving time. Most newbies just use their knowledge from other platforms and don't make adequate use of the appropriate platforms.
• Typography choices: Most communication in design is done through text. In graphic design, decorative, stylized, and handwritten fonts are used to draw attention and show contrast between texts. However, in UI design, readability takes precedence. Though typography can be used for aesthetics in some instances, legibility should be the primary consideration in choosing a typeface for a UI design. Unfortunately, most beginners don't prioritize this.
• Designing for accessibility: When transitioning from graphic design to UI design, I didn't realize that UI designs must adhere to accessibility standards. These guidelines ensure that a design is usable by a wide range of people, including those with disabilities. These standards include color contrast, font size, scalable text, consistent navigation, and more. UI designers cannot use colors, fonts, and other design elements arbitrarily; they must adhere to standard practices.
• Appropriate use of grid and page layout: Page layout and the use of grids exist in both graphic design and UI design, but their application varies. In graphic design, using random page layouts and grids might work, but in UI design, what and who you're designing for determines the page layout you should use. Also, the use of grids is very important because it ensures consistency in the interfaces created and keeps the work well organized.
• Collaboration: Most graphic designers are lone wolves, which isn't necessarily bad in that field. It allows them to focus and deliver on time. However, in UI design, it is almost impossible to work alone, as you have to collaborate with developers, product managers, team leads, and other stakeholders. Due to this, graphic designers often struggle when transitioning to UI design, as they now have to collaborate with other people.

A user interface is like a joke. If you have to explain it, it's not that good. — Martin LeBlanc

With the aforementioned points, one can realize that there are quite a number of differences between UI designers and graphic designers. Therefore, before you transition from graphic design to UI design, it's important to equip yourself with information and best practices to thrive in this field. Here are some practices I would recommend to fast-track your transition:

• Understand what UI design entails: Before you transition, it would be helpful to read, watch videos, or listen to other UI designers to understand what UI design is all about, the best practices, and the differences. In my case, I read quite a number of articles and books recommended by friends who were already in the field. It's advisable that you don't jump in blindly, so take your time to equip yourself with enough information about the field.
• Come in as a beginner: As an already established "designer" transitioning from one design field to another, there's a tendency to think that you've got it all wrapped up. That might not always be the case. It might be in your best interest to start from the beginning and climb your way up. This might not sound pleasant, but it's a better way to build. Start by taking beginner courses, practicing, and building yourself in the field. Don't rush to take on projects to showcase your skills; instead, build a strong foundation. Some of the things you learn might be familiar, but that doesn't mean you know everything there is to know.
• Acquaint yourself with the appropriate platforms: Take your time to understand the new design platforms you will be using. Learn the tools and techniques. I tend to use Figma for most of my designs now, even though I started with Adobe XD when I first began UI design. I can tell you for a fact that there are ways to use these tools to achieve faster results.
• Understand best practices: There are things that make UI designers different from graphic designers; learn and practice them. Some of these practices include:
• User-centered design: Always keep the user in mind; their needs come first in the design process.
• Consistency: Maintain consistency in colors, fonts, navigation elements, and all other design elements.
• Responsive design: Ensure that your designs work well on various devices and screens. This can be achieved by using flexible grids, scalable images, and media queries to create a responsive layout.
• Simplicity and clarity: Always keep your designs as simple as possible. Eliminate unnecessary design elements and focus on essential features.
• Accessibility and inclusiveness: Always consider the needs of users with disabilities in your designs. Follow accessibility guidelines to make your interface usable by many people.

Learn and speak the language: There are terms and concepts specific to the UI design field that help in easy communication among colleagues and in teams. These terms will become an integral part of your work, so it's best to learn and start using them. Sometimes I intentionally use those terms when I communicate with other UI designers around others who don't understand them; it's just fun. Here are some of them:

• Wireframe: A basic visual guide that represents the skeletal framework of a user interface. It outlines the layout and structure without focusing on design details.
• Mockup: A high-fidelity design that shows how the final interface will look, including colors, typography, and images.
• Prototype: An interactive model of the UI that allows designers and stakeholders to test and experience the interface's functionality and flow before development.
• User Flow: The path a user takes to complete a task within the application. It helps designers understand how users will navigate through the interface.
• Persona: A fictional character that represents a user type based on user research. Personas help designers empathize with and design for their target audience.
• Usability Testing: A method used to evaluate a product by testing it with real users. Observing how users interact with the interface helps identify usability issues.
• Accessibility: Designing interfaces that can be used by people with various disabilities. This includes considerations for visual, auditory, motor, and cognitive impairments.