SlideShare a Scribd company logo
1 of 137
Download to read offline
Interfaces Embarcadas
                              Eduardo Novais - Design de Interfaces Gráficas




sábado, 21 de abril de 2012
Interfaces mobile e em telas touchscreen
                         estão se tornando cada vez mais popular.




sábado, 21 de abril de 2012
trendwatching.com (FEV/2012)

sábado, 21 de abril de 2012
POINT-KNOW-BUY | Com métodos de busca e
                         informação à base de texto largamente disponíveis à
                         maioria das pessoas, (...) inicia-se a corrida para
                         disponibilizar métodos de busca e informações
                         visuais instantâneos (...). Logo, qualquer objeto(senão
                         pessoa) no mundo real poderá ser "conhecido" por
                         consumidores equipados com smartphones (...).
                         Estes aparelhos poderão ser apontados a qualquer
                         coisa para obter/encontrar informações
                         pertinentes, sempre que seus usuários quiserem. E
                         claro, algum tipo de comércio baseado nisso deverá
                         vir em seguida ;-)



sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Divisão do
        Mercado em
        Duas
        Plataformas


sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Têm-se aí, um mercado já não tão novo mas
                         ainda cheio de oportunidades e crescimento




sábado, 21 de abril de 2012
interfaces mobile




sábado, 21 de abril de 2012
O design para tais aplicativos é diferente
                         para páginas Web e R.I.A.




sábado, 21 de abril de 2012
Uso
                         Planejamento
                         Tela
                         Ícone
                         Teste


sábado, 21 de abril de 2012
Uso
                         Planejamento
                         Tela
                         Ícone
                         Teste


sábado, 21 de abril de 2012
Situações de Uso



sábado, 21 de abril de 2012
Considerar o que as pessoas estão fazendo
                         enquanto estão usando seu aplicativo.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
O horário de pico do uso de um iPad para
                         entretenimento é de 20 às 23 hs.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Já o iPhone pode ser utilizado em filas de
                         banco ou dentro de um ônibus.




sábado, 21 de abril de 2012
Manipulando a interface



sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
O dedo é maior e menos preciso que um
                         mouse.




sábado, 21 de abril de 2012
As área ativas em uma interface touchscreen
                         devem ter uma margem de erro, sem
                         controles muito próximos.




sábado, 21 de abril de 2012
O tamanho mínimo que a Apple sugere é de
                         44 x 44 px.




sábado, 21 de abril de 2012
Se a área visual de um controle é menor que
                         a mínima recomendada, certifique-se de que
                         a área da tela ativa que responde ao toque
                         de um usuário seja suficiente grande para
                         garantir a operação.




sábado, 21 de abril de 2012
Padrões



sábado, 21 de abril de 2012
Usuários esperam certos comportamentos e
                         interfaces. Não se usa o gesto de pinch para
                         nenhuma função além de aumento ou
                         redução de zoom.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Gesture              Action

                 Tap          To press or select a control or item (analogous to a single mouse click).

                              To scroll or pan (that is, move side to side).
                Drag
                              To drag an element.

                Flick         To scroll or pan quickly.

                              With one finger, to reveal the Delete button in a table-view row or to reveal
               Swipe          Notification Center (from the top edge of the screen).
                              With four fingers, to switch between apps on iPad.
                              To zoom in and center a block of content or an image.
          Double tap
                              To zoom out (if already zoomed in).

                              Pinch open to zoom in.
               Pinch
                              Pinch close to zoom out.

       Touch and hold         In editable or selectable text, to display a magnified view for cursor positioning.


               Shake          To initiate an undo or redo action.


sábado, 21 de abril de 2012
Esquemas de cores oferecem um pouco mais
                         de liberdade criativa.




sábado, 21 de abril de 2012
Uso
                         Planejamento
                         Tela
                         Ícone
                         Teste


sábado, 21 de abril de 2012
Definições



sábado, 21 de abril de 2012
Defina claramente o objetivo de seu app
                         antes de pensar no visual, bem como seu
                         público-alvo.




sábado, 21 de abril de 2012
Defina o recurso principal do aplicativo o
                         quanto antes. Não se desvie desse objetivo
                         colocando funções opcionais.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Público-alvo



sábado, 21 de abril de 2012
Planeje o aplicativo sempre na perspectiva
                         do usuário.




sábado, 21 de abril de 2012
Cada público tem seu estilo: um aplicativos
                         de negócios não deve ter um visual cartoon.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
O estilo couro costurado no app "Find my
                         friends" é um exemplo do que não deve ser
                         feito




sábado, 21 de abril de 2012
Não projete o app da maneira mais fácil de
                         desenvolver.




sábado, 21 de abril de 2012
Estrutura



sábado, 21 de abril de 2012
Comece o processo de design com a
                         estrutura de navegação e, em seguida crie os
                         blocos de funções principais.




sábado, 21 de abril de 2012
Desenhe o fluxograma completo do
                         aplicativo conectando todas as telas e
                         pontos.




sábado, 21 de abril de 2012
Pense no seu App uma tela por vez.
                         Concentre-se no objetivo principal que cada
                         tela vai ter.




