{"id":7590,"date":"2022-11-17T16:44:21","date_gmt":"2022-11-17T16:44:21","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7590"},"modified":"2024-08-09T12:17:14","modified_gmt":"2024-08-09T12:17:14","slug":"day-in-the-life-of-a-ui-designer","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/day-in-the-life-of-a-ui-designer\/","title":{"rendered":"What does a day in the life of a UI Designer look like?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">User interface (UI) designers enjoy a varied and creative role. They collaborate closely with different stakeholders to solve real user problems, and they ensure that digital products are accessible, beautiful, and user-friendly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But how does this translate into day-to-day projects and tasks? What is a typical day in the life of a UI designer?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We break it down in this guide, explaining:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-does-a-ui-designer-do\"><span style=\"font-weight: 400;\">What does a user interface (UI) designer do?\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#day-in-the-life-of-a-ui-designer\"><span style=\"font-weight: 400;\">A day in the life of a UI designer: What are their main tasks, responsibilities, and \u201cto do\u201ds?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#an-example\"><span style=\"font-weight: 400;\">What does a day in the life of a UI designer look like? An example<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#get-started-in-ui-design\"><span style=\"font-weight: 400;\">How to get started in UI design<\/span><\/a><\/li>\n<\/ul>\n<div class=\"embed-yt ratio ratio-16x9\"><iframe loading=\"lazy\" title=\"What is UI Design?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/YWzY_ZH0JyE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">If you\u2019re eternally curious about what UI designers <\/span><i><span style=\"font-weight: 400;\">actually <\/span><\/i><span style=\"font-weight: 400;\">do all day, look no further. All will be revealed in this post.\u00a0<\/span><\/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&utm_medium=blog_panel_text&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 id=\"what-does-a-ui-designer-do\"><strong>What does a user interface (UI) designer do? The role in a nutshell<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">UI designers are an integral member of the design team\u2014and they have an important role to play when it comes to creating successful, user-friendly websites and apps. In broad terms, they are responsible for ensuring that the product interface looks great, feels easy to use, and functions in a certain way when a user interacts with it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The key word here is \u2018product interface.\u2019 The interface is the surface through which an end user (like you or me) interacts with a digital product (like a website or app). It\u2019s all the screens, buttons, icons, colours and images you see or encounter\u2014and, in combination, it\u2019s the general look and feel that the product embodies.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll find a more in-depth explanation in these guides: <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ui-design\/\"><span style=\"font-weight: 400;\">What is UI design?<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-does-a-ui-designer-do\/\"><span style=\"font-weight: 400;\">What does a UI designer do?<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, we\u2019ll outline the main tasks and responsibilities that typically crop up throughout the UI designer\u2019s working day.<\/span><\/p>\n<h2 id=\"day-in-the-life-of-a-ui-designer\"><strong>A day in the life of a UI designer: Main tasks, responsibilities and \u201cto-do\u201ds<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">A day in the life of a UI designer might include any of the following tasks:<\/span><\/p>\n<ul>\n<li><b>Conducting competitor research<\/b><span style=\"font-weight: 400;\">. When designing a product interface, it\u2019s important to understand how competitor products look, feel, and function. This enables the UI designer to design in a way that\u2019s familiar to the user, thus ensuring that the product is easy to learn and navigate. <\/span><\/li>\n<li aria-level=\"1\"><b>Collaborating with the UX designer on user research. <\/b><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-user-research\/\"><span style=\"font-weight: 400;\">User research<\/span><\/a><span style=\"font-weight: 400;\"> is typically the domain of the <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-does-a-ux-designer-do\/\"><span style=\"font-weight: 400;\">UX designer<\/span><\/a><span style=\"font-weight: 400;\">. But, depending on the size and setup of the team, the UI designer might help out. At the very least, they will spend time familiarising themselves with the insights uncovered during user research. This helps them to understand the end user\u2019s needs and goals, and generally to understand who they\u2019re designing for. <\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Designing the product\u2019s interface and various UI elements. <\/b><span style=\"font-weight: 400;\">This includes everything from making decisions about colours and typography to designing logos, icons, buttons, and menus (to name a few), and selecting or designing custom imagery. <\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Designing and defining the interactive properties of the interface. <\/b><span style=\"font-weight: 400;\">UI design isn\u2019t static; the user must be able to transition between different pages and screens, and to trigger certain actions when they click on different UI elements. For example, if you click a \u201cload more\u201d button on an e-commerce website, you expect more items to appear. The <a href=\"https:\/\/www.adzuna.com\/ui-designer\/what-does-a-ui-designer-do\" target=\"_blank\" rel=\"noopener\">UI designer takes care<\/a> of all these different motions and interactive aspects of the interface. <\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Creating wireframes and prototypes. <\/b><span style=\"font-weight: 400;\">These are some of the most important deliverables that the UI designer creates. <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-wireframing\/\"><span style=\"font-weight: 400;\">Wireframes<\/span><\/a><span style=\"font-weight: 400;\"> depict the layout of each screen, showing where each element is positioned. <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/prototyping-guide\/\"><span style=\"font-weight: 400;\">Prototypes<\/span><\/a><span style=\"font-weight: 400;\"> simulate how the final product will look and function, communicating not only the design of each individual screen, but also how each of these screens connect to each other.\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s not an exhaustive list. UI designers may also have a hand in creating and maintaining a UI style guide, helping to run <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/why-ux-testing-is-so-important\/\"><span style=\"font-weight: 400;\">usability testing sessions<\/span><\/a><span style=\"font-weight: 400;\">, leading (or participating in) ideation sessions and workshops, taking care of documentation\u2014and more. It all depends on the exact nature of the role and how the team and company are set up.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now we know what a UI designer does and their main areas of responsibility, let\u2019s explore what a typical day in the life of a UI designer might look like.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-content-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\/content-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN CONTENT DESIGN]<\/p>\n                    <span>Take our Professional Certificate in Content Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"an-example\"><strong>What does a day in the life of a UI designer look like? An example<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">A day in the life of a UI designer typically involves various meetings and workshops, collaboration with key stakeholders (such as UX designers and developers), and plenty of hands-on design work.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s step into the shoes of a UI designer and map out how their day might look. Ready to get into character?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Imagine you\u2019re working as the only UI designer on a small product team at a startup. In collaboration with your colleague, a UX designer, you\u2019re responsible for the design of a new fitness app. Through the app, users can access on-demand classes (such as yoga, pilates, and zumba), tap into different training programs (such as couch to 5k or a half-marathon training plan), and connect with other fitness enthusiasts in their local area. The app was launched just recently, so new features are being added all the time. There\u2019s also lots of work going on to improve the current designs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how your typical working day might take shape.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><strong>Morning:<\/strong><\/span><em><span style=\"font-weight: 400;\"> Check your emails, meet with the UX designer, and work on product wireframes<\/span><\/em><\/h3>\n<p><b>09.30am: <\/b><span style=\"font-weight: 400;\">Coffee in hand, you get settled at your desk and log onto your computer. You like to spend the first portion of the morning responding to emails and Slack messages, and running through your meetings and tasks for the day.\u00a0<\/span><\/p>\n<p><b>10am: <\/b><span style=\"font-weight: 400;\">First on your agenda is a meeting with your colleague, the in-house UX designer. You work closely together on the design of the product, so it\u2019s important to check in regularly. You can learn more about <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-and-ui-designers\/\"><span style=\"font-weight: 400;\">how UX and UI designers work together here<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The purpose of today\u2019s meeting is to go over the status of your current project: designing a new feature for the fitness app. The UX designer shares their low-fidelity wireframes with you, explaining the barebones blueprint of how the new feature will work. Your task for today will be adding the first visual details to those wireframes. Once you\u2019ve finished talking wireframes, you end the meeting by discussing and exchanging ideas for tomorrow\u2019s workshop (more on that later!)<\/span><\/p>\n<p><b>10.45am: <\/b><span style=\"font-weight: 400;\">Meetings are thirsty work! You take 15 minutes for a coffee break.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><b>11am: <\/b><span style=\"font-weight: 400;\">Now for some hands-on UI design work. As already mentioned, you\u2019re going to take existing low-fidelity wireframes and turn them into high-fidelity wireframes. In other words: you\u2019re going to fill in the visual details, turning grey and white blueprints into something that more closely resembles how the final designs will look.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You open Figma (your <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-interface-ui-design-tools\/\"><span style=\"font-weight: 400;\">UI design tool<\/span><\/a><span style=\"font-weight: 400;\"> of choice) and access the files containing your low-fi wireframes. Bit by bit, you replace placeholders with actual visual content. You start by copying the brand logo (which you designed from scratch in Adobe Illustrator, another popular design tool) into Figma and resizing it. Then you add images\u2014in this case, photos taken from a professional shoot\u2014and adjust their size and position accordingly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also add text, swapping placeholder lines for actual words. The copy for the app has been written by a professional <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ux-writing\/\"><span style=\"font-weight: 400;\">UX writer<\/span><\/a><span style=\"font-weight: 400;\">, so you paste it in and adjust the font so that it\u2019s consistent with brand guidelines. Where text is placed over images, you spend some time tweaking and adjusting to ensure that there\u2019s plenty of contrast between them. This is crucial for making sure that the text is easily legible.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After a good few hours in Figma, you\u2019ve worked some impressive UI magic! Your previously bare wireframes now look like actual app screens, full of text, imagery, and colour.\u00a0<\/span><\/p>\n<p><b>1pm: <\/b><span style=\"font-weight: 400;\">That was quite the productive morning! Time for lunch.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><strong>Afternoon:<\/strong><\/span> <em><span style=\"font-weight: 400;\">Continue with wireframes and work on your UI style guide<\/span><\/em><\/h3>\n<p><b>2pm: <\/b><span style=\"font-weight: 400;\">After a good lunch, you\u2019re ready to pick up where you left off in Figma. You\u2019ve still got some wireframes in their low-fi form, so you continue with your transformation into high-fidelity. You listen to one of your <\/span><a href=\"https:\/\/fivedottwelve.com\/blog\/17-amazing-ui-ux-podcasts-to-help-you-be-a-better-designer\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">favourite design podcasts<\/span><\/a><span style=\"font-weight: 400;\"> as you go.\u00a0<\/span><\/p>\n<p><b>3.30pm: <\/b><span style=\"font-weight: 400;\">As you\u2019re finishing up, your UX designer colleague pops over for an impromptu catch-up. You show them your work so far and note down some helpful feedback.\u00a0<\/span><\/p>\n<p><b>3.45pm: <\/b><span style=\"font-weight: 400;\">Wireframing done, it\u2019s onto your next task: Working on the <\/span><a href=\"https:\/\/xd.adobe.com\/ideas\/process\/ui-design\/ui-style-guide-template\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">UI style guide<\/span><\/a><span style=\"font-weight: 400;\">. As the sole UI designer in the company, you\u2019re in charge of developing, documenting, and maintaining guidelines and best practices for everything regarding the product\u2019s UI. This includes guidelines for things like typography, colour palettes, and standardised components (to name just a few) which should be used consistently throughout the product.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the moment, your UI style guide is in the very early stages; you\u2019re typing up all your initial thoughts in a Google Doc and figuring out the best way to structure and present your style guide when it\u2019s ready.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><strong>End of the day:<\/strong> <em>Wrapping up and prepping for tomorrow\u2019s workshop<\/em><\/span><\/h3>\n<p><b>5pm: <\/b><span style=\"font-weight: 400;\">Having made considerable progress with your wireframes and UI style guide, you\u2019re ready to start winding down. You spend the last half hour of the day preparing for tomorrow. You\u2019ve been invited to a retrospective workshop with the product team, where you\u2019ll review your last project and come up with ways to improve any not-so-optimal processes. You jot down some thoughts and ideas and put them aside for tomorrow.\u00a0<\/span><\/p>\n<p><b>5.45pm: <\/b><span style=\"font-weight: 400;\">And that\u2019s a wrap! With one last glance at your inbox, you\u2019re ready to log off and call it a day.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s just one example of how a UI designer\u2019s day might look. Bear in mind that the role of the UI designer\u2014and the exact tasks they work on\u2014will vary depending on the type and size of the company, the maturity of the product, as well as the UI designer\u2019s own level of experience and expertise.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Still, that should give you some insight into what you can expect from a career in the field. And, if you like what you\u2019ve read so far, you might now be wondering: How can I become a UI designer?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s finish off with some helpful tips.\u00a0<\/span><\/p>\n<h2 id=\"get-started-in-ui-design\"><strong>How to get started in UI design<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The first step towards a career in UI design is to learn the fundamental UI design theories, principles, and hands-on skills. If you\u2019re starting from scratch, it\u2019s worth taking a professional course\u2014this will ensure that you\u2019re covering all the essentials and getting guidance and feedback from industry experts. From there, you\u2019ll <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/how-to-create-a-ux-portfolio-from-scratch-your-step-by-step-guide\/\"><span style=\"font-weight: 400;\">build your design portfolio<\/span><\/a><span style=\"font-weight: 400;\">, write your <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-designer-cv-template\/\"><span style=\"font-weight: 400;\">UI designer CV<\/span><\/a><span style=\"font-weight: 400;\">, start networking in the field, and ultimately apply for your first UI design role.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But all in good time! You\u2019ve probably got some questions first\u2014like <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-designer-salary\/\"><span style=\"font-weight: 400;\">how much do UI designers earn<\/span><\/a><span style=\"font-weight: 400;\">, and <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/how-long-to-become-ui-designer\/\"><span style=\"font-weight: 400;\">how long does it actually take to become a UI designer?<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Already clued up and keen to get started? Go straight to <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ui-design-courses\/\"><span style=\"font-weight: 400;\">this selection of the best UI design courses<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you curious about what it\u2019s like to work as a UI designer? Here\u2019s an example of how a typical day might look, including the main tasks and \u201cto do\u201ds that UI designers are responsible for. <\/p>\n","protected":false},"author":22,"featured_media":7595,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[266,265],"tags":[300],"class_list":["post-7590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-breaking-into-ux","category-career","tag-ui-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7590","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\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7590"}],"version-history":[{"count":12,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7590\/revisions"}],"predecessor-version":[{"id":10648,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7590\/revisions\/10648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7595"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}