Feeds:
Posts
Comentários

Posts Tagged ‘CSS’

Montar um layout pode trazer muita dor de cabeça, que pode se agravar caso não sejam conhecidos alguns “macetes”. No caso estou falando do CSS, uma grande ferramenta!

Utilizar qualquer ferramenta que monte o seu layout de forma automática deve ser dispensado, eles geram código desnecessário (lixo) e complicam a estrutura. O pensamento lógico utilizando CSS vai levar em conta os blocos de conteúdo. São regiões do layout, como por exemplo: logotipo, cabeçalho, navegação, menu, rodapé.

Nesta fase do projeto, quando layout, ou seja, a parte visual, já está definida, entraremos em uma esfera bastante técnica onde é preciso ter um ótimo conhecimento principalmente de HTML, que é a base de qualquer produção voltada para internet. Recomenda-se conhecer a fundo esta “linguagem”.

Ok, mais eu tenho o Dreaweaver e ele faz tudo pra mim, e eu ainda consigo ver o site como fica no browser!
 Certo, mas no dia-a-dia você fatalmente perceberá que nem sempre haverá um Dreamweaver disponível para você brincar com o editor WYSWYG (What you see is what you get) e precisará trabalhar diretamente no código. Além disso também é fácil perceber que este editor não resolve todas os problemas durante a montagem do layout, e o pior: Ele pode encher o seu código de tags perdidas, sujeira mesmo, que o deixará uma bagunça e com uma cara nada profissional.

Os posts anteriores (Web Design Metodologia I a III) falavam sobre ações conceituais e comportamentais inerentes ao projeto, e diante do cliente. Concluídas estas fases, o que resta é montar o quebra-cabeça e esta etapa você terá que cumprir por si mesmo. Tudo bem que o cliente não saberá se você fez um “xunxo” ou outro, mas estamos tentando manter um nível profissional aqui, certo?

Um web-site bem construído segue uma série de especificações e seguí-las é uma questão de bom senso. Primeiro porque seu site estará dentro dos padrões mais consistentes e utilizados na internet e também porque você criará, desde o início, o hábito de trabalhar com conceitos como palavras-chave, meta tags, robot tags, web semântica, web standards e SEO.

Devido a esta demanda técnica, iremos abandonar um pouco a metodologia em si e falaremos sobre como, passo a passo, pensar em um web-site bem construído. Fiquem atentos!

[Update 2013]

A preguiça me tirou deste projeto… não só a minha preguiça, mas a do público! Não fazer no mínimo uma pesquisa sobre os temas e termos levantados nos posts e perguntar de uma maneira “faça para mim” me incomoda. Curiosidade é o que move o mundo pessoal, estudar não tem nada haver com “instituição de ensino”, busquem conhecimento!

Read Full Post »

Reuni todo o material, queimei fosfato, pensei, pensei. Fiz um rascunho de como deveriam ser as telas, posições de menus, animações. Nem sabia que não precisava de computador! O cliente assinou a proposta, o contrato. Tudo certo! Agora é a hora, apertem os cintos e vamos lá!

Não sei vocês, mas eu já tentei criar layout de web-site até no Corel… É vício de quem trabalhou em gráfica com arte-final no início de carreira. Logo que você descobre que o Photoshop é a melhor opção, fica mais tranquilo manipular as idéias para construir uma interface.

O web-site não passa disso, uma interface. O usuário quer a informação que está no site e esta informação precisa estar organizada e acessível. É a interface que “conversa” com o nosso amigo usuário. É realmente um desafio prever como esta comunicação acontecerá e se será bem sucedida.

Quando eu crio um layout para web-site, costumo perguntar a amigos, parentes, e qualquer um que esteja por perto o que a pessoa está entendendo, vendo. Por incrível que pareça, são os menos familiarizados que podem nos passar dicas preciosas sobre as falhas do layout.

Desenhando o Layout

Entenda-se por “layout” uma representação gráfica, não funcional, do projeto, ou seja, é uma imagem estática. É esta peça gráfica que você apresentará ao cliente para aprovação.

