Eae! Td bele?
Não sei se você sabe, mas a área que eu mais gosto de atuar é na criação de interfaces, ou seja, UI Design. Na verdade eu comecei basicamente criando interfaces para web e só depois fui estudar outros assuntos.
A área de criação de interfaces também é muito promissora. Existe uma boa demanda de empregos para o Designer de interfaces, aqui no Brasil e no exterior. Tenho colegas que trabalham na europa, atuando na criação de interfaces.
E o UI Design pode ser uma boa opção para quem é designer gráfico, por exemplo, e deseja alçar novos vôos em busca de uma melhor qualificação profissional e melhores rendimentos.
Portanto neste artigo iremos falar sobre UI Design (Design de Interface do Usuário), beleza?
Antes só quero te lembrar que nós temos o nosso próprio curso de UI Design, caso tenha interesse acesse cursouidesign.com.br .
No nosso Curso de UI Design você aprende a criar interfaces digitais que proporcionam as melhores experiências aos usuários e que te trará maior visibilidade no mercado de trabalho.
Curso UIgnite
Saiba mais 
https://cursouidesign.com.br/
Siga-me os bons 😛
Neste artigo você verá:
- O que é UI Design?
- Qual a diferença entre UX e UI Design?
- Qual a diferença entre Web Designer e UI Designer?
- Principais estilos de UI Design?
- Dicas de Design de Interface
O que é UI Design?
UI Design ou User Interface Design (Design de Interface do Usuário) é área que estuda o meio pelo qual uma pessoa interage ou controla um dispositivo, software ou aplicativo. Essa interação pode ser feita através de elementos que forneçam ações entre o dispositivo e o usuário, como por exemplo, botões, links, menus e qualquer outro elemento que permita uma interação entre o dispositivo e o usuário.
É a parte ”visível” do projeto ou sistema em qual o usuário interage, ou seja, se refere a interface gráfica.
No nosso caso iremos focar nas interfaces digitais, ou seja, nas interfaces gráficas de sites, aplicativos, entre outros.
Importante salientar que User Interface não se limita somente a parte visual do projeto. UI Design é sobretudo como será realizada a interação entre o usuário e o meio (que no nosso caso é a interface gráfica), indo muito além da estética/aparência do projeto.
Um bom projeto de UI antecipa as necessidades do usuário e garante que a interface seja fácil de usar e de acessar. Ele garante uma boa experiência de interação evitando ou minimizando dificuldades de utilização e frustrações ao utilizador.
Recentemente eu fiz uma live com o tema “O que é UI Design?”. Nesse vídeo eu explico que abordamos aqui e mais outros pontos importantes do UI Design. Assista abaixo!!
Qual a diferença entre UX Design e UI Design?
User Experience trata-se de como o visitante se sente ao usa o sistema, enquanto UI é o que projeta o sistema proporcionando que ele interaja e chegue ao objetivo.
UI Designer é o profissional que desenvolve a interface e o UX Designer é o que planeja como o usuário vai se sentir ao utilizar determinada interface, como serão as experiências e emoções ao interagir com o sistema.
O UI Design seria como uma ponte que liga o que foi planejado pelo UX com o Usuário.
Então enquanto o UI Design trata da interação entre a interface e o usuário, o UX lida com o lado emocional do usuário e como será a sua experiência ao utilizar o sistema, capiche? 🙂
UI Design e UX Design são áreas que se complementam e colaboram uma com a outra. UI Design possibilita que uma ideia se concretize na interface e que o usuário consiga aproveitar o que está sendo apresentado. E o UX Design faz com o seja apresentado na interface garante boas sensações de uso.
Eu tenho um vídeo onde falo especificamente sobre isso.
Qual a diferença entre Web Designer e UI Designer?
Um UI Designer normalmente projeta o layout e os elementos interativos prevendo os seus possíveis estados (on/off, por exemplo) e como eles funcionam juntos. Utilizando de conhecimentos e estudos sobre a interação humano-interface ele pode criar o layout do projeto. Sua atuação pode ser um pouco híbrida.
Já o Web Designer também é um designer de interface, mas mais voltado a interfaces Web. Na teoria o Web designer projeta o layout e os elementos da interface, mas normalmente não vai tão a fundo na questão da interação humano e interface como quem atua com UI Design. O foco seria mais na criação do layout, na parte visual e não tanto na interação. Em contra-partida o Web Designer tende a ir um pouquinho além incluindo o CSS, HTML, JavaScript, etc.
Porém tudo isso é na teoria. Na pratica é bem diferente. Na prática, na maioria das vagas, quase não existe diferenças e ambos realizam praticamente as mesmas funções já que mais de 90% dos profissionais de UI Design atuam criando interfaces web, ou seja, web design.
Web Design e UI Design tem muitos pontos em comuns e é um pouco complexo diferenciá-los de forma definitiva. Em muitos casos isso se trata mais de uma terminologia de mercado do que qualquer outra coisa. Para saber mais sobre o Web Designer, você pode acessar esse outro artigo.
E em meu canal no Youtube, eu gravei um vídeo onde fala sobre a diferença entre as áreas e os profissionais. Veja o vídeo abaixo:
Principais estilos de UI Design?
Existem alguns estilos principais quando se trata de UI Design. Você muito – mas muito mesmo – provavelmente já viu alguns deles por aí e também já utilizou alguns deles em seus projetos mesmo sem saber. Veja a seguir os principais estilos de Design para interfaces.
Skeumorfismo
Trata-se de um estilo que faz referência aos objetos reais no meio digital/gráfico.
Utiliza-se muito de artifícios como texturas, sombras, gradientes, proporções, entre outros; para simular os objetos do nosso cotidiano.
Esse estilo foi disseminado pela empresa Apple na década de 1980 ao criar para os seus “macintosh” interfaces gráficas em que o usuário pudesse interagir e executar comandos no computador sem a necessidade de digitar códigos. E para facilitar o entendimento e a assimilação, adotou-se este estilo que tenta reproduzir nas interfaces digitais coisas com as quais já estamos acostumados.
O Skeumorfismo foi muito utilizado por muito tempo nas interfaces digitais (os antigos sites feitos em “Adobe Flash” que o digam!). Hoje em dia esse estilo perdeu o seu status e já não é mais usado como antigamente (veja o infográfico interativo abaixo).
Via: TemplateMonster.com
Os principais motivos para isso acontecer foram o avanço das tecnologias como HTML5 e CSS3, que vem proporcionando novas possibilidades de interação e de criação, e a disseminação do uso da tecnologia. As pessoas se acostumaram a utilizar interfaces digitais, com isso já não se faz tão necessário simular objetos da vida real no digital.
Flat Design
Flat Design significa “Design Plano”. Trata-se de um estilo minimalista que utiliza cores e formas chapadas, com poucos (ou quase sem) efeitos de volume, sombras e texturas.
Como já citei em outras oportunidades o Design Web e Design de Interfaces “deriva do design gráfico”. Por isso quase tudo que vemos hoje em dia na Web e/ou digitais deriva do impresso e também da arte em geral.
Não é possível se afirmar com certeza absoluta de onde vem e quando começou o movimento do Flat Design. Mas é nítido que o Flat Design tem raízes oriundas em movimentos anteriores como o Estilo Suíço de Design, Escola Bauhaus e no Movimento Artístico Minimalista.
Ao mesmo tempo que o avanço das tecnologias e do uso cada vez mais comum das interfaces digitais diminuiu a utilização do Skeumorfismo, aumentou a aplicação do Flat Design.
Hoje em dia não é mais preciso simular a textura, sombra e volume em elemento para indicar ao usuário que “aquilo é um botão”. Um simples retângulo com uma cor chapada (ou até mesmo só o contorno) mais um texto descritivo já o suficiente para o usuário entender. Além disso o Flat Design por ser mais simples tende a ser mais leve melhorando assim também a performance da interface. Outro fator preponderante para a popularização do Flat Design foi o conceito de Design Responsivo, pois o Flat Design é muito mais maleável e adaptável que o Skeumorfismo.
Metro Design
Trata-se de um estilo minimalista com influência nítida do estilo Suíço criado pela Microsoft.
Possui esse nome porque foi inspirado na sinalização do metrô de Londres. É muito parecido com o Flat Design, porém um pouco mais minimalista.
Material Design
É o estilo criado pelo Google que utiliza as características do Flat Design, porém adiciona outros artifícios como efeitos 3D. Ele utiliza a física e um pouco de Skeumorfismo para comunicar e criar o visual.
Nos dias atuais talvez seja o estilo mais utilizado em interfaces digitais. O trabalho feito pelo Google é de se tirar o chapéu. Você pode conferir como funciona este estilo acessando aqui: https://material.google.com/
E qual estilo é o melhor??
Aquele que atende adequadamente a proposta do projeto! Existem projetos que exigem o Skeumorfismo enquanto que outros tem o perfil mais para o Flat. O importante é não ser radical e acolher a um como se fosse um filho e desprezar o outro como se fosse um bastardo. Cada um pode ser utilizado em determinados momentos e diferentes projetos.
Dicas de para criar interfaces
A seguir seguem algumas dicas que podem te ajudar na criação de interfaces. Como você já deve saber, Galucho, não existe uma receita de bolo para isso (se existisse eu estaria vendendo e ficando rico :P). Acima de tudo use o bom senso e fundamentos do design para criar suas interfaces.
Designs podem ser testados. Não tenha medo de mudar caso precise
Não tenha medo de testar as suas interfaces. [Saiba mais sobre testes clicando aqui para ler um artigo do Chief sobre isso]. Se os testes indicarem que o design precisa mudar, mude. É preciso estar sempre aberto à mudanças para alcançar melhores resultados
Projete para os usuários, não para o você mesmo
A interface você cria (ou deveria) para o mundo e não para você. É preciso deixar o lado paternalista para sua interface evoluir e realmente alcançar o objetivo traçado. Para ter sucesso é preciso projetar para os usuários. Não tome decisões baseadas somente no seu gosto pessoal; e sem fundamentos e argumentos que justifiquem tal escolha.
A estética é importante, mas não é a principal medida
Sim, a estética tem grande influência no resultado final. Ninguém gosta de algo feio e desagradável. Contudo, temos que entender que a principal medida de sucesso é o desempenho e não somente o visual.
O objetivo é fazer a interação do usuário tão eficiente e simples possível. Não adianta você ter uma interface linda, se ela não proporciona uma boa experiência.
Seja simples
Talvez o segredo da sofisticação esteja na simplicidade. Pense simples e crie coisas simples de usar. Você não precisa criar coisas escalafobéticas para atingir o objetivo com beleza estética e funcional. Não confunda simplicidade com pobreza criativa. Você pode ser muito criativo pensando e criando soluções simples.
Estruture a informação
Organizar a interface de forma deliberada, de forma consistente, de forma reconhecível para os usuário. Junte os elementos relacionados e separe os não relacionados, distinga de forma clara as coisas que são diferentes e equipare os semelhantes.Estruture o conteúdo de forma clara, concisa e coesa.
O princípio visibilidade
Seu projeto deve manter todas as opções primárias, fundamentais de forma visível sem distrair o usuário com informações irrelevantes ou redundantes. Bons projetos não sobrecarregam os usuários com muitos caminhos ou confunde-os com informações desnecessárias.
Dê feedback ao usuário
Seu projeto de UI Design deve manter os usuários informados sobre as ações da interface. Sejam interpretações, alterações de estado, condicionais, exceções ou erros. Todas ações que são relevantes e de interesse para o usuário devem ser explicitas de uma forma clara, com uma linguagem simples e inequívoca.
O princípio da tolerância
Seu projeto deve ser flexível e tolerante aos erros ou um possível mau uso, permitindo assim o usuário desfazer ou refazer ações. Tente reduzir ao máximo as dificuldades evitando os erros e caso eles ocorram sempre comunique ao usuário sobre o que está acontecendo.
Crie um padrão para interface
Seu projeto deve ter um padrão de componentes e comportamentos. Procure manter a consistência do layout com um propósito. Reutilize os elementos e os comportamentos da interface. Com isso é possível reduzir a necessidade dos usuários de repensar e lembrar a passo na navegação.
A forma segue a função
Em um bom design de interfaces os elementos devem seguir a forma da sua função.
O usuário deve ser capaz de entender e/ou prever como um elemento na interface irá se comportar de forma intuitiva, clara, objetiva; apenas olhando para ele. Então se um elemento tem aparência de um botão, deve funcionar como um botão, por exemplo.
Mantenha a atenção do usuário
Hoje em dia temos muitas informações, muitas coisas acontecendo ao mesmo tempo,etc. Por isso se tornou muito mais difícil prender a atenção de alguém neste mundo tecnológico.
Portanto, evite elementos desnecessários que podem distrair o seu usuário. Toda interface é concebida com um objetivo e este é a real razão por ela existir. Não se esqueça disso!
Você pode conferir mais dicas sobre UI nesse outro artigo onde falo sobre os fundamentos do UI Design (Clique aqui).
E caso você queira pesquisar sobre cursos de UI Design, clique aqui para saber dicas para que você possa escolher um bom curso que não te frustre no futuro.
Conclusão
Um bom design de interface de usuário (UI Design) facilita a vida do usuário e não o contrário, ela não chama atenção de forma desnecessária para si e nem se baseia somente na estética. Ele ajuda o usuário a efetuar a ação/tarefa planejada com um visual agradável e conciso.
Design de Interfaces é uma área muito promissora e com bastante oportunidades onde você, Galucho criativo, pode aplicar o seu talento criando interfaces diferentes e ainda ganhar uma boa grana com o seu trabalho.
E você gosta da área de UI Design?
Deixe o seu comentário, bele? 😀
E continue estudando sobre essa área e relacionados com os artigos abaixo:
E não deixe de conhecer o nosso Curso de UI Design que é focado para você aprender do zero até ao avançado em UI Design e criar eficientes interfaces de produtos digitais.
Até mais!
Abraço!
Referências
http://arquiteturadeinformacao.com/
http://www.uxdesign.blog.br/
