Evoluindo o wireframe para o layout final

Loading...

En provenance du cours de Universidade de São Paulo

UX / UI: Fundamentos para o design de interface

26 notes

Universidade de São Paulo

UX / UI: Fundamentos para o design de interface

26 notes

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

À partir de la leçon

Design

Nesta quarta semana do Curso de UX / UI: Fundamentos para o design de interface, você vai aprender os seguintes assuntos: (i) O que é design e seus princípios, (ii) O que é o design sprint e como ele funciona, (iii) Como evoluir de um wireframe para um layout final, (iv) O que é um style guide, (v) As 10 heurísticas de usabilidade. Contamos com a presença da equipe da Taqtile: Gregory Milani, Lucas Otsuka, Guilherme Hashioka, George Chaves e do convidado Maurício Uehara.

Princípios de design10:29

O que é um Design Sprint5:22

Como aplicar o Design Sprint? (Parte 1)6:27

Como aplicar o Design Sprint? (Parte 2)11:12

Evoluindo o wireframe para o layout final6:07

O que é Style Guide?10:59

As 10 heurísticas de usabilidade11:57

Rencontrer les enseignants

Artur Vilas Boas

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

Como a gente já disse anteriormente,

os wireframes são uma ferramenta muito útil na hora de você discutir ideias

com os clientes e também entender qual vai ser a estrutura básica da sua tela.

Mas aí, depois de você já tem tudo decidido no seu papel o wireframe,

como é que você evolui disso para isso, que é o layout final?

Bom, antes disso é muito comum em empresas grandes,

onde as equipes de design e de programação geralmente não trabalham lado a lado,

é muito comum eles evoluírem a wireframe do papel para uma coisa

um pouco mais sofisticada, mas ainda utilizando

escala de cinza e não utilizando muitos elementos gráficos nem imagens.

Depois, para você começar a usar elementos gráficos,

é muito comum você ter um bloqueio e não saber muito bem como começar.

Nessa fase, a gente usa uma ferramenta chamada moodboard,

que é onde a gente junta tudo de inspiração que a gente acha legal,

que poderia ter no nosso aplicativo e coloca numa forma mais gráfica,

para tentar decidir exatamente qual vai ser a experiência que a gente

quer proporcionar para o usuário nesse aplicativo.

Aqui tem um exemplo de moodboard colaborativo que a gente fez no Figma,

utilizando várias imagens, tipografias, e interfaces que a gente achou interessante.

Aqui nós temos um exemplo de moodboard que a gente fez colaborativamente para

um aplicativo que distribui amostras de medicamentos.

Então, aqui, nossa equipe de design foi coletando tudo

que a gente achava que tinha a ver com a sensação e com as emoções que a gente

queria transmitir para os usuários enquanto ele utilizava aquele aplicativo.

Então, temos imagens de laboratório, de sofisticação, de organização,

clean, rapidez, e fomos colocando aqui no Figma.

O Figma é um programa que você consegue ir trabalhando em grupo dentro

de uma interface de um Canvas, como se fosse um Google Docs mesmo.

Aqui também a gente colocou algumas frases que têm a ver com o

nosso produto e muitas referências de produtos que também têm o mesmo Look and

Feel que a gente gostaria de transmitir no nosso aplicativo.

E depois disso, a gente então organizou tudo isso

num PDF e mostrou para o cliente.

E aqui você pode ver que a gente então organizou por palavras-chaves,

então decidiu quatro palavras-chaves que esse aplicativo deveria transmitir,

e isso ajudou a gente no nosso processo de design, a guiar o nosso processo de

design, e também organizamos as imagens a partir dessas palavras.

Depois, a gente também decidiu as cores a partir das imagens e também as

tipografias a partir das referências que a gente pesquisou.

Então, a partir desse moodboard, que você pode mostrar para o seu cliente,

vocês conseguem decidir se é exatamente isso, as sensações e emoções que vocês

querem que o usuário sinta na hora de utilizar o aplicativo ou o site de vocês.

E assim, fica muito mais fácil para a equipe de design entender para

qual caminho ela tem que seguir na hora de fazer realmente o layout final.

Então, ela já vai estar sabendo mais ou menos quais são as cores que ela tem que

usar, quais são, mais ou menos, as emoções que o design tem que tentar

proporcionar para o usuário e assim desenhar uma interface que tem a ver

com o produto que o cliente está querendo disponibilizar.

Agora que você tem o moodboard você já está começando a definir qual que é

a identidade desse aplicativo, e nessa parte a gente começa a definir o style

guide, que seria um guia de estilo da identidade desse aplicativo.

O que que seria isso?

Aqui tem exemplo de style guide que a gente fez para esse aplicativo de

amostras.

Aqui tenho várias artboards, por exemplo, eu tenho as artboards do logo,

do ícone do aplicativo, e aqui tem a artboard da tipografia,

que define exatamente quais são as fontes que vão ser utilizadas,

quais os tamanhos que vão ser utilizados.

E aqui, na direita, também temos a artboard sobre as cores,

então todas as cores que a gente vai utilizar.

A partir daquele moodboard,

a gente conseguiu extrair quais são as cores e quais são as hierarquias de cores.

Então, você pode definir qual que vai ser a cor que vai ser mais utilizada,

no caso aqui vai ser o preto, aqui na hierarquia,

e você pode definir também quais são as cores que vão aparecer quando

tem algum erro ou quando tem algum feedback positivo, ou seja,

você mandou um formulário e você tem que mandar uma mensagem de "formulário

enviado com sucesso", então utilizar um verde, que seria esse verde aqui.

[SEM_ÁUDIO]

[SEM_ÁUDIO]

Além disso, você pode também definir quais vão ser os elementos de navegação desse aplicativo.

Aqui, nessa artboard, está definido como vão ser os headers desse aplicativo,

qual vai ser a bottom bar, quais são os ícones que vão ser utilizados nele,

e também tem as cores certinhas que, por exemplo,

esse ícone está selecionado então ele vai ser azul.

E aqui, então, você consegue definir como é que vai ser feito essa interface.

Como vocês viram nesse style guide,

a gente consegue definir qual é a tipografia, quais são as cores, e quais

são os usos que a gente pode fazer desses elementos gráficos dentro do aplicativo.

E isso fica bem mais fácil para você criar então as telas que eu tinha

definido no wireframe.

Então, juntando os elementos gráficos e a estrutura que você tinha decidido,

você consegue, então, montar a interface desse aplicativo no final.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play