WDD 231: Desenvolvimento Frontend para Web I

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

  1. Consulte a descrição do projeto, que contém especificações gerais do site.
  2. 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:

  1. 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

  2. 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.

  3. 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?

  4. 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.

  5. 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

  6. Wireframe: Construir um wireframe permite que você pense na estrutura de uma página responsiva e em como ela ficará em telas pequenas e maiores. Seu propósito é focar em estrutura, layout e funcionalidade antes de gastar tempo com cores, imagens, fontes e design detalhado. Existem muitas ferramentas que permitem construir wireframes, ou você pode fazer esboços à mão que podem ser fotografados ou digitalizados. Usar IA para gerar um wireframe em HTML não é permitido neste curso. Seu wireframe deve ser um esboço em preto e branco de uma viewport pequena e uma grande (desktop/tablet) para a página inicial. Exemplos da semana 1: visualização pequena e grande.
    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

  1. Adicione arquivos CSS de suporte conforme necessário. O estilo pode ser básico.
  2. Certifique-se de usar o esquema de cores e a tipografia selecionados listados neste plano no seu documento de planejamento do site.

Teste

  1. Faça uma autoavaliação e verifique seu próprio trabalho nesta página usando as seguintes ferramentas:

Envio

  1. Confirme (commit) e envie (push) seu documento para seu repositório wdd231.
  2. Volte ao Canvas e envie o URL deste documento.
  3. Não deixe de testar seu trabalho para ter certeza de que ele seja renderizado em um navegador.