apresentação 2 Luli - Design

8/6/2019 apresentao 2 Luli - Design

1/65

Design/Web/Design IILuli Radfahrer

Faculdade Marista


2/65

A Internet a resposta.Qual era mesmo a pergunta?

Faculdade Marista


3/65

Na internet no existe

referncias

Faculdade Marista


4/65

Design Grfico

Faculdade Marista

Design DigitalVS

Voc realmente precisa de todas aquelas pginas impressas do jornal?


5/65

A internet no o FIM

Faculdade Marista


6/65

Papel Digital


7/65TV Digital


8/65

O que voc precisa saber

Faculdade Marista


9/65

Pginas e sites

Faculdade Marista

WWWConjunto de documentos multimdia de acesso remoto


10/65

Domnios e seu registro

Faculdade Marista


11/65

Browsers

Faculdade Marista


12/65

HTML(acrnimo para a expresso inglesa HyperText Markup Language, que significaLinguagem de Marcao de Hipertexto) uma linguagem de marcaoutilizada para produzir pginas na Web. Documentos HTML podem serinterpretados por navegadores. Tim Berners-Lee o criador dalinguagem.


13/65

Em seus primrdios, o HTML no apresentava muitos recursosalm dos links de hipertexto, algumas opes de layout, como negrito eitlico, e a capacidade de colocar imagens.

HTML


14/65

DHTML

Dynamic HTML, ou DHTML, no uma linguagem mas sim a unio das

tecnologias HTML, javascript e uma linguagem de apresentao, como folhas deestilo CSS aliada a um Modelo de Objeto de Documentos, para permitir que umapgina Web seja modificada dinamicamente na prpria mquina cliente, semnecessidade de novos acessos ao servidor web.

Podendo ter elementos crescendo e voando na tela, esses elementos soimagens, precisam ser carregadas e isso toma tempo, fazendo da DHTML uma

linguagem dinmica.


15/65

Editores

Faculdade Marista

HTML

Html / WYSIWYG / Online


16/65

Editores HTML

Para facilitar o trabalho do designer queno tem um programador a disposio, existemdiversos programas editores de codigo HTML,basicamente de trs tipos:


17/65

Editores HTML (Texto)


18/65

Editores HTML

WYSIWYGWhat you see Is what you Get(o que voc v o que voc obtm)

No muito utilizado porprogramadores, pois d aeles menos controle sobreo cdigo, gera documentoscom linhas desnecessriasde programao


19/65

Editores HTML

ONLINE

Mep site um editor detexto HTML online quepermite voc a criar oseu contedo e depoispegar o cdigo HTML ecolocar onde quiser!


20/65

Editores HTML

ONLINE

Os prprios provedores de

internet / hospedagemdisponibilizam templatesprontos para vocconstruir seu site semsaber nada de HTML!


21/65


22/65

Flash

Faculdade Marista

Adobe Flash (antes: Macromedia Flash), ou

simplesmente Flash, um softwareprimariamente de grfico vetorial - apesar desuportar imagens bitmap e vdeos - utilizadogeralmente para a criao de animaesinterativas que funcionam embutidas numnavegador web. O produto era desenvolvido ecomercializado pela Macromedia, empresaespecializada em desenvolver programas queauxiliam o processo de criao de pginas web.


23/65

FlashVantagens

Faculdade Marista

Vantagens:CompatibilidadeNo h problema de incompatibilidade de browsers,S.O., fontes que no estejam no PC do usurio;

DinamismoAnimaes atraentes e extremamente interessantes;

InteraoDesigners e programadores podem interagir com omesmo arquivo (fla);


24/65

FlashDesvantagens

Faculdade Marista

Desvantagens:InacessibilidadeNo h viabilizao para usurios portadores denecessidades de acessibilidade;

escalabilidadeAnimaes atraentes e extremamente interessantes;

Inviabilidade na IndexaoOs buscadores no conseguem indexar sites emflash;

PesoA demora no carregamento;

NO-SEO (Search Engine Optimaze)No permite o uso de SEO. Que uma tcnica utilizada paramelhorar a visibilidade do seu site na web pelos buscadores.


25/65

Plug-ins


26/65

Faculdade Marista

Alm do leitor de flash, existem vriosprogramas auxiliares que podem ser instalados

em seu browser, aumentando sua capacidade.Esses programas so chamados plug-ins.

Os plug-ins mais importantes so:Macromedia Shockwave O browser

permite que coloque animaes, pequenosprogramas multimdia, etc ;

Real player permite que sons e videosgravaod em formato real sejam tocados a

