Refinando e padronizando seu processo de design e desenvolvimento Divi

Publicados: 2017-06-02

Bem-vindo à parte 4 de 5 de nossa série Organizando e assumindo o controle de seu negócio Divi Web Design. Nesta série, estamos explorando várias táticas, ferramentas e estratégias que o ajudarão a superar as lutas diárias que todos nós enfrentamos como Divi Web Designers. Da otimização de suas rotinas diárias, à criação de sistemas e processos, para fornecer a melhor experiência de web design para seus clientes; estamos fornecendo itens e etapas acionáveis que você pode implementar imediatamente com o objetivo de ajudá-lo a assumir o controle de seu negócio Divi Web Design, seja você um freelancer solo, uma pequena agência ou uma equipe remota.

Criar um processo padronizado para projetar e desenvolver um site Divi é crucial para sua produtividade e bem-estar como web designer. Embora um projeto de design de site raramente saia exatamente como planejado, se você tiver um processo e um caminho a seguir, isso economizará muito tempo e o manterá no caminho certo para cumprir os prazos quando os projetos crescerem.

Refinando e padronizando seu processo de design e desenvolvimento Divi

Ontem mencionamos um post anterior sobre a criação de uma página de introdução para ajudar a preparar seus clientes. Nesse post, falamos sobre como apresentar seu processo para seus novos clientes. Esta é a forma como apresento meu processo aos meus clientes:

LAYOUT E DESIGN - Uma parte grande e demorada do design de um site está no estágio de planejamento e layout do processo. Vou criar o mapa do site (hierarquia de página / menu) do site para aprovação primeiro, depois projetarei a página inicial e uma subpágina (ou mais, mediante solicitação) para aprovação.
DESENVOLVIMENTO - Assim que o layout e design do site forem aprovados, irei prosseguir com o design de todo o site, páginas e adicionarei todas as funcionalidades e plug-ins. Vamos garantir que seu site tenha uma ótima aparência e funcione bem em todos os dispositivos e navegadores da web antes de passar para a etapa final.
EDIÇÕES E REVISÕES - Assim que o site estiver pronto para a revisão final, você poderá revisar cada página e podemos fazer edições detalhadas até que o site seja completamente revisado. Pedimos que você analise TODAS as páginas para se certificar de que toda a ortografia, gramática, endereços e informações estão corretas antes de ir ao ar.

Agora vocês, como colegas designers da Web, sabem que há mais para projetar e desenvolver um site do que um simples processo de 3 etapas. Na verdade, o meu é mais um processo de 20 etapas, mas descobri que se sobrecarregar meus clientes com tudo o que está envolvido, eles muitas vezes vão pensar demais quando se trata de fornecer conteúdo. Aqui está o que o meu processo Divi Web Design / Development realmente se parece com um pouco mais de detalhes:

Criar página e layout de navegação para aprovação
Cabeçalho e rodapé projetados
Página inicial projetada
Subpágina (s) projetada (s)
Enviar ao cliente para aprovação
Revisões no cabeçalho, rodapé, página inicial e subpágina
Depois de aprovado, crie as páginas restantes
Crie modelos para seções padronizadas do site e páginas recorrentes como galerias, projetos, produtos, etc.
Implementar todas as integrações para inscrições em listas de e-mail, redes sociais, widgets, etc.
Crie e teste todos os formulários de contato
Ajuste e otimize o design para uso móvel e responsivo
Insira as configurações de SEO necessárias
Verifique a gramática e o conteúdo do site
Verificação entre navegadores e correções de bugs
Enviar para revisão final
Faça todas as revisões finais do cliente
Crie um painel personalizado do cliente e um vídeo de treinamento (se necessário)
Exclua plug-ins, imagens e ferramentas desnecessárias
Faça backup do site e salve localmente
Local de lançamento

Este processo é frequentemente dividido em ainda mais detalhes, mas esta é uma estrutura básica de tudo o que está envolvido em cada uma das minhas construções, seja um site de 5 páginas em estilo brochura ou um site de 50 páginas com eventos, comércio eletrônico, etc. tudo isso como uma lista de verificação e tem sido uma boa prática para mim ter certeza de não ter esquecido nada antes de lançar um site. Criar uma lista de verificação como esta e colocar uma linha do tempo junto com ela pode ser uma maneira muito eficiente de garantir que o processo de design / desenvolvimento esteja alinhado com os prazos do projeto.

Ok, agora que você tem uma ideia de como eu organizei meu processo de design / desenvolvimento interno, vamos entrar em mais detalhes sobre como você pode otimizar SEUS processos de design web Divi.

1) Criação de um processo de design padrão

Uma das melhores perguntas e discussões recorrentes que vejo nos grupos do Divi no Facebook é algo como "Como você projeta seu site Divi?" Você faz um mock up no Photoshop ou no Illustrator? Você cria um wireframe básico para o cliente aprovar? Você simplesmente mergulha no Divi e o faz ao vivo?