sábado, 21 de abril de 2012
Comece com estrutura, arquitetura de
                         informação e padrões de interação bem
                         elaborados, e mantenha-os consistentes.
                         Assim, pode-se acrescentar características
                         secundárias sem comprometer o núcleo do
                         app.




sábado, 21 de abril de 2012
Evite mostrar muitas informações: amontoar
                         as coisas em telas pequenas confude o
                         usuário.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Desenvolva o projeto e funcionalidade o
                         máximo que puder no papel, usando
                         estênceis disponíveis para iPad e iPhone
                         como guias.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Desenvolva o mock-up do aplicativo, retire
                         captura das telas e visualize-as no aplicativos
                         de fotos para garantir que sejam bem
                         apresentadas.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Defina o nível de personalização que sua
                         interface terá. Lembre-se disso em todas as
                         fases.




sábado, 21 de abril de 2012
Certifique-se que o usuário possa encontrar
                         as características mais importantes do app
                         em um ou dois toques. Mesmo os mais
                         avançados devem ser acessados em no
                         máximo 3 toques.




sábado, 21 de abril de 2012
Android



sábado, 21 de abril de 2012
Se portar algum aplicativo para Android,
                         alguns aparelhos trabalham com layout fixo,
                         vale redesenhar algumas telas.




sábado, 21 de abril de 2012
Por ter outras formas de interação, o uso de
                         uma app Andróid pode variar bastante.




sábado, 21 de abril de 2012
Uso
                         Planejamento
                         Tela
                         Ícone
                         Teste


sábado, 21 de abril de 2012
Definições



sábado, 21 de abril de 2012
A principal diferença em projetar para a web
                         e para tablet é que cada elemento tem uma
                         posição fixa, diferente da web. Isso requer
                         cuidado, mas deve ser encarado com um
                         benefício.




sábado, 21 de abril de 2012
Lembre-se também que o tamanho de tela
                         em dispositivos móveis varia bastante




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Restrições



sábado, 21 de abril de 2012
As retrições de um smartphone restringem
                         o projeto de uma app somente para sua
                         função principal.

                         Já em um tablet, podemos considerar a
                         inclusão de recursos adicionais.




sábado, 21 de abril de 2012
Projetando para
                              diferentes telas


sábado, 21 de abril de 2012
Ao projetar para iPad e para iPhone, comece
                         sempre pela tela maior e depois simplifique o
                         design para a menor.




sábado, 21 de abril de 2012
Aproveite o máximo dos modos retrato e
                         paisagem para incorporar diferentes pontos
                         de vista e funções.




sábado, 21 de abril de 2012
Esticar um layout de um smartphone para
                         um tablet pode parece mais fácil, mas a
                         maneira indicada - embora demorada - é
                         repensar totalmente a interação.




sábado, 21 de abril de 2012
Dicas



sábado, 21 de abril de 2012
Em apps para uso em tempo real (como
                         jogos) é muito importante deixar os
                         elementos principais grandes de forma que
                         sejam selecionados com facilidade.




sábado, 21 de abril de 2012
Pelas suas limitações (falta de teclado, tela
                         pequena e poucos botões físicos), é
                         necessário uma hierarquia das partes mais
                         importantes de cada tela.

                         Se um botão é apertado constantemente,
                         deixe-o na parte inferior da tela.




sábado, 21 de abril de 2012
Uso
                         Planejamento
                         Tela
                         Ícone
                         Teste


sábado, 21 de abril de 2012
Se um ícone não chama
                     a atenção, ele não
                    cumpre sua tarefa.


sábado, 21 de abril de 2012
O ícone é a primeira impressão que o
                         usuário tem do app. Se ele for mal feito, você
                         não terá sucesso.




sábado, 21 de abril de 2012
O ícone NÃO precisa comunicar todas as
                         funções do app, mas deve parecer
                         profissional e ter relação com a interface de
                         seu aplicativo.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
O ícone pode ser detalhado, mas esse
                         detalhe não pode prejudicar o seu foco
                         central.




sábado, 21 de abril de 2012
Evite colocar textos no ícone: mantenha-o
                         como uma representação visual do aplicativo.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Um bom ícone deve mostrar suas funções
                         com clareza e transparência, mas de uma
                         forma visualmente atraente.




sábado, 21 de abril de 2012
Usuários de iOs são exigentes em relação
                         aos ícones que selecionam na tela principal.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Planejamento



sábado, 21 de abril de 2012
Ao desenvolver um ícone, compare-o com
                         outros das principais categorias da app store.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Desenvolva um mock-up do ícone no meio
                         de outros apps.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Lembre-se de criar todos os tamanhos
                         possíveis para garantir que o ícone será
                         exibido com boa resolução.




sábado, 21 de abril de 2012
Se a Apple colocá-lo em destaque, haverá
                         poucos dias para mandar uma versão em
                         alta-resolução.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Dicas



sábado, 21 de abril de 2012
Evite deixar para pensar no ícone muito
                         tarde.




sábado, 21 de abril de 2012
Ícones simples são sempre os melhores.




sábado, 21 de abril de 2012
Uso
                         Planejamento
                         Tela
                         Ícone
                         Teste


sábado, 21 de abril de 2012
Peça a alguém que não conhece o projeto
                         olhar o esboço de seu projeto e dizer se as
                         funções parecem naturais a ele.




