Um caso para codificar seus wireframes

Trabalhar como designer dia após dia pode ser trabalhoso. Felizmente, o campo se expandiu e, assim, o processo se tornou mais simples. Muitas ferramentas e recursos gratuitos estão disponíveis.

Os wireframes trazem elegância para projetar modelos. Eles são a estrutura básica de um site, com cores e aprimoramentos removidos.

Eles são usados ​​para visualizar conceitos de design apenas com os fundamentos básicos e podem fornecer uma perspectiva útil em qualquer projeto.

A maioria dos wireframes é criada em conjuntos de software como o Adobe Photoshop e o Fireworks, mas alguns sites permitem que você crie imagens de wireframe diretamente no navegador.

Neste post, vamos codificar uma imagem básica de wireframe em HTML e CSS e ver como ela pode beneficiar o processo criativo.

Porque se importar?

Por que gastar tempo esboçando a estrutura de um site? Em alguns casos, pode ser desnecessário, mas pode ajudar quando você está preso em uma rotina ou lutando para ver o quadro geral.

Pode beneficiar designers e clientes. No trabalho remunerado, você é responsável por agradar o cliente. Mostrar a estrutura básica de seu website prestes a ser projetado pode proporcionar alívio aos clientes e um senso de controle sobre todo o processo.

Mas se o design é muito básico ou tem uma estrutura simples, criar um wireframe pode não valer a pena; zombar da coisa toda no Photoshop, com botões e cores, pode ser igualmente rápido.

Decidir quais medidas tomar requer tempo e pensamento crítico. Afinal, um wireframe é apenas uma ferramenta. É subestimado por muitos web designers, mas surpreendentemente útil uma vez entendido.

Prototipagem de Wireframes no Código

Por anos, o software de design da Adobe tem sido o principal conjunto de criação de wireframe, mas a web passou por mudanças substanciais e ainda está evoluindo.

O aumento dos padrões de codificação e aumento de Documentação HTML5 são grandes passos em direção a uma rede comum. Agora, codificar um wireframe básico em HTML e CSS não é mais trabalho do que atacar o trabalho no Fireworks.

Com wireframes, você pode atacar um projeto de frente a partir de vários ângulos. Você pode até testar a compatibilidade com as técnicas e navegadores CSS2 e CSS3. As coisas não precisam ser complexas no começo; um wireframe simplesmente serve como uma base sólida para começar a codificação.

O compartilhamento de conteúdo também se torna mais fácil com um wireframe. Você pode hospedar todos os arquivos que você precisa em qualquer servidor web, e você pode configurar um diretório de demonstração e encaminhar atualizações ao vivo para clientes e supervisores de seu projeto. Fazer alterações, como ajustes rápidos nas margens e larguras no CSS do documento, também é simples.

Padronize o código para o longo prazo

Os wireframes economizam tempo no processo de desenvolvimento. Se os estilos CSS para seus elementos básicos já estão escritos, então o resto é apenas preenchimento (preenchimento importante, lembre-se).

Comece corretamente, com o tipo de documento HTML e a estrutura de diretórios corretos. Tipos de documentos não são muito diferentes uns dos outros. Você pode ler sobre eles no Página de especificações do W3C . Eles não importam muito no antigo modelo da World Wide Web, mas o HTML5 é completo e permite que seu site cresça.

Você precisa testar a compatibilidade em tantos sistemas operacionais e navegadores quanto possível, e o estágio de prototipagem de wireframe é o momento perfeito para fazer isso, porque você já está focado em organizar o layout.

Este também é um bom momento para trabalhar em um modelo compatível com dispositivos móveis. À medida que a estrutura muda, você deve ser capaz de incorporar idéias e manipular o código do documento. O desenvolvimento se torna mais fácil porque há menos código para confundir seus estilos móveis e personalizados.

Começando a Estrutura do Wireframe do Documento

A melhor maneira de começar é com uma lousa em branco, porque lhe dá mais criatividade. Os elementos óbvios para incluir no código (como em qualquer outro documento da web) são html , head e body .

