O Guia Prático para o Fluxo de Trabalho do Web Design
Como um web designer que faz parte de uma equipe de desenvolvimento web maior, é comum que você tenha que lidar com muitas tarefas simultaneamente.
Tendo criado alguns rascunhos do primeiro projeto para o seu cliente e agora esperando pelo primeiro feedback, você provavelmente está muito animado sobre como o seu trabalho será percebido pelo cliente. Com tantas coisas para monitorar em um prazo estrito, é fácil ficar sobrecarregado com a complexidade do projeto. Há muitas etapas envolvidas na criação de um website ou aplicativo. Essas etapas variam ligeiramente de pessoa para pessoa, mas o fluxo de trabalho básico permanece o mesmo.
Com um bom fluxo de trabalho configurado e com algumas ferramentas e software, você manterá a bola rolando facilmente e evitará longos ciclos de feedback.
Aqui está um guia prático para um fluxo de trabalho de design que você pode usar para aumentar a produtividade de sua equipe.
Fase de preparação: gerenciando expectativas
Se você está simplesmente mantendo um site existente ou projetando um novo site a partir do zero, você e seu cliente são obrigados a gerenciar as expectativas uns dos outros.
Embora sua principal responsabilidade seja entender detalhadamente a exigência do projeto, a responsabilidade do cliente é entender como cada escolha feita afeta o escopo e o orçamento do projeto, com a sua ajuda.
Informe ao seu cliente sobre a tecnologia necessária, o orçamento necessário e o prazo necessário para concluir o projeto. Abordar seu projeto de maneira organizada economizará tempo, esforços e orçamento.
Fase 1: definindo metas do site
Essa é provavelmente a fase mais importante de qualquer projeto de design, pois você define as metas, configura a estrutura geral, decide sobre o conteúdo e atribui funções e os diferentes resultados ao longo do projeto. Ao estabelecer um planejamento adequado desde o começo, você se poupará de muita dor depois.
Aqui você trabalha com o cliente para estabelecer o cronograma, orçamento, cronograma, necessidades técnicas, estilo visual e estrutura de conteúdo para o público-alvo.
Ao gerenciar as expectativas e começar a trabalhar com o seu projeto de design, eu gostaria de recomendar o uso de um gerenciamento de projetos enxuto e fácil de usar, a fim de controlar metas, orçamentos, tarefas e cronogramas definidos.
Trello
Trello é uma ferramenta de gerenciamento de projetos bem conhecida e fácil de usar. Ele permite criar vários quadros para vários projetos. Com o Trello, você pode obter uma visão geral rápida das tarefas atuais e do seu backlog.
Asana
Asana é ótimo para fazer e rastreador de tarefas. Você pode até colaborar com colegas e clientes no Asana, o que lhe permite manter seu projeto transparente e com todos atualizados.
Campo de base
Outra ferramenta de gerenciamento de projetos conhecida e ótima é Campo de base . Semelhante às ferramentas mencionadas acima, basicamente permite que você e sua equipe acompanhem cada entrega de projeto e permita que você acompanhe o processo.
Fase 2: Desenvolvendo a estrutura do site e sujando as mãos
A estrutura do site forma a espinha dorsal do site. Ele age como um guia de referência para a equipe durante toda a duração do projeto. Use fluxogramas para mostrar o fluxo da estrutura.
Sitemap: Criar um sitemap é crucial para entender a organização do conteúdo. É importante manter a atualização do sitemap após cada alteração. Se você não fizer isso, as coisas ficarão confusas.
Wireframe: o conteúdo do site precisa ser corrigido antes que o design e os gráficos sejam colocados em prática.
Os wireframes são esboços de baixa fidelidade do site ou aplicativo móvel. Os wireframes são usados para criar espaços reservados para conteúdo, estabelecer prioridades para elementos na página e documentar requisitos. Isso se torna muito importante na próxima fase.
Balsamiq
Balsamiq é uma ferramenta gráfica de wireframes que ajuda o designer a criar muitos designs e, em seguida, organizar os widgets pré-criados em um editor de arrastar e soltar para que a equipe visualize e sugira alterações simultaneamente.
Moqups
Moqups é fácil de usar, tem muitos recursos de arrastar e soltar e não requer um plug-in de navegador para operar. Você pode facilmente organizar uma apresentação de design para seu cliente usando essa ferramenta.
Invision
Invision permite que você carregue designs funcionais e crie interações usando pontos de acesso, como qualquer aplicativo real. Um de seus recursos de destaque é a capacidade de enviar projetos clicáveis para o seu telefone via SMS, sublinhando a importância de poder testar seus projetos no contexto certo.
Notism
Notism é uma das melhores ferramentas que as equipes criativas usam para acelerar o processo de trabalho. Esta é uma plataforma de colaboração de design e vídeo. Ajuda profissionais criativos a compartilhar seu projeto e receber feedback por meio de esboços e anotações. Notism também permite criar diferentes versões de uma tela. Ao alternar facilmente entre telas diferentes, você pode ter uma visão melhor do desenvolvimento do seu projeto.
Fase 3: Design e produção
Nesta fase, certifique-se de que o designer trabalhe junto com o programador para garantir a implementação de elementos de design coerentes.
Depois que o cliente aprova os rascunhos do projeto, o designer e a equipe gráfica trabalham no visual e na sensação do site. Compressão, transparência, uso eficiente de cores e design se combinam para criar gráficos da web eficazes.
O estágio de produção é um ponto em que o site real é criado. Depois que o design e o layout do site são concluídos, o site entra na parte de engenharia do trabalho. Aqui, você pegará todos os elementos gráficos individuais do protótipo e os usará para criar o site real e funcional.
Github
Seu código irá mudar uma vez, duas vezes e provavelmente muito mais que isso. Github permite que você trabalhe de maneira eficiente com diferentes versões do seu site. A ferramenta realmente brilha quando você está trabalhando em conjunto com uma equipe de desenvolvedores. Isso é colaboração de código no seu melhor.
CodePen
Este é lindo. É um editor online para todas as suas necessidades de HTML, CSS e JS. Ele combina facilmente com o Github e é claro colaborativo. A ideia é poder testar pedaços de código e encontrar uma solução adequada sem atrapalhar o resto do código.
Fase 4: Testando, coletando feedback e corrigindo bugs
Nenhum projeto é realmente sem falhas. E embora o teste seja algo feito ao longo do processo de desenvolvimento, sempre haverá bugs. E não estamos falando apenas de erros de software. Até mesmo um design pode ser buggy.
Então, agora, é importante começar a testar como um louco. A solução de problemas precoces poupa muito tempo e esforço. É essencial que todas as pessoas que participam da criação do site estejam envolvidas nos testes. No entanto, o teste deve ser um processo ágil. Depois que você lançar o site ou estiver em processo de lançamento, muitas pessoas começarão a usá-lo e fornecerão feedback sobre o site.
E mesmo que você tenha feito todo o esforço possível para testar o site, você terá perdido alguns bugs ou novos aparecerão ao longo do tempo. É crucial que você obtenha informações sobre bugs e problemas o mais rápido possível. Se você conseguir que seus usuários relatem isso para você, você é de ouro.
Usersnap
(Divulgação completa: Eu trabalho para Usersnap.) Nós construímos Usersnap como uma ferramenta visual de acompanhamento de bugs e feedback que facilita o trabalho de teste de software. Ele permite que clientes, visitantes do site e colegas relatem bugs, solicitações de mudança ou simplesmente feedback em seu site. Também para testes manuais de websites, o Usersnap é uma aposta segura, pois acelera o fluxo de trabalho de testes através de ferramentas fáceis de usar.
Então, para recapitular ...
Projetos de design exigem que muitas pessoas trabalhem juntas. O feedback constante é uma das partes mais importantes da entrega de um projeto, conforme solicitado pelo cliente e dentro dos prazos especificados. Com toda essa confusão e o fato de que os sites estão se tornando mais complexos a cada dia, as ferramentas on-line facilitam a conclusão do trabalho entre todos os envolvidos e obtêm feedback instantâneo deles.
Integrar essas ferramentas em um fluxo de trabalho sólido realmente ajuda você a chegar onde precisa estar em um campo já competitivo.
Imagem em destaque, imagem do trabalho em equipe via Shutterstock.