{"id":7664,"date":"2022-11-29T16:24:36","date_gmt":"2022-11-29T16:24:36","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7664"},"modified":"2024-01-16T14:10:14","modified_gmt":"2024-01-16T14:10:14","slug":"graphic-design-to-ui","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/graphic-design-to-ui\/","title":{"rendered":"Transferable skills: Graphic design to UI"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Graphic designers and user interface (UI) designers have lots in common. They both use visual design principles to create visually appealing and creative experiences.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because of this, an increasing number of graphic designers are choosing to level up their existing skillset to forge fulfilling careers from graphic design to UI design\u2014allowing them to benefit from more job opportunities, <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-designer-salary\/\"><span style=\"font-weight: 400;\">higher salaries<\/span><\/a><span style=\"font-weight: 400;\">, and a much more exciting and innovative scope of work.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Luckily, the number of transferable skills between graphic design and UI make the transition an easy one\u2014and if you\u2019re thinking about making the switch, it\u2019s important to get a sense of which skills to highlight as part of your personal brand.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we&#8217;ll explore the differences between graphic design and UI, and lay out the most important transferable soft and hard skills that\u2019ll help you adjust to your new career.\u00a0\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong>What&#8217;s the difference between graphic design and UI design?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">At its core, graphic design is the art of visual communication. The field of <a href=\"https:\/\/webflow.com\/blog\/what-is-graphic-design\" target=\"_blank\" rel=\"noopener\">graphic design<\/a> has evolved over time, but it has roots in the printing trade where designers were responsible for setting type and preparing drawings for presses operators.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A graphic designer will typically focus on things like colour choices, fonts, layout, images, and other static elements that make up the visual identity of a product or brand. They&#8217;re responsible for creating graphics that help tell a brand&#8217;s story visually\u2014and often play with how those graphics interact with one another, both online (i.e., websites or social media graphics) and offline (i.e., print).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This includes:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Logos<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Illustrations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Brochures<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Marketing assets\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advertisements<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Magazines<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Product packaging<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In contrast, <\/span><b>UI design is an exclusively digital discipline<\/b><span style=\"font-weight: 400;\">, focusing solely on the design of digital product interfaces (such as for websites, apps, and software). UI designers create dynamic and responsive prototypes that work across various screens and devices; including animation and motion. They\u2019ll also go further than the interface; creating (and maintaining) brand style guides to ensure consistency across the entire digital product.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, UI designers focus more on <\/span><b>functionality<\/b><span style=\"font-weight: 400;\">: How do people interact with the product? What steps do they take? Is there enough feedback? Do users know where they are in the process at any given moment? The goal here isn&#8217;t just making something aesthetically pleasing, but also helping users seamlessly navigate the digital product as if it\u2019s second nature. You can learn more about <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ui-design\/\"><span style=\"font-weight: 400;\">what UI design is in this guide<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Read next: <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/day-in-the-life-of-a-ui-designer\/\"><span style=\"font-weight: 400;\">What does a day in the life of a UI designer look like?<\/span><\/a><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong>Transferable skills from graphic design to UI design<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Graphic design and UI differ in their purpose, audience, and output\u2014but there are a lot of mutual skills and requirements between the disciplines. Let&#8217;s take a closer look at the hard and soft skills graphic designers can take forward into UI design.\u00a0\u00a0<\/span><\/p>\n<h3><strong>Soft skills<\/strong><\/h3>\n<h4><em><span style=\"font-weight: 400;\">Communication\u00a0<\/span><\/em><\/h4>\n<p><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-and-ui-designers\/\"><span style=\"font-weight: 400;\">UI designers work collaboratively with UX designers<\/span><\/a><span style=\"font-weight: 400;\">, front-end developers, interaction designers, and other stakeholders throughout the business. They also need to justify their design decisions, present their work, and communicate their vision to these stakeholders. As a result, UI designers need exceptional communication skills\u2014which most graphic designers already have in spades, especially those who work regularly with clients, stakeholders, and marketeers.\u00a0<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Creativity<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Creativity, as well as visual storytelling, is a crucial pillar of both graphic design and UI. Graphic designers need to be able to translate (often loose) ideas into beautiful designs that captivate users and hit stakeholder briefs. Similarly, UI designers need to come up with creative ways to balance business goals and user needs; \u2018thinking outside the box\u2019 to help users navigate through the digital product and complete specific actions.\u00a0<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Time management\u00a0<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Graphic designers often see themselves juggling multiple projects\u2014and priorities\u2014at once, working to tight deadlines to deliver high-quality assets (plus time for amends). Good time management is also a critical UI design skill. UI designers need to be able to hit objectives and set out action plans to keep the product <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-design-process\/\"><span style=\"font-weight: 400;\">design process<\/span><\/a><span style=\"font-weight: 400;\"> on-track\u2014especially when working towards a strict product launch date.<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Problem-solving\u00a0<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Graphic designers solve problems every day by interpreting what the client wants, and addressing their goals through design. Similarly, UI designers identify the problem through researching user needs, and helping users achieve their goals efficiently through design. UI designers are notably more committed to problem solving. They\u2019ll test their designs with real users and troubleshoot areas of friction where the design needs to be made clearer.\u00a0<\/span><\/p>\n<h4><span style=\"font-weight: 400;\"><em>Adaptability<\/em>\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Both graphic designers and UI designers need to be adaptable; able to quickly tweak their designs in response to changing briefs or new information. For graphic designers, this might be tweaks in colour or formatting. On the other hand, UI designers are constantly iterating and optimising their interfaces based on evolving user needs. UI designers also need strong documentation skills, so changes can be made without previous iterations being lost.\u00a0<\/span><\/p>\n<h3><strong>Hard skills<\/strong><\/h3>\n<h4><em><span style=\"font-weight: 400;\">Design tools\u00a0<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">There\u2019s a lot of overlap in the tools that graphic and UI designers use\u2014although how they use them might differ. For example, both graphic and UI designers use Sketch, Figma, and Adobe InDesign. But, while graphic designers might use them primarily for font pairings or colour schemes, UI designers would focus more on wireframing and prototyping. Although the uses differ, having a working understanding of at least a few <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-interface-ui-design-tools\/\"><span style=\"font-weight: 400;\">industry-standard design tools<\/span><\/a><span style=\"font-weight: 400;\"> will make for a smoother transition into UI.\u00a0<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Visual hierarchy\u00a0<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Most graphic designers understand visual hierarchy, i.e., how you prioritise the use of colour, typography, imagery, and other elements throughout the designs. In UI design, this is called <\/span><b>information architecture<\/b><span style=\"font-weight: 400;\">, and it\u2019s an important pillar of the discipline. UI designers will create low-fidelity wireframes to determine where each element will go on the interface; using hierarchy to subtly guide the user around the page.\u00a0<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Branding\u00a0<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Graphic designers and UI designers both communicate a brand through design, including its personality, values, goals, and DNA. UI designers create and uphold a brand\u2019s visual identity, and create style guides to ensure that visual identity is communicated consistently throughout the digital product. UI designers are also expected to come up with creative and unique ideas while remaining on-brand.\u00a0<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Visual design<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Graphic designers use colour, typography, and graphics to create beautiful assets. UI designers use colour, typography, and graphics to create beautiful interfaces. Both disciplines require an in-depth understanding of the science of visual design; including colour theory, typesetting, alignment, contrast, and repetition\u00a0in order to create well-balanced designs that are as beautiful as they are functional.\u00a0<\/span><\/p>\n<h4><em><span style=\"font-weight: 400;\">Design strategy<\/span><\/em><\/h4>\n<p><span style=\"font-weight: 400;\">Like graphic designers, UI designers don\u2019t just design; they play a role in ideation and creative direction. Before the product design process kicks off, everyone involved needs a clear strategy\u2014and the digital product needs a visual identity. To help set this strategy, UI designers will lead workshops, research design trends, generate briefs, and set goals.\u00a0<\/span><\/p>\n<h2><strong>How to transition from graphic design to UI design<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">So, now we\u2019ve established the number of transferable skills between graphic design and UI, how do you actually make the switch?<\/span><\/p>\n<h3><strong>Get a professional certificate in UI design<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">As we\u2019ve explored, most graphic designers already have many of the core soft skills and technical abilities needed to succeed in UI design. But there\u2019ll still be some gaps in your knowledge, which you can fill by enrolling in a <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design\"><span style=\"font-weight: 400;\">UI Design Program<\/span><\/a><span style=\"font-weight: 400;\">. Not only will you get a chance to refresh your existing knowledge, you\u2019ll learn how to apply your transferable skills to new, exciting projects\u2014and work with a mentor who\u2019ll help you combine your new skillset with your past experience.\u00a0<\/span><\/p>\n<h3><strong>Showcase your transferable skills\u00a0<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">With so many transferable skills in your arsenal, you\u2019ll want to make sure you\u2019re showcasing them in the best way possible. You can demonstrate these core skills by building an <\/span><b>attention-grabbing UI design portfolio <\/b><span style=\"font-weight: 400;\">that shows off your past projects within the context of your new skills. It\u2019s also important to build a personal brand as an experienced visual designer;\u00a0 that sends the message to prospective employers that you might be new to UI, but you\u2019re not new to design.<\/span><\/p>\n<h3><strong>Leverage your existing network<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Networking is a powerful tool for career-changers, especially for graphic designers transitioning into UI. As a broad discipline, design has an active and supportive global community. From online groups to meet-ups, webinars to forums; you can find like-minded graphic-designers-turned-UI-designers, mentors, and industry experts who might be willing to give you feedback. But unlike beginner UI designers who are transitioning from other fields, you likely already have an existing design network (and a list of satisfied clients) who can help you find work and accelerate your career. So start there!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To learn more about transitioning into UI, check out our blog post on <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/how-long-to-become-ui-designer\/\"><span style=\"font-weight: 400;\">how long it takes to become a UI designer<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h2><strong>Graphic design to UI: Next steps<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Graphic designers have a lot to offer the world of UI design. If you\u2019re a graphic designer, you\u2019ve already:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Learned how to create an engaging visual experience<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Learned how to distil brand guidelines into a suite of coherent designs; and\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Become skilled at balancing multiple goals, needs, and priorities in your day-to-day work<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u2026all of which are vital pillars of UI design!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In other words, you\u2019re on the right track. Now, it\u2019s time to take those skills forward into your career as a talented UI designer.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re unsure of where to start, why not check out our guide to <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ui-design-courses\/\"><span style=\"font-weight: 400;\">the best UI design courses to consider in 2022<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>An increasing number of graphic designers are choosing to level up their existing skillset to forge fulfilling careers in UI design\u2014allowing them to benefit from more job opportunities, higher salaries, and a much more exciting and innovative scope of work.\u00a0<\/p>\n","protected":false},"author":34,"featured_media":7665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[265,267],"tags":[328,333],"class_list":["post-7664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-career","category-ux-career-advice","tag-graphic-design","tag-graphic-design-to-ui-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7664"}],"version-history":[{"count":6,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7664\/revisions"}],"predecessor-version":[{"id":9754,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7664\/revisions\/9754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7665"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}