Quais são as etapas na criação de um site?

Chamando todos os Web Designers :)

Estou começando a criar um site para uma pequena empresa em minha cidade natal e esse será meu primeiro projeto adequado. Eu criei sites no passado, o que fiz por lazer. Sou fluente em HTML e CSS. Eu tenho os requisitos dos clientes e o que ele deseja no site, etc. Estou preso em quais etapas devo seguir após finalizar os requisitos. Pesquisei na Web e não encontrei nada relevante para minhas perguntas porque as informações estão desatualizadas.

Minhas perguntas são:

O que é um fluxo de trabalho de web designers em 2014? (Como tudo está mudando muito rápido) Crio quadros de arame do site e os projeto no photoshop e depois codifico os designs?

Eu só quero saber como os processos de "design" funcionam, como as etapas que eu preciso tomar para criar o site.

Desde já, obrigado.

Descoberta e escopo

Sente-se com o cliente para determinar, objetivos, propósito e necessidades. Você deve ter feito uma cotação do site proposto e também discutir o tempo de resposta. Certifique-se de ter escrito tudo o que você não pode fornecer. Você precisa descobrir como o site será estruturado. Como responsivo, somente tablet e telefone, somente desktop, desktop e tablet. Você precisa descobrir se o design é um destino de design multifásico, como o cliente desejará lançar uma versão para desktop e desejará um aplicativo móvel completo posteriormente.

Mapeamento de Conteúdo

Espero que você tenha recebido todo o conteúdo desejado para o site. Você deve mapear o site e sua funcionalidade. Decida como é a escalabilidade para futuras modificações, decida como o código pode ser estruturado, se for para um CMS ou aplicativo.

Exemplo:

Brincar

Depois de concluir sua "árvore" ou "mapa" com a aprovação do cliente, eu trabalharia em um esboço manual ou em uma ferramenta de maquete. Há uma grande quantidade de perguntas sobre este tópico, se você fizer uma pesquisa no canto superior direito

Exemplo:

Style Tile

Projetar no Photoshop para web design derrota o propósito da era atual. Não conheço muitas pessoas que ainda usam o Photoshop porque, quanto tempo leva para criar um botão sofisticado, você poderia ter passado a mesma quantidade de tempo e codificado no navegador. Se eu precisar usar um aplicativo por solicitação especial, eu o implantarei no Illustrator ou no InDesign. Aconselho a migração para projetar um bloco de estilos como:

Com o objetivo do bloco, você não está entregando um projeto a um cliente e se colocando no canto "isso não se parece com o projeto que você me deu". Além disso, se você estiver planejando um site, não há razão para gastar o tempo disposto no Photoshop para ter capacidade de resposta, porque você gastará muito tempo projetando para determinados dispositivos etc. etc. Se você tiver que projetar o site completo, considere o Illustrator, como indicado, por seu SVG e capacidade de exportar elementos para o seu site em comparação com o Photoshop. Até certo ponto, você poderia usar o InDesign para formatar o conteúdo, mas eu usaria o Photoshop apenas para manipulação de imagens e, se eu fizer isso, provavelmente rodaria com o ImageMagick. Eu levo o Style Tile um nível além dos outros e o codifico em uma única página, para que eu tenha eliminado uma tarefa preliminar do meu mestre.css Arquivo.

Wireframe

Prefiro implantar o design no navegador se você não percebeu. Hoje em dia, posso usar o Illustrator para esboçar o site ou fazer uma maquete do site, mas geralmente implanto um .cssarquivo de modelo padrão com não mais de 6 cores em escala de cinza e codifico tudo para a estrutura do site, pois a maioria das pessoas não consegue obtenha um entendimento do design e queira algo para brincar. Às vezes, faço isso em PHP, pois é mais fácil implantar para um CMS. Em seguida, desenvolverei um subdomínio simples com as fontes FORNECIDAS do cliente em preto e branco, para que toda a funcionalidade do site esteja presente e eles possam passar por ela. Como não gastei muito tempo adicionando todo o conteúdo ou cores (porque uso uma referência de texto fictício: "Alternativa ao Lorem Ipsum (texto fictício)) para sites") Eu posso modificar facilmente quaisquer alterações que estejam presentes se elas não gostarem de um determinado elemento com base em um dispositivo.

Colorir e conteúdo

Depois que o cliente assinar a estrutura do site e a funcionalidade, escreverei o restante do CSS e adicionarei as animações solicitadas ou as especificações do JavaScript. Como tenho o bloco de estilos aprovado e, se o desenvolvi corretamente, posso simplesmente copiar o CSS e ser configurado.

