Não é incomum terminar um projeto de reformulação de um site apenas para olhar para trás e pensar: 'Eu teria feito as coisas de forma diferente se eu soubesse o que sei hoje.'
Todos nós já passamos por isso. Ficamos entusiasmados com um novo projeto, brincamos com o cliente, assinamos contratos e começamos a criar protótipos. A vida parece boa, mas as bases do projeto estão instáveis.
Inevitavelmente, as revisões e o aumento do escopo começam a se infiltrar assim que o primeiro conceito de design é apresentado, e é uma ladeira abaixo a partir daí. A comunicação se desfaz, nada sai como planejado e, no final das contas, o site recém-projetado se parece com a monstruosidade que você foi contratado para consertar.
Design de classe mundial e experiência de usuário não começa com uma maquete bonita - é baseada no planejamento estratégico e uma visão de design que se concentra nos objetivos da empresa. O objetivo principal não pode ser, “Vamos deixar um site mais bonito”.
Os designers de sites são responsáveis pela experiência do usuário ( UX ) e interface do usuário ( CEBOLA ) É nosso trabalho garantir que os usuários tenham uma ótima experiência ao interagir com as interfaces que projetamos. Isso requer um planejamento completo desde a concepção do projeto.
Este artigo descreve um processo confiável que ajudará a garantir que a próxima reformulação de seu site seja construída sobre uma base sólida.
O valor da pesquisa pré-projeto de redesenho de website
Para demonstrar o processo, vamos percorrer as fases de um redesenho do site completado para Arqueologia Sudoeste , uma organização sem fins lucrativos que explora e protege sítios arqueológicos no sudoeste dos Estados Unidos.
Após uma investigação preliminar do campo do cliente e concorrência , inspecione de perto cada ativo do site que está disponível. Essa análise é cobrada separadamente e ocorre antes que uma cotação de projeto seja escrita. Trabalhar dessa forma evita estimativas ambíguas ou infladas que resultam quando os web designers tentam levar em conta problemas que podem rastejar para a superfície mais tarde em um projeto.
No caso da Archaeology Southwest, me deparei com um site que precisa urgentemente de atenção - montanhas e mais montanhas de conteúdo desordenado dentro de um antigo portal CMS. Era ruim, então comecei a criar ordem.
como fazer um bot no discord mobile
Etapa 1: familiarize-se com o conteúdo
Ao reformar uma casa, é importante tentar recuperar materiais valiosos antes do dia da demolição. O mesmo princípio se aplica a design do site . Você precisa percorrer o site página por página e retirar todo o conteúdo. Como designers, devemos descobrir qual conteúdo merece ser um tipo de postagem exclusivo e quais páginas são estáticas.
Depois de fazer isso, crie uma estratégia de como organizar tudo, mas não decida qual conteúdo deve permanecer e o que deve ser removido. Por que não?
Ao lidar com empresas e organizações do mundo real, há várias pessoas diferentes responsáveis pelo conteúdo de um site, e a quantidade de conteúdo existente pode ser impressionante. A melhor abordagem é classificar tudo primeiro.
Normalmente começo com a navegação principal e vou página por página. Assim, terei o arquitetura de informação e o mapa do site fora do ar antes da primeira reunião com o cliente.
Infelizmente, o site da Archaeology Southwest não era típico. A maioria dos links não era acessível por meio da navegação superior e ficava oculta no conteúdo. Eu teria uma surpresa desagradável se eu citasse o projeto baseado apenas na navegação.
Conversando com várias pessoas da equipe do cliente, consegui obter uma imagem melhor do escopo do projeto e, após uma reunião com o cliente, consegui identificar o foco do site, fluxo de trabalho, conteúdo e recursos. A partir daí, criamos os seguintes tipos principais de conteúdo (alguns novos, alguns existentes):
Etapa 2: Crie o foco. Simplificar. Organizar.
Uma vez que todo o conteúdo está organizado em caixas rotuladas, é hora de desenvolver o plano para uma nova estrutura, que mostrará o conteúdo em sua melhor forma. Mas primeiro, precisamos criar o foco.
De acordo com a Archaeology Southwest, as pessoas visitam seu site para pesquisar informações sobre projetos em andamento, aprender sobre eventos futuros e ler uma revista mensal. Essas atividades respondem à pergunta: “ o que que as pessoas fazem no site? ” mas não revele porque as pessoas visitam o site em primeiro lugar.
O ' porque ”É o foco do site. Para encontrar o foco, olhe para o núcleo da organização.
Nesse caso, identifiquei “local” como o coração da Arqueologia do Sudoeste. Sem localização, não haveria sítios arqueológicos, nem ruínas e, certamente, não haveria museus ou exposições. Tudo na arqueologia se relaciona com a localização.
Com um foco identificado, podemos simplificar e organizar. Para Archaeology Southwest, comecei dividindo o conteúdo em categorias que não estavam relacionadas a locais, como páginas de equipe e relatórios anuais. Depois de arrumar um pouco, acabei com este mapa bruto:
A imagem acima representa as duas áreas principais que surgiram: Coisas para fazer e Localizações . Coisas para fazer (à esquerda) abrange atividades que um visitante do site pode aprender e fazer. Localizações (à direita) concentra-se no conteúdo do site relacionado a locais específicos. Por que estruturar dessa forma?
A ideia é que um usuário comum pode não saber o nome de um vídeo ou projeto, mas provavelmente saberá o nome de um local. Dessa forma, os visitantes podem encontrar conteúdo relacionado ao local.
Além disso, cada bloco de cor em Localizações representa um tipo de postagem exclusivo. Do ponto de vista organizacional, exposições, aulas e exposições online são eventos de natureza diferente.
No antigo site de Archaeology Southwest, havia páginas estáticas separadas para uma revista e uma loja online onde os visitantes podiam comprar a revista. Para tornar a compra mais simples, integrei uma opção de compra no modelo da revista.
como criar token ethereum
A estrutura organizacional restante era simples:
- Uma página “Sobre” para aprender mais sobre a organização
- Um link direto para a página “Loja”
- Uma página de “Doação”
- Uma nova página de “atualizações”
As páginas da loja e de doações são rentáveis, por isso era fundamental que estivessem incluídas na navegação principal.
Assim que o plano organizacional estiver concluído, é hora de conectar o conteúdo real.
Etapa 3: Envolva o cliente
O mapa do site inclui tipos de página, mas não inclui o mapeamento de conteúdo. Web designers experientes sabem que a maioria dos problemas ocorre quando um cliente começa a adicionar conteúdo a seu site. Para evitar esse problema, mantenha o cliente conectado desde o início.
Para Archaeology Southwest, criei um Google Doc que incluía o mapa do site e pedi ao cliente para mapear seu conteúdo antigo com a nova estrutura.
Se algo não se encaixasse perfeitamente, tratamos disso mais tarde. Esta é uma etapa crítica. Por quê? Além de envolver o cliente no processo, ele descobre problemas de estrutura antes do início da implementação.
Nesse caso, alguns dos itens do menu do mapa do site foram alterados e, como o cliente tinha várias páginas de doação, fazia sentido criar um tipo de postagem exclusivo apenas para isso.
Criar estrutura visual por meio de wireframing
Nesta etapa, começo a dar ao trabalho uma estrutura visual. Para que o sistema funcione bem e integre com sucesso a noção de que “tudo está relacionado à localização”, criei uma relação bidirecional entre os tipos de postes.
Esta é a ideia básica: quando os visitantes acessam o site Archaeology Southwest e selecionam o Grand Canyon, eles verão informações sobre esse local, mas também encontrarão informações relacionadas a projetos, eventos, exposições e tudo o mais que os administradores do site marcarem como local- específico.
Como o link é bidirecional, os visitantes também podem chegar ao Grand Canyon visitando a página de um projeto. No final das contas, acabei com isso:
A página de índice de locais mostra todos os locais com o mais recente no topo. A barra de pesquisa é a primeira coisa que o usuário vê ao chegar na página. O mapa do Google ocupará cerca de 80% da tela. Isso permite que os usuários escolham pontos no mapa e, conforme eles rolarem ou pesquisarem, a grade da lista aparecerá.
Em uma única página de local, o corpo principal está à esquerda, pois é a informação mais importante. As metainformações relacionadas são secundárias, portanto, estão à direita. Para obter um layout bem equilibrado, é crucial ter uma hierarquia distinta entre o primeiro, o segundo e o terceiro bloco de elementos. Isso permite que o olho se mova sem esforço entre as seções.
No layout Archaeology Southwest, o olho do usuário começa com o cabeçalho, depois se move para o bloco de conteúdo e, finalmente, segue para a barra lateral direita. Cada parte do conteúdo relacionado é exibida em ordem de relevância. Por exemplo, se o usuário estiver lendo sobre o Grand Canyon, esse conteúdo provavelmente será seguido por fotos e um mapa.
Como este é principalmente um site educacional, é importante ter uma opção “Relacionado a este local”. No entanto, não há muito conteúdo associado exclusivamente a cada local, então combinei o conteúdo raramente usado (mas relacionado) em um único bloco sob o corpo.
Colocar revistas e miniaturas de vídeo sob o conteúdo relacionado adiciona elementos visuais adicionais e direciona os usuários para a página “Comprar”. A página é completada mostrando os locais relacionados. Essa é uma ótima maneira de estimular os usuários a explorar ainda mais o site. A próxima etapa é continuar essa estrutura para outros tipos de post.
como usar o node js em html
Forneça à página inicial uma meta clara
Com um modelo geral para tipos de postagem em vigor, posso me concentrar na página inicial. A primeira etapa é definir o objetivo da página inicial - esta é uma parte importante do design da IU. A pesquisa do cliente mostrou que muitos usuários tropeçam no site sem entender totalmente o que é. Portanto, uma introdução e um texto de boas-vindas devem ser a primeira coisa que os usuários veem.
O novo foco principal gira em torno do bloco secundário de locais. Isso é seguido por tudo o que está acontecendo em archaeologysouthwest.org (a revista atual, blog, eventos, boletim informativo e assim por diante). Aqui está a iteração do processo de layout:
Com a V1 (esquerda), projetei um layout básico que lembra a página inicial original. Não há muita hierarquia. A primeira coisa que os usuários veem é a localização em destaque, mas, a partir daí, provavelmente se perderão nas colunas.
Para V2 (centro), criei uma coluna separada que é mais fácil para o olho acompanhar. No entanto, ainda pode ser melhorado. É aqui que o conhecimento do conteúdo desempenha um papel importante. Eu sei que Archaeology Southwest nunca tem mais do que dois eventos acontecendo ao mesmo tempo, então não faz sentido ter espaço para vários eventos na página inicial.
Na V3 (à direita), me concentrei nos próximos eventos. Se, por algum motivo, houver mais de dois eventos, o usuário pode clicar no botão “Mais” e ver o resto. Eu também coloquei ênfase adicional na revista atual, uma vez que é o ganhador de dinheiro do cliente. Os usuários começam no topo e descem em um padrão F. O fluxo do olho é:
Local de destaque> Bem-vindo> Revista> Eventos> Notícias
Com um wireframe visual e a estrutura do site no lugar, é muito mais fácil solidificar os recursos e como as coisas funcionarão. Neste ponto, tenho outra reunião com o cliente para discutir a funcionalidade e o fluxo da interação do usuário, ambos muito mais claros neste estágio.
Ainda haverá revisões mais tarde? Sim, mas serão ajustes, não mudanças de processo inteiro. Mais importante ainda, não haverá surpresas.
Incorpore o guia de estilo da marca
Agora vem a parte emocionante - converter os wireframes em algo que as pessoas usarão e experimentarão. Para este projeto, tive como objetivo tornar o conteúdo escrito fácil de digerir, implementando cores de marca e tipografia.
as cinco leis da percepção gestáltica
Experimente combinações de tipografia
A tipografia é parte integrante de um bom web design, portanto, devemos descobrir nosso esquema de tipos com antecedência. A maior parte da identidade Archaeology Southwest usa a fonte Univers Condensed Light e Adobe Caslon. Não havia regras para quando o Adobe Caslon deveria ser usado, mas percebi que não era usado com tanta frequência quanto o Univers.
Conduzi um pequeno estudo de fontes para ver quais pares criam o melhor ambiente para uma organização profissional sem fins lucrativos. No entanto, eu também não queria que meu esquema de tipo parecesse muito diferente do material de marketing do cliente.
Depois de fazer comparações de fontes, ficou claro que Adobe Caslon deveria ser a fonte do título e Univers seria usada para as legendas. Definir os títulos principais em maiúsculas e minúsculas dá à marca uma sensação mais pessoal, enquanto todas as letras maiúsculas criam mais uma vibe corporativa.
Refine a aparência do site
Decidi criar uma experiência leve e aberta para que os usuários sentissem que Archaeology Southwest é acessível e altamente competente. Com base em dados analíticos, a maioria dos visitantes usa navegadores de desktop (provavelmente porque a maioria das pessoas visita o site para pesquisar). Portanto, meu foco inicial era projetar para usuários de desktop.
Ao chegar de desktops, eu queria que os visitantes vissem imediatamente o local em destaque, o texto de boas-vindas e os próximos eventos, seguidos de parte do título da revista. Dessa forma, as pessoas primeiro veem o que a empresa é e o que estão promovendo.
Em dispositivos móveis , as prioridades são um pouco diferentes. Como os usuários estão acessando informações em trânsito, os eventos são mais importantes, portanto, são colocados no topo da lista.
Também atualizei o botão de doação no rodapé para ficar mais amigável, alterando-o de um botão para uma frase.
Finalização forte: cuidado com os detalhes
Existem dois motivos pelos quais os usuários acessam a página de detalhes - eles querem saber mais sobre um ponto de referência ou já sabem sobre um local e estão procurando informações adicionais (direções, números de telefone etc.). Portanto, é importante apresentar as duas opções imediatamente para que os usuários não tenham que pesquisar.
Decidi separar a coluna de detalhes da área de conteúdo para dar mais peso e tornar a página mais interessante. Isso ajuda a criar uma hierarquia de composição, de modo que quando um visitante chega à página, ele primeiro vê o título da página seguido por uma pequena galeria de imagens e, em seguida, a coluna de detalhes.
Esse tipo de design garante que os usuários notem os detalhes adicionais de um local imediatamente. Um pequeno acolchoamento extra ao redor da coluna mantém os olhos focados e torna mais fácil examinar as informações.
A visão móvel entra em colapso como seria de esperar. O conteúdo é apagado primeiro e as metainformações seguem. Coloquei vídeos e revistas por último na página móvel, pois são menos importantes para os usuários móveis. Outras páginas seguem a mesma estrutura para criar um fluxo e uma experiência consistentes.
Redesign da web é construído sobre uma base de planejamento cuidadoso
Olhando para trás, para o processo de redesenho do site, é evidente que a maior parte do tempo foi dedicada à organização e ao planejamento. Apenas 30% do projeto foi gasto no design do site.
modelo de objeto de página selênio java
Freqüentemente, quando designers mostram seu trabalho, eles falham em transmitir quanto tempo é dedicado às porcas e parafusos da comunicação, levando designers inexperientes a pular direto para as maquetes. O resultado? Projetos descarrilados e clientes insatisfeitos.
Um planejamento detalhado deve ser feito para que o redesenho de um site seja bem-sucedido. Reservar um tempo para realizar a pesquisa do pré-projeto, familiarizar-se com o conteúdo existente e envolver o cliente são etapas cruciais.
Em última análise, não há maneira de contornar isso; o caminho para incríveis redesenhos de sites e confiança profissional é pavimentado por uma abordagem metódica para a organização de projetos.
Compreender o básico
O que é design de site?
O design do site é focado em organizar o conteúdo escrito, gráfico e visual em páginas da web bem organizadas. O melhor design de site torna esse conteúdo fácil de acessar, navegar e entender.
O que você faz como web designer?
Os web designers são responsáveis pela estética ou experiência visual de um site. Eles trabalham com texto, imagens e gráficos e criam hierarquia informativa por meio de elementos de design como escala, equilíbrio, cor e forma.
Porque você precisa de um site?
As empresas usam sites para fornecer informações, promover serviços e vender produtos. As necessidades variam, portanto, uma estratégia de site bem considerada é uma parte importante do processo de planejamento e design do site.
