Na Parte 2, abordei os detalhes de avaliação de um plano, escolha de profissionais da web e determinação da estrutura do seu site. A questão de por que planejar para a web é tão importante quanto planejar qualquer outra coisa associada ao seu negócio foi abordada na Parte 1, então volte para ler essa parte primeiro, caso você tenha perdido. Na parte final de hoje deste guia, começarei com algumas das abordagens mais comuns em qualquer projeto inicial.

Projeto inicial: três abordagens comuns

Existem, é claro, outros, incluindo híbridos que combinam elementos de cada um, e cada equipe de design e cada projeto é diferente, mas existem abordagens centrais para criar um web design.

1. Abordagem clássica de maquete do Photoshop

Comumente criado no Adobe Photoshop (o padrão da indústria) ou em outro software de design, como o Sketch, o design inicial consistirá em uma imagem visualmente precisa ("mockup") da página inicial e pelo menos uma página interna.

Os elementos de branding visual da sua empresa devem ser aplicados aqui. Se você tiver gráficos bem definidos além do seu logotipo, eles ditarão o design do site. No entanto, se sua marca não tiver detalhes, o designer fará o possível para criar um trabalho que reflita com precisão o negócio, trabalhando com seus gráficos existentes como ponto de partida.

A seguir está uma pequena lista de pontos-chave para maquetes bem-sucedidas. Vamos supor que o designer esteja trabalhando no Photoshop, no entanto, essas diretrizes também se aplicam a outros programas de design.

• Comece com uma grade pré-criada com guias pré-desenhados com precisão de pixel. Alguns designers criam seus próprios, enquanto outros podem aderir a um sistema de grade pré-definido. Seja qual for o caso, é importante ter um modelo limpo para começar. Deixe sua tela mais larga do que a largura para a qual você está projetando, para que você possa adicionar notas de um lado e ter uma ideia de como é o site ao flutuar em uma ampla janela do navegador.
• Adicione a paleta de cores e os elementos básicos da marca (ou seja, fontes) nas margens da tela para que você a tenha como referência ao visualizar na tela ou na impressão.
• Desenhe tudo em pixels exatos e desenhe guias e/ou fatias claras ao redor dos elementos de design. Isso se torna crítico quando o desenvolvedor front-end cria posteriormente o HTML a partir do modelo, no entanto, seu design só terá precisão de pixel quando exibido em um dispositivo de 'tela grande'.
• Organize todos os elementos de design com uma estrutura lógica de pastas/subpastas e rotule cada item claramente.
• Se o designer for entregar seus arquivos a um desenvolvedor HTML, isso é especialmente importante. Nomeie suas pastas e camadas de acordo com seu conteúdo para que não haja confusão mais tarde. Por exemplo: "Barra lateral — cabeçalho de eventos" é claro, "Layer14 Copy Copy Copy" não é.

• Faça anotações claras ditando fontes, alinhamento, repetindo elementos de fundo, gradientes e qualquer coisa que precise ser implementada com técnicas CSS. No Photoshop, o recurso de nota adesiva é bom para isso. Se não estiver claro, pergunte à pessoa que converterá seu design em uma página de trabalho.
• Se estiver usando um estilo comum para cabeçalhos, navegação ou outros elementos de design que aparecem em todo o site, considere criar documentos do Photoshop separados para eles. Alguns designers acham mais fácil "desmontar", especialmente em grandes projetos.
• Use conteúdo realista. Os designers costumam usar o grego ("lorem ipsum") para preencher o espaço, o que é bom para a cópia do corpo. No entanto, para manchetes, títulos, eventos, etc., tente usar uma cópia realista. Considere os dois títulos a seguir. As considerações de layout são diferentes para cada um:
  • "Widgets, Inc. ganha prêmio Green Manufacturing"
  • "Funcionários da Widgets, Inc. vencem processo judicial importante, afirmando o direito do funcionário à petição para reembolso de mensalidades da faculdade quando o treinamento é relevante para a função de trabalho"

O problema com este método

Quando você cria maquetes com pixels perfeitos, você pode ter certeza de que a aparência do site será muito próxima na web para desktop — mas é isso. No minuto em que você mudar para um dispositivo diferente, ele mudará. Portanto, no mínimo, você desejará transmitir à empresa como o design mudará à medida que for visualizado em telas menores (tablet, smartphone) mostrando um site com layout semelhante ou projetar maquetes adicionais em tamanhos de tela comuns. Como você pode imaginar, isso é muito trabalho de design adicional e, se você alterar um elemento no modelo focado na área de trabalho, também terá que alterá-lo nos outros. Aqui está a visualização do smartphone.

2. Desenhe no navegador