medida que so transmitidos;

QuickTime Player Videos neste formatopodem ser tocados medida que sotransmitidos.

Adobe Acrobat Reader paravisualizar documentos no

formato PDF. Utilizado paradocumentos que no podemperder seu layout original.

Plug-ins


27/65


28/65

Java, Javascript, etc...

Apesar de sua abrangncia o HTML no suficiente paraalgumas tarefas especificas da WWW, como acesso a bancode dados, gerao de paginas automticas e processos desegurana. Para isso necessria a utilizao de linguagensde programao mais ricas.


29/65

Javascript

Servem para aliviar o servidor de tarefas simplesexecutando-as diretamente no browser do cliente.


30/65

Java

um conjunto de tecnologias so executadas no servidor eno cliente.

Necessita de um interpretador (JVM);

Faz conexo com banco de dados (JDBC);


31/65

Imagens e CORES

Faculdade Marista

GIF / JPEG


32/65

Faculdade Marista

Ao contrario de outras mdias, os documentos da web no aparecemprontos na tela, so construdos pedao a pedao:

Primeiro a pagina e sua cor de fundo e depois textos, as imagens,etc...

As telas so divididas em pixels;

Imagens e CORES


33/65

Faculdade Marista

Imagens e CORES

O que define o tamanho de uma imagem a quantidade de espao necessriapara armazen-la:

Suas dimenses em pixels e a informao de cor;

Assim uma imagem de 30x30 pixels e 256 cores ocupar mais espao queuma imagem com o mesmo tamanho e um numero menor de cores.


34/65

Faculdade Marista

Imagens e CORES

Porque imprime to mal?

Pixels so pontos de luz que se misturam, por issocombinam as cores:Vermelho ,Verde eAzul.

Os pontos de impresso so tintas e no podem ser misturados para noborrar. Por isso cria-se uma retcula em que as cores bsicas de

impresso fiquem umas do lado das outras sem se tocar. (CMYK);


35/65

Faculdade Marista

GIF(Graphics Interchange Format, que se pode traduzir

como "formato para intercmbio de grficos") umformato de imagem de mapa de bits muito usado naworld wide web, quer para imagens fixas, quer paraanimaes.


36/65

Faculdade Marista

JPEGJPEG um mtodo comumente usado para

comprimir imagens fotogrficas. O grau de reduopode ser ajustado, o que permite a voc escolher otamanho de armazenamento e seu compromisso coma qualidade da imagem. Geralmente se obtm uma

compresso com pouco perceptvel perda naqualidade da imagem.


37/65

Frames e Framesets

Faculdade Marista

Permite que uma pessoa esteja em dois ou mais

lugares no espao ao mesmo tempo, atravs de suaestrutura de quadros divide-se a tela em pedaos, ecada pedao pode mostrar documentos de lugaresdiversos.


38/65

Tabelas

Faculdade Marista

Os elementos HTML se adaptam ao tamanho da janela.

Podemos ter vrios problemas caso no utilizemos recursos que possam

limitar o contedo.

Tabelas so excelentes para limitar o tamanho do contedo na tela.

Se isso dificultar a visualizao, o usurio precisa-r utilizar barras de

rolagem.


39/65

O que voc no precisa saber

Faculdade Marista

- Esquecer a programao;

- Tudo o que deve ter em mente so as funes, possibilidades elimitaes de cada linguagem de programao;

- Relacionamento programadores x designers;

- No conhecer as ferramentas com que trabalham.


40/65

Faculdade Marista

Anlise comparativa entre sites brasileiros e americanos;Software e hardwares;

No usar x exagero;Principais recursos da internet:Personalizao;Manipulao ou interatividade;

Possibilidades e limitaes


41/65

Tecnologia e contedo

Faculdade Marista

Tecnologia x realidadeInovar sem descartar o antigo

Contedo webNiveis de abrangncia;Interatividade;

Uso de banco de dados;Escolhas;


42/65

Mdias

Faculdade Marista

CD-R/CD-RWDVD-R/DVD-RWDVD COM DUPLA CAMADA NOS DOIS LADOSBLURAYDOWNLOADS


43/65


44/65


45/65

Blogs


46/65

Blogshttp://www.ikissyou.org/Pior http://carlaperez.blog.uol.com.br/melhor: http://postsecret.blogspot.com

Fotologs:http://www.fotolog.com.br/http://www.flickr.com/

Orkut:http://www.orkut.com/

PODE TUDO(SEM REGRAS)

http://primeiro.weblog.com.pt

