Ferramentas para a criação de layouts | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Ferramentas para a criação de layouts

Publicado na categoria Artigos com 28.147 visualizações e 30 comentários

Fala pessoas! Quanto tempo não? Nem me fale!

Estou envolvido em diversos projetos até o final de setembro, e o tempo está realmente curto para a criação de vídeo aulas e até mesmo para escrever alguma coisa para você ler.

Mas vou tentar atender ao máximo de pessoas com um único artigo, voltado a dúvidas recorrentes dos usuários do site. Constantemente eu recebo e-mails de pessoas que, ao ter o primeiro contato com “web”, se apaixonam. E assim como todo amor, após o “se apaixonar”, vem o sentimento de “estou perdido e o que eu faço?”. Em matéria “web” posso até aconselhar; em matéria de “coração”, já é outra história!

O último, quem me enviou foi o Sandro Berto, e assim como vários outros, normalmente, as mensagens estão mais ou menos assim:

“André, tudo bem? Sou estudante de Análise de Sistemas/Redes/Jornalismo/ Publicidade  e Propaganda/Desenvolvimento de Softwares/Sistemas para internet, e tive um pequeno contato com webdesign e me apaixonei!

Estudamos um pouco de HTML e CSS, demos uma passada em PHP e agora estou totalmente perdido, pois quero aprender a montar layouts e não sei quais ferramentas utilizar. Aprendi de maneira bem rápida Dreamweaver, Fireworks, Photoshop e Flash, até mexi com WordPress/Joomla e agora eu não sei o que fazer para criar layouts.

Poderia dizer qual ferramenta eu devo usar para criar layouts?”.

Quais ferramentas devo aprender? - André Buzzo Webdesign

Se eu dissesse para você que a ferramenta é o menos importante, você acreditaria? Então pode acreditar. Não importa se você vai usar o Gimp, o Fireworks ou o Photoshop; você precisa mesmo são de outras ferramentas, que listo abaixo, em grau de importância, sob MEU PONTO DE VISTA ok?

Teoria das Cores

Teoria das Cores - André Buzzo Webdesign

Basicamente, você irá trabalhar com um leque grande cores. Não necessariamente em um único projeto, e sim, em diversos.

Ter uma boa percepção de cores e suas melhores combinações se fazem cruciais para o desenvolvimento de um bom layout ou design. Não podemos sobrecarregar o usuário final de informações que as cores fornecem e sim, tornar agradável a permanência do mesmo dentro de nosso site.

Ter um bom discernimento sobre quais cores e seus mais variados tons poderão/deverão ser utilizados, em conjunto com uma identidade visual já pronta de seu cliente, tornam o seu trabalho um pouco mais fácil; agradar o seu cliente, uma tarefa mais agradável e menos penosa; pensar no usuário final é o grande lance para um layout matador.

Veja algumas informações sobre o Significado das Cores

Formas Geométricas

Formas Geométricas André Buzzo Webdesign

Assim como as cores, as formas geométricas também passam “emoções” à quem as observa.

Um círculo, ou elipse, por exemplo, pode dar a impressão de que algo é infinito. Assim como um quadrado, algo que seja conservador. Não saber o que as formas passam para quem as vê, às vezes complica um pouco o trabalho ou, na pior das hipóteses, afasta seu usuário daquilo que você tanto gostaria que ele apreciasse.

A boa utilização de espaços em branco, para dar “respiro” aos olhos do usuário, são primordiais, e um dos erros mais comumente encontrados em layouts. Você precisa aprender que aquele espaço que sobrou no seu layout, pode sim, ser interessante ficar em branco.

Controle sua vontade de preencher todo o layout com informações; sejam elas por meio de formas, cores, vetores ou desenhos. Espaço em branco é seu amigo. E não inimigo.

Algumas informações podem ser obtidas nos seguintes endereços:

http://entreclics.blogspot.com.br/2010/03/o-significado-das-figuras-geometricas.html
http://entreclics.blogspot.com.br/2012/05/significado-de-formas-geometricas.html
http://abrasil-designgrafico.blogspot.com.br/2010/02/significado-das-formas-geometricas.html

