UI Design: Conhecimentos de Front-end para designers

A ponte entre design e desenvolvimento - Apresentação

Apresentando a instrutora e o curso

Olá! Meu nome é Mônica Hillman e serei a instrutora deste curso, que abordará como design e código se conectam.

Audiodescrição: Mônica é uma mulher branca, com cabelos ruivos até os ombros. Ela está usando óculos de grau e uma camiseta azul marinho.

Explicando o objetivo do curso

Neste curso, nossa jornada começará a partir do momento em que já temos o protótipo de uma interface pronto e estamos passando para uma pessoa desenvolvedora transformá-lo em código. Especificamente, trabalharemos com a aplicação do Serenato Café, que será prototipada no Figma. Nosso objetivo é compreender como a pessoa desenvolvedora faz a leitura desse protótipo para transformá-lo em código.

Ao compreender essa ação, conseguimos manter uma comunicação mais clara entre as diferentes áreas, o que garante que o resultado final seja mais condizente com o planejado.

Explorando os conceitos de HTML e CSS

Para que a conversa seja mais clara, é importante que compreendamos os diferentes papéis dentro de um time de desenvolvimento e também como são selecionados os elementos da tela que prototipamos para serem transformados em código. Neste curso, compreenderemos sobre o HTML, que é uma linguagem de marcação. Essa linguagem permite que inseramos elementos dentro do código, como botões, links, cabeçalhos, containers, entre outros.

No entanto, apenas colocar esses elementos na tela não garante que eles tenham cores, espaçamentos e posicionamentos de acordo com o Figma. Portanto, também aprenderemos sobre CSS, que é a linguagem utilizada pelas pessoas desenvolvedoras para construir estilizações em cada um desses elementos. Nesta parte, aprenderemos sobre position, flexbox, grid, animation, responsividade e também como podemos construir design systems, tokens de design, entre outros, para facilitar na hora da conversão do layout para código.

Convidando para a participação no curso

Não é necessário ter um conhecimento prévio em programação para este curso, pois não aprenderemos a fazer o código em si, mas sim entender conceitos que podem auxiliar na conversa entre ambas as áreas. Se temos interesse em aprender sobre esses assuntos e entender como nosso protótipo é transformado em código, não devemos deixar de nos matricular neste curso. Nos vemos no próximo vídeo. Até lá!

A ponte entre design e desenvolvimento - Do protótipo para o código

Descrevendo o papel do design na equipe de desenvolvimento

Dentro de uma empresa que está desenvolvendo um serviço ou uma aplicação para dispositivos móveis ou navegadores, geralmente, temos uma equipe responsável por esse desenvolvimento. Nessa equipe, normalmente, há uma pessoa profissional de design. Essa pessoa desenha os layouts e faz o protótipo dessas interfaces em ferramentas como o Figma, definindo questões como fonte, tamanho da fonte, espaçamento, cores, ícones, etc. Todas essas decisões são baseadas na descrição do que é necessário para o produto, entregue pelo dono do produto. Dependendo do tamanho da empresa, pode haver guias para manter a consistência desses estilos nas diferentes aplicações existentes.

Após a criação do layout, é necessário passar essas informações para os outros membros do time, que precisam compreender cada uma das especificações desejadas para o layout. Por exemplo, se desenhamos uma interface com um espaçamento padrão de 14 pixels para cada item de uma lista, mas essa informação não está documentada, a pessoa responsável pelo código pode não saber dessa especificação e colocar qualquer valor que considere adequado. Isso pode resultar em espaçamentos incorretos, tipografia trocada ou falta de informação na tela após a entrega do produto.

Importância da prototipação e comunicação na equipe

Portanto, é importante que, durante a etapa de prototipação, as informações sejam claras para a equipe que transformará o desenho em código e na aplicação final para o usuário. Quanto mais fácil for o entendimento e a leitura do layout, seguindo boas práticas, melhor será o resultado final. Durante o curso, vamos entender algumas estratégias de código que podem ser utilizadas e dicas que podem ser deixadas no protótipo ou em conversas com as pessoas desenvolvedoras.

Dentro de um time, geralmente, não é uma questão de "8 ou 80". Não se trata apenas de a pessoa designer desenhar a interface, fazer toda a prototipação e depois enviar para as pessoas desenvolvedoras. Podemos ter, dentro desse time, uma separação entre UI (Interface do Usuário) e UX (Experiência do Usuário).

Diferenciando UI e UX no processo de design