sábado, 21 de abril de 2012
Mostre o resultado a algumas pessoas que
                         não conhecem o app e confira se entendem
                         o conceito.




sábado, 21 de abril de 2012
Encontre um usuário com mãos grandes,
                         pois é a forma mais eficaz para descobrir se
                         algum elemento está de difícil acesso.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Quando tiver um protótipo funcional,
                         convide alguém para um café em troca de
                         um teste de usabilidade informal de 10
                         minutos.




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Faça testes finais do app em dispositivos
                         reais. (Ainda mais se for para Android).




sábado, 21 de abril de 2012
Páginas Mobile




sábado, 21 de abril de 2012
Rapidez



sábado, 21 de abril de 2012
Bons sites mobile são elegantes e simples.
                         Tente entender o que as pessoas que estão
                         visitando o seu site vão realmente querer
                         ver - pesquise aos seis clientes o que é
                         importante para eles e faça considerações
                         sobre que informações eles irão querer
                         acessar rapidamente, tais como informações
                         de reserva, cardápio e localização em uma
                         página de um restaurante.



sábado, 21 de abril de 2012
Arquitetura limitada



sábado, 21 de abril de 2012
Tente manter o máximo de três níveis de
                         navegação em um site mobile. Alguns
                         designers tentam se manter em apenas dois
                         níveis. Usuários de sites mobile querem a
                         informação rapidamente, eles não irão
                         querer clivar em vários locais até chegar na
                         informação que desejam




sábado, 21 de abril de 2012
Tipografia



sábado, 21 de abril de 2012
A antiga regra de tipografia para web
                              ainda é válida por aqui, tente evitar fontes
                              com serifa a não ser que a fonte muito
                              boa leitura. A boa notícia é que com
                              fontes incorporadas, abre-se uma grande
                              gama de possibilidades. Ainda assim,
                              mantenha as coisas o mais simples
                              possíveis.




sábado, 21 de abril de 2012
Imagens



sábado, 21 de abril de 2012
Criar um gráfico em 72 dpi implica em uma
                         imagem pixelada em um iPhone4. Não há
                         problema em fazer uma imagem que é maior
                         do que o mínimo necessário - usando um
                         JPEG otimizado para que o arquivo não seja
                         muito grande - e, em seguida deixar o código
                         cuidar de encolhê-lo onde for necessário.




sábado, 21 de abril de 2012
Perspectiva do usuário



sábado, 21 de abril de 2012
Tente compreender o uso do dispositivo do
                         ponto de vista do usuário. Teste o seu design
                         em um dispositivo e peça para o seus
                         clientes testarem também, assim você
                         poderá ver que existem algumas informações
                         que não deveriam estar ali ou que não foram
                         incluídas. Teste com usuário é sempre muito
                         importante.




sábado, 21 de abril de 2012
Alivie a carga



sábado, 21 de abril de 2012
Quando as pessoas acessam um site mobile
                         elas não estão em casa. É possível que eles
                         estejam inclusive caminhando. Muito usuários
                         ainda tem o limite de dados. Assim, se seu
                         site é muito cheio de imagens, é possível que
                         ele saia também muito caro para o seu
                         usuário.




sábado, 21 de abril de 2012
Construa
                              Relacionamentos


sábado, 21 de abril de 2012
Já que o design é o que primeiro vende o seu
                         produto, a relação do usuário nasce entre ele
                         e o website. Tudo diz respeito a como ele
                         interage com o site e faz o que deseja. A
                         apresentação do site deve ser fluida e
                         simples para poder construir um forte
                         relacionamento com o usuário.




sábado, 21 de abril de 2012
Mesmas diferenças



sábado, 21 de abril de 2012
Ainda que você precise estar consciente do
                         fato de que nem todo mundo está usando o
                         mesmo dispositivo - por exemplo, nem todos
                         os smartphones têm touchscreens - a
                         tecnologia utilizada em diferentes
                         dispositivos móveis é quase a mesma. Então
                         lembre-se que nem todos tem a mesma
                         resolução de tela ou formas de entrada de
                         dados, mas não se preocupe muito com isso.



sábado, 21 de abril de 2012
Inspiração




sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Referências




sábado, 21 de abril de 2012
http://trendwatching.com/pt/trends/
                         pointknowbuy/

                         http://blog.nielsen.com/nielsenwire/
                         consumer/more-us-consumers-choosing-
                         smartphones-as-apple-closes-the-gap-on-
                         android/

                         http://blog.iskysoft.com/category/mac/



sábado, 21 de abril de 2012
http://developer.apple.com/library/ios/
                         #DOCUMENTATION/UserExperience/
                         Conceptual/MobileHIG/Characteristics/
                         Characteristics.html#//apple_ref/doc/uid/
                         TP40006556-CH7-SW7

                         http://www.tentandote.com/2010/03/02/
                         gallery-for-prototyping-android-applications-
                         en-galeria-para-prototipar-aplicaciones-de-
                         android-es/


sábado, 21 de abril de 2012
http://www.rainydaymagazine.com/
                         RDM2010/Home/July/Week5/
                         RDMHomeJul3010.htm

                         http://emilychang.com/2010/03/ipad-
                         templates-and-stencils/

                         http://blog.vovici.com/Portals/60483/images/
                         Screen_resolution_by_device.png

                         http://www.macstories.net/ipad/imockups/