SITES EM 5 MINhttp://www.criarsites.com

http://www.webnode.com
http://www.ikissyou.org/http://carlaperez.blog.uol.com.br/http://postsecret.blogspot.com/http://www.fotolog.com.br/http://www.flickr.com/http://www.orkut.com/http://primeiro.weblog.com.pt/http://www.criarsites.com/http://www.webnode.com/http://www.webnode.com/http://www.criarsites.com/http://primeiro.weblog.com.pt/http://www.orkut.com/http://www.flickr.com/http://www.fotolog.com.br/http://postsecret.blogspot.com/http://carlaperez.blog.uol.com.br/http://www.ikissyou.org/


47/65

Interface

Faculdade Marista

Todo mundo gosta de ferramentas que nos ajudem a realizaralgum tipo de trabalho, o mesmo acontece com as interfaces desistema digitais. Se forem simples, diretas, agradveis e divertidasfaro com que seu usurio esquea que est usando a ferramenta ese concentre na tarefa. Se forem complicadas ou mal feitas, daromais trabalho.


48/65

Faculdade Marista

O que uma interface?

A interface uma das partes mais importantes de um website, pois concentra a relao visitante-sistema. Por isso

muito mais do que um visual bonitinho, deve ser umelemento de transio entre o mundo real e o digital, ou seja a cara do web site ou programas de multimdia, ointerprete entre um computador(que entende de cliques domouse e impulsos eltricos) e seu usurio.


49/65

Faculdade Marista

Caractersticas de uma interface:

O tamanho da tela varivelOs CD-ROMs costumam limitar a rea til em 640x480 pixels,browsers podem ocupar qualquer tamanho em um monitor. Muitaspessoas usam monitores de 800x600 pixels, ou de 832x624, ou1024x768. Mesmo a tela sendo grande, nada impede o usurio deabrir uma janela pequena.

Consistncia o modo de como nos familiarizamos quando entramos em umwebsite. As pessoas procuram padres e formas reconhecveis nosespaos para se orientar e conseguir entend-los.

cones no so obrigatriosPequenas ilustraes, cones e botes s podem ser colocados emuma interface se facilitarem a comunicao.


50/65

Faculdade Marista

Estrutura de aponte-e-clique, no lembre-se-e-digite

A maior parte das aes se apoia em reconhecimento, no emlembrana. Por isso, os objetos e cones devem ter uma aparnciacondizente a sua funo.

Manipulao direta importante dar ao usurio a sensao de controle das atividades do

computador. sempre bom lembrar que, j que o computador umaferramenta, deve ser agradvel e divertido us-lo.


51/65

Faculdade Marista

O que evitar em uma interface

No se deve adaptar o contedo produzido para a mdia convencional paraum produto digital, pois as linguagens so completamente diferentes e oresultado pode ficar estranho;

O boto de volta para home page deve ser usado somente em ltimainstncia, pois se um website est bem feito e estruturado, um assunto levara outro e no ser preciso voltar para a tela inicial e recomear a navegao;

Evitar excesso de texto ou letras em corpos pequenos pois mais difcil ler

em um monitor do que em uma folha de papel;

Evitar usar imagens escuras demais, densas ou que demorem a carregar.


52/65

Faculdade Marista

Elementos de uma interface

MobilidadeO design digital combina elementos estticos com animaes, vdeos, letreirose com a prpria movimentao que o usurio faz de todos esses elementos.

Navegao importante dar ao visitante uma orientao em sua explorao do espaovirtual.

ConexoLigaes de hipertexto so pontos de conexo com outros documentos e

desvios na leitura linear de um texto.


53/65

Faculdade Marista

Elementos de uma interface

cones e botesSo os principais elementos de contato entre o usurio e o produto digital.

Contedo, mapa e navegaoAo contrrio dos livros e jornais(que so previsveis) ou do rdio e televiso

(que so lineares) no h como saber o que h em um website. Por isso importante evidenciar onde est o visitante, como chegou ali e para ondeseguir a partir desse ponto.

Som e interfacesO som pode ser usado de duas formas em uma interface: integrado a ela, para

deixar o usurio a par do estado do sistema, ou alertando o usurio de algumfato (que uma tarefa acabou, por exemplo).


54/65

Faculdade Marista

Interatividade

Uma das palavras mais usadas nos dias atuais interatividade. No importaonde, como ou com que objetivo, tudo deve ser interativo como por exemplocomerciais de TV, cartazes de rua, revistas, cardpios, peas de teatro.

