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.
Comentários
Included file post/disqus_thread.html not found in _includes directory