Usabilidade

Usabilidade - André Buzzo Webdesign

Esse é o ponto mais importante na hora de criar um projeto web. Não basta criarmos um layout pensado em cores, em formas, em apresentação, se não pensarmos em quem vai utilizá-lo. Nada é mais importante do que o usuário final. Não é a opinião do seu contratante que deve pesar mais na hora do desenvolvimento, muito menos seu gosto pessoal; na verdade, deve-se pensar em como seu usuário final vai interagir com seu produto. Aqui não é o visual que vai mandar mais. E sim, se ele conseguiu o não chegar onde queria!

Costumo dizer que tenho “bronca de publicitários”, pois eles sabem muito, mas muito bem, em como VENDER produtos/serviços/ideias. Mas quando se trata de site, o trabalho vai um pouco além do visual. Ele vai de encontro à maneira como uma pessoa vai navegar, e ainda, não existe navegação automática com os olhos. Não basta apenas olhar; o internauta precisa encontrar a informação que deseja. E para isso, a beleza não é fator primordial. Primordial é ser funcional.

Trabalhar em conjunto com um profissional de marketing é sempre excelente, mas saber opinar e dizer que “meu amigo, isso não deveria ser feito assim”, e ter argumentos para expor, e ele estar aberto a esse tipo de comentário, é algo praticamente utópico, mas não é impossível quando conversamos de profissional para profissional!

Respeito sim, os profissionais de marketing, mas os usuários seriam mais felizes se os mesmos apenas nos fornecessem a ideia visual e deixasse o trabalho do site para um profissional especializado em webdesign. Que isso fique bem claro. Trabalhos profissionais envolvendo profissionais.

Acessibilidade

Acessibilidade - André Buzzo Webdesign

No conjunto de uma obra, a acessibilidade é tão ou mais importante que a usabilidade em si.

Sua base prega que um site deve ser acessível por qualquer pessoa, com qualquer tipo de dificuldade, seja motora, seja visual ou auditiva, utilizando-se qualquer aparelho/dispositivo, se formos mais além. Essas pessoas não devem, em hipótese nenhuma, serem privadas de acessar um conteúdo pelo simples fato do “profissional” não ter pensado nelas antes de criar o layout.

Daí eu posso dizer que provém minha bronca com o Flash; ele é um modo de “segregar” usuários.

Precisamos pensar, na hora da criação de um layout, onde cada coisa será alocada e se aquela área escolhida é realmente a melhor no caso de um acesso por um leitor de tela. O botão “página inicial” está facilmente colocado em uma posição onde, independentemente do dispositivo utilizado para acessar o site, facilita o acesso de todos? Se eu uso o mouse, ou o “tab” do teclado, ou meu smartphone touchscreen eu consigo chegar onde quero? Seu javascript der um “pau” no navegador, eu consigo acessar as informações?

Nada melhor do que estar na pele da pessoa: baixe um leitor de tela, acesse seu site preferido, feche os olhos e tente navegar para ver se consegue. Ou se é tarefa fácil. E não pense você que pessoas com deficiências estão exclusas da internet. Você terá uma grande surpresa. E infelizmente, ela não será nem um pouco agradável.

Eu costumo dizer que nosso trabalho como webdesigners vai além da “página inicial” ou do layout matador que pretendemos oferecer ao nosso cliente. Precisamos pensar em como as pessoas vão utilizá-los, e para isso, não há ferramenta melhor do que um bom planejamento e uma boa base de conhecimento teórico para realizar a tarefa.

Noções de Design

Noções de Design  - André Buzzo Webdesign

Existem diversas regras de design que se fazem necessárias na hora da criação de um layout. E elas não são poucas, e tampouco, devem ser deixadas de lado.

Regras como Proximidade, Alinhamento, dentre outras, são fundamentais para mostrar que você é profissional e sabe o que está fazendo. Então, não basta você ter um programa excelente de edição de imagens para criar seus projetos se você não sabe a mensagem que está passando ao seu usuário.

