{"id":120293,"date":"2023-06-09T16:01:21","date_gmt":"2023-06-09T19:01:21","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/"},"modified":"2023-07-31T15:11:12","modified_gmt":"2023-07-31T18:11:12","slug":"ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/","title":{"rendered":"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho"},"content":{"rendered":"

<\/p>\n

UI UX Design Workflow: Compreendendo o Fluxo de Trabalho<\/h1>\n
O design de interface do usu\u00e1rio (UI) e a experi\u00eancia do usu\u00e1rio (UX) s\u00e3o duas \u00e1reas que se complementam para criar uma experi\u00eancia digital agrad\u00e1vel e eficiente. O UI \u00e9 respons\u00e1vel pela apar\u00eancia visual de um produto digital, enquanto o UX se concentra na funcionalidade e usabilidade. Juntos, eles criam uma experi\u00eancia do usu\u00e1rio completa e satisfat\u00f3ria.<\/p>\n
No entanto, para criar uma experi\u00eancia do usu\u00e1rio eficiente, \u00e9 necess\u00e1rio seguir um fluxo de trabalho bem definido. Neste artigo, vamos explorar o fluxo de trabalho de UI UX Design e como ele pode ajudar a criar produtos digitais de alta qualidade.<\/p>\n

1. Pesquisa e An\u00e1lise<\/a><\/h2>\n
A primeira etapa do fluxo de trabalho de UI UX Design \u00e9 a Pesquisa e An\u00e1lise<\/a>. Nesta fase, \u00e9 importante entender o p\u00fablico-alvo e suas necessidades. Isso pode ser feito por meio de pesquisas de mercado, entrevistas com usu\u00e1rios e an\u00e1lise de concorrentes.<\/p>\n
Algumas das perguntas que podem ser feitas nesta fase incluem:<\/p>\n
\n
Quem \u00e9 o p\u00fablico-alvo do produto?<\/li>\n
Quais s\u00e3o as necessidades e desejos do p\u00fablico-alvo?<\/li>\n
Quais s\u00e3o as tend\u00eancias do mercado?<\/li>\n
Quais s\u00e3o os concorrentes e como eles est\u00e3o abordando o mercado?<\/li>\n<\/ul>\n
2. Wireframing<\/a><\/h2>\n
Ap\u00f3s a Pesquisa e An\u00e1lise<\/a>, \u00e9 hora de criar um wireframe. Um wireframe \u00e9 um esbo\u00e7o b\u00e1sico da interface do usu\u00e1rio, que mostra a estrutura e o layout do produto digital. \u00c9 importante criar um wireframe antes de come\u00e7ar a trabalhar no Design Visual<\/a>, pois isso ajuda a garantir que a estrutura do produto seja s\u00f3lida.<\/p>\n
Algumas das ferramentas que podem ser usadas para criar wireframes incluem:<\/p>\n
\n
Sketch<\/li>\n
Figma<\/li>\n
Adobe XD<\/li>\n<\/ul>\n
3. Design Visual<\/a><\/h2>\n
Depois de criar o wireframe, \u00e9 hora de trabalhar no Design Visual<\/a>. Nesta fase, \u00e9 importante criar uma apar\u00eancia visual atraente e consistente para o produto digital. Isso pode incluir a escolha de cores, tipografia e elementos visuais.<\/p>\n
Algumas das ferramentas que podem ser usadas para criar designs visuais incluem:<\/p>\n
\n
Adobe Photoshop<\/li>\n
Adobe Illustrator<\/li>\n
Sketch<\/li>\n<\/ul>\n
4. Prototipagem<\/a><\/h2>\n
Ap\u00f3s a cria\u00e7\u00e3o do Design Visual<\/a>, \u00e9 hora de criar um prot\u00f3tipo. Um prot\u00f3tipo \u00e9 uma vers\u00e3o interativa do produto digital, que permite testar a funcionalidade e usabilidade. \u00c9 importante criar um prot\u00f3tipo antes de iniciar o Desenvolvimento<\/a>, pois isso ajuda a identificar problemas e fazer ajustes.<\/p>\n
Algumas das ferramentas que podem ser usadas para criar prot\u00f3tipos incluem:<\/p>\n
\n
InVision<\/li>\n
Marvel<\/li>\n
Figma<\/li>\n<\/ul>\n
5. Testes e Feedback<\/a><\/h2>\n
Ap\u00f3s a cria\u00e7\u00e3o do prot\u00f3tipo, \u00e9 hora de testar e receber feedback. Nesta fase, \u00e9 importante testar o produto digital com usu\u00e1rios reais e receber feedback sobre a funcionalidade e usabilidade. Isso pode ajudar a identificar problemas e fazer ajustes antes do lan\u00e7amento.<\/p>\n
Algumas das ferramentas que podem ser usadas para testar e receber feedback incluem:<\/p>\n
\n
UserTesting<\/li>\n
Hotjar<\/li>\n
Google Analytics<\/li>\n<\/ul>\n
6. Desenvolvimento<\/a><\/h2>\n
Ap\u00f3s a conclus\u00e3o das etapas anteriores, \u00e9 hora de iniciar o Desenvolvimento<\/a>. Nesta fase, \u00e9 importante trabalhar em estreita colabora\u00e7\u00e3o com os desenvolvedores para garantir que o produto digital seja desenvolvido de acordo com as especifica\u00e7\u00f5es.<\/p>\n
Algumas das ferramentas que podem ser usadas para o Desenvolvimento<\/a> incluem:<\/p>\n
\n
HTML<\/li>\n
CSS<\/li>\n
JavaScript<\/li>\n<\/ul>\n
Conclus\u00e3o<\/h2>\n
O fluxo de trabalho de UI UX Design \u00e9 uma abordagem sistem\u00e1tica para criar produtos digitais de alta qualidade. Ao seguir este fluxo de trabalho, \u00e9 poss\u00edvel criar uma experi\u00eancia do usu\u00e1rio eficiente e satisfat\u00f3ria. Lembre-se de que a Pesquisa e An\u00e1lise<\/a> s\u00e3o fundamentais para entender o p\u00fablico-alvo e suas necessidades. Al\u00e9m disso, \u00e9 importante criar um wireframe antes de iniciar o Design Visual<\/a>, e um prot\u00f3tipo antes do Desenvolvimento<\/a>. Por fim, teste e receba feedback para garantir que o produto digital atenda \u00e0s expectativas do p\u00fablico-alvo.<\/p>\n
Se voc\u00ea est\u00e1 interessado em aprender mais sobre UI UX Design, a Awari oferece cursos de alta qualidade em design digital. Com a Awari, voc\u00ea pode aprender as habilidades necess\u00e1rias para criar produtos digitais de alta qualidade e se destacar no mercado.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, testing, and development are all essential steps to creating an efficient and satisfying user experience.<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-120293","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\nUI UX Design Workflow: Compreendendo o Fluxo de Trabalho - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-09T19:01:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-31T18:11:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/\",\"name\":\"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"datePublished\":\"2023-06-09T19:01:21+00:00\",\"dateModified\":\"2023-07-31T18:11:12+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, ...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n","yoast_head_json":{"title":"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho - Fluency.io Brasil","description":"Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/","og_locale":"pt_BR","og_type":"article","og_title":"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho - Fluency.io Brasil","og_description":"Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, ...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-06-09T19:01:21+00:00","article_modified_time":"2023-07-31T18:11:12+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/","name":"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"datePublished":"2023-06-09T19:01:21+00:00","dateModified":"2023-07-31T18:11:12+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Learn about the UI UX design workflow, a systematic approach to creating high-quality digital products. Research, wireframing, visual design, prototyping, ...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/ui-ux-design-workflow-compreendendo-o-fluxo-de-trabalho\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"UI UX Design Workflow: Compreendendo o Fluxo de Trabalho"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/120293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=120293"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/120293\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=120293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=120293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=120293"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=120293"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=120293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}