11/30/13 Aula 01 - Mapa do site - Criativosfera

criativosfera.com/mapa-do-site/ 1/3
AULA 01 MAPA DO SITE
Curso: Web Design Intermedirio
Criativosfera - Curso Online de Design
O mapa do site praticamente auto-explicativo. Ele um documento que contem todas as pginas que um site ter e a hierarquia destas pginas. Montar
um mapa de site antes de comear um projeto ajuda a entender a dimenso que ele ter no final, e facilita na hora de planejar.
Engana-se quem pensa que o mapa do site apenas para definir quais itens estaro no menu. Claro, ele ajuda para isto tambm, mas no o nico
objetivo. O mapa do site tambm ajuda a termos uma visualizao do site pronto. Mas como definimos o contedo deste mapa? O briefing um bom ponto
de partida.
graas ao briefing o questionrio que seu cliente preencheu, explicando o que ele precisa no projeto que tudo comea. Na primeira etapa,
antes mesmo de preparar o mapa, voc precisa fazer suas pesquisas principalmente para entender como o pblico-alvo vai reagir com o contedo. Caso
seu pblico seja em maior parte pessoas idosas ou que possuem pouco conhecimento tcnico ou pouca experincia com sites, o menu (e todo o site)
precisa ser feito pensando nisto. De nada adianta criar dois menus se seu pblico mal sabe se virar com um.
O mesmo vale para o inverso: um pblico muito avanado tecnologicamente ter dificuldade em acompanhar uma pgina com muito contedo abarrotado,
sem separar em sub-pginas. Neste caso, separar o contedo em sub-pginas e inserir elas num sub-menu (ou num segundo menu) vai facilitar na busca
de informaes por esse pblico que compreende melhor como funciona um site.
Mas como ficaria o mapa de um site pronto? Vamos usar como exemplo a prpria Criativosfera:
Vamos assumir que estas so as nicas pginas do nosso site. Note como a pgina Cursos a que mais tem filhos (um parnteses aqui: no web design,
um item principal podemos chamar de me e sub-itens de filhos, mais um nvel abaixo de netos e assim por diante) e esses tambm possuem netos.
No nosso briefing, as aulas da Criativosfera tem como objetivo serem acompanhadas em srie, uma aps a outra. Portanto adicionar as aulas
individualmente no menu no seria a soluo ideal, mas adicionar as pginas dos cursos que contem a listagem das aulas seria interessante para um acesso
melhor.
Mas isso no todo o contedo que a Criativosfera ter. E a pgina inicial? Podemos incluir os itens dele no mapa do site tambm, para termos uma
ideia do que teremos.
Vamos supor que o briefing tenha pedido para dar algumas informaes rpidas e curtas sobre o que o site, um pequeno espao para promover alguns
cursos, outro para os apoiadores do projeto, links para redes sociais e depoimentos. Alm disto, deve ter a opo de se cadastrar na pgina inicial. Isso tudo
pode ser includo no mapa do site da seguinte maneira:
11/30/13 Aula 01 - Mapa do site - Criativosfera
criativosfera.com/mapa-do-site/ 2/3
Note como o Cadastro est com cor diferente. Fiz isto para saber que aquilo ser um link, que vai redirecionar seguindo a linha azul, levando at a pgina
Cadastro. No nosso site, isso o que chamamos de call to action (ou chamada para ao),um grfico que induz ao usurio tomar uma ao nesse
caso, um pedido para que ele se cadastre. Vamos falar mais de chamadas para ao na prxima aula deste curso.
Como nosso cliente informou que as informaes sobre o site sero curtas, no haver necessidade de fazer uma pgina a parte para incluir
estas informaes. O mesmo vale para a rea de promoo de cursos e outros itens. Independente de como ser mostrado no final, vamos incluir essas
informaes no nosso mapa para melhor visualizar o que teremos que desenvolver.
Exemplos de mapa de site
Utilizar exemplos reais facilita muito para entender o que exatamente vai num mapa de site.
Vamos tomar como exemplo o Design Blog para mostrar o mapa de site. Em vez de usar algum software para montar ele, tambm possvel usar texto
simples e se voc quiser mais liberdade, o lpis e papel sempre um combo til.
No nosso exemplo, vamos usar palavras negritadas como link para pginas fixas, e palavras itlicas para identificar informaes ou blocos que no so
linkadas a outras pginas.
Primeiro, vamos notar as sees bsicas do site:
Inicial Link para a pgina inicial do site
Sobre Um descritivo sobre o que o site trata
Categorias As categorias de artigos existentes
Curso de design Um link para um site que oferea cursos de design (no caso, a Criativosfera)
Colabore Pgina que mostra como algum pode colaborar com artigos
Contato Link para pgina de contato
Isso o mais importante que temos a mostrar no site, o bsico do bsico. Mas agora temos que complementar com os sub-itens, principalmente na parte de
Categorias. Aqui, teremos um link para as pginas que mostram todos os artigos dentro de cada categoria determinada. Como possumos apenas 6
categorias, no existe a necessidade de montar um menu separado.
Inicial
Sobre
Categorias
Geral
Design Grfico
Web Design
Freelance
Podcast
Opinio
Curso de design
Colabore
Contato
Caso tivssemos mais de 10 categorias (ou 10 itens de sub-menu), talvez seria interessante jog-los em um menu secundrio. Mais do que 20 e a melhor
maneira de arranjar seria criar um menu secundrio, escolher por exemplo 4 assuntos em comum e dentro de cada deles adicionar 5 sub-itens.
11/30/13 Aula 01 - Mapa do site - Criativosfera
criativosfera.com/mapa-do-site/ 3/3
A quantidade de sub-menus e menus secundrios depende inteiramente de quanto voc quer inserir no seu site. Se for um blog novo com pouco contedo,
por exemplo, monte o mapa do site j levando em conta quando o contedo for mais completo mas na hora de montar o menu coloque apenas o que j
existe no existe nada mais frustrante do que clicar num link e ler um em desenvolvimento. Ou voc coloca ele pronto, ou no coloca!
E quanto a itens que temos que colocar dentro das pginas mas que no so longos o suficiente para justificar uma pgina nova para elas? Na pgina inicial
queremos colocar links para as redes sociais, uma caixa com a lista de artigos mais lidos, etc.
Inicial
Twitter
Facebook
Feed RSS
Mais lidos
Busca
Links para parceiros
Sobre
Sobre o blog
Informaes dos colunistas
Categorias
Geral
Design Grfico
Web Design
Freelance
Podcast
Opinio
Curso de design
O que estamos procurando
Regra dos artigos
Como enviar seu artigo
Colabore
Contato
Perguntas frequentes
E-mail de contato
Vendo o mapa do site que montamos, j d para ter noo de como o site vai ficar. Nessa etapa no importante j preencher contedo ou escolher a
ordem dos itens.
Em relao a ordem dos itens, a regra de ouro sempre a ordem 1) Pgina inicial; 2) Sobre; 3) Outras sees; 4) Contato. A pgina inicial fica em
primeiro por ser um dos itens que permite ao usurio comear do zero caso ele se perca no seu site. Um link para uma pgina que explique o que o site
deve ficar ser o segundo para que o usurio facilmente descubra sobre o que tratado em seu site a exceo fica pra quando o objetivo muito bvio ou
explicado na pgina inicial. O contato fica geralmente por ltimo, assim o usurio precisa navegar o site inteiro antes de entrar em contato para perguntar
algo que j est respondido l.
Exerccio
Vamos montar um exemplo de briefing simplificado para que voc monte um mapa de site levando em conta o que voc aprendeu. O ideal desenhar o
mapa num papel pois ele permite rascunhar rapidamente sem se preocupar com cores, formas, etc. Ou podemos usar o mtodo que usei acima, em texto
mesmo.
Esse ser um exerccio contnuo que iremos retornar nas prximas aulas e vai ser parte do seu projeto maior.
Neste projeto, voc vai montar o seu portflio. O melhor briefing ser o que voc criar para si mesmo. Mas vamos te dar um empurro:
Projeto: seu prprio portflio;
Objetivo: mostrar seu trabalho e levar o usurio a entrar em contato;
Obrigatoriedades: pgina ou seo que mostre seus trabalhos e pgina de contato;
Agora fica a seu critrio: o que voc quer incluir no seu portflio? Vai adicionar uma biografia ou um currculo completo? Seus trabalhos ficaro disponveis
dentro do seu site ou ter um link para uma pgina externa (como o Behance)? E quanto a forma de contato: ter um telefone ou s via e-mail? E endereo
(caso voc tenha um escritrio e possa receber clientes)? Quais cores voc acha que identificam melhor voc? E quais fontes?
Esse exerccio no necessrio apresentar, j que ele faz parte de um projeto maior e parte do seu prprio julgamento saber se ele est adequado.
At a prxima aula!