Com o surgimento do web design responsivo, alguns designers estão se afastando da abordagem de maquete do Photoshop, usando estruturas responsivas como Bootstrap ou Foundation, ou ferramentas como Froot ou Typecast. Essas ferramentas permitem um design muito rápido e iterativo que permite ver como o site ficará em diferentes dispositivos.

Você ainda pode usar o Photoshop ou outras ferramentas de design gráfico para criar elementos estilizados para colocar dentro do design, mas a maior parte do design acontecerá fora dessas ferramentas. Não há uma boa maneira de mostrar ao negócio "exatamente como ele será", portanto, para designers acostumados a fazer maquetes perfeitas em pixels para a Web de desktop, o design no navegador pode não ser a melhor abordagem. Para muitos, esse método também representa uma grande mudança em seu processo e pode demorar um pouco para pegar o jeito. A maioria vê isso como uma evolução necessária, já que uma maquete do Photoshop pode representar apenas um dos muitos "quadros" nos quais o conteúdo do seu site é exibido, e o mundo da web está se movendo rapidamente para o design para várias plataformas desde o início.

Quando chegar a hora de escrever o HTML, CSS e Javascript que comporão o site, você pode ficar com o framework que usou inicialmente para criar suas iterações de design, adaptar seu código ou escrever o seu próprio do zero, usando seus designs de framework como um guia.

3. Colagem de elementos (também conhecida como telha de estilo, colagem de estilo)

Com essa abordagem, o designer reunirá uma série de elementos que compõem um site, incluindo cabeçalho, navegação, ícones, fotografia de amostra, ilustrações, formulários, elementos interativos e qualquer outra coisa considerada necessária para ter uma boa noção da aparência do site . Além disso, dependendo da ferramenta de design, esses elementos podem ser dispostos de forma a mostrar como sua aparência mudará em uníssono com o tamanho da tela. Isso geralmente é combinado com algum tipo de maquete gráfica de pelo menos a página inicial e algumas páginas internas. (Pode ser difícil para as empresas visualizar a aparência das páginas de um site com base apenas em uma colagem de elementos.)

Observação: essas imagens de amostra não estão em escala — nossa versão do Photoshop da colagem de elementos é uma página longa, 1500 x 4500 pixels, então não podemos encaixá-la aqui em uma única peça.

Para designers (e empresas) acostumados com o método de maquete do Photoshop, essa também é uma nova fronteira e requer uma mudança de perspectiva. Com um protótipo de estilo, você não está tentando fazer o layout de uma página exatamente, mas sim mostrar as partes principais do site e obter feedback sobre a aparência geral. Como um site responsivo deve mudar radicalmente de aparência à medida que o tamanho da tela muda, esse método é muito mais sobre as partes de um site e ter uma ideia da direção que o design está seguindo. Você não está mostrando o site como um todo, muito menos fazendo uma representação perfeita em pixels de exatamente como cada página ficará.

Isso pode economizar muito tempo, mas, novamente, se o negócio não estiver confortável (ou confiante) o suficiente para deixar o designer tomar decisões estruturais mais tarde, esse método pode ser difícil de vender. Dito isso, ele realmente pode criar um ambiente flexível para criar rapidamente designs da Web para inúmeras plataformas.

Embora os princípios do design gráfico sejam atemporais, as abordagens usadas para o design do site mudarão e evoluirão ao longo do tempo. Eu recomendo que você assista Design Deliverables for a Post-Comp era para descobrir o valor dessa abordagem.

Ao usar este método de colagem de elementos, a empresa deve aceitar que não há um rascunho exato, preciso e final de uma determinada página, apenas diretrizes de layout para concordar. A própria natureza dos sites responsivos é adaptar seu conteúdo às capacidades de cada dispositivo, de modo que a empresa não deve esperar aprovar layouts fixos antes da fase de desenvolvimento. Com um protótipo de estilo aprovado, um designer pode querer retornar aos wireframes ou protótipos de trabalho para elaborar todos os layouts que seu projeto exige. Então, quando se trata de construir o site, você montará os elementos da sua colagem na estrutura visual de cada layout exclusivo.

Há muita discussão e debate na comunidade de design sobre as melhores ferramentas, métodos e processos para criar web designs. Os designers tendem a se sentir muito fortes sobre qual é o "melhor" método e, embora isso seja compreensível, é importante usar o processo mais adequado para o projeto e o negócio. É inteligente que os designers se sintam à vontade para trabalhar com uma variedade de métodos e sistemas e ampliem seus horizontes quando um projeto permitir.

Nota do autor
Eu estava muito hesitante em incluir alguns dos conteúdos a seguir, porque ele destaca sérias tensões no relacionamento entre designers de negócios. Embora possa parecer excessivamente crítico para os proprietários de empresas, acredito que seja de grande valor para as empresas, porque muito tempo e dinheiro estão em risco em um projeto de site.
No interesse da diplomacia e da preservação do relacionamento com o cliente, os designers provavelmente não expressarão essas frustrações para os empresários, mas as questões a seguir podem inviabilizar projetos.

