S05 — Projeto: Documento de Planejamento do Site
Visão Geral
O planejamento é uma etapa crítica para o sucesso de qualquer projeto. O planejamento do site serve como um modelo para projetar e desenvolver seu projeto. O objetivo desta tarefa é que você organize seus planos para o projeto proposto.
O planejamento do site é um documento em constante evolução que mudará conforme o projeto avança. Ele é usado para se comunicar com o cliente e a equipe de desenvolvimento – que, neste caso, é só você.
Instruções
A tarefa é criar um planejamento básico de site em HTML. Este será um único documento e o conteúdo necessário está descrito abaixo.
Lembre-se de que este é apenas um plano e talvez você precise ajustar alguns itens conforme concluir seu projeto na próxima semana.
Configuração
- Consulte a descrição do projeto, que contém especificações gerais do site.
- Crie um novo diretório chamado "projeto" e crie um novo arquivo HTML chamado "planejamentodosite.html".
Conteúdo
Inclua o seguinte conteúdo e use elementos HTML apropriados para delinear essas seções com descrições no documento do planejamento do site:
- Nome do Site: O nome do site ou domínio (junto com um logotipo) é o identificador principal,
sendo essencial para a marca, visibilidade e reconhecimento. Garantir um nome de domínio que esteja disponível
para compra normalmente é importante, mas não obrigatório neste curso. Você precisará fornecer
um nome de site válido e relevante para seu projeto, juntamente com uma breve descrição do motivo pelo qual você
o escolheu.
Exemplo: Clube de eBiking da Baía de São Francisco • Este nome representa um clube focado em bicicletas elétricas na área da Baía de São Francisco. Disponibilidade de domínio opcional:
bay-ebike.org - Finalidade do Site: A finalidade do site descreve o escopo do seu site, bem como os serviços
e informações que serão fornecidos.
Exemplo: para o Clube de eBiking da Baía de São Francisco • O site fornece um centro para e-biking regional, fornecendo informações sobre recomendações de trilhas e e-bikes, juntamente com um formulário de informações de associação.
- Cenários: Cenários são perguntas feitas por um visitante do site que representa o
público-alvo da organização. As perguntas ajudarão você a direcionar o conteúdo do site, pois fornecem respostas
às perguntas. Novamente, muitas das especificações de conteúdo serão fornecidas, mas comece a pensar no
público-alvo do site. Inclua pelo menos dois cenários.
Exemplo: para o Clube de eBiking da Baía de São Francisco • Qual é a melhor e-bike para áreas montanhosas? • Onde posso encontrar informações de contato dos diretores do clube?
- Esquema de Cores: O esquema de cores se refere às cores do site escolhidas minuciosamente.
Defina pelo menos duas cores e mostre onde cada cor escolhida será usada, como títulos, parágrafos, cores de
fundo, acentos e assim por diante. ! Use o esquema de cores selecionado neste documento.
O guia definitivo de cores para sites: escolhendo a paleta perfeita para sua marca online – Hocoos. O artigo explica por que as cores do site são importantes.
- Tipografia: A seção de tipografia do documento de planejamento fornece exemplos das fontes a
serem usadas e onde elas devem ser aplicadas. Você deve selecionar no mínimo uma e no máximo três fontes.
Indique onde cada fonte será usada (como títulos, corpo e assim por diante). Outras fontes podem ser usadas para
circunstâncias ou seções especiais, conforme necessário.
Tipografia no web design – Stacey Corrin
- Wireframe: Crie um wireframe do layout da página inicial do seu projeto. Os diagramas de
wireframe podem ser simples, e não precisam ter conteúdo real, apenas representações do conteúdo e seu
relacionamento de layout. Forneça um esboço da página inicial para a visualização móvel e para uma visualização
maior (área de trabalho ampla).
O que é um Wireframe? – UXNOW (YouTube)Lembre-se de que, anteriormente no curso, você trabalhou com um determinado wireframe. Página do País/Local
CSS
- Adicione arquivos CSS de suporte conforme necessário. O estilo pode ser básico.
- Certifique-se de usar o esquema de cores e a tipografia selecionados listados neste plano no seu documento de planejamento do site.
Teste
- Faça uma autoavaliação e verifique seu próprio trabalho nesta página por meio das ferramentas comuns usadas durante a aula para validação, acessibilidade, práticas recomendadas, contraste de cores, SEO e desempenho.
Envio
- Faça commit e push em seu trabalho para enviá-lo ao repositório do seu curso.
- Volte ao Canvas e envie o URL.