Pensando nos espaçamentos e tamanhos

Loading...

Do curso por Universidade de São Paulo

UX / UI: Fundamentos para o design de interface

30 classificações

Universidade de São Paulo

UX / UI: Fundamentos para o design de interface

30 classificações

Aprenda com uma das maiores startups do Brasil, a Taqtile sobre com criar a melhor experiência para o seu usuário, formas de gerar ideias, princípios básicos de design e como desenvolver interfaces de aplicativos e sites, esse curso introdutório é composto de aulas teóricas com exemplos práticos de aplicação de cada assunto abordado. Neste curso serão abordados os seguintes temas: Como conhecer o seu usuário Usabilidade e Prototipação rápida Arquitetura de informação e wireframe Princípios de design Acessibilidade e multi plataforma Elementos de interface do usuário Linguagem da empresa, lidando com o cliente e copyright Monitoração, Mensuração e Teste Ao final desse curso, esperamos que você esteja familiarizado com os principais conceitos, ferramentas e metodologias de criação de interfaces e experiência de usuário. Não deixe de ver as perguntas frequentes antes de se inscrever Conheça os nossos outros cursos: - Criação de Startups: Como desenvolver negócios inovadores https://www.coursera.org/learn/criacao-startups - Consolidando empresas: Estrutura jurídica e financeira https://www.coursera.org/learn/consolidando-empresas - Marketing Digital https://www.coursera.org/learn/estrategia-marketing-digital - Inove na gestão de equipes e negócios: o crescimento da empresa https://www.coursera.org/learn/gestao-equipes-negocios - Marketing e vendas B2B: fechando novos negócios https://www.coursera.org/learn/marketing-vendas-b2b

Na lição

Acessibilidade, multiplataforma e Elementos de interface do usuário

Nesta quinta semana do Curso de UX / UI: Fundamentos para o design de interface, você vai aprender os seguintes assuntos: (i) A importância da acessibilidade em projetos, (ii) Como lidar com multiplataformas, (iii) Como trabalhar com linhas guia e padrões da web, (iv) Aprender sobre cores e tipografias e seus usos, (v) Aprender sobre gestos e micro interações em aplicativos, (vi) Aprender sobre como fazer o refinamento de layout e boas práticas. Contamos com a presença da equipe da Taqtile: Viviane Ducarme, Edmar Miyake, Tuanny Martins, George Chaves, Jakeline Morais, Gregory Milani, Renato Tano e a convidada Maelle Cleys.

Entendo os padrões da web9:22

Pensando nos espaçamentos e tamanhos11:01

Tipografia e Espaçamentos12:49

Como escolher tipografias6:31

O que são Gestos e interações?5:52

Pontos Positivos e Negativos dos Gestos e Interações11:55

Transições e microinterações6:10

Refinando o layout7:10

Conheça os instrutores

Artur Vilas Boas

Núcleo de Empreendedorismo da USP
André Leme Fleury
Professor
Universidade de São Paulo

Oi, hoje eu vou falar sobre elementos de interface do usuário e pensar

um pouco em espaçamentos, tamanhos, e alinhamentos.

Uma linguagem consistente é muito importante no design digital,

pensar os propósitos gerais das cores, das formas, das animações,

tudo que confira uma unidade ao projeto vão te ajudar muito nas decisões,

vão fazer com que você não paralise nas suas entregas.

Sem padrões, as decisões de design vão te prender muito nas decisões e

críticas e também pode prejudicar um pouco a usabilidade do usuário,

uma vez que quanto mais padrões ele tem que reconhecer,

mais esforço ele vai desprender e consequentemente ele vai tomar mais

tempo para tomar decisões e possivelmente diminuir a performance do seu projeto.

Nesse vídeo a gente vai falar um pouco sobre alinhamentos e como

a criação de padrões de reconhecimento ajuda a gente a criar interfaces,

linhas a linhas, em especial, gerando um ritmo vertical nas telas.