Aprovação e revisões do projeto

Independentemente de qual método de design foi escolhido para o projeto, quando o design é concluído, os resultados são compartilhados com a empresa para aprovação e geralmente há um processo de revisão (espero que curto). O processo de revisão envolve o designer e as principais partes interessadas indo e voltando algumas vezes, tentando diferentes edições no design até que o design seja aprovado.

Design por comitê: não faça isso.

Um problema comum (e completamente evitável) nesta fase é a consideração de muitas opiniões, simplesmente tendo muitos cozinheiros na cozinha digital.

Para ajudar a garantir um processo tranquilo, a empresa deve designar uma pessoa como ponto de contato para a equipe de design. Essa pessoa é responsável tanto pela comunicação com o designer quanto por tomar as decisões finais sobre a direção do projeto.

Certamente, é importante solicitar feedback sobre o design, e as partes interessadas do projeto têm críticas valiosas a oferecer, ajudando a orientar o processo de design para que o resultado final represente com precisão seus negócios.

Além disso, em alguns casos, é necessária uma revisão pelo pessoal jurídico e/ou técnico. No entanto, ter toda a empresa oferecendo contribuições e dar peso igual a todos os comentários leva rapidamente a ninguém ficar satisfeito . A melhor maneira possível de garantir um design confuso e desfocado é dar a opinião de todos e depois correr para fazer todas as mudanças propostas.

De um modo geral, em pequenas empresas ou organizações, ter mais de cinco pessoas fornecendo feedback de design é uma receita para o impasse. Quanto menos melhor, cinco é o máximo. Essas cinco (ou menos) pessoas solicitarão feedback de seus subordinados ou colegas de departamento, mas essa entrada deve ser compilada por cada parte interessada e apresentada como uma opinião unificada e única. Em outras palavras, não convide quinze pessoas para uma reunião de revisão de design. Elimine todas as idas e vindas antes de ir ao designer com informações. Também é muito importante distinguir entre preocupações objetivas de design ("esse esquema de cores realmente combina com nossa padaria?") versus preferências pessoais de design ("adoro a cor azul - vamos usar muito mais azul") .

Design não é uma busca arbitrária. Existe um design bom e ruim. Existem regras a serem seguidas, práticas recomendadas a serem seguidas e, desde que o planejamento seja feito corretamente, as decisões de design quase nunca são realmente uma questão de gosto. Ou seja, há uma boa razão para o designer ter usado aquele azul exato, naquele ponto exato, ou aquela fonte naquele tamanho. Todas essas pequenas escolhas comunicam coisas ao usuário. Eles podem parecer insignificantes, mas, na realidade, todas essas escolhas que o designer faz são importantes. Eles podem afetar drasticamente a forma como o site funciona e como ele é recebido. Infelizmente, muitas empresas não entendem que só porque gostam não significa que todo mundo vai gostar, e fazer o que é melhor para transmitir a alma do negócio é o que o designer é contratado para fazer. A opinião não deve entrar nisso, a menos que seja absolutamente necessário.

Quando os egos governam

Qualquer designer experiente já lidou com tomadores de decisão que têm a terrível combinação de ego forte e baixa sensibilidade ao design. Na pior das hipóteses, os designers serão solicitados a usar um logotipo que o CEO desenvolveu no Microsoft PowerPoint, ou cores e fontes totalmente inadequadas à imagem do negócio. Isso, infelizmente, vem com o território de ser um designer. Às vezes, é possível difundir isso colocando a arte ofensiva em uma grade ao lado de material projetado profissionalmente de concorrentes ou empresas semelhantes do setor – o Pinterest é uma boa ferramenta para isso.

Se uma análise competitiva fez parte de sua avaliação de necessidades, você pode consultar as marcas deles para referência. A esperança é que a empresa possa ver o quão horrível sua versão parece ao lado da concorrência e repensar seu compromisso com a má ideia. Em última análise, no entanto, os tomadores de decisão podem arruinar projetos, insistindo, contrariamente a todas as evidências disponíveis, que seu senso de design deve ter prioridade sobre os princípios de design estabelecidos.

Ajuda! Eles não vão ceder!

Os leitores de uma versão anterior deste livro pediram maneiras de lidar com o problema do ego. Eu gostaria de ter uma resposta inteligente ou útil para você. Basta dizer que este é um problema com as pessoas, não com a tecnologia. Faça o seu melhor caso para o valor de um bom design, lute sua melhor luta, então esteja preparado para deixá-lo descansar.

Tensão do design: designer vs. o negócio