sábado, 21 de abril de 2012
http://www.computerarts.co.uk/features/50-
                         tips-designing-brilliant-ios-apps

                         http://www.androidpatterns.com/

                         http://www.iosinspires.me/

                         http://www.iosinspires.me/category/appicons/

                         http://mrgan.tumblr.com/post/708404794/
                         ios-app-icon-sizes


sábado, 21 de abril de 2012
http://developer.apple.com/library/ios/
                         #DOCUMENTATION/UserExperience/
                         Conceptual/MobileHIG/Characteristics/
                         Characteristics.html#//apple_ref/doc/uid/
                         TP40006556-CH7-SW1

                         http://developer.apple.com/library/ios/
                         #DOCUMENTATION/UserExperience/
                         Conceptual/MobileHIG/
                         UIElementGuidelines/
                         UIElementGuidelines.html


sábado, 21 de abril de 2012
http://mobile-patterns.com/

                         http://pttrns.com/

                         http://kenyarmosh.com/blog/ios-pattern-
                         slide-out-navigation/

                         http://androidniceties.tumblr.com/

                         http://mobilegui.net/inspiration/


sábado, 21 de abril de 2012

More Related Content

Similar to [dig2012] 12 - Interfaces mobile

Design de Interface do Aplicativo Sol Baterias
Design de Interface do Aplicativo Sol BateriasDesign de Interface do Aplicativo Sol Baterias
Design de Interface do Aplicativo Sol BateriasWendel Marcelino
 
AI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 diasAI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 diasHuge
 
Redes Sociais - Aula Trecemd - 07/2011
Redes Sociais - Aula Trecemd - 07/2011Redes Sociais - Aula Trecemd - 07/2011
Redes Sociais - Aula Trecemd - 07/2011Helene Romanzini
 
Oficina apresentacao
Oficina apresentacaoOficina apresentacao
Oficina apresentacaoDaiany Zago
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisPaolo Passeri
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisInstituto Faber-Ludens
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisInstituto Faber-Ludens
 
Apostila final final
Apostila final finalApostila final final
Apostila final finalCarlos Melo
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisDaniel Lugondi
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisPaolo Passeri
 
Atividade dirigida unidade VII
Atividade dirigida unidade VIIAtividade dirigida unidade VII
Atividade dirigida unidade VIIMery Salgueiro
 
Apresentacao (1) [reparado] [reparado] Mirivan
Apresentacao (1) [reparado] [reparado] MirivanApresentacao (1) [reparado] [reparado] Mirivan
Apresentacao (1) [reparado] [reparado] MirivanMirivan Carneiro Rios
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...Nelson Vasconcelos
 

Similar to [dig2012] 12 - Interfaces mobile (20)

Design de Interface do Aplicativo Sol Baterias
Design de Interface do Aplicativo Sol BateriasDesign de Interface do Aplicativo Sol Baterias
Design de Interface do Aplicativo Sol Baterias
 
AI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 diasAI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 dias
 
Redes Sociais - Aula Trecemd - 07/2011
Redes Sociais - Aula Trecemd - 07/2011Redes Sociais - Aula Trecemd - 07/2011
Redes Sociais - Aula Trecemd - 07/2011
 
Aula três
Aula  trêsAula  três
Aula três
 
Aula três
Aula  trêsAula  três
Aula três
 
Oficina apresentacao
Oficina apresentacaoOficina apresentacao
Oficina apresentacao
 
Mini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo MoveisMini Curso Design de Dispositivo Moveis
Mini Curso Design de Dispositivo Moveis
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos MóveisOficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
 
Apostila final final
Apostila final finalApostila final final
Apostila final final
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos Móveis
 
Atividade dirigida unidade VII
Atividade dirigida unidade VIIAtividade dirigida unidade VII
Atividade dirigida unidade VII
 
Apresentacao (1) [reparado] [reparado] Mirivan
Apresentacao (1) [reparado] [reparado] MirivanApresentacao (1) [reparado] [reparado] Mirivan
Apresentacao (1) [reparado] [reparado] Mirivan
 
Atividade dirigida 7
Atividade dirigida 7Atividade dirigida 7
Atividade dirigida 7
 
Atividade dirigida 7
Atividade dirigida 7Atividade dirigida 7
Atividade dirigida 7
 
Atividade dirigida 7
Atividade dirigida 7Atividade dirigida 7
Atividade dirigida 7
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
 
3 apres pb_g4
3 apres pb_g43 apres pb_g4
3 apres pb_g4
 

More from Eduardo Novais

[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismoEduardo Novais
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - DadaismoEduardo Novais
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02Eduardo Novais
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplinaEduardo Novais
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfacesEduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visualEduardo Novais
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na webEduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplinaEduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - coresEduardo Novais
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com VisualEduardo Novais
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre gridsEduardo Novais
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)Eduardo Novais
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - gridsEduardo Novais
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áureaEduardo Novais
 
