Refinando o layout

Loading...

Do curso por Universidade de São Paulo

UX / UI: Fundamentos para o design de interface

26 ratings

Universidade de São Paulo

UX / UI: Fundamentos para o design de interface

26 ratings

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

Opa, galera, tudo bom?

Nesta aula, eu vou falar de refinamento de layout,

trazendo dicas e ferramentas que vão te ajudar a aplicar esses conceitos.

Para mim,

a capacidade de refinar algo está diretamente ligada ao treino do olhar.

Assim como qualquer atividade prática, o desenvolvimento do olhar para o

designer é uma questão de criação de referencial, de repertório.

Ver tanta coisa boa e ruim sobre algo até que você naturalmente passa a ter domínio

sobre aquilo.

É aquele negócio que beira o feeling da percepção de feio e bonito: bater o olho

algo e identificar que precisa melhorar.

Inclusive, quando a gente fala disso,

a gente está diretamente falando do conceito de design visceral do Don Norman.

A experiência visceral é instintiva, imediata,

afetiva e acontece a nível biológico.

É o que nos faz gostar de coisas alinhadas e simétricas, transmissões gostosinhas,

gatinhos fofos e cores brilhantes, é subconsciente.

Da mesma forma, quando o usuário entra em contato com uma interface e se depara com

um mau design, ele vai se sentir incomodado e vai embora,

ainda que ele não consiga dizer o que está exatamente ruim.

Isso também vem do referencial, as diferentes vivências dele,

sua história, visão, cultura e sensibilidade interferem na forma como

ele percebe e experiencia um produto.

Com o profissional de design não é diferente.

Só construindo uma bagagem é que você vai treinar a sua capacidade de perceber e se

incomodar com detalhes que antes te passavam batido.

E o mais importante: conseguir propor uma solução diferente a partir disso,

que é o que te tira do feeling, o domínio da técnica e da teoria.

" Maelle, então o quê que eu faço?

Eu durmo até ser acordado pelo beijo da experiência?".

Não, querida!

Você tem que praticar, ler bastante,

seguir bons designer e botar os seus projetos na rua para receber feedback.

E é por isso que no vídeo de hoje, meninas, eu escolhi dar ferramentas para

que vocês possam desenvolver o seu olhar e criar essa bagagem tão necessária.

"E onde eu encontro boas referências de UI?".

Na internet, óbvio.

Nada mais coerente que estudar design digital em seu próprio suporte.

O Dribble, por exemplo, é a rede social primordial do designer de interfaces.

Diferente do Behance ou do Pinterest, onde você também encontra referências de

interface, a comunidade do Dribble é muito mais voltada a essa especialidade e,

por permitir que o designer disponibilize apenas uma screenshot do projeto,

o que a moçada acaba se focando muito mais é no resultado do que no processo.

Então, você entra lá e fica babando nas interfaces animadas do Pixel Perfect,

tudo lindo, tudo muito bem acabado.

O site pages ponto xyz é um outro bom repositório.

Ele faz uma espécie de curadoria de landing pages.

O site seleciona as melhores páginas de demonstração de produtos, preços,

apps e e-commerces e disponibiliza para consulta.

A mesma coisa é o site Really Good Mails, só que como o nome já diz,

ele é focado referências de e-mails.

Tem os newsletters, abandono de carrinho, boas vindas, tem de tudo.

E o melhor desses dois é que eles trazem páginas e e-mails já implementados,

disponibilizando inclusive o acesso ao link deles.

Isso é ótimo para que você produza coisas que realmente possam ser implementadas.

Ultimamente, a ferramenta que eu mais tenho usado para a coleta de referências é

o Muzli.

O diferencial dele é que a sua interação acontece de forma passiva.

Eu vou explicar: o Muzli é um plug-in para o Chrome que faz da sua

nova guia um feed de inspirações de design e tecnologia.

Ele pega conteúdos de sites, como os que eu citei e cria uma timeline.

Isso faz com que você esteja sempre consumindo bons conteúdos,

mesmo quando não está caçando referência.

E nas redes sociais mais populares você também pode seguir perfis que encham a sua

timeline de inspiração.

No Instagram, por exemplo, perfis como Winseui,

Users.co e o Myinterface fazem posts diários de referências de interface.

Além de procurar referências quando você precisa,

é importante também estar sempre em contato com bons serviços.

Seja curioso, baixe apps aleatórios só para testar, olhe as interfaces de apps,

como o Uber, Spotify, Twitter e Nubank, de forma crítica.

Tem algum motivo para eles serem considerados empresas referências de

design, certo?

Só usando é que você vai conseguir perceber que o sucesso de uma interface

vai muito além do design estático, opa, do layout estático.

Tem as transmissões, os feedbacks e uma série de outras coisas.

Para finalizar, a última dica que eu quero deixar aqui é: teste as suas interfaces.

Por mais que refinamento de layout não gere necessariamente uma

métrica quantitativa,

ele interfere sim na forma como o seu usuário interage com o seu produto.

No mercado, existem várias ferramentas de análise qualitativa que

podem te ajudar a entender melhor o comportamento do seu produto.

O Hotjar, por exemplo, gera vídeos de navegação, mapas de calor, clique,

movimento do mouse e permite a coleta de feedbacks escritos, entre outras coisas.

Você vai ver ali o seu usuário navegando e interagindo com o seu site.

Outro serviço que eu recomendo é a ferramenta de teste AB da Freshworks,

antes conhecida como Zarget.

Por ter editor visual, ela permite que o próprio designer crie variáveis do

teste AB, podendo testar desde mudanças grandes a coisas menores,

como qual cor de botão converte melhor?

Será que se eu jogar esse conteúdo aqui para baixo o meu usuário vai rolar até lá?

Coisas simples que você consegue implementar sem a necessidade de

deploy ou da interação de TI, gerando métricas qualitativas que vão

te ajudar inclusive a defender melhor as suas escolhas de design.

Bom, galera, eu falei bastante, o vídeo está acabando e de brinde eu vou deixar

aqui a indicação de um site chamado Resource Cards, que reúne uma lista de

recursos gratuitos com o propósito de ajudar criativos em seus projetos.

Tem desde bancos com imagens grátis para uso comercial a ícones,

fontes, mockups, pedaços de código HTML.

E, agora que você já têm referências,

ferramentas e recursos, eu quero ver você botar tudo em prática.

Sabe aqueles desafios de Pinktober que os designers de

interface sempre ficam de fora?

Pois é, a gente tem o Daily UI.

É muito legal.

Você acessa o site dele, cadastra o seu e-mail e durante

100 dias você vai receber um desafio de desenho de interface diferente.

Quer um spoiler?

O primeiro é um sign-up form.

Empolgante, não é?

Eu tenho certeza de que, ao chegar no 100º layout,

você vai olhar para o primeiro e falar: "Mano, como eu evoluí".

E no site Collect UI você confere os desafios já postados.

Só não vale colar.

É isso, gente.

Espero que vocês tenham gostado.

Eu vou deixar esses e outros links legais listados junto ao vídeo.

E não deixem de compartilhar e ajudar o Coursera a divulgar esse trabalho

tão legal.

Beijão!

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