Oficina Quick Start Mobile Design - R Design Recife 2014

Não precisa ser assim!
QUICK START
MOBILE DESIGN
Eduardo Roxius
outubro 2014

Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Esse cara sou eu
Roxius
· Graduando em Design na UFPE
· Designer Freelancer
· Estudo Design de Interação
· Interaction Design Foundation
Local Leader (Recife)

Por quê?
Único designer na
Tinha experiência em desenhar interfaces,
conhecia as boas práticas mas nunca tinha
realmente “fechado” o design de um aplicativo;
Informações soltas em vários locais;
Meus amigos não souberam responder algumas
dúvidas.

O que é?
Case + coletânea de práticas, dicas e tutorial de
como fazer o fechamento das telas para os
desenvolvedores.

NÃO

NÃO
PRECISA

NÃO
PRECISA
SABER

NÃO
PRECISA
SABER
PROGRAMAR

Mobile Design?
Apple
(iOS)
Android

MobiClub 3.0

Painel de Controle
MobiClub 3.0
Aplicativo

Algumas especificações de telas

Site Map / Fluxograma

Checklist

Ferramentas utilizadas
· Photoshop CS5+
· Illustrator CS5+
· PNG Express ($29)
· Skala Preview
· Teehan & Lax iOS 7 GUI PSD (iPhone)
· UI Android Design Kit 4.3 (Android)

CHEGA DE AMOSTRAGEM!
Vamos ao que interessa...
Como eu começo o projeto?

O DesignMob estrutura um
projeto de design mobile
da seguinte maneira:
1 - Pré-projeto
2 - Estratégia
3 - Escopo
4 - Estrutura
5 - Desenvolvimento
6 - Publicação
http://designmob.com.br/

Como o Roxius faz
Briefing
- Objetivos do projeto
- Informações sobre a empresa
- Orçamento disponível
- Público
- Cronograma do projeto
- Definições técnicas
- Tabela de prioridades para as funcionalidades
Pesquisa de concorrência

Como o Roxius faz

Como o Roxius faz
Site Map
Fluxograma

Como o Roxius faz
=
Gestão do projeto

Site Map ou Fluxograma?
Site Map ≠ Fluxograma

Site Map ou Fluxograma?
Site Map ≠ Fluxograma
Cataloga as seções do
sistema.
É ótimo para ter um
overview (visão geral).
Identifica as interações
sistema-usuário.
Na construção dele você
vai inevitavelmente
complementar o site map.

Atividade - Site Map
WhatsApp

Diagrama
01
Boas vindas

01
Boas vindas
02
Digite o celular
Digite o número do seu celular
OK

01
Boas vindas
02
Digite o celular
OK
03
...

01
Boas vindas
02
Digite o celular
OK
03
...
... ... ...

20
01
minutos
Boas vindas
02
empresariais
Digite o celular
OK
03
...
... ... ...

20
minutos
01
empresariais
10
minutos
Boas vindas
02
Digite o celular
OK
03
...
... ... ...

01
tempo
esgotado
Boas vindas
02
Digite o celular
OK
03
...
... ... ...

Atividade - dados
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.

Atividade - dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone do whatsapp, chats,
pesquisar, nova mensagem,
whitmans chat, 12:06 PM, Zissou: ...,
“1”

Atividade - dados
contidos nelas.
Número da tela: XX
ícone da aplicação, nome da tela, botão
de pesquisa, botão de nova mensagem;
Mensagens - nome do usuário, hora/data
da msg, fragmento da mensagem,
número de mensagens novas

Atividade - dados
15
minutos
empresariais
contidos nelas.
Número da tela: XX

Atividade - dados
15
minutos
empresariais
8 minutos
contidos nelas.
Número da tela: XX

Atividade - dados
tempo
esgotado
contidos nelas.
Número da tela: XX

INTERFACES
O que são
Onde vivem?
Do que se alimentam?

Interface
Aquilo que interliga dois sistemas.
No nosso caso: humano e computador .

Interface
DIGITAL ou ANALÓGICA

LAS 10 HEURISTICAS
DE NIELSEN

Las 10 heurísticas de Nielsen
1) Feedback
2) Falar a linguagem do usuário
3) Saídas claramente demarcadas
4) Consistência
5) Prevenir erros
6) Minimizar a sobrecarga de memória do usuário
7) Atalhos
8) Diálogos simples e naturais
9) Boas mensagens de erro
10) Ajuda e documentação

Las 10 heurísticas de Nielsen
vidjuzinhu

O que é preciso saber
Interface
UI ID
AI
IxD
IHC
UX

Zoa
Interface
UI ID
AI
IxD
HCI
UX
User Interface
Interface Designer
Information
Architect
User Experience
Interaction Design
Human-Computer
Interaction

google: user experience venn diagram

google: elements of user experience

Android Guidelines
https://developer.android.com/

iOS Guidelines
Google: “iOS guidelines”

Elementos Básicos da UI
1 - Status Bar
2 - Navigation / Main Action Bar
3 - Content
4 - Tab Bar / Action Bar
5 - Navigation Bar
Google:
“Kinvey Mobile Cheatsheet”

O que eu tive que procurar
idev101.com

androidpixels.net

Tem algumas coisas prontas na internet... mas cuidado!

Links Essenciais
Ivo Mynttinen's iOS 7 Design Cheat Sheet
http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
Petrno Hejl's Android Design Cheat Sheet
http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/
Kintek Portkit
http://kintek.com.au/blog/portkit-ux-metaphor-equiva-lents-
for-ios-and-android/
Teehan & Lax
http://www.teehanlax.com/

Inspiração
Dribbble
https://dribbble.com/
UI Patterns
http://uipatterns.net/
Android App Patterns
http://www.android-app-patterns.com/
Mobile Patterns
http://www.mobile-patterns.com/

Considerações
Finais

Obrigado!
Roxius
eduardo@roxius.com
http://eduardo.roxius.com

Oficina Quick Start Mobile Design - R Design Recife 2014

Recommandé

Recommandé

Contenu connexe

Similaire à Oficina Quick Start Mobile Design - R Design Recife 2014

Similaire à Oficina Quick Start Mobile Design - R Design Recife 2014 (20)

Oficina Quick Start Mobile Design - R Design Recife 2014