[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visualEduardo Novais
 

More from Eduardo Novais (20)

16 - design de marcas
16 - design de marcas16 - design de marcas
16 - design de marcas
 
15 - escolha de tipos
15 - escolha de tipos15 - escolha de tipos
15 - escolha de tipos
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo
 
[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
 
[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual
 

Recently uploaded

arte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacionalarte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacionalidicacia
 
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...Colaborar Educacional
 
autismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entenderautismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entenderLucliaResende1
 
Poema sobre o mosquito Aedes aegipyti -
Poema sobre o mosquito Aedes aegipyti  -Poema sobre o mosquito Aedes aegipyti  -
Poema sobre o mosquito Aedes aegipyti -Mary Alvarenga
 
FORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de históriaFORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de históriaBenigno Andrade Vieira
 
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxSlides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresEu Prefiro o Paraíso.
 
Peixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES MonelosPeixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES MonelosAgrela Elvixeo
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXHisrelBlog
 
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdfEBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdfIBEE5
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfItaloAtsoc
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024gilmaraoliveira0612
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...Unidad de Espiritualidad Eudista
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxLuzia Gabriele
 
Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974AnaRitaFreitas7
 
Verbos - transitivos e intransitivos.pdf
Verbos -  transitivos e intransitivos.pdfVerbos -  transitivos e intransitivos.pdf
Verbos - transitivos e intransitivos.pdfKarinaSouzaCorreiaAl
 
Ressonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxRessonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxPatriciaFarias81
 

Recently uploaded (20)

(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
 
arte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacionalarte retrato de um povo - Expressão Cultural e Identidade Nacional
arte retrato de um povo - Expressão Cultural e Identidade Nacional
 
Abordagem 1. Análise textual (Severino, 2013).pdf
Abordagem 1. Análise textual (Severino, 2013).pdfAbordagem 1. Análise textual (Severino, 2013).pdf
Abordagem 1. Análise textual (Severino, 2013).pdf
 
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
PROJETO DE EXTENSÃO - SEGURANÇA, INOVAÇÃO E SUSTENTABILIDADE PARA O BEM COMUM...
 
autismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entenderautismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entender
 
Poema sobre o mosquito Aedes aegipyti -
Poema sobre o mosquito Aedes aegipyti  -Poema sobre o mosquito Aedes aegipyti  -
Poema sobre o mosquito Aedes aegipyti -
 
FORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de históriaFORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de história
 
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxSlides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de Gestores
 
Peixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES MonelosPeixeiras da Coruña. O Muro da Coruña. IES Monelos
Peixeiras da Coruña. O Muro da Coruña. IES Monelos
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
 
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdfEBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsx
 
Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974Trabalho DAC História 25 de Abril de 1974
Trabalho DAC História 25 de Abril de 1974
 
Verbos - transitivos e intransitivos.pdf
Verbos -  transitivos e intransitivos.pdfVerbos -  transitivos e intransitivos.pdf
Verbos - transitivos e intransitivos.pdf
 
Ressonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxRessonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptx
 
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
 

[dig2012] 12 - Interfaces mobile

  • 1. Interfaces Embarcadas Eduardo Novais - Design de Interfaces Gráficas sábado, 21 de abril de 2012
  • 2. Interfaces mobile e em telas touchscreen estão se tornando cada vez mais popular. sábado, 21 de abril de 2012
  • 4. POINT-KNOW-BUY | Com métodos de busca e informação à base de texto largamente disponíveis à maioria das pessoas, (...) inicia-se a corrida para disponibilizar métodos de busca e informações visuais instantâneos (...). Logo, qualquer objeto(senão pessoa) no mundo real poderá ser "conhecido" por consumidores equipados com smartphones (...). Estes aparelhos poderão ser apontados a qualquer coisa para obter/encontrar informações pertinentes, sempre que seus usuários quiserem. E claro, algum tipo de comércio baseado nisso deverá vir em seguida ;-) sábado, 21 de abril de 2012
  • 5. sábado, 21 de abril de 2012
  • 6. Divisão do Mercado em Duas Plataformas sábado, 21 de abril de 2012
  • 7. sábado, 21 de abril de 2012
  • 8. Têm-se aí, um mercado já não tão novo mas ainda cheio de oportunidades e crescimento sábado, 21 de abril de 2012
  • 9. interfaces mobile sábado, 21 de abril de 2012
  • 10. O design para tais aplicativos é diferente para páginas Web e R.I.A. sábado, 21 de abril de 2012
  • 11. Uso Planejamento Tela Ícone Teste sábado, 21 de abril de 2012
  • 12. Uso Planejamento Tela Ícone Teste sábado, 21 de abril de 2012
  • 13. Situações de Uso sábado, 21 de abril de 2012
  • 14. Considerar o que as pessoas estão fazendo enquanto estão usando seu aplicativo. sábado, 21 de abril de 2012
  • 15. sábado, 21 de abril de 2012
  • 16. O horário de pico do uso de um iPad para entretenimento é de 20 às 23 hs. sábado, 21 de abril de 2012
  • 17. sábado, 21 de abril de 2012
  • 18. Já o iPhone pode ser utilizado em filas de banco ou dentro de um ônibus. sábado, 21 de abril de 2012
  • 19. Manipulando a interface sábado, 21 de abril de 2012
  • 20. sábado, 21 de abril de 2012
  • 21. O dedo é maior e menos preciso que um mouse. sábado, 21 de abril de 2012
  • 22. As área ativas em uma interface touchscreen devem ter uma margem de erro, sem controles muito próximos. sábado, 21 de abril de 2012
  • 23. O tamanho mínimo que a Apple sugere é de 44 x 44 px. sábado, 21 de abril de 2012
  • 24. Se a área visual de um controle é menor que a mínima recomendada, certifique-se de que a área da tela ativa que responde ao toque de um usuário seja suficiente grande para garantir a operação. sábado, 21 de abril de 2012
  • 25. Padrões sábado, 21 de abril de 2012
  • 26. Usuários esperam certos comportamentos e interfaces. Não se usa o gesto de pinch para nenhuma função além de aumento ou redução de zoom. sábado, 21 de abril de 2012
  • 27. sábado, 21 de abril de 2012
  • 28. Gesture Action Tap To press or select a control or item (analogous to a single mouse click). To scroll or pan (that is, move side to side). Drag To drag an element. Flick To scroll or pan quickly. With one finger, to reveal the Delete button in a table-view row or to reveal Swipe Notification Center (from the top edge of the screen). With four fingers, to switch between apps on iPad. To zoom in and center a block of content or an image. Double tap To zoom out (if already zoomed in). Pinch open to zoom in. Pinch Pinch close to zoom out. Touch and hold In editable or selectable text, to display a magnified view for cursor positioning. Shake To initiate an undo or redo action. sábado, 21 de abril de 2012
  • 29. Esquemas de cores oferecem um pouco mais de liberdade criativa. sábado, 21 de abril de 2012
  • 30. Uso Planejamento Tela Ícone Teste sábado, 21 de abril de 2012
  • 32. Defina claramente o objetivo de seu app antes de pensar no visual, bem como seu público-alvo. sábado, 21 de abril de 2012
  • 33. Defina o recurso principal do aplicativo o quanto antes. Não se desvie desse objetivo colocando funções opcionais. sábado, 21 de abril de 2012
  • 34. sábado, 21 de abril de 2012
  • 36. Planeje o aplicativo sempre na perspectiva do usuário. sábado, 21 de abril de 2012
  • 37. Cada público tem seu estilo: um aplicativos de negócios não deve ter um visual cartoon. sábado, 21 de abril de 2012
  • 38. sábado, 21 de abril de 2012
  • 39. sábado, 21 de abril de 2012
  • 40. sábado, 21 de abril de 2012
  • 41. sábado, 21 de abril de 2012
  • 42. O estilo couro costurado no app "Find my friends" é um exemplo do que não deve ser feito sábado, 21 de abril de 2012
  • 43. Não projete o app da maneira mais fácil de desenvolver. sábado, 21 de abril de 2012
  • 44. Estrutura sábado, 21 de abril de 2012
  • 45. Comece o processo de design com a estrutura de navegação e, em seguida crie os blocos de funções principais. sábado, 21 de abril de 2012
  • 46. Desenhe o fluxograma completo do aplicativo conectando todas as telas e pontos. sábado, 21 de abril de 2012
  • 47. Pense no seu App uma tela por vez. Concentre-se no objetivo principal que cada tela vai ter. sábado, 21 de abril de 2012
  • 48. Comece com estrutura, arquitetura de informação e padrões de interação bem elaborados, e mantenha-os consistentes. Assim, pode-se acrescentar características secundárias sem comprometer o núcleo do app. sábado, 21 de abril de 2012
  • 49. Evite mostrar muitas informações: amontoar as coisas em telas pequenas confude o usuário. sábado, 21 de abril de 2012
  • 50. sábado, 21 de abril de 2012
  • 51. Desenvolva o projeto e funcionalidade o máximo que puder no papel, usando estênceis disponíveis para iPad e iPhone como guias. sábado, 21 de abril de 2012
  • 52. sábado, 21 de abril de 2012
  • 53. sábado, 21 de abril de 2012
  • 54. sábado, 21 de abril de 2012
  • 55. Desenvolva o mock-up do aplicativo, retire captura das telas e visualize-as no aplicativos de fotos para garantir que sejam bem apresentadas. sábado, 21 de abril de 2012
  • 56. sábado, 21 de abril de 2012
  • 57. sábado, 21 de abril de 2012
  • 58. Defina o nível de personalização que sua interface terá. Lembre-se disso em todas as fases. sábado, 21 de abril de 2012
  • 59. Certifique-se que o usuário possa encontrar as características mais importantes do app em um ou dois toques. Mesmo os mais avançados devem ser acessados em no máximo 3 toques. sábado, 21 de abril de 2012
  • 60. Android sábado, 21 de abril de 2012
  • 61. Se portar algum aplicativo para Android, alguns aparelhos trabalham com layout fixo, vale redesenhar algumas telas. sábado, 21 de abril de 2012
  • 62. Por ter outras formas de interação, o uso de uma app Andróid pode variar bastante. sábado, 21 de abril de 2012
  • 63. Uso Planejamento Tela Ícone Teste sábado, 21 de abril de 2012
  • 65. A principal diferença em projetar para a web e para tablet é que cada elemento tem uma posição fixa, diferente da web. Isso requer cuidado, mas deve ser encarado com um benefício. sábado, 21 de abril de 2012
  • 66. Lembre-se também que o tamanho de tela em dispositivos móveis varia bastante sábado, 21 de abril de 2012
  • 67. sábado, 21 de abril de 2012
  • 69. As retrições de um smartphone restringem o projeto de uma app somente para sua função principal. Já em um tablet, podemos considerar a inclusão de recursos adicionais. sábado, 21 de abril de 2012
  • 70. Projetando para diferentes telas sábado, 21 de abril de 2012
  • 71. Ao projetar para iPad e para iPhone, comece sempre pela tela maior e depois simplifique o design para a menor. sábado, 21 de abril de 2012
  • 72. Aproveite o máximo dos modos retrato e paisagem para incorporar diferentes pontos de vista e funções. sábado, 21 de abril de 2012
  • 73. Esticar um layout de um smartphone para um tablet pode parece mais fácil, mas a maneira indicada - embora demorada - é repensar totalmente a interação. sábado, 21 de abril de 2012
  • 74. Dicas sábado, 21 de abril de 2012
  • 75. Em apps para uso em tempo real (como jogos) é muito importante deixar os elementos principais grandes de forma que sejam selecionados com facilidade. sábado, 21 de abril de 2012
  • 76. Pelas suas limitações (falta de teclado, tela pequena e poucos botões físicos), é necessário uma hierarquia das partes mais importantes de cada tela. Se um botão é apertado constantemente, deixe-o na parte inferior da tela. sábado, 21 de abril de 2012
  • 77. Uso Planejamento Tela Ícone Teste sábado, 21 de abril de 2012
  • 78. Se um ícone não chama a atenção, ele não cumpre sua tarefa. sábado, 21 de abril de 2012
  • 79. O ícone é a primeira impressão que o usuário tem do app. Se ele for mal feito, você não terá sucesso. sábado, 21 de abril de 2012
  • 80. O ícone NÃO precisa comunicar todas as funções do app, mas deve parecer profissional e ter relação com a interface de seu aplicativo. sábado, 21 de abril de 2012
  • 81. sábado, 21 de abril de 2012
  • 82. O ícone pode ser detalhado, mas esse detalhe não pode prejudicar o seu foco central. sábado, 21 de abril de 2012
  • 83. Evite colocar textos no ícone: mantenha-o como uma representação visual do aplicativo. sábado, 21 de abril de 2012
  • 84. sábado, 21 de abril de 2012
  • 85. Um bom ícone deve mostrar suas funções com clareza e transparência, mas de uma forma visualmente atraente. sábado, 21 de abril de 2012
  • 86. Usuários de iOs são exigentes em relação aos ícones que selecionam na tela principal. sábado, 21 de abril de 2012
  • 87. sábado, 21 de abril de 2012
  • 88. sábado, 21 de abril de 2012
  • 89. sábado, 21 de abril de 2012
  • 91. Ao desenvolver um ícone, compare-o com outros das principais categorias da app store. sábado, 21 de abril de 2012
  • 92. sábado, 21 de abril de 2012
  • 93. sábado, 21 de abril de 2012
  • 94. Desenvolva um mock-up do ícone no meio de outros apps. sábado, 21 de abril de 2012
  • 95. sábado, 21 de abril de 2012
  • 96. Lembre-se de criar todos os tamanhos possíveis para garantir que o ícone será exibido com boa resolução. sábado, 21 de abril de 2012
  • 97. Se a Apple colocá-lo em destaque, haverá poucos dias para mandar uma versão em alta-resolução. sábado, 21 de abril de 2012
  • 98. sábado, 21 de abril de 2012
  • 99. Dicas sábado, 21 de abril de 2012
  • 100. Evite deixar para pensar no ícone muito tarde. sábado, 21 de abril de 2012
  • 101. Ícones simples são sempre os melhores. sábado, 21 de abril de 2012
  • 102. Uso Planejamento Tela Ícone Teste sábado, 21 de abril de 2012
  • 103. Peça a alguém que não conhece o projeto olhar o esboço de seu projeto e dizer se as funções parecem naturais a ele. sábado, 21 de abril de 2012
  • 104. Mostre o resultado a algumas pessoas que não conhecem o app e confira se entendem o conceito. sábado, 21 de abril de 2012
  • 105. Encontre um usuário com mãos grandes, pois é a forma mais eficaz para descobrir se algum elemento está de difícil acesso. sábado, 21 de abril de 2012
  • 106. sábado, 21 de abril de 2012
  • 107. Quando tiver um protótipo funcional, convide alguém para um café em troca de um teste de usabilidade informal de 10 minutos. sábado, 21 de abril de 2012
  • 108. sábado, 21 de abril de 2012
  • 109. Faça testes finais do app em dispositivos reais. (Ainda mais se for para Android). sábado, 21 de abril de 2012
  • 110. Páginas Mobile sábado, 21 de abril de 2012
  • 111. Rapidez sábado, 21 de abril de 2012
  • 112. Bons sites mobile são elegantes e simples. Tente entender o que as pessoas que estão visitando o seu site vão realmente querer ver - pesquise aos seis clientes o que é importante para eles e faça considerações sobre que informações eles irão querer acessar rapidamente, tais como informações de reserva, cardápio e localização em uma página de um restaurante. sábado, 21 de abril de 2012
  • 113. Arquitetura limitada sábado, 21 de abril de 2012
  • 114. Tente manter o máximo de três níveis de navegação em um site mobile. Alguns designers tentam se manter em apenas dois níveis. Usuários de sites mobile querem a informação rapidamente, eles não irão querer clivar em vários locais até chegar na informação que desejam sábado, 21 de abril de 2012
  • 115. Tipografia sábado, 21 de abril de 2012
  • 116. A antiga regra de tipografia para web ainda é válida por aqui, tente evitar fontes com serifa a não ser que a fonte muito boa leitura. A boa notícia é que com fontes incorporadas, abre-se uma grande gama de possibilidades. Ainda assim, mantenha as coisas o mais simples possíveis. sábado, 21 de abril de 2012
  • 117. Imagens sábado, 21 de abril de 2012
  • 118. Criar um gráfico em 72 dpi implica em uma imagem pixelada em um iPhone4. Não há problema em fazer uma imagem que é maior do que o mínimo necessário - usando um JPEG otimizado para que o arquivo não seja muito grande - e, em seguida deixar o código cuidar de encolhê-lo onde for necessário. sábado, 21 de abril de 2012
  • 119. Perspectiva do usuário sábado, 21 de abril de 2012
  • 120. Tente compreender o uso do dispositivo do ponto de vista do usuário. Teste o seu design em um dispositivo e peça para o seus clientes testarem também, assim você poderá ver que existem algumas informações que não deveriam estar ali ou que não foram incluídas. Teste com usuário é sempre muito importante. sábado, 21 de abril de 2012
  • 121. Alivie a carga sábado, 21 de abril de 2012
  • 122. Quando as pessoas acessam um site mobile elas não estão em casa. É possível que eles estejam inclusive caminhando. Muito usuários ainda tem o limite de dados. Assim, se seu site é muito cheio de imagens, é possível que ele saia também muito caro para o seu usuário. sábado, 21 de abril de 2012
  • 123. Construa Relacionamentos sábado, 21 de abril de 2012
  • 124. Já que o design é o que primeiro vende o seu produto, a relação do usuário nasce entre ele e o website. Tudo diz respeito a como ele interage com o site e faz o que deseja. A apresentação do site deve ser fluida e simples para poder construir um forte relacionamento com o usuário. sábado, 21 de abril de 2012
  • 125. Mesmas diferenças sábado, 21 de abril de 2012
  • 126. Ainda que você precise estar consciente do fato de que nem todo mundo está usando o mesmo dispositivo - por exemplo, nem todos os smartphones têm touchscreens - a tecnologia utilizada em diferentes dispositivos móveis é quase a mesma. Então lembre-se que nem todos tem a mesma resolução de tela ou formas de entrada de dados, mas não se preocupe muito com isso. sábado, 21 de abril de 2012
  • 127. Inspiração sábado, 21 de abril de 2012
  • 128. sábado, 21 de abril de 2012
  • 129. sábado, 21 de abril de 2012
  • 130. sábado, 21 de abril de 2012
  • 131. Referências sábado, 21 de abril de 2012
  • 132. http://trendwatching.com/pt/trends/ pointknowbuy/ http://blog.nielsen.com/nielsenwire/ consumer/more-us-consumers-choosing- smartphones-as-apple-closes-the-gap-on- android/ http://blog.iskysoft.com/category/mac/ sábado, 21 de abril de 2012
  • 133. http://developer.apple.com/library/ios/ #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/Characteristics/ Characteristics.html#//apple_ref/doc/uid/ TP40006556-CH7-SW7 http://www.tentandote.com/2010/03/02/ gallery-for-prototyping-android-applications- en-galeria-para-prototipar-aplicaciones-de- android-es/ sábado, 21 de abril de 2012
  • 134. http://www.rainydaymagazine.com/ RDM2010/Home/July/Week5/ RDMHomeJul3010.htm http://emilychang.com/2010/03/ipad- templates-and-stencils/ http://blog.vovici.com/Portals/60483/images/ Screen_resolution_by_device.png http://www.macstories.net/ipad/imockups/ sábado, 21 de abril de 2012
  • 135. http://www.computerarts.co.uk/features/50- tips-designing-brilliant-ios-apps http://www.androidpatterns.com/ http://www.iosinspires.me/ http://www.iosinspires.me/category/appicons/ http://mrgan.tumblr.com/post/708404794/ ios-app-icon-sizes sábado, 21 de abril de 2012
  • 136. http://developer.apple.com/library/ios/ #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/Characteristics/ Characteristics.html#//apple_ref/doc/uid/ TP40006556-CH7-SW1 http://developer.apple.com/library/ios/ #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/ UIElementGuidelines/ UIElementGuidelines.html sábado, 21 de abril de 2012
  • 137. http://mobile-patterns.com/ http://pttrns.com/ http://kenyarmosh.com/blog/ios-pattern- slide-out-navigation/ http://androidniceties.tumblr.com/ http://mobilegui.net/inspiration/ sábado, 21 de abril de 2012