Depurar, Depurar, Depurar

A etapa final antes da saída do cliente é a depuração e verifique se meu código está sólido, sem erros. Se tudo estiver correto, eu deveria ter uma liberação suave. Esta etapa também inclui a exibição de testes e testes de carga, se é o preço e o preço que você ofereceu. Pessoalmente, acredito firmemente que qualquer designer deve estar ciente do que está desenvolvendo, exatamente como você faria, esperançosamente, quando se trata de um design de impressão. Se o cliente não puder pagar por um verdadeiro provedor de hospedagem, isso poderá limitar o desempenho do site e todos eles dirão que a culpa é sua e que você fez algo errado.

Treinamento

Normalmente faço lances no meu treinamento breve / de cotação em sites do CMS. Alguns usuários não têm idéia do que estão fazendo, então lancei por uma tarde com uma hora de preenchimento após as perguntas para garantir que repassássemos qualquer coisa ou para garantir que eles estivessem usando meu design com os recursos mais avançados.

Alguns outros tópicos que podem ajudar, pois você está fazendo uma pergunta básica:

• Qual é a diferença entre wireframes e mockups?
• Como apresentar modelos de web design para um cliente?
• Quais são algumas boas práticas de "mock-up" em web design?

Eu também sou um web designer que acabou de começar no campo. Eu já fiz alguns projetos agora. Para mim, meu fluxo de trabalho é assim:

1. Reunião inicial de design e desenvolvimento
   É quando eu reuno todas as informações relevantes, incluindo a data prevista de conclusão, faço uma lista dos itens necessários do meu cliente, etc.
   
2. Maquetes do PhotoShop
   Atualmente, encontro um design ou dois ou três adequados ao meu cliente e faço maquetes no Photoshop usando suas marcas, cores, estilos etc. Eu os envio e discuto o que deve ser alterado / mantido em cada um deles. , deixe o cliente decidir qual design ele mais gosta.
   NOTA: Se você estiver usando o WordPress para construir, pode ir para http://themeforest.come confira toneladas de temas. A partir daí, você pode tirar capturas de tela e fazer suas maquetes, além de fornecer uma demonstração ao vivo (sem as personalizações do cliente, obviamente). Se o seu cliente gosta de um desses modelos, você compra o tema e pode alterar conforme necessário. É isso que eu costumo fazer. Eu nunca uso um tema (ou qualquer outra coisa) sem dar crédito / pagamento / etc. para o criador original. :)
   
3. Desenvolvimento
   Finalmente, finalmente começo a desenvolver o site em um ambiente de desenvolvimento (NÃO no site ao vivo do cliente, mas se for possível um subdomínio - IE dev.clienturl.com). Envio atualizações ao meu cliente toda vez que sinto que uma página está chegando perto para concluir, caso haja problemas, podemos corrigi-los imediatamente.
4. SEMPRE ACOMPANHE
   Mesmo depois que o site do seu cliente for ao ar e eles parecerem satisfeitos e não solicitarem mais alterações, não deixe de acompanhar. Apenas verifique se tudo está funcionando como deveria, de acordo com as expectativas deles. Também recomendo que você escreva uma pequena pesquisa para cada cliente terminar assim que o site for publicado por cerca de uma semana. Você pode usar comentários aqui como depoimentos em seu site.

Se precisar de ajuda com alguma coisa, entre em contato comigo pelo meu site. Tenho muitos recursos que posso compartilhar com você em contratos, pesquisas de pós-produção, questionários iniciais etc. http://anchorsawaydesigns.com/

tente obter o máximo de informações possível desde o início e siga uma abordagem em etapas semelhante a abaixo. Tente manter seu cliente informado o máximo possível, pois você não desejará desenvolver algo isolado apenas para descobrir mais tarde que ele não atende às expectativas deles. Se você investe em uma boa ferramenta de wireframing (eu uso o balsamiq), metade do trabalho é feito para você.

1. Levantamento de requisitos
2. Wireframing
3. Maquetes de design
4. Projeto finalizado
5. Desenvolvimento
6. Hospedagem

Boa sorte.

Oi cara, é bom você começar um novo projeto.

Etapas para sua necessidade:

1. primeiro você decide qual a tecnologia que você deseja usar para o seu projeto, quero dizer rolagem de página única, página múltipla etc.

2. Em seguida, prepare o esboço para o layout e o fluxo de trabalho.

3. Agora comece a projetar seu layout na ferramenta que você gosta do photoshop, mas você pode usar o seu gosto.