Combinação de fontes, seus tamanhos e estilos, fazem parte de um bom design. Saber que a fonte serifada é melhor do que uma sem serifa é fácil de aplicar em um projeto web. Podemos quebrar a regra e utilizar uma fonte com serifa em uma página web? Sim, mas temos que, antes de quebrar uma regra, conhecê-la a fundo!

O layout proposto ficou harmonioso com a fonte escolhida? Se sim, por quê? Se não, por quê também? O tamanho e grafia “conversam” com os outros elementos desse projeto? A cor escolhida, realmente, passa mensagem que deve ser transmitida?

E o espaço em branco, está sendo respeitado?

Coloque-se no lugar do usuário: você aguentaria navegar em um site que oferece um fundo verde-limão onde a fonte está com cor branca, para FACILITAR a leitura?

CSS

CSS - André Buzzo Webdesign

Toda a estruturação “estética” de um site DEVE passar pelo CSS. Sem ele, seu site pode ficar muito pesado.

E ainda, se você não tem nenhum programa legal para editar imagens, saiba que, dentre as formas mais básicas, você poderia utilizar apenas o CSS para criar o design do seu site.

Existem suas limitações? Sim, é claro que existem. Assim como existem limitações também para os editores de imagens hoje disponíveis no mercado.

Porém, na era do CSS3, nós podemos utilizar degrades, podemos utilizar lineares, radiais, podemos criar formas geométricas, até gráficos conseguimos utilizando a programação. Precisamos apenas aprender e entender a lógica da programação para tirarmos 100% de proveito do que nos é oferecido.

Assim como eu, você pode não ser um exímio desenhista. No meu caso, sou péssimo mesmo. Não consigo usar um compasso para fazer um círculo perfeito. Você não sabe o que é um compasso? Veja nesse link: http://pt.wikipedia.org/wiki/Compasso_(geometria)

Criatividade

Esteja Criativo! - André Buzzo Webdesign

Claro que é um quesito indispensável e sem mais comentários. Acho que ele já se define só por seu nome. A única dificuldade é que não podemos “cobrar” a criatividade de ninguém. Uns a possuem, outros não. Simples assim.

Conclusão

Dessa maneira, não importa qual ferramenta você deseja um “direcionamento”. Ela nada poderá fazer se você não souber, antecipadamente, como a utilizar.

Abrir um novo documento, saber onde está sua paleta de cores, como criar um “quadrado”, uma elipse, não significa nada. Você precisa saber qual mensagem deseja passar, utilizando-se das cores corretas, com as formas geométricas condizentes, bem dispostas no plano de trabalho, assessorando seu usuário a atingir seu objetivo, sem privá-lo da informação só porque você acha que ele é uma besta por insistir em usar o INTERNET EXPLORER é um desafio que muitos acham “simples” e que qualquer “profissional” (entenda-se “SOBRINHO!”) está apto a exercer.

E não é bem por aí. Nunca foi e nunca será. Reflita sobre isso. E durma com esse barulho, como diria meu amigo Edson Brunhara.