Embora que ningum quer interatividade o tempo todo muitas vezes maisconfortvel sentar na frente do computador, relaxar e deixar o web site rolar,seja com sons, animaes ou at mesmo musica, do que ser obrigado a ter um

monte de opes e sair por a fazendo calo no dedo indicador da mo direitade tanto clique, para o usurio, no o fato de clicar que faz a diferena, maso que h de verdadeiro e significativo por trs desse clique. Resumindo ainteratividade s o tempero de um website.

Se no colocar nada, ele fica insosso, besta, desperdiado uma das

caractersticas mais ricas do meio. Se colocar demais, no d para encarar. Aarte est em escolher o ponto mesmo que seja o de comida baiana, mexicanaou indiana.


55/65

Arquitetura de

informao

Faculdade Marista


56/65

Faculdade Marista

Arquitetura da Informao

Muitos websites acabam virando o equivalente digital dascasas de uma favela, em que um quarto se emenda no outro

formando um labirinto confuso.

A maioria das pessoas que criam web sites se preocupa com olayout das telas, com tecnologias, com sua manuteno, mas

esquece de sua estrutura.


57/65

Faculdade Marista

Arquitetura da Informao

So comuns os websites do tipo beco sem sada, em que onico caminho voltar para a home page. Ou aqueles em que o

visitante forado a passar por vrias pginas intermedirias,sem contedo, at chegar a informao. Ou aqueles cujos oslinks no funcionam.


58/65

Faculdade Marista

Segundo Richard Wurman, criador do conceito de arquitetura dainformao em 1975, o que faz a comunicao possvel a possibilidade deidentificar a melhor estrutura para transmitir a informao.

Para Richard as formas de organizar a informao so definidas pela siglaLATCH: Local(mapas), Alfabeto, Tempo, Categoria e Hierarquia.

Exemplos:

Farmcias empilham seus remdios por ordem alfabtica.

Supermercados organizam seus itens por categoria.

Concessionrias organizam seus carros por tempo de uso epreo (Hierarquia)

l j A d d d d d


59/65

Processos para planejar uma AI de grande massa de dados

AnliseHierrquicade Tarefas

Anlise de reas deInterfaces

Anlise deMtricas

AnliseHeurstica

Card SortingEye-Tracking

Fluxograma

PesquisaEtnogrfica

Definies deSEO

Site map

Teste deUsabilidade

Wireframes

*Crditos dos cones: Peter Morville e Jeffery Callender


60/65

Design estrutural

Faculdade Marista


61/65

Faculdade Marista

Se baseia em voc estruturar todo o layout do site de forma que omesmo no tenha sua estrutura atingida toda vez que se necessite

de uma atualizao, imprescindvel para Portais e websites quetem seu contedo atualizado em um curto espao de tempo.

H um prvio estudo do que far parte do contedo para que assimseja montado o Projeto Grfico, indicando assim por umdiagrama como ficaro distribudos esses contedos e seuselementos grficos. Um wireframe pode ser considerado umProjeto Grfico.

Normalmente esse Projeto feito pelo arquiteto da informaopois ele ir categorizar e classificar de forma que haja facilidade naalterao posterior que ser feita pelo Designer ou peloProgramador ganhando assim tempo e poupando esforos.

Logo aps feito o Projeto Grfico repassado ao Designer para que ob b lh d b


62/65

mesmo tire como base para seu trabalho, o Designer deve ter o bom sensoque pode criar e mudar o Projeto porm deve respeitar seus limites ecategorias de contudo.

Exemplo de Projeto Grfico:


63/65


64/65

Faculdade Marista

Com a web hoje temos fontes e artigos de quase todo o mundo em apenasalguns cliques porm com isso nossa preguia em conhecer mais (se

aprofundar) naquele assunto em especfico diminuiu.

Temos as informaes bsicas das coisas porm no conhecemos seucontexto, e a anttese ai que na prpria web que nos deixoupreguiosos podemos na maioria das vezes nos aprofundar no assunto,entender seu contexto e ai sim adquirir o conhecimento daquele assunto.

Desse Grupo de Dados temos trs categorias de material informativo, osDados, a Informao e o Conhecimento.

Os dados so pedaos de informaes que sozinhos no representam algoimportante para a mente humana armazenar, j a informao so dadosque juntos representam algo relevante e o conhecimento quando

lidamos com uma informao que nos conecta com nossa experinciapessoal e passa a fazer parte dela.


65/65

Faculdade Marista - Webdeisgn

Obrigado.

apresentação 2 Luli - Design

Documents

Transcript of apresentação 2 Luli - Design