Escolar Documentos
Profissional Documentos
Cultura Documentos
itec
Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas
Estado de Alagoas
Teotnio 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
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.
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
reas de atuao
Os 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.
6
Desenvolvido pela Fbrica de Stos - ITEC
7
Desenvolvido pela Fbrica de Stos - ITEC
Diagramao
Na 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 visualmente mais confortvel, pois resulta em comprimentos diferentes para cada linha e facilita o usurio a no se perder na leitura. :: O alinhamento DIREITA deve ser utilizado apenas para pargrafos bem curtos, por alguma opo esttica, e no, aleatoriamente. :: O alinhamento JUSTIFICADO, ou blocado, tambm deve ser utilizado somente se o projeto pedir uma massa de texto quadrada ou retangular. :: O alinhamento CENTRALIZADO deve ser evitado para textos longos, pois dificulta bastante a leitura.
Hierarquia da Informao
Hierarquizar informaes em um site significa destacar ou priorizar alguns elementos em relao a outros. No caso de um texto, isso pode ser feito atravs de recursos, como: - texto grifado (negrito, itlico ou sublinhado); - aumentar o corpo do texto que deseja destacar; - utilizar uma segunda cor; - utilizar caixa alta (letras maisculas). Outra forma de destaque utilizar as reas privilegiadas do site (ver esquema ao lado). Na cultura ocidental, o processo de leitura consiste em uma varredura da esquerda para a direita e de cima para baixo. Por isso, a parte considerada mais privilegiada do site (para onde o usurio olha primeiro) o canto superior esquerdo. O lado esquerdo tambm bastante importante, assim como a parte superior (cabealho). Informaes no relevantes podem ficar abaixo da dobra do site (quando o usurio precisa rolar a pgina).
8
Desenvolvido pela Fbrica de Stos - ITEC
Harmonizao
Na hora de escolher as cores em um projeto, leve em considerao alguns princpios fundamentais como similaridade, familiaridade, equilbrio, ordem e ambigidade. Dicas para harmonizar as cores no seu layout, com base no crculo cromtico (trata-se de uma representao das cores atravs de um crculo onde so dispostas as variaes do espectro visvel pelo olho humano): :: Usar diferentes valores de luminncia (brilho) de uma mesma cor. Ex.: azul-marinho, azul-mdio e azul claro. :: Utilizar duas cores opostas do crculo cromtico. Este um esquema a ser analisado com cuidado, como no caso do uso de vermelho e verde. Pode-se ter uma rea maior com uma cor fria, deixando a rea menor com sua cor complementar quente. :: Utilizar duas cores vizinhas e uma terceira oposta a elas no crculo cromtico. Neste caso, importante determinar qual ser a cor predominante, aquela que chamar mais ateno na interface. Evite que a cor dominante ocupe a maior rea da tela. :: Imagine um tringulo eqiltero sobre o crculo cromtico e utilize as cores que esto nos vrtices. :: Faa composies baseadas na temperatura das cores, com cores frias (violetas, azuis, verdes) ou quentes (vermelho, laranja, amarelo). recomendvel o uso de branco como cor de alvio no texto, separadores, reas de respirao ou elementos acessrios, principalmente se forem utilizadas cores quentes. :: Outra preocupao com o equilbrio visual. Elementos escuros tendem a ser 'engolidos' visualmente por um fundo claro, parecendo menores. :: Se as reas forem igualmente distribudas entre uma cor quente e uma cor fria de igual luminncia, a cor quente predominar. :: Em uma interface em que prevalecem cores frias, as cores quentes chamam ateno, atraindo o olhar. :: Em uma interface em que predominam cores escuras, as cores mais claras atrairo o olhar. Isso provoca um efeito de ordenao na leitura. Usadas incorretamente, estes tipos de contrastes podem provocar disperso no usurio.
10
Desenvolvido pela Fbrica de Stos - ITEC
Links
importante lembrar tambm a importncia de saber trabalhar com as cores nos links. Geralmente, os links j visitados pelo usurio so diferenciados dos que ainda no foram vistos pelo uso de outras cores. Quando no respeitada essa regra, o visitante pode ficar perdido, e a navegao, ineficiente. Determinar uma escala cromtica e utiliz-la em todo o site ajuda a manter a coerncia e a identidade visual do projeto, familiarizando o usurio durante toda a sua visita.
Tipografia
O termo 'tipografia' significa o emprego de fontes, que nada mais so do que desenhos, representaes do alfabeto. Atravs de recursos grficos, as letras podem fornecer outras informaes sobre o contexto da mensagem, atravs de seu contorno, propores, peso, cor etc. Dependendo do tratamento tipogrfico, um simples alfabeto pode transmitir humor, dramaticidade e uma srie de outras emoes. Em meios digitais, a tipografia deve ser adequada baixa resoluo das telas, ao brilho dos monitores e distncia de leitura. Nos sites com grande quantidade de texto ou nos projetos onde seja preciso otimizar a busca por informaes, a legibilidade exerce maior influncia na opo do tipo. Produzir um texto legvel, impresso ou digital, requer habilidade e sensibilidade do programador visual. Ao escolher uma determinada tipografia para seu site, procure sempre proporcionar uma leitura rpida, confortos visual e cognitivo. Alm de ler facilmente, preciso tambm compreender facilmente a mensagem, o conceito que se quer passar ao usurio. Dicas :: Usar fontes fantasia ('desenhadas' ou temticas) apenas para ttulos. :: Para textos corridos, no devem ser utilizadas as fontes fantasia. D preferncia a fontes nativas do Windows que podem ser visualizadas em qualquer computador, como Verdana, Tahoma e Arial. Evite as fontes com serifa. :: Atualmente, uma grande variedade de fontes digitais vm sendo desenvolvidas. So fontes desenhadas especialmente para visualizao na tela do computador, o que requer um tratamento grfico diferenciado. Fontes para meios digitais normalmente apresentam formas mais simples, baseadas nas limitaes de resoluo dos monitores, e levam em conta a emisso de luz para que percebamos suas formas.
Equilbrio
Um website deve estar visualmente harmnico e equilibrado. Isso significa que, ao diagramar, deve-se distribuir os elementos e informaes de maneira homognea pelo site, evitando a concentrao de informaes em um determinado espao ou um grande vazio em outro, exceto quando o conceito do prprio site exigir uma diagramao mais assimtrica propositadamente. Em uma composio, a proporo das partes, juntas, deve transmitir a mensagem visual como um todo. Desenvolvido pela Fbrica de Stos - ITEC
11
Interface
Caractersticas da web Para projetar, precisamos conhecer a base em que estamos trabalhando, verificar os limites e as possibilidades do meio e assim gerar um projeto bastante consciente e adequado s necessidades do cliente. Antes de projetar para web, devemos estar familiarizados com as suas caractersticas para desenvolver projetos coerentes com a mdia, explorando suas particularidades. Caractersticas da web 1. Interatividade Interagir trocar informaes. assistir e agir, no estar passivo ao recebimento de informaes 2. Atualizao Se comparada a livros, folders e portflios, o meio com o menor custo de levar informaes atualizadas ao usurio 3. Alinearidade Os usurios de um site decidem em qual direo desejam seguir. Um site no linear como a TV, por exemplo, que j tem uma programao pronta. 4. Hipertexto Possibilidade de interligar diversas informaes: internas ao site (diferentes nveis), continuao de textos ncora e referncias adicionais 5. Multimdia Integrao entre animao, udio, imagem, texto e vdeo 6. Adimensionalidade O espao na internet praticamente gratuito se comparado ao espao em qualquer mdia impressa. Porm, quanto maior o nmero de informaes, melhor deve ser trabalhada a hierarquia entre elas 7. Personalizao As informaes de um site podem ser expostas de acordo com o que o usurio deseja visualizar. Ou seja, vrias sees podem ser personalizadas para tornar a navegao mais rpida e eficiente para cada usurio.
12
Desenvolvido pela Fbrica de Stos - ITEC
Arquitetura da Informao
At ento, vnhamos falando da parte visual, da esttica do site. Partiremos, agora, para um elemento no menos relevante, pelo contrrio, de suma importncia: o contedo. Esta, sim, a matria-prima do designer, e este profissional que determina a melhor forma de apresent-lo, facilitando seu acesso pelos usurios. Afinal, de que vale um site super atraente, se o usurio entra e no acha a informao que procura, perdendo-se no meio de tantos cliques? Para que isso no acontea, deve-se organizar e distribuir o contedo pelas pginas de maneira clara e objetiva, construindo uma boa Arquitetura de Informao. Pode-se dizer que ela uma ferramenta para que o site alcance uma boa usabilidade. Assim, o usurio facilmente encontrar o que procura, atingindo seu objetivo. Coloque-se sempre no lugar do visitante: pense em quais seriam suas expectativas ao entrar no site, o que gostaria de encontrar logo na pgina inicial, o que pode estar em 'segundo plano', o que menos importante etc. Assim, voc distribuir o contedo em nveis, desenhando o mapa do site.
Estruturando
Estruturar informaes significa formar grupos com base na identidade, semelhana entre essas informaes, permitindo que o usurio as encontre facilmente. Realizar essa estruturao desde o incio do projeto evita falhas que podem ocorrer na definio da arquitetura e que podem exigir, futuramente, a remodelagem do site. Exemplificando: imagine que os cardpios dos restaurantes, ao invs de apresentarem os pratos divididos em entradas, carnes, aves, peixes e massas, os classificassem em grelhados, ensopados e assados. Ora, se voc quisesse um fil de frango com batatas fritas, teria que procurar em 'grelhados', no meio de peixes e carnes. Muito mais demorado, no acha? Ao estruturar o contedo de um site, pense nisso: o usurio no quer parar e pensar onde precisa clicar para achar o que deseja, nem tem tempo para isso. preciso disponibilizar as informaes de forma que o usurio encontre-as quase intuitivamente.
Menu e sub-menu
O lado esquerdo do site o espao mais utilizado para o menu (menu vertical). Caso a quantidade de servios ou produtos oferecidos aumentem, o layout se adapta facilmente. Se utilizarmos a barra superior do site (menu horizontal), o espao torna-se limitado, pois no de costume o uso da rolagem horizontal. O usurio sempre passar seus olhos pelo menu, buscando o que deseja. Quanto maior o nmero de itens, menor a possibilidade de eles serem lidos, por isso, seja sucinto. J os sub-menus podem ter mais itens, pois estes, provavelmente, no estaro vista de incio, disputando sua ateno com o restante das informaes. Eles devem estar, de preferncia, 13 acessveis na prpria pgina inicial. Desenvolvido pela Fbrica de Stos - ITEC
cones
O que um cone? cone, para a Semiologia, uma imagem que mantm com um determinando objeto uma relao de semelhana ou propriedade. Um cone uma abstrao de algo que do nosso conhecimento e apresenta, pelo menos, um trao em comum com o objeto representado. Quando utilizado no meio digital, o cone deve ser compreendido com clareza e objetividade. Esse o primeiro passo antes de aplicar diferentes cones num site. O objetivo final de um cone no esttico e sim de ajudar o usurio a navegar, atravs da cognio dos smbolos, tornando o meio digital mais humanizado. Deve-se levar em considerao que valores estticos e funcionais no devem competir entre si no site. Se o signo que voc escolher para representar determinada seo no for universal ou de simples assimilao da idia, h um grande risco de no ser compreendido pelo usurio e comprometer a usabilidade do seu projeto. Se h necessidade esttica no layout que estiver preparando, o ideal utilizar variaes grficas dos cones universais ou ter certeza absoluta da compreenso visual. Assim, voc alcana o objetivo grfico sem comprometer a funcionalidade de seu site.
14
Desenvolvido pela Fbrica de Stos - ITEC
Navegao
Navegao um termo bastante amplo. Na web, ela se d pelo movimento atravs de espaos virtuais pela busca de informao. centrada em objetivos e aes, e compreender este conceito-chave primordial para realizar um bom projeto de navegao. O foco da navegao dar suporte s tarefas do usurio. Para isso, voc precisa compreender aspectos como o que as pessoas querem fazer e como elas se comportam, assim voc poder prever suas reaes e comportamentos diante do site, elaborando, a partir da, uma navegao adequada. Todos sabemos que a base da navegao so os links. clicando neles que passeamos pelas sees, pulamos de uma pgina a outra. Porm, a navegao tambm conduzida por todos os elementos visuais presentes na pgina. O design aplicado nas interfaces tem, alm do valor esttico, o valor funcional, ou seja, ele deve contribuir para a navegabilidade do projeto. No existe uma receita pronta para se projetar uma navegao bem-sucedida, mas algumas consideraes podem ajudar: :: A navegao deve ser facilmente aprendida. Se os visitantes forem obrigados a gastar tempo aprendendo como se utiliza um mecanismo complexo, no tero energia para absorver o contedo. :: Para completar tarefas, as pessoas precisam ter ferramentas adequadas em mos; para tomar decises sobre movimentos e caminhos a percorrer, precisam ter orientao. Os elementos de navegao devem estar sempre visveis, quando necessrios. :: Os usurios so diferentes, desde o equipamento at as suas preferncias. Portanto, dependendo do pblico- alvo, deve-se apresentar diferentes alternativas, como verses para diferentes conexes (discada ou banda larga). :: Mapas e/ou mecanismos de busca podem ajudar. :: Evite o excesso de nveis hierrquicos (ou pginas intermedirias) em que o usurio tenha que completar um grande nmero de passos para alcanar contedos importantes. :: Na mdia impressa, a navegao est implcita e existe um vocabulrio conhecido, como ndices, sumrios etc. Entretanto, na web, essas convenes no existem ainda, estamos diante de um vocabulrio visual, onde cada elemento grfico tem um significado. :: A navegao deve ser adequada aos objetivos da empresa e tambm aos usurios. Um site de comrcio no deve ter o mesmo tipo de soluo de navegao que um site de entretenimento. No primeiro, o internauta provavelmente ter pouco tempo para gastar e ir direto ao produto de interesse. J no segundo, estar disposto a navegar livremente, sem pressa.
15
Desenvolvido pela Fbrica de Stos - ITEC
Web para Designers De onde vim? Onde estou? Para onde vou?
As respostas dessas trs perguntas devem sempre estar bem claras para quem navega. A sensao de segurana o que mantm o usurio no site. Ningum gosta de se sentir perdido. Para que isso no acontea, podem ser usadas algumas tcnicas: Cores diferenciadas Caso o site tenha um cabealho, por exemplo, que mude de cor a cada seo, o visitante memoriza mais facilmente que seo ele j visitou. Essa tcnica deve ser mais utilizada quando o menu no for grande, no tiver mais que cinco itens, pois depende da memorizao do usurio Migalhas de po (breadcrumbs) Consiste em mostrar ao visitante as pginas que ele visitou at chegar na qual ele est. Como se perdidos numa selva, jogssemos migalhas de po no cho para no perdermos o caminho de volta. Apresenta-se, em seqncia, os nomes das sees. Ex.: Pgina Inicial > Empresa > Equipe > Palavra do Presidente Links visitados Outra forma de no deixar o visitante perdido aplicar uma cor diferenciada nos links j visitados: poupa o tempo do usurio em carregar uma pgina j vista. Teste a interatividade de seu site quando ocorre uma reao, como uma resposta imediata a uma ao feita pelo usurio. Na internet, a troca de informaes entre o site (empresa) e o usurio (cliente) perfeitamente possvel. Porm, timidamente explorada. A maioria dos sites s dispe de um canal de contato com o cliente: o e-mail, ou um formulrio de cadastro. Enquetes e testes tambm so considerados recursos interativos.
16
Desenvolvido pela Fbrica de Stos - ITEC
17
Desenvolvido pela Fbrica de Stos - ITEC
Produzido por:
Alcimeire Alessandra Costa Analista Web Gerncia de Governo Eletrnico e Incluso Digital - GGE Diretoria de Tecnologia da Informao - DTI Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC
itec
Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas
Estado de Alagoas Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC Rua Dr. Cincinato Pinto, 503 - Centro - Macei-Alagoas-Brasil - CEP.: 57020-050 Telefone: +55 (82) 3315-1557 - Fax: +55 (82) 3315-1560 E-mail info@itec.al.gov.br