É claro que não existe uma maneira certa ou errada de fazer isso. Descobri que não importa como você escolha seu processo de design, ele precisa fazer três coisas:

Precisa funcionar para você ou sua equipe
Precisa funcionar para o seu cliente
Precisa economizar seu tempo

Quando eu começo um novo projeto, eu tendo a criar um esboço muito grosseiro no papel e mergulho direto no Divi para projetar o cabeçalho, rodapé, página inicial e quaisquer subpáginas necessárias para a aprovação inicial.

Aqui está o porquê:

Funciona para mim - Tradicionalmente, o web design começa com um extenso processo de wireframe via papel ou programa como o Adobe Illustrator para projetar e mostrar ao cliente para aprovação antes mesmo de entrar online. Este método funciona para alguns e pode ser um caminho muito eficiente, especialmente se você estiver em uma equipe e entregar seu projeto a um desenvolvedor para codificar. Mas depois que Divi apareceu, meu processo mudou completamente. Agora mergulho direto no Divi depois de ter uma estrutura básica e um conceito visual em minha mente e no papel.
Funciona para meus clientes - descobri que os clientes adoram ver uma visualização real ao vivo que podem ver em um navegador muito mais do que uma simulação plana. Às vezes, o fluxo e a sensação de um site podem se perder em uma simulação de uma página, ao passo que quando um cliente vê o site ao vivo em um navegador, isso geralmente leva a um "fator de surpresa" muito maior. Eles podem ver o foco, os efeitos de rolagem e o fluxo do design do site, o que causa uma ótima primeira impressão e, geralmente, menos edições e revisões.
Isso me economiza tempo - posso mudar as coisas tão rapidamente com CSS e meus layouts e configurações salvos no Divi que não faria sentido para mim ter que fazer essas revisões no photoshop ou no illustrator e depois duplicar o mesmo em minha folha de estilo e configurações do Divi. Eu economizo uma quantidade enorme de tempo com revisões e design inicial fazendo coisas ao vivo usando o elemento inspect diretamente no meu site de desenvolvimento Divi. Também posso fazer alterações e revisões em sites frequentemente enquanto estou falando por telefone com os clientes. Você pode parecer um verdadeiro astro do rock de um web designer quando um cliente pede que você mude algumas coisas e você o faz enquanto está no telefone com ele ou em questão de minutos.

Agora, novamente, esse processo de design é o que funciona para mim como uma loja de um homem só. Com uma equipe, o processo precisa funcionar para todos os envolvidos. Mas a maioria dos web designers freelance é uma mistura de designer / desenvolvedor, então faça qualquer processo que funcione para você, funcione para seus clientes e economize seu tempo!

2) Utilizando a Biblioteca Divi e Seu Trabalho Anterior

Um dos meus recursos favoritos do Divi é a capacidade de salvar seus layouts e designs de página. Esse recurso é uma virada de jogo e pode economizar muito tempo ao projetar e desenvolver com Divi. Em um episódio recente do DiviChat, o painel fala sobre como salvar vários modelos de designs de página e, em seguida, apenas excluir aqueles que não são usados em um novo site. Fale sobre uma maneira de economizar tempo! Se você puder criar uma série de layouts de página e modelos de página e tudo que você precisa fazer é importar e alterar o conteúdo, cores e imagens, você está economizando horas de design e desenvolvimento em potencial.

Aqui estão três dicas rápidas que vou oferecer quando se trata de salvar itens da Biblioteca Divi e trabalhos anteriores:

Salve seu CSS - eu tenho uma “folha de estilo mestre” com a maior parte do código CSS que escrevi para certos módulos, seções de página e classes que desejo imitar em outros sites. Dessa forma, posso abri-lo e puxar qualquer código que gostaria de usar no projeto atual. Ele fez maravilhas para economizar tempo em vez de ter que reescrever as linhas do CSS repetidamente.
Crie itens de biblioteca Divi - Salvar layouts como itens de biblioteca pode ser uma ótima maneira de salvar seu trabalho em páginas ou como um site completo que pode ser duplicado e facilmente alterado com imagens e cores. Se você não tiver certeza de como fazer isso, siga este tutorial.
Exportar arquivos json - muitas vezes terei clientes que farão referência a uma página de um site anterior, então, em vez de ter que recriar isso do zero, geralmente exporto essa página do site antigo, importo-a para o meu novo site e ajuste os estilos e as imagens de acordo! Mais uma vez, outra ótima maneira pela qual a Divi nos economiza tempo no processo de design e desenvolvimento. Mais detalhes sobre isso aqui se você não estiver familiarizado.

3) Revelando seu site ao cliente

