S05 - Projeto: Planejamento do Site do Projeto
Visão Geral
O planejamento do site e da aplicação é uma etapa crítica no sucesso de projetos de design e desenvolvimento web. O planejamento do site serve como um modelo para você projetar e desenvolver seu projeto de site individual. 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. O documento será usado para se comunicar com o cliente e a equipe de desenvolvimento – que, neste caso, é só você.
Instruções
A tarefa é criar um documento em HTML de planejamento básico de site. 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 documento 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 é o identificador principal, sendo essencial para a
marca, visibilidade e reconhecimento, geralmente associado a um logotipo ou versão do logotipo. Um domínio
representativo disponível para compra geralmente é importante, mas não é exigido nesta aula. Forneça um nome de
site válido que seja relevante para seu projeto e um breve motivo para a escolha do nome do site.
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 deve tentar definir o escopo do conteúdo,
descrevendo quais serviços e informações serão oferecidos.
Exemplo: para o Clube de eBiking da Baía de São Francisco • O site fornece um centro para e-biking regional, listando informações sobre recomendações de trilhas e e-bikes, juntamente com um formulário de informações de associação.
- Cenários: Perguntas feitas por alguém que acessa o site e representa o público-alvo da
organização ou empresa. 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 apenas 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. Escolha entre uma e três fontes, no máximo. Indique onde cada
fonte escolhida 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. Inclua um esboço para a visualização móvel e para uma visualização maior, como a do
desktop, para a página inicial.
O que é um Wireframe? – UXNOW (YouTube)
Lembre-se de que você trabalhou com um determinado wireframe em um curso anterior. Página do País
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
- Confirme (commit) e envie (push) seu documento para seu repositório wdd231.
- Volte ao Canvas e envie o URL deste documento.
- Não deixe de testar seu trabalho para ter certeza de que ele seja renderizado em um navegador.