Como construir sites com mais eficiência

Nosso desenvolvedor líder compartilha suas dicas para se preparar para construir um site com eficiência e evitar o inchaço do projeto.

Como em qualquer projeto, a preparação é a chave para o sucesso. Aqui, compartilho alguns dos principais processos que usamos para garantir a entrega bem-sucedida do projeto.

Desenvolvimento Kick Off

Antes de mergulhar direto na codificação de qualquer novo site, é uma boa ideia ter uma sessão de 30 a 60 minutos com a equipe de desenvolvimento para fazer um plano. O ideal é que o product owner esteja na reunião para responder a quaisquer perguntas que você possa ter. Provavelmente, eles participaram de todas as reuniões com o cliente e terão um conhecimento mais profundo do que qualquer outra pessoa sobre o que o site deve alcançar em termos de jornada e funcionalidade do usuário.

Com sorte, você já deve ter visto os designs de antemão. É uma boa ideia usar esta sessão para identificar quaisquer problemas que você vê e discutir com a equipe como você os resolveria. Por exemplo, se o designer optou por um menu suspenso fora da tela desde a última iteração, você poderia discutir como o construiria. Você pode descobrir que alguém na equipe já construiu um antes, para que eles possam assumir o trabalho.

Imprima os designs

Isso vai de mãos dadas com o início do desenvolvimento, mas esse estágio deve envolver apenas a equipe de desenvolvimento do front-end.

Acho que este é um bom passo antes de embarcar na construção do site, porque as impressões podem ser dispostas para se ter uma visão mais clara do quadro geral. Você não pode fazer isso facilmente usando aplicativos como Sketch, Photoshop ou Invision. Você teria que diminuir o zoom até agora para ver todos os designs ou poderá ver apenas um modelo de página por janela do navegador.

Visualizar uma página da web em um formato tátil também pode fornecer uma perspectiva diferente e ajudá-lo a aprimorar os elementos que, de outra forma, você poderia perder. Ser capaz de fazer anotações também é útil.

Aqui na Hallam, tendemos a anotar nossas impressões e, em seguida, usá-las para ajudar a dividir a carga de trabalho e colá-las em um quadro branco. Em seguida, nos referimos a eles durante as reuniões subsequentes durante o processo de construção. Depois que um modelo é criado e assinado, ele é removido do quadro branco, o que nos dá uma visão clara do que ainda falta construir.

Obviamente, todos nós devemos minimizar a quantidade de impressão que fazemos, então certifique-se de usar uma lixeira quando terminar de fazer os designs!

Identificar Elementos Comuns

Um dos princípios que abraçamos aqui na Hallam é que todo design que criamos não deve ser feito de modelos totalmente personalizados. Em vez disso, eles devem compartilhar elementos de design comuns que podem ser construídos separadamente e, em seguida, inseridos nos modelos onde forem necessários.

Não estou dizendo que os page templates não devam ter elementos personalizados, mas isso só deve acontecer quando necessário. Por exemplo, um site com uma página de Treinamento para Entrevistas de Rádio e uma página de Treinamento para Entrevistas de Televisão não precisa de dois modelos quando ambas são essencialmente páginas de “modelo de treinamento”.

Elementos comuns também criam uma melhor experiência do usuário, porque as pessoas não são bombardeadas com coisas novas para descobrir a cada passo.

Depois de definir todos os elementos principais do site, você pode escrevê-los em um quadro branco, criar tíquetes e atribuí-los aos vários membros da equipe. Então, quando você for colocar as páginas juntas, você pode apenas “encaixar” as várias partes nos modelos e criá-los muito mais rapidamente.

Construa primeiro, ou estilize e construa juntos?

Isso é algo que experimentamos no passado e, no momento, construímos e estilizamos modelos ao mesmo tempo.

No passado, costumávamos construir todas as estruturas e elementos do template de página sem usar nenhum css (exceto qualquer estilo de layout associado ao Bootstrap ou Foundation). Então, uma vez que tínhamos todo o site construído, iríamos examinar e estilizar todos os modelos e elementos. Este método certamente faz sentido do ponto de vista da linha de produção. Você não pintaria a carroceria de um carro antes de encaixá-lo no chassi, inserir o motor e colocar todos os acessórios. Com este método, você separa a função do estilo. Na fase inicial de construção, você está interessado em garantir que o site funcione de um ponto de vista funcional antes de considerar sua aparência.

Em vez disso, mudamos para o campo “projetar e construir” para que possamos criar um produto que pode ser despachado. Em outras palavras, poderíamos ir ao ar a qualquer momento porque o site funciona e parece bom. Na verdade, com o método de “design e construção”, você ainda constrói o modelo sem estilizar, mas assim que terminar de fazer o layout, você avança e estiliza. Você não o estaciona de lado e prossegue com a construção do próximo modelo.

A pia da cozinha básica

Aqui está algo que se encaixaria no método “projetar e construir”. Envolve estilizar alguns elementos, como tipografia, adicionar as cores da marca do site e talvez adicionar os estilos de botão ao arquivo master settings.scss. É incrível o que o estilo desses elementos pode fazer em um site imediatamente. Você imediatamente tem um site que não se parece mais com um site clichê da Fundação e tem uma noção real do progresso simplesmente gastando talvez 30 minutos escrevendo algumas regras CSS.

Enquadrar o Site

Minha preferência pessoal é definir o estilo do cabeçalho e rodapé desde o início, porque isso ajuda a enquadrar o site e criar uma tela para continuar estilizando e construindo o site. Faz com que o site se pareça mais com o produto acabado. No entanto, um site entregável ainda pode ter uma navegação e rodapé sem estilo, mas em funcionamento.

Conclusão

Todos nós temos nossas próprias ideias sobre como levar o design de um site do Photoshop para o processo de construção e o que está acima é a maneira como gostamos de fazer as coisas.

Uma coisa que eu realmente acredito ser vital é fazer um plano antes de abrir seu ambiente de desenvolvimento. Se você é um freelancer trabalhando sozinho ou parte de uma grande equipe de desenvolvimento, fazendo um plano é uma maneira segura de trabalhar com mais eficácia e rapidez.

Se precisar de ajuda com seu Desenvolvimento Web, não hesite em nos contatar.