Design/Web/Design II

Luli Radfahrer

Faculdade Marista

A Internet a resposta.
Qual era mesmo a pergunta?

Faculdade Marista

Na internet no existe referncias

Faculdade Marista

Design Grfico VS Design Digital

Voc realmente precisa de todas aquelas pginas impressas do jornal

Faculdade Marista

A internet no o FIM

Faculdade Marista

Papel Digital

TV Digital

O que voc precisa saber

Faculdade Marista

Pginas e sites

WWW
Conjunto de documentos multimdia de acesso remoto

Faculdade Marista

Domnios e seu registro

Faculdade Marista

Browsers

Faculdade Marista

HTML
(acrnimo para a expresso inglesa HyperText Markup Language, que significa Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web. Documentos HTML podem ser interpretados por navegadores. Tim Berners-Lee o criador da linguagem.

HTML

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

DHTML
Dynamic HTML, ou DHTML, no uma linguagem mas sim a unio das tecnologias HTML, javascript e uma linguagem de apresentao, como folhas de estilo CSS aliada a um Modelo de Objeto de Documentos, para permitir que uma pgina Web seja modificada dinamicamente na prpria mquina cliente, sem necessidade de novos acessos ao servidor web. Podendo ter elementos crescendo e voando na tela, esses elementos so imagens, precisam ser carregadas e isso toma tempo, fazendo da DHTML uma linguagem dinmica.

Editores HTML
Html / WYSIWYG / Online

Faculdade Marista

Editores HTML
Para facilitar o trabalho do designer que no tem um programador a disposio, existem diversos programas editores de codigo HTML, basicamente de trs tipos:

Editores HTML (Texto)

Editores HTML

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

No muito utilizado por programadores, pois d a eles menos controle sobre o cdigo, gera documentos com linhas desnecessrias de programao

Editores HTML

ONLINE

Mep site um editor de texto HTML online que permite voc a criar o seu contedo e depois pegar o cdigo HTML e colocar onde quiser!

Editores HTML

ONLINE
Os prprios provedores de internet / hospedagem disponibilizam templates prontos para voc construir seu site sem saber nada de HTML!

Editores HTML

ONLINE
Existem ainda um tipo de editor feito para quem quer colocar um site no ar e no faz a menor idia por onde comear. At provedores tem templates /modelos, para melhor atender ao usurio.

Flash
Adobe Flash (antes: Macromedia Flash), ou simplesmente Flash, um software primariamente de grfico vetorial - apesar de suportar imagens bitmap e vdeos - utilizado geralmente para a criao de animaes interativas que funcionam embutidas num navegador web. O produto era desenvolvido e comercializado pela Macromedia, empresa especializada em desenvolver programas que auxiliam o processo de criao de pginas web.

Faculdade Marista

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

Dinamismo
Animaes atraentes e extremamente interessantes;

Interao
Designers e programadores podem interagir com o mesmo arquivo (fla);

Faculdade Marista

FlashDesvantagens
Desvantagens: Inacessibilidade
No h viabilizao para usurios portadores de necessidades de acessibilidade;

escalabilidade
Animaes atraentes e extremamente interessantes;

Inviabilidade na Indexao
Os buscadores no conseguem indexar sites em flash;

Peso
A demora no carregamento;
NO-SEO (Search Engine Optimaze)
No permite o uso de SEO. Que uma tcnica utilizada para melhorar a visibilidade do seu site na web pelos buscadores.
Faculdade Marista

Plug-ins

Plug-ins
Alm do leitor de flash, existem vrios programas 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, pequenos programas multimdia, etc ; Real player permite que sons e videos gravaod em formato real sejam tocados a medida que so transmitidos; QuickTime Player Videos neste formato podem ser tocados medida que so transmitidos.
Faculdade Marista

Adobe Acrobat Reader para visualizar documentos no formato PDF. Utilizado para documentos que no podem perder seu layout original.

Plug-ins
No aconselhvel o uso de plug-ins. Pois se para alguns designer eles podem ser uma ferramenta de libertao, para o visitante ele pode ser um calvrio!

x
LIBERDADE X CALVRIO

Java, Javascript, etc...

Apesar de sua abrangncia o HTML no suficiente para algumas tarefas especificas da WWW, como acesso a banco de dados, gerao de paginas automticas e processos de segurana. Para isso necessria a utilizao de linguagens de programao mais ricas.

Javascript
Servem para aliviar o servidor de tarefas simples executando-as diretamente no browser do cliente.

Java
um conjunto de tecnologias so executadas no servidor e no cliente. Necessita de um interpretador (JVM); Faz conexo com banco de dados (JDBC);

Imagens e CORES
GIF / JPEG

Faculdade Marista

Imagens e CORES
Ao contrario de outras mdias, os documentos da web no aparecem prontos 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;

Faculdade Marista

Imagens e CORES
O que define o tamanho de uma imagem a quantidade de espao necessria para armazen-la: Suas dimenses em pixels e a informao de cor; Assim uma imagem de 30x30 pixels e 256 cores ocupar mais espao que uma imagem com o mesmo tamanho e um numero menor de cores.

Faculdade Marista

Imagens e CORES
Porque imprime to mal?

Pixels so pontos de luz que se misturam, por isso combinam as cores: Vermelho , Verde e Azul. Os pontos de impresso so tintas e no podem ser misturados para no borrar. Por isso cria-se uma retcula em que as cores bsicas de impresso fiquem umas do lado das outras sem se tocar. (CMYK);

Faculdade Marista

GIF
(Graphics Interchange Format, que se pode traduzir como "formato para intercmbio de grficos") um formato de imagem de mapa de bits muito usado na world wide web, quer para imagens fixas, quer para animaes.

Faculdade Marista

JPEG
JPEG um mtodo comumente usado para comprimir imagens fotogrficas. O grau de reduo pode ser ajustado, o que permite a voc escolher o tamanho de armazenamento e seu compromisso com a qualidade da imagem. Geralmente se obtm uma compresso com pouco perceptvel perda na qualidade da imagem.

Faculdade Marista

Frames e Framesets
Permite que uma pessoa esteja em dois ou mais lugares no espao ao mesmo tempo, atravs de sua estrutura de quadros divide-se a tela em pedaos, e cada pedao pode mostrar documentos de lugares diversos.

Faculdade Marista

Tabelas
<tr><td>Os

elementos HTML se adaptam ao tamanho da janela. </td></tr>

<tr><td>Podemos

ter vrios problemas caso no utilizemos recursos que possam limitar o contedo. </td></tr>
<tr><td> Tabelas </td></tr> <tr><td> Se

so excelentes para limitar o tamanho do contedo na tela.

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

rolagem. </td></tr>

Faculdade Marista

O que voc no precisa saber

- Esquecer a programao; - Tudo o que deve ter em mente so as funes, possibilidades e limitaes de cada linguagem de programao; - Relacionamento programadores x designers; - No conhecer as ferramentas com que trabalham.

Faculdade Marista

Possibilidades e limitaes
Anlise comparativa entre sites brasileiros e americanos; Software e hardwares; No usar x exagero; Principais recursos da internet: Personalizao; Manipulao ou interatividade;

Faculdade Marista

Tecnologia e contedo
Tecnologia x realidade Inovar sem descartar o antigo Contedo web Niveis de abrangncia; Interatividade; Uso de banco de dados; Escolhas;
Faculdade Marista

Mdias
CD-R/CD-RW DVD-R/DVD-RW DVD COM DUPLA CAMADA NOS DOIS LADOS BLURAY DOWNLOADS

Faculdade Marista

Blogs http://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 MIN http://www.criarsites.com http://www.webnode.com

Interface

Todo mundo gosta de ferramentas que nos ajudem a realizar algum tipo de trabalho, o mesmo acontece com as interfaces de sistema digitais. Se forem simples, diretas, agradveis e divertidas faro com que seu usurio esquea que est usando a ferramenta e se concentre na tarefa. Se forem complicadas ou mal feitas, daro mais trabalho.

Faculdade Marista

O que uma interface?

A interface uma das partes mais importantes de um web site, pois concentra a relao visitante-sistema. Por isso muito mais do que um visual bonitinho, deve ser um elemento de transio entre o mundo real e o digital, ou seja a cara do web site ou programas de multimdia, o interprete entre um computador(que entende de cliques do mouse e impulsos eltricos) e seu usurio.

Faculdade Marista

Caractersticas de uma interface:

O tamanho da tela varivel Os CD-ROMs costumam limitar a rea til em 640x480 pixels, browsers podem ocupar qualquer tamanho em um monitor. Muitas pessoas usam monitores de 800x600 pixels, ou de 832x624, ou 1024x768. Mesmo a tela sendo grande, nada impede o usurio de abrir uma janela pequena. Consistncia o modo de como nos familiarizamos quando entramos em um website. As pessoas procuram padres e formas reconhecveis nos espaos para se orientar e conseguir entend-los.

cones no so obrigatrios Pequenas ilustraes, cones e botes s podem ser colocados em uma interface se facilitarem a comunicao.

Faculdade Marista

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

A maior parte das aes se apoia em reconhecimento, no em lembrana. Por isso, os objetos e cones devem ter uma aparncia condizente 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 uma ferramenta, deve ser agradvel e divertido us-lo.

Faculdade Marista

O que evitar em uma interface

No se deve adaptar o contedo produzido para a mdia convencional para um produto digital, pois as linguagens so completamente diferentes e o resultado pode ficar estranho; O boto de volta para home page deve ser usado somente em ltima instncia, pois se um website est bem feito e estruturado, um assunto levar a 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.

Faculdade Marista

Elementos de uma interface

Mobilidade O design digital combina elementos estticos com animaes, vdeos, letreiros e com a prpria movimentao que o usurio faz de todos esses elementos.
Navegao importante dar ao visitante uma orientao em sua explorao do espao virtual. Conexo Ligaes de hipertexto so pontos de conexo com outros documentos e desvios na leitura linear de um texto.

Faculdade Marista

Elementos de uma interface

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

Contedo, mapa e navegao Ao 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 onde seguir a partir desse ponto.
Som e interfaces O 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 algum fato (que uma tarefa acabou, por exemplo).

Faculdade Marista

Interatividade
Uma das palavras mais usadas nos dias atuais interatividade. No importa onde, como ou com que objetivo, tudo deve ser interativo como por exemplo comerciais de TV, cartazes de rua, revistas, cardpios, peas de teatro.
Embora que ningum quer interatividade o tempo todo muitas vezes mais confortvel 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 direita de tanto clique, para o usurio, no o fato de clicar que faz a diferena, mas o que h de verdadeiro e significativo por trs desse clique. Resumindo a interatividade 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. A arte est em escolher o ponto mesmo que seja o de comida baiana, mexicana ou indiana.

Faculdade Marista

Arquitetura de informao

Faculdade Marista

Arquitetura da Informao

Muitos websites acabam virando o equivalente digital das casas 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 o layout das telas, com tecnologias, com sua manuteno, mas esquece de sua estrutura.

Faculdade Marista

Arquitetura da Informao

So comuns os websites do tipo beco sem sada, em que o nico 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 os links no funcionam.

Faculdade Marista

Segundo Richard Wurman, criador do conceito de arquitetura da informao em 1975, o que faz a comunicao possvel a possibilidade de identificar a melhor estrutura para transmitir a informao. Para Richard as formas de organizar a informao so definidas pela sigla LATCH: 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 e preo (Hierarquia)

Faculdade Marista

Processos para planejar uma AI de grande massa de dados

Anlise Heurstica

Anlise de Mtricas

Anlise de reas de Interfaces

Anlise Hierrquica de Tarefas

Teste de Usabilidade

Eye-Tracking

Pesquisa Etnogrfica

Card Sorting

Site map

Fluxograma

Wireframes

Definies de SEO

*Crditos dos cones: Peter Morville e Jeffery Callender

Design estrutural

Faculdade Marista

Se baseia em voc estruturar todo o layout do site de forma que o mesmo no tenha sua estrutura atingida toda vez que se necessite de uma atualizao, imprescindvel para Portais e websites que tem seu contedo atualizado em um curto espao de tempo. H um prvio estudo do que far parte do contedo para que assim seja montado o Projeto Grfico, indicando assim por um diagrama como ficaro distribudos esses contedos e seus elementos grficos. Um wireframe pode ser considerado um Projeto Grfico.
Normalmente esse Projeto feito pelo arquiteto da informao pois ele ir categorizar e classificar de forma que haja facilidade na alterao posterior que ser feita pelo Designer ou pelo Programador ganhando assim tempo e poupando esforos.
Faculdade Marista

Logo aps feito o Projeto Grfico repassado ao Designer para que o mesmo tire como base para seu trabalho, o Designer deve ter o bom senso que pode criar e mudar o Projeto porm deve respeitar seus limites e categorias de contudo.
Exemplo de Projeto Grfico:

Grupos de dados

Faculdade Marista

Com a web hoje temos fontes e artigos de quase todo o mundo em apenas alguns 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 seu contexto, e a anttese ai que na prpria web que nos deixou preguiosos 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, os Dados, a Informao e o Conhecimento. Os dados so pedaos de informaes que sozinhos no representam algo importante para a mente humana armazenar, j a informao so dados que juntos representam algo relevante e o conhecimento quando lidamos com uma informao que nos conecta com nossa experincia pessoal e passa a fazer parte dela.

Faculdade Marista

Obrigado.

Faculdade Marista - Webdeisgn