Quando falamos sobre UI (interface do usuário), estamos lidando com tudo que está desenhado dentro de uma aplicação. Também temos o UX design (design de experiência do usuário), que é a área responsável por definir como a pessoa usuária vai navegar dentro da aplicação, como os textos estarão escritos, entre outros aspectos. É comum que o mesmo profissional realize ambas as etapas, de UX e de UI, mas em algumas empresas essas funções são divididas.

Após o layout ser desenvolvido por essas duas áreas específicas, ele é enviado para o time de desenvolvimento. Geralmente, dentro desse time, temos dois tipos de pessoas desenvolvedoras. A pessoa desenvolvedora front-end é quem realmente transforma a interface em código, construindo os elementos que serão renderizados na tela, assim como todos os estilos. Já a pessoa desenvolvedora back-end é responsável por toda a parte de trás da aplicação. Se for necessário consumir algum serviço na interface, como enviar um formulário ou resgatar dados de um banco de dados, essa responsabilidade recai sobre o back-end. Em alguns casos, a mesma pessoa desenvolvedora pode atuar em ambos os lados.

Envolvendo QA e a importância da colaboração

Embora não esteja mencionado no slide, também temos o profissional de QA (garantia de qualidade), que testa se a interface desenvolvida está de acordo com o protótipo criado pela pessoa designer. Esse profissional valida o produto antes de seu lançamento para o público, mas nem todas as empresas possuem alguém especificamente para essa função.

Com tudo isso que vimos, podemos perceber que o design ganha vida no código. Ambas as partes são importantes: sem o protótipo, a pessoa desenvolvedora não consegue seguir as especificações, e sem a pessoa desenvolvedora, o design não chega ao produto final que a pessoa usuária irá utilizar. É essencial balancear essas duas partes, pois são cargos fundamentais, e é importante que ambos consigam se comunicar para entregar uma experiência cada vez melhor.

Introduzindo o próximo passo no desenvolvimento front-end

Vamos para o próximo vídeo, onde daremos continuidade para entender o lado da pessoa desenvolvedora front-end, como ela traduz um protótipo, uma interface, para o código em si. Vamos explorar um pouco mais para compreender como funciona a mente da pessoa desenvolvedora. Vamos lá!

A ponte entre design e desenvolvimento - Elementos semânticos

Criando elementos da tela com HTML

A primeira etapa que será desenvolvida pela pessoa desenvolvedora, assim que entregarmos a interface, é a criação dos elementos da tela. Isso é construído a partir do HTML, que significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto). O HTML atua como uma linguagem de marcação que permite colocar cada um dos elementos da tela, sejam eles contêineres, imagens, links, entre outros.

No desenvolvimento front-end, há algo muito específico: os elementos semânticos. Após a criação do protótipo, onde todos os elementos que desejamos mostrar na tela são colocados, a pessoa desenvolvedora começa a traduzir isso, criando esses elementos no código. É importante que ela utilize elementos que tenham significado além da aparência. Portanto, é interessante que, ao nomearmos as camadas e elementos dentro do protótipo ou layout, utilizemos nomes condizentes com o que a pessoa desenvolvedora irá usar. Isso facilita o processo.

Utilizando elementos semânticos no HTML

Podemos consultar a documentação para saber quais elementos existem no HTML, mas muitas nomenclaturas são semelhantes às que usamos na vida real, apenas traduzidas para o inglês. Não é necessário que todas as camadas do protótipo estejam em inglês; o importante é que haja uma linguagem comum.

Utilizar os elementos corretos para ter um código semântico traz benefícios. Isso torna o código mais acessível, melhora o SEO e torna a estrutura mais clara e fácil de manter. A acessibilidade do código é importante porque, quando alguém utiliza um leitor de tela, normalmente usa a tecla "Tab" para navegar entre os elementos que o leitor irá ler. Se a estrutura não fizer sentido e os elementos forem apenas baseados na aparência, a navegação pode não ser intuitiva para quem utiliza o leitor.

Importância da semântica e hierarquia da informação

Melhorar o SEO também é relevante, pois os mecanismos de busca leem o código da aplicação. Se o código não for acessível ou a estrutura não fizer sentido, ele não será priorizado, independentemente do mecanismo de busca utilizado.

