Projetando no navegador usado para me assustar. Não porque parecesse difícil, mas porque eu achava que acabaria com um design feito de um monte de pequenas caixas, algo que era tão genérico e sem graça que acabaria refazendo no Photoshop.
Esse medo acabou por ser completamente injustificado. Não só meus projetos se tornaram mais focalizados, eu também os completei mais rapidamente e envolvi os clientes mais cedo no processo através de interação e discussão.
Design é design. Não importa se está sendo feito em um programa de software ou se está sendo escrito em código. Projetar no navegador não é mais difícil do que projetar no Photoshop. Como qualquer ferramenta, você precisa usá-la para aprendê-la e, eventualmente, dominá-la.
O design é um processo iterativo, que é dificultado ao trabalhar para os clientes. Às vezes é difícil para os clientes imaginar exatamente o que você está descrevendo; projetar no navegador pode envolvê-los em todo o processo, em vez de apenas na fase de design.
Essencialmente as fases de design e desenvolvimento estão se fundindo e se você é naturalmente bom em design e desenvolvimento de front-end, você levará para o design no navegador como um pato leva para a água.
Um dos principais benefícios do design no navegador é que podemos projetar com base em expectativas realistas. Às vezes, projetar em software pode criar problemas imprevistos para o desenvolvimento de front-end. Os elementos da interface do usuário podem ser desenhados, ou talvez eles simplesmente não façam sentido, é difícil explicar para um cliente por que você mudou alguma coisa, não porque eles não entenderão, mas porque você já o colocou no design e o fez aprovado. Projetar no navegador se presta à ideia de simplicidade.
Antes de pensar em projetar, preciso ter um plano. Só porque estou usando uma ferramenta diferente não significa que meu processo mude. Eu gosto de ter um plano bem sólido antes de começar a projetar e preciso saber o que estou projetando, por que estou projetando, para quem estou projetando, o histórico de clientes e qualquer serviço ou informação de produto que eu precise focar em.
Depois que eu determinar essas coisas, eu terei uma idéia melhor sobre o que o produto é ou o que o cliente faz, por quanto tempo eles estão fazendo, o que os diferencia de sua concorrência, quem é sua base de usuários e o que é primário e secundário os objetivos do site serão.
Eu pessoalmente gosto de ter documentação de tudo. Normalmente tenho documentação para o mapa do site, conteúdo, calls to action e arquitetura do site. Quando eu começar a projetar, eu devo ter uma estratégia clara para o design e todo o conteúdo deveria ter sido coletado.
Desenhar é fundamental se eu for projetar qualquer coisa no navegador. Eu posso explorar áreas de conteúdo com lápis e papel, obter feedback e rapidamente iterar na base do meu design.
Esboço baseado no plano que descrevi acima e me certifico de que tenho todas as áreas de conteúdo e apelos à ação definidos. Desenhar deve ser rápido, não gaste muito tempo aperfeiçoando nada. Deve ser sólido o suficiente para mostrar a um cliente, mas desleixado o suficiente para que você possa terminá-lo em menos de uma hora.
Em seguida, gosto de prototipar o site dos meus esboços em HTML e CSS. O protótipo é um monte de caixas cinza com texto e imagens para espaços reservados. As caixas cinzas funcionam como recipientes para conteúdo quando eu realmente começo a projetar. O maior benefício na criação de protótipos com código é que o cliente pode interagir com o protótipo e ver como a arquitetura do site funciona. Dessa forma, se algo estiver desativado ou precisar de refinamento, podemos manipulá-lo agora, e não no dia do lançamento.
Antes de começarmos a projetar, precisamos de algum tipo de estilo para basear nosso projeto. Precisamos determinar as cores e fontes que usaremos com possíveis texturas e padrões. É aqui que as peças de estilo entram em ação.
Telhas de estilo foram criados por Samantha Warren e eu tenho usado eles por um tempo agora. Eles ajudam os clientes a ver um guia de estilo inicial e muito simples que podemos usar para começar a projetar. Eu gosto de criar vários destes para ver qual o cliente prefere que eu possa reduzi-lo a um. Eu acho que estes também são muito importantes no processo de aprovação e ajudam a evitar a rejeição total.
Agora estamos prontos para começar a projetar. Se você está acostumado a projetar em um programa de software como o Photoshop ou o Sketch, isso não é muito diferente. Usando nosso arquivo prototype, começamos a adicionar conteúdo falso em nossa marcação. Neste ponto, sabemos exatamente o que está acontecendo em cada seção de conteúdo na marcação e a grade já foi definida, portanto, não deve demorar muito.
Agora vou começar estilos de camadas no meu conteúdo. Vou adicionar estilos base para cor, tipografia e layout. Quando os estilos básicos terminarem, vou me afastar e olhar para ele. Eu gosto de tela tiro certas partes do projeto para referência posterior.
Quando estou satisfeito com a camada base, gosto de fazer anotações sobre o que refinar. Com base nessas notas eu provavelmente usarei Photoshop ou Esboço para adicionar textura ou qualquer coisa com uma sensação tangível. O Photoshop e o Sketch são ótimas ferramentas para refinar os elementos complexos da interface do usuário rapidamente, para que eu salve qualquer coisa que possa ser difícil de codificar mais de uma vez
A razão pela qual eu faço isso é porque eu quero que meu codebase seja enxuto e limpo e quanto mais você codifica, comenta e apaga, mais desleixada e inchada fica sua base de código.
Se você tivesse que projetar no navegador a partir do zero a cada vez, as coisas podem parecer demoradas, mas se você começar de uma base personalizada, uma estrutura, poderá eliminar etapas repetitivas. Para começar, tenho uma versão personalizada de Initializr que eu uso com uma grade responsiva personalizada construída em Sass (http://sass-lang.com/). Usando uma estrutura personalizada me dá uma vantagem inicial para prototipagem e design.
Ter uma biblioteca de padrões comuns de interface do usuário também é uma ótima maneira de criar um protótipo rápido e torna o design no navegador mais eficiente. eu uso Texto Sublime para codificar e uma coisa que aprendi a aproveitar é o snippets personalizados que você pode criar. Eu adicionei várias variações de navegação, listas, barras laterais e outros elementos comuns à minha lista de trechos para que eu possa rapidamente colocá-los na minha marcação com uma ação simples. Eu também uso contas em Codepen e JSFiddle para salvar padrões. Dan Cederholm criou um ótimo tema WordPress para armazenar padrões comuns chamados Peras . Ele usa postagens para armazenar o código que você pode editar ao vivo no front-end para testar e visualizar as alterações.
Prática e aplicação prática irá torná-lo melhor em projetar no navegador. É provável que, se você fizer qualquer tipo de desenvolvimento de front-end, já tenha uma estrutura base para começar e já tenha alguns padrões comuns para usar.
Agora tudo o que você precisa fazer é começar a projetar no navegador e, eventualmente, você criará um fluxo de trabalho eficiente e que funcionará em seu processo. Com a prática, você só ficará mais rápido.