Design para programadores

codigo-css

Como já se sabe, em geral programadores não se dão muito bem com design, layouts e toda a “perfumaria” que envolve a criação de um site / sistema. Boa parte das pessoas confundem isto, e quando dizemos “esse trabalho é de um web designer, não meu”, acham que estamos tentando escapar do serviço. Em empresas bem conceituadas ou no mínimo bem organizadas, essas camadas de desenvolvimento são feitas em separado, sendo cada profissional responsável apenas pela sua área.

 

Mas, como nem tudo (e na vida de um pragramador, quase nada) é um mar de rosas, temos muitas empresas que misturam isto. Inclusive desenvolvedores em início de carreira ou até mesmo que estão abrindo seu próprio negócio acabam por misturar tudo, e se responsabilizam tanto pela parte funcional quanto pela parte “bonitinha” da aplicação. Claro, isso pode acarretar em uma série de falhas de layout, falta de sintonia entre cores, e tudo mais que não estamos acostumados a fazer. Por isso acho importante compartilhar com todos algumas dicas para facilitar o desenvolvimento de nossas aplicações (e essas dicas também servem para designers e desenvolvedores front-end, mesmo que tenham facilidade com o tipo de trabalho que nós, programadores, em geral temos dificuldade).

 

Vamos lá então: começamos pela base de tudo. É importantíssimo termos um layout centralizado, bem modelado e alinhado. Para isso indico o 960 GS, um sistema de grids onde é tudo organizado e alinhado sobre blocos que podem conter de uma a X colunas, conforme sua necessidade. Não me apegarei a detalhes aqui, pois o funcionamento do Grid é barbada de ser aprendido, mas se for necessário (ou seja, se o pessoal se interessar) eu crio um tutorialzinho rápido de como utilizá-lo.

 

E agora vamos ao que interessa: Interface. Como deixar sua aplicação mais bonita e agradável aos olhos do cliente? Seguem os links com dicas de Design para programadores:

 

Bootstrap
Um excelente framework CSS / HTML para deixar suas aplicações mais elegantes e fáceis de desenvolver. Há uma série de componentes prontos para você utilizar, como menus, botões, eventos javascript e uma porção de outras funcionalidades. Este é o primeiro que recomendo, e com certeza uma das que mais indico aos amigos.

 

Zurb Foundation
Faz o mesmo papel do Bootstrap, porém o layout (na minha opinião) fica mais profissional. Muito fácil de agregar ao seus códigos, assim como o próprio Bootstrap.

 

Ui Cloud
Este site disponibiliza uma coleção de diversos elementos de interface para o usuário, todos categorizados para facilitar a localização do que você procura. O site informa que alguns elementos encontrados estão sobre licença de uso, mas tem muita coisa totalmente livre lá, se você não quer se preocupar com nada. Vale a pena dar uma espiada.

 

Font Awesome
Uma grande coleção de ícones vetoriais para enriquecer a interface de sua aplicação. Completamente free e totalmente útil, além de super fácil de integrar ao seu projeto!

 

FreePik
Milhares de imagens e vetores gratuítos para você não perder tempo trabalhando no Photoshop ou Fireworks. A grande maioria das imagens é totalmente livre. Chega de colocar foto tirada por uma TekPix, a câmera mais vendida do .. ah, deixa pra lá. Chega de tirar fotos com câmeras de celular ou com péssima qualidade para colocar na sua aplicação. Pegue fotos em excelente qualidade na FreePik e deixe seu sistema / site muito mais profissional e agradável de se ver.

Exemplo de imagem da FreePik

Exemplo de imagem da FreePik

 

LiveTools
Excelente site para fazer seus formulários, botões, ícones e etc… Ferramenta totalmente online, gera HTML e CSS na hora para você. Só cuidado, pois se utilizar esta ferramenta seus códigos podem ficar um pouco bagunçados, pois o gerador de CSS não é muito otimizado, mas compensa pela produtividade.

 

Collor
Que tal ter uma ferramenta online para criar qualquer tipo de cor? Aproveite o Collor, e divirta-se com os hexadecimais gerados 🙂

 

Bom, acredito que com essa coleção de sites e ferramentas aí você, meu amigo programador, vai ficar bem melhor assessorado com relação à web design. Vale dar uma olhada em tutoriais nos próprios sites acima para saber como implantar da melhor forma possível as ferramentas e frameworks disponíveis, mas algumas horinhas lendo manuais em nada se compara ao tempo economizado em desenvolvimento no final das contas.

 

Faça bom proveito, e se lhe foi útil, compartilhe com seus amigos e conhecidos. Não vamos reter conhecimento, e sim passá-lo adiante!

 


Publicado em Desenvolvimento, Miscelâneas, Tecnologia
Volte Sempre!
Meus artigos te ajudaram de alguma forma e você não sabe como me agradecer? Que tal me pagar uma Coca-Cola bem gelada?

Sobre o autor

Me chamo Ricardo Brusch, sou programador e desenvolvedor de sistemas para internet. Também sou aspirante a escritor, e você pode ler alguns de meus contos malucos em contos.ricardobrusch.com.br.
Parceiros





Publicidade