UI Design: interfaces responsivas

Relevância e fundamentos - Apresentação

Apresentando o instrutor e o curso

Olá! Meu nome é Thiago Marques, sou instrutor na Alura, além de designer de produtos e pesquisador em interação humano-computador.

Audiodescrição: Thiago é um homem branco, com barba e cabelos pretos. Ele veste uma camiseta verde e está no estúdio da Alura, onde há luzes coloridas em azul e roxo ao fundo, além de uma estante com várias plantas, livros e um grande logotipo da Alura.

Introduzindo o projeto do curso

Neste curso de design responsivo avançado, convidamos você a participar de uma jornada interessante. Vamos começar a criar partes para uma landing page para o nosso projeto integrador do Techboard, que é o nosso hub de eventos de tecnologia.

Durante este curso, aprenderemos desde o início como criar partes de um site acessíveis. Vamos desenvolver botões acessíveis, campos de texto acessíveis e, em seguida, expandir nosso conhecimento para a navegação. Posteriormente, abordaremos a criação de seções para o site, incluindo banners e cards responsivos.

Explorando a responsividade e adaptação para dispositivos

Nosso objetivo final é alcançar a responsividade tanto para desktop quanto para tablets e smartphones. Ao longo do curso, vamos desenvolver a versão para desktop e, ao migrarmos para o mobile (dispositivos móveis), aprenderemos a criar interfaces adaptadas para esses dispositivos. Vamos explorar todo esse processo, incluindo a criação de animações e interações laterais.

Tudo isso é essencial quando pensamos em responsividade, pois não basta criar uma única versão e adaptá-la automaticamente para todos os dispositivos. Precisamos desenvolver versões específicas, considerando variações como o tamanho da fonte. Além disso, abordaremos formas de criar para televisões, que possuem telas muito maiores do que estamos acostumados no dia a dia.

Convidando para a jornada de aprendizado

Convidamos você a participar deste curso e embarcar nessa jornada para adquirir mais conhecimento em sua trajetória como pessoa designer de UI ou UX. Estamos certos de que essa experiência será incrível. Junte-se a nós nessa jornada do design responsivo, e garantimos que o aprendizado ao final será enriquecedor. Esperamos por você!

Relevância e fundamentos - O que é design responsivo

Introduzindo o conceito de design responsivo

Para começarmos a entender sobre design responsivo, precisamos compreender por que estamos abordando esse assunto, que está tão em alta atualmente. Vamos olhar um pouco para trás, para os anos 1990, quando as tecnologias começaram a ser utilizadas pelas pessoas. Naquela época, os computadores ainda eram caros e não tão acessíveis, mas estavam surgindo na vida cotidiana. Os computadores para o consumidor final eram aquelas telas grandes em relação à profundidade, mas com resolução mínima. Inicialmente, as telas tinham 640 por 480 pixels, depois houve um avanço para 800 por 600 pixels, e posteriormente para 1024 por 768 pixels. As telas começaram a melhorar em resolução e a ampliar suas dimensões.

Com o tempo, surgiu a necessidade de projetar para diferentes telas, o que levou ao desenvolvimento de layouts fluidos. Anteriormente, a largura era fixa, e o web designer da época tinha que lidar com o máximo de largura e altura disponíveis. À medida que as telas evoluíram, surgiu a necessidade de utilizar layouts fluidos, com o uso de porcentagens para definir o espaço ocupado pelo layout na tela. No entanto, isso gerava problemas, pois as porcentagens poderiam quebrar o layout dependendo da tela. Se o web designer projetasse para uma tela de 800x600 e a pessoa usasse 640x480, o layout poderia quebrar, gerando um scroll horizontal. O contrário também ocorria: se o design fosse para 640 pixels e a tela fosse maior, o layout ficaria pequeno.

Evolução do design com a chegada dos smartphones

Com o surgimento dos smartphones, as pessoas começaram a ter celulares com acesso à internet, o que trouxe a necessidade de construir sites para esses dispositivos. A solução foi criar subdomínios, como m.site.com, para redirecionar automaticamente o usuário para a versão móvel do site. No entanto, isso exigia a manutenção de duas aplicações separadas, consumindo tempo dos designers e desenvolvedores.

Com a popularização do CSS, a situação melhorou. Foi possível definir layouts para diferentes tamanhos de tela em um único arquivo de aplicação, criando várias versões adaptáveis. Isso facilitou bastante, pois não era mais necessário manter duas aplicações separadas. Com mais evolução, surgiu o layout responsivo, que combina o que há de bom nos layouts fluidos, como as porcentagens, com os media queries do CSS. Essa combinação resultou no layout responsivo, que usamos até hoje.

Importância do design responsivo no contexto atual

O conceito de design responsivo foi introduzido por Ethan Marcotte, que cunhou o termo "web design responsivo". Ele desenvolveu um artigo original explicando o motivo do surgimento desse conceito, em maio de 2010. Já se passaram 15 anos desde que se começou a falar sobre layout responsivo.