Abra o Photoshop, um novo arquivo. Costumo trabalhar com as medidas de 750px de largura por 500px de altura (update fev/2013: a realidade agora é que cada dispositivo segue um medida e os monitores aumentaram de tamanho! baseio meus layouts para internet na medida de 900px de área útil), com resolução de 72dpi. Não adianta trabalhar com resolução maior, pois esta é a resolução que o monitor utiliza.

Estas especificações foram as que escolhi para iniciar um projeto, são escolhas pessoais, nada impede de você formar seu padrão. A largura do layout neste caso é importante para evitarmos o “scrooling“, que faz aparecer uma barra de rolagem horizontal… péssimo para quem está navegando.

Apesar de monitores com resolução de 1024px por 768px serem comuns hoje em dia, eu ainda teimo em projetar sites para o padrão 800px por 600px. É melhor pensar sempre em quem possue os recursos mais limitados de acesso (que são a grande maioria) do que os poucos privilegiados.

Procure trabalhar com as imagens com a melhor qualidade possível, para dar uma aparência profissional ao layout. Caso você tenha reduzido uma foto, utilize o “unsharp mask” no menu de efeitos para dar maior nitidez.

Coisas a pensar durante a execução do layout

Pense em continuidade do layout e posicionamento do bloco na tela. Recomendo que você pense em centralizar o layout e neste caso é bom pensar em como ele vai continuar para os dois lados.

Algo polêmico, mas impossível de deixar de lado. Sites totalmente em Flash perdem muito em velocidade, acessibilidade e o pior: O Google é cego, ou seja, não lê informações em arquivos SWF. Nada contra utilizar o Flash, mas utilizá-lo com cautela e em poucas partes do web-site é a melhor opção.

É importante também pensar em livrar-se do método de utilizar tabelas para posicionar os itens. Estude HTML e CSS, o conceito de “Tableless” nos permite um controle muito maior sobre usabilidade, acessibilidade, renderização em navegadores diferentes, outras plataformas (como palms e celulares), versões para impressão, etc. O código fica mais leve, os buscadores entendem melhor o conteúdo, isso sem falar na facilidade de fazer alterações no web-site.

Apresentando o layout

Produza uma ou duas variações para a peça gráfica. Apresentar muitas opções pode deixar o cliente confuso e a aprovação indefinida. Ao mostrar os layouts procure explicar de forma fácil e acessível, evitando termos técnicos, sobre quais foram os conceitos utilizados para gerá-lo. Fale sobre suas pesquisas, sobre os concorrentes… tente embasar o projeto para evitar comentários levianos.

Se você tiver um laptop, leve-o e apresente a imagem ao cliente. É importante também levar o layout em um pen-drive, que permita a você mostrar o layout em um monitor da empresa. Aproveite esta chance para explicar que podem haver variações de cores de uma máquina para outra.

O ideal é levar o layout impresso em papel e anotar nesta imagem todas as alterações, itens duvidosos, etc. Caso não hajam alterações, peça para que o cliente assine o papel aprovando a imagem. Esta folha pode servir como um documento atestando a aprovação.

Em caso de alterações serem necessárias, proceda da mesma forma ao reapresentar o layout. É comum também o cliente não aprovar o projeto de primeira. Ele quer conversar com sócios, funcionários, com a mãe e o pai dele e se bobear, irá parar alguém na rua para emitir uma opinião sobre o layout. Dê este tempo ao cliente e se ele não entrar em contato, cobre uma resposta após 4 ou 5 dias.

Durante a reunião de aprovação, não deixe de comentar que o próximo passo é a montagem e é preciso inserir o conteúdo (textos, imagens e fotos). Peça ao cliente para preparar este material pois isto influênciará no prazo de entrega do projeto finalizado.

Na parte IV iremos falar sobre como dar vida ao seu layout discutindo técnicas simples, como o check-list para evitar erros e refações.

Read Full Post »