12 dicas matadoras para projetar no navegador
Como você maquete um site?
O fluxo de trabalho típico inicia no Photoshop e depois passa para HTML e CSS para imitar o PSD original da melhor maneira possível. No entanto, há uma tendência crescente no design da Web para descartar a etapa do Photoshop em favor da criação da composição inicial diretamente no navegador com o seu editor favorito. Tenho certeza de que agora sua cabeça está cheia de razões pelas quais essa abordagem limitaria seu design, mas na verdade há muito mais que você pode fazer no navegador do que imagina. Este artigo fornecerá as ferramentas e truques necessários para criar modelos brilhantes e de trabalho como sua primeira etapa no processo de design.
Explorar recursos de design
O argumento
Meagan Fisher, do 24ways.org, faz um argumento convincente para projetar no navegador. Embora eu não compartilhe seu desdém pelo Photoshop (eu amo o Photoshop mais do que qualquer outro software do planeta), concordo com alguns de seus outros pontos. Fisher argumenta que uma imagem estática não dá a verdadeira sensação de um site, como uma página ao vivo e que o design no navegador obriga você a se concentrar na organização do conteúdo antes do design, o que pode ajudar a garantir melhor acessibilidade e hierarquia apropriada de informações.
Usaremos o artigo de Fisher como uma prancha de mergulho para obter dicas sobre como se tornar um profissional na criação de maquetes fantásticas no navegador que estão quase prontas para serem usadas quando (e se) o cliente fornecer a luz verde.
Dica 1: inicie o básico e use uma grade
Como afirmei acima, incluir e organizar todo o conteúdo sem estilo permite criar um design que se adapte ao seu conteúdo e não vice-versa. O uso de uma estrutura baseada em grade pode reduzir radicalmente o tempo de desenvolvimento e ajuda a garantir que seu layout seja sólido.
Recursos:
Para obter mais informações sobre web design baseado em grade, consulte nosso artigo sobre estruturas CSS.
Dica 2: obtenha um bom editor
Se você estiver codificando sites manualmente, um editor da Web profissional é a base do seu fluxo de trabalho. Eu pessoalmente uso (e absolutamente amo) o Espresso da MacRabbit. Ele tem todos os pequenos recursos que eu quero, como trechos e preenchimento automático, além dos grandes recursos necessários para poder ver alterações ao vivo em uma visualização do navegador enquanto digito o código. Você deve procurar e encontrar o aplicativo que melhor se adapte às suas necessidades. Aqui está uma lista rápida de editores para você começar:
- Aptana: Mac, Windows Linux (de longe a minha opção gratuita favorita)
- IDE Komodo: Mac, Windows, Linux
- NetBeans: Mac, Windows, Linux
- Coda: Mac (uma alternativa digna de café expresso)
- Text Wrangler & BBEdit: Mac
Dica 3: Colocando uma sombra em um elemento
O Photoshop não é mais a única maneira de obter uma sombra decente na web. Muitos (mas não todos) os principais navegadores agora suportam CSS3 e, com esse suporte, vêm vários novos recursos para criar designs avançados. Um dos recursos mais úteis é o box-shadow, que permite adicionar sombras a determinados itens usando apenas CSS. O formato da sombra da caixa é sombra da caixa: 5px 5px 20px # 000000. Esses valores permitem ajustar a largura e o comprimento da sombra, bem como o raio e a cor do desfoque.
Recursos:
Confira o artigo do CSS.flepstudio sobre o efeito box-shadow para obter mais informações sobre como usar esse recurso.
Dica 4: sombreamento de texto
Se você deseja colocar uma sombra no texto, use a função sombra do texto, conforme demonstrado neste tutorial do Kremalicious. O formato para sombra de texto é sombra de texto: 1px 1px 1px # 000 . Os dois primeiros valores determinam o deslocamento da sombra (x e y, respectivamente), o terceiro valor determina o raio de desfoque e o valor final permite alterar a cor da sombra.
Esta função pode ser aplicada para criar mais do que apenas sombras. O tutorial acima mostra como usar sombra de texto para criar um efeito de tipografia, um efeito de brilho e até mesmo um efeito de texto ardente.
Dica 5: cantos arredondados
Cantos arredondados são outro recurso que finalmente foi adotado no CSS moderno. Você pode realizar cantos arredondados CSS no Safari e no Firefox usando a função raio da borda . Basta definir o -moz-border-radius e / ou -webkit-border-radius com um valor especificado em pixels para ajustar a redondeza da borda em um determinado item.
Recursos:
Para mais tutoriais sobre cantos arredondados, consulte o resumo das 25 técnicas de cantos arredondados do CSS Juice com CSS.
Dica 6: Criando um esquema de cores
O Photoshop fornece uma ótima maneira de visualizar e experimentar cores diferentes, mas também há uma infinidade de recursos gratuitos de esquemas de cores na web. Na minha opinião, o melhor deles é o Adobe Kuler. O Kuler não apenas fornece a melhor interface para criar belos esquemas de cores em tempo real, mas também fornece acesso a uma enorme biblioteca de esquemas de cores pesquisáveis e pré-fabricados. Deseja dar uma aparência de outono ao seu site? Basta digitar "fall" e você terá mais de 2.600 esquemas para escolher. O Kuler facilita a criação de um incrível esquema de cores que você pode inserir diretamente no seu CSS (que, por sua vez, facilita a alteração e a experimentação em tempo real).
Recursos:
Para obter ferramentas de cores mais elegantes, consulte nosso artigo sobre 25 ferramentas impressionantes para escolher um esquema de cores de sites.
Dica 7: Gradientes de texto
Se você for astuto, poderá aplicar um gradiente ao texto ativo no navegador. Que estranho vodu é esse que você pergunta? Navegue até o WebDesignerWall para conferir o tutorial sobre o assunto. Essencialmente, você coloca um espaço ao redor do texto ao qual deseja aplicar o gradiente e, em seguida, define o plano de fundo do espaço como um PNG repetido do gradiente. Obviamente, para criar o PNG, você precisará usar um editor de imagens (sim, você sabia que teria que recorrer ao bom e velho Photoshop de vez em quando).
Dica 8: Usando RGBA para cores da tela
O CSS3 implementa um novo recurso chamado RGBA ("A" significa alfa). Usando o valor "A", você pode definir a opacidade de um preenchimento. Esse recurso útil não apenas permite criar esquemas de cores com facilidade usando uma única cor com valores alfa diferentes, mas também permite criar itens transparentes que revelam a arte por trás deles, semelhante à redução da opacidade de uma camada no Photoshop.
Recursos:
Confira o artigo da Oncemade sobre O caminho certo para declarar cores RGBA.
Dica 9: Conheça suas fontes da Web
Não caia na armadilha de usar as mesmas duas fontes em todos os sites criados. Mude as coisas aproveitando toda a variedade de fontes seguras da Web. Typetester é uma ótima ferramenta para fazer exatamente isso. Permite visualizar blocos de texto em várias fontes e configurações (tamanho, alinhamento, rastreamento etc.) diretamente no seu navegador. A melhor parte é que, quando você encontrar as configurações desejadas, o Typetester exportará o CSS para você.
Dica 10: obtenha fontes ainda melhores
Criar texto como uma imagem no Photoshop oferece a liberdade de usar qualquer fonte que você desejar, sem se preocupar com a compatibilidade. Infelizmente, esse método resulta em texto que não é selecionável ou pesquisável. No entanto, não é tão difícil contornar esse problema. Atualmente, existem várias soluções para a instalação de fontes personalizadas com texto ao vivo e selecionável em seu site usando o comando @ font-face.
Recursos:
Obtenha fontes incríveis no seu site em minutos com o nosso tutorial TypeKit passo a passo.
Dica 11: o estoque é seu amigo
Geralmente, principalmente nos modelos iniciais, é necessário um botão rápido, ícone ou outro gráfico que não seja necessariamente necessário construir do zero. Sites de arte como o GraphicRiver estão repletos de elementos da Web prontos para serem inseridos em um site, muitos sem a necessidade de alterações no Photoshop! Mesmo que você possa construir os itens facilmente em uma hora, gastar um dinheirinho em uma grande obra de arte e deixá-la pronta para ser entregue em 2 a 3 minutos é bastante atraente.
Dica 12: use as ferramentas de teste do navegador
Sei que muitos de vocês simplesmente não podem esperar para escrever um comentário contundente sobre como várias das técnicas acima (sombras, cantos arredondados etc.) funcionam apenas em determinados navegadores e, portanto, são inutilizáveis. É exatamente por isso que sempre procuro apresentar os dois lados de uma discussão. As pessoas a favor do desenvolvimento no navegador apresentam essas técnicas como evidência de que você pode realizar muito fora do Photoshop, mas talvez estejam um pouco ansiosas demais para descartar o fato de que vários navegadores receberão uma experiência drasticamente diferente devido à falta de suporte.
A questão é que, não importa como você desenvolva um site, você sempre deve saber exatamente como os principais navegadores renderizarão seu site. Em seguida, você pode tomar uma decisão informada sobre quais navegadores, se houver, são aceitáveis para deixar para trás. Para realizar esse feito, consulte o Adobe Browserlab. Esse utilitário incrivelmente útil permite visualizar um site em vários navegadores e sistemas operacionais em tempo real. A única desvantagem é que você pode realmente perceber o quão ruim seus sites são renderizados em determinados navegadores, o que inevitavelmente leva a horas de xingamentos e arranhões na cabeça.
Conclusão
Bem, o que você acha? Você está pronto para atravessar e começar a criar composições armadas apenas com um editor de texto e um navegador? Ou você é como eu, confiante de que um médico legista terá que retirar uma caixa de software do Photoshop de seus dedos frios e mortos antes que você o solte? Obviamente, não há absolutos aqui. Poucos designers profissionais criam modelos sem qualquer ajuda de um editor de imagens. A pergunta passa a ser, no rascunho inicial, onde você acha que a maior parte do seu tempo é melhor gasta? Adoraríamos saber. Sinta-se livre para usar os comentários para se posicionar e defender sua posição até a morte. Quanto a mim, esta conclusão parece estar ficando cada vez mais macabra, então é melhor eu parar por aqui.
