Upload
diana-santos
View
222
Download
0
Embed Size (px)
Citation preview
8/6/2019 apresentao 2 Luli - Design
1/65
Design/Web/Design IILuli Radfahrer
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
2/65
A Internet a resposta.Qual era mesmo a pergunta?
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
3/65
Na internet no existe
referncias
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
4/65
Design Grfico
Faculdade Marista
Design DigitalVS
Voc realmente precisa de todas aquelas pginas impressas do jornal?
8/6/2019 apresentao 2 Luli - Design
5/65
A internet no o FIM
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
6/65
Papel Digital
8/6/2019 apresentao 2 Luli - Design
7/65TV Digital
8/6/2019 apresentao 2 Luli - Design
8/65
O que voc precisa saber
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
9/65
Pginas e sites
Faculdade Marista
WWWConjunto de documentos multimdia de acesso remoto
8/6/2019 apresentao 2 Luli - Design
10/65
Domnios e seu registro
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
11/65
Browsers
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
15/65
Editores
Faculdade Marista
HTML
Html / WYSIWYG / Online
8/6/2019 apresentao 2 Luli - Design
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:
8/6/2019 apresentao 2 Luli - Design
17/65
Editores HTML (Texto)
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
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!
8/6/2019 apresentao 2 Luli - Design
20/65
Editores HTML
ONLINE
Os prprios provedores de
internet / hospedagemdisponibilizam templatesprontos para vocconstruir seu site semsaber nada de HTML!
8/6/2019 apresentao 2 Luli - Design
21/65
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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);
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
25/65
Plug-ins
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
27/65
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
29/65
Javascript
Servem para aliviar o servidor de tarefas simplesexecutando-as diretamente no browser do cliente.
8/6/2019 apresentao 2 Luli - Design
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);
8/6/2019 apresentao 2 Luli - Design
31/65
Imagens e CORES
Faculdade Marista
GIF / JPEG
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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);
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
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;
8/6/2019 apresentao 2 Luli - Design
42/65
Mdias
Faculdade Marista
CD-R/CD-RWDVD-R/DVD-RWDVD COM DUPLA CAMADA NOS DOIS LADOSBLURAYDOWNLOADS
8/6/2019 apresentao 2 Luli - Design
43/65
8/6/2019 apresentao 2 Luli - Design
44/65
8/6/2019 apresentao 2 Luli - Design
45/65
Blogs
8/6/2019 apresentao 2 Luli - Design
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/8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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).
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
55/65
Arquitetura de
informao
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
60/65
Design estrutural
Faculdade Marista
8/6/2019 apresentao 2 Luli - Design
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
8/6/2019 apresentao 2 Luli - Design
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:
8/6/2019 apresentao 2 Luli - Design
63/65
8/6/2019 apresentao 2 Luli - Design
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.
8/6/2019 apresentao 2 Luli - Design
65/65
Faculdade Marista - Webdeisgn
Obrigado.