Os designers geralmente lidam com a tensão entre seus conceitos informados de design e as críticas de design desinformadas dos negócios. Isso é melhor ilustrado pelo enigma da "má ideia". A empresa solicitará um recurso de design que seja feio, impraticável ou apenas uma má ideia. (Isso é tão comum que existem muitos sites que relatam negócios sem noção e as dores de cabeça que resultam nessa dinâmica ¹ .) O designer responderá em algum lugar no continuum entre "isso é horrível, não faremos isso" e "bem, se é o que você prefere...". Essa resposta depende de uma variedade de fatores em constante mudança, incluindo:

¹ https://clientsfromhell.net, https://theoatmeal.com/comics/design_hell



• Quando o designer espera ser pago.
• Quão emocionalmente o designer está envolvido no projeto.
• Quanto tempo o designer investiu na fase de projeto e quanto atraso resultará da implementação da má ideia.
• Quão altas são as apostas – quanto dano a má ideia causará ao site como um todo.
• Personalidade, disposição das empresas para receber conselhos construtivos sobre suas ideias.

Cada projeto é diferente. Quando os designers lidam com empresas que continuamente solicitam recursos mal aconselhados, em algum momento eles podem descartar o projeto completamente. A certa altura, é muito cansativo explicar continuamente por que os parágrafos centralizados, em negrito em vermelho, ESCREVER EM MAIÚSCULAS, animações em Flash malucas ou fotografia de baixa qualidade tornam um site ineficaz ² . A atitude do designer muda rapidamente de "vamos fazer algo realmente grande do qual nos orgulhemos" para "vamos fazer isso para nunca mais precisarmos olhar para isso".

² Outros assassinos de humor incluem vídeos de reprodução automática e fontes mais usadas em livros infantis.



Ao considerar o acima, perceba também que há um outro lado dessa moeda. Os problemas com as pessoas também podem surgir no lado do designer. As habilidades de alguns designers podem não estar à altura, eles podem se recusar a ouvir críticas válidas sobre seu trabalho ou podem não valorizar a contribuição informada do negócio. Uma boa maneira de evitar isso é obter boas referências de clientes anteriores dos designers.

Considere o conteúdo

Pense na expansão. Por exemplo, você pode ter uma seção de notícias. Para começar, você tem seis notícias. Isso é bom. Você criará uma página principal de notícias com resumos e vinculará os resumos a uma página de detalhes. Mas o que acontece quando você tem dez, vinte ou cinquenta notícias? Agora há outras considerações. Deseja arquivar notícias antigas? Criar paginação? Mostrar apenas os dez itens mais recentes? Isso deve ser considerado no processo de design. Planeje o conteúdo o máximo possível no processo de design e pense no futuro sempre que puder - planeje o conteúdo que você terá, não o conteúdo que você tem agora.

Guia de estilo da web

Um guia de estilo é onde o planejamento adequado brilha. Um guia de estilo consistirá de todos os elementos de design, layout, interativos (ou seja, JavaScript) e de tipo usados ​​em todo o site em um único local. Isso geralmente é feito em HTML, portanto, se você for um designer que não codifica, precisará criar uma maquete para seu guia de estilo e entregá-la ao desenvolvedor front-end junto com o restante de seus designs. Se você usou o método de colagem de elementos abordado anteriormente, talvez não seja necessário se repetir em um guia de estilo da Web separado. Se você estiver usando o método clássico de maquete do Photoshop, precisará de um. Os elementos de um guia de estilo incluem, mas não estão limitados a:

• Estilos de navegação
• <h1> a <h5>, também conhecidas como tags de cabeçalho
• Parágrafos
• Listas
• Citações em bloco
• Itálico, negrito, sublinhado
• Links, incluindo os estados ativo, de foco e visitado, ou seja, a aparência dos links, inclusive quando o mouse passa sobre eles
• Ícones
• Uso de imagens e estilo de imagem
• Uso de imagens de fundo ou "marcas d'água"
• Formulários.

Este artigo do Canva explora 10 guias de estilo da web para empresas conhecidas. Você também pode usar uma ferramenta online como Frontify.

Usando uma biblioteca de padrões

Para sites de escopo maior, você pode expandir o conceito de estilo da web para a biblioteca de padrões mais robusta, que explica como vários elementos aparecem e como eles são manipulados. O código de exemplo para esses elementos geralmente faz parte da biblioteca. Não é apenas uma foto dele, mas a coisa em si. Por exemplo, como é um formulário, o que acontece visualmente quando há erros, qual é o processo de envio de comentários, etc.

Maquetes aprovadas, colagem de elementos e wireframes, juntamente com o guia de estilo, são usados ​​como blocos de construção para as próximas etapas do desenvolvimento.

Criação de HTML/CSS

Usando os designs e o guia de estilo, um especialista em HTML/CSS (o codificador front-end) criará modelos HTML que representam com precisão o design aprovado. Em alguns casos, os modelos parecerão idênticos aos maquetes, no entanto, onde o Photoshop foi usado para maquetes, diferenças sutis são esperadas.