Este é o esqueleto. Você precisará de mais alguns elementos para que o wireframe fique bem. o div (ou divisão) é notável. Esse é o elemento usado para classificar determinadas áreas da página, como o logotipo ou a caixa de pesquisa.

Divs são os blocos de construção de protótipos de wireframe HTML5. Qualquer coisa e tudo pode ser envolvido em um div e o estilo é muito fácil quando você aplica classes e IDs aos elementos. Muito do seu código principal será dividido por divs porque eles são os elementos básicos do bloco.

Com as novas especificações do HTML5, um elemento chamado nav foi introduzido. Isso pode ser combinado com uma lista não ordenada e algumas propriedades CSS para criar e definir a área de navegação principal do seu site. Abaixo está um exemplo simples de como você poderia estruturar nav :

Trabalhando com header e footer Elementos

Você notará no exemplo acima que eu usei um div com um ID de header para separar minha navegação de título. Isso é perfeitamente aceitável e nada está errado com o código acima. HTML5 nos dá outras opções, no entanto.

o header O elemento nas novas especificações de HTML5 permite que você defina melhor sua estrutura, o que é útil principalmente para rastreadores de páginas da Web e leitores de tela, que separam uma parte de "cabeçalho" do conteúdo. Isso não deve fazer nenhuma diferença para seus usuários, e mantém seu código configurado e mostra que você realmente entende o que está falando.

Outro elemento interessante que foi adicionado é footer . Mesma ideia: use este elemento no lugar de um div para separar o conteúdo do seu rodapé. Geralmente, os rodapés estão fora do caminho e contêm informações básicas sobre o site ou empresa.

Você pode adicionar links ao rodapé e usar um nav elemento para definir alguns deles, mas isso seria imprudente. o nav element especifica a área de navegação principal, portanto, adicioná-la ao rodapé ou em qualquer outro local seria redundante.

Neste cenário, usando o footer elemento e separar os links de navegação como uma lista não ordenada é melhor. Você poderia usar um rodapé com colunas, com várias colunas de links. Estes podem ser separados div elementos exibidos um ao lado do outro, todos envolvidos no rodapé principal.

Técnicas CSS para Styling Wireframes

Se você entende HTML e já trabalhou com a web por algum tempo, provavelmente conhece algum CSS básico. Muitos dos novos recursos do CSS3 são para adicionar cantos arredondados e sombras ao texto.

Não quero sugerir que o estilo CSS não seja importante, mas o layout e o posicionamento central é o que faz a estrutura do seu site. Com CSS, você define largura, margem e espaçamento. Estas são as propriedades básicas da maioria dos elementos da web e são o último passo na criação de um wireframe realmente excelente.

Se você está intrigado com as novas propriedades e seletores do CSS3, então confira o Webdesigner Depot's. coleção de aprimoramentos . Ele contém guias em toda a web sobre os novos recursos do CSS3.

Adicionando clearfix para estilos

Se você não estiver familiarizado com a técnica clearfix, alguma pesquisa . É uma classe popular que você adicionaria a um div recipiente que contém dois ou mais blocos flutuantes.

Se você nunca ouviu falar de clearfix, pode parecer confuso, mas o conceito é simples. Pense em um contêiner div que tem dois div No interior, ambos flutuavam à esquerda. Por padrão, a maioria dos navegadores processaria as duas colunas tocando-se diretamente umas nas outras e as div expandiria a página para caber em qualquer coluna que fosse mais longa.

Adicionando um clearfix classe para o seu contêiner, ambas as colunas vão se encaixar feliz dentro do contêiner div , que se expande o suficiente para acomodar os dois elementos. Isso resolve muitos problemas na prototipagem de wireframe, particularmente com layouts de duas colunas (ou seja, o conteúdo principal e a barra lateral). Esse método também funcionará para layouts de três e até quatro colunas, cada coluna precisaria caber em um espaço menor.

