Claudia Bordin
Projeto de Artefatos Interativos

concepção
                                   Rodrigues da Silva
                                   UTFPR




       e   avaliação
                arquitetura
                prototipação
                   avaliação
estamos falando de...
DESIGN DE APLICATIVOS


                        ahhh, eu já sei o que é...
Você diz que sabe tudo sobre aplicativos?




Então me conte, quais as características
um app web optimized e um native
application?
ok, vamos do começo...

apps =aplicativos
               softwares que servem
               para uma determinada
               função ou tarefa

                Existem vários tipos: sistemas operacionais,
                softwares de sistema (ferramentas,
                jogos,...) , web based,...
o que se fala, na atualidade, são sobre os

aplicativos móveis
tablets,
smartphones,
pdas
qual a diferença?

web optimized/web based
um aplicativo ou website especificamente
projetado e desenvolvido nas dimensões,
interações e performances de um
navegador web



                             Ou outro relativo ao
                             dispositivo. Nokia/
                             Symbian OS.
native application
um aplicativo especificamente projetado,
desenvolvido e compilado para um
dispositivo específico, distribuído por um
ambiente client-server
native application
um aplicativo especificamente projetado,
desenvolvido e compilado para um
dispositivo específico, distribuído por um
ambiente client-server




                     ahhh, eu já entendi tudo...
É mesmo?

Então me explique, qual a
diferença na pesquisa, projeto
e desenvolvimento desses
aplicativos?
conhece a tua tela e te direi quem és


o básico
ipad
versões1/2: 1024X768 pixels (9,7 pol)
versão 3: 2048X1535 pixels (9,7 pol)
                            “retina display”
                            cada pixel é individualmente
                            imperceptível ao olho humano,
                            quando segurado a uma
                            distância normal
iphone
outras versões: 480x320 pixels
versão 4: 960x480 pixels (3,5 pol)
                             “retina display”
outros
smartphones
800x480 pixels em média (Nokia, Motorola, Samsung)
480x360 pixels em média (Blackberry, Palm)
outros
tablets
Média de 7 a 11 polegadas
mas é só isso, tamanho de tela? não subestime o


essencial
touch, pinch, rolling, tapping
a nova do Daft Punk???
         quase isso...
                         a interação com os dispositivos
                         é diferente da experiência do
                         clique/duplo clique/arraste
                         do desktop
De 29 a 44 pixels

interação e o tamanho do dedo
botões e áreas de touch
o conteúdo criado (imgs+código) exigem uma


performance
          diferenciada dos dispositivos




                                      crobalv.blogspot.com
práticas de projeto consolidadas
é desse jeito que se faz




                                   bit.ly/humaninterfaceguidelines
é preciso saber ...

                      barra de status
                      barra de navegação




                      área de conteúdo




                      barra de navegação
                      por seção
olha ai...
e isso significa...

user interface design
guidelines
                     servem para a elaboração de
                     protótipos, dentro das
                     especificações de cada sistema
E não esqueça do Steve Ballmer...
afinal, entender um poquito de código




não faz mal e alimenta...
e agora, será que dá pra começar logo?

meu primeiro
aplicativo
                           agora vem...
catálogo da iconografia paranaense
para tablet 10”/iphone                       17
                                             abril


etapa 1: conceito
pesquisar elementos da iconografia
paranaense.
                              elementos simbólicos
                              que representam a
                              cultura, região,
texto+                        costumes, hábitos,
                              lugares, etc...
imagens
aproxim. 8-10 itens
22
                            abril


etapa 2: wireframe

abertura   menu    mostra
           itens   item
24
                                abril


etapa 3: mockup
                       +


layout      clicável   ícones
finalizado
entrega final                             29
                                         abril
com apresentação/
vídeo de apresentação
                  como se apresenta um protótipo
                  utilizando um vídeo?
Introdução aos aplicativos web

Introdução aos aplicativos web

  • 1.
    Claudia Bordin Projeto deArtefatos Interativos concepção Rodrigues da Silva UTFPR e avaliação arquitetura prototipação avaliação
  • 2.
    estamos falando de... DESIGNDE APLICATIVOS ahhh, eu já sei o que é...
  • 3.
    Você diz quesabe tudo sobre aplicativos? Então me conte, quais as características um app web optimized e um native application?
  • 5.
    ok, vamos docomeço... apps =aplicativos softwares que servem para uma determinada função ou tarefa Existem vários tipos: sistemas operacionais, softwares de sistema (ferramentas, jogos,...) , web based,...
  • 6.
    o que sefala, na atualidade, são sobre os aplicativos móveis tablets, smartphones, pdas
  • 7.
    qual a diferença? weboptimized/web based um aplicativo ou website especificamente projetado e desenvolvido nas dimensões, interações e performances de um navegador web Ou outro relativo ao dispositivo. Nokia/ Symbian OS.
  • 8.
    native application um aplicativoespecificamente projetado, desenvolvido e compilado para um dispositivo específico, distribuído por um ambiente client-server
  • 9.
    native application um aplicativoespecificamente projetado, desenvolvido e compilado para um dispositivo específico, distribuído por um ambiente client-server ahhh, eu já entendi tudo...
  • 10.
    É mesmo? Então meexplique, qual a diferença na pesquisa, projeto e desenvolvimento desses aplicativos?
  • 12.
    conhece a tuatela e te direi quem és o básico
  • 13.
    ipad versões1/2: 1024X768 pixels(9,7 pol) versão 3: 2048X1535 pixels (9,7 pol) “retina display” cada pixel é individualmente imperceptível ao olho humano, quando segurado a uma distância normal
  • 14.
    iphone outras versões: 480x320pixels versão 4: 960x480 pixels (3,5 pol) “retina display”
  • 15.
    outros smartphones 800x480 pixels emmédia (Nokia, Motorola, Samsung) 480x360 pixels em média (Blackberry, Palm)
  • 17.
  • 19.
    mas é sóisso, tamanho de tela? não subestime o essencial
  • 20.
    touch, pinch, rolling,tapping a nova do Daft Punk??? quase isso... a interação com os dispositivos é diferente da experiência do clique/duplo clique/arraste do desktop
  • 21.
    De 29 a44 pixels interação e o tamanho do dedo botões e áreas de touch
  • 22.
    o conteúdo criado(imgs+código) exigem uma performance diferenciada dos dispositivos crobalv.blogspot.com
  • 23.
    práticas de projetoconsolidadas é desse jeito que se faz bit.ly/humaninterfaceguidelines
  • 24.
    é preciso saber... barra de status barra de navegação área de conteúdo barra de navegação por seção
  • 25.
  • 26.
    e isso significa... userinterface design guidelines servem para a elaboração de protótipos, dentro das especificações de cada sistema
  • 29.
    E não esqueçado Steve Ballmer...
  • 30.
    afinal, entender umpoquito de código não faz mal e alimenta...
  • 31.
    e agora, seráque dá pra começar logo? meu primeiro aplicativo agora vem...
  • 33.
    catálogo da iconografiaparanaense para tablet 10”/iphone 17 abril etapa 1: conceito pesquisar elementos da iconografia paranaense. elementos simbólicos que representam a cultura, região, texto+ costumes, hábitos, lugares, etc... imagens aproxim. 8-10 itens
  • 34.
    22 abril etapa 2: wireframe abertura menu mostra itens item
  • 35.
    24 abril etapa 3: mockup + layout clicável ícones finalizado
  • 36.
    entrega final 29 abril com apresentação/ vídeo de apresentação como se apresenta um protótipo utilizando um vídeo?