Seu codificador de front-end também pode precisar de diretrizes e ativos adicionais relacionados a designs, como paletas de cores, imagens específicas, ícones e – se ainda não for explicitamente observado – regras de design como margens e preenchimento. Certifique-se de saber quais serão todas as entregas antes de começar a enviar arquivos. Se os designs e o guia de estilo foram criados com muita atenção aos detalhes, deve haver poucas perguntas ou suposições neste estágio; trabalho deve estar zumbindo junto.

Criação de elementos interativos

Os elementos interativos podem ser tão simples quanto um menu suspenso ou tão elaborados quanto um criador de gráfico de pizza. Esses elementos são normalmente desenvolvidos com JavaScript, geralmente usando uma biblioteca de scripts como jQuery. No nível mais geral, isso consiste em montar (e escrever) um conjunto de instruções que interagem com as páginas do seu site. Pode haver interatividade entre o site e o servidor a considerar também. Você pode estar conectando APIs ³ , fazendo algo como um sistema de agendamento ou calendário etc., ou usando widgets de serviços de terceiros.

³ Essencialmente, uma ponte entre um ou mais sistemas. Por exemplo, o Facebook oferece uma API que permite que você puxe postagens do seu mural para um site não relacionado.

 ### Integração CMS

Finalmente seu design brilhante foi convertido em código e está pronto para ser integrado em um Sistema de Gerenciamento de Conteúdo (CMS). Está a caminho de se tornar um site!

O indivíduo ou equipe encarregado de fazer a "costura" do código no CMS fornecerá um login para o painel de controle do CMS, que permite inserir o conteúdo, incluindo texto, fotos, vídeos e documentos. A maioria dos escritores prefere recortar e colar do Microsoft Word.

Dependendo das especificidades do CMS selecionado, você poderá fazer isso sem problemas, mantendo a formatação simples como negrito, itálico e listas. No entanto, o CMS pode remover essa formatação quando você recorta e cola, exigindo que você a adicione novamente. Embora às vezes tedioso, isso garante que seu conteúdo permaneça limpo e ordenado, o que o torna mais facilmente indexado pelos mecanismos de pesquisa, impresso, citado e convertido para outros formatos mais facilmente.

Embora, na realidade, esse processo seja bastante complicado, deixei de fora os detalhes porque o processo exato será exclusivo para cada CMS, e fazer isso bem depende da experiência do desenvolvedor da Web/CMS.

Treinamento e Documentação

Embora o CMS moderno possa ser muito amigável, é importante coordenar o treinamento para as pessoas responsáveis ​​pela inserção de conteúdo. Quando possível, o treinamento no local é melhor, sendo a conferência pela web uma segunda opção. O treinamento funciona melhor em grupos muito pequenos – 5 pessoas ou menos. Além disso, fazer com que as pessoas realmente sigam as etapas necessárias para concluir uma tarefa por conta própria (em vez de apenas observar o treinador e tentar lembrar como fazê-lo quando estão sozinhas) é muito mais eficaz.

O treinamento deve ser apoiado por documentação, que pode assumir várias formas:

• Vídeo passo a passo ("screencast")
• PDFs com capturas de tela
• Diretrizes impressas
• Ajuda contextual (embutida no CMS).

Às vezes, a documentação combina alguns ou todos os itens acima. Seja qual for a sua escolha, lembre-se do nível de habilidade das pessoas que inserem o conteúdo. Muitas pessoas que trabalham em escritórios são competentes no Microsoft Word e no e-mail, mas podem ser desafiadas por tarefas de "design" básicas, mas necessárias, como dimensionar e cortar imagens. Lembre-se também de que a empresa provavelmente não está trabalhando com o mesmo conjunto de ferramentas de design profissional que o designer, então faça concessões também às preocupações tecnológicas da empresa.

É uma boa ideia guardar a escrita da documentação até o mais próximo possível do final do projeto. Lembre-se de que, se você alterar algo no projeto intermediário do CMS, talvez seja necessário atualizar a documentação para corresponder. Isso pode ser muito demorado (e confuso também), então tente coordenar as partes do seu projeto para que a documentação seja escrita assim que o processo de entrada de conteúdo for finalizado.

Juntando tudo…

Neste ponto, tendo seguido os passos anteriores, agora você deve estar sentado em um site bastante sólido. Independentemente do tamanho do seu projeto, agora é um bom momento para:

Revise seu conteúdo mais uma vez, comparando-o com os pontos listados em redação para a web acima.

Peça a um terceiro para revisar todo o seu conteúdo. Esta não é a tarefa do designer ou do escritor original. É melhor trazer alguém com uma nova perspectiva. Não revise seu próprio trabalho.

TESTE BETA

