Introdução aos aplicativos web

37
concepção avaliação e Projeto de Artefatos Interativos arquitetura prototipação avaliação Claudia Bordin Rodrigues da Silva UTFPR

description

Introdução aos conceitos de elaboração de aplicativos para a disciplina de Tecnologias Digitais Aplicadas ao Projeto Gráfico

Transcript of Introdução aos aplicativos web

Page 1: Introdução aos aplicativos web

concepçãoavaliaçãoe

Projeto de Artefatos Interativos

arquitetura prototipação

avaliação

Claudia Bordin Rodrigues da Silva UTFPR

Page 2: Introdução aos aplicativos web

DESIGN DE APLICATIVOSestamos falando de...

ahhh, eu já sei o que é...

Page 3: Introdução aos aplicativos web

Então me conte, quais as características um app web optimized e um native application?

Você diz que sabe tudo sobre aplicativos?

Page 4: Introdução aos aplicativos web
Page 5: Introdução aos aplicativos web

apps =aplicativosok, vamos do começo...

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

Existem vários tipos: sistemas operacionais, softwares de sistema (ferramentas, jogos,...) , web based,...

Page 6: Introdução aos aplicativos web

aplicativos móveiso que se fala, na atualidade, são sobre os

tablets,smartphones,pdas

Page 7: Introdução aos aplicativos web

web optimized/web basedqual a diferença?

um aplicativo ou website especificamente projetado e desenvolvido nas dimensões, interações e performances de umnavegador web

Ou outro relativo ao dispositivo. Nokia/ Symbian OS.

Page 8: Introdução aos aplicativos web

native applicationum aplicativo especificamente projetado, desenvolvido e compilado para um dispositivo específico, distribuído por um ambiente client-server

Page 9: Introdução aos aplicativos web

native applicationum aplicativo especificamente projetado, desenvolvido e compilado para um dispositivo específico, distribuído por um ambiente client-server

ahhh, eu já entendi tudo...

Page 10: Introdução aos aplicativos web

É mesmo?

Então me explique, qual a diferença na pesquisa, projeto e desenvolvimento desses aplicativos?

Page 11: Introdução aos aplicativos web
Page 12: Introdução aos aplicativos web

o básicoconhece a tua tela e te direi quem és

Page 13: Introdução aos aplicativos web

ipadversõ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

Page 14: Introdução aos aplicativos web

iphoneoutras versões: 480x320 pixelsversão 4: 960x480 pixels (3,5 pol)

“retina display”

Page 15: Introdução aos aplicativos web

smartphones800x480 pixels em média (Nokia, Motorola, Samsung)

480x360 pixels em média (Blackberry, Palm)

outros

Page 16: Introdução aos aplicativos web
Page 17: Introdução aos aplicativos web

tabletsMédia de 7 a 11 polegadas

outros

Page 18: Introdução aos aplicativos web
Page 19: Introdução aos aplicativos web

essencialmas é só isso, tamanho de tela? não subestime o

Page 20: Introdução aos aplicativos web

touch, pinch, rolling, tappinga nova do Daft Punk???

quase isso...

a interação com os dispositivos é diferente da experiência do clique/duplo clique/arrastedo desktop

Page 21: Introdução aos aplicativos web

botões e áreas de touchinteração e o tamanho do dedo

De 29 a 44 pixels

Page 22: Introdução aos aplicativos web

performanceo conteúdo criado (imgs+código) exigem uma

diferenciada dos dispositivos

crobalv.blogspot.com

Page 23: Introdução aos aplicativos web

bit.ly/humaninterfaceguidelines

práticas de projeto consolidadas

é desse jeito que se faz

Page 24: Introdução aos aplicativos web

é preciso saber ...

barra de status

barra de navegação

área de conteúdo

barra de navegação por seção

Page 25: Introdução aos aplicativos web

olha ai...

Page 26: Introdução aos aplicativos web

e isso significa...

user interface designguidelines

servem para a elaboração de protótipos, dentro das especificações de cada sistema

Page 27: Introdução aos aplicativos web
Page 28: Introdução aos aplicativos web
Page 29: Introdução aos aplicativos web

E não esqueça do Steve Ballmer...

Page 30: Introdução aos aplicativos web

não faz mal e alimenta...

afinal, entender um poquito de código

Page 31: Introdução aos aplicativos web

e agora, será que dá pra começar logo?

meu primeiroaplicativo

agora vem...

Page 32: Introdução aos aplicativos web
Page 33: Introdução aos aplicativos web

etapa 1: conceito

texto+imagens

catálogo da iconografia paranaensepara tablet 10”/iphone

pesquisar elementos da iconografia paranaense.

elementos simbólicos que representam a cultura, região, costumes, hábitos, lugares, etc...

aproxim. 8-10 itens

17abril

Page 34: Introdução aos aplicativos web

etapa 2: wireframe

abertura menuitens

mostra item

22abril

Page 35: Introdução aos aplicativos web

+

etapa 3: mockup

layout finalizado

clicável ícones

24abril

Page 36: Introdução aos aplicativos web

entrega finalcom apresentação/vídeo de apresentação

29abril

como se apresenta um protótipo utilizando um vídeo?

Page 37: Introdução aos aplicativos web