4. Depois disso, é bom que você mostre seu layout para o cliente para quaisquer alterações, ou seja. cores, fontes etc., para que você possa não causar dor de cabeça no momento do html.

5. Agora, após a confirmação dos clientes. É hora de começar a codificar com HTML e CSS.

6. Depois, é hora de repassá-lo para o desenvolvedor, para codificação básica do idioma adicional, ie. PHP, .Net etc.

Apreciar............

Na indústria da Web, para otimizar seu processo de desenvolvimento, o design é concluído e, antes que o design final seja apresentado para ser desenvolvido ou testado, algumas outras etapas intermediárias estão envolvidas:

Etapa 1: Obtendo inspiração:

Se você observar continuamente o que outros designers ou sites estão fazendo por seus wireframes, você terá uma imagem lenta de como um wireframe ajuda a organizar as informações da tela.

e para isso você pode usar a ferramenta de Wireframing "Wirify", basta adicionar o link grande ao seu favorito e acessar o site desejado, clicar no favorito, você verá o site se transformando em wireframe.

Etapa 2: projetando seu processo:

Diferentes designers abordam o wireframing e sua tradução para visuais ou códigos de diferentes maneiras,

Aqui, não é apenas o designer que escolhe o caminho a ser seguido, às vezes os clientes preferem criar modelos diretamente, e alguns preferem mais sistemático,

Esboço => Wireframe => Maquete => Código

Etapa 3: Esboçar:

Agora, quando você estiver inspirado, tenha algumas idéias grosseiras e um planejamento de abordagem, é sempre bom começar com esboços, não importa quão bom você controle o mouse / caneta ou o que quer que use, eles não podem bater em papel, lápis em simplicidade.

O desenho à mão no papel é sempre um bom ponto de partida para qualquer designer. Ele fornece uma maneira rápida e fácil de se concentrar e organizar. Se você é muito preciso no desenho, pode até usá-lo como sua estrutura de arame final.

Etapa 4: Wireframing:

Criar um wireframe é uma das primeiras etapas que você deve executar antes de projetar.

Um wireframe ajuda a organizar e simplificar os elementos e o conteúdo em um site e é uma ferramenta essencial no processo de desenvolvimento.

Um wireframe é basicamente uma representação visual do layout do conteúdo em um design .

Como a fundação de um edifício, ele deve ser fundamentalmente forte antes de você decidir se deve dar a ele uma camada de tinta cara.

Escolha suas ferramentas

Aqui está a lista de 10 ferramentas gratuitas de wireframing da Mashable para designers

Definindo uma grade

As grades são muito necessárias para obter um design simétrico e paralelo.

sempre que você olha para um site com bom design, descobre que o conteúdo começa em um ponto específico do corpo e termina em um, eles são gerenciados pelo uso de grades.

Determinar layout com caixas

Definir hierarquia de informações com tipografia

O que evitar ao fazer wireframing:

• Muita coisa está acontecendo na página.
• Ênfase na cor e no design
• Muitos detalhes

A criação de uma estrutura de arame oferece ao cliente, desenvolvedor e designer a oportunidade de analisar criticamente a estrutura do site e permitir que eles façam revisões facilmente no início do processo.

O wireframing traz os seguintes benefícios principais:

Etapa 5: Maquetes / Visual:

Agora o Wireframe final pode ser convertido em Mockups finais ou Visual:

Algumas ferramentas comuns para o Mockuos são o Adobe photoshop, Corel Draw e Sketch muito novo, mas já popular, etc.

Hierarquia da informação

Pode ser necessário considerar o que deve ser destacado e o que deve ser a informação lateral, e o esquema de cores, reposicionamento e tipografia são decididos.

Tipografia

Escolha tipografia visualmente atraente e legível para o site com a combinação certa de alternativas. Tamanho da fonte, peso e cores desempenham um papel crucial na legibilidade.

Esquema de cores

Um esquema de cores representando a identidade da marca e as cores psicológicas como vermelho para perigo, verde para sucesso etc.

Etapa 6: Protótipos :

Um protótipo é uma amostra, modelo ou versão inicial de um produto criado para testar um conceito ou processo ou para agir como algo a ser replicado ou aprendido.

Os wireframes manipulam a estrutura, os modelos manipulam recursos visuais e os protótipos manipulam a usabilidade (em produtos da web / app).

Um protótipo de produto é feito e, então, é testado e o POC (Prof of concept) concluído. Agora podemos ir para o produto Real (obviamente, se não houver necessidade de alterações)

Link para o artigo original com imagens e outros links