Quando você sentir que seu site está quase pronto para o público ver, é hora do teste beta - um processo de passar por todos os aspectos do site, certificando-se de que tudo apareça e funcione conforme o esperado. Considere esta lista de verificação, no mínimo:

• O site tem a aparência pretendida em todos os navegadores da Web direcionados? Os navegadores da Web incluem os usuais Internet Explorer, Firefox, Safari e Chrome, bem como aqueles que vêm com dispositivos móveis comuns. Se você estiver visualizando o site em um navegador de desktop até agora, poderá encontrar falhas inesperadas ao alternar para um tablet ou smartphone. Este é o momento de revisar minuciosamente seu site em uma variedade de dispositivos antes que ele possa ser considerado pronto para consumo público. Lembre-se: o público do seu site usará uma ampla variedade de dispositivos para visualizar seu site e ele precisa funcionar de maneira aceitável em todos eles. Você não precisa testar fisicamente seu site em todos os telefones ou tablets possíveis, mas deve testá-lo em alguns dispositivos comuns. Não saia e compre um Blackberry de cinco anos para fins de teste.
  Sites e serviços de "emulação", como o Spoon.net, gerarão visualizações do seu site em praticamente todos os navegadores ou dispositivos conhecidos pela humanidade, dando a você uma boa ideia de como ele ficará na maioria dos cenários.
• Os recursos interativos funcionam sem problemas.
• O contato ou outros formulários funcionam de forma previsível e geram a resposta correta para o usuário e destinatário das informações enviadas.
• As mensagens de erro são úteis e amigáveis.
• Função de links internos e externos.
• As imagens são dimensionadas corretamente.
• Todo o conteúdo do espaço reservado foi substituído pela cópia/imagens finais, etc.
• Links internos e externos, incluindo links de e-mail, funcionam corretamente.
• As integrações com software de terceiros, como provedores de serviços de e-mail, estão funcionando.

Neste ponto, é muito sensato recrutar alguém que não teve nenhum envolvimento no processo até o momento, e pedir-lhes para percorrer metodicamente cada página e recurso do site, observando quaisquer erros ou falhas que encontrarem. Não use alguém que está olhando para o site há meses. Os problemas a serem observados podem incluir erros de digitação, links incorretos, dimensionamento de imagens, falhas em dispositivos móveis específicos ou conteúdo ausente ou incompleto. (Certifique-se de dizer ao seu testador que o design do site está definido neste momento, para que eles não percam tempo analisando considerações que não sejam de conteúdo.)

Coordenação de pré-lançamento

Quando você se aproximar da hora do lançamento, precisará coordenar os outros esforços de marketing da sua empresa. Se você é ativo nas mídias sociais, escreva e revise o anúncio do seu site novo/reformulado e defina um cronograma para publicar o anúncio. Prepare-se para atualizar sua mensagem de correio de voz enviada e coordene a publicidade impressa — tudo o que é necessário para apoiar o lançamento do site.

Redirecionando o tráfego do site “antigo”

Se o seu novo site estiver substituindo uma versão anterior, provavelmente terá uma estrutura de URL diferente e você precisará mapear a estrutura antiga para a nova. Há duas razões para fazer isso. Primeiro, os mecanismos de pesquisa indexaram os URLs do seu site antigo. Essa indexação tem muito valor para quem busca o que sua empresa oferece. Quando você inicia um novo site com URLs diferentes, os antigos serão interrompidos e os usuários receberão uma mensagem de "página não encontrada" (Erro 404). Você deseja manter seu lugar suado nos mecanismos de pesquisa. Em segundo lugar, os visitantes do site podem ter páginas marcadas em seu site antigo e desejam retornar a elas. Se os URLs dessas páginas mudarem, você precisará garantir que os visitantes ainda recebam conteúdo relevante para suas necessidades, em vez de uma página que não existe mais.

Por exemplo, seu site antigo pode ter:

• https://oursite.com/company/history.html
• https://oursite.com/staff/california.html

enquanto o novo site tem:

• https://oursite.com/company-history
• https://oursite.com/staff/california

As diferenças são sutis, mas os computadores são coisas muito literais - para o navegador, a diferença entre "history.html" e "company-history.html" pode muito bem ser a distância entre Marte e a Terra. Você precisa percorrer a estrutura do site antigo e anotar todas as páginas que possuem informações equivalentes no novo site e suas URLs. Se o seu site antigo tiver muitas páginas, você pode usar uma ferramenta como o Powermapper para ajudar a automatizar o processo. Às vezes, URLs antigos e novos se alinham muito bem, como os acima. Outras vezes, um URL antigo pode não ter um equivalente no novo site. Isso geralmente acontece se você fechou uma divisão da sua empresa, interrompeu um projeto ou reorganizou um departamento. Independentemente do motivo, você ainda precisará de URLs exatos para trabalhar na próxima etapa. Existem três maneiras de lidar com URLs antigos:

