Existem muitas áreas relacionadas ao design na indústria de TI. Os mais comuns deles são os designers, escondidos atrás das siglas UX e UI. Bem, algumas pessoas até conseguem incluir desenvolvedores front-end como designers. Vamos tentar descobrir quem são os designers no mundo da TI, qual é a diferença entre UI e UX e que relação os engenheiros front-end têm com o design.
Designers
Desenvolver a interface de aplicativos, sites ou jogos é um processo bastante complexo e requer a aplicação de conhecimentos de diversas áreas: engenharia, psicologia e design. Os designers de interface de usuário (em inglês - User Interface ou UI) focam na forma como a funcionalidade do site é exibida (pesquisa, abas, menus) e nos detalhes da interação entre o cliente e a interface. O objetivo de um designer de UI é um design de produto moderno esteticamente aceitável . UX significa User Experience, que significa “experiência do usuário”. Um designer UX está mais focado na usabilidade e compreensão da interface pelo usuário potencial. Esse especialista frequentemente realizará pesquisas e levantamentos que formarão a base para a criação de um conceito de design e também testará conceitos durante e após o desenvolvimento. Normalmente se concentra na estrutura, no conteúdo, na navegação e em como o usuário interage com esses elementos.
Produz sitemaps, protótipos, que são a estrutura básica na criação de software. O objetivo do trabalho de um designer UX é que o usuário obtenha do site de forma rápida e indolor o que veio buscar aqui . Porém, hoje é muito comum ver essas duas especializações escritas com uma barra. Ou seja, as tarefas de ambas as direções são executadas por um especialista. Um designer UX/UI projeta a interação do usuário com a interface, decide o que exatamente ele precisa fazer e é responsável pela aparência dessa interface.
O que um designer de UX/UI precisa saber
Editor gráfico . As ferramentas mais populares do mercado são Adobe Photoshop, Adobe Illustrator, além de Sketch, Figma. Escolha um editor que seja conveniente para você e primeiro tente fazer screenshots de um site ou aplicativo, modernizando-os um pouco.
Ferramentas de prototipagem (Mockplus, Axure) . Uma ferramenta de prototipagem é o elo entre uma ideia e sua implementação. Não importa qual ferramenta você usa. Você pode experimentar vários e decidir aquele que se adapta ao seu estilo e preferências.
Psicologia do usuário. Já na fase de design, você deve pensar se será conveniente para você ou outra pessoa usar esta interface. Coloque-se no lugar do cliente, construa uma ligação forte com ele e esteja atento às suas necessidades. Afinal, um produto terá sucesso se houver demanda para ele.
Você também precisará de conhecimento da teoria das cores . Sabemos algumas coisas desde a infância, principalmente quem frequentou a escola de artes. No entanto, existem certas especificidades em relação ao trabalho dos designers. O conhecimento básico pode ser obtido em livros ou artigos na Internet.
Dependendo das especificidades do trabalho, você pode precisar de conhecimentos de HTML e CSS ou (algumas) linguagens de programação (links para recursos podem ser encontrados abaixo, na seção “O que um desenvolvedor front-end deve saber”).
Desenvolvedor front-end
A principal tarefa de um desenvolvedor front-end é desenvolver a parte cliente da interface. Ou seja, tal especialista “revitaliza” o que os designers projetaram. Ele é o responsável pelo funcionamento e funcionamento da interface e menos pelo conteúdo visual. Um desenvolvedor front-end geralmente precisa encontrar uma boa solução para a interface do usuário durante seu estágio de desenvolvimento, por isso ele frequentemente colabora com um designer de UX/UI. O código escrito pelo desenvolvedor front-end é executado no navegador do usuário (como se costuma dizer, “no lado do cliente”). Além disso, uma das tarefas mais importantes é garantir que o site ou aplicativo web tenha a mesma aparência em todas as plataformas e navegadores.
O que um desenvolvedor front-end deve saber
Via de regra, o front-end é baseado em três pilares: a linguagem de marcação de páginas HTML, as folhas de estilo CSS e a linguagem de programação JavaScript. Além disso, o desenvolvedor front-end deve compreender os princípios de operação do protocolo HTTP, servidores e navegadores, e os recursos de exibição da interface nos diversos dispositivos que estão atualmente no mercado. Ferramentas e métodos para criação de interfaces web estão em constante evolução e mudança, portanto o desenvolvedor deve monitorar isso constantemente.
HTML e CSS (layout)
Este é o layout, os próprios tijolos com os quais o site é construído. A linguagem de marcação HTML determina a organização do site, o conteúdo e todas as interações entre eles. Permite designar o topo da página, a parte inferior, blocos laterais com conteúdo, títulos, exibição de texto e elementos multimídia. Folhas de estilo CSS são usadas para decorar elementos HTML. Eles determinam exatamente como cada elemento gráfico localizado na página é exibido. Usando as versões mais recentes de HTML5 e CSS3, você pode colocar componentes de vídeo e áudio em uma página, criar imagens e animações 2D e até escrever jogos simples. Não há necessidade de tentar lembrar todas as tags e estilos de uma vez. Será útil aprender o básico e colocá-lo em ação imediatamente. Um site muito bom onde você pode aprender o básico de HTML e CSS é o W3School. Mas só se você tiver pelo menos conhecimentos básicos de inglês.
Além disso, o desenvolvedor front-end deve compreender o desenvolvimento entre navegadores e plataformas cruzadas, layout adaptável e responsivo.
Inicialização
É uma estrutura para HTML, CSS e JavaScript. Ou seja, certos modelos a partir dos quais, como em um construtor, você pode montar sites muito mais rápido do que sem eles. Mas, é claro, você mesmo precisa personalizá-lo para atender às suas necessidades. Se você sabe inglês, recomendamos o site getbootstrap e o mesmo w3schools .
JavaScript
Javascript é o núcleo do desenvolvimento front-end. Esta é a primeira e mais difundida linguagem de programação de interface. Ele pode adicionar muitos recursos ao site. Em um nível básico, esta linguagem permite adicionar elementos interativos a uma página. É usado para criar mapas que são atualizados em tempo real, jogos online interativos e filmes. Em nossos cursos seniores de JavaRush, aprendemos um pouco de JavaScript. Você também pode estudá-lo no mesmo W3School ou ler sobre isso em russo no site javascript.ru .
jQuery
jQuery é uma biblioteca Javascript que contém plugins e extensões que podem tornar o desenvolvimento ainda mais fácil e rápido. Em vez de escrever código do zero, as bibliotecas permitem adicionar componentes prontos, que podem então ser personalizados para um projeto específico. Você pode usar as funções de preenchimento automático de formulários de pesquisa, reorganização e redimensionamento da grade e configuração de cronômetros de contagem regressiva. Curso prático de jQuery na w3school
Estruturas Javascript
Existem diferentes tipos de estruturas, mas você pode escolher aquela que seja mais conveniente para você usar. Os mais famosos são Angular, Backbone, Ember e React. Eles representam uma estrutura pronta para código. Eles ajudam a acelerar o desenvolvimento. E em combinação com bibliotecas podem minimizar o desenvolvimento de um site ou aplicativo do zero. Revisão das 5 estruturas e bibliotecas JavaScript mais populares de 2017
Sistema de controle de versão Git
Os sistemas de controle de versão podem rastrear alterações feitas no código ao longo do tempo. Eles também permitem retornar a uma versão anterior do projeto. Git é o sistema de controle de versão mais utilizado. Saber trabalhar com Git é uma habilidade importante para todo desenvolvedor. Tutorial do Git em russo
Breves conclusões
UI significa User Interface, que significa “interface do usuário”. Ou seja, o UI Designer é o principal responsável pela forma como o produto é apresentado ao usuário. Ele desenvolve botões, ícones, seleciona fontes e prepara um layout. UX significa Experiência do Usuário. Portanto, um designer UX projeta o design de um site, um aplicativo - ou qualquer coisa - para que o usuário se sinta confortável e compreenda o que é o quê, e possa obter o que precisa do site com o mínimo de esforço. Muitas vezes, ambos os tipos de trabalho são executados por uma orquestra: um designer de UI/UX. O desenvolvedor Front-end anima o trabalho dos designers introduzindo dinâmica nele: os botões começam a ser pressionados e a imagem começa a mudar. Ele deve conhecer linguagens de programação, temperados com frameworks, pré-processadores e bibliotecas.
GO TO FULL VERSION