« HE:labs
HE:labs

Abandone o seu mockup e abrace o seu markup

Postado por Aluisio Azevedo em 07/01/2013

Uma das decisões que tomei há alguns meses atrás foi deixar um pouco de lado o Photoshop, e começar a aprimorar as minhas habilidades no design de interfaces usando HTML, CSS e JS.

Isto tem me ajudado muito, conforme vou melhorando minhas skills de desenvolvimento front-end, mais coisas eu consigo criar diretamente no browser, sem me preocupar com a criação de layouts em softwares de edição de imagens, aumentando assim a minha produtividade.

Com o HTML5 e CSS3 isso tem se tornado cada vez mais relevante para a evolução dos meus projetos, me fazendo quebrar paradigmas no meu processo de trabalho, melhorando a qualidade final das interfaces projetadas e a experiência de uso dos produtos.

Trabalhando com aplicações web aqui na HE:labs, que envolvem conteúdo e dados dinâmicos, diferentes larguras de tela para diferentes tipos de dispositivos, entre outras características, nós vamos percebendo que este processo de trabalho, utilizando mockups para validação e aprovação de um layout, acaba sendo muito desgastante e pouco agrega ao processo de descoberta que é o desenvolvimento de softwares. Quando inserimos o editor de texto como uma ferramenta de criação, temos resultados mais rápidos e palpáveis com uma visualização das telas direto no browser, conseguimos um ganho significativo junto a equipe e stakeholders para o resultado final dos projetos.

Por que abandonar o seu mockup

Os softwares de edição de imagens são utilizados para criação de material impresso, e naturalmente isso foi sendo inserido nos projetos de design para a web, porém eles não tem a mesma capacidade de simular e renderizar uma interface como o próprio browser. Listo aqui alguns motivos para começar a desconsiderar o photoshop como a melhor opção:

  • muito tempo é perdido para se desenhar elementos de uma interface no photoshop, uma tabela por exemplo, pode ser feita rapidamente com algumas linhas de código;
  • o trabalho feito no photoshop, precisa ser refeito depois na etapa do front-end;
  • mudanças que aparentam serem pequenas, muitas vezes demoram bastante para se mudar em todas as layers de um .psd;
  • a tentação dos detalhes é maior, você se pega perdendo muito tempo em elementos que muitas vezes não necessitam o desperdicio de tempo naquele momento do projeto;
  • se você está projetando uma experiência de uso, você precisa ver e sentir ela acontecendo. Com uma imagem estática no photoshop, você não tem está percepção completa;
  • os softwares de edição de imagens ainda são muito caros, ainda mais aqui no Brasil.

Por que abraçar o markup:

Hoje eu me divirto muito mais na hora de começar a desenvolver uma interface, abrindo o meu editor de textos. Eu não tenho muita motivação para abrir o photoshop e começar a esboçar uma imagem que não vai representar a realidade do meu produto final. Alguns motivos são:

  • o tempo de trabalho é melhor aproveitado, depois que você tem o domínio das ferramentas as coisas fluem muito bem;
  • não vai haver diferenças entre o que você está projetando e o que os usuários vão ver na tela de seus dispositivos;
  • você consegue testar os problemas entre os diferentes browsers conforme vai desenvolvendo, corrigindo e criando alternativas conforme problemas vão aparecendo;
  • você consegue ter uma visão melhor dos breakpoints quando se está projetando interfaces responsivas;
  • o seu trabalho é feito somente uma vez, depois disso com alguns ajustes e melhorias no código, tudo está pronto para ser reutilizado em produção;

Este é um processo que nós tentamos seguir na HE:labs, e que tem se mostrado eficiente para nossos projetos. Não quer dizer que tenha que ser considerado um padrão para todos, cada caso é um caso e cada projeto também.

Acreditamos que o importante é sempre experimentar coisas novas que tragam a evolução para a internet, para os nossos clientes e para os usuários dos produtos que desenvolvemos.

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!