Este é um dos meus aspectos mais importantes, mas negligenciado e subestimado do web design, na minha opinião. Muita coisa depende de uma primeira impressão e do que o cliente pensa inicialmente quando vê seu novo design. Se você fizer um mockup ou wireframe, naturalmente a primeira impressão será um pouco desanimadora até que o cliente veja uma versão online ao vivo que é totalmente compreensível e, novamente, pode funcionar dependendo das complexidades do seu processo do design ao desenvolvimento. Como você viu no meu processo acima, eu preparo o cabeçalho e o rodapé e desenvolvo a página inicial completa, normalmente com uma subpágina ou mais, dependendo das necessidades do projeto, e envio para revisão. A forma como envio ao cliente meu design inicial mudou recentemente, no entanto, com grande efeito.

Costumava enviar apenas o link de desenvolvimento ao vivo para que o cliente pudesse ver o site por conta própria, no seu próprio lazer. Funcionou muito bem, mas descobri que na rara chance que tive de fazer uma prévia pessoalmente ou pelo Skype, essas primeiras impressões foram ainda melhores e por quê? Acredito que seja porque o cliente conseguiu ouvir minha visão quando viu o site e isso me permitiu conduzi-los através de minhas ideias de design, cor e estética sem que eles fizessem seus próprios julgamentos primeiro.

Agora eu crio um vídeo rápido (geralmente menos de 5 minutos) de visualização, mostrando-os pelo site! Isso foi recebido com um feedback extremamente positivo até agora. É um pouco demorado, mas acho que vale a pena ter uma primeira impressão incrível de meus clientes.

Aqui está uma captura de tela de como mostro um novo site para um cliente no Basecamp:

Gravo meus vídeos passo a passo com o Screenflow para Mac. Eu então envio o vídeo para o meu canal do Vimeo e o torno um vídeo privado. A partir daí, como você pode ver no instantâneo acima, envio o link do vídeo para o cliente junto com uma breve descrição, uma lista com marcadores do que esperar e a URL real do site de desenvolvimento para o cliente ver em seu navegador depois de assistirem ao vídeo.

Aqui estão alguns dos meus vídeos de visualização recentes, se você quiser ver como apresento os novos sites aos clientes:

Vídeo de visualização do site 1

Vídeo de visualização 2 do site

4) Manuseio de revisões e edições

Finalmente, uma parte importante do seu processo de design e desenvolvimento será como você lida com as revisões e edições do cliente. Se você já desenha sites há algum tempo, sabe que esse processo pode ser demorado. Reuniões pessoais, chamadas prolongadas e e-mails aleatórios com pequenas alterações aqui ou pode haver uma grande perda de tempo no processo de edição e revisão.

Existem algumas maneiras de combater isso. Tento fazer com que todos os meus clientes postem todas as suas revisões (por página, se necessário) no Basecamp, onde crio uma discussão para as revisões. Aceitarei um telefonema ou uma reunião pessoal, se necessário, mas somente depois que as alterações iniciais forem enviadas da maneira que desejo recebê-las primeiro. Também deixo MUITO claro que não quero receber revisões uma de cada vez, durante vários dias, por e-mail. Eu digo aos meus clientes, se possível, para coletá-los em alguns dias e publicá-los todos de uma vez ou como muitos de meus clientes parecem gostar de fazer, para organizá-los todos em um .doc ou .pdf.

Voltando ao post anterior desta série e à minha conversa com o pessoal da Artillery Media, eles têm um processo muito simplificado de revisões no qual exigem que seus clientes enviem suas edições em um documento no Google Drive para que possam fazer as edições tudo de uma vez. Isso também economiza muito tempo. O truque aqui é fazer com que o processo de edição e revisão funcione para você da maneira mais rápida possível. E apenas um conselho, cada cliente tem sua própria maneira de fazer as coisas, então é sua função orientá-los sobre como deseja revisões e edições

No Fechamento

Bem, espero que essas ideias e meu processo de design / desenvolvimento tenham incentivado você a criar o seu próprio, caso ainda não tenha um processo padronizado em vigor! Se você possui alguns processos que funcionam bem para você, fique à vontade para nos informar nos comentários abaixo!

Próximo passo: Como gerenciar com eficácia vários projetos de design da Web da Divi

Quando você tem vários projetos em andamento, é difícil gerenciar todos eles ao mesmo tempo em que permanece criativo, conciliando prazos e atendendo às expectativas do cliente. Em nossa postagem final desta série, falaremos sobre algumas maneiras pelas quais você pode gerenciar com eficácia todos os seus projetos Divi Web Design para que seja capaz de equilibrar a integração de novos clientes, projetando, desenvolvendo e cumprindo os prazos que definiu fora para bater. Tudo ao mesmo tempo que se mantém criativo e atualizado. Até então!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!