web para designers

Download Web Para Designers

Post on 13-Jul-2015

35 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

Fbrica de StiosPoder Executivo do Estado de Alagoas

Web para Designers

Secretaria do Planejamento e do Oramento

itecInstituto de Tecnologia em Informtica e Informao do Estado de Alagoas

Web para Designers

Estado de AlagoasTeotnio Vilela Filho Governador de Alagoas Jos Wanderley Neto Vice-Governador de Alagoas Jlio Srgio de Maya Pedrosa Moreira Secretrio de Estado do Planejamento e do Oramento Antnio Carlos Sampaio Quintiliano Secretrio Adjunto do Planejamento e do Oramento Luiz Eugnio de Castro Barroca Diretor-presidente do Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC Nelson Oliveira Menezes Filho Superintendente de Tecnologia da Informao e Comunicao do ITEC Thiago Jos Tavares vila Diretor de Tecnologia da Informao do ITEC Raymundo Sampaio Fernandes Diretor de Infra-Estrutura e Operaes do ITEC

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

O web design uma extenso da prtica do design, onde o foco do projeto a criao de web sites e documentos disponveis no ambiente da web. O web design tende multidisciplinaridade, uma vez que a construo de pginas web requer subsdios de diversas reas tcnicas, alm do design propriamente dito. reas como a arquitetura da informao, programao, usabilidade, acessibilidade entre outros. A preocupao fundamental do webdesigner agregar os conceitos de usabilidade com o planejamento da interface, garantindo que o usurio final atinja seus objetivos de forma agradvel e intuitiva. Este manual Web para Designers, so conceitos tericos e dicas sobre as melhores prticas de desenvolvimento para portais e sites na web.

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

O que design.............................................................................................................06 reas de Atuao........................................................................................................06 Princpios de design...................................................................................................07 Diagramao................................................................................................................08 Hierarquia da Informao...........................................................................................08 Cores............................................................................................................................09 Harmonizao..............................................................................................................10 Contraste.......................................................................................................................11 Links..............................................................................................................................11 Tipografia......................................................................................................................11 Equilbrio.......................................................................................................................11 Tratamento de Imagens...............................................................................................12 Interface........................................................................................................................12 Arquitetura da Informao..........................................................................................13 Menu e sub-menu........................................................................................................13 cones...........................................................................................................................14 Usabilidade e Navegao...........................................................................................15 De onde vim? Onde estou? Para onde vou?............................................................16 Sites sobre Usabilidade..............................................................................................16 Referncias Bibliogrficas..........................................................................................17

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

Web para Designers

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

Web para Designers O que design?Design projetar conceitos, equilibrando esttica e funcionalidade. Segundo a ICSID - The International Council of Societies of Design, numa definio mais abrangente: Design uma atividade cuja finalidade estabelecer as qualidades multifacetadas de objetos, processos, servios e seus sistemas, compreendendo todo seu ciclo de vida. Portanto, design o fator central da humanizao inovadora de tecnologias e o fator crucial para o intercmbio econmico e cultural.

reas de atuaoOs principais grupos de atuao disciplinar da rea web: Design de Interfaces - O profissional desta rea projeta interfaces grficas de sistemas operacionais, softwares e games, animao 2D e 3D, sites (neste caso tambm conhecido como webdesigner) etc. objetivando o conforto do usurio. Design Grfico - um campo de atuao bastante amplo e criativo, cujas atividades englobam criao de logotipos, identidades corporativas, editorao (revistas, jornais, livros), embalagens, cartazes etc. Interface Digital - Responsvel por planejar a experincia do usurio, desde caminhos a serem percorridos por ele, at a definio de todos os elementos de interao utilizados (menus, botes, campos de texto). Abrange o uso da mdia eletrnica para a concepo de elementos visuais e grficos: Cds, concepo e diagramao de sites, produo de telas, slides, realidade virtual. Manipulao de Imagens - Uso da informtica na elaborao de imagens: ilustrao digital e foto digital. Tipografia - Estuda os problemas de visibilidade e leitura, bem como os aspectos culturais e estruturais do caractere ou smbolo a ser criado. Arquitetura de Informao - Responsvel pela organizao de todo o contedo disponvel no site/sistema digital. extremamente importante que ele veja com os olhos do usurio, pois sua tarefa fazer com que tudo esteja disponvel da maneira mais fcil, natural e transparente possvel.

6Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers Princpios do designPara comear a projetar deve-se estar sempre atento aos princpios do design, como: conceito, originalidade, simplicidade, pregnncia da forma e legibilidade. Eles so importantes para a fundamentao dos seus projetos. Conceito O conceito nada mais do que um conjunto de informaes representadas por elementos grficos (como cor, tipografia, imagens, etc.) e que, juntos, transmitem uma idia. Originalidade A originalidade pode ser percebida em diversos aspectos, num layout diferenciado, na navegao, no uso de uma nova tecnologia. Rena um grande nmero de idias, sem se preocupar com a qualidade. Depois, basta selecionar as melhores e organiz-las at se chegar soluo ideal. Simplicidade Esta aplicao caracterizada pela organizao, harmonia e sntese visual, gerando boa pregnncia da forma. Pregnncia da forma Este um dos conceitos mais importantes da Gestalt. Ele demonstra que todas as formas tendem a ser percebidas em seu carter mais simples: uma espada e um escudo podem tornar-se uma reta e um crculo. Quanto melhor for a organizao visual da forma do objeto, em termos de facilidade de compreenso, rapidez de leitura e interpretao, melhor ser o seu grau de pregnncia. A teoria da Gestalt, gerada atravs de grande pesquisa e experimentao, sugere uma resposta ao porqu de umas formas agradarem mais e outras no. Ela afirma tambm que o crebro s consegue perceber, decodificar e assimilar uma imagem ou um conceito pela sua totalidade e no pelas partes separadas que formam este todo. Legibilidade Ao diagramar um site, principalmente pginas internas, onde h maior quantidade de textos, faa-o ficar o mais confortvel possvel de se ler. Geralmente, usurios lem na tela 'decompondo' as pginas: seus olhos selecionam automaticamente frases em destaque, grficos ou tpicos. Dificilmente lem um texto corrido na tela do computador. No livro 'A Prtica da Simplicidade', Jakob Nielsen, considerado um dos 'papas' da usabilidade, cita que a tima legibilidade requer o texto escuro em fundo claro, o que ele denomina como 'texto positivo'. Ex.: fundo bege e texto vinho. O contrrio, ou seja, texto claro em fundo escuro, chamado 'texto negativo', causa quase a mesma eficcia de leitura. Ex.: fundo azul-marinho e texto cinza claro. Entretanto, o autor diz que esta inverso de cores gera no usurio uma certa desacelerao ao ler. Elementos grficos de fundo, principalmente quando muito coloridos, podem interferir na capacidade de reconhecer as formas das palavras.

7Desenvolvido pela Fbrica de Stos - ITEC

Web para DesignersRecursos que facilitam a legibilidade :: Destaque palavras-chave utilizando cor ou fonte diferentes. :: Divida o texto o mximo que puder com ttulos, subttulos e resumos significativos. :: Faa listas por tpicos (como esta) :: D preferncia a vrios pargrafos pequenos no lugar de poucos, porm, grandes. :: Use, aproximadamente, a metade do nmero de palavras que voc usaria em um texto impresso. :: Ilustre o texto com imagens relativas ao assunto, deixando-o mais dinmico e leve. :: Procure utilizar na fonte do texto uma cor que contraste e se sobressaia em relao cor do fundo. :: Utilize o recurso de hipertexto.

DiagramaoNa realidade do webdesigner, o site o espao onde seriam organizados os elementos gr?cos (textos, imagens, etc.) com os quais voc far sua composio.

Alinhamento importante que todo o site (home e pginas internas) apresente o mesmo tipo de alinhamento de texto. Faa sua escolha (alinhado esquerda, justificado ou centralizado) e aplique em todas as pginas. O alinhamento se transforma em mais uma caracterstica da identidade visual do site. :: O alinhamento ESQUERDA visualm