• Se eles tiverem um equivalente como os exemplos acima, você poderá apontar o URL antigo para o novo. Para divergir para o técnico por um momento, isso é feito com um redirecionamento 301, que informa aos mecanismos de pesquisa e aos navegadores da Web dos usuários que um URL foi alterado permanentemente. Fica assim: Redirect 301 /company/history.html https://oursite.com/company-history
• Se os links não tiverem equivalentes, você pode enviar os visitantes do site para uma página que diz "Desculpe, não conseguimos encontrar o que você está procurando. Reprojetamos e reorganizamos nosso site e alguns conteúdos foram alterados ou movidos". e fornecer um mapa do site e uma opção de pesquisa.
• Você também pode apontar todos os URLs inexistentes diretamente para a página inicial.

Quanto maior a escala do seu site antigo, mais trabalho será necessário para redirecionar URLs antigos. Se você tiver análises em execução em seu site antigo, poderá optar por redirecionar apenas os 10 ou 20 principais URLs antigos para novos e definir um catch-all para todo o resto, apontando-os para a seção "Desculpe, podemos não encontrou o que está procurando..." ou a página inicial. Criar redirecionamentos catch-all, ou aqueles que correspondem a um padrão de URL específico, é um esforço técnico que não abordaremos aqui, mas você pode encontrar facilmente informações sobre arquivos .htaccess (para servidor Linux) ou arquivos web.config (para servidor NT ) no Stack Exchange ou outros recursos.

Nunca lançar em uma sexta-feira

Nunca é uma boa ideia lançar um site, especialmente um do qual muitas pessoas dependem, em uma sexta-feira ou logo antes de feriados. Se algo der errado, você pode não ter os recursos para corrigi-lo quando a maioria dos funcionários do escritório, fornecedores e outros terceiros que podem ajudar foram para casa no fim de semana. As segundas-feiras são as melhores para lançar um novo site, pois isso lhe dá a semana inteira para corrigir quaisquer problemas inesperados que possam surgir e muito suporte para ajudá-lo a fazer isso.

Lançar!

Depois de testar completamente o site, é hora de lançá-lo. As etapas específicas variam de acordo com o projeto, mas geralmente isso significa mover o site (arquivos, banco de dados, configuração) de um ambiente de desenvolvimento para um público, tornando-o visível para o mundo, ou simplesmente atualizar as configurações do servidor para permitir que os visitantes de suaempresa.com vejam o novo sítio.

Pós-lançamento

Estatísticas da Web

Analisar as estatísticas de visitantes do seu site pode fornecer informações vitais sobre como as pessoas estão usando seu site. Você precisará de pelo menos um mês ou dois de dados para fazer quaisquer determinações. Não fique muito preso aos números puros – todos eles são aproximados em um grau ou outro. As tendências devem ser seu foco principal. Aqui estão alguns pontos-chave a serem considerados:

• De onde vêm os visitantes? Motores de busca, tráfego direto (ou seja, alguém acabou de digitar o seu site.
• URL para o navegador), anúncios, links de outros sites, etc.
• Onde os visitantes moram? São principalmente locais, regionais, nacionais, internacionais?
Quais são as páginas mais populares?
• Quanto tempo os visitantes permanecem no site?
• Qual é a taxa de rejeição, ou seja, quantos usuários visitam apenas uma página do site antes de deixá-la totalmente?

O Google Analytics está entre os softwares de estatísticas da web mais usados ​​e você encontrará facilmente respostas para essas perguntas nos dados de alto nível que ele apresenta. Outros softwares de estatísticas da web, como KISSMetrics ou Clicky, também devem fornecer essas respostas prontamente.

Documentação técnica

Você também precisará de notas detalhadas sobre como várias partes do site são implementadas no CMS. Isso é diferente da documentação fornecida ao negócio. Much of your technical documentation will simply consist of the annotated elements discussed earlier in this document, including wireframes, style guide and Photoshop documents. Think about what information would be needed if you brought new people in to maintain the site, people who were not at all familiar with it. What do they require to pick up the project? They'll need:

• Credentials for the CMS, web server, and other services connected to the site.
• Written or video instructions on how to perform tasks in the CMS: adding news items, blog posts, swapping out photos — everything that someone can do to the site.
• Recommended technical maintenance — how often do the CMS and other services require updating?
• Notes on backups — what is being backed up, how often, and where is it backed up to?

Note: writing documentation of all kinds is one of a web professional's least favorite tasks, but it's very important. Don't slack on it. Think how terrible it would be to inherit a project without any technical documentation. Then use that dread as your inspiration! You don't want to leave anybody in a lurch down the line and doing this right will save time and frustration later on.

Cópia de segurança

