{"id":10284,"date":"2020-05-04T10:19:46","date_gmt":"2020-05-04T13:19:46","guid":{"rendered":"https:\/\/novo.siteup.dev\/?p=10284"},"modified":"2024-01-23T18:09:01","modified_gmt":"2024-01-23T21:09:01","slug":"web-designer","status":"publish","type":"post","link":"https:\/\/novo.siteup.dev\/en\/web-designer\/","title":{"rendered":"Web Designer X Desenvolvedor Web: saiba as diferen\u00e7as"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">\u00c9 f\u00e1cil para as pessoas olharem para os sites hoje e pensarem: &#8220;Qualquer um pode criar isso&#8221;. Gra\u00e7as a sistemas de gerenciamento de conte\u00fado como o WordPress, al\u00e9m de temas e plugins pr\u00e9-codificados, algumas pessoas podem.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mas o fato \u00e9 que isso exige uma combina\u00e7\u00e3o de fortes habilidades de codifica\u00e7\u00e3o e design inteligente para criar um site que as pessoas desejam visitar, comprar, assinar e assim por diante<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Isso torna os web designers e desenvolvedores web indispens\u00e1veis \u200b\u200batualmente.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea est\u00e1 pensando em criar sites para ganhar a vida, \u00e9 importante descobrir qual dessas fun\u00e7\u00f5es voc\u00ea deseja fazer. Isso facilitar\u00e1 muito mais o direcionamento de sua carreira, treinamento e posicionamento.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por exemplo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Voc\u00ea prefere escrever um c\u00f3digo que resulte em uma funcionalidade de alto desempenho e recursos inovadores que tornam os sites interativos?<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ou voc\u00ea prefere criar caminhos bonitos e f\u00e1ceis de usar que levem o p\u00fablico-alvo diretamente para a solu\u00e7\u00e3o que eles procuram?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Esses s\u00e3o os tipos de coisas que voc\u00ea precisa considerar ao avaliar as op\u00e7\u00f5es.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hoje, examinaremos as principais diferen\u00e7as entre um web designer e desenvolvedor web e forneceremos respostas para as perguntas comuns sobre o que cada um faz.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"qual-e-a-diferenca-entre-web-designers-e-desenvolvedores-web\"><span style=\"font-weight: 400;\">Qual \u00e9 a diferen\u00e7a entre web designers e desenvolvedores web?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">\u00c9 f\u00e1cil misturar web designers e desenvolvedores. Ambos ajudam a criar sites, mas est\u00e3o envolvidos em \u00e1reas muito diferentes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Simplificando:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Os web designers decidem a apar\u00eancia geral de um site.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Os desenvolvedores web transformam essa vis\u00e3o em um site totalmente funcional.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Os desenvolvedores constroem a estrutura principal de um site usando linguagens de codifica\u00e7\u00e3o, enquanto os designers s\u00e3o mais criativos visualmente e focados no usu\u00e1rio. Os desenvolvedores usam seus conhecimentos de programa\u00e7\u00e3o para dar vida \u00e0 vis\u00e3o criativa do designer. Pense nos desenvolvedores como trabalhadores da constru\u00e7\u00e3o civil e nos web designers como arquitetos &#8211; ambos os conjuntos de habilidades necess\u00e1rias, mas diferentes.<\/span><\/p>\n<h3 id=\"o-que-os-desenvolvedores-web-fazem\"><span style=\"font-weight: 400;\">O que os desenvolvedores web fazem?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os desenvolvedores web usam todos os elementos que foram criados &#8211; a estrutura do site, modelos de projeto e prot\u00f3tipos, al\u00e9m da c\u00f3pia &#8211; e transformam isso em c\u00f3digo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Embora os desenvolvedores web geralmente n\u00e3o realizem qualquer trabalho de design, eles geralmente colaboram estreitamente com os web designers durante todo o processo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essa colabora\u00e7\u00e3o pode come\u00e7ar no in\u00edcio do processo de web design, colocando o desenvolvedor na posi\u00e7\u00e3o de consultor.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Depois que um web designer conceitua como eles querem que um site pare\u00e7a e funcione, o desenvolvedor avalia se o que eles imaginaram pode ou n\u00e3o ser programado t\u00e9cnica e economicamente.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Os desenvolvedores web e web designers tamb\u00e9m colaboram mais tarde quando os designers entregam os projetos aprovados pelo cliente para serem codificados.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"o-que-os-web-designers-fazem\"><span style=\"font-weight: 400;\">O que os Web Designers fazem?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Como os desenvolvedores web, os web designers n\u00e3o t\u00eam uma tarefa ou \u00e1rea espec\u00edfica de um site pelo qual s\u00e3o respons\u00e1veis.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sim, os web designers t\u00eam a tarefa de projetar interfaces digitais que s\u00e3o atraentes e eficazes para levar os visitantes a tomarem uma determinada a\u00e7\u00e3o, chamada de convers\u00e3o (comprar, se cadastrar, assinar, ler etc).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">No entanto, grande parte do processo de web design \u00e9 focado em pesquisa de refer\u00eancia, testes e valida\u00e7\u00f5es. Portanto, n\u00e3o basta apenas saber como escolher uma paleta de cores esteticamente agrad\u00e1vel para criar um belo layout.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Os web designers precisam ser capazes de projetar experi\u00eancias personalizadas que atendam \u00e0s necessidades e motiva\u00e7\u00f5es dos usu\u00e1rios finais. Eles tamb\u00e9m precisam equilibrar isso com a compreens\u00e3o de como suas decis\u00f5es de design afetam a codifica\u00e7\u00e3o de um site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Isso geralmente significa passar por um extenso processo de pesquisa e planejamento antes de se comprometer com o design final de um site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Antes de iniciar a cria\u00e7\u00e3o de um layout, um web designer deve separar um tempo bom para fazer uma pesquisa de refer\u00eancias.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Crie um documento de inspira\u00e7\u00e3o com links para sites que voc\u00ea adora ou marque-os como favoritos. O Pinterest \u00e9 um \u00f3timo lugar para encontrar um \u00f3timo design de site &#8211; voc\u00ea pode encontrar e fixar ilustra\u00e7\u00f5es, capas de livros, p\u00f4steres, blogs e outros tipos de design para se referir.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Os web designers usam o termo \u201cmood board\u201d para essas cole\u00e7\u00f5es. Mood boards s\u00e3o um recurso para organizar um quadro de refer\u00eancias visuais e elementos que comp\u00f5e o trabalho.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.awwwards.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Awwwards<\/span><\/a><span style=\"font-weight: 400;\"> sempre tem trabalhos novos e criativos e uma variedade de cole\u00e7\u00f5es tem\u00e1ticas\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.behance.net\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Behance<\/span><\/a><span style=\"font-weight: 400;\"> \u00e9 uma compila\u00e7\u00e3o fant\u00e1stica de trabalhos variados de web design<\/span><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/dribbble.com\/shots\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">O Dribbble<\/span><\/a><span style=\"font-weight: 400;\"> se concentra em designers individuais, fornecendo um f\u00f3rum para obter feedback e se comunicar com outras pessoas sobre seu trabalho<\/span><\/li>\n<\/ul>\n<h2 id=\"existem-tipos-diferentes-de-web-designers-e-desenvolvedores\"><span style=\"font-weight: 400;\">Existem tipos diferentes de Web Designers e Desenvolvedores?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Assim como existem diferentes tipos de pessoas e empresas que precisam de sites, existem diferentes tipos de <a href=\"https:\/\/fixthephoto.com\/pt\/melhor-empresa-de-desenvolvimento-de-com%C3%A9rcio-eletr%C3%B4nico.html\" target=\"_blank\" rel=\"noopener\">empresa de desenvolvimento<\/a> e web designers para constru\u00ed-los.<\/span><\/p>\n<h3 id=\"que-tipo-de-desenvolvedores-web-existem\"><span style=\"font-weight: 400;\">Que tipo de desenvolvedores web existem?<\/span><\/h3>\n<h4 id=\"desenvolvedores-de-back-end\"><span style=\"font-weight: 400;\">Desenvolvedores de back-end<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Usam linguagens de programa\u00e7\u00e3o avan\u00e7adas como PHP, Java e SQL<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Respons\u00e1vel por codificar o banco de dados e o servidor<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Lidar com toda a funcionalidade complexa em um site<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Respons\u00e1vel pelo teste e depura\u00e7\u00e3o<\/span><\/li>\n<\/ul>\n<h4 id=\"desenvolvedores-front-end\"><span style=\"font-weight: 400;\">Desenvolvedores Front-end<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00f3digo com idiomas como CSS, HTML e JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Respons\u00e1vel pela codifica\u00e7\u00e3o do pr\u00f3prio site<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Crie todas as funcionalidades e recursos voltados para o usu\u00e1rio<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pode se especializar no desenvolvimento de CMS (por exemplo, WordPress)<\/span><\/li>\n<\/ul>\n<h4 id=\"desenvolvedores-full-stack\"><span style=\"font-weight: 400;\">Desenvolvedores full-stack<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00f3digo com linguagens de programa\u00e7\u00e3o b\u00e1sicas e avan\u00e7adas<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Respons\u00e1vel por codificar tudo: front-end e back-end de um site<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 id=\"que-tipo-de-web-designers-existem\"><span style=\"font-weight: 400;\">Que tipo de Web Designers existem?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Um web designer faz com que seu site tenha uma boa apar\u00eancia . Eles se concentram no estilo e na sensa\u00e7\u00e3o geral da p\u00e1gina, usando software como o Photoshop, Adobe XD ou Figma para personalizar os elementos visuais do site. Eles tamb\u00e9m usam c\u00f3digos como HTML e CSS (Cascading Style Sheets) para criar seus designs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dentre os web designers temos tamb\u00e9m algumas especialidades:<\/span><\/p>\n<h4 id=\"designer-de-experiencia-do-usuario-ux\"><span style=\"font-weight: 400;\">Designer de experi\u00eancia do usu\u00e1rio (UX)<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O trabalho de um web designer de UX \u00e9 manter os visitantes conectados.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Eles sabem exatamente <a href=\"https:\/\/novo.siteup.dev\/en\/como-fazer-site\/\" style=\"font-weight:bold\">como criar um site<\/a> que ir\u00e1 agradar seu p\u00fablico-alvo espec\u00edfico porque realizaram uma pesquisa minuciosa sobre os elementos e necessidades dos usu\u00e1rios, sem mencionar toneladas de testes de prot\u00f3tipo e reestrutura\u00e7\u00e3o do site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Basta pensar que, se as pessoas gostarem de usar seu site, elas provavelmente revisitar\u00e3o ou recomendar\u00e3o. Portanto, voc\u00ea j\u00e1 pode ver como isso pode ajudar a aumentar sua base de usu\u00e1rios.<\/span><\/p>\n<h4 id=\"designer-de-interface-do-usuario-ui\"><span style=\"font-weight: 400;\">Designer de interface do usu\u00e1rio (UI)<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Um web designer de interface do usu\u00e1rio ajuda a melhorar a maneira como os usu\u00e1rios interagem com elementos, ou a interface, em seu site. Isso \u00e9 feito traduzindo ideias e valores complexos de marca em um site agrad\u00e1vel e f\u00e1cil de navegar.<\/span><\/p>\n<p><b>Como isso difere do UX? \u00c9 sutil, realmente.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">No n\u00edvel mais b\u00e1sico, a interface do usu\u00e1rio (UI) \u00e9 composta por todos os elementos que permitem que algu\u00e9m interaja com um produto ou servi\u00e7o. UX, por outro lado, \u00e9 o que o indiv\u00edduo que interage com esse produto ou servi\u00e7o tira de toda a experi\u00eancia.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O UX est\u00e1 focado na jornada do usu\u00e1rio para resolver um problema,\u00a0 interface do usu\u00e1rio (UI) est\u00e1 focada na apar\u00eancia e no funcionamento das superf\u00edcies de um produto.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para resumir: UX abrange todas as experi\u00eancias que uma pessoa tem com um produto ou servi\u00e7o, enquanto a interface do usu\u00e1rio \u00e9 espec\u00edfica para os meios pelos quais as pessoas interagem com um produto ou servi\u00e7o.<\/span><\/p>\n<h4 id=\"designer-visual\"><span style=\"font-weight: 400;\">Designer visual<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Um designer visual \u00e9 uma mistura de UX e UI. O trabalho deles \u00e9 n\u00e3o apenas melhorar a jornada do usu\u00e1rio usando suas habilidades criativas e de codifica\u00e7\u00e3o, mas tamb\u00e9m resolver problemas de design. Eles tamb\u00e9m ajudam a conceituar o estilo ou o tom de voz exclusivo de uma marca.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Em ess\u00eancia, eles s\u00e3o um mestre em todos os neg\u00f3cios de web design e seus pap\u00e9is espec\u00edficos podem variar bastante, dependendo do que voc\u00ea deseja.<\/span><\/p>\n<h2 id=\"quais-habilidades-os-web-designers-e-desenvolvedores-web-devem-ter\"><span style=\"font-weight: 400;\">Quais habilidades os web designers e desenvolvedores web devem ter?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Embora existam responsabilidades comuns aos web designers e desenvolvedores, seus conjuntos de habilidades espec\u00edficas para o trabalho diferem bastante:<\/span><\/p>\n<h3 id=\"quais-habilidades-os-desenvolvedores-web-precisam\"><span style=\"font-weight: 400;\">Quais habilidades os desenvolvedores web precisam?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os desenvolvedores web possuem o lado t\u00e9cnico de um site, o que significa que eles precisam ter dom\u00ednio sobre programa\u00e7\u00e3o.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Como j\u00e1 mencionamos, no entanto, existem diferentes partes de um site que os desenvolvedores podem ser respons\u00e1veis \u200b\u200bpela programa\u00e7\u00e3o.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por esse motivo, a lista de habilidades a seguir n\u00e3o se aplica a todos que desejam se tornar um desenvolvedor web.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Certifique-se de descobrir em qual faixa deseja seguir, para poder dominar o conjunto certo de habilidades:<\/span><\/p>\n<h4 id=\"html\"><span style=\"font-weight: 400;\">HTML<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma linguagem de marca\u00e7\u00e3o b\u00e1sica que permite aos desenvolvedores criar estilos de texto para navegadores da web (front-end).<\/span><\/p>\n<h4 id=\"css\"><span style=\"font-weight: 400;\">CSS<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma linguagem b\u00e1sica da folha de estilo que permite aos desenvolvedores formatar os elementos em uma p\u00e1gina da web (front-end).<\/span><\/p>\n<h4 id=\"javascript\"><span style=\"font-weight: 400;\">Javascript<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma linguagem de script b\u00e1sica que permite aos desenvolvedores transformar uma p\u00e1gina est\u00e1tica em algo interativo (front-end).<\/span><\/p>\n<h4 id=\"php\"><span style=\"font-weight: 400;\">PHP<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma linguagem de programa\u00e7\u00e3o avan\u00e7ada do lado do servidor com a qual os desenvolvedores trabalham por meio de uma interface de linha de comando (CLI) para codificar o n\u00facleo de um site (back-end).<\/span><\/p>\n<h4 id=\"pre-processadores-css-como-sass-ou-less\"><span style=\"font-weight: 400;\">Pr\u00e9-processadores CSS como SASS ou LESS<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma ferramenta que torna a codifica\u00e7\u00e3o com CSS mais eficiente.<\/span><\/p>\n<h4 id=\"estruturas-javascript-como-jquery\"><span style=\"font-weight: 400;\">Estruturas JavaScript como jQuery<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma ferramenta que simplifica o que os desenvolvedores precisam fazer para executar o c\u00f3digo JavaScript.<\/span><\/p>\n<h4 id=\"bibliotecas-css-e-javascript\"><span style=\"font-weight: 400;\">Bibliotecas CSS e JavaScript<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Recursos pr\u00e9-codificados que os desenvolvedores podem usar para economizar tempo escrevendo todos os componentes ou intera\u00e7\u00f5es do zero.<\/span><\/p>\n<h4 id=\"git\"><span style=\"font-weight: 400;\">Git<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Uma plataforma de controle de vers\u00e3o que facilita para os desenvolvedores trabalhar e gerenciar v\u00e1rias itera\u00e7\u00f5es de um site.<\/span><\/p>\n<p><b>Al\u00e9m das habilidades de programa\u00e7\u00e3o, os desenvolvedores web tamb\u00e9m se devem ter como habilidades complementares:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Bom gerenciamento de projetos e tempo<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Web <a href=\"https:\/\/novo.siteup.dev\/en\/site-responsivo-o-que-e\/\" style=\"font-weight:bold\">design responsivo<\/a><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o para mecanismos de pesquisa (SEO)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Solu\u00e7\u00e3o de problemas (especialmente \u00fatil para depura\u00e7\u00e3o)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Habilidades de comunica\u00e7\u00e3o e colabora\u00e7\u00e3o<\/span><\/li>\n<\/ul>\n<h3 id=\"quais-habilidades-os-web-designers-precisam\"><span style=\"font-weight: 400;\">Quais habilidades os web designers precisam?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Web designers possuem tudo o que tem a ver com a interface de um site. Dito isto, seus conjuntos de habilidades precisam ir al\u00e9m dos conceitos b\u00e1sicos de design ou da teoria das cores.<\/span><\/p>\n<h4 id=\"branding\"><span style=\"font-weight: 400;\">Branding<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 o gerenciamento e posicionamento estrat\u00e9gico da marca. Trata-se de um conjunto de a\u00e7\u00f5es estrat\u00e9gicas para a constru\u00e7\u00e3o dos valores e percep\u00e7\u00f5es planejados para o seu p\u00fablico.<\/span><\/p>\n<h4 id=\"teoria-da-cor\"><span style=\"font-weight: 400;\">Teoria da cor<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">N\u00e3o basta que as paletas de cores sejam esteticamente agrad\u00e1veis. As cores significam coisas diferentes psicol\u00f3gica e culturalmente e isso deve ser levado em considera\u00e7\u00e3o.<\/span><\/p>\n<h4 id=\"layout-formato\"><span style=\"font-weight: 400;\">Layout \/ formato<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c0 medida que as telas diminuem, o layout de um site precisa se adequar e isso se torna um fator importante no processo de design.<\/span><\/p>\n<h4 id=\"mapeamento-de-jornada-do-usuario\"><span style=\"font-weight: 400;\">Mapeamento de jornada do usu\u00e1rio<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Os web designers precisam ser capazes de visualizar o caminho que os usu\u00e1rios seguir\u00e3o para construir uma interface que fa\u00e7a sentido (design de UI \/ UX).<\/span><\/p>\n<h4 id=\"desenvolvimento-de-funis\"><span style=\"font-weight: 400;\">Desenvolvimento de funis<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Isso tem tudo a ver com a inten\u00e7\u00e3o do usu\u00e1rio e entender como diferentes mentalidades levam os usu\u00e1rios a executar a\u00e7\u00f5es diferentes. O design deve levar em considera\u00e7\u00e3o esses diferentes funis (design da interface do usu\u00e1rio \/ UX).<\/span><\/p>\n<h4 id=\"design-de-emocao\"><span style=\"font-weight: 400;\">Design de emo\u00e7\u00e3o<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A empatia desempenha um papel importante no processo de web design &#8211; para designers de todos os tipos. Sem ele, voc\u00ea criar\u00e1 a persona errada.<\/span><\/p>\n<h4 id=\"design-responsivo\"><span style=\"font-weight: 400;\">Design responsivo<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 importante considerar como suas escolhas de design afetam os usu\u00e1rios em diferentes dispositivos e navegadores.<\/span><\/p>\n<h4 id=\"design-de-interacao\"><span style=\"font-weight: 400;\">Design de intera\u00e7\u00e3o<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Este segmento se concentra em como aumentar a clicabilidade e o envolvimento com os principais elementos de um site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, \u00e9 importante que os web designers tenham habilidades complementares como:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Bom gerenciamento de projetos e tempo<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pr\u00e1ticas recomendadas de acessibilidade da Web<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Codifica\u00e7\u00e3o HTML e CSS<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Motor de Otimiza\u00e7\u00e3o de Busca<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Otimiza\u00e7\u00e3o da <a href=\"https:\/\/blog.tecnospeed.com.br\/taxa-de-conversao\/\" target=\"_blank\" rel=\"noopener\">taxa de convers\u00e3o<\/a><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Comunica\u00e7\u00e3o com o cliente<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Colabora\u00e7\u00e3o em equipe<\/span><\/li>\n<\/ul>\n<h2 id=\"quais-ferramentas-os-designers-e-desenvolvedores-usam\"><span style=\"font-weight: 400;\">Quais ferramentas os designers e desenvolvedores usam?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Como os desenvolvedores web e web designers se concentram em partes completamente diferentes de um site, n\u00e3o h\u00e1 muita sobreposi\u00e7\u00e3o em termos das ferramentas que eles usam.<\/span><\/p>\n<h3 id=\"que-tipo-de-ferramentas-os-desenvolvedores-web-usam\"><span style=\"font-weight: 400;\">Que tipo de ferramentas os desenvolvedores web usam?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Al\u00e9m de poder manipular linguagens de codifica\u00e7\u00e3o, os desenvolvedores web devem dominar as seguintes ferramentas:<\/span><\/p>\n<h4 id=\"ambiente-de-desenvolvimento-integrado-ide\"><span style=\"font-weight: 400;\">Ambiente de desenvolvimento integrado (IDE)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/visualstudio.microsoft.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Visual Studio<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/github.blog\/2022-06-08-sunsetting-atom\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Atom<\/span><\/a><\/li>\n<\/ul>\n<h4 id=\"plataforma-de-controle-de-versao\"><span style=\"font-weight: 400;\">Plataforma de controle de vers\u00e3o<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">GitHub<\/span><\/a><\/li>\n<\/ul>\n<h4 id=\"ferramentas-para-desenvolvedores-de-navegadores\"><span style=\"font-weight: 400;\">Ferramentas para desenvolvedores de navegadores<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Chrome DevTools<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/index.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Firefox DevTools<\/span><\/a><\/li>\n<\/ul>\n<h4 id=\"sistema-de-gerenciamento-de-conteudo\"><span style=\"font-weight: 400;\">Sistema de gerenciamento de conte\u00fado<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WordPress<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.joomla.org\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Joomla<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.drupal.org\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Drupal<\/span><\/a><\/li>\n<\/ul>\n<h4 id=\"ferramentas-de-analise-e-teste-de-sites\"><span style=\"font-weight: 400;\">Ferramentas de an\u00e1lise e teste de sites<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">GT Metrix<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/pagespeed.web.dev\/?utm_source=psi&amp;utm_medium=redirect\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Google PageSpeed<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/web.dev\/measure\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">web.dev<\/span><\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 id=\"que-tipo-de-ferramentas-os-designers-da-web-usam\"><span style=\"font-weight: 400;\">Que tipo de ferramentas os designers da Web usam?<\/span><\/h3>\n<h4 id=\"software-e-ferramentas-para-web-design\"><span style=\"font-weight: 400;\">Software e ferramentas para web design<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Photoshop<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/helpx.adobe.com\/br\/support\/xd.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Adobe XD<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Figma<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Sketch<\/span><\/a><\/li>\n<\/ul>\n<h4 id=\"bancos-de-imagens\"><span style=\"font-weight: 400;\">Bancos de imagens<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.pexels.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Pexels<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/pixabay.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Pixabay<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Unsplash<\/span><\/a><\/li>\n<\/ul>\n<h4 id=\"ferramentas-de-otimizacao-de-imagem-compactacao-redimensionamento\"><span style=\"font-weight: 400;\">Ferramentas de otimiza\u00e7\u00e3o de imagem (compacta\u00e7\u00e3o \/ redimensionamento)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">TinyPNG<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Squoosh<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.iloveimg.com\/resize-image\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">I Love IMG<\/span><\/a><\/li>\n<\/ul>\n<h2 id=\"voce-precisa-de-um-web-designer-ou-desenvolvedor-web\"><span style=\"font-weight: 400;\">Voc\u00ea precisa de um web designer ou desenvolvedor web?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Agora voc\u00ea conhece as diferen\u00e7as entre um designer e desenvolvedor. Isso \u00e9 importante, pois saber quando contratar cada um facilitar\u00e1 muito a sua vida relacionada ao site. Para uma r\u00e1pida vis\u00e3o geral sobre quando escolher cada um, d\u00ea uma olhada na nossa tabela abaixo.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Projeto<\/b><\/td>\n<td><b>De quem voc\u00ea precisa?<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Projetar um novo layout de site<\/b><\/td>\n<td><b>Web designer<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Criar um novo formul\u00e1rio de contato<\/b><\/td>\n<td><b>Desenvolvedor Web<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Criar um aplicativo para celular<\/b><\/td>\n<td><b>Desenvolvedor Web<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Conceitualizar a nova marca do site<\/b><\/td>\n<td><b>Web designer<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Corrigir problemas de servidor \/ hospedagem<\/b><\/td>\n<td><b>Desenvolvedor Web<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Editar fotos e v\u00eddeos<\/b><\/td>\n<td><b>Web designer<\/b><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Como mencionamos, nem sempre voc\u00ea ir\u00e1 precisar apenas de um ou de outro. Por exemplo, criar um site a partir do zero requer um desenvolvedor web e um web designer. Afinal, voc\u00ea ir\u00e1 precisar tanto da parte visual como da parte funcional do site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O uso de uma ag\u00eancia web pode ser realmente \u00fatil se, como a maioria das pessoas, voc\u00ea n\u00e3o tiver tempo para criar seu pr\u00f3prio site enquanto gerencia seu neg\u00f3cio. Ou, se voc\u00ea precisar de um site com funcionalidade avan\u00e7ada, uma ag\u00eancia cheia de especialistas \u00e9 uma \u00f3tima solu\u00e7\u00e3o.<\/span><\/p>\n<h3 id=\"quanto-custa-um-web-designer-vs-desenvolvedor-web\"><span style=\"font-weight: 400;\">Quanto custa um web designer vs desenvolvedor web?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Um web designer freelancer geralmente custa entre R$ 40,00 e R$90,00\/h, enquanto a contrata\u00e7\u00e3o de um desenvolvedor web freelancer normalmente custa entre R$60,00 e R$ 120\/h. Uma ag\u00eancia de web design de tamanho m\u00e9dio (que fornece os dois lados da constru\u00e7\u00e3o do site) custar\u00e1 entre R$120,00 e R$240,00\/h para um site b\u00e1sico.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para contratar um <a href=\"https:\/\/novo.siteup.dev\/en\/site-one-page\/\" style=\"font-weight:bold\">site one page<\/a> &#8211; que \u00e9 um dos modelos mais simples &#8211; com uma ag\u00eancia de <a href=\"https:\/\/novo.siteup.dev\/en\/\" style=\"font-weight:bold\">cria\u00e7\u00e3o de sites<\/a>,voc\u00ea ter\u00e1 que investir em torno de R$1.000,00 \u00e0 R$2.500,00 para projetar um site do zero e totalmente personalizado.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"web-designer-x-desenvolvedor-web-conclusao\"><span style=\"font-weight: 400;\">Web Designer X Desenvolvedor Web: Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Agora voc\u00ea deve ter um conhecimento mais desenvolvido de web design, mas vamos recapitular rapidamente o que aprendemos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A diferen\u00e7a entre um desenvolvedor web e um web designer \u00e9 maior do que voc\u00ea pensa. Um web designer traz a ideia de uma marca para a realidade na tela e sabe exatamente o que o p\u00fablico espec\u00edfico ir\u00e1 gostar. Um desenvolvedor web cria a estrutura principal do site, usando linguagens de codifica\u00e7\u00e3o para criar sites l\u00f3gicos e program\u00e1ticos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">No entanto, assim como mostarda e ketchup em um cachorro-quente, \u00e0s vezes voc\u00ea precisa de ambos para obter a melhor experi\u00eancia . Ao criar um site a partir do nada, voc\u00ea precisa de um desenvolvedor web para construir a base e de web designers para fazer com que pare\u00e7a e sinta da maneira que voc\u00ea e &#8211; mais importante &#8211; seus usu\u00e1rios desejam.<\/span><\/p>","protected":false},"excerpt":{"rendered":"<p>\u00c9 f\u00e1cil para as pessoas olharem para os sites hoje e pensarem: &#8220;Qualquer um pode criar isso&#8221;. Gra\u00e7as a sistemas de gerenciamento de conte\u00fado como o WordPress, al\u00e9m de temas e plugins pr\u00e9-codificados, algumas pessoas podem. Mas o fato \u00e9 que isso exige uma combina\u00e7\u00e3o de fortes habilidades de codifica\u00e7\u00e3o e design inteligente para criar [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16,12],"tags":[],"class_list":["post-10284","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","category-marketing"],"acf":[],"_links":{"self":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts\/10284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/comments?post=10284"}],"version-history":[{"count":0,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/posts\/10284\/revisions"}],"wp:attachment":[{"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/media?parent=10284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/categories?post=10284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/novo.siteup.dev\/en\/wp-json\/wp\/v2\/tags?post=10284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}