Voltar à página anterior!

  • Marcelo

    Cara, primeira vez que acesso seu site e gostei pra caramba. Vou acompanhar sempre as matérias, pois tu traz a informação de uma forma bem clara e fácil de entender. Parabéns pelo artigo, abraço.

    • Fala Marcelo!

      Seja sempre bem-vindo meu velho!

      Abraços!

  • WictorP2

    Adorei o artigo. Parabéns pelo projeto, e sucesso no futuro!

    • Olá WictorP2!

      Valeu pelas palavras meu velho!

      Abraços!

  • Acessando pela primeira vez e adorei seu post, parabéns cara poucas pessoas têm a disposição de dividir seus conhecimentos e aprendizados, lógico que ninguém é obrigado a ensinar ninguém de graça, mas seu post e o caminho das pedras e bem a frente, aproveitando hoje tenho um conhecimento relativo a programação mas ainda tenho dificuldades em criar layouts, por exemplo eu uso tanto o Fireworks cs3 e o cs6 e partes dos layouts que criei e os ícones fica sem foco de uma olhada nesse layout demo online em meu server http://www.jcimoveisbrasil.com/home_free.php, o que estaria errando na edição das imagens.

    • Fala Peter!

      Cara … seu html tá aparecendo todo bagunçado aqui pra mim … está certo isso?

  • jose elves

    meu caro amigo andre buzzo eu sou elves moro em itaquaquecetuba-sp estou tentando entrar no meu facebook inclusive ainda ontem consegui entrar mas hoje de manha tentei entrar e nao consigo assim como alguns amigos tambem estamos tentando entra e nao estao conseguindo e minha lan house so ganha um lucro com rede sociais assim como o face que e o mais utilizado mas o que estar acontecendo eu pensei que fosse no meu pc mas pelo jeito nao e nao der uma explicação por farvor espero uma resposta ou contato atraves do meu e.mail ou publicado na sua paxina um abraço:ELVES

    • Fala Elves!

      Não tenho ideia do que possa acontecer na sua lan house compadre!

      Abraços!

  • Flavio Neves

    Bacana demais o post, parabéns.
    Abraço.

  • João Augusto

    Fala André!

    Show de bola a matéria, e como mencionado pelo nosso amigo Vitor acima.
    Seria legal mesmo algo sobre Bootstrap, a galera tem comentado muito sobre esse Framework, eu ainda não conheço muito na prática, mais parece ser bem legal de trabalhar..

    Forte abraço cara…

    E parabéns pela matéria…

    • Fala João!

      Cara..vou ver o que posso fazer… tá corridão aqui e acho que o MX Cursos tá preparando algo a respeito!

      Abraços!

  • valquiria bastos

    Muito bom! Adorei a materia, boa como todas as outras, parabéns

  • Vitor Barbosa

    Um sugestão de conteúdo é uma introdução do Framework Twitter Bootstrap.
    Muita gente ainda tem um certo preconceito (ou tinha), mais o Bootstrap está ganhanho um espaço enorme. Grandes sites estão migrando para o Bootstrap.

    SoundCloud
    WHMCS
    Globo
    Joomla
    e etc……..

    • Vitor, agora eu te faço o convite!

      Tá afim de criar esse conteúdo? Se estiver, crie que eu publico aqui no site!

      Abraços!

  • Thiago

    Grande André,
    Perfeito para quem está no começo dos trabalhos!

  • Edimar

    Como sempre mandando nuito bem ehim Andre… Parabens meu querido!

    • Fala Edimar!

      Obrigado meu velho….valeu mesmo!

      Abraços!

  • Osvaldo

    Primeira vez que acessei seu site, você esta de parabéns pelo conteúdo,organização nota 1.0000, Sucesso. Abraço!

    • Fala Osvaldo!

      Obrigado pela visita e pelo comentário meu amigo! Seja sempre muito bem-vindo!

      Abraços!

  • fernando fernandes

    outro ótimo post como sempre
    como jacson disse, vc traz a informação de uma maneira clara pra galera

    • Ô Fernando!

      Obrigado pelo comentário meu velho! Valeu mesmo!

      Abraços!

  • Jacson Leite

    Você resumiu em um artigo todos os seus melhores artigos. Muito bom. Parabéns!

    • Fala Jacson!

      É mais ou menos isso aí!! rs

      Abraços!

  • Sandro

    Muito bom o artigo André, agora irei utilizar desses conceitos para o próximo projeto. Mas ainda fiquei com dúvidas, vamos lá. Entendo tudo de cores, formas geométricas, usabilidade, acessibilidade, noções de design, css e criatividade. Agora onde usar tudo isso? Quais os melhores programas/ferramentas para se criar esse layout?

    • Fala Sandro.

      Fico feliz por ter gostado do artigo meu velho. Em relação às ferramentas, elas podem ser o Fireworks ou o Gimp. São as que recomendo.

      Abraços!

  • Ogéris Mayer

    Parabéns por mais um artigo, fico show………………….vlw