A gente vai usar três conceitos, são eles: tamanho, entrelinha e espaçamento.

Antes disso, a gente vai falar um pouco do que a Google e a Apple fazem.

Primeiro, a gente vai falar do machiner design da Google.

No geral, eles botam um grande grid de quadrados múltiplos de oito

e isso vale para celulares, serve para tablets e serve também para desktops.

A iconografia do machiner design também se alinha num grid de

quadradinhos múltiplos de quatro.

Os elementos tipográficos se alinham numa grade de quatro pixels também,

de quatro por quatro.

Eles usam uma escala tipográfica de 12, 14, 16, 20 e 32 pixels.

Para segurar também um balanço nas informações, é sugerido que os

itens clicáveis da tela tenham pelo menos 48x48 pixels,

isso dá aproximadamente uns nove ou dez milímetros, independente da tela.

Uma área de toque mínima recomendada é de sete milímetros ou um pouco mais que isso.

Mais que isso, as pessoas com dedos gordos ou que possivelmente tenham

algum problema de toque não vão conseguir clicar muito fácil nas suas interfaces.

Na Apple, eles aconselham que o alinhamento da

sua interface seja bem construído para que o usuário,

na hora de escanear as telas verticalmente, ou horizontalmente também,

consigam scrollar e identificar mais facilmente os elementos,

então alinhamento junto com uma indentação ajuda

também a organizar a sua tela e dar uma hierarquia maior aos componentes.

Também é interessante ficar atento às áreas de segurança e as margens.

O que o HIG fala, né?

O Human Interface Guidelines da Apple.

No geral, as informações e o conteúdo das informações devem encaixar

confortavelmente na tela e estar um pouco longe das margens.

A Apple também sugere que você use um grid de 8x8 pixels.

Eles também sugerem que você grude as imagens nas laterais

das grades para que não tenhamos desfoque nas coisas, não tenhamos blur.

Bom, o primeiro ponto que a gente vai falar, depois que a gente comentou

do Google e da Apple, é sobre o tamanho, o tamanho das fontes.

Idealmente, você vai escolher uma fonte de tamanho de 16 pixels,

porque isso está alinhado com o que a Google e a Apple sugerem e também

porque a maioria dos navegadores usam 16 pixels como o tamanho padrão de fontes.

Então, esse pode ser o tamanho do seu corpo de texto, vai estar de acordo

com a maioria dos navegadores e é fácil de ler para a maioria das pessoas também.

Uma coisa interessante de comentar é que,

enquanto nos impressos um tamanho ideal de fonte está entre 10 e 12 pontos,

na web esses números sobem um pouco mais, talvez de 15 a 25.

Então, nos meios digitais, é interessante ficar atento a esses pequenos ajustes,

que provavelmente vão ser necessários.

Você também pode usar o que se chama escala modular para fonte.

O que é uma escala modular?

É basicamente você pegar um número e e usar frações desse número

para multiplicar os outros tamanhos de fonte,

sejam eles uma caption, por exemplo, uma label ou mesmo os outros títulos.

Você pode continuar usando essa fração de números

numa escala modular para produzir todos os outros tamanhos de fonte também.

À medida que você vai construindo e escolhendo seus estilos tipográficos,

você pode ver como é que eles vão respondendo aos diferentes tipos de tela,

diferentes tamanhos de tela.

É possível que você tenha, por exemplo, tamanhos razoáveis de texto

para celulares, mas em displays maiores,

em telas maiores, por exemplo, desktop, você fazer ajuste nisso.

Por exemplo, nos títulos, enquanto no celular ele pode ter um tamanho x,

ele pode ter 1,2x ou crescendo proporcionalmente

em tamanhos maiores, em vídeos maiores.

Um outro ponto interessante, a gente já falou de tamanhos de fonte,

é a entrelinha ou a altura de uma linha, uma fonte.

Uma linha bem espaçada ela, com certeza, embeleza um pouco mais