Com as evoluções tecnológicas e novas formas de desenvolvimento, o assunto de design responsivo tem evoluído significativamente. Trabalhar com dados é essencial para entendermos por que desenvolvemos para dispositivos móveis, tablets e desktops simultaneamente, além de televisões. Por exemplo, 64,35% do tráfego da internet é gerado por dispositivos móveis, segundo dados de julho de 2025. Isso significa que mais da metade da utilização dos sites hoje vem de celulares. Se não projetamos e não fazemos design focado em dispositivos móveis, estamos perdendo oportunidades, inclusive de atrair novos clientes ou usuários para o sistema, o que pode resultar em lucro.

Impacto do design responsivo na experiência do usuário

Um dos motivos para discutirmos design responsivo é justamente para ajudar as pessoas. Dados mostram que 57% dos usuários da internet não recomendariam uma empresa com um site mal projetado para dispositivos móveis. Se um site não é responsivo no celular, a empresa perde com isso. Além disso, 73,1% dos web designers acreditam que o design não responsivo e a funcionalidade ruim são os principais motivos pelos quais os visitantes abandonam o site. O tempo de tela é crucial ao desenvolvermos um site, pois queremos reter a pessoa para que ela consuma material, obtenha informações ou compre produtos. Atualmente, muitas pessoas usam a internet para compras em e-commerces, e os web designers reconhecem essa tendência.

Explorando diferentes abordagens de design

Nesta aula, discutiremos design responsivo, design adaptativo e mobile only (apenas para dispositivos móveis). O design responsivo será o foco principal, criando interfaces que se adaptam a diversos cenários e tipos de tela. O conceito de responsividade vem da arquitetura, onde ambientes eram adaptados de acordo com a quantidade de pessoas, com paredes dobráveis, por exemplo. Esse conceito foi herdado para o contexto de tecnologia, design e desenvolvimento.

O design adaptativo envolve criar diversas versões, como uma para desktop e outra para celular. Já o mobile only foca no desenvolvimento apenas para celulares, como aplicativos que usamos diariamente para pedir carros ou comida. Discutiremos também boas práticas que podem ser aplicadas ao design responsivo.

Benefícios do design responsivo para SEO e manutenção

O design responsivo ajuda na indexação e SEO. O Google considera sites mobile first, ou seja, desenvolvidos com foco em celulares, e indexa melhor aqueles que são rápidos e eficientes. Além disso, o design responsivo mantém a consistência entre diferentes dispositivos, como computadores e celulares, e simplifica a manutenção, pois não precisamos desenvolver versões diferentes.

Iniciando a prática de design responsivo com o Figma

Para começar a falar sobre design responsivo, utilizaremos o Figma, uma das ferramentas mais populares para projetar interfaces. Vamos explorar como pensar na responsividade no Figma. A partir de agora, a aula será mais prática, focando em como criar designs mais responsivos. Vamos adotar a mentalidade do design atômico, começando pequeno e expandindo nosso conhecimento. Nos vemos no próximo vídeo. Até mais!

Relevância e fundamentos - Breakpoints

Discutindo sobre breakpoints e iniciando no Figma

Para iniciarmos nossa prática, vamos discutir sobre breakpoints. Em inglês, são basicamente os pontos de quebra que temos na interface. Qual é o ponto de quebra entre a interface de um dispositivo móvel, como um celular, para um tablet, e de um tablet para um desktop? Já estamos no Figma, então vamos ver como isso é feito na prática.

Vamos abrir um frame. Onde fica o frame? É importante lembrar, pois o Figma possui muitas funcionalidades na tela. A interface dele é minimalista, mas com muitas funcionalidades. Portanto, é bom fazermos essa recapitulação. Aqui embaixo, temos o frame. Vamos criar um frame. Podemos simplesmente clicar no frame e na tela para criar um frame automático. Ele nos trará um frame de desktop. Ou, se clicarmos no ícone de frame, que no caso está em português como "quadro", ele nos oferece várias opções. No lado direito do Figma, na navegação lateral, temos opções como telefone, tablet, computador, apresentação, relógio, papel, redes sociais, comunidade do Figma e arquivo. O Figma já nos entrega uma diversidade de opções prontas para uso.

Criando frames para diferentes dispositivos

Para telefone, há opções como Android e iPhone de vários tipos e formatos. Vou adicionar um iPhone 13. Agora, vou adicionar um tablet, o iPad Pro. E, em seguida, um para o computador. Temos o Macbook e o padrão de computador, que é bastante utilizado no mercado, com resolução de 1440x1024. Percebemos que a altura varia, mas, no nosso caso, ela não será tão importante quando trabalhamos com design responsivo, pois a altura pode variar bastante. Dependendo do dispositivo, como um celular, a altura pode aumentar bastante, dependendo da quantidade de informação que queremos colocar. O mesmo se aplica a desktops e tablets. O mais importante para nós, neste momento, é o tamanho da largura.