Mostrando CSS: mantendo os estilos externos

O que fazer com a colocação de CSS é outra decisão importante. Web designers profissionais e desenvolvedores simplesmente sugerem manter um independente .css arquivo, separado do seu código HTML.

Dessa forma, a estrutura está em um documento e o layout e o design estão em outro. Ambos são igualmente importantes para os wireframes, mas eles executam tarefas distintas.

Todo o seu código HTML é estritamente estrutural. Você pode colocar links dentro de parágrafos dentro do container div s dentro de outros recipientes, e assim por diante. O estilo controla o tamanho, espaçamento, margens e letras de parágrafos e links, e o wireframe define a largura dos contêineres e seu posicionamento na página.

Elementos de página fornecem exemplos adicionais. Você codificaria o div contêineres para conteúdo e barras laterais, mas você poderia estilizá-los e posicioná-los usando CSS. Para um designer, entender como separar conteúdo e estilo é a chave para dominar os wireframes.

Implementar espaços reservados dinâmicos do elemento da página

Efeitos extravagantes de jQuery e elementos da web com a aparência de Ajax parecem estar na moda. As tendências crescem e quase todos os sites populares apresentam algum conteúdo dinâmico. É importante considerar. Se eles complementam o design, por que não incluir blocos em seu wireframe?

Desenvolver um sistema de back-end inteiro para uma caixa de login dinâmica pode não ser prático, mas observar as bibliotecas JavaScript de que você precisará é um ótimo começo. Você também pode codificar estilos que estruturam essa caixa e definir as configurações para mais tarde, quando você adiciona cores e detalhes.

Esses temas podem ser aplicados em vários elementos da interface. Você pode usar sugestões de pesquisa semelhantes às do Google ou deixar anotações em seu código para implementar uma caixa de notícias dinâmicas ou feeds do Twitter, o que tornaria sua estrutura de ar dinâmica e forneceria uma maneira elegante de representar um objeto de estado sólido no lugar de conteúdo dinâmico . Durante a fase de prototipagem, isso é tudo de que você precisa.

Erros comuns de desenvolvimento de wireframe

É difícil dar errado quando você está apenas começando a codificar a estrutura básica de um site, mas tenha em mente alguns detalhes.

Lembre-se de que o propósito de um wireframe é apresentar um framework sem muitos detalhes. É útil durante os estágios iniciais do planejamento dos elementos da página; Você pode se aprofundar em seu site e ver a grande figura.

Mantenha as coisas simples e em ordem. Negligenciar isso é um erro comum e prejudicará sua capacidade de cumprir prazos. Um wireframe não precisa estar perto de ser perfeito; é suposto ser um esboço do site. Mesmo um wireframe estritamente HTML e CSS deve consistir apenas em contornos de elemento de página.

Evite desvios, concentrando-se em seus principais objetivos. Lembre-se por que você começou o processo com um wireframe em primeiro lugar!

Os wireframes também podem resolver muitos problemas que afetam o processo de design. Codificar um protótipo em HTML e CSS é a melhor maneira de obter uma vantagem inicial em um projeto da Web, grande ou pequeno. É uma maneira simples e eficiente de dar forma às suas ideias.

UMA tonelada de artigos na web se relacionam com o processo de wireframing. Eu cobri o lado de codificação e desenvolvimento das coisas, mas para aprender mais sobre wireframes, continue lendo. As dicas de design estão por aí; Você apenas tem que encontrá-los!

Este post foi escrito exclusivamente para Webdesigner Depot por Jake Rocheleau , um web designer apaixonado e entusiasta de mídia social. Jake adora ler e escrever sobre as últimas tendências da Internet digital e redes na comunidade de design. Confira ele no Twitter @jakerocheleau para mais sobre o seu trabalho.

Quais são suas experiências com o processo de wireframe? Você trabalha em código primeiro ou em algum outro tipo de software? O que você acha que são alguns benefícios para a prototipagem no código primeiro?