a tipografia e consequentemente as interfaces.

Um número de entrelinha ideal está entre 1,4 e 1,5 vezes o tamanho da fonte,

especial 1,5 vezes, que é o recomendado por padrões de acessibilidade.

Então, por exemplo, se você tem um tamanho de fonte de 16,

você pode usar uma entrelinha de 1,5x, 1,5 vezes esse tamanho,

então 16x1,5 você vai ter uma entrelinha de 24,

então você vai ter uma altura de linha de 24 pixels.

E 24 pixels, como a gente estava comentando,

está de acordo com aquele grid, com a grade de quadrados de oito pixels,

então vai ajudar muito mais no seu alinhamento e na harmonização dessa tela.

Isso de usar entrelinhas com números como 1,4 ou

1,5 vai ajudar na matemática da construção da sua tela,

isso porque ela vai ficar mais previsível e não precisa ligar

se os números começarem a ficar quebrados.

Por exemplo, em títulos você pode ter essa entrelinha um pouco menor e isso vai dar,

talvez, 1,25 ou 1,125, mas não tem problema esse número estar quebrado,

desde que você use um tamanho proporcional nas entrelinhas.

O terceiro ponto é o de espaçamento,

e eu estou falando agora de espaçamento entre elementos.

Eu já falei de tamanho de fonte, de entrelinha e agora é o espaçamento entre

elementos, eles vão ajudar, com certeza, na utilização de espaços

em branco da sua interface, com certeza vai dar um respiro maior.

Espaçamento consistente, ele além de promover uma interface com maior respiro,

com maior aproveitamento do branco,

ele vai ajudar na manutenção do seu layout.

Então, se você usa padrões e proporções, fica muito mais fácil.

Fica mais fácil fazer a manutenção de espaçamentos na sua interface.

No Material Design, por exemplo, além do espaçamento padrão,

entre elementos de oito pixels, você tem nas margens laterias um espaçamento

de 16 pixels e isso ajuda a você tirar dos cantos da

tela as informações e concentrar em uma área de segurança.

Diferente de uma base intuitiva, que seria a de dez, usar padrão como quatro ou oito,

como já foi citado, ajuda um pouco mais na construção da sua tela,

porque é o que é recomendado, por exemplo, pela Apple e pela Google.

Além disso, se você usar ícones em múltiplos de quatro,

vai ajudar muito mais no posicionamento desses elementos na tela,

da mesma forma você pode criar margens e pagines de acordo com esses números.

Até agora eu falei de múltiplos de oito, mas para um ritmo vertical você

também pode usar, por exemplo, o número 12, como um padrão de alinhamento vertical.

Por exemplo, usando o que eu já falei, se você tem uma fonte de

tamanho 16 e você tem uma entrelinha de 1,5x,

você vai ter uma altura de linha de 24 e isso também é múltiplo de 12 e também dá

para você conseguir criar blocos e padrões de reconhecimento vertical na sua tela.

Ocasionalmente você pode quebrar essa regra, sem dúvida.

Por exemplo, se você tem uma margem de um pixel, você vai ter uma

margem de pixel elemento, você vai ter uma espécie

de desalinhamento de um pixel em torno de toda a área daquele componente.

Então, é interessante ter uma certa flexibilidade também,

porque senão você vai ter que ficar fazendo esse alinhamento de pixel para

absolutamente tudo e se isso está atrapalhando a sua produtividade,

é melhor só aceitar a vida como ela é e fazer os alinhamentos o

mais próximo possível de 8 ou 12, no caso.

O ideal é você procurar padrões que

cresçam ou encolham de acordo com o conteúdo.

Para tamanhos de fonte, no geral,

é difícil e não é recomendado você botar alturas e larguras fixas.

Você deve evitar larguras e alturas fixas ao máximo.

O ideal é que o seu layout flua horizontalmente

e escoa verticalmente, de uma forma mais natural,

e isso ajuda a deixar o seu layout também pouco mais responsivo.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play