Dando prosseguimento a série "Segredos sobre Design de Site", irei apresentar neste artigo questões sobre imagens e design de URL.
Imagens
Mesmo com a proliferação da banda larga no Brasil, a maioria dos internautas continuam com a tradicional conexão por modem. Sem falar nos congestionamentos que surgem com freqüência em alguns horários, independente da velocidade de conexão.
Por isso é bom minimizar a presença de imagens no seu website. Não só pela poluição visual que isso pode acarretar, mas pelo tempo de download dessas imagens.
Seja criterioso. Não coloque uma imagem apenas por ser uma bonita ilustração ou fotografia. Toda imagem deve ter um motivo para estar ali. Se a imagem não fizer falta, retire.
Uma solução para resolver essa questão é minimizar o número de imagens na primeira página do site. A medida que o internauta for aprofundando sua navegação, clicando em seções mais específicas, é possível adicionar mais imagens.
Um exemplo: um website de fabricante de eletrônicos. Na primeira página temos poucas imagens. Quando o usuário for para a seção de câmeras digitais é dado a opção de ver a câmera mais de perto e links para fotos do produto em alta resolução mostrando todos seus detalhes. Nesse momento é possível colocar mais fotos já que o produto interessa ao usuário e provavelmente por isso estará disposto a obter mais detalhes, esperando o download de imagens maiores do produto.
Design de URL
Se você está pensando em criar uma marca para a sua empresa, além
de checar se o nome já está registrado no INPI, você deverá verificar também se a marca já possui endereço na internet. Se tiver, preferível buscar outro nome.
Isso irá evitar dores de cabeça no futuro. A internet vem se popularizando a cada ano e ter um endereço web da sua empresa é essencial.
O formato de endereço web, quando mal feito, pode fazer com que seus clientes entrem em outros sites por uma confusão de uma única letra, por exemplo. Podemos citar o exemplo do Google. Prevendo que muitos esqueceriam a segunda letra "o" da palavra Google, eles tiveram que registrar dois endereços:
www.google.com e www.gogle.com
Tem muitas empresas aproveitadoras que ganham clientes de seus concorrentes prevendo o erro do internauta quando escreve o endereço da empresa adversária.
Para você não cair nessa, vou dar mais algumas dicas sobre design de URL:
1. Faça com que a URL seja o menor possível, pois quanto maior a url, maior será a possibilidade de se cometer erros na hora da digitação;
2. Evite, sempre que possível, palavras estrangeiras ou fora do meio comum que possam confundir o usuário;
3. Use sempre todas as letras minúsculas, na url e no diretório das seções pois alguns servidores diferenciam caixa alta de caixa baixa;
4. Em nomes compostos, prefira juntá-los ao invés de separá-los com hífen. O usuário poderá esquecer o hifen e acabar não encontrando sua página. Fica também mais fácil de pronunciá-los.
A navegação do seu site deve responder as seguintes perguntas dos usuários:
Onde estou?
Essa é a pergunta mais importante da navegação web. Você precisa identificar seu site em todas as páginas. Evite enfeitar demais o sistema de navegação, siga os padrões já estabelecidos. Veja o que diz o mestre em usabilidade, Jakob Nielsen: "meus estudos de usabilidade mostram que os usuários queixam-se amargamente quando um site tenta usar interfaces de navegação drasticamente diferentes das que passaram a esperar da maioria dos outros sites".
Você deve obedecer as seguintes regras:
1. Coloque seu logotipo em todas as páginas do site. De preferência colocado no canto superior esquerda da página, caso a página for numa língua na qual se lê da esquerda para a direita.
2. Repita determinados elementos da primeira página nas páginas internas do site ( conservar o topo e o logotipo, por exemplo ). Quando o internauta vê a primeira página com uma cara e uma página interna totalmente diferente, a impressão que fica é que ele foi mandado para outro site.
3. Identifique de forma clara onde o usuário está. Isso pode ser feito com o título da página em destaque. Pode-se complementar essa informação no menu, destacando onde o usuário se encontra.
Onde estive?
Apresento duas soluções para esta pergunta:
1. Não modifique as cores de link padrão. Utilize azul com fundo claro. O azul padrão já é aceito, de forma intuitiva de que aquela palavra possui um link hipertexto. Se o fundo for preto utilize amarelo ou verde claro.
2. Quando o usuário clicar no link, conserve a opção da mudança de cor para o roxo quando o usuário observar o mesmo link da próxima vez. Isso serve de auxílio para o internauta, dizendo a ele "você já esteve aqui".
Aonde posso ir?
Uma boa estrutura de site é de grande ajuda para os usuários responderem a essa pergunta.
1. Informe links associativos ao assunto da página, dando aos usuários dicas como "consulte também" ou "veja também".
2. Coloque o menu do site totalmente visível. Evite os menus suspensos (chamados também de combos), menus em dhtml que ficam escondidos ou que são acionados com o botão do mouse. Esses tipos de menu não mostram para o usuário toda o conjunto de opções sem ter de tomar uma medida explícita.
Metáfora
Muito cuidado com as metáforas. Elas podem confundir o usuário e acabar complicando mais do que ajudando. As metáforas foram muito utilizadas no início da Internet, entre 1997 e 1998. Naquela época estava na moda o conceito de "realidade virtual". Todos queriam ter sites onde o internauta pudesse ter a sensação de entrar dentro de sua loja, bar, empresa ou qualquer outra coisa que fosse.
Isso não funcionou. Transferir para a internet os momentos chatos e sacais de se deslocar por dentro de uma loja, procurar por uma atendente, buscar pelo produto desejado numa prateleira é totalmente desnecessário.
O internauta procura agilidade e rapidez. Todos buscam algo. A missão do seu site é facilitar essa busca.
Cuidado também com os menus metafóricos. Conheço site que trocou o carrinho de supermercado ( figura que se tornou padrão para adicionar produtos a uma lista de compras ) por um pacote de compras. Fracasso total. Ninguém sabia onde clicar.
Os padrões estabelecidos de navegação web só vem a lhe auxiliar, seguir esses padrões evita complicações de interpretação pelo usuário e no final todos ganham.
No próximo artigo da série "Segredos sobre Design de Site" irei abordar as imagens, fotografias e o design de URL.
Primeira Página
A primeira página de um site pode ter muitos nomes: home, homepage, página inicial, início, index ou simplesmente primeira página. Essa, sem dúvida, é a página mais importante do website, pois ela irá responder à primeira pergunta que todo internauta faz quando entra no seu site: "Onde estou?". E responderá também à segunda pergunta: "Para que serve esse site?".
Mesmo sendo a página mais importante vejo muitos sites por aí que não dão muita bola para ela, tratando essa página como todas as páginas internas.
Para que a página inicial cumpra sua função é necessário fazer dela um ponto de entrada para todo o conteúdo das páginas internas, com destaques do conteúdo que interessa seu público no seu centro, o mesmo valendo para novidades, notícias ou promoções especiais.
Coloque imagens que se ligam ao produto ou serviço que você aborda no site. Isso irá facilitar muito a resposta da pergunta "Onde estou?".
Um sistema de busca se mostra bastante eficaz, principalmente, quando se trata de um site com muito conteúdo, pois muitos internautas não estarão nem um pouco afim de encontrar a informação que procuram clicando em links e mais links.
Largura do site
Esse assunto se mostrou bem polêmico nos últimos anos. Vou falar sobre minha experiência com esse tipo de problema.
A largura da página depende bastante dos seguintes fatores: resolução de vídeo, barra iniciar oculta ou não, tamanho dos icones do navegador e etiquetas de texto dos botões ativadas ou não.
Tudo isso você deve prever na hora da criação do layout. Um usuário pode usar resolução 800 x 600 enquanto o outro 1024 x 768 ou então dois usuários podem usar a mesma resolução 800 x 600 mas um utilizando a barra de iniciar fixa e com botões do navegador grandes e outro com barra de iniciar oculta e botões menores ganhando mais espaço no navegador.
Como adivinhar tudo isso? O usuário tem uma gama de possibilidades de configurações de vídeo, tornando impossível força-lo a visualizar seu site do jeito que você quer.
Para isso temos as seguintes soluções:
1. Criar layouts para resolução mínima de 800 x 600: para isso é necessário considerar o tamanho de tela do navegador supondo uma barra fixa no menu iniciar do windows, o tamanho default dos botões do navegador e uma possível barra de rolagem vertical. Prevendo isso, crie seu layout na resolução 776 x
460 para ser bem visualizado em 800 x 600 e resoluções superiores. A resolução de 640 x 480 deixou de ser utilizado pela maioria dos internautas mas cuidado pois cada vez mais aparecem usuários de palmtop e handhelds conectados a Internet. Creio que no futuro essa questão ficará mais complicada pois o
número desses usuários tende a crescer a cada ano.
2. Utilizar um layout "líquido", aquele que se auto ajusta a qualquer resolução através de tabelas com larguras definidas em porcentagem. O que vai contra esse tipo de montagem de página é a perda de diversos recursos de layout como alguns tipos de imagens de topo e menu, além de dispersar as informações e deixar tudo muito vazio quando se está em altas resoluções.
3. Crie um fundo para um layout previsto para 800 x 600 que deixe contínuo algumas figuras, independente da resolução.
4. Não tente colocar todo o conteúdo da página em 776 x 460 quando se trata de um portal de notícias ou algo semelhante onde são necessários muitos destaques e um menu extenso. A barra vertical pode ser chata, mas é inevitavelmente necessária nesses casos. Por isso não se amarre na altura de 460 pixels quando se quer trabalhar uma primeira página com muitos destaques, fotos e chamadas
indispensáveis a um portal de notícias.
Espero que tenham gostado das abordagens desse primeiro artigo e que sejam úteis para você.. :)
No próximo irei apresentar questões de metáfora e navegação.
Existem certos pecados que ainda são cometidos por muitos sites de pequeno e até mesmo de grande porte. Na grande maioria são pequenos deslizes que quando esquecidos podem representar grandes perdas. Acompanhe nesse artigo uma seleção de apenas 10 dos muitos pecados dos webdesigners.
1) Não troque a cor azul dos textos linkados. Pesquisas mostram que os links são menos eficientes quando se troca a cor padrão. O seu visitante simplesmente clicará menos sobre ele. O mesmo ocorre para links sem o sublinhado.
2) Não use página de entrada ou boas-vindas. É comum encontrar sites que colocam uma primeira página contendo apenas a logomarca da empresa, uma mensagem de boas vindas e um link com o texto "ENTRAR". Evite isso. Quer saber porque? Veja nas estatísticas do seu site a quantidade de pessoas que simplesmente não clica no link "ENTRAR" e acaba abandonando o site. Você vai se assustar.
3) Não utilize textos muito longos com fontes do tamanho 1. Muitos dos visitantes do seu site não vão ler o texto por dois motivos: o primeiro é porque não vão nem perceber que ele esta lá. O segundo é que se torna bastante incômodo ler textos com fontes muito pequenas.
4) Não valorize mais o design do que o conteúdo. A maioria das pessoas quando visita um site está em busca de algum tipo de informação. O design de um site deve funcionar como uma ferramenta para facilitar o acesso e a compreensão da informação. Tudo bem que a primeira impressão é a que fica mas a frustração de não encontrar com facilidade o que se procura destrói qualquer boa impressão.
5) Não use menu utilizando JAVA Applet. Java normalmente é um recurso que demora para carregar, consome recursos até o ponto de travar algumas máquinas menos potentes. É muito comum encontrar sites que utilizam recursos JAVA, Flash, DHTML na parte mais importante que é o MENU de opções.
6) Não esqueça que a maioria das pessoas acessa Internet via Modem. Muitas produtoras de site trabalham com links de alta velocidade e os profissionais acabam esquecendo que a maioria das pessoas ainda acessam a Internet através de modens que não conseguem transferir mais de 3,3kb por segundo.
7) Não complique a navegação. Você tem poucos segundos para convencer o seu visitante a continuar visitando o site. Deixe as opções de navegação na cara do visitante. Se o site possui muitas páginas coloque uma busca interna de páginas por palavra-chave. As pessoas além de acessarem via modem também pagam PULSOS telefônicos durante o acesso e não tem muito tempo a perder no labirinto de html's do seu site.
8) Não comprometa a qualidade do seu site pela tentação de vender anúncios. Encher o site de banners animados atrapalha a visualização da informação e cansa a vista do Internauta. O resultado é que o visitante vai embora rapidamente, não volta mais para o seu site e as dezenas de banners que você colocou no site não serão clicadas e conseqüentemente seus anunciantes ficarão insatisfeitos
9) Não use banners do tipo "ANUNCIE AQUI!". Banners desse tipo causam a impressão de que o site está louco por dinheiro e que ninguém visita aquele site. Um site bem visitado não precisa usar desses artifícios para almejar anunciantes. Os anunciantes vão até você, certos da qualidade do seu site.
10) Não faça do seu site um festival de cores. Encontre a harmonia entre a sua marca e as cores utilizadas no site. Cuidado com a escolha das cores dos textos para que não torne a leitura desagradável.
Fazer:
1. Reserve tempo para a revisão de texto no seu site. Erros de português são comuns ( eu mesmo deixo passar alguns erros ), ninguém tem obrigação de ser o "expert" na língua portuguesa, mas erros tipográficos e gramaticais não são algo bom para o seu site ou seu negócio. Peça para outra pessoa revisar cuidadosamente seu texto antes de publicar.
2. Torne a estrutura de suas informações clara ao dar a elementos similares o mesmo design e a elementos importantes mais peso visual
( usando tamanho, espaço ou cor ). Isso permite que seus leitores entendam seu conteúdo só no olhar e acelera o processo de encontrar o que eles querem.
Não fazer:
1. Colocar todo o texto em letras maiúsculas. Dessa forma fica mais difícil de ler do que letras iniciando em caixa alta indo para caixa baixa. Além disso, parece que você está "berrando" sua mensagem, o que pode parecer grosso.
2. Definir mais do que algumas palavras em itálico. Principalmente quando a fonte for em tamanho 10 ou 1. O navegador simplesmente inclina a fonte para obter o efeito de itálico, sem suavização de serrilhado, resultado a quase ilegibilidade especialmente para grandes quantidades de texto em tamanhos pequenos.
3. Utilizar texto todo em maiúsculas, negrito e itálico. Três coisas erradas não fazem uma coisa certa, trata-se de um exagero.
4. Definir o tamanho da fonte em -2 ou menor. Embora possa parecer arrumado em seu computador, será ilegível para a maioria dos computadores Macintosh ou até mesmo em uma máquina que rode Windows com sua fonte definida para um tamanho menor.
Fazer:
1. Mantenha todos os arquivos do seu site os menores possíveis em KB para possibilitar carregamento rápido da página. Downloads rápidos são cruciais para uma experiência bem sucedida do usuário. Se sua página demorar, o usuário poderá ficar irritado e irão navegar nos seus concorrentes.
2. Projete seu site para a resolução 800 x 600 ( ao menos que seu público use resoluções maiores ). Sabemos que a maioria dos usuários utilizam a resolução 800 x 600 para a navegação. Quando você projeta um site para resoluções maiores, você corre o risco de não ter a página visualizada corretamente para um grande número de internautas.
3. Coloque suas mensagens mais importantes ( Quem você é, o que sua empresa faz, lançamento de produtos, etc ) no primeiro espaço de tela ( os 400 pixels superiores da página ). A maioria dos usuários entendem do que se trata o site na primeira impressão, sem dedicar algum tempo para a navegação à procura de mais informações.
4. Limite o comprimento de suas páginas para dois ou três espaços de tela. Páginas muito compridas provoca cansaço de leitura, uma difícil paginação e demoram para carregar por completo. É melhor quebrar longos fluxos de texto em algumas páginas separadas e fazer links entre elas.
Não fazer:
1. Projetar especificamente para um navegador ou plataforma. Não force seus usuários a ter que baixar o navegador tal, a plataforma x, o plugin XYZ para visualizar seu site.
2. Usar muitas animações, especialmente em páginas com conteúdo que você quer que as pessoas leiam. Embora as animações sejam eficazes para atrair atenção, os usuários as consideram irritantes e acham que elas atrapalham quando eles estão tentando ler o texto na página. Até mesmo uma animação de loop pode ser irritante para algumas pessoas. Uma página inteira de imagens piscando e girando é um desastre.
3. Não use avisos "em construção". Em particular, não faça páginas "em construção" que aparecem depois que um usuário clica no link. Se seu site ou seção não estiver pronto, simplesmente não o publique. Embora seja possível que você pretenda mostrar que tem informações que estarão disponíveis em breve, os avisos "em construção" dão a aparência de que você não está preparado. Fornecer links que vão a lugar nenhum é uma perda de tempo e desperdício de paciência de seus visitantes.
As cores influenciam psicologicamente os seres humanos de várias maneiras, e são mais ligadas à emoção do que propriamente à forma. Se várias figuras coloridas forem mostradas a um grupo de pessoas, essas pessoas se lembrarão mais facilmente das cores do que das formas dessas figuras.
Quando escolhemos uma cor para elaborarmos nossos trabalhos, sejam trabalhos de design, ilustração, anúncios ou qualquer outro tipo de trabalho visual, devemos ter em mente que estamos lidando com um elemento de estímulo imediato, e que essa cor escolhida provocará diversas reações em seus observadores, reações essas que podem ser positivas ou negativas, dependendo da sua utilização.
Por isso, é extremamente importante estarmos atentos à psicologia das cores e seus significados, para melhor aplicarmos essas cores em nossos trabalhos. É imprescindível que qualquer pessoa que trabalhe com comunicação conheça as terias básicas da cor, para saber como estas se complementam e interagem umas com as outras.
É realmente muito interessante, verificar como a psicologia das cores são utilizadas atualmente, principalmente pelas grandes empresas. Marcas conhecidas mundialmente, fazem uso constante deste conhecimento para chamar a atenção, ou simplesmente, vender mais seus produtos.
Empresas como a Coca-Cola, que utiliza o vermelho na maior parte de seus produtos, remetendo ao calor, mas este calor sendo "quebrado" pelo frescor que representam as bolhas d'àgua desenhadas nas latas. Também o caso do Mc'Donalds, com as cores amarelo e vermelho. O amarelo forte é usado para gerar ansiedade, o vermelho para dar fome e os dois juntos, presente em grande quantidade dentro das lanchonetes desta empresa, estimulam seus clientes a comerem em demasia e rapidamente, pois a presença destas cores geram um certo desconforto se visualizadas por muito tempo.
Abaixo, um resumo com o significado de algumas cores:
- Branco:
Sugere pureza. Cria uma impressão de vazio e de infinito. Evoca frescor e limpeza, principalmente quando combinado com o azul.
Ex: Ordem, simplicidade, luz, paz, higiene, casamento, hospital, neve, harmonia.
- Preto:
Silêncio. Morte. Quando brilhante, confere nobreza, distinção e elegância. Cor preponderantemente masculina.
Ex: Noite, nobreza, pessimismo, tristeza, dor.
- Cinza:
É a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão e da ausência de energia. Quanto mais sombrio, mais conota desânimo, monotonia.
Ex: Chuva, máquinas, seriedade, velhice, desânimo, sabedoria.
- Vermelho:
Significa força, virilidade, masculinidade, dinamismo. É uma cor exaltante e até enervante. Impõe-se sem discrição. É uma cor essencialmente quente, transbordante de vida e de agitação.
Ex: Cereja, morango, sangue, desejo, sexo, agressividade, fogo, fome, perigo, guerra, força, energia, fúria, dinamismo, paixão.
- Laranja:
Transborda irradiação e expansão. É acolhedor, quente, íntimo.
Ex: Outono, pôr-do-sol, festa, comida, movimento.
- Amarelo:
É uma cor luminosa e muito forte para atrair a atenção, seja sozinho ou em conjunto com outras cores. É feliz, vibrante, vivo.
Ex: Luz, angústia, esperança, atenção.
- Verde:
Cor universal da natureza. Tem frescor, harmonia e equilíbrio. Cor calma, que não se dirige para nenhuma direção nem encerra algum elemento de alegria, tristeza ou paixão. O verde mais amarelado sugere uma força ativa, um aspecto ensolarado. O verde, seja em tons mais claros ou escuros, é sempre indiferente e calmo.
Ex: Floresta, natureza, bem estar, tranqüilidade, juventude, umidade, saúde, tapete de jogos.
- Azul:
Cor profunda, calma. Preferida por adultos, marca uma certa maturidade. Quando sombrio, o azul chama ao infinito. Mais claro, provoca uma sensação de frescura e higiene, principalmente quando na presença de branco.
Ex: Frio, céu, mar, tranqüilidade, paz, infinito, meditação, credibilidade.
- Roxo:
Equivale a um pensamento meditativo e místico, mistério. Assim como o preto, remete a nobreza e poder.
Ex: Sonho, mistério, egoísmo, nobreza, fantasia, profundidade, doença.
- Marrom:
Emana a impressão de algo maciço, denso, compacto. Sugere segurança e solidez.
Ex: Terra, outono, chocolate.
- Rosa:
É de pouca vitalidade e sugere feminilidade e afeição. É uma cor íntima, de doçura melosa e romântica.
Ex: Feminilidade, delicadeza.
Fonte: www.grito.com.br
Muita gente tem me procurado para saber qual a melhor escola para aprender webdesign, e apesar de parecer complicado, a resposta é muito simples. Basta procurar uma escola que ofereça bons professores, uma infra-estrutura adequada, organização, bom conteúdo, enfim, todos os "bons" possíveis.
Simples, não acha? Se sua resposta foi afirmativa...errou! Com certeza, se você analisar a minha resposta, descobrirá que ela não te levou a lugar algum, isso por causa da pergunta, que envolve muitas questões as quais discutiremos aqui.
Primeiramente, você deve saber o que uma escola de webdesign deve ter como conteúdo.
Não vá achando que ela deve ensinar como programar em JavaScript, ActionScript, ASP, utilizar Dreamweaver, Flash, etc., pois antes de se "especializar" em webdesign você deve saber "Design". É bom que você saiba que programação e design são duas áreas distintas, portanto, não é exigência que uma escola de webdesign ofereça na grade curricular por exemplo, cursos de ASP, já que existem diversas outras disciplinas mais importantes para colocar no lugar dessa.
Isso porque o Design, propriamente dito, não tem nada a ver com computadores, tanto que essa atividade iniciou-se numa época em que nem se pensava neles. Um computador é apenas uma ferramenta, e nada adianta escolher uma escola que te ensine a usar os softwares gráficos sem avisa-lo que um website é um veículo de comunicação, e que para lidar com comunicação não basta ser bom de micro, é preciso saber explicar o "porque" você está colocando aquele bonequinho pulando na tela, quais os efeitos que aquilo causa no internauta, como anda o nível de usabilidade do seu site, etc.
Agora complicou tudo não é? Afinal, o que é Design? Essa palavra de origem alemã significa "PROJETO", e era utilizada antigamente para denominar o "planejamento" de uma obra de arte. Mais para frente, ao final do século XIX o estouro da revolução aumentou consideravelmente o número de produtos industrializados, o que despertou a necessidade de projeta-los para melhorar a qualidade. Surgia então a profissão "Industrial Design" (Projeto Industrial).
A partir daí o interesse por projetar todas as coisas foi fundamental para o crescimento dos campos de atuação do Designer. Hoje temos Designers de Produto, Designers de Moda, Designers de Interfaces, Designers Gráficos, etc... O importante agora é que você saiba que todos estes são designers, e se preocupam em "projetar para alcançar determinado objetivo".
Quanto ao webdesigner, há quem diga que ele é um Designer de Interfaces, outros que é uma área independente. Eu prefiro acreditar que o webdesign faz parte do Design Gráfico, já que o webdesigner também tem como matéria prima "um objetivo" a ser resolvido numa "composição gráfica organizada, estruturada e direcionada" que gerará um produto (impresso ou digital). O webdesigner é, portanto, um Designer Gráfico especializado em projetar sites para Internet, pois para construir um bom site é preciso ter noções estéticas, funcionais, ergonômicas, psicológicas e até mercadológicas de uma composição gráfica.
Você precisa estudar no mínimo tipografia, design, metodologia de projeto, composição, história da arte, criação, metodologia da pesquisa, estética, ergonomia, semiótica, produção gráfica, computação gráfica, desenho, ilustração, fotografia, psicologia e até marketing.
Em relação ao domínio das tecnologias, isso dependerá muito do seu cargo na empresa. Existem designers que apenas fazem o projeto do website no papel, com fluxograma, layout, definição de cores e tipos para que os operadores de micro, programadores, ilustradores, fotógrafos e redatores o façam seguindo o projeto, outros fazem todo este projeto e ainda tem que produzir, e outros apenas produzem. A verdade é que você precisa sim conhecer os recursos que tem a mão para fazer um bom site, mas conhecer os recursos e não saber aplica-los pode levar seu projeto à ruína.
Para ter uma boa formação procure uma escola que ofereça boa "base teórica" sobre design, que ensine a desenvolver, com o que, e principalmente o "porque" você está desenvolvendo. Não vá direto às escolas que prometem apenas te ensinar, por exemplo, a usar o Flash. Escolha uma que te diga como usa-lo, quando, porque e para que.
Você pode usar como referência para escolha da escola as disciplinas citadas acima, pois se você aplica-las aos seus websites, com certeza desenvolverá designs funcionais e com conceito. Agora, pode ser praticamente impossível encontrar todas essas disciplinas num único lugar, sendo talvez necessário além do curso de design gráfico, cursos de especialização.
Para fazer a escolha certa pesquise, procure, compare e critique. Dê preferência às que possuem na grade curricular cursos de tipografia, composição, história da arte e design (além das disciplinas de webdesign) e tente assistir a uma aula grátis para analisar se os professores ensinam a pescar ou se dão o peixe.
Fonte: www.grito.com.br
Para ter uma idéia do poder das CSS no controle do layout de uma página web, recomendo visitar o Zen-Garden.
Lá você faz o download de uma marcação HTML padrão que não pode ser alterada e cria a sua Folha de Estilo em Cascata para definir seu próprio layout, cores, imagens, enfim toda a parte visual aplicável na codificaçao padrão fornecida.
Visite o site e navegue por alguns trabalhos em exposição. Garanto que você vai se surpreender!
A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento.
HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página e CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado à apresentação.
A adoção desta técnica resulta em múltiplas vantagens e benefícios que não são conseguidos quando se utiliza o conceito largamente empregado para construção de web sites, baseado no uso de tabelas e de atributos de estilização dentro das tags HTML.
Projetar um site navegável tanto em monitor de 1280x1024 quanto em uma telinha de 320x240 de um PDA, com utilização da mesma marcação é fantástico e possível. Basta projetar de acordo com as Web Standards entregando às CSS a missão de acomodar o conteúdo na tela!
Algumas restrições (à época deste escrito - 2003) ainda freiam o uso pleno geral e irrestrito de CSS na Web. As restrições são por conta da incapacidade de alguns browsers em dar suporte total às CSS. Com o passar do tempo a tendência é a de cair em desuso total os browsers antigos que não suportam ou mesmo suportam parcialmente CSS. Soma-se a favor das CSS a normatização que o W3C vem implementando sobre o assunto e o desejo dos fabricantes de se adequar àquelas normas. É uma questão de tempo!
CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como:
Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.
Web Standards pode ser traduzido como Padrões Web e tem por objetivo a criação de uma Web universal.
Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
Encontrei hoje a ferramenta mais divertida que vi flutuando pela internet nos últimos tempos! O site Websites as Graphs analisa uma página e gera uma imagem de acordo com a estrutura dos objetos que compõe seu código.
/* INICIO * CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h1,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;}
address,th{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
img,fieldset{border:none;}
ol,ul{list-style:none; font-size:inherit;}
a{text-decoration:none;}
div{position:relative;}
/* FIM * CSS Reset */
Segue aqui um recado não só para meus amigos webdesigners, mas para toda a população que se interesse em tornar o espaço que vivemos mais acessível.
O CONADE está encabeçando uma campanha a favor da acessibilidade. Veja aqui o vídeo que apresenta essa campanha.
Aproveitando a oportunidade, segue a dica para que nós webdesigner possamos fazer a nossa parte. É uma ferramenta para verificar como o seu site fica mediante algumas limitações visuais, como catarata, protanopia, tritanopia entre outros. Segue o link
Agora bola pra frente, vamos fazer nossa parte, e passar a idéia adiante.
Para muita gente que está començando em sua caminhada rumo ao domínio de CSS, existem certas dificuldades que são quase que uma regra, detalhes como diferenças entre navegadores, versões de navegadores, resolução entre outros.
Segue abaixo, algumas dicas para ajudar no aprendizado, que podem amenizar muitas dores de cabeça. Vamos lá.
1. Trabalhando com margin, padding e border.
Esses 3 itens, costumam dar um pouco de trabalho no início, pelo fato de suas medidas serem somadas ao tamanho do elemento que ele faz parte. Exemplo: Se você estiver trabalhando com um elemento com 100×100px, e adicionar uma borda de 5px, ele passará a ter 110×110px, já que você adicionou 5px de cada lado. Para evitar isso, apenas lembre de sempre que adicionar um desses 3 elementos, considerar sua dimensão.
2.Resetar css
Com essa grande tormenta que nos segue, que é a luta IE x FF, muitos códigos costumam ser renderizados com diferenças gritantes. Algo que da muita diferença, são os tamanhos de paddings e a margins. Para evitar isso, a dica é resetar o css, ou seja, deixar tudo com um tamanho padrão. Segue o código para fazer isso.
*{margin:0;padding:0;}
address,th{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
img,fieldset{border:none;}
ol,ul{list-style:none; font-size:inherit;}
a{text-decoration:none;}
div{position:relative;}
3. Resumindo o código
Uma outra coisa que ajuda, é uma maneira de declarar valores, com o mínimo de código possível. Alguns seletores como background, font, border, possuem várias caracteristicas, que poder ser reduzidas em uma linha só. Veja o exemplo.
div{
background-color:red;
background-image:url(bg.gif);
background-repeat:repeat-x;
background-position:50px 10px;
}
Esse código pode ser substituido por
div{background:red url(bg.jpg) repeat-x 50px 10px;}
4.Trabalhando com Float.
Essa faz parte de 90% das dúvidas que surgem para quem está começando.
Geralmente, o uso de float, deve ser acompanhado de um
. Veja a seguir um exemplo de um dos problemas gerados pela falta desse detalhe.
Código sem float: Aqui temos algumas divs para exemplificar, mas tudo sem os floats.
Código com float: Quando colocamos o float, a div que contem o rodapé, fica escondida, pois como as duas colunas que ficam acima estão flutuando, o height delas não é considerado, e por isso não empurra o conteúdo para baixo.
Solução com br clear: Agora o exemplo com o problema resolvido, colocando um
antes da div do rodapé, fazendo com que ele seja “empurrado” para baixo.
Existe uma outra solução mais “webstandards” que meu amigo Fechine costuma utilizar, que é usar um
com o clear dentro do css, segue o exemplo:
clear {clear:both}
O resultado é o mesmo, porem, mais semanticamente correto.
5. Evite o uso desnecessário de divs:
Muitos elementos usando no html, podem ser formatados com css sem a necessidade de criar uma div para “prende-la”. Por exemplo, em um menu, onde geralmente usamos listas (
6. Evitar os benditos
:
Isso geralmente acontesse com quem trabalha no modo design dos editores de código, você sai dando “enters “, e vão aparencendo dezenas de
vazios, eseguidos.
Para deixar o código mais limpo, e facilitar a formatação, uma dica é colocar um margin-bottom no parágrafo, assim, sempre terá um espaçamento entre parágrafos, evitando o uso desnecessário de