Layout Sites 6f715r
This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report r6l17
Overview 4q3b3c
& View Layout Sites as PDF for free.
More details 26j3b
- Words: 15,091
- Pages: 115
Alfamídia Design Layout de Sites
Alfamídia Design: Layout de Sites
Todos os direitos reservados para AlfamídiaProw LTDA.
AVISO DE RESPONSABILIDADE As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia LTDA. não têm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
10/2007 – Versão 1
Alfamídia Prow LTDA (51) 3073-2100 http://www.alfamidia.com.br
2
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Alfamídia Design: Layout de Sites
UNIDADE 1 1.1 1.2 UNIDADE 2
ALFAMÍDIA DESIGN: LAYOUT DE SITES .............................................................................................. 5 SOBRE O CURSO ............................................................................................................................... 5 ESTRUTURA DO CURSO .................................................................................................................... 5 A PROFISSÃO DE WEB DESIGNER ....................................................................................................... 6
2.1 O PROCESSO DE DESENVOLVIMENTO DE WEBSITES ......................................................................... 7 2.2 ESTUDO DE CASO: INOVAÇÃO EM PRODUTOS DE MÍDIA INTERATIVA .............................................. 9 2.2.1 Metodologia do Projeto ........................................................................................................... 12 UNIDADE 3
TEORIAS DO DESIGN APLICADAS NA WEB ...................................................................................... 14
3.1 ATRAÇÃO CONDICIONAL................................................................................................................ 15 3.2 HARMONIA ..................................................................................................................................... 15 3.3 ALINHAMENTO ............................................................................................................................... 16 3.4 SIMETRIA ....................................................................................................................................... 16 3.5 CORES ............................................................................................................................................ 17 3.5.1 Acerte Sempre .......................................................................................................................... 19 3.5.2 Algumas Recomendações ........................................................................................................ 21 3.6 SIMPLICIDADE ................................................................................................................................ 21 3.7 INTEGRAÇÃO .................................................................................................................................. 21 3.8 CONTRASTES .................................................................................................................................. 22 UNIDADE 4
TIPOGRAFIA........................................................................................................................................... 23
4.1 PROPRIEDADES DA TIPOGRAFIA ..................................................................................................... 23 4.1.1 O Estilo das Fontes ................................................................................................................. 23 4.1.2 Separação entre Caracteres (Kerning) ................................................................................... 24 4.1.3 Entrelinhas .............................................................................................................................. 24 4.2 FAMÍLIAS DE FONTES ..................................................................................................................... 25 4.2.1 Serifadas .................................................................................................................................. 26 4.2.2 Sem Serifa ................................................................................................................................ 26 4.2.3 Monoespaçadas ....................................................................................................................... 27 4.2.4 Bitmap ..................................................................................................................................... 27 4.2.5 Caligráficas ............................................................................................................................. 28 4.2.6 Fantasia ................................................................................................................................... 28 4.3 LEGIBILIDADE ................................................................................................................................ 29 UNIDADE 5 5.1 5.2 UNIDADE 6
GESTALT APLICADA A WEB ............................................................................................................... 31 A PREGNÂNCIA DA FORMA ............................................................................................................ 31 PREGNÂNCIA NA WEB .................................................................................................................... 33 USABILIDADE NA WEB......................................................................................................................... 35
6.1 PROJETANDO UMA BOA EXPERIÊNCIA............................................................................................ 36 6.1.1 Teste de Usabilidade ............................................................................................................... 37 6.1.2 Como Fazer? ........................................................................................................................... 38 UNIDADE 7 7.1
MODELOS DE SITE................................................................................................................................ 41 INSTITUCIONAIS ............................................................................................................................. 42
3
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites 7.2 7.3 7.4 7.5
PORTAIS ......................................................................................................................................... 43 E-COMMERCE ................................................................................................................................. 43 EXPERIMENTAIS ............................................................................................................................. 44 HOTSITES ....................................................................................................................................... 44
UNIDADE 8
ANÚNCIOS, POP-UPS E DEMAIS ESPAÇOS PUBLICITÁRIOS ......................................................... 46
8.1 OS BANNERS .................................................................................................................................. 47 8.1.1 Full Banner.............................................................................................................................. 47 8.1.2 Half Banner ............................................................................................................................. 47 8.1.3 Banner “Botão” Padrão ......................................................................................................... 48 8.1.4 Banners “Botão” Quadrado ................................................................................................... 48 8.1.5 Minibanners............................................................................................................................. 48 8.1.6 Banner Vertical ....................................................................................................................... 49 8.1.7 Banner-faixa ............................................................................................................................ 49 8.1.8 Arranha-Céus ou Sky Scrapers ................................................................................................ 49 8.1.9 Outros Tipos de Banners ......................................................................................................... 49 8.2 OS POP-UPS .................................................................................................................................... 50 8.3 COMO ALCANÇAR EFICIÊNCIA COM BANNERS? ............................................................................. 51 UNIDADE 9 9.1
ANIMANDO IMAGENS PARA WEB....................................................................................................... 53 A PALETA ANIMATION ................................................................................................................... 53
UNIDADE 10 10.1 10.2 10.3
CRIANDO SLICES/FATIAS ............................................................................................................... 63
CRIANDO FATIAS ........................................................................................................................... 63 SALVANDO OS ARQUIVOS .............................................................................................................. 65 SALVANDO COMO HTML E IMAGENS ............................................................................................ 67
UNIDADE 11 11.1
MONTAGEM DO LAYOUT COM DIVS ............................................................................................. 70
USANDO DIV TAG .......................................................................................................................... 70
UNIDADE 12 12.1 12.2 12.3
PHOTOSHOP CS3 COM DREAMWEAVER CS3 ............................................................................. 78
VINCULANDO UM ARQUIVO PSD NO DREAMWEAVER CS3 ............................................................ 79 USANDO O COMANDO COPY MERGE .............................................................................................. 81 INSERINDO OS TEXTOS ................................................................................................................... 82
UNIDADE 13 13.1
PHOTOSHOP CS3 COM FLASH CS3 .............................................................................................. 85
IMPORTANDO UM ARQUIVO PSD PARA O FLASH CS3 ...................................................................... 86
UNIDADE 14 14.1
DREAMWEAVER CS3 COM FLASH CS3 ........................................................................................ 91
EDITANDO UM SWF A PARTIR DO DREAMWEAVER CS3 .................................................................. 92
UNIDADE 15 15.1 15.2 15.3
FAZENDO SEU PRÓPRIO LAYOUT ................................................................................................ 95
A IMPORTÂNCIA DE UM PORFIFÓLIO ONLINE ................................................................................. 95 O QUE DIVULGAR? ......................................................................................................................... 95 ALGUNS CRITÉRIOS NA SELEÇÃO DOS TRABALHOS ....................................................................... 96
4
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 1 Alfamídia Design: Layout de Sites
1.1 Sobre o Curso O curso de Layout de Sites trás uma parte de teoria que enfoca o fim do amadorismo na internet e a importância da multidisciplinariedade dos profissionais envolvidos no projeto. Demonstra, também, a integração da versão Adobe CS3 dos produtos: Dreamweaver, Flash e Photoshop, levando em conta a sua total integração. O conjunto de todas essas etapas resultará em um trabalho mais profissional, que melhorará a qualidade do produto final.
1.2 Estrutura do Curso As primeiras unidades trazem conceitos na área de Design para Web, trazendo algumas peculiaridades e demonstrando a maneira ideal de trabalharmos em um projeto para Web. No decorrer de toda a apostila o aluno terá total autonomia para criar o seu projeto de trabalho final. As unidades seguintes exploram a integração dos softwares: Dreamweaver CS3, Photoshop CS3 e Flash CS3, demonstrando a sua total integração para quem trabalha com Web.
5
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 2 A Profissão de Web Designer
Não existem mais bobos investindo na Internet. Todo mundo entra para ganhar. E para ganhar, não basta apenas que o profissional de web corra o campo todo, sem defender nem atacar com eficiência. Projetos de sucesso têm um fator em comum: a multidisciplinariedade, ou seja, muitos profissionais em campo jogando em diferentes áreas.
6
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
A segunda geração da World Wide Web, ou Web 2.0 é baseada na simplicidade, criatividade e focada nos usuários, reforçando o conceito de troca de informações e colaboração dos internautas com sites e serviços virtuais. A idéia é que o ambiente on-line se torne mais dinâmico e que os usuários colaborem para a organização de conteúdo. E isso não quer dizer que este mundo novo acontecerá apenas no computador pessoal, como conhecemos hoje. A Web 2.0 nasce pensando que as aplicações que chegam ao “mercado” virão prontas para rodar nos players de mp3, nos celulares, nos videogames, na TV Interativa. A empresa Web 2.0 por excelência é o Google, pois segue o lema de “LANCE LOGO, LANCE SEMPRE, TODO DIA”. Você pode lançar uma versão do seu site, por exemplo, hoje e outra amanhã, sempre a partir do conseguido com cada incremento ou retorno por parte dos usuários do site. Lance o produto com o mínimo de funcionalidades para atingir seus objetivos e cresça com ele. A metodologia de desenvolvimento de um projeto centrado nos usuários implica a junção de conhecimentos pertencentes a diferentes áreas.
2.1 O Processo de Desenvolvimento de Websites Um produto bem projetado envolve muito mais do que apenas um conteúdo de qualidade. Questões como facilidade de uso, desempenho e design gráfico também são importantes. A satisfação subjetiva, a “agradabilidade”, também faz parte desse todo. O conjunto resultante de todos esses fatores, mas a questão da fluidez e imersão total, tem a capacidade de gerar aquilo que podemos chamar de “EXPERIÊNCIA PERFEITA”.
_________________________________________________________________ Anotações
7
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Criação Levantamento de dados
Refinamento
Design
Avaliação
Prototipação
Produção
Manutenção
Implementação
Este gráfico, utilizado por Van Duyne, Landay e Hong, mostra o processo genérico de desenvolvimento de Websites. Seus termos significam o seguinte: 1. Levantamento de dados: conhecimento do público-alvo e suas necessidades, conceituação do negócio e objetivos dos usuários do website. 2. Criação: geração de idéias que podem ou não ser aproveitadas para desenvolvimento futuro. 3. Refinamento: aperfeiçoamento da navegação, do fluxo e do layout. 4. Produção: desenvolvimento do protótipo funcional. _________________________________________________________________ Anotações
8
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5. Implementação: desenvolvimento do código, conteúdo e imagens finais do site. 6. Lançamento: disponibilização do website para uso real. 7. Manutenção: atualização do site existente, como análise de métricas de sucesso e preparação para o redesign. Para podermos vislumbrar estes conceitos vamos analisar um estudo de caso, que consta no livro: Design para a Internet: projetando a experiência perfeito do autor Felipe Memória.
2.2 Estudo de Caso: Inovação em Produtos de Mídia Interativa A interação entre pessoas com diferentes especialidades é um traço característico do processo de grandes empresas de mídia interativa. E esse é um fator fundamental para o desenvolvimento de produtos complexos. Vamos analisar o site da Globo.com, sendo que a multidisciplinariedade desta empresa começa no seu Departamento de Criação Interna. Ele é responsável por todos os projetos da empresa, mesmo aqueles que eventualmente são terceirizados. A criação, normalmente, é dividida em três grupos de trabalho, contando com profissionais de diferentes áreas: - Arquitetura da Informação; - Design de Interface; - Branding A equipe de arquitetura da informação faz o levantamento e a categorização de todas as informações que existirão dos sites. Eles estimam a quantidade de páginas, o conteúdo e as funcionalidades existentes em cada uma delas, bem como a importância de cada informação presente na tela. Este grupo também é responsável pela documentação de descrição das telas, que explica o funcionamento de cada elemento da página. Já a equipe de design de interface preocupa-se com a usabilidade e a interação humano-computador de tudo que é projetado na criação. São as responsáveis pela _________________________________________________________________ Anotações
9
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
facilidade de uso e de aprendizado, memorizações, tratamento de erros e até mesmo pela capacidade de agradar o usuário. Utilizam os documentos de arquitetura da informação para se guiar e projetar a página: hierarquizar informações, pensar o funcionamento da navegação e montar uma estrutura de layout. Projetam os Wireframes, que são a planta-baixa do site, prevendo cada detalhe e funcionalidade que será utilizada. Temos dois exemplos de Wireframe nas imagens abaixo:
_________________________________________________________________ Anotações
10
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
A equipe de branding concentra seu trabalho no design gráfico, na parte visual. Eles são os responsáveis pela comunicação da mensagem que deve ser transmitida, refletindo os atributos da marca e sua personalidade, além das características emocionais a que o produto deve estar associado. _________________________________________________________________ Anotações
11
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Em 2005, as equipes de branding e design de interface foram unificadas, formando uma equipe só, com profissionais de diferentes áreas.
2.2.1 Metodologia do Projeto A metodologia de um projeto de criação de Website varia conforme sua necessidade. Contudo podemos organizar, de uma maneira geral, o processo da seguinte forma: 1. Demanda/Definição da estratégia 2. Benchmark (marcas de referência do mercado) 3. Levantamento de funcionalidades desejadas (brainstorn) 4. Macroarquitetura da informação 5. Verificação da viabilidade tecnológica 6. Continuação do projeto: a. Detalhamento da arquitetura da informação b. Desenho da experiência do usuário c. Projeto de Interface d. Projeto de branding e. Ajustes 7. Implementação 8. Desenvolvimento 9. Lançamento Existem também etapas de validação, que são um acompanhamento de tudo o que está sendo construído depois de projetado, o que chamamos de testes de Usabilidade, o que falaremos em uma unidade seguinte da apostila. Vimos no decorrer desta unidade que os projetos para a Internet aram a ser mais profissionais. O envolvimento de pessoas com diferentes formações ganhou mais força com o ar dos anos, aumentando a característica multidisciplinar da Web.
_________________________________________________________________ Anotações
12
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Mesmo sabendo que os profissionais de Web estão trabalhando sozinhos na arquitetura da informação, no layout e no código, o ideal é que busquemos parcerias com profissionais que complementem o seu trabalho. Trabalhar com profissionais mais experientes, em algumas etapas do projeto, melhora a qualidade e a velocidade de entrega de seu trabalho, o que pode resultar em mais clientes. É bom saber um pouco de tudo, mas a especialização é mais importante ainda, tanto para o crescimento profissional como para a satisfação pessoal. O ideal é se especializar naquilo que dá mais prazer. Lembres-se: O MENOS É MAIS.
_________________________________________________________________ Anotações
13
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 3 Teorias do Design aplicadas na Web
O fundamental é identificar elementos que guiem a equipe para o projeto de um site que façam as pessoas falarem: “EU AMO ESSE SITE”
14
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Quando o usuário navega na web em busca de uma informação cumprirá essa tarefa de uma forma mais harmoniosa se o design colaborar com isso. Design é a característica do mundo moderno e é aplicado também na web. Na Internet as tecnologias multimídias, como som, imagem, movimento, se caracterizam por utilizarem diferentes recursos simultaneamente e impressionando os sentidos do usuário. Quando bem aplicadas proporcionam uma experiência diferente, satisfatória. Um bom design resulta numa sensação de conforto e bem estar ao usuário. Essas características tornam a web atraente e, quando bem combinadas às informações, resultam em um site com grande potencial de sucesso. O design não pode estar em segundo plano, bem como as informações nele contidas.
3.1 Atração Condicional Todos os elementos que têm algo em comum devem estar juntos no layout, para que o leitor os reconheça como um grupo. Estabelecendo uma relação entre os elementos, o agrupamento possibilita mostrar a hierarquia no layout e sugerir uma ordem de leitura, tornando facilitado o o à informação. Cabe destacar a importância dos conceitos de arquitetura de informação, que é a estrutura de um site em termos de navegação, conteúdo e disposição dos elementos. Organizar as informações possibilita que sejam mais facilmente encontradas e compreendidas. É importante, também, o bom senso para determinar quais elementos dominam e quais se subordinam numa composição.
3.2 Harmonia A harmonia, segundo as leis da Gestalt, prevê a coerência visual dos elementos. Numa composição, cada forma inserida deve ser considerada como elemento do esquema total. ________________________________________________________________________________________ Anotações
15
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Uma recomendação prática é evitar a estratégia de colocar o máximo de informação possível em uma página, um procedimento que, na verdade, contradiz todas as regras convencionais de design. Portanto, os espaços em branco devem ser partes integrante do design de uma página na Web e empregados para permitir a leitura mais fácil e a melhor compreensão do texto ou ainda indicar ao usuário onde começa e onde termina uma seção.
3.3 Alinhamento O alinhamento, em conjunto com os outros fundamentos, faz com que o leitor se sinta natural e confortável. Isso não quer dizer para alinharmos a esquerda, à direita e/ou ao centro, quer dizer que o texto, por exemplo, tem que estabelecer um alinhamento com outro bloco de texto (e/ou imagem) e que uma imagem tem que estabelecer um alinhamento com outra imagem (e/ou bloco de texto).
3.4 Simetria Formas estáticas, geométricas e com dois lados iguais em um mesmo eixo. Esta é a lei bem complexa e ao mesmo tempo bem simples do conceito de Simetria. Mas o difícil é criar layouts simétricos estáticos, estabelecendo equilíbrio dinâmico entre os elementos de uma layout. Para isso é preciso fazer variações entre os elementos, como animação, tamanhos diferentes. Use abordagens simétricas para: - Layouts formais, tais como: casamentos ou formaturas. - Layouts com muitas fotos (simetria pode ajudar a organizar uma página com muitas fotos sem ter que planejar muito) - Qualquer outro tema que peça um tom ou abordagem mais conservadora. Por outro lado, use abordagens assimétricas para: - Refletir um tom informal, alegre, ou cheio de energia.
________________________________________________________________________________________ Anotações
16
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Mas lembre-se que estas são apenas sugestões! Você pode aplicar qualquer abordagem de equilíbrio em qualquer tema que você queira! A escolha é sua.
3.5 Cores Além das palavras e das imagens, a cor é um importante elemento funcional. Ela pode intensificar tanto o texto como a imagem, emprestando-lhes alguma característica especial ou funcionando mesmo como um elemento formativo por si mesma. Contrariamente ao apelo intelectual da palavra, a cor é fundamentalmente emoção e, nesse sentido, ela pode ser imprescindível. A cor exerce uma influência decisiva não apenas em nossos olhos, mas em todos os outros sentidos. Seus efeitos psicológicos, combinados com o conhecimento do simbolismo ancestral a que estão ligadas, tornam as cores um importante fato em qualquer apelo visual dirigido ao ser humano. A combinação de cores deve ser cuidadosa. Elas não apenas precisam combinar entre si dentro de um mesmo espaço, como também devem criar um estado de espírito ou efeito visual. Psicodinâmica das cores: É importante observar também que público jovem responde melhor às cores vivas, fortes. Já o público sofisticado, prefere cores discretas como o preto, o azulescuro, o verde-escuro e o cinza. - Amarelo: a cor amarela transmite alegria e vivacidade. Chama a atenção em qualquer ponto onde é aplicada, e é perfeita para o destaque de algum elemento no layout; - Azul: o azul é uma das cores mais utilizadas em Websites, e uma das preferidas por quase todas as pessoas. Transmite sensação de tranqüilidade, profundidade (quando escuro) e limpeza (quando claro); - Branco: a cor da pureza, para os ocidentais. Representa o vazio, a clareza, o início. Websites com grande predominância de branco tendem a ser mais legíveis aos usuários;
________________________________________________________________________________________ Anotações
17
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Cinza: o cinza transmite a sensação de algo impuro e indeciso (não é claro e nem escuro, preto ou branco). É uma cor triste e sombria, mas também pode definir um Website sóbrio e “sério”; - Laranja: cor que “alimenta”, produz uma sensação de aconchego, intimidade. É uma cor quente e permite resultados excelentes quando utilizada na intensidade e em lugares corretos; - Marrom: cor sóbria e sólida deve ser usada com moderação por trazer um aspecto muito pesado a qualquer local onde esteja aplicada; - Preto: a presença de todas as cores. A eternidade, elegância. A cor da morte. Presente em 99% dos Websites, na sua maioria em pequenos detalhes; - Rosa: o rosa é uma cor feminina, por excelência. Sugere doçura. Simplicidade, intimidade; - Roxo: é uma cor que pode apresentar duas funções distintas: conferindo um aspecto divertido quanto misterioso, nobre, dependendo das cores as quais é associado; - Verde: é a cor da natureza. Suas diversas tonalidades transmitem diferentes sensações, nenhuma delas relacionada à alegria ou a paixão. O verde mais claro é, assim como o azul, calmo e agradável. O verde escuro transmite idéia de profundidade, seriedade. Já o verde amarelado confere a sensação de alegria, ou até mesmo seriedade. O verde é uma cor que deve ser utilizada com muito critério e moderação, já que diversos tons têm a propriedade de desagradar aos olhos. - Vermelho: o vermelho esta intimamente ligado aos desejos ionais. É quente, imponente, chamativo. Suas diversas nuances apresentam diversos significados: o vermelho escuro sugere sobriedade e poder; o vermelho cereja é apaixonado, feminino sensual; o vermelho mais claro é energizante e forte. Sete diretrizes para utilização de cores: 1- Estética (harmonia, equilíbrio, contraste, intensidade, variabilidade); 2- Visibilidade, legibilidade e saturação de leitura (conforto visual). 3- Organização e usabilidade (como ajudar o usuário a navegar no site, direcionar a sua leitura, identificar unidades, partes, seções, etc.). 4- Identidade (como se identificar e ser reconhecido por meio de cores) ________________________________________________________________________________________ Anotações
18
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Repertório simbólico (a carga simbólica que pode ser incorporada às cores, naquele determinado contexto de uso e do repertório do usuário que se pretende atingir). 6- Informação (como a cor pode contribuir para conduzir a informação) 7- Limitações e recursos técnicos (aspectos materiais do e e dos processos) Fonte: Luciano Guimarães
3.5.1 Acerte Sempre - Amarelo X Azul Uma combinação original e que agrada a maioria dos usuários. Neste caso, é recomendado testar os tons de azul mais claros e acinzentados, e aproveitar o amarelo puro na maioria dos detalhes e linhas de composição do layout.
- Verde X Branco O verde é uma cor muito perigosa. A escolha criteriosa do tom é essencial para criar um layout agradável e, ao mesmo tempo, sofisticado. È recomendado esta combinação a partir de tons de verde mais metálicos e levemente azulados que, combinados com o branco, sugerem limpeza e bom gosto. - Cinza X Vermelho Escuro Quando falamos em cinza para esta combinação, escolhemos um tom de cinza mais claro para a maioria dos gráficos em cinza e alguns gráficos em tons de cinza grafite. O vermelho escuro sugere força e “aquece” os tons muito frios de cinza - Azul X Cinza Uma combinação fria mais agradável. Aliás, milhares de sites na Web optam (com sucesso) por estas tonalidades, clássicas, sofisticadas e quase sempre indispensáveis quando não se quer errar. Existem alguns tons de azul puro que requer cautela no uso. Além do mais, é uma cor muito forte e, se aplicada a grandes áreas, tende a desagradar os olhos. Opte sempre por tons de azul acinzentado em grandes áreas. - Preto X Cinza ________________________________________________________________________________________ Anotações
19
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Apesar de serem duas cores que “intimidam”, o preto e o cinza são muito elegantes. Podemos compor um layout muito bonito se usarmos tons de cinza mais claros e escolhermos alguns detalhes em preto. - Preto X Vermelho Escuro X Branco O preto e o vermelho escuro são duas cores muito pesadas que, sozinhas, não é recomendado na composição de uma página. Entretanto, se houver predominância do branco, estas duas cores podem conferir um aspecto maravilhoso ao desenho do site. Lembre-se sempre de aproveitar detalhes em cores escuras e deixar a maior parte do layout em tons mais claros, devido à legibilidade. - Amarelo X Cinza X Laranja O amarelo e o laranja são cores alegres e quentes e, se combinadas com o triste cinza, conferem um ar de moderno e original ao Website. Podemos confeccionar um layout em tons de cinza a arrematar a criação com tons de laranja ou amarelo, sempre usando as variações dos tons mais escuros aos mais claros. - Rosa X Azul Essa combinação confere um resultado bastante agradável, excelentes para um Website feminino ou infantil. Para esses casos, prefira sempre tons claros. - Azul X Laranja Assim como o azul e amarelo, o Designer obterá excelente efeito se combinar tons de azul (acinzentados, sempre) com laranja (neste caso, os tons mais vivos são ideais), este último em detalhes de destaque da página. O laranja tem a propriedade de aquecer o frio azul, e conferir um visual moderno e diferente ao layout. Diversos Websites de entreterimento e diversão utilizam esta combinação. - Bege X Branco O bege é uma tonalidade muito suave e pode ser combinada livremente com o branco, compondo Websites para qualquer público-alvo. Esta combinação é a mais versátil de todas, podendo usarmos sem medo.
________________________________________________________________________________________ Anotações
20
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
3.5.2 Algumas Recomendações - Cuidado redobrado ao utilizar as seguintes cores: roxo e preto. Use o bom senso e analise os efeitos que essas cores causam aos olhos e nos usuários; - Evite misturar dois tons quentes e predominantes na aparência geral de um layout. Procure sempre quebrar o “calor” com algum tom frio; - Cuidado ao utilizar dois ou mais tons luminosos como únicos em um site; - Evite combinar apenas o preto e cinza em um portal. Quebre a monotonia utilizando uma terceira cor mais alegre; - Tenha extremo cuidado com algumas tonalidades de verde. O verde é uma cor muito bonita e pode favorecer o seu layout quando bem aplicada; - Observe, acima de tudo, o público-alvo de seu Website. Isso determinará a utilização de cores, como o rosa, restrita basicamente a sites femininos ou infantis. - E, acima de tudo, preste muita atenção na legibilidade do Website. Cores muito escuras tendem a ofuscar a leitura de textos, mesmo quando eles estão definidos com cores claras.
3.6 Simplicidade A simplicidade gera clareza, organização mais harmoniosa e unificada. Caracteriza-se por organizações formais fáceis de serem assimiladas, lidas e rapidamente compreendidas. É sinônimo de eficiência.
3.7 Integração Seguindo o conceito do site até o fim! É preciso seguir os princípios do design até o fim, se aplicar em uma página, terá de aplicar em todas as outras do website. Agora é à hora de interligar todos os conceitos, harmonizar todos os elementos, construir uma relação com todas as formas ali presentes, pois afinal de contas o que seria de uma interface que utilizam os princípios, mas não estabelecem um agrupamento entre eles? ________________________________________________________________________________________ Anotações
21
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
No entanto, mesmo seguindo um padrão, as páginas devem ter diferenças entre elas, para não cansar o usuário e para que ele perceba que o assunto é outro.
3.8 Contrastes Toda página bem construída é um arranjo de harmonias e contrastes entre suas partes. Um layout contrastante atrai a visão na hora e cria uma real curiosidade e interesse. Ele pode variar muito o tamanho, peso, estilo, forma e cor. Quanto maior a quantidade ou intensidade dos contrastes, mais interessante poderá ser. Logicamente, contrastes de cores e tamanho devem ser aplicados corretamente, dependendo muito do público alvo do site. Público jovem prefere cores vivas, público sofisticado aprecia cores discretas.
________________________________________________________________________________________ Anotações
22
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 4 Tipografia 4.1 Propriedades da Tipografia Tipografia é a maravilhosa arte de se usar tipos para transmitir idéias e informações. Sempre que se coloca alguma palavra em um papel ou em qualquer meio de comunicação visual através do qual se quer conseguir uma mensagem, pode-se aplicar a arte da comunicação. “Tipografia é transformar um espaço vazio, num espaço que não seja mais vazio. Isto é, se temos uma determinada informação ou texto manuscrito e precisamos dar-lhe um formato impresso com uma mensagem clara que possa ser lida sem problema, isso é tipografia.” Wolfgang Weingart Antes de vermos a aplicação e tipos de fontes e os seus significados, é essencial que conheçamos as propriedades da tipografia.
4.1.1 O Estilo das Fontes O estilo corresponde à forma de uma fonte ser realçada. Os estilos mais comuns são: - Negrito: o estilo negrito realça uma palavra ou frase em meio a um período. Muitas vezes, o estilo é aplicado em menus de links, se nenhuma função estética ou funcional aparente; - Itálico: o estilo itálico, além de ser utilizado para realças palavras ou expressões, também funciona como uma diferenciação e destaque de palavras estrangeiras, jargões ou expressões menos conhecidas em meio a um período; - Sublinhado: o estilo sublinhado tornou-se um padrão na Web para links. Embora hoje os estilos CSS tenham permitido a formatação avançada de links, o uso do sublinhado em um texto ainda remete a um elemento clicável;
________________________________________________________________________________________ Anotações
23
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.1.2 Separação entre Caracteres (Kerning) Corresponde ao espaço maior ou menor entre um caracter e outro. Apesar de ser algo simples e quase imperceptível, o ajuste do kerning confere um efeito poderoso quando aplicado em determinados tipos de fontes.
O efeito kerning torna as palavras ou expressões mais longas, aparentemente, e sua leitura é mais pausada e lenta. Devemos evitar utilizar espaçamento entre caracteres muito grande se o período ou a palavra forem muito longos. Também, não é interessante utilizar kerning quando a fonte é manuscrita, já que o texto pode ficar ilegível, dependendo do traçado da fonte:
4.1.3 Entrelinhas O espaçamento entre linhas corresponde à distância entre uma linha de base e a outra:
________________________________________________________________________________________ Anotações
24
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Apesar de esta propriedade depender do tipo de fonte, devemos evitar em espaçamento muito pequenos entre as fontes; o texto torna-se ilegível e desorganizado. Um espaçamento muito grande entre as linhas dificulta a leitura, já que os olhos percorrem um espaço muito maior entre um período e outro, cansando a visão. Observe:
4.2 Famílias de Fontes Existem milhares de tipos de fontes, tradicionais, modernas, ousadas e rebuscadas. Entretanto às vezes é complicado escolher que tipo de fontes é mais adequado a um trabalho ou cliente. São tantos tipos que é comum o Designer demorar-se mais estudando a tipografia de um site que seu próprio desenho. ________________________________________________________________________________________ Anotações
25
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.2.1 Serifadas As fontes serifadas caracterizam-se pela presença de arremates nas partes superiores e inferiores das letras. Esse tipo de fonte confere a um texto maior seriedade e elegância:
As fontes serifadas possibilitam uma leitura mais agradável em livros e impressos, já para a Internet, cujos textos são lidos e interpretados diretamente na tela do computador, as fontes mais adequadas são as da família sem serifa, que veremos a seguir.
4.2.2 Sem Serifa As fontes sem serifa foram criadas pelos designers da escola de design alemã Bauhaus, em meados da década de 30, fazendo parte da chamada “nova tipografia”. Caracterizam-se pelo estilo limpo e desenho simplificado, cujas letras, normalmente, possuem traços de mesma espessura e paralelos entre si, seus pesos são iguais. A leitura é fácil e dinâmica.
________________________________________________________________________________________ Anotações
26
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
As fontes em serifa são as mais indicadas para corpos de texto longos na Web. A fonte Arial é, ainda, a fonte mais usual e presente na maioria dos computadores.
4.2.3 Monoespaçadas As fontes monoespaçadas são aquelas cuja largura dos caracteres é a mesma, qualquer que seja o tamanho do corpo do caracter ou se está em caixa alta ou não. O exemplo mais comum deste tipo de fonte é a Courier e suas variações, remetendo aos caracteres de uma máquina de escrever:
4.2.4 Bitmap Uma fonte bitmap é aquela que utiliza um mapa de bits para a representação de seus caracteres. Não são escalonáveis, podendo ser utilizadas, satisfatoriamente, em um único tamanho de corpo, geralmente muito reduzido:
As fontes bitmap são perfeitas para gráficos mais modernos e futuristas, apesar de apresentarem o inconveniente de serem bastante ilegíveis.
________________________________________________________________________________________ Anotações
27
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.2.5 Caligráficas As fontes caligráficas, também conhecidas como cursivas ou script, como o próprio nome indica, são as fontes cujos caracteres imitam a escrita manual. Seu surgimento data do século XVII, na França, e existem inúmeros tipos de fontes caligráficas. Um detalhe notável desta família é a presença de linhas no início e no fim de cada caracter, o que permite a união entre letras semelhante à conseguida com a escrita manual:
O estilo caligráfico é naturalmente feminino e pode variar do formal ao informal, dependendo da fonte escolhida ou caligrafia imitada.
4.2.6 Fantasia São fontes que não se enquadram em nenhum dos estilos acima, e que também podem ser uma combinação resultante entre um ou mais estilos. Normalmente caracterizam-se pelas formas originais, presença de ornamentos (ou não) e grande divergência de padrão entre os caracteres.
________________________________________________________________________________________ Anotações
28
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.3 Legibilidade Não é demais lembrar que, mais importante que o bom visual de uma fonte é a sua legibilidade. Em se tratando de Internet, os textos necessariamente devem ser escritos de maneira clara e da forma mais simplificada possível, já que a leitura de itens na tela do computador é mais cansativa e, por isso, realizada pelos usuários muito rapidamente. Para assegurar que sua palavra (ou de seus clientes) será bem transmitida, prefira fontes não serifadas (principalmente em textos longos), com estrutura simples, formato facilmente adaptável a qualquer estrutura de layout, conteúdo apresentado e redimensionamento de caracteres flexível. Boas fontes de texto são: Verdana, Arial e Helvetica. É importante lembrar de algumas regras quando usar as fontes na composição: tamanho, peso, estrutura, forma, direção, cor. O alinhamento à esquerda também facilita a leitura. Cuidado com o contraste que forma a cor com o fundo: amarelo sobre branco tem uma leitura difícil, vermelho sobre verde vibra muito, branco sobre preto em texto longo cansa a leitura. Centralize ou justifique quando o tema do seu site e o texto for formal, caso contrário procure utilizar o texto de forma mais livre e disponha conforme a sua criatividade e o bom senso permitirem. É muito importante saber utilizar estilos de fontes em determinados casos: - Fontes desconstruídas e modernas se encaixam bem em sites modernos e jovens; - Fontes clássicas e manuscritas muitas vezes se encaixam bem em sites clássicos e sérios; - Fontes normais e sérias se encaixam perfeitamente em sites institucionais e moderados. Especialistas sugerem que o número de tipos de letras utilizados em um Website fique em torno de três. Utilize tipos de letras para caracterizar diferentemente o título, o texto e anotações. Ao adotar, por exemplo, três tipos, pode-se fazer uso de suas variações como o itálico, o bold e o condensado que permitem boa margem de opções, sem, contudo, descaracterizar o estilo da página. Veja alguns exemplos de sites que trabalham bem a tipografia: ________________________________________________________________________________________ Anotações
29
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
30
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 5 Gestalt aplicada a Web
A teoria da Gestalt busca descobrir por que algumas formas agradam mais às pessoas do que outras. De acordo com a Gestalt, a arte se funde no princípio da pregnância da forma. Ou seja, na formação de imagens, os fatores de equilíbrio, clareza e harmonia visual constituem para o ser humano uma necessidade e, por isso, considerados indispensáveis, seja numa obra de arte, num produto industrial, numa peça gráfica, num edifício, numa escultura ou em qualquer outro tipo de manifestação visual.
5.1 A Pregnância da Forma Para melhor compreendermos o conceito de pregnância, iremos definir forma, segundo Aristóteles: “A forma pode ser definida com a figura ou a imagem visível do conteúdo. De um modo mais prático, ela nos informa sobre a natureza da aparência externa de alguma coisa. Tudo que se vê possui forma.” Então, podemos dizer que uma forma possui alta pregnância quando apresenta um alto grau de equilíbrio, clareza e unificação visual, e um mínimo de complicação visual na organização de seus elementos ou unidades compositivas. Observe a imagem abaixo:
31
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Uma imagem que possui baixa pregnância requer uma leitura com maior atenção e um maior tempo para sua compreensão. Veja a imagem abaixo:
Podemos concluir que: - Quanto melhor a organização visual da forma do objeto, em termos de facilidade de compreensão e rapidez de leitura ou interpretação, maior será o seu grau de pregnância; ________________________________________________________________________________________ Anotações
32
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Naturalmente, quanto pior ou mais confusa for à organização visual da forma do objeto menor será o seu grau de pregnância.
5.2 Pregnância na Web Buscar harmonia e equilíbrio no uso dos principais elementos visuais (fotos, desenhos, ícones, tipografia, logotipo, etc.) é apontado como um dos principais caminhos para se atingir um bom grau de pregnância em um site. É importante que as páginas tenham um design que favoreça a alta pregnância, pois isso favorece a usabilidade, que é a facilidade com que o usuário consegue encontrar o que está procurando. Nos ícones, esse fator é ainda mais crítico. Se o desenho no botão for complicado, ele não será compreendido e não cumprirá a sua função. Na elaboração de um site tão importante quanto à função, é o significado. Tem usuário que se sente mais confortável, integrado e estimulado em um ambiente visualmente poluído e cheio de informações competindo pela sua atenção. É muito importante não esquecermos que cada elemento tem intra-relações visuais e que estabeleça relações com os outros elementos. Ou seja, um logotipo, por exemplo, matem em seu próprio desenho relações de pregnância internas entre sua cor, sua forma e sua tipografia. O ideal é investir na qualidade dos elementos visuais e não na quantidade deles na interface. Excessos podem prejudicar o resultado. Neste sentido trabalhar a pregnância de forma adequada em um site é uma tarefa que exige cuidado. Vamos ver alguns fatores relevantes para a organização visual de um site: 1- Logotipo: Considerando-o como símbolo visual de um conceito, é o que vai representar a identidade visual de um site; 2- Tipografia: Texto também é imagem. Letras são signos que expressam significados e que, em conjunto funcionam de forma distinta. 3- Imagem: A qualidade e o equilíbrio entre imagens – fotos, desenhos, ícones - é necessária e desejável. É importante que a pregnância visual destes elementos esteja de acordo com a proposta do site e com o conteúdo disposto. Fotos devem ________________________________________________________________________________________ Anotações
33
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
ter qualidade, apelo estético e de fácil carregamento; desenhos devem ser legíveis; ícones devem ter significado universal, compreensíveis aos usuários. 4- Vídeos e Animações: É importante compatibilizar peso de imagens em movimento com a dinâmica de navegação de uma página. Da mesma forma, devemos entender que uma animação é um recurso que conta uma pequena história. Animações sem propósito tendem e frustrar o usuário e, conseqüentemente, comprometer a avaliação do site. 5- Áudio: Presente em propulsão nos site hoje em dia. A música provoca à formação de imagens na mente de quem a escuta. Em alguns casos pode ser extremamente incômodo para o usuário à repetição contínua de trechos musicais.
________________________________________________________________________________________ Anotações
34
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 6 Usabilidade na Web
Usabilidade é sinônimo de facilidade de uso. Se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais rápido a usar, memoriza as operações e comete menos erros.
35
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
A Internet comercial completa 12 anos em 2007. Está inserida em um curtíssimo período histórico, fase de muita experimentação e adaptação, de descobertas e novas idéias, grandes e rápidos avanços. Ela revolucionou a forma como as pessoas se comunicam, trocam informações e experiências. Com este crescimento rápido surgiu uma enorme demanda, de uma hora para outra, e todos estavam fazendo seus próprios sites. Desde então o comportamento de tentativa e erro se mantém. Graças a estas soluções baseadas no empirismo, Nielsen escreveu em 2000 um artigo com o título “The Mud-Throwing Theory of Usability”, enfocando justamente a questão do “chute”, da falta de conhecimento das pessoas sobre aquilo que estão fazendo. Em virtude da preocupação com o lançamento rápido do produto, da pressão do mercado, os sites acabam sendo desenvolvidos de forma errada. Web sites não são feitos para terem sua beleza contemplada e sim para que usuários encontrem o que querem em um ambiente harmônico e bonito. Se não pensar nisso você vai criar algo lindo e ordinário. E padrões existem para facilitar a vida das pessoas e não para castrar a criatividade. Então como fazer?
6.1 Projetando uma Boa Experiência Grande parte das empresas que produzem sites não focam seus projetos na experiência dos usuários, porque não querem perder tempo e nem dinheiro com testes de usabilidade. No entanto, pode-se entender que o consumo adicional de tempo no cuidado da usabilidade gera um impacto positivo no nível de qualidade do projeto. Os testes de usabilidade são de grande utilidade para que possamos projetar produtos que sejam fáceis de usar e, mais do que isso, capazes de proporcionar uma boa experiência. É importante ressaltar que esses testes são a ferramenta mais poderosa que os designers têm para avaliar suas criações. O segredo é “vender” para o cliente a importância de se testar o que foi projetado. Como diria Jakob Nielsen, testar um usuário é melhor do que não testar nenhum. Se o objetivo for melhorar as funcionalidades de um produto especifico, as ________________________________________________________________________________________ Anotações
36
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
estatísticas mostram que testes com apenas cinco usuários costumam levantar uma boa quantidade de possibilidades de melhora (cerca de 85%). Mas cuidado: designers não são usuários e usuários não são designers. Nem tudo que os usuários falarem pode ser levado em consideração. Por outro lado, eles sempre enxergam problemas que os designers dificilmente percebem.
6.1.1 Teste de Usabilidade Os testes de usabilidade são aplicados em usuários potenciais da interface, ao quais são incentivados a usá-la num ambiente monitorado, onde suas ações são gravadas e anotadas. Um profissional facilitador fica ao lado do usuário para guiálo pelo teste e incentivar que verbalize seus problemas e desconfortos. Numa sala separada, podem estar outros membros da equipe de design da interface para observar o teste ao vivo sem interferir no comportamento do usuário. Após o teste, os dados são analisados e é gerado um relatório contendo recomendações para a equipe de design e o consultor fica à disposição para discutir soluções para os problemas encontrados. Os dados coletados durante os testes são analisados para identificar os problemas de usabilidade que os usuários têm e, na medida em que são encontrados, já são cogitadas possíveis soluções. Ao final da análise, é gerado um relatório contendo os problemas e as soluções propostas e o consultor fica à disposição para reuniões com a equipe para discutir as soluções, bem como acompanhar os seus desdobramentos. Regras Básicas de Usabilidade na WEB: - Clareza na arquitetura da informação; - Facilidade de navegação; - Simplicidade; - A relevância do conteúdo; - Manter a consistência e o padrão; - Tempo ável; ________________________________________________________________________________________ Anotações
37
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Foco nos usuários.
6.1.2 Como Fazer? Este é somente um modelo, o qual pode ser adaptado, dependendo a necessidade do teste. Este teste de usabilidade está sendo utilizado para analisar o site ___________________ As informações fornecidas são vitais para o seu aprimoramento. Nas questões de marcar, favor circular o número correspondente ao grau de concordância. A não ser que esteja indicado, deverá ser marcada somente uma resposta por questão. Por favor, leia com atenção as questões a seguir e em caso de dúvida, solicite esclarecimento com o avaliador, levando em conta que o grau 0 é Difícil e 5 e Fácil. 1. Favor marcar o número correspondente ao grau que você mais concorda: a. Facilidade de utilização: 0 1 2 3 4 5 b. Organização das informações: 0 1 2 3 4 5 c. Layout das telas: 0 1 2 3 4 5 d. Nomenclatura utilizada nas telas (nome de comandos, títulos, campos, etc.): 0 1 2345 e. Mensagens do sistema: 0 1 2 3 4 5 f. Assimilação das informações: 0 1 2 3 4 5 g. No geral, a realização do teste foi: 0 1 2 3 4 5 2. Aponte situações em que você achou fácil utilizar no sistema: ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________________________________ Anotações
38
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________ 3. Aponte situações que você sentiu dificuldades: ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ 4. Você utilizou a Ajuda on-line do sistema em algum momento? a. Sim b. Não Em caso afirmativo, descreva em quais situações você utilizou a Ajuda on-line do sistema (comente também se as informações da Ajuda on-line foram de pouca ou grande valia): ________________________________________________________________ ________________________________________________________________ 5. Diante do teste realizado, você acha que o programa atingiu o objetivo para o qual foi desenvolvido? Explique. ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ 6. O espaço abaixo é reservado para que você exponha sua opinião e sugira melhorias no sistema. ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
________________________________________________________________________________________ Anotações
39
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
40
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 7 Modelos de site
Algumas pessoas ainda confundem estética com beleza, porém esse é um conceito ultraado desde o romantismo. Uma série de pensadores, entre eles Kant, discutiu o binômio belo/bom da era romântica e o termo foi sofrendo algumas modificações ando, por exemplo, pelo sublime, até chegar à estética. Estética nada mais é do que a percepção do objeto ou aquilo a que o objeto se propõe. Ela transforma o objeto em mercadoria de acordo com o público que deseja atingir, por isso não podemos mais dizer que a estética é única, existe uma diferente para tipo de projeto. Na web, por exemplo, cada tipo de site tem a sua estética. Os portais são um bom exemplo de uma estética já consolidada - embora isso não queira dizer que é uma boa solução. Eles são comunidades virtuais sem nenhum paralelo na vida real e possuem um volume imenso de informações que precisam ser divulgadas através de seus canais e sub-canais. Essa característica fundamental dos portais faz com que todos eles sigam um padrão visual/formal que corresponde à sua estética: - Colunas fixas; - Barra de navegação com linguagem verbal; - Coluna de compras do lado direito da tela etc. Podemos listar uma série de estéticas na web tais como, a dos sites de busca tendo o Google como referência de funcionalidade e objetividade, a dos sites de compras, a dos portifólios virtuais e a dos blogs, entre outras. E o que todas as estéticas tem em comum?
41
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Bem, se não tem em comum, deveriam ter: a função de atender as necessidades dos usuários do site. Quando esse pré-requisito não está presente encontramos sites de pequenas dimensões tentando ser um portal e comprometendo seu conteúdo através de mini-setores prejudicando a funcionalidade do site. É comum vermos sites de conteúdo dinâmico, como o de jornais e portais, planejado como se fossem sites institucionais e vice-versa. Os designers de sites devem pensar como arquitetos, pois assim como um arquiteto precisa projetar ambientes baseado na utilização e finalidade dos espaços da futura edificação, um designer de web sites também precisa, porque o produto final não é uma realização apenas visual. Se a elaboração de um projeto de um site não tiver critérios que levem a uma melhor maneira de usá-lo, seria melhor comprar sites prontos, mudando apenas o logotipo. Ou então, pedir para que o sobrinho do irmão do cunhado da vizinha faça a seu gosto. Para criar um site tem que ser “cri-cri-cri” - criterioso, crítico e criativo. É necessário pensar como usuário, designer e cliente. Isso é muito mais importante do que aprender o último software ou fazer designs que pareçam à última tendência. Há quem se preocupe mais com seu gosto pessoal do que com o resultado que o site deve gerar. Vale lembrar que a prioridade de um site são os usuários, seja falando sobre a usabilidade, conteúdo ou design. A tecnologia é importante e as novas tecnologias, principalmente, podem ser muito interessantes.Mas colocar a tecnologia antes dos usuários pode ser desastroso. Uma boa dica é tentar fazer relações que combinem funcionalidade e perfil do cliente e com certeza o resultado será satisfatório. Se os usuários não puderem encontrar algo no site, não voltarão. Se não tiverem uma experiência boa, não voltarão.
7.1 Institucionais Website institucional é todo aquele grande site não comercial, governamental ou não, por exemplo: sites de universidades, portais de órgãos públicos, portais de cidades mantidas pelo governo, sites de ONGs, entre outros. ________________________________________________________________________________________ Anotações
42
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7.2 Portais Portal seria uma porta de entrada ao abrangente e diversificado conteúdo da Internet, “acolhido” por um grande website de forma total e organizada. Agrega conteúdos produzidos dentro de seu próprio meio e também de terceiros, relacionados aos mais diversos assuntos: notícias, eventos desportivos, seções de humor, etc. Além de reunir conteúdo de interesse dos usuários, fornece, também, diversos serviços como: salas de bate-papo (Chat) contas de e-mail, fóruns, mecanismos de busca... Tudo com o único objetivo de gerar uma comunidade “fiel”.
7.3 E-commerce O site e-Commerce busca agilidade nas operações e procedimentos istrativos pré e pós-venda, aumento na visibilidade para a captação de clientes e consumidores. ________________________________________________________________________________________ Anotações
43
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Redução de custos – por não necessitar de um vendedor, de exposição de produtos "ao vivo" e espaço físico para a venda, os custos são menores. - Maior exposição de seus produtos – através da Internet, seu produto pode ser visualizado e comprado em qualquer lugar do mundo. - Aumento do canal de vendas – a Internet é o mais novo canal de vendas de um produto. - Maior controle das vendas – com todas as vendas registradas na página, é possível obter informações como produtos mais vendidos ou vendas médias por cliente. - Melhor relacionamento com o cliente – sabendo quais são as vendas de cada cliente é possível traçar um perfil e fazer ofertas específicas para cada um ou configurar a página de acordo com suas preferências.
7.4 Experimentais Um site experimental pode usar e abusar de animações, devendo sempre buscar o que há de novo no mercado e testar, como: novas tecnologias e modos de comunicação na Web. http://www.2advanced.com
7.5 Hotsites Hotsite é um pequeno website com o objetivo de divulgar um produto, uma idéia, etc. Geralmente é caracterizado pela ênfase no visual, textos curtos e efeitos especiais. Um HotSite normalmente é criado quando se quer realizar campanhas de curta duração ou ligadas a eventos ou produtos específicos. Ele é reconhecido como uma das formas mais eficientes da comunicação on-line, integrando-se a uma estrutura pré-existente, mas com funcionamento independente. É possível mesclar informações institucionais ou seções dinâmicas, agregando mais valor ao HotSite. ________________________________________________________________________________________ Anotações
44
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
45
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 8 Anúncios, Pop-ups e demais Espaços Publicitários Quando, em 1969, os cientistas das Universidades de Stanford, Massachusetts, e da Califórnia, em Los Angeles, realizaram a primeira (e bem sucedida) comunicação de longa distância através de um computador, eles não imaginaram que aquele curto diálogo fosse o início de uma das maiores revoluções do século XX. A partir de várias descobertas, emergiu a possibilidade de adquirirmos um computador pessoal barato com conexão a Internet. O interesse cada vez mais crescente das pessoas conectadas em tempo real e sua utilização começou e despertar a atenção de inúmeras corporações, que perceberam o grande potencial comercial da rede. Tudo estava mais fácil, muito ágil e crescendo vertiginosamente. Era tudo que as grandes empresas, sempre ávidas pela conquista de novos clientes e meios de divulgação, precisavam. Estava, assim, consolidado o lado comercial da rede. Á medida que aumentavam os os e o número de visitantes em uma página ou site da Web, estas disponibilizavam espaços especialmente reservados para que outras empresas divulgassem seus serviços, mediante pagamento de taxas préestabelecidas. Assim como anúncios de jornal possuem diversos padrões de tamanho que precisam ser respeitados, os anúncios para Web também possuem algumas normas. Quando uma empresa decide colocar uma propaganda em outro Website, ela precisa pensar em qual tipo de anúncio deseja veicular (estático ou animado), o tamanho da imagem e o local em que ela aparecerá. Cada um desses fatores influencia diretamente o preço de exibição desse anúncio, bem como o tamanho da empresa em qual se deseja anunciar e os os diários que ela recebe.
________________________________________________________________________________________ Anotações
46
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.1 Os Banners Derivados da palavra sa bannière, bandeira, os banners correspondem a imagens estáticas ou animadas, que podem ser inseridas em locais diversos da home page ou seções internas de um Website, especialmente os portais e sites empresariais maiores. Apesar de termos milhões de possibilidades na rede, e uma grande variedade de tamanhos e padrões de banners, existem os que foram predefinidos pela IAB/CASIE (Internet Advertising Bureau (IAB)- Birô de Publicidade na Internet e a Coalition for Advertising ed Information & Entertainment (CASIE) Coalizão para Jornalismo e Entretenimento Sustentados por Publicidade) para a Internet:
8.1.1 Full Banner Suas dimensões são as de 468x60 pixels. Dificilmente um full banner é estático. Atualmente, as empresas estão preferindo confeccionar seus banners em Flash, que possibilita uma maior sofisticação na animação e um tamanho bastante reduzido de arquivo:
8.1.2 Half Banner O Half Banner, como deixa claro o seu nome (half = metade), corresponde à metade de um full banner, dividido a partir de sua largura. Possui as dimensões de 234x60 pixel. O half banner é uma opção interessante quando pensamos em colocar mais de um anunciante numa determinada área de destaque no topo do site, já que é possível a inclusão de dois banners half pelo tamanho de um full banner
________________________________________________________________________________________ Anotações
47
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.1.3 Banner “Botão” Padrão Os banners “botão” figuram aos montes nas áreas laterais da home page de vários sites. Eles são utilizados, geralmente, para caber em espaços pequenos, ou por sites que não querem chamar atenção excessiva para os anúncios em seu layout: O tamanho médio para um banner botão padrão é o de 120x60 pixels. Por serem pequenos, normalmente são estáticos, e possuem o que podemos chamar de “design sucinto”: apenas as informações necessárias, como o logotipo do interessado em anunciar e uma arte discreta, mas legível.
8.1.4 Banners “Botão” Quadrado Os banners quadrados (ou Square Banners) também são utilizados nas laterais na página de um site. Atualmente, a maioria destes banners está sendo apresentada com animações em Flash, o que se justifica por suas dimensões de 125x125 pixels.
8.1.5 Minibanners Os minibanners são pequenas barras que não possuem tendência forte a serem utilizadas como forma direta de venda de anúncios. Obviamente, graças ao seu tamanho reduzido, o minibanner presta-se, na maioria das vezes, apenas a publicidade de algum patrocinador ou anunciando a tecnologia utilizada na construção do portal ou Website, por exemplo. As dimensões padrão de um minibanner são 88x31 pixels: Compor um minibanner é muitas vezes um desafio, que precisa de boa dose de paciência e olho clínico para realizarmos um trabalho satisfatório e harmônico. Podem ser dispostos em qualquer lugar da página.
________________________________________________________________________________________ Anotações
48
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.1.6 Banner Vertical São banners verticais são excelentes de se trabalhar graficamente, pois possuem dimensões suficientes para encaixar perfeitamente imagens e textos, sem prejudicar ambos. As dimensões de um banner vertical dão 120x240 pixels e são, geralmente, locados nas laterais da página.
8.1.7 Banner-faixa Os banners-faixa foram popularizados pelo Yahoo, e apesar de não serem comuns quando os half banners, são uma boa saída para expor seus anunciantes sem poluir muito o visual do site. Geralmente, são posicionados no topo da home page, ou na parte inferior da região do conteúdo. As dimensões de um banner-faixa são 234x30 pixels.
8.1.8 Arranha-Céus ou Sky Scrapers São os imensos banners que ocupam toda a região de uma página, quase sempre a lateral direita. Na sua grande maioria são animados em Flash, e geralmente apresentam promoções internas ou assuntos relacionados ao próprio site. O tamanho médio de um banner é de cerca de 150x580 pixels:
8.1.9 Outros Tipos de Banners Também, vemos muitos sites que além de utilizar os tamanhos-padrão comuns aos banners de anúncios, personalizam espaços publicitários de acordo com o formato e disposição de seus layouts. ________________________________________________________________________________________ Anotações
49
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Assim, é possível encontrarmos uma grande variedade de tipos personalizados ao navegarmos pela Web:
8.2 Os Pop-ups Os pop-ups correspondem às janelas de navegador que se abrem na tela assim que uma página é carregada. Os anúncios veiculados em janelas pop-up são as mais caras formas de publicidade em Internet, já que ficam a frente do conteúdo do próprio site. Os anúncios pop-up usualmente são animações em Flash, e possuem um tamanho médio de 200x200 pixels. Observe alguns exemplos:
________________________________________________________________________________________ Anotações
50
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.3 Como Alcançar Eficiência com Banners? Até hoje a eficiência dos banners é questionada. Virou assunto polêmico entre publicitários, veículos e anunciantes. Iremos dar algumas dicas para alcançar eficiência com banners, visando não só os cliques, mas principalmente os resultados. 1. Cuidado Com o Banner Negativo. Fique Atento as Mensagens. Assim como na publicidade convencional, o banner também sofre com isso: a negatividade na mensagem publicitária. Existe uma “corrente de pensamento” (creio que seja subconsciente) de que o anúncio, para chamar a atenção de determinado público, deve mostrar imagem ou texto que se relaciona com o estado emocional atual do público-alvo. Citamos um caso-exemplo, fictício, mas comum de se ver: um banner que anuncia um novo software de proteção Windows. O software protege contra vírus, preserva o sistema, bloqueia as suas configurações, podendo ter o apenas com sua senha. O criador do banner tem a idéia de colocar uma foto de um homem de gravata, puxando os cabelos pra cima, fazendo careta, com cara de raiva, gritando, suando e franzindo a testa. O texto chama seu público: “Você está assim com seu Windows?”. E nas cenas seguintes, apresenta o produto. Uma coisa garanto: poucos seres humanos irão se identificar com aquele homem de careta horrenda e de cabelos arrepiados. Ninguém procura a desgraça para si.Todos procuram à felicidade. Quando for criar um banner para sua empresa, pense bem nessa idéia. No caso do exemplo, o criador do banner deveria ter centrado sua mensagem inicial na tranqüilidade e paz que o cliente poderá ter com o software de proteção Windows. A imagem deveria transmitir isso, acompanhado de uma mensagem agradável e positiva como “Fique em paz com seu computador” ou algo do tipo. É necessário dar ação positiva ao espectador do banner, criando uma boa expectativa, mostrando que ele poderá encontrar uma feliz solução para seu problema. 2. Esqueça o “Anuncie Aqui!”
________________________________________________________________________________________ Anotações
51
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Esse tipo de mensagem não traz o resultado esperado na maioria das vezes. Dá uma idéia de “desespero”, de que o veículo não funciona e que por isso está sem anunciantes. Uma idéia é dar uma “degustação” ao anunciante. Dê a oportunidade de experimentação, onde o anunciante poderá anunciar por um determinado número de dias, cliques ou visualizações. Se a empresa anunciante obtiver resultados satisfatórios com esses anúncios, com certeza continuarão com a campanha pagando pelo espaço. 3. Ofereça Tamanhos de Banners Diferenciados e Soluções Criativas de Espaço. Os departamentos de publicidade de jornais e revistas, encarregados de encontrar novas soluções para o mercado publicitário vem implementando nos últimos dez anos novos formatos de anúncios onde se quebrou uma série de limites. Hoje os anunciantes podem bolar anúncios de diferentes formatos, saindo do padrão retangular. O mesmo pode ser aplicado a web. É necessário oferecer novos espaços para anúncios on-line, como os banners em flash que “flutuam“ sobre a página. Para os criadores de banners, é bom apostar nos anúncios interativos, onde se tem brincadeiras ou revelações feitas através do clique do usuário. A interação é a tendência. 4. Cuidado com o Peso dos Banners. Já vi banners por aí com 200Kb de grandes empresas que travavam toda a página por vários minutos até o banner carregar totalmente. Sugestão: um banner de tamanho médio, como os de 468X60, deve ter de 10 a 15kb. Os banners flash podem chegar aos 20kb, pois o mesmo é mostrado à medida que vai carregando, não travando a página. 5. Evite Histórias Longas. Seja objetivo. Provoque curiosidade, mas não prolongue o roteiro. São poucos segundos de efeito onde você poderá ar sua mensagem com eficiência.
________________________________________________________________________________________ Anotações
52
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 9 Animando Imagens para Web 9.1 A Paleta Animation A animação no Photoshop CS3 é feita através da paleta Animation. Na animação as figuras são colocadas em várias camadas, cada uma delas com uma imagem que compõe a ação, e também são dispostas em seqüência. Um mecanismo de repetição faz com que os quadros apareçam um após o outro e assim simulem o movimento, dando a ilusão de continuidade. Nessa paleta encontram-se todos os comandos necessários para criarmos uma animação.
Clicando no botão Convert to Timeline Animation desta paleta:
vemos o outro formato
________________________________________________________________________________________ Anotações
53
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Embora não ostente a versatilidade do Flash e de outros sistemas de animação poderosos, os Gifs animados são fáceis de criar, ocupam pouco espaço em arquivo e podem dar um toque original em nossas páginas Web, podendo ser feitos no Photoshop. 1- Crie um novo arquivo no Photoshop. 2- Desenhe um círculo vazado em formato de shape.
3- Escreva um número “1” com fonte Arial Black de tamanho 250 pixel no meio do círculo:
________________________________________________________________________________________ Anotações
54
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4- Agora, duplique esta layer, escrevendo “2”. Repita esse procedimento até chegar ao número “5”:
________________________________________________________________________________________ Anotações
55
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Desabilite a visualização de todas as layers, deixando somente a layer que contém o circulo com visualização e a que contém o número “1”:
________________________________________________________________________________________ Anotações
56
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
6- Selecione a layer que contém o círculo e escolha a opção de menu: Layer > Rasterize Layer. Isso fará com que o shape vire uma imagem bitmap: 7- Habilite a visualização de todas as layers e clique no menu pop-up da paleta animation escolhendo a opção: Make Frames From Layers:
________________________________________________________________________________________ Anotações
57
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Veja como ficou nossa paleta animation:
8- Para que o círculo fique visível em todos os frames habilite a sua visualização na paleta Layers:
9- Com a layer Background selecionada clique no menu pop-up da paleta Animation e escolha a opção: Match Layer Across Frame, deixando marcados todos os itens da janela Match Layer :
________________________________________________________________________________________ Anotações
58
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
10- Delete os dois primeiros frames da paleta Animation:
Ao deletarmos os frames da paleta animation não estaremos deletando as layers. 11- No menu pop-up da paleta clique em Reverse Frames para invertemos a ordem dos frames:
12- Selecione todos os frames e no ícone dos segundos escolha a opção de 1.0 Clicando no botão de Plays Animation podemos ver a animação. 13- Clique no botão Convert to timeline animation, localizado no lado direito da paleta, para vermos o outro formato desta paleta:
________________________________________________________________________________________ Anotações
59
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
13- Clique no menu pop-up da paleta e escolha a opção: Document Settings, marcando 1 frame por segundo:
14- Com todas as layers visíveis, selecione somente as layers que contém os números:
________________________________________________________________________________________ Anotações
60
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
14- Clique no menu pop-up da paleta e escolha a opção: Make Frame for Layers. Veja como ficou nossa paleta animation:
________________________________________________________________________________________ Anotações
61
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Agora é só exportar nossa animação para o formato Gif.
________________________________________________________________________________________ Anotações
62
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 10 Criando Slices/Fatias 10.1 Criando Fatias As fatias são áreas de uma imagem definidas com base em camadas, guias ou seleções precisas ou usando-se a ferramenta Slice. Quando você define as fatias de uma imagem, o Photoshop CS3 cria uma folha de estilo em cascata, ou uma tabela HTML que retêm e alinham as fatias. Se desejar, você pode gerar um arquivo HTML que contenha a imagem fatiada junto com a folha de estilo em cascata, Div ou Tabela. Você pode utilizar a ferramenta Slice para criar fatias retangulares na imagem. As fatias criadas com essa ferramenta são chamadas de fatias da usuário. Quando você cria uma fatia de usuário em uma imagem, o Photoshop CS3 cria autofatias para todas as áreas indefinidas em torno da fatia de usuário. 1- Abra o arquivo personal_page.psd na pasta “site” que esta na pasta da Lição:
2- Selecione a ferramenta slice , com esta ferramenta criamos as fatias e com a slice select selecionamos as fatias. 3- Desabilite, através do layers, os textos. Veja a imagem abaixo: 4- Clicando e arrastando com o botão esquerdo do mouse faça uma fatia na parte superior do layout, como na imagem abaixo:
5- Para vermos as opções da fatia selecione a slice select clique sobre ela. Abrirá uma janela como na figura abaixo:
e dê um duplo
________________________________________________________________________________________ Anotações
63
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Slice type: se estiver selecionada a opção “Image” a fatia será exportada como imagem e se for à opção de “No Image” a fatia só constará como preenchimento no programa, mas não será exportada. Name: o nome da fatia, que poder ser alterado. O photoshop automaticamente coloca o nome da fatia (que é o nome do arquivo psd) e um número. URL: link para aonde aquela fatia vai apontar, se for necessário. Target: de que forma será carregado este link pelo navegador. Ex: _blank Alt tag: é o texto alternativo, quando ado o mouse sobre este link aparecerá o que for digitado neste campo. Dimensions: X/Y posição na tela e W/H largura e altura da fatia, respectivamente. 6- Para esta fatia coloque o nome de “topo”. 7- Agora iremos começar a fazer as outras fatias. Faça uma fatia abrangendo a parte que contém o menu e outra para a parte da flor no lado esquerdo. Veja a imagem: ________________________________________________________________________________________ Anotações
64
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8- Coloque um nome para cada fatia criada, clicando em cima dela com a ferramenta Slice Select. 9- Observe a imagem abaixo e veja como foram criadas as fatias: Lembre-se quem define a criação das fatias é você, elas podem ser feitas de forma diferente, também, dependendo como será montado o layout no Dreamweaver CS3. Importante: Não esqueça de dar nome às fatias, de conferir se nenhuma fatia esta sobreposta à outra e se a soma das larguras das fatias está coincidindo. Cada detalhe é importante para que não haja erros na montagem do layout com Divs. 10- Nas fatias que ficaram ao redor do layout (em cinza) selecione-as e marque a opção No Image. Repita este procedimento para as duas fatias que ficaram dentro do layout, também.
10.2 Salvando os Arquivos 11- Com as fatias prontas vamos exportá-las. Clique no menu File > Sabe For Web & Devices. Abrirá a janela para escolhermos qual o formato da imagem queremos exportar. Para cada fatia podemos configurar a qualidade da imagem e seu formato (jpg ou gif). 11- Clique em Save: 12- No item Settings escolha a opção Other e desmarque a opção Put Image in Folder:
________________________________________________________________________________________ Anotações
65
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
13- Escolha o diretório site/imagens para salvar estes arquivos.
________________________________________________________________________________________ Anotações
66
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Observe que na pasta imagens nossos arquivos já estão salvos:
10.3 Salvando como HTML e Imagens Podemos exportar nosso layout como HTML e imagens, deixando que o Photoshop crie para nós o arquivo HTML. 1- Clique, novamente, no menu File > Sabe For Web & Devices. 2- No item Nome do arquivo coloque “index.html”, no item Salvar como tipo escolha à opção “Html and Images” e no item Settings escolha a opção Other escolhendo o item Slices marcando a opção Generate CSS. Observe as imagens abaixo: ________________________________________________________________________________________ Anotações
67
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
3- Depois de feitas estas configurações clique em OK e nosso Html estará salvo. Analise o Html e observe as facilidades de salvar desta forma e suas limitações. Na pasta “imagens” temos mais dois arquivos psd que são: nemo.psd e celular.psd. Exercite o fatiamento nesses dois layouts.
________________________________________________________________________________________ Anotações
68
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
69
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 11 Montagem do Layout com Divs 11.1 Usando Div Tag A forma ideal na montagem de um layout que contenha textos e imagens é usando a opção de Div Tag. 1- Abra o Dreamweaver CS3 e crie um arquivo Html novo. Salve-o como “index.html” na pasta site. 2- No menu Site > New Site crie um site para que o Dreamweaver mapeie os arquivos. 3- Arraste a imagem “topo” para o topo da página, colocando um texto alternativo para a mesma. 4- Selecione a imagem e clique no ícone Insert Div Tag 5- Deixe marcada a opção Wrap around selection e clique no botão New CSS Style:
6- Na opção Advanced escreva o nome do ID como na imagem abaixo:
________________________________________________________________________________________ Anotações
70
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7- Salve este css como “site.css” na pasta css dentro da pasta site. 8- Na janela CSS Rule Definition marque a largura desta Div, que deve ser a mesma largura da imagem “topo.jpg”:
Clicando em OK já podemos ver a imagem com a Div ao redor. 9- Posicione o cursor do mouse depois do fechamento da Div Topo e clique no ícone Insert Div Tag. ________________________________________________________________________________________ Anotações
71
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
10- Escolha o item “After tag” com a opção
Alfamídia Design: Layout de Sites
Todos os direitos reservados para AlfamídiaProw LTDA.
AVISO DE RESPONSABILIDADE As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia LTDA. não têm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
10/2007 – Versão 1
Alfamídia Prow LTDA (51) 3073-2100 http://www.alfamidia.com.br
2
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Alfamídia Design: Layout de Sites
UNIDADE 1 1.1 1.2 UNIDADE 2
ALFAMÍDIA DESIGN: LAYOUT DE SITES .............................................................................................. 5 SOBRE O CURSO ............................................................................................................................... 5 ESTRUTURA DO CURSO .................................................................................................................... 5 A PROFISSÃO DE WEB DESIGNER ....................................................................................................... 6
2.1 O PROCESSO DE DESENVOLVIMENTO DE WEBSITES ......................................................................... 7 2.2 ESTUDO DE CASO: INOVAÇÃO EM PRODUTOS DE MÍDIA INTERATIVA .............................................. 9 2.2.1 Metodologia do Projeto ........................................................................................................... 12 UNIDADE 3
TEORIAS DO DESIGN APLICADAS NA WEB ...................................................................................... 14
3.1 ATRAÇÃO CONDICIONAL................................................................................................................ 15 3.2 HARMONIA ..................................................................................................................................... 15 3.3 ALINHAMENTO ............................................................................................................................... 16 3.4 SIMETRIA ....................................................................................................................................... 16 3.5 CORES ............................................................................................................................................ 17 3.5.1 Acerte Sempre .......................................................................................................................... 19 3.5.2 Algumas Recomendações ........................................................................................................ 21 3.6 SIMPLICIDADE ................................................................................................................................ 21 3.7 INTEGRAÇÃO .................................................................................................................................. 21 3.8 CONTRASTES .................................................................................................................................. 22 UNIDADE 4
TIPOGRAFIA........................................................................................................................................... 23
4.1 PROPRIEDADES DA TIPOGRAFIA ..................................................................................................... 23 4.1.1 O Estilo das Fontes ................................................................................................................. 23 4.1.2 Separação entre Caracteres (Kerning) ................................................................................... 24 4.1.3 Entrelinhas .............................................................................................................................. 24 4.2 FAMÍLIAS DE FONTES ..................................................................................................................... 25 4.2.1 Serifadas .................................................................................................................................. 26 4.2.2 Sem Serifa ................................................................................................................................ 26 4.2.3 Monoespaçadas ....................................................................................................................... 27 4.2.4 Bitmap ..................................................................................................................................... 27 4.2.5 Caligráficas ............................................................................................................................. 28 4.2.6 Fantasia ................................................................................................................................... 28 4.3 LEGIBILIDADE ................................................................................................................................ 29 UNIDADE 5 5.1 5.2 UNIDADE 6
GESTALT APLICADA A WEB ............................................................................................................... 31 A PREGNÂNCIA DA FORMA ............................................................................................................ 31 PREGNÂNCIA NA WEB .................................................................................................................... 33 USABILIDADE NA WEB......................................................................................................................... 35
6.1 PROJETANDO UMA BOA EXPERIÊNCIA............................................................................................ 36 6.1.1 Teste de Usabilidade ............................................................................................................... 37 6.1.2 Como Fazer? ........................................................................................................................... 38 UNIDADE 7 7.1
MODELOS DE SITE................................................................................................................................ 41 INSTITUCIONAIS ............................................................................................................................. 42
3
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites 7.2 7.3 7.4 7.5
PORTAIS ......................................................................................................................................... 43 E-COMMERCE ................................................................................................................................. 43 EXPERIMENTAIS ............................................................................................................................. 44 HOTSITES ....................................................................................................................................... 44
UNIDADE 8
ANÚNCIOS, POP-UPS E DEMAIS ESPAÇOS PUBLICITÁRIOS ......................................................... 46
8.1 OS BANNERS .................................................................................................................................. 47 8.1.1 Full Banner.............................................................................................................................. 47 8.1.2 Half Banner ............................................................................................................................. 47 8.1.3 Banner “Botão” Padrão ......................................................................................................... 48 8.1.4 Banners “Botão” Quadrado ................................................................................................... 48 8.1.5 Minibanners............................................................................................................................. 48 8.1.6 Banner Vertical ....................................................................................................................... 49 8.1.7 Banner-faixa ............................................................................................................................ 49 8.1.8 Arranha-Céus ou Sky Scrapers ................................................................................................ 49 8.1.9 Outros Tipos de Banners ......................................................................................................... 49 8.2 OS POP-UPS .................................................................................................................................... 50 8.3 COMO ALCANÇAR EFICIÊNCIA COM BANNERS? ............................................................................. 51 UNIDADE 9 9.1
ANIMANDO IMAGENS PARA WEB....................................................................................................... 53 A PALETA ANIMATION ................................................................................................................... 53
UNIDADE 10 10.1 10.2 10.3
CRIANDO SLICES/FATIAS ............................................................................................................... 63
CRIANDO FATIAS ........................................................................................................................... 63 SALVANDO OS ARQUIVOS .............................................................................................................. 65 SALVANDO COMO HTML E IMAGENS ............................................................................................ 67
UNIDADE 11 11.1
MONTAGEM DO LAYOUT COM DIVS ............................................................................................. 70
USANDO DIV TAG .......................................................................................................................... 70
UNIDADE 12 12.1 12.2 12.3
PHOTOSHOP CS3 COM DREAMWEAVER CS3 ............................................................................. 78
VINCULANDO UM ARQUIVO PSD NO DREAMWEAVER CS3 ............................................................ 79 USANDO O COMANDO COPY MERGE .............................................................................................. 81 INSERINDO OS TEXTOS ................................................................................................................... 82
UNIDADE 13 13.1
PHOTOSHOP CS3 COM FLASH CS3 .............................................................................................. 85
IMPORTANDO UM ARQUIVO PSD PARA O FLASH CS3 ...................................................................... 86
UNIDADE 14 14.1
DREAMWEAVER CS3 COM FLASH CS3 ........................................................................................ 91
EDITANDO UM SWF A PARTIR DO DREAMWEAVER CS3 .................................................................. 92
UNIDADE 15 15.1 15.2 15.3
FAZENDO SEU PRÓPRIO LAYOUT ................................................................................................ 95
A IMPORTÂNCIA DE UM PORFIFÓLIO ONLINE ................................................................................. 95 O QUE DIVULGAR? ......................................................................................................................... 95 ALGUNS CRITÉRIOS NA SELEÇÃO DOS TRABALHOS ....................................................................... 96
4
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 1 Alfamídia Design: Layout de Sites
1.1 Sobre o Curso O curso de Layout de Sites trás uma parte de teoria que enfoca o fim do amadorismo na internet e a importância da multidisciplinariedade dos profissionais envolvidos no projeto. Demonstra, também, a integração da versão Adobe CS3 dos produtos: Dreamweaver, Flash e Photoshop, levando em conta a sua total integração. O conjunto de todas essas etapas resultará em um trabalho mais profissional, que melhorará a qualidade do produto final.
1.2 Estrutura do Curso As primeiras unidades trazem conceitos na área de Design para Web, trazendo algumas peculiaridades e demonstrando a maneira ideal de trabalharmos em um projeto para Web. No decorrer de toda a apostila o aluno terá total autonomia para criar o seu projeto de trabalho final. As unidades seguintes exploram a integração dos softwares: Dreamweaver CS3, Photoshop CS3 e Flash CS3, demonstrando a sua total integração para quem trabalha com Web.
5
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 2 A Profissão de Web Designer
Não existem mais bobos investindo na Internet. Todo mundo entra para ganhar. E para ganhar, não basta apenas que o profissional de web corra o campo todo, sem defender nem atacar com eficiência. Projetos de sucesso têm um fator em comum: a multidisciplinariedade, ou seja, muitos profissionais em campo jogando em diferentes áreas.
6
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
A segunda geração da World Wide Web, ou Web 2.0 é baseada na simplicidade, criatividade e focada nos usuários, reforçando o conceito de troca de informações e colaboração dos internautas com sites e serviços virtuais. A idéia é que o ambiente on-line se torne mais dinâmico e que os usuários colaborem para a organização de conteúdo. E isso não quer dizer que este mundo novo acontecerá apenas no computador pessoal, como conhecemos hoje. A Web 2.0 nasce pensando que as aplicações que chegam ao “mercado” virão prontas para rodar nos players de mp3, nos celulares, nos videogames, na TV Interativa. A empresa Web 2.0 por excelência é o Google, pois segue o lema de “LANCE LOGO, LANCE SEMPRE, TODO DIA”. Você pode lançar uma versão do seu site, por exemplo, hoje e outra amanhã, sempre a partir do conseguido com cada incremento ou retorno por parte dos usuários do site. Lance o produto com o mínimo de funcionalidades para atingir seus objetivos e cresça com ele. A metodologia de desenvolvimento de um projeto centrado nos usuários implica a junção de conhecimentos pertencentes a diferentes áreas.
2.1 O Processo de Desenvolvimento de Websites Um produto bem projetado envolve muito mais do que apenas um conteúdo de qualidade. Questões como facilidade de uso, desempenho e design gráfico também são importantes. A satisfação subjetiva, a “agradabilidade”, também faz parte desse todo. O conjunto resultante de todos esses fatores, mas a questão da fluidez e imersão total, tem a capacidade de gerar aquilo que podemos chamar de “EXPERIÊNCIA PERFEITA”.
_________________________________________________________________ Anotações
7
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Criação Levantamento de dados
Refinamento
Design
Avaliação
Prototipação
Produção
Manutenção
Implementação
Este gráfico, utilizado por Van Duyne, Landay e Hong, mostra o processo genérico de desenvolvimento de Websites. Seus termos significam o seguinte: 1. Levantamento de dados: conhecimento do público-alvo e suas necessidades, conceituação do negócio e objetivos dos usuários do website. 2. Criação: geração de idéias que podem ou não ser aproveitadas para desenvolvimento futuro. 3. Refinamento: aperfeiçoamento da navegação, do fluxo e do layout. 4. Produção: desenvolvimento do protótipo funcional. _________________________________________________________________ Anotações
8
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5. Implementação: desenvolvimento do código, conteúdo e imagens finais do site. 6. Lançamento: disponibilização do website para uso real. 7. Manutenção: atualização do site existente, como análise de métricas de sucesso e preparação para o redesign. Para podermos vislumbrar estes conceitos vamos analisar um estudo de caso, que consta no livro: Design para a Internet: projetando a experiência perfeito do autor Felipe Memória.
2.2 Estudo de Caso: Inovação em Produtos de Mídia Interativa A interação entre pessoas com diferentes especialidades é um traço característico do processo de grandes empresas de mídia interativa. E esse é um fator fundamental para o desenvolvimento de produtos complexos. Vamos analisar o site da Globo.com, sendo que a multidisciplinariedade desta empresa começa no seu Departamento de Criação Interna. Ele é responsável por todos os projetos da empresa, mesmo aqueles que eventualmente são terceirizados. A criação, normalmente, é dividida em três grupos de trabalho, contando com profissionais de diferentes áreas: - Arquitetura da Informação; - Design de Interface; - Branding A equipe de arquitetura da informação faz o levantamento e a categorização de todas as informações que existirão dos sites. Eles estimam a quantidade de páginas, o conteúdo e as funcionalidades existentes em cada uma delas, bem como a importância de cada informação presente na tela. Este grupo também é responsável pela documentação de descrição das telas, que explica o funcionamento de cada elemento da página. Já a equipe de design de interface preocupa-se com a usabilidade e a interação humano-computador de tudo que é projetado na criação. São as responsáveis pela _________________________________________________________________ Anotações
9
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
facilidade de uso e de aprendizado, memorizações, tratamento de erros e até mesmo pela capacidade de agradar o usuário. Utilizam os documentos de arquitetura da informação para se guiar e projetar a página: hierarquizar informações, pensar o funcionamento da navegação e montar uma estrutura de layout. Projetam os Wireframes, que são a planta-baixa do site, prevendo cada detalhe e funcionalidade que será utilizada. Temos dois exemplos de Wireframe nas imagens abaixo:
_________________________________________________________________ Anotações
10
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
A equipe de branding concentra seu trabalho no design gráfico, na parte visual. Eles são os responsáveis pela comunicação da mensagem que deve ser transmitida, refletindo os atributos da marca e sua personalidade, além das características emocionais a que o produto deve estar associado. _________________________________________________________________ Anotações
11
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Em 2005, as equipes de branding e design de interface foram unificadas, formando uma equipe só, com profissionais de diferentes áreas.
2.2.1 Metodologia do Projeto A metodologia de um projeto de criação de Website varia conforme sua necessidade. Contudo podemos organizar, de uma maneira geral, o processo da seguinte forma: 1. Demanda/Definição da estratégia 2. Benchmark (marcas de referência do mercado) 3. Levantamento de funcionalidades desejadas (brainstorn) 4. Macroarquitetura da informação 5. Verificação da viabilidade tecnológica 6. Continuação do projeto: a. Detalhamento da arquitetura da informação b. Desenho da experiência do usuário c. Projeto de Interface d. Projeto de branding e. Ajustes 7. Implementação 8. Desenvolvimento 9. Lançamento Existem também etapas de validação, que são um acompanhamento de tudo o que está sendo construído depois de projetado, o que chamamos de testes de Usabilidade, o que falaremos em uma unidade seguinte da apostila. Vimos no decorrer desta unidade que os projetos para a Internet aram a ser mais profissionais. O envolvimento de pessoas com diferentes formações ganhou mais força com o ar dos anos, aumentando a característica multidisciplinar da Web.
_________________________________________________________________ Anotações
12
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Mesmo sabendo que os profissionais de Web estão trabalhando sozinhos na arquitetura da informação, no layout e no código, o ideal é que busquemos parcerias com profissionais que complementem o seu trabalho. Trabalhar com profissionais mais experientes, em algumas etapas do projeto, melhora a qualidade e a velocidade de entrega de seu trabalho, o que pode resultar em mais clientes. É bom saber um pouco de tudo, mas a especialização é mais importante ainda, tanto para o crescimento profissional como para a satisfação pessoal. O ideal é se especializar naquilo que dá mais prazer. Lembres-se: O MENOS É MAIS.
_________________________________________________________________ Anotações
13
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 3 Teorias do Design aplicadas na Web
O fundamental é identificar elementos que guiem a equipe para o projeto de um site que façam as pessoas falarem: “EU AMO ESSE SITE”
14
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Quando o usuário navega na web em busca de uma informação cumprirá essa tarefa de uma forma mais harmoniosa se o design colaborar com isso. Design é a característica do mundo moderno e é aplicado também na web. Na Internet as tecnologias multimídias, como som, imagem, movimento, se caracterizam por utilizarem diferentes recursos simultaneamente e impressionando os sentidos do usuário. Quando bem aplicadas proporcionam uma experiência diferente, satisfatória. Um bom design resulta numa sensação de conforto e bem estar ao usuário. Essas características tornam a web atraente e, quando bem combinadas às informações, resultam em um site com grande potencial de sucesso. O design não pode estar em segundo plano, bem como as informações nele contidas.
3.1 Atração Condicional Todos os elementos que têm algo em comum devem estar juntos no layout, para que o leitor os reconheça como um grupo. Estabelecendo uma relação entre os elementos, o agrupamento possibilita mostrar a hierarquia no layout e sugerir uma ordem de leitura, tornando facilitado o o à informação. Cabe destacar a importância dos conceitos de arquitetura de informação, que é a estrutura de um site em termos de navegação, conteúdo e disposição dos elementos. Organizar as informações possibilita que sejam mais facilmente encontradas e compreendidas. É importante, também, o bom senso para determinar quais elementos dominam e quais se subordinam numa composição.
3.2 Harmonia A harmonia, segundo as leis da Gestalt, prevê a coerência visual dos elementos. Numa composição, cada forma inserida deve ser considerada como elemento do esquema total. ________________________________________________________________________________________ Anotações
15
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Uma recomendação prática é evitar a estratégia de colocar o máximo de informação possível em uma página, um procedimento que, na verdade, contradiz todas as regras convencionais de design. Portanto, os espaços em branco devem ser partes integrante do design de uma página na Web e empregados para permitir a leitura mais fácil e a melhor compreensão do texto ou ainda indicar ao usuário onde começa e onde termina uma seção.
3.3 Alinhamento O alinhamento, em conjunto com os outros fundamentos, faz com que o leitor se sinta natural e confortável. Isso não quer dizer para alinharmos a esquerda, à direita e/ou ao centro, quer dizer que o texto, por exemplo, tem que estabelecer um alinhamento com outro bloco de texto (e/ou imagem) e que uma imagem tem que estabelecer um alinhamento com outra imagem (e/ou bloco de texto).
3.4 Simetria Formas estáticas, geométricas e com dois lados iguais em um mesmo eixo. Esta é a lei bem complexa e ao mesmo tempo bem simples do conceito de Simetria. Mas o difícil é criar layouts simétricos estáticos, estabelecendo equilíbrio dinâmico entre os elementos de uma layout. Para isso é preciso fazer variações entre os elementos, como animação, tamanhos diferentes. Use abordagens simétricas para: - Layouts formais, tais como: casamentos ou formaturas. - Layouts com muitas fotos (simetria pode ajudar a organizar uma página com muitas fotos sem ter que planejar muito) - Qualquer outro tema que peça um tom ou abordagem mais conservadora. Por outro lado, use abordagens assimétricas para: - Refletir um tom informal, alegre, ou cheio de energia.
________________________________________________________________________________________ Anotações
16
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Mas lembre-se que estas são apenas sugestões! Você pode aplicar qualquer abordagem de equilíbrio em qualquer tema que você queira! A escolha é sua.
3.5 Cores Além das palavras e das imagens, a cor é um importante elemento funcional. Ela pode intensificar tanto o texto como a imagem, emprestando-lhes alguma característica especial ou funcionando mesmo como um elemento formativo por si mesma. Contrariamente ao apelo intelectual da palavra, a cor é fundamentalmente emoção e, nesse sentido, ela pode ser imprescindível. A cor exerce uma influência decisiva não apenas em nossos olhos, mas em todos os outros sentidos. Seus efeitos psicológicos, combinados com o conhecimento do simbolismo ancestral a que estão ligadas, tornam as cores um importante fato em qualquer apelo visual dirigido ao ser humano. A combinação de cores deve ser cuidadosa. Elas não apenas precisam combinar entre si dentro de um mesmo espaço, como também devem criar um estado de espírito ou efeito visual. Psicodinâmica das cores: É importante observar também que público jovem responde melhor às cores vivas, fortes. Já o público sofisticado, prefere cores discretas como o preto, o azulescuro, o verde-escuro e o cinza. - Amarelo: a cor amarela transmite alegria e vivacidade. Chama a atenção em qualquer ponto onde é aplicada, e é perfeita para o destaque de algum elemento no layout; - Azul: o azul é uma das cores mais utilizadas em Websites, e uma das preferidas por quase todas as pessoas. Transmite sensação de tranqüilidade, profundidade (quando escuro) e limpeza (quando claro); - Branco: a cor da pureza, para os ocidentais. Representa o vazio, a clareza, o início. Websites com grande predominância de branco tendem a ser mais legíveis aos usuários;
________________________________________________________________________________________ Anotações
17
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Cinza: o cinza transmite a sensação de algo impuro e indeciso (não é claro e nem escuro, preto ou branco). É uma cor triste e sombria, mas também pode definir um Website sóbrio e “sério”; - Laranja: cor que “alimenta”, produz uma sensação de aconchego, intimidade. É uma cor quente e permite resultados excelentes quando utilizada na intensidade e em lugares corretos; - Marrom: cor sóbria e sólida deve ser usada com moderação por trazer um aspecto muito pesado a qualquer local onde esteja aplicada; - Preto: a presença de todas as cores. A eternidade, elegância. A cor da morte. Presente em 99% dos Websites, na sua maioria em pequenos detalhes; - Rosa: o rosa é uma cor feminina, por excelência. Sugere doçura. Simplicidade, intimidade; - Roxo: é uma cor que pode apresentar duas funções distintas: conferindo um aspecto divertido quanto misterioso, nobre, dependendo das cores as quais é associado; - Verde: é a cor da natureza. Suas diversas tonalidades transmitem diferentes sensações, nenhuma delas relacionada à alegria ou a paixão. O verde mais claro é, assim como o azul, calmo e agradável. O verde escuro transmite idéia de profundidade, seriedade. Já o verde amarelado confere a sensação de alegria, ou até mesmo seriedade. O verde é uma cor que deve ser utilizada com muito critério e moderação, já que diversos tons têm a propriedade de desagradar aos olhos. - Vermelho: o vermelho esta intimamente ligado aos desejos ionais. É quente, imponente, chamativo. Suas diversas nuances apresentam diversos significados: o vermelho escuro sugere sobriedade e poder; o vermelho cereja é apaixonado, feminino sensual; o vermelho mais claro é energizante e forte. Sete diretrizes para utilização de cores: 1- Estética (harmonia, equilíbrio, contraste, intensidade, variabilidade); 2- Visibilidade, legibilidade e saturação de leitura (conforto visual). 3- Organização e usabilidade (como ajudar o usuário a navegar no site, direcionar a sua leitura, identificar unidades, partes, seções, etc.). 4- Identidade (como se identificar e ser reconhecido por meio de cores) ________________________________________________________________________________________ Anotações
18
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Repertório simbólico (a carga simbólica que pode ser incorporada às cores, naquele determinado contexto de uso e do repertório do usuário que se pretende atingir). 6- Informação (como a cor pode contribuir para conduzir a informação) 7- Limitações e recursos técnicos (aspectos materiais do e e dos processos) Fonte: Luciano Guimarães
3.5.1 Acerte Sempre - Amarelo X Azul Uma combinação original e que agrada a maioria dos usuários. Neste caso, é recomendado testar os tons de azul mais claros e acinzentados, e aproveitar o amarelo puro na maioria dos detalhes e linhas de composição do layout.
- Verde X Branco O verde é uma cor muito perigosa. A escolha criteriosa do tom é essencial para criar um layout agradável e, ao mesmo tempo, sofisticado. È recomendado esta combinação a partir de tons de verde mais metálicos e levemente azulados que, combinados com o branco, sugerem limpeza e bom gosto. - Cinza X Vermelho Escuro Quando falamos em cinza para esta combinação, escolhemos um tom de cinza mais claro para a maioria dos gráficos em cinza e alguns gráficos em tons de cinza grafite. O vermelho escuro sugere força e “aquece” os tons muito frios de cinza - Azul X Cinza Uma combinação fria mais agradável. Aliás, milhares de sites na Web optam (com sucesso) por estas tonalidades, clássicas, sofisticadas e quase sempre indispensáveis quando não se quer errar. Existem alguns tons de azul puro que requer cautela no uso. Além do mais, é uma cor muito forte e, se aplicada a grandes áreas, tende a desagradar os olhos. Opte sempre por tons de azul acinzentado em grandes áreas. - Preto X Cinza ________________________________________________________________________________________ Anotações
19
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Apesar de serem duas cores que “intimidam”, o preto e o cinza são muito elegantes. Podemos compor um layout muito bonito se usarmos tons de cinza mais claros e escolhermos alguns detalhes em preto. - Preto X Vermelho Escuro X Branco O preto e o vermelho escuro são duas cores muito pesadas que, sozinhas, não é recomendado na composição de uma página. Entretanto, se houver predominância do branco, estas duas cores podem conferir um aspecto maravilhoso ao desenho do site. Lembre-se sempre de aproveitar detalhes em cores escuras e deixar a maior parte do layout em tons mais claros, devido à legibilidade. - Amarelo X Cinza X Laranja O amarelo e o laranja são cores alegres e quentes e, se combinadas com o triste cinza, conferem um ar de moderno e original ao Website. Podemos confeccionar um layout em tons de cinza a arrematar a criação com tons de laranja ou amarelo, sempre usando as variações dos tons mais escuros aos mais claros. - Rosa X Azul Essa combinação confere um resultado bastante agradável, excelentes para um Website feminino ou infantil. Para esses casos, prefira sempre tons claros. - Azul X Laranja Assim como o azul e amarelo, o Designer obterá excelente efeito se combinar tons de azul (acinzentados, sempre) com laranja (neste caso, os tons mais vivos são ideais), este último em detalhes de destaque da página. O laranja tem a propriedade de aquecer o frio azul, e conferir um visual moderno e diferente ao layout. Diversos Websites de entreterimento e diversão utilizam esta combinação. - Bege X Branco O bege é uma tonalidade muito suave e pode ser combinada livremente com o branco, compondo Websites para qualquer público-alvo. Esta combinação é a mais versátil de todas, podendo usarmos sem medo.
________________________________________________________________________________________ Anotações
20
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
3.5.2 Algumas Recomendações - Cuidado redobrado ao utilizar as seguintes cores: roxo e preto. Use o bom senso e analise os efeitos que essas cores causam aos olhos e nos usuários; - Evite misturar dois tons quentes e predominantes na aparência geral de um layout. Procure sempre quebrar o “calor” com algum tom frio; - Cuidado ao utilizar dois ou mais tons luminosos como únicos em um site; - Evite combinar apenas o preto e cinza em um portal. Quebre a monotonia utilizando uma terceira cor mais alegre; - Tenha extremo cuidado com algumas tonalidades de verde. O verde é uma cor muito bonita e pode favorecer o seu layout quando bem aplicada; - Observe, acima de tudo, o público-alvo de seu Website. Isso determinará a utilização de cores, como o rosa, restrita basicamente a sites femininos ou infantis. - E, acima de tudo, preste muita atenção na legibilidade do Website. Cores muito escuras tendem a ofuscar a leitura de textos, mesmo quando eles estão definidos com cores claras.
3.6 Simplicidade A simplicidade gera clareza, organização mais harmoniosa e unificada. Caracteriza-se por organizações formais fáceis de serem assimiladas, lidas e rapidamente compreendidas. É sinônimo de eficiência.
3.7 Integração Seguindo o conceito do site até o fim! É preciso seguir os princípios do design até o fim, se aplicar em uma página, terá de aplicar em todas as outras do website. Agora é à hora de interligar todos os conceitos, harmonizar todos os elementos, construir uma relação com todas as formas ali presentes, pois afinal de contas o que seria de uma interface que utilizam os princípios, mas não estabelecem um agrupamento entre eles? ________________________________________________________________________________________ Anotações
21
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
No entanto, mesmo seguindo um padrão, as páginas devem ter diferenças entre elas, para não cansar o usuário e para que ele perceba que o assunto é outro.
3.8 Contrastes Toda página bem construída é um arranjo de harmonias e contrastes entre suas partes. Um layout contrastante atrai a visão na hora e cria uma real curiosidade e interesse. Ele pode variar muito o tamanho, peso, estilo, forma e cor. Quanto maior a quantidade ou intensidade dos contrastes, mais interessante poderá ser. Logicamente, contrastes de cores e tamanho devem ser aplicados corretamente, dependendo muito do público alvo do site. Público jovem prefere cores vivas, público sofisticado aprecia cores discretas.
________________________________________________________________________________________ Anotações
22
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 4 Tipografia 4.1 Propriedades da Tipografia Tipografia é a maravilhosa arte de se usar tipos para transmitir idéias e informações. Sempre que se coloca alguma palavra em um papel ou em qualquer meio de comunicação visual através do qual se quer conseguir uma mensagem, pode-se aplicar a arte da comunicação. “Tipografia é transformar um espaço vazio, num espaço que não seja mais vazio. Isto é, se temos uma determinada informação ou texto manuscrito e precisamos dar-lhe um formato impresso com uma mensagem clara que possa ser lida sem problema, isso é tipografia.” Wolfgang Weingart Antes de vermos a aplicação e tipos de fontes e os seus significados, é essencial que conheçamos as propriedades da tipografia.
4.1.1 O Estilo das Fontes O estilo corresponde à forma de uma fonte ser realçada. Os estilos mais comuns são: - Negrito: o estilo negrito realça uma palavra ou frase em meio a um período. Muitas vezes, o estilo é aplicado em menus de links, se nenhuma função estética ou funcional aparente; - Itálico: o estilo itálico, além de ser utilizado para realças palavras ou expressões, também funciona como uma diferenciação e destaque de palavras estrangeiras, jargões ou expressões menos conhecidas em meio a um período; - Sublinhado: o estilo sublinhado tornou-se um padrão na Web para links. Embora hoje os estilos CSS tenham permitido a formatação avançada de links, o uso do sublinhado em um texto ainda remete a um elemento clicável;
________________________________________________________________________________________ Anotações
23
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.1.2 Separação entre Caracteres (Kerning) Corresponde ao espaço maior ou menor entre um caracter e outro. Apesar de ser algo simples e quase imperceptível, o ajuste do kerning confere um efeito poderoso quando aplicado em determinados tipos de fontes.
O efeito kerning torna as palavras ou expressões mais longas, aparentemente, e sua leitura é mais pausada e lenta. Devemos evitar utilizar espaçamento entre caracteres muito grande se o período ou a palavra forem muito longos. Também, não é interessante utilizar kerning quando a fonte é manuscrita, já que o texto pode ficar ilegível, dependendo do traçado da fonte:
4.1.3 Entrelinhas O espaçamento entre linhas corresponde à distância entre uma linha de base e a outra:
________________________________________________________________________________________ Anotações
24
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Apesar de esta propriedade depender do tipo de fonte, devemos evitar em espaçamento muito pequenos entre as fontes; o texto torna-se ilegível e desorganizado. Um espaçamento muito grande entre as linhas dificulta a leitura, já que os olhos percorrem um espaço muito maior entre um período e outro, cansando a visão. Observe:
4.2 Famílias de Fontes Existem milhares de tipos de fontes, tradicionais, modernas, ousadas e rebuscadas. Entretanto às vezes é complicado escolher que tipo de fontes é mais adequado a um trabalho ou cliente. São tantos tipos que é comum o Designer demorar-se mais estudando a tipografia de um site que seu próprio desenho. ________________________________________________________________________________________ Anotações
25
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.2.1 Serifadas As fontes serifadas caracterizam-se pela presença de arremates nas partes superiores e inferiores das letras. Esse tipo de fonte confere a um texto maior seriedade e elegância:
As fontes serifadas possibilitam uma leitura mais agradável em livros e impressos, já para a Internet, cujos textos são lidos e interpretados diretamente na tela do computador, as fontes mais adequadas são as da família sem serifa, que veremos a seguir.
4.2.2 Sem Serifa As fontes sem serifa foram criadas pelos designers da escola de design alemã Bauhaus, em meados da década de 30, fazendo parte da chamada “nova tipografia”. Caracterizam-se pelo estilo limpo e desenho simplificado, cujas letras, normalmente, possuem traços de mesma espessura e paralelos entre si, seus pesos são iguais. A leitura é fácil e dinâmica.
________________________________________________________________________________________ Anotações
26
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
As fontes em serifa são as mais indicadas para corpos de texto longos na Web. A fonte Arial é, ainda, a fonte mais usual e presente na maioria dos computadores.
4.2.3 Monoespaçadas As fontes monoespaçadas são aquelas cuja largura dos caracteres é a mesma, qualquer que seja o tamanho do corpo do caracter ou se está em caixa alta ou não. O exemplo mais comum deste tipo de fonte é a Courier e suas variações, remetendo aos caracteres de uma máquina de escrever:
4.2.4 Bitmap Uma fonte bitmap é aquela que utiliza um mapa de bits para a representação de seus caracteres. Não são escalonáveis, podendo ser utilizadas, satisfatoriamente, em um único tamanho de corpo, geralmente muito reduzido:
As fontes bitmap são perfeitas para gráficos mais modernos e futuristas, apesar de apresentarem o inconveniente de serem bastante ilegíveis.
________________________________________________________________________________________ Anotações
27
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.2.5 Caligráficas As fontes caligráficas, também conhecidas como cursivas ou script, como o próprio nome indica, são as fontes cujos caracteres imitam a escrita manual. Seu surgimento data do século XVII, na França, e existem inúmeros tipos de fontes caligráficas. Um detalhe notável desta família é a presença de linhas no início e no fim de cada caracter, o que permite a união entre letras semelhante à conseguida com a escrita manual:
O estilo caligráfico é naturalmente feminino e pode variar do formal ao informal, dependendo da fonte escolhida ou caligrafia imitada.
4.2.6 Fantasia São fontes que não se enquadram em nenhum dos estilos acima, e que também podem ser uma combinação resultante entre um ou mais estilos. Normalmente caracterizam-se pelas formas originais, presença de ornamentos (ou não) e grande divergência de padrão entre os caracteres.
________________________________________________________________________________________ Anotações
28
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4.3 Legibilidade Não é demais lembrar que, mais importante que o bom visual de uma fonte é a sua legibilidade. Em se tratando de Internet, os textos necessariamente devem ser escritos de maneira clara e da forma mais simplificada possível, já que a leitura de itens na tela do computador é mais cansativa e, por isso, realizada pelos usuários muito rapidamente. Para assegurar que sua palavra (ou de seus clientes) será bem transmitida, prefira fontes não serifadas (principalmente em textos longos), com estrutura simples, formato facilmente adaptável a qualquer estrutura de layout, conteúdo apresentado e redimensionamento de caracteres flexível. Boas fontes de texto são: Verdana, Arial e Helvetica. É importante lembrar de algumas regras quando usar as fontes na composição: tamanho, peso, estrutura, forma, direção, cor. O alinhamento à esquerda também facilita a leitura. Cuidado com o contraste que forma a cor com o fundo: amarelo sobre branco tem uma leitura difícil, vermelho sobre verde vibra muito, branco sobre preto em texto longo cansa a leitura. Centralize ou justifique quando o tema do seu site e o texto for formal, caso contrário procure utilizar o texto de forma mais livre e disponha conforme a sua criatividade e o bom senso permitirem. É muito importante saber utilizar estilos de fontes em determinados casos: - Fontes desconstruídas e modernas se encaixam bem em sites modernos e jovens; - Fontes clássicas e manuscritas muitas vezes se encaixam bem em sites clássicos e sérios; - Fontes normais e sérias se encaixam perfeitamente em sites institucionais e moderados. Especialistas sugerem que o número de tipos de letras utilizados em um Website fique em torno de três. Utilize tipos de letras para caracterizar diferentemente o título, o texto e anotações. Ao adotar, por exemplo, três tipos, pode-se fazer uso de suas variações como o itálico, o bold e o condensado que permitem boa margem de opções, sem, contudo, descaracterizar o estilo da página. Veja alguns exemplos de sites que trabalham bem a tipografia: ________________________________________________________________________________________ Anotações
29
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
30
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 5 Gestalt aplicada a Web
A teoria da Gestalt busca descobrir por que algumas formas agradam mais às pessoas do que outras. De acordo com a Gestalt, a arte se funde no princípio da pregnância da forma. Ou seja, na formação de imagens, os fatores de equilíbrio, clareza e harmonia visual constituem para o ser humano uma necessidade e, por isso, considerados indispensáveis, seja numa obra de arte, num produto industrial, numa peça gráfica, num edifício, numa escultura ou em qualquer outro tipo de manifestação visual.
5.1 A Pregnância da Forma Para melhor compreendermos o conceito de pregnância, iremos definir forma, segundo Aristóteles: “A forma pode ser definida com a figura ou a imagem visível do conteúdo. De um modo mais prático, ela nos informa sobre a natureza da aparência externa de alguma coisa. Tudo que se vê possui forma.” Então, podemos dizer que uma forma possui alta pregnância quando apresenta um alto grau de equilíbrio, clareza e unificação visual, e um mínimo de complicação visual na organização de seus elementos ou unidades compositivas. Observe a imagem abaixo:
31
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Uma imagem que possui baixa pregnância requer uma leitura com maior atenção e um maior tempo para sua compreensão. Veja a imagem abaixo:
Podemos concluir que: - Quanto melhor a organização visual da forma do objeto, em termos de facilidade de compreensão e rapidez de leitura ou interpretação, maior será o seu grau de pregnância; ________________________________________________________________________________________ Anotações
32
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Naturalmente, quanto pior ou mais confusa for à organização visual da forma do objeto menor será o seu grau de pregnância.
5.2 Pregnância na Web Buscar harmonia e equilíbrio no uso dos principais elementos visuais (fotos, desenhos, ícones, tipografia, logotipo, etc.) é apontado como um dos principais caminhos para se atingir um bom grau de pregnância em um site. É importante que as páginas tenham um design que favoreça a alta pregnância, pois isso favorece a usabilidade, que é a facilidade com que o usuário consegue encontrar o que está procurando. Nos ícones, esse fator é ainda mais crítico. Se o desenho no botão for complicado, ele não será compreendido e não cumprirá a sua função. Na elaboração de um site tão importante quanto à função, é o significado. Tem usuário que se sente mais confortável, integrado e estimulado em um ambiente visualmente poluído e cheio de informações competindo pela sua atenção. É muito importante não esquecermos que cada elemento tem intra-relações visuais e que estabeleça relações com os outros elementos. Ou seja, um logotipo, por exemplo, matem em seu próprio desenho relações de pregnância internas entre sua cor, sua forma e sua tipografia. O ideal é investir na qualidade dos elementos visuais e não na quantidade deles na interface. Excessos podem prejudicar o resultado. Neste sentido trabalhar a pregnância de forma adequada em um site é uma tarefa que exige cuidado. Vamos ver alguns fatores relevantes para a organização visual de um site: 1- Logotipo: Considerando-o como símbolo visual de um conceito, é o que vai representar a identidade visual de um site; 2- Tipografia: Texto também é imagem. Letras são signos que expressam significados e que, em conjunto funcionam de forma distinta. 3- Imagem: A qualidade e o equilíbrio entre imagens – fotos, desenhos, ícones - é necessária e desejável. É importante que a pregnância visual destes elementos esteja de acordo com a proposta do site e com o conteúdo disposto. Fotos devem ________________________________________________________________________________________ Anotações
33
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
ter qualidade, apelo estético e de fácil carregamento; desenhos devem ser legíveis; ícones devem ter significado universal, compreensíveis aos usuários. 4- Vídeos e Animações: É importante compatibilizar peso de imagens em movimento com a dinâmica de navegação de uma página. Da mesma forma, devemos entender que uma animação é um recurso que conta uma pequena história. Animações sem propósito tendem e frustrar o usuário e, conseqüentemente, comprometer a avaliação do site. 5- Áudio: Presente em propulsão nos site hoje em dia. A música provoca à formação de imagens na mente de quem a escuta. Em alguns casos pode ser extremamente incômodo para o usuário à repetição contínua de trechos musicais.
________________________________________________________________________________________ Anotações
34
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 6 Usabilidade na Web
Usabilidade é sinônimo de facilidade de uso. Se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais rápido a usar, memoriza as operações e comete menos erros.
35
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
A Internet comercial completa 12 anos em 2007. Está inserida em um curtíssimo período histórico, fase de muita experimentação e adaptação, de descobertas e novas idéias, grandes e rápidos avanços. Ela revolucionou a forma como as pessoas se comunicam, trocam informações e experiências. Com este crescimento rápido surgiu uma enorme demanda, de uma hora para outra, e todos estavam fazendo seus próprios sites. Desde então o comportamento de tentativa e erro se mantém. Graças a estas soluções baseadas no empirismo, Nielsen escreveu em 2000 um artigo com o título “The Mud-Throwing Theory of Usability”, enfocando justamente a questão do “chute”, da falta de conhecimento das pessoas sobre aquilo que estão fazendo. Em virtude da preocupação com o lançamento rápido do produto, da pressão do mercado, os sites acabam sendo desenvolvidos de forma errada. Web sites não são feitos para terem sua beleza contemplada e sim para que usuários encontrem o que querem em um ambiente harmônico e bonito. Se não pensar nisso você vai criar algo lindo e ordinário. E padrões existem para facilitar a vida das pessoas e não para castrar a criatividade. Então como fazer?
6.1 Projetando uma Boa Experiência Grande parte das empresas que produzem sites não focam seus projetos na experiência dos usuários, porque não querem perder tempo e nem dinheiro com testes de usabilidade. No entanto, pode-se entender que o consumo adicional de tempo no cuidado da usabilidade gera um impacto positivo no nível de qualidade do projeto. Os testes de usabilidade são de grande utilidade para que possamos projetar produtos que sejam fáceis de usar e, mais do que isso, capazes de proporcionar uma boa experiência. É importante ressaltar que esses testes são a ferramenta mais poderosa que os designers têm para avaliar suas criações. O segredo é “vender” para o cliente a importância de se testar o que foi projetado. Como diria Jakob Nielsen, testar um usuário é melhor do que não testar nenhum. Se o objetivo for melhorar as funcionalidades de um produto especifico, as ________________________________________________________________________________________ Anotações
36
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
estatísticas mostram que testes com apenas cinco usuários costumam levantar uma boa quantidade de possibilidades de melhora (cerca de 85%). Mas cuidado: designers não são usuários e usuários não são designers. Nem tudo que os usuários falarem pode ser levado em consideração. Por outro lado, eles sempre enxergam problemas que os designers dificilmente percebem.
6.1.1 Teste de Usabilidade Os testes de usabilidade são aplicados em usuários potenciais da interface, ao quais são incentivados a usá-la num ambiente monitorado, onde suas ações são gravadas e anotadas. Um profissional facilitador fica ao lado do usuário para guiálo pelo teste e incentivar que verbalize seus problemas e desconfortos. Numa sala separada, podem estar outros membros da equipe de design da interface para observar o teste ao vivo sem interferir no comportamento do usuário. Após o teste, os dados são analisados e é gerado um relatório contendo recomendações para a equipe de design e o consultor fica à disposição para discutir soluções para os problemas encontrados. Os dados coletados durante os testes são analisados para identificar os problemas de usabilidade que os usuários têm e, na medida em que são encontrados, já são cogitadas possíveis soluções. Ao final da análise, é gerado um relatório contendo os problemas e as soluções propostas e o consultor fica à disposição para reuniões com a equipe para discutir as soluções, bem como acompanhar os seus desdobramentos. Regras Básicas de Usabilidade na WEB: - Clareza na arquitetura da informação; - Facilidade de navegação; - Simplicidade; - A relevância do conteúdo; - Manter a consistência e o padrão; - Tempo ável; ________________________________________________________________________________________ Anotações
37
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Foco nos usuários.
6.1.2 Como Fazer? Este é somente um modelo, o qual pode ser adaptado, dependendo a necessidade do teste. Este teste de usabilidade está sendo utilizado para analisar o site ___________________ As informações fornecidas são vitais para o seu aprimoramento. Nas questões de marcar, favor circular o número correspondente ao grau de concordância. A não ser que esteja indicado, deverá ser marcada somente uma resposta por questão. Por favor, leia com atenção as questões a seguir e em caso de dúvida, solicite esclarecimento com o avaliador, levando em conta que o grau 0 é Difícil e 5 e Fácil. 1. Favor marcar o número correspondente ao grau que você mais concorda: a. Facilidade de utilização: 0 1 2 3 4 5 b. Organização das informações: 0 1 2 3 4 5 c. Layout das telas: 0 1 2 3 4 5 d. Nomenclatura utilizada nas telas (nome de comandos, títulos, campos, etc.): 0 1 2345 e. Mensagens do sistema: 0 1 2 3 4 5 f. Assimilação das informações: 0 1 2 3 4 5 g. No geral, a realização do teste foi: 0 1 2 3 4 5 2. Aponte situações em que você achou fácil utilizar no sistema: ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________________________________ Anotações
38
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________ 3. Aponte situações que você sentiu dificuldades: ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ 4. Você utilizou a Ajuda on-line do sistema em algum momento? a. Sim b. Não Em caso afirmativo, descreva em quais situações você utilizou a Ajuda on-line do sistema (comente também se as informações da Ajuda on-line foram de pouca ou grande valia): ________________________________________________________________ ________________________________________________________________ 5. Diante do teste realizado, você acha que o programa atingiu o objetivo para o qual foi desenvolvido? Explique. ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ 6. O espaço abaixo é reservado para que você exponha sua opinião e sugira melhorias no sistema. ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________
________________________________________________________________________________________ Anotações
39
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
40
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 7 Modelos de site
Algumas pessoas ainda confundem estética com beleza, porém esse é um conceito ultraado desde o romantismo. Uma série de pensadores, entre eles Kant, discutiu o binômio belo/bom da era romântica e o termo foi sofrendo algumas modificações ando, por exemplo, pelo sublime, até chegar à estética. Estética nada mais é do que a percepção do objeto ou aquilo a que o objeto se propõe. Ela transforma o objeto em mercadoria de acordo com o público que deseja atingir, por isso não podemos mais dizer que a estética é única, existe uma diferente para tipo de projeto. Na web, por exemplo, cada tipo de site tem a sua estética. Os portais são um bom exemplo de uma estética já consolidada - embora isso não queira dizer que é uma boa solução. Eles são comunidades virtuais sem nenhum paralelo na vida real e possuem um volume imenso de informações que precisam ser divulgadas através de seus canais e sub-canais. Essa característica fundamental dos portais faz com que todos eles sigam um padrão visual/formal que corresponde à sua estética: - Colunas fixas; - Barra de navegação com linguagem verbal; - Coluna de compras do lado direito da tela etc. Podemos listar uma série de estéticas na web tais como, a dos sites de busca tendo o Google como referência de funcionalidade e objetividade, a dos sites de compras, a dos portifólios virtuais e a dos blogs, entre outras. E o que todas as estéticas tem em comum?
41
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Bem, se não tem em comum, deveriam ter: a função de atender as necessidades dos usuários do site. Quando esse pré-requisito não está presente encontramos sites de pequenas dimensões tentando ser um portal e comprometendo seu conteúdo através de mini-setores prejudicando a funcionalidade do site. É comum vermos sites de conteúdo dinâmico, como o de jornais e portais, planejado como se fossem sites institucionais e vice-versa. Os designers de sites devem pensar como arquitetos, pois assim como um arquiteto precisa projetar ambientes baseado na utilização e finalidade dos espaços da futura edificação, um designer de web sites também precisa, porque o produto final não é uma realização apenas visual. Se a elaboração de um projeto de um site não tiver critérios que levem a uma melhor maneira de usá-lo, seria melhor comprar sites prontos, mudando apenas o logotipo. Ou então, pedir para que o sobrinho do irmão do cunhado da vizinha faça a seu gosto. Para criar um site tem que ser “cri-cri-cri” - criterioso, crítico e criativo. É necessário pensar como usuário, designer e cliente. Isso é muito mais importante do que aprender o último software ou fazer designs que pareçam à última tendência. Há quem se preocupe mais com seu gosto pessoal do que com o resultado que o site deve gerar. Vale lembrar que a prioridade de um site são os usuários, seja falando sobre a usabilidade, conteúdo ou design. A tecnologia é importante e as novas tecnologias, principalmente, podem ser muito interessantes.Mas colocar a tecnologia antes dos usuários pode ser desastroso. Uma boa dica é tentar fazer relações que combinem funcionalidade e perfil do cliente e com certeza o resultado será satisfatório. Se os usuários não puderem encontrar algo no site, não voltarão. Se não tiverem uma experiência boa, não voltarão.
7.1 Institucionais Website institucional é todo aquele grande site não comercial, governamental ou não, por exemplo: sites de universidades, portais de órgãos públicos, portais de cidades mantidas pelo governo, sites de ONGs, entre outros. ________________________________________________________________________________________ Anotações
42
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7.2 Portais Portal seria uma porta de entrada ao abrangente e diversificado conteúdo da Internet, “acolhido” por um grande website de forma total e organizada. Agrega conteúdos produzidos dentro de seu próprio meio e também de terceiros, relacionados aos mais diversos assuntos: notícias, eventos desportivos, seções de humor, etc. Além de reunir conteúdo de interesse dos usuários, fornece, também, diversos serviços como: salas de bate-papo (Chat) contas de e-mail, fóruns, mecanismos de busca... Tudo com o único objetivo de gerar uma comunidade “fiel”.
7.3 E-commerce O site e-Commerce busca agilidade nas operações e procedimentos istrativos pré e pós-venda, aumento na visibilidade para a captação de clientes e consumidores. ________________________________________________________________________________________ Anotações
43
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
- Redução de custos – por não necessitar de um vendedor, de exposição de produtos "ao vivo" e espaço físico para a venda, os custos são menores. - Maior exposição de seus produtos – através da Internet, seu produto pode ser visualizado e comprado em qualquer lugar do mundo. - Aumento do canal de vendas – a Internet é o mais novo canal de vendas de um produto. - Maior controle das vendas – com todas as vendas registradas na página, é possível obter informações como produtos mais vendidos ou vendas médias por cliente. - Melhor relacionamento com o cliente – sabendo quais são as vendas de cada cliente é possível traçar um perfil e fazer ofertas específicas para cada um ou configurar a página de acordo com suas preferências.
7.4 Experimentais Um site experimental pode usar e abusar de animações, devendo sempre buscar o que há de novo no mercado e testar, como: novas tecnologias e modos de comunicação na Web. http://www.2advanced.com
7.5 Hotsites Hotsite é um pequeno website com o objetivo de divulgar um produto, uma idéia, etc. Geralmente é caracterizado pela ênfase no visual, textos curtos e efeitos especiais. Um HotSite normalmente é criado quando se quer realizar campanhas de curta duração ou ligadas a eventos ou produtos específicos. Ele é reconhecido como uma das formas mais eficientes da comunicação on-line, integrando-se a uma estrutura pré-existente, mas com funcionamento independente. É possível mesclar informações institucionais ou seções dinâmicas, agregando mais valor ao HotSite. ________________________________________________________________________________________ Anotações
44
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
45
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 8 Anúncios, Pop-ups e demais Espaços Publicitários Quando, em 1969, os cientistas das Universidades de Stanford, Massachusetts, e da Califórnia, em Los Angeles, realizaram a primeira (e bem sucedida) comunicação de longa distância através de um computador, eles não imaginaram que aquele curto diálogo fosse o início de uma das maiores revoluções do século XX. A partir de várias descobertas, emergiu a possibilidade de adquirirmos um computador pessoal barato com conexão a Internet. O interesse cada vez mais crescente das pessoas conectadas em tempo real e sua utilização começou e despertar a atenção de inúmeras corporações, que perceberam o grande potencial comercial da rede. Tudo estava mais fácil, muito ágil e crescendo vertiginosamente. Era tudo que as grandes empresas, sempre ávidas pela conquista de novos clientes e meios de divulgação, precisavam. Estava, assim, consolidado o lado comercial da rede. Á medida que aumentavam os os e o número de visitantes em uma página ou site da Web, estas disponibilizavam espaços especialmente reservados para que outras empresas divulgassem seus serviços, mediante pagamento de taxas préestabelecidas. Assim como anúncios de jornal possuem diversos padrões de tamanho que precisam ser respeitados, os anúncios para Web também possuem algumas normas. Quando uma empresa decide colocar uma propaganda em outro Website, ela precisa pensar em qual tipo de anúncio deseja veicular (estático ou animado), o tamanho da imagem e o local em que ela aparecerá. Cada um desses fatores influencia diretamente o preço de exibição desse anúncio, bem como o tamanho da empresa em qual se deseja anunciar e os os diários que ela recebe.
________________________________________________________________________________________ Anotações
46
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.1 Os Banners Derivados da palavra sa bannière, bandeira, os banners correspondem a imagens estáticas ou animadas, que podem ser inseridas em locais diversos da home page ou seções internas de um Website, especialmente os portais e sites empresariais maiores. Apesar de termos milhões de possibilidades na rede, e uma grande variedade de tamanhos e padrões de banners, existem os que foram predefinidos pela IAB/CASIE (Internet Advertising Bureau (IAB)- Birô de Publicidade na Internet e a Coalition for Advertising ed Information & Entertainment (CASIE) Coalizão para Jornalismo e Entretenimento Sustentados por Publicidade) para a Internet:
8.1.1 Full Banner Suas dimensões são as de 468x60 pixels. Dificilmente um full banner é estático. Atualmente, as empresas estão preferindo confeccionar seus banners em Flash, que possibilita uma maior sofisticação na animação e um tamanho bastante reduzido de arquivo:
8.1.2 Half Banner O Half Banner, como deixa claro o seu nome (half = metade), corresponde à metade de um full banner, dividido a partir de sua largura. Possui as dimensões de 234x60 pixel. O half banner é uma opção interessante quando pensamos em colocar mais de um anunciante numa determinada área de destaque no topo do site, já que é possível a inclusão de dois banners half pelo tamanho de um full banner
________________________________________________________________________________________ Anotações
47
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.1.3 Banner “Botão” Padrão Os banners “botão” figuram aos montes nas áreas laterais da home page de vários sites. Eles são utilizados, geralmente, para caber em espaços pequenos, ou por sites que não querem chamar atenção excessiva para os anúncios em seu layout: O tamanho médio para um banner botão padrão é o de 120x60 pixels. Por serem pequenos, normalmente são estáticos, e possuem o que podemos chamar de “design sucinto”: apenas as informações necessárias, como o logotipo do interessado em anunciar e uma arte discreta, mas legível.
8.1.4 Banners “Botão” Quadrado Os banners quadrados (ou Square Banners) também são utilizados nas laterais na página de um site. Atualmente, a maioria destes banners está sendo apresentada com animações em Flash, o que se justifica por suas dimensões de 125x125 pixels.
8.1.5 Minibanners Os minibanners são pequenas barras que não possuem tendência forte a serem utilizadas como forma direta de venda de anúncios. Obviamente, graças ao seu tamanho reduzido, o minibanner presta-se, na maioria das vezes, apenas a publicidade de algum patrocinador ou anunciando a tecnologia utilizada na construção do portal ou Website, por exemplo. As dimensões padrão de um minibanner são 88x31 pixels: Compor um minibanner é muitas vezes um desafio, que precisa de boa dose de paciência e olho clínico para realizarmos um trabalho satisfatório e harmônico. Podem ser dispostos em qualquer lugar da página.
________________________________________________________________________________________ Anotações
48
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.1.6 Banner Vertical São banners verticais são excelentes de se trabalhar graficamente, pois possuem dimensões suficientes para encaixar perfeitamente imagens e textos, sem prejudicar ambos. As dimensões de um banner vertical dão 120x240 pixels e são, geralmente, locados nas laterais da página.
8.1.7 Banner-faixa Os banners-faixa foram popularizados pelo Yahoo, e apesar de não serem comuns quando os half banners, são uma boa saída para expor seus anunciantes sem poluir muito o visual do site. Geralmente, são posicionados no topo da home page, ou na parte inferior da região do conteúdo. As dimensões de um banner-faixa são 234x30 pixels.
8.1.8 Arranha-Céus ou Sky Scrapers São os imensos banners que ocupam toda a região de uma página, quase sempre a lateral direita. Na sua grande maioria são animados em Flash, e geralmente apresentam promoções internas ou assuntos relacionados ao próprio site. O tamanho médio de um banner é de cerca de 150x580 pixels:
8.1.9 Outros Tipos de Banners Também, vemos muitos sites que além de utilizar os tamanhos-padrão comuns aos banners de anúncios, personalizam espaços publicitários de acordo com o formato e disposição de seus layouts. ________________________________________________________________________________________ Anotações
49
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Assim, é possível encontrarmos uma grande variedade de tipos personalizados ao navegarmos pela Web:
8.2 Os Pop-ups Os pop-ups correspondem às janelas de navegador que se abrem na tela assim que uma página é carregada. Os anúncios veiculados em janelas pop-up são as mais caras formas de publicidade em Internet, já que ficam a frente do conteúdo do próprio site. Os anúncios pop-up usualmente são animações em Flash, e possuem um tamanho médio de 200x200 pixels. Observe alguns exemplos:
________________________________________________________________________________________ Anotações
50
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8.3 Como Alcançar Eficiência com Banners? Até hoje a eficiência dos banners é questionada. Virou assunto polêmico entre publicitários, veículos e anunciantes. Iremos dar algumas dicas para alcançar eficiência com banners, visando não só os cliques, mas principalmente os resultados. 1. Cuidado Com o Banner Negativo. Fique Atento as Mensagens. Assim como na publicidade convencional, o banner também sofre com isso: a negatividade na mensagem publicitária. Existe uma “corrente de pensamento” (creio que seja subconsciente) de que o anúncio, para chamar a atenção de determinado público, deve mostrar imagem ou texto que se relaciona com o estado emocional atual do público-alvo. Citamos um caso-exemplo, fictício, mas comum de se ver: um banner que anuncia um novo software de proteção Windows. O software protege contra vírus, preserva o sistema, bloqueia as suas configurações, podendo ter o apenas com sua senha. O criador do banner tem a idéia de colocar uma foto de um homem de gravata, puxando os cabelos pra cima, fazendo careta, com cara de raiva, gritando, suando e franzindo a testa. O texto chama seu público: “Você está assim com seu Windows?”. E nas cenas seguintes, apresenta o produto. Uma coisa garanto: poucos seres humanos irão se identificar com aquele homem de careta horrenda e de cabelos arrepiados. Ninguém procura a desgraça para si.Todos procuram à felicidade. Quando for criar um banner para sua empresa, pense bem nessa idéia. No caso do exemplo, o criador do banner deveria ter centrado sua mensagem inicial na tranqüilidade e paz que o cliente poderá ter com o software de proteção Windows. A imagem deveria transmitir isso, acompanhado de uma mensagem agradável e positiva como “Fique em paz com seu computador” ou algo do tipo. É necessário dar ação positiva ao espectador do banner, criando uma boa expectativa, mostrando que ele poderá encontrar uma feliz solução para seu problema. 2. Esqueça o “Anuncie Aqui!”
________________________________________________________________________________________ Anotações
51
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Esse tipo de mensagem não traz o resultado esperado na maioria das vezes. Dá uma idéia de “desespero”, de que o veículo não funciona e que por isso está sem anunciantes. Uma idéia é dar uma “degustação” ao anunciante. Dê a oportunidade de experimentação, onde o anunciante poderá anunciar por um determinado número de dias, cliques ou visualizações. Se a empresa anunciante obtiver resultados satisfatórios com esses anúncios, com certeza continuarão com a campanha pagando pelo espaço. 3. Ofereça Tamanhos de Banners Diferenciados e Soluções Criativas de Espaço. Os departamentos de publicidade de jornais e revistas, encarregados de encontrar novas soluções para o mercado publicitário vem implementando nos últimos dez anos novos formatos de anúncios onde se quebrou uma série de limites. Hoje os anunciantes podem bolar anúncios de diferentes formatos, saindo do padrão retangular. O mesmo pode ser aplicado a web. É necessário oferecer novos espaços para anúncios on-line, como os banners em flash que “flutuam“ sobre a página. Para os criadores de banners, é bom apostar nos anúncios interativos, onde se tem brincadeiras ou revelações feitas através do clique do usuário. A interação é a tendência. 4. Cuidado com o Peso dos Banners. Já vi banners por aí com 200Kb de grandes empresas que travavam toda a página por vários minutos até o banner carregar totalmente. Sugestão: um banner de tamanho médio, como os de 468X60, deve ter de 10 a 15kb. Os banners flash podem chegar aos 20kb, pois o mesmo é mostrado à medida que vai carregando, não travando a página. 5. Evite Histórias Longas. Seja objetivo. Provoque curiosidade, mas não prolongue o roteiro. São poucos segundos de efeito onde você poderá ar sua mensagem com eficiência.
________________________________________________________________________________________ Anotações
52
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 9 Animando Imagens para Web 9.1 A Paleta Animation A animação no Photoshop CS3 é feita através da paleta Animation. Na animação as figuras são colocadas em várias camadas, cada uma delas com uma imagem que compõe a ação, e também são dispostas em seqüência. Um mecanismo de repetição faz com que os quadros apareçam um após o outro e assim simulem o movimento, dando a ilusão de continuidade. Nessa paleta encontram-se todos os comandos necessários para criarmos uma animação.
Clicando no botão Convert to Timeline Animation desta paleta:
vemos o outro formato
________________________________________________________________________________________ Anotações
53
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Embora não ostente a versatilidade do Flash e de outros sistemas de animação poderosos, os Gifs animados são fáceis de criar, ocupam pouco espaço em arquivo e podem dar um toque original em nossas páginas Web, podendo ser feitos no Photoshop. 1- Crie um novo arquivo no Photoshop. 2- Desenhe um círculo vazado em formato de shape.
3- Escreva um número “1” com fonte Arial Black de tamanho 250 pixel no meio do círculo:
________________________________________________________________________________________ Anotações
54
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
4- Agora, duplique esta layer, escrevendo “2”. Repita esse procedimento até chegar ao número “5”:
________________________________________________________________________________________ Anotações
55
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Desabilite a visualização de todas as layers, deixando somente a layer que contém o circulo com visualização e a que contém o número “1”:
________________________________________________________________________________________ Anotações
56
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
6- Selecione a layer que contém o círculo e escolha a opção de menu: Layer > Rasterize Layer. Isso fará com que o shape vire uma imagem bitmap: 7- Habilite a visualização de todas as layers e clique no menu pop-up da paleta animation escolhendo a opção: Make Frames From Layers:
________________________________________________________________________________________ Anotações
57
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Veja como ficou nossa paleta animation:
8- Para que o círculo fique visível em todos os frames habilite a sua visualização na paleta Layers:
9- Com a layer Background selecionada clique no menu pop-up da paleta Animation e escolha a opção: Match Layer Across Frame, deixando marcados todos os itens da janela Match Layer :
________________________________________________________________________________________ Anotações
58
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
10- Delete os dois primeiros frames da paleta Animation:
Ao deletarmos os frames da paleta animation não estaremos deletando as layers. 11- No menu pop-up da paleta clique em Reverse Frames para invertemos a ordem dos frames:
12- Selecione todos os frames e no ícone dos segundos escolha a opção de 1.0 Clicando no botão de Plays Animation podemos ver a animação. 13- Clique no botão Convert to timeline animation, localizado no lado direito da paleta, para vermos o outro formato desta paleta:
________________________________________________________________________________________ Anotações
59
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
13- Clique no menu pop-up da paleta e escolha a opção: Document Settings, marcando 1 frame por segundo:
14- Com todas as layers visíveis, selecione somente as layers que contém os números:
________________________________________________________________________________________ Anotações
60
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
14- Clique no menu pop-up da paleta e escolha a opção: Make Frame for Layers. Veja como ficou nossa paleta animation:
________________________________________________________________________________________ Anotações
61
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Agora é só exportar nossa animação para o formato Gif.
________________________________________________________________________________________ Anotações
62
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 10 Criando Slices/Fatias 10.1 Criando Fatias As fatias são áreas de uma imagem definidas com base em camadas, guias ou seleções precisas ou usando-se a ferramenta Slice. Quando você define as fatias de uma imagem, o Photoshop CS3 cria uma folha de estilo em cascata, ou uma tabela HTML que retêm e alinham as fatias. Se desejar, você pode gerar um arquivo HTML que contenha a imagem fatiada junto com a folha de estilo em cascata, Div ou Tabela. Você pode utilizar a ferramenta Slice para criar fatias retangulares na imagem. As fatias criadas com essa ferramenta são chamadas de fatias da usuário. Quando você cria uma fatia de usuário em uma imagem, o Photoshop CS3 cria autofatias para todas as áreas indefinidas em torno da fatia de usuário. 1- Abra o arquivo personal_page.psd na pasta “site” que esta na pasta da Lição:
2- Selecione a ferramenta slice , com esta ferramenta criamos as fatias e com a slice select selecionamos as fatias. 3- Desabilite, através do layers, os textos. Veja a imagem abaixo: 4- Clicando e arrastando com o botão esquerdo do mouse faça uma fatia na parte superior do layout, como na imagem abaixo:
5- Para vermos as opções da fatia selecione a slice select clique sobre ela. Abrirá uma janela como na figura abaixo:
e dê um duplo
________________________________________________________________________________________ Anotações
63
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Slice type: se estiver selecionada a opção “Image” a fatia será exportada como imagem e se for à opção de “No Image” a fatia só constará como preenchimento no programa, mas não será exportada. Name: o nome da fatia, que poder ser alterado. O photoshop automaticamente coloca o nome da fatia (que é o nome do arquivo psd) e um número. URL: link para aonde aquela fatia vai apontar, se for necessário. Target: de que forma será carregado este link pelo navegador. Ex: _blank Alt tag: é o texto alternativo, quando ado o mouse sobre este link aparecerá o que for digitado neste campo. Dimensions: X/Y posição na tela e W/H largura e altura da fatia, respectivamente. 6- Para esta fatia coloque o nome de “topo”. 7- Agora iremos começar a fazer as outras fatias. Faça uma fatia abrangendo a parte que contém o menu e outra para a parte da flor no lado esquerdo. Veja a imagem: ________________________________________________________________________________________ Anotações
64
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
8- Coloque um nome para cada fatia criada, clicando em cima dela com a ferramenta Slice Select. 9- Observe a imagem abaixo e veja como foram criadas as fatias: Lembre-se quem define a criação das fatias é você, elas podem ser feitas de forma diferente, também, dependendo como será montado o layout no Dreamweaver CS3. Importante: Não esqueça de dar nome às fatias, de conferir se nenhuma fatia esta sobreposta à outra e se a soma das larguras das fatias está coincidindo. Cada detalhe é importante para que não haja erros na montagem do layout com Divs. 10- Nas fatias que ficaram ao redor do layout (em cinza) selecione-as e marque a opção No Image. Repita este procedimento para as duas fatias que ficaram dentro do layout, também.
10.2 Salvando os Arquivos 11- Com as fatias prontas vamos exportá-las. Clique no menu File > Sabe For Web & Devices. Abrirá a janela para escolhermos qual o formato da imagem queremos exportar. Para cada fatia podemos configurar a qualidade da imagem e seu formato (jpg ou gif). 11- Clique em Save: 12- No item Settings escolha a opção Other e desmarque a opção Put Image in Folder:
________________________________________________________________________________________ Anotações
65
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
13- Escolha o diretório site/imagens para salvar estes arquivos.
________________________________________________________________________________________ Anotações
66
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Observe que na pasta imagens nossos arquivos já estão salvos:
10.3 Salvando como HTML e Imagens Podemos exportar nosso layout como HTML e imagens, deixando que o Photoshop crie para nós o arquivo HTML. 1- Clique, novamente, no menu File > Sabe For Web & Devices. 2- No item Nome do arquivo coloque “index.html”, no item Salvar como tipo escolha à opção “Html and Images” e no item Settings escolha a opção Other escolhendo o item Slices marcando a opção Generate CSS. Observe as imagens abaixo: ________________________________________________________________________________________ Anotações
67
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
3- Depois de feitas estas configurações clique em OK e nosso Html estará salvo. Analise o Html e observe as facilidades de salvar desta forma e suas limitações. Na pasta “imagens” temos mais dois arquivos psd que são: nemo.psd e celular.psd. Exercite o fatiamento nesses dois layouts.
________________________________________________________________________________________ Anotações
68
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
69
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 11 Montagem do Layout com Divs 11.1 Usando Div Tag A forma ideal na montagem de um layout que contenha textos e imagens é usando a opção de Div Tag. 1- Abra o Dreamweaver CS3 e crie um arquivo Html novo. Salve-o como “index.html” na pasta site. 2- No menu Site > New Site crie um site para que o Dreamweaver mapeie os arquivos. 3- Arraste a imagem “topo” para o topo da página, colocando um texto alternativo para a mesma. 4- Selecione a imagem e clique no ícone Insert Div Tag 5- Deixe marcada a opção Wrap around selection e clique no botão New CSS Style:
6- Na opção Advanced escreva o nome do ID como na imagem abaixo:
________________________________________________________________________________________ Anotações
70
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7- Salve este css como “site.css” na pasta css dentro da pasta site. 8- Na janela CSS Rule Definition marque a largura desta Div, que deve ser a mesma largura da imagem “topo.jpg”:
Clicando em OK já podemos ver a imagem com a Div ao redor. 9- Posicione o cursor do mouse depois do fechamento da Div Topo e clique no ícone Insert Div Tag. ________________________________________________________________________________________ Anotações
71
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
10- Escolha o item “After tag” com a opção
e clique no botão New CSS Style
11- Coloque o nome deste ID de “#LadoEsquerdo”. 12- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem recortada correspondente à parte do Menu com a opção Float: left. Esta Div irá conter toda à parte do lado esquerdo do layout. Podemos definir a altura desta Div somando as alturas das duas imagens que irá compor esse lado. 13- Agora, deixe o cursor posicionado no fechamento da Div LadoEsquerdo e clique no ícone Insert Div Tag. 14- Coloque o nome deste ID de “#Meio”. 15- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem recortada correspondente à parte do Meio do layout com a opção Float: right. Esta Div irá conter toda à parte do meio do layout. Podemos definir a altura desta Div somando as alturas das duas imagens que irá compor a parte do meio. 16- Deixe o cursor posicionado no fechamento da Div Meio e insira a imagem correspondente à parte de baixo do layout. 17- Selecione a tag Body e insira um Div Tag ao redor da seleção com a largura de 758px e com margin:auto. Veja que o esboço do nosso layout já esta montado:
________________________________________________________________________________________ Anotações
72
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
18- Posicione o cursor dentro da Div LadoEsquerdo e insira uma Div Tag. 19- Deixe marcada a opção At insertion point e clique no botão New CSS Style.
20- Coloque o nome deste ID de “#Menu” ________________________________________________________________________________________ Anotações
73
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
21- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente à parte do menu. No Item Background image escolha a imagem e marque a opção no-repeat no item Repeat:
22- Posicione o cursor depois do fechamento da Div Menu e clique no ícone Insert Div Tag. 23- Escolha o item “After tag” com a opção
11- Coloque o nome deste ID de “#LadoEsquerdo”. 12- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem recortada correspondente à parte do Menu com a opção Float: left. Esta Div irá conter toda à parte do lado esquerdo do layout. Podemos definir a altura desta Div somando as alturas das duas imagens que irá compor esse lado. 13- Agora, deixe o cursor posicionado no fechamento da Div LadoEsquerdo e clique no ícone Insert Div Tag. 14- Coloque o nome deste ID de “#Meio”. 15- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem recortada correspondente à parte do Meio do layout com a opção Float: right. Esta Div irá conter toda à parte do meio do layout. Podemos definir a altura desta Div somando as alturas das duas imagens que irá compor a parte do meio. 16- Deixe o cursor posicionado no fechamento da Div Meio e insira a imagem correspondente à parte de baixo do layout. 17- Selecione a tag Body e insira um Div Tag ao redor da seleção com a largura de 758px e com margin:auto. Veja que o esboço do nosso layout já esta montado:
________________________________________________________________________________________ Anotações
72
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
18- Posicione o cursor dentro da Div LadoEsquerdo e insira uma Div Tag. 19- Deixe marcada a opção At insertion point e clique no botão New CSS Style.
20- Coloque o nome deste ID de “#Menu” ________________________________________________________________________________________ Anotações
73
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
21- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente à parte do menu. No Item Background image escolha a imagem e marque a opção no-repeat no item Repeat:
22- Posicione o cursor depois do fechamento da Div Menu e clique no ícone Insert Div Tag. 23- Escolha o item “After tag” com a opção
e clique no botão New CSS Style. 24- Coloque o nome deste ID de “#MenuBaixo” 25- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente à parte de baixo do menu. No Item Background image escolha a imagem e marque a opção no-repeat no item Repeat. Veja como ficou a parte do Lado Esquerdo do layout: 26- Montaremos a parte do meio do nosso layout agora. Deixe o cursor posicionado dentro da Div Meio e insira uma Div Tag. 27- Deixe marcada a opção At insertion point e clique no botão New CSS Style. 28- Coloque o nome deste ID de “#MeioFlor”.
________________________________________________________________________________________ Anotações
74
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
29- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a compreendida na parte do meio do nosso layout (podemos ir ao Photoshop para ver estas medidas). 30- No Item Background escolha a imagem referente à parte de baixo da flor e marque a opção no-repeat no item Repeat, no item Horizontal position escolha a opção “right” e no item Vertical position escolha “bottom”.
31- Deixe o cursor posicionado dentro da Div MeioFlor e insira a imagem correspondente à parte de baixo da Flor. 32- Para posicionar esta parte da flor selecione a imagem e clique na opção Align: Rigth no de propriedades: 33- Deixe o cursor posicionado no fechamento da Div MeioFlor e clique no ícone Insert Div Tag. 34- Deixe marcada a opção After Tag
________________________________________________________________________________________ Anotações
74
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
29- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a compreendida na parte do meio do nosso layout (podemos ir ao Photoshop para ver estas medidas). 30- No Item Background escolha a imagem referente à parte de baixo da flor e marque a opção no-repeat no item Repeat, no item Horizontal position escolha a opção “right” e no item Vertical position escolha “bottom”.
31- Deixe o cursor posicionado dentro da Div MeioFlor e insira a imagem correspondente à parte de baixo da Flor. 32- Para posicionar esta parte da flor selecione a imagem e clique na opção Align: Rigth no de propriedades: 33- Deixe o cursor posicionado no fechamento da Div MeioFlor e clique no ícone Insert Div Tag. 34- Deixe marcada a opção After Tag
e clique no botão New CSS Style:
________________________________________________________________________________________ Anotações
75
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
35- Coloque o nome deste ID de “#BaixoMeio” 36- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente a esta parte. No Item Background escolha a imagem e marque a opção no-repeat no item Repeat e na opção Vertical position escolha “top”.
37- Agora iremos inserir as três imagens que compõem a parte das frutas. Posicione o cursor dentro da Div BaixoMeio e insira a primeira foto: 38- Deixe o cursor posicionado ao lado da foto e insira a segunda foto. Repita este procedimento, também, para a terceira foto:
________________________________________________________________________________________ Anotações
76
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
39- Vamos posicionar estas fotos. Selecione, no CSS, a regra #BaixoMeio e no item Box marque um Padding na opção Top de 71 pixels, diminuindo este valor da opção Height. Veja a imagem abaixo:
Observe como ficou nosso layout: 40- Insira uma regra para a tag Body colocando a cor de fundo no mesmo tom de cinza do layout.
________________________________________________________________________________________ Anotações
77
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 12 Photoshop CS3 com Dreamweaver CS3
78
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
12.1 Vinculando um Arquivo PSD no Dreamweaver CS3 Com a versão do Dreamweaver CS3 e do Photoshop CS3 a integração entre estes dois softwares aumentou bastante, facilitando o nosso trabalho. 1- Abra o arquivo personal_page.psd que esta na pasta site. 2- Expanda a pasta “bem vindo” dentro do arquivo psd.
3- Selecione a ferramenta Rectangular Marquee e selecione a foto de cima que está no layout: 4- Deixe selecionada a miniatura da layer que contém a foto:
5- Clique no menu Edit > Copy. 6- Selecione o menu File > New. Automaticamente este novo documento virá com o tamanho na imagem selecionada. ________________________________________________________________________________________ Anotações
79
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7- Agora clique em Edity > Paste e nossa imagem já estará em um arquivo separado: 8- Salve esta imagem como foto1.psd na pasta da lição. 9- Retorne ao Dreamweaver e deixe o cursor posicionado dentro da Div MeioFlor. 10- Clique no ícone Insert Image na pasta da lição.
e escolha o arquivo foto1.psd que esta salvo
Automaticamente abrirá a caixa de diálogo Image Preview: Nesta caixa podemos configurar a imagem no formato que desejarmos. Depois de configurado é só clicar em OK. 11- Salve este arquivo como imagem1.jpg na pasta da lição. Nossa imagem já estará aparecendo no arquivo index.html, com algumas diferenças como: - Podemos editar esta imagem pelo Dreamweaver CS3 a qualquer momento através do Photoshop na opção Edit.
Automaticamente o Photoshop CS3 abrirá a imagem correspondente para fazermos algumas modificações, se necessário. 12- Repita estes mesmos procedimentos para a segunda foto. Observe como ficará nosso arquivo index.html: ________________________________________________________________________________________ Anotações
80
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
12.2 Usando o Comando Copy Merge Com a integração dos softwares da Adobe podemos copiar e colar imagem, por exemplo, de um programa para outro sem termos que, necessariamente, salvar o arquivo e depois inseri-lo através do comando correspondente. 1- Deixe o arquivo index.html aberto no Dreamweaver. 2- Abra o arquivo foto1.psd, que usamos na lição anterior. Lembre-se que podemos, também, pedir para Editar o arquivo psd através do Dreamweaver clicando no botão correspondente
.
3- Com o arquivo foto.psd aberto, escreva o texto “Ana” em cima da foto: Podemos colocar algum efeito, se necessário. Neste arquivo temos, agora, mais de uma layer. Ficamos com três camadas: uma de background, uma da foto e a outra com o texto. Agora iremos usar o comando Copy Merge do Photoshop CS3. 4- Clique em Select > All. 5- Agora clique no menu: Edit > Copy Merged e estaremos copiando e mesclando todas as informações deste psd. 6- Retorne ao Dreamweaver CS3 e selecione a imagem. 7- Clique no menu: Edit > Paste. Observe que a imagem foi colada com as informações de texto que estavam em outra camada do Photoshop CS3: Isso somente acontece porque optamos pelo comando Copy Merged no Photoshop CS3. 8- Repita esses procedimento para a outra foto. ________________________________________________________________________________________ Anotações
81
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
12.3 Inserindo os Textos Agora falta colocarmos os textos para o menu e para a parte do meio do nosso layout. 1- Selecione a Div Menu e escreva dentro dela os quatro itens do menu: Quem Sou, Galeria de Fotos, Meus Amigos e Meus Hobbies com uma quebra de linha entre os textos (
3- Crie uma nova regra marcando a opção Class e colocando no Name:LinkMenu:
4- Na janela CSS Rule Definition marque as opções como na imagem:
________________________________________________________________________________________ Anotações
82
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Agora, crie uma nova regra marcando a opção Advanced colocando o Selector como na imagem:
6- Aplique esse estilo para cada um dos itens do menu. Agora falta posicionarmos corretamente o menu. 7- Na aba CSS Style clique em cima da regra “Menu” e peça para editá-la. 8- Marque no item Box o Padding (esse valor pode variar de acordo com o tamanho da Div) como na imagem abaixo, lembrando de diminuir da largura (Width) e da altura (Heigt) os pixels correspondentes:
________________________________________________________________________________________ Anotações
83
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Veja o resultado: 9- Com os conhecimentos adquiridos até agora tente colocar o texto na Div “MeioFlor” formatando-o com estilos CSS.
________________________________________________________________________________________ Anotações
84
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 13 Photoshop CS3 com Flash CS3
85
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
13.1 Importando um arquivo psd para o Flash CS3 Novamente, a grande novidade entre estes dois softwares é a sua integração e compatibilidade, principalmente em relação a sua Layers. 1- Abra o arquivo site_flash.psd que esta na pasta imagens. Neste arquivo temos várias layers, as quais serão preservadas na importação para o Flash CS3.
2- Inicialize o Flash CS3 e peça para criar um novo: Flash File (ActionScript 3.0). 3- Salve este arquivo fla na pasta da lição. Agora iremos importar nosso arquivo psd para dentro do Flash CS3 4- Selecione o menu: File > Import > Import to Stage e escolha o arquivo site_flash.psd que esta na pastas imagens. Automaticamente abrirá a uma caixa de diálogo para otimizarmos as layers na nossa importação:
________________________________________________________________________________________ Anotações
86
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Clique em cima na primeira layer, que é a que contém texto: Ao lado direito da janela abrirá algumas opções para podermos configurar para esta layer: 6- Marque a opção: Editable text, para que possamos editar o texto no Flash CS3. As opções: - Create move clip for this layer, se quisermos criar um movieclip nesta layer de texto, já o instanciando. - Publish Settings, refere-se à compressão que teremos ou não nesta Layer. ________________________________________________________________________________________ Anotações
87
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7- Clique na segunda layer de texto e marque a opção: Editable text, também. 8- Clique na terceira layer e marque a opção: Flattened bitmap image. Iremos achatar esta layer.
________________________________________________________________________________________ Anotações
88
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
9- Clique nas próximas layers e vá configurando-as. 10- Na última layer, que é a de Background deixe desmarcado para não a importarmos para dentro do Flash.
11- Nas opções abaixo deixe marcadas as opções: Place layers at original position e Set stage size to same size as Photoshop canvas:
Automaticamente nosso arquivo no Flash CS3 assumirá o mesmo tamanho do arquivo psd importado e as layers do Flash ficaram na mesma posição que as layers do Photoshop. 12- Ao final clique em OK. Com o nosso arquivo psd importado, podemos observar como ficaram as layers no Flash CS3:
________________________________________________________________________________________ Anotações
89
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Observe que: - O mesmo nome que estava no Photoshop CS3 ficou para as layers do Flash CS3; - A pasta que continha um grupo de layers também veio da mesma forma que estava no Photoshop; - Os textos que exportamos como editáveis vieram como: Static text; - O nome de instância de cada objeto é o nome da sua respectiva layer, a não ser que você tenha marcado que a layer fosse do tipo movieclip e instanciasse o mesmo; - Veja que no Flash CS3 temos um botão ocultá-la.
à esquerda abaixo na timeline para
Agora é só usarmos a imaginação e partir para as animações.
________________________________________________________________________________________ Anotações
90
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 14 Dreamweaver CS3 com Flash CS3
91
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
14.1 Editando um Swf a partir do Dreamweaver CS3 Para esta lição vamos ficar somente com o Dreamweaver CS3 aberto. 1- Abra o arquivo index.html que esta na pasta “Vídeo”. 2- Insira um parágrafo depois da palavra profissionais.
Agora iremos inserir nosso arquivo swf. 3- Clique em: Insert > Media > Flash ou clique no ícone de atalho
.
4- Selecione o arquivo videos.swf que esta na pasta “vídeo”. 5- Coloque o nome para a tag de ibilidade de Vídeo. Observe que nosso arquivo já está inserido na página html. 6- Selecione o arquivo swf e na opção align escolha: Rigth.
7- Para ver o arquivo em execução clique no Play.
________________________________________________________________________________________ Anotações
92
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Agora iremos modificar nosso arquivo swf a partir de seu arquivo fla. 8- Clique no botão Edit:
Automaticamente o Flash CS3 será inicializado e o programa perguntará para nós qual arquivo fla corresponde ao swf. 9- Selecione o arquivo videos.fla Com o Flash CS3 aberto podemos notar que na parte de cima está habilitado o botão Done demonstrando que estamos editando este fla através do Dreamweaver CS3:
10- Insira um texto em uma nova Layer. 11- Com as alterações finalizadas clique no botão Done.
________________________________________________________________________________________ Anotações
93
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
O Flash irá exportar o arquivo swf automaticamente, como se tivéssemos clicado em Ctrl + Enter. Para ver as alterações clique no botão Play do Dreamweaver CS3:
________________________________________________________________________________________ Anotações
94
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Unidade 15 Fazendo seu Próprio Layout 15.1 A Importância de um Porfifólio Online A Internet, por ser um meio relativamente fácil de ser ado hoje em dia, tornou-se um dos principais setores de divulgação de escritórios, empresas e pessoas. E, também, tornou-se uma segunda alternativa na busca por empregos e serviços. Especialmente para um profissional que trabalha com artes gráficas e visuais, ter um portifólio na Internet é absolutamente indispensável nos dias de hoje. Ele é uma ferramenta para o profissional demonstrar suas habilidades em dominar aquele espaço e se comunicar com seus visitantes. Mais do que um resumo dos trabalhos, o portifólio encarna seu autor: é a sua representação numa situação onde ele (o profissional) não pode estar presente fisicamente. Um portifólio corresponde ao conjunto de trabalhos, (que, dependendo da qualidade e quantidade, podem ser todos ou apenas alguns pré-selecionados) de uma empresa, escritório ou profissional, organizados geralmente em ordem decrescente de data ou publicação (do mais recente ao mais antigo, por ordem de prioridade) e que funcionam, essencialmente, como meio de análise e comparação do nível de profissional pelo leigo ou interessado em contratar os serviços.
15.2 O que Divulgar? Uma das grandes vantagens de um portifólio online esta na possibilidade de se trabalhar com as informações em três vertentes: - Visuais; - Audiovisuais; - Textuais Os trabalhos devem falar por si só, porém contendo dados como: data, tipo, contratante, conceito, tamanho e material utilizado, que são fundamentais para ________________________________________________________________________________________ Anotações
95
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
auxiliar o visitante a compreender o que está exposto. É importante relembrar que o portifólio será avaliado sem a presença do autor. Também é recomendado que o profissional demonstre como foi todo o processo de elaboração do projeto, desde a requisição do cliente até o resultado final obtido. Isso demonstra a metodologia de trabalho do designer. É fundamental que fique claro quais foram às pessoas que estiveram envolvidas no projeto (se houver), fornecendo os créditos devidos a esses profissionais. Isso vale para avaliar a ética do designer quanto ao seu trabalho e dos outros. Se não descrevermos exatamente o projeto quem visitar o portifólio vai achar que o profissional fez tudo. E aí teremos uma falha grande de comunicação. È melhor sermos honestos, deixando claro até aonde vão nossas experiências.
15.3 Alguns Critérios na Seleção dos Trabalhos - Selecionar os trabalhos a serem vinculados, tendo o cuidado de apresentar projetos que reflitam: criatividade, habilidade, talento, conhecimento cultural, percepção e capacidade de solução de problemas; - Definir métodos para classificação e indexação dos itens: ano, cliente, tipo de projeto, etc.; - Quais es utilizar: fotografias, animações, vídeos, arquivos digitais, etc.; - Outro ponto está no tipo de foco dos trabalhos apresentados, pois eles devem representar os segmentos que o profissional deseja atuar. O que o designer mais gosta? O que o inspira? - Uso correto da ortografia e gramática. Como muitas vezes, o texto entra como imagem, o ideal é pedir a alguém que o revise antes da publicação. - Cuidado nos detalhes do layout como: imagens bem cortadas, gráficos com curvas suaves, além de “pitadas” de criatividade para atrair a atenção dos visitantes. Lembres-se que desenvolver um portifólio criativo esta longe de representar apresentações recheadas de técnicas desnecessárias. Cuidado para não forçar demais e não bolar navegações mirabolantes. Então vale a pena ficar atento como se quer ser percebido e refletir isso na apresentação de seus trabalhos. ________________________________________________________________________________________ Anotações
96
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Veja alguns bons exemplos:
________________________________________________________________________________________ Anotações
97
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Agora é a sua vez... Na pasta da lição disponibilizamos três temas: Um site para um consultório de advocacia, um para uma escola de educação infantil e site para uma floricultura. O tema, também, poderá ser escolhido por você. Tema1: Consultório de Advocacia
Siga o roteiro abaixo para facilitar a construção do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site: __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem é o público-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
98
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
4. Existe já um conteúdo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias já estão disponíveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparência desejada para o site? Exemplos e referências. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais serão os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 8. Qual será a diferenciação que o site terá em relação a seus concorrentes? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a conclusão do site? __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
99
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
__________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotações
100
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
101
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
102
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Tema2: Escola de Educação Infantil
Siga o roteiro abaixo para facilitar a construção do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site:
________________________________________________________________________________________ Anotações
103
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
__________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem é o público-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 4. Existe já um conteúdo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias já estão disponíveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparência desejada para o site? Exemplos e referências. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais serão os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 8. Qual será a diferenciação que o site terá em relação a seus concorrentes? __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
104
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
__________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a conclusão do site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotações
105
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
106
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
107
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
108
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Tema3: Floricultura
________________________________________________________________________________________ Anotações
109
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Siga o roteiro abaixo para facilitar a construção do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site: __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem é o público-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 4. Existe já um conteúdo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias já estão disponíveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparência desejada para o site? Exemplos e referências. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais serão os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
110
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
8. Qual será a diferenciação que o site terá em relação a seus concorrentes? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a conclusão do site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotações
111
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
112
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
113
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
114
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
115
2008 Alfamidia Prow LTDA.
________________________________________________________________________________________ Anotações
75
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
35- Coloque o nome deste ID de “#BaixoMeio” 36- Na janela CSS Rule Definition marque a largura e a altura desta Div, que deve ser a mesma da imagem correspondente a esta parte. No Item Background escolha a imagem e marque a opção no-repeat no item Repeat e na opção Vertical position escolha “top”.
37- Agora iremos inserir as três imagens que compõem a parte das frutas. Posicione o cursor dentro da Div BaixoMeio e insira a primeira foto: 38- Deixe o cursor posicionado ao lado da foto e insira a segunda foto. Repita este procedimento, também, para a terceira foto:
________________________________________________________________________________________ Anotações
76
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
39- Vamos posicionar estas fotos. Selecione, no CSS, a regra #BaixoMeio e no item Box marque um Padding na opção Top de 71 pixels, diminuindo este valor da opção Height. Veja a imagem abaixo:
Observe como ficou nosso layout: 40- Insira uma regra para a tag Body colocando a cor de fundo no mesmo tom de cinza do layout.
________________________________________________________________________________________ Anotações
77
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 12 Photoshop CS3 com Dreamweaver CS3
78
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
12.1 Vinculando um Arquivo PSD no Dreamweaver CS3 Com a versão do Dreamweaver CS3 e do Photoshop CS3 a integração entre estes dois softwares aumentou bastante, facilitando o nosso trabalho. 1- Abra o arquivo personal_page.psd que esta na pasta site. 2- Expanda a pasta “bem vindo” dentro do arquivo psd.
3- Selecione a ferramenta Rectangular Marquee e selecione a foto de cima que está no layout: 4- Deixe selecionada a miniatura da layer que contém a foto:
5- Clique no menu Edit > Copy. 6- Selecione o menu File > New. Automaticamente este novo documento virá com o tamanho na imagem selecionada. ________________________________________________________________________________________ Anotações
79
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7- Agora clique em Edity > Paste e nossa imagem já estará em um arquivo separado: 8- Salve esta imagem como foto1.psd na pasta da lição. 9- Retorne ao Dreamweaver e deixe o cursor posicionado dentro da Div MeioFlor. 10- Clique no ícone Insert Image na pasta da lição.
e escolha o arquivo foto1.psd que esta salvo
Automaticamente abrirá a caixa de diálogo Image Preview: Nesta caixa podemos configurar a imagem no formato que desejarmos. Depois de configurado é só clicar em OK. 11- Salve este arquivo como imagem1.jpg na pasta da lição. Nossa imagem já estará aparecendo no arquivo index.html, com algumas diferenças como: - Podemos editar esta imagem pelo Dreamweaver CS3 a qualquer momento através do Photoshop na opção Edit.
Automaticamente o Photoshop CS3 abrirá a imagem correspondente para fazermos algumas modificações, se necessário. 12- Repita estes mesmos procedimentos para a segunda foto. Observe como ficará nosso arquivo index.html: ________________________________________________________________________________________ Anotações
80
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
12.2 Usando o Comando Copy Merge Com a integração dos softwares da Adobe podemos copiar e colar imagem, por exemplo, de um programa para outro sem termos que, necessariamente, salvar o arquivo e depois inseri-lo através do comando correspondente. 1- Deixe o arquivo index.html aberto no Dreamweaver. 2- Abra o arquivo foto1.psd, que usamos na lição anterior. Lembre-se que podemos, também, pedir para Editar o arquivo psd através do Dreamweaver clicando no botão correspondente
.
3- Com o arquivo foto.psd aberto, escreva o texto “Ana” em cima da foto: Podemos colocar algum efeito, se necessário. Neste arquivo temos, agora, mais de uma layer. Ficamos com três camadas: uma de background, uma da foto e a outra com o texto. Agora iremos usar o comando Copy Merge do Photoshop CS3. 4- Clique em Select > All. 5- Agora clique no menu: Edit > Copy Merged e estaremos copiando e mesclando todas as informações deste psd. 6- Retorne ao Dreamweaver CS3 e selecione a imagem. 7- Clique no menu: Edit > Paste. Observe que a imagem foi colada com as informações de texto que estavam em outra camada do Photoshop CS3: Isso somente acontece porque optamos pelo comando Copy Merged no Photoshop CS3. 8- Repita esses procedimento para a outra foto. ________________________________________________________________________________________ Anotações
81
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
12.3 Inserindo os Textos Agora falta colocarmos os textos para o menu e para a parte do meio do nosso layout. 1- Selecione a Div Menu e escreva dentro dela os quatro itens do menu: Quem Sou, Galeria de Fotos, Meus Amigos e Meus Hobbies com uma quebra de linha entre os textos (
3- Crie uma nova regra marcando a opção Class e colocando no Name:LinkMenu:
4- Na janela CSS Rule Definition marque as opções como na imagem:
________________________________________________________________________________________ Anotações
82
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Agora, crie uma nova regra marcando a opção Advanced colocando o Selector como na imagem:
6- Aplique esse estilo para cada um dos itens do menu. Agora falta posicionarmos corretamente o menu. 7- Na aba CSS Style clique em cima da regra “Menu” e peça para editá-la. 8- Marque no item Box o Padding (esse valor pode variar de acordo com o tamanho da Div) como na imagem abaixo, lembrando de diminuir da largura (Width) e da altura (Heigt) os pixels correspondentes:
________________________________________________________________________________________ Anotações
83
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Veja o resultado: 9- Com os conhecimentos adquiridos até agora tente colocar o texto na Div “MeioFlor” formatando-o com estilos CSS.
________________________________________________________________________________________ Anotações
84
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 13 Photoshop CS3 com Flash CS3
85
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
13.1 Importando um arquivo psd para o Flash CS3 Novamente, a grande novidade entre estes dois softwares é a sua integração e compatibilidade, principalmente em relação a sua Layers. 1- Abra o arquivo site_flash.psd que esta na pasta imagens. Neste arquivo temos várias layers, as quais serão preservadas na importação para o Flash CS3.
2- Inicialize o Flash CS3 e peça para criar um novo: Flash File (ActionScript 3.0). 3- Salve este arquivo fla na pasta da lição. Agora iremos importar nosso arquivo psd para dentro do Flash CS3 4- Selecione o menu: File > Import > Import to Stage e escolha o arquivo site_flash.psd que esta na pastas imagens. Automaticamente abrirá a uma caixa de diálogo para otimizarmos as layers na nossa importação:
________________________________________________________________________________________ Anotações
86
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
5- Clique em cima na primeira layer, que é a que contém texto: Ao lado direito da janela abrirá algumas opções para podermos configurar para esta layer: 6- Marque a opção: Editable text, para que possamos editar o texto no Flash CS3. As opções: - Create move clip for this layer, se quisermos criar um movieclip nesta layer de texto, já o instanciando. - Publish Settings, refere-se à compressão que teremos ou não nesta Layer. ________________________________________________________________________________________ Anotações
87
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
7- Clique na segunda layer de texto e marque a opção: Editable text, também. 8- Clique na terceira layer e marque a opção: Flattened bitmap image. Iremos achatar esta layer.
________________________________________________________________________________________ Anotações
88
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
9- Clique nas próximas layers e vá configurando-as. 10- Na última layer, que é a de Background deixe desmarcado para não a importarmos para dentro do Flash.
11- Nas opções abaixo deixe marcadas as opções: Place layers at original position e Set stage size to same size as Photoshop canvas:
Automaticamente nosso arquivo no Flash CS3 assumirá o mesmo tamanho do arquivo psd importado e as layers do Flash ficaram na mesma posição que as layers do Photoshop. 12- Ao final clique em OK. Com o nosso arquivo psd importado, podemos observar como ficaram as layers no Flash CS3:
________________________________________________________________________________________ Anotações
89
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Observe que: - O mesmo nome que estava no Photoshop CS3 ficou para as layers do Flash CS3; - A pasta que continha um grupo de layers também veio da mesma forma que estava no Photoshop; - Os textos que exportamos como editáveis vieram como: Static text; - O nome de instância de cada objeto é o nome da sua respectiva layer, a não ser que você tenha marcado que a layer fosse do tipo movieclip e instanciasse o mesmo; - Veja que no Flash CS3 temos um botão ocultá-la.
à esquerda abaixo na timeline para
Agora é só usarmos a imaginação e partir para as animações.
________________________________________________________________________________________ Anotações
90
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
Unidade 14 Dreamweaver CS3 com Flash CS3
91
2008 Processor Alfamidia LTDA.
Alfamídia Design: Layout de Sites
14.1 Editando um Swf a partir do Dreamweaver CS3 Para esta lição vamos ficar somente com o Dreamweaver CS3 aberto. 1- Abra o arquivo index.html que esta na pasta “Vídeo”. 2- Insira um parágrafo depois da palavra profissionais.
Agora iremos inserir nosso arquivo swf. 3- Clique em: Insert > Media > Flash ou clique no ícone de atalho
.
4- Selecione o arquivo videos.swf que esta na pasta “vídeo”. 5- Coloque o nome para a tag de ibilidade de Vídeo. Observe que nosso arquivo já está inserido na página html. 6- Selecione o arquivo swf e na opção align escolha: Rigth.
7- Para ver o arquivo em execução clique no Play.
________________________________________________________________________________________ Anotações
92
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Agora iremos modificar nosso arquivo swf a partir de seu arquivo fla. 8- Clique no botão Edit:
Automaticamente o Flash CS3 será inicializado e o programa perguntará para nós qual arquivo fla corresponde ao swf. 9- Selecione o arquivo videos.fla Com o Flash CS3 aberto podemos notar que na parte de cima está habilitado o botão Done demonstrando que estamos editando este fla através do Dreamweaver CS3:
10- Insira um texto em uma nova Layer. 11- Com as alterações finalizadas clique no botão Done.
________________________________________________________________________________________ Anotações
93
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
O Flash irá exportar o arquivo swf automaticamente, como se tivéssemos clicado em Ctrl + Enter. Para ver as alterações clique no botão Play do Dreamweaver CS3:
________________________________________________________________________________________ Anotações
94
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Unidade 15 Fazendo seu Próprio Layout 15.1 A Importância de um Porfifólio Online A Internet, por ser um meio relativamente fácil de ser ado hoje em dia, tornou-se um dos principais setores de divulgação de escritórios, empresas e pessoas. E, também, tornou-se uma segunda alternativa na busca por empregos e serviços. Especialmente para um profissional que trabalha com artes gráficas e visuais, ter um portifólio na Internet é absolutamente indispensável nos dias de hoje. Ele é uma ferramenta para o profissional demonstrar suas habilidades em dominar aquele espaço e se comunicar com seus visitantes. Mais do que um resumo dos trabalhos, o portifólio encarna seu autor: é a sua representação numa situação onde ele (o profissional) não pode estar presente fisicamente. Um portifólio corresponde ao conjunto de trabalhos, (que, dependendo da qualidade e quantidade, podem ser todos ou apenas alguns pré-selecionados) de uma empresa, escritório ou profissional, organizados geralmente em ordem decrescente de data ou publicação (do mais recente ao mais antigo, por ordem de prioridade) e que funcionam, essencialmente, como meio de análise e comparação do nível de profissional pelo leigo ou interessado em contratar os serviços.
15.2 O que Divulgar? Uma das grandes vantagens de um portifólio online esta na possibilidade de se trabalhar com as informações em três vertentes: - Visuais; - Audiovisuais; - Textuais Os trabalhos devem falar por si só, porém contendo dados como: data, tipo, contratante, conceito, tamanho e material utilizado, que são fundamentais para ________________________________________________________________________________________ Anotações
95
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
auxiliar o visitante a compreender o que está exposto. É importante relembrar que o portifólio será avaliado sem a presença do autor. Também é recomendado que o profissional demonstre como foi todo o processo de elaboração do projeto, desde a requisição do cliente até o resultado final obtido. Isso demonstra a metodologia de trabalho do designer. É fundamental que fique claro quais foram às pessoas que estiveram envolvidas no projeto (se houver), fornecendo os créditos devidos a esses profissionais. Isso vale para avaliar a ética do designer quanto ao seu trabalho e dos outros. Se não descrevermos exatamente o projeto quem visitar o portifólio vai achar que o profissional fez tudo. E aí teremos uma falha grande de comunicação. È melhor sermos honestos, deixando claro até aonde vão nossas experiências.
15.3 Alguns Critérios na Seleção dos Trabalhos - Selecionar os trabalhos a serem vinculados, tendo o cuidado de apresentar projetos que reflitam: criatividade, habilidade, talento, conhecimento cultural, percepção e capacidade de solução de problemas; - Definir métodos para classificação e indexação dos itens: ano, cliente, tipo de projeto, etc.; - Quais es utilizar: fotografias, animações, vídeos, arquivos digitais, etc.; - Outro ponto está no tipo de foco dos trabalhos apresentados, pois eles devem representar os segmentos que o profissional deseja atuar. O que o designer mais gosta? O que o inspira? - Uso correto da ortografia e gramática. Como muitas vezes, o texto entra como imagem, o ideal é pedir a alguém que o revise antes da publicação. - Cuidado nos detalhes do layout como: imagens bem cortadas, gráficos com curvas suaves, além de “pitadas” de criatividade para atrair a atenção dos visitantes. Lembres-se que desenvolver um portifólio criativo esta longe de representar apresentações recheadas de técnicas desnecessárias. Cuidado para não forçar demais e não bolar navegações mirabolantes. Então vale a pena ficar atento como se quer ser percebido e refletir isso na apresentação de seus trabalhos. ________________________________________________________________________________________ Anotações
96
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Veja alguns bons exemplos:
________________________________________________________________________________________ Anotações
97
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Agora é a sua vez... Na pasta da lição disponibilizamos três temas: Um site para um consultório de advocacia, um para uma escola de educação infantil e site para uma floricultura. O tema, também, poderá ser escolhido por você. Tema1: Consultório de Advocacia
Siga o roteiro abaixo para facilitar a construção do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site: __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem é o público-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
98
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
4. Existe já um conteúdo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias já estão disponíveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparência desejada para o site? Exemplos e referências. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais serão os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 8. Qual será a diferenciação que o site terá em relação a seus concorrentes? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a conclusão do site? __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
99
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
__________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotações
100
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
101
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
102
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Tema2: Escola de Educação Infantil
Siga o roteiro abaixo para facilitar a construção do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site:
________________________________________________________________________________________ Anotações
103
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
__________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem é o público-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 4. Existe já um conteúdo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias já estão disponíveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparência desejada para o site? Exemplos e referências. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais serão os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 8. Qual será a diferenciação que o site terá em relação a seus concorrentes? __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
104
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
__________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a conclusão do site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotações
105
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
106
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
107
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
108
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Tema3: Floricultura
________________________________________________________________________________________ Anotações
109
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
Siga o roteiro abaixo para facilitar a construção do seu layout: 1. Tema: __________________________________________________________ 2. Quais os principais objetivos do site: __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 3. Quem é o público-alvo? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 4. Existe já um conteúdo para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 5. Imagens e Fotografias já estão disponíveis para o site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 6. Qual a aparência desejada para o site? Exemplos e referências. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 7. Quais serão os concorrentes para o site? Possuem site? Qual? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ________________________________________________________________________________________ Anotações
110
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
8. Qual será a diferenciação que o site terá em relação a seus concorrentes? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 9. Quais os itens inicialmente previstos para o site? (esquema inicial) __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 10. Qual o tempo previsto para a conclusão do site? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ RAFT-ZONE
________________________________________________________________________________________ Anotações
111
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
112
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
113
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
114
2008 Alfamidia Prow LTDA.
Alfamídia Design: Layout de Sites
________________________________________________________________________________________ Anotações
115
2008 Alfamidia Prow LTDA.
Related Documents 171j1w
Layout Sites 6f715r
July 2022 0
Sites 6v6h3t
October 2022 0
Sites 6v6h3t
June 2022 0
Freenet Sites 553i4g
October 2019 116
Ad Sites 474a6j
April 2022 0
Sites Vagas 3wc5a
August 2022 0More Documents from "Denis Silva" 543or
Layout Sites 6f715r
July 2022 0
Maquete Tabernaculo 255z1i
September 2022 0
2c82t
April 2020 20
Superhero Workout 2x595
May 2020 60
Ident System 2u235
February 2023 0