A semântica também está relacionada à hierarquia da informação. Se somos pessoas designers, provavelmente já ouvimos falar sobre hierarquia da informação. Ao criar um protótipo, tomamos cuidado com os títulos, que podem ter uma letra maior ou um peso de fonte diferente, por exemplo. No código front-end, é a mesma coisa. Precisamos usar elementos como os headings (títulos). No HTML, temos do H1 até o H6, onde H1 é o título principal e H2 é o título secundário. Existem especificações, como a necessidade de ter apenas um título principal (H1) por tela para que o código seja considerado bom pelos mecanismos de busca.

Explorando a interface do projeto Serenato

Com isso em mente, já podemos começar a ter cuidado ao colocar apenas um título principal em uma tela que estamos prototipando. Além disso, todos os textos ficam dentro de uma tag p.

Vamos ver na prática como é a construção desses elementos? Não é necessário ser uma pessoa desenvolvedora para entender e conversar com uma pessoa desenvolvedora, ou seja, não precisamos aprender a codificar. Queremos mostrar na prática como isso acontece na vida da pessoa desenvolvedora.

Temos uma interface aqui, que é o Serenato, um café, e ela possui alguns elementos que podemos explorar.

Criando a estrutura básica do HTML no Visual Studio Code

O projeto possui inicialmente um cabeçalho. Se visualizarmos a nomenclatura no menu à esquerda do Figma, ela está como navebar. Isso faz sentido para a pessoa desenvolvedora, pois uma lista de navegação geralmente está dentro de um cabeçalho. Ao traduzir isso para o código, utilizamos a tag header, já que o HTML utiliza tudo em inglês. Dentro do cabeçalho, teremos o logo e uma lista de links, que é o menu de navegação utilizando a tag nav. Poderíamos incluir um modo escuro, se necessário, mas vamos focar apenas nas primeiras opções para demonstrar no código.

Ao abrir o Visual Studio Code, que é um editor de código, utilizamos suas ferramentas embutidas que auxiliam na escrita. Estamos dentro da pasta "serenato" e vamos criar um novo arquivo. Na tela inicial, selecionamos a opção "New File" e nomeamos como index.html. O editor perguntará se desejamos salvar dentro da pasta "serenato", e confirmamos. A tela do arquivo será aberta.

Iniciando o código HTML e criando o cabeçalho

Para iniciar o código, podemos inserir um HTML 2.5. O HTML já vem com algumas informações padrão, mas tudo que será renderizado na tela deve estar dentro do body, que é o corpo da aplicação. Todos os elementos estarão lá.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Traduzindo a interface, começamos com um cabeçalho, utilizando a tag header.

<body>
    <header>
        
    </header>
</body>

Adicionando logo e lista de navegação

Dentro do header, temos o logo. Se o logo não for uma imagem, mas sim um texto, podemos inserir o texto principal como logo. No nosso caso, será uma imagem, então utilizamos a tag img com o atributo src.

<header>
    <img src=""
</header>

Também é necessário incluir o texto alternativo, que será exibido caso a imagem não carregue. Podemos usar "logo do serenato" como texto alternativo.

<header>
    <img src="" alt="Logo do serenatto">
</header>

Em seguida, temos a lista de links, representada pela tag nav.

<header>
    <img src="" alt="Logo do serenatto">
    <nav>

    </nav>
</header>

Criando a lista de navegação

Ao criar uma lista, temos duas opções: OL para listas ordenadas e UL para listas não ordenadas. Como nossa lista de links não precisa ser ordenada, utilizamos UL.

<nav>
    <ul>

    </ul>
</nav>

Cada lista deve conter itens, representados pela tag LI (List Item).

<ul>
    <li></li>
</ul>

Dentro de cada LI, inserimos o link, que parece um texto na aplicação, mas utiliza a tag de âncora A com o atributo href para definir o destino do link. Como estamos apenas testando, podemos usar uma hashtag # como destino e inserir o texto "Início".

<li><a href="#">Inicio</a></li>

Para adicionar mais links, repetimos o processo com LI e A.

Concluindo a construção dos elementos

Esse é o processo de construção dos elementos, independentemente da tecnologia utilizada, como bibliotecas ou frameworks. A estrutura do arquivo pode mudar, mas a construção dos elementos segue a mesma sintaxe.

Agora, vamos para o próximo vídeo, onde compreenderemos outras etapas do desenvolvimento de um código, para entender melhor o trabalho de toda a equipe.

Sobre o curso UI Design: Conhecimentos de Front-end para designers

O curso UI Design: Conhecimentos de Front-end para designers possui 86 minutos de vídeos, em um total de 36 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• capitulo