This is often overlooked by businesses and designers alike. Schedule regular backups of the site's files and database. Daily is ideal. Your hosting company may provide an automated way to do this, but if they don't, there are plenty of effective services and tools available to facilitate this process. That way, if your files or database get hacked, erased, corrupted or otherwise damaged, you can restore them with copies from the previous day.

Depending on the size of your site, frequency of updates and some technical matters that vary with each site, you may want to schedule more frequent backups. Ideally, your site will be backed up off-site, that is, in a different place than where it is hosted. Services like Amazon S3 or Rackspace Cloud are ideal for this purpose. The idea is that if your website gets irrevocably damaged, a recent copy is stored in a different physical location, allowing restoration of the site to the last undamaged version.

Maintenance plan

Your maintenance plan, which should have been budgeted for before you started, should clarify roles and responsibilities for every aspect of the site. For example, if two articles per week are to be posted, who is responsible for this, and who is that person's backup? If your site requires photos or graphics to be created regularly, make sure this work is assigned and understood by all involved. Determine who will check links, re-size images, write blog posts, etc. Write a simple maintenance plan and share it with everyone involved in the site's care and feeding. Remember, a good website isn't a one-time event, but rather an extensible communication tool that requires regular updates to remain valuable, relevant and compelling to site visitors.

Solicit visitor feedback

After it's been online for a while, a great way to improve the impact of your site is to solicit visitor feedback. There are a variety of ways to do this, from simple online surveys to on-site focus groups. Site visitors often have trouble articulating what they like and don't like about their experience. With this in mind, it's important to craft very clear and specific questions when soliciting feedback. And remember, if you're going to take a significant amount of visitors' time, offer something in return — a product discount, prize, or simply a handwritten note thanking them.

FIN

OK, one more time for posterity: A good website isn't a one-time event, but rather an extensible communications tool. Once you've built a great website, keep the momentum going. Devote resources to regular maintenance, and check in with your site visitors regularly to identify areas for improvement.

Leitura recomendada

• "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability" by Steve Krug
  Helps readers understand the principles of intuitive navigation and information design.
• "Content Strategy for Mobile" by Karen McGrane
  Making the case for a mobile strategy, publishing flexibly to multiple channels, and adapting your workflow to a world of emerging devices, platforms, screen sizes, and resolutions.
• "Design Is A Job" by Mike Monteiro
  From contracts to selling design, from working with clients to working with each other, learn why navigating the business of design is just as important as the craft of it.
• "Grow your SEO" by Candy Phelps
  A beginner's guide to SEO.

DEFINITIONS

Prazo	Definições
Adobe Flash	A proprietary system for creating rich, interactive website features such as charts, graphs, animations and streaming video. The Flash player, that is, the browser add-on that allows users to via Flash content, is free. Flash authoring software is sold by Adobe.
Beta testing	The process of reviewing a website to ensure everything works as intended prior to launch.
Content Management System (CMS)	Software that provides website authoring, collaboration and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage the site's content with relative ease. Offers users the ability to manage documents and output for multiple author editing and participation. Popular CMS include WordPress, ExpressionEngine, Drupal, Joomla, Perch, Statamic, Craft, and hundreds more.
Grid system	A grid takes the available screen area and divides it up in to equal parts, for example, 10 columns of 96 pixels = 960 pixels. This makes layout and design easier. Many grid systems are available — use a search engine to see what's current.
HTML	Short for 'Hypertext Markup Language.' HTML is a tag-based language which defines the elements of content on a web page. For example, surrounding content in <p>...</p> tags creates a paragraph, while <strong>...</strong> creates bold text (adapted from Wikipedia).
Javascript (JS)	A programming language that runs inside a user's web browser, enhancing websites with a wide range of features such as mouseovers, slide shows, moving and fading elements, and more. Commonly implemented through a library like jQuery.
CSS	Short for 'Cascading Style Sheets.'' CSS is a set of instructions which define the layout and appearance of HTML elements. For example, CSS may specify that all paragraphs be 12 point Verdana, dark gray.
Esquema	Deals with the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.
Lorem Ipsum ("Greeking")	Placeholder text used by web and graphic designers to fill space in mockups and incomplete web pages until real content is provided. May be as old as the sixteenth century.
Meta tags	Information about a web page (for example, title, description, author) that helps search engines and other resources understand the contents of that page.
Responsive Web Design (RWD)	A set of web design techniques that insure a site adjusts its presentation appropriately for different devices. Term originally coined by Ethan Marcotte.
Otimização para mecanismos de busca (SEO)	The process of affecting the visibility of a website in a search engine's results.
URL	Stands for Uniform Resource Locator, that is, a unique address on the web that contains specific content. For example, tastyfruit.com/citrus/oranges
Wireframe	A visual representation of the layout elements of a web page, intended to show page structure, element placement and sizing.