Agora que temos um celular, um tablet e um desktop, podemos começar a trabalhar com variáveis. O Figma possui a funcionalidade de variáveis, que nos ajuda bastante na responsividade. Na lateral, temos o item de variáveis. Para utilizá-lo, clicamos no ícone de variáveis, e um painel será aberto. Ainda não temos nenhuma variável neste arquivo, então vamos criar nossa primeira variável. Existem várias formas de fazer isso, sem uma regra específica. Se não temos o Figma pago, ou se temos uma conta gratuita, há diferentes maneiras de proceder. Vou mostrar ambas, pois é importante apresentar esses diferentes contextos.

Criando variáveis para breakpoints

Considerando que temos o Figma gratuito, não conseguimos trabalhar com modos, mas podemos criar um modo que será nosso guia. Para isso, criaremos uma variável numérica, já que estamos lidando com largura. Ao clicar em número, o Figma cria automaticamente uma coleção. Caso já tenhamos uma coleção criada, podemos criar uma nova, conforme nossa organização. Podemos organizar as variáveis em diversas coleções ou em uma única, conforme preferirmos. Vou renomear a coleção para breakpoints. Dentro dela, colocarei o breakpoint de mobile, criarei outra variável para tablet e corrigirei rapidamente qualquer erro de digitação. Por fim, criarei uma para desktop.

No lado esquerdo, temos o nome, e no lado direito, o valor. Podemos verificar os valores clicando no frame, sem fechar a janela. No menu à direita, encontramos a seção de layout, que será muito importante durante nossas aulas. Nela, temos as dimensões, largura e altura. Para nós, o que importa é a largura. Qual é a largura do desktop? 390.

Aplicando variáveis aos frames

Cliquei no tablet, a largura é 834. Cliquei no desktop, 1440. Ótimo, nossas variáveis já estão prontas. Vamos apagar esses três frames e fechar o painel de variáveis. Vamos criar um frame novo. Como aplicaremos essas variáveis dentro desse frame? No painel, há a seção de dimensões. Perceba que há um ícone pequeno ao lado da largura, e é através dele que conectaremos as variáveis a essa largura. Esse ícone é exatamente para fazer essa conexão, e o utilizaremos bastante.

Cliquei nele e selecionei "tablet". Não houve alteração, pois já estava no tamanho de tablet. Ao mudar para "mobile" e depois para "tablet", o tamanho aumentou. Ao mudar para "desktop", aumentou novamente. Definimos que o desktop é 1440. Pode chegar um momento em que alguém no projeto em que estamos trabalhando, como um stakeholder, diga que 1440 não está mais funcionando, pois os usuários estão usando telas maiores, e será necessário aumentar para 1800. Se tivermos diversas telas, o que podemos fazer? Em vez de mudar o número dentro de cada tela, vamos na variável e alteramos para 1800. Automaticamente, todas as telas com a variável aplicada serão atualizadas. Essa é a primeira forma, considerando que não temos o Figma pago.

Utilizando modos no Figma pago

Se tivermos o Figma pago, uma conta de estudante ou de empresa, as coisas mudam, pois podemos utilizar mais de um modo. Vamos apagar os breakpoints e a coleção criada, e criar um número novamente. Em vez de ser uma coleção de breakpoints, será apenas "global", pois usaremos uma vez. O breakpoint será uma única variável, não mais uma coleção com várias variáveis. Será uma coleção global com uma única variável chamada breakpoint. Agora, vamos criar os modos. Ao clicar no valor, podemos definir "mobile", que é 390 de largura. Precisamos criar um novo modo, o modo "tablet". Clicamos no mais no canto direito e adicionamos "tablet". Ele herdou o 390, mas mudaremos em breve. Criamos também um novo para "desktop". Vamos conferir os tamanhos: desktop é 1440, e o tablet é 834, conforme o Figma nos informa.

Finalizando a configuração de variáveis e modos

Criamos uma coleção chamada "global", com uma única variável chamada breakpoint, e definimos modos para mobile, tablet e desktop. Vamos aplicar isso no frame. Criamos um frame novo. Aplicaremos da mesma maneira que anteriormente. Nas dimensões, clicamos no ícone e adicionamos o breakpoint. Ele provavelmente pegou o mobile, que está pequeno. Na seção "aparência", há outro ícone que parece uma paleta de cores, como quando escolhemos tinta para pintar a casa. Ele serve para aplicar o modo variável. O sistema reconhece o "global" e aplica automaticamente o mobile. Ao mudar para tablet, ele pega o tablet. Ao mudar para desktop, ele pega o desktop.

A ideia é que, desde o início, tenhamos isso como variável. No futuro, ao final do curso, veremos que esse passo foi importante para automatizar processos. Essa possibilidade é interessante, pois podemos fazer como mostrado anteriormente, criando tudo separado, ou nem precisar criar isso, dependendo do contexto e de como preferimos trabalhar e entregar o design. Não há uma regra, mas o Figma é uma ferramenta excelente que auxilia no dia a dia. Com isso, estamos prontos para seguir para a próxima etapa, que é criar o nosso grid, o que veremos no próximo vídeo.

Sobre o curso UI Design: interfaces responsivas

O curso UI Design: interfaces responsivas possui 201 minutos de vídeos, em um total de 40 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