Criando um Site Passo a Passo: Parte 5

Série: “Criando um Site Passo-a-Passo.”

 

Olá, pessoal.

Continuando a série “Criando um Site Passo-a-Passo“, após termos visto alguns conceitos importantes, vamos colocar a “mão na massa” a partir de agora.

Simularemos aqui, a criação de um site para uma locadora de vídeo, ok? Então vamos lá.

1º – BRIEFING

Nome da Empresa

  • CarlosHPS Vídeo-Locadora

Ramo de Atividade

  • Vídeo Locadora

Pontos Fortes:

  • Atendimento
  • Promoções constantes
  • Entrega em domicílio
  • Catálogo virtual

Objetivo:

  • Disponibilizar o acervo de DVD’s da CarlosHPS Vídeo-Locadora aos seus clientes e usuários em geral da Internet.

Este seria um breve resumo do briefing da empresa. De posse dessas informações, faz-se uma pesquisa de no mínimo 10 sites concorrentes ou não, do mesmo ramo de atividade para se ter uma noção do que já se aplica na web. Sem esquecer de também solicitarmos ao cliente, peças publicitárias, manual de identidade visual e tudo o que for possível para a complementação do nosso conhecimento da empresa.

2 – MAPA DE SITE (Sitemap)

Como também foi visto na 3ª parte desta série (Criando um Site Passo-a-Passo: Parte 3), após esta pesquisa, criamos um esquema que será manuseada e compreendida pelo cliente e pela equipe envolvida na implementação do projeto.

Um mapa de site é a representação gráfica da estrutura de um website, do ponto de vista da distribuição do conteúdo através de páginas e do caminho mais simples (links) a ser percorrido pelo usuário para chegar à página desejada.

Vejamos como ficou o mapa da CarlosHPS Vídeo-Locadora:

Fig. 01: Mapa do site da CarlosHPS Vídeo-Locadora

Fig. 01: Mapa do site da CarlosHPS Vídeo-Locadora

3 – WIREFRAME

Digamos que seja o “primo pobre” do layout…rsrs

O wireframe é um “esqueleto”; uma estrutura simples que nos auxilia na produção do site, tornando o processo mais ágil, padronizada e eficiente. Seu maior objetivo é determinar onde cada conteúdo se encaixará no site, levando em consideração o grau de importância com relação aos demais objetos que comporão o layout como um todo.

Complicado?

“Né nada”!

Veja o exemplo do wireframe básico do nosso projeto:

Fig. 02: Wireframe básico da CarlosHPS Vídeo-Locadora

Fig. 02: Wireframe básico da CarlosHPS Vídeo-Locadora

Lembrando que é uma estrutura básica. Caso haja necessidade, podemos detalhar mais. Fica a critério da situação.

É isso aí, pessoal.

O site a ser montado terá este layout:

Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora

Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora

Quem desejar criar seu próprio mapa de site e wireframe e quiser me enviar pra eu dar uma olhadinha, fiquem à vontade.

Próximo artigo (Criando um Site Passo a Passo: Parte 6), veremos sobre o fatiamento do layout da CarlosHPS Vídeo-Locadora e como montar sua estrutura básica em HTML e CSS.

Até lá.

CarlosHPS Webdesigner 8)

Webtutoriais:34547DA3


Posts Relacionados
Comentários ( 47 )
  1. LuisEduardo
    17 de outubro de 2008 at 21:55
    Responder

    Cara parabéns pelo Site.
    Esta tutorial e Show de Bola.
    Flw

  2. CarlosHPS Webdesigner
    17 de outubro de 2008 at 22:12
    Responder

    Opa, Luis

    Obrigado pela sua opinião positiva. Fico feliz em poder ajudar as pessoas.

    Um abraço.

    CarlosHPS 8)

  3. Alex
    6 de novembro de 2008 at 20:19
    Responder

    Cara, muito bom seu site! sem comentários, bom seria se todos profissionais de web gostassem de se dedicar aos usuários iniciantes como voce faz..valeu pelas dicas..abraço.

  4. CarlosHPS Webdesigner
    6 de novembro de 2008 at 20:59
    Responder

    Grande Alex,

    A Internet é isso: compartilhar conhecimentos e, se o pouco que eu faço, já ajuda muita gente como você, já me sinto satisfeito.

    Obrigado pela força.

    Abração.

    CarlosHPS 8)

  5. xD
    24 de novembro de 2008 at 17:56
    Responder

    ow,
    ce sabe criar jogo online??
    uma pequena pergunta8O

  6. CarlosHPS Webdesigner
    24 de novembro de 2008 at 18:27
    Responder

    Olá, Yago Meu forte não é trabalhar com jogos on-line, mas entendo um pouco como funciona o processo 😛

  7. Stefanie
    21 de Março de 2009 at 10:11
    Responder

    meu não consiso criar meu site tem como me explicar nos minimos detalhes?
    Quero criar um site e ja ir pensando oque vou colocar, mas para isso tenho que criar o site primeiro né?
    me ajuda por favor:roll:

    • CarlosHPS Webdesigner
      22 de Março de 2009 at 16:02
      Responder

      Oi, Stefanie
      Se você seguir a série de tutoriais, garanto que conseguirá fazer seu site.
      Ela está toda explicadinha passo a passo, é só acompanhar.

      Boa sorte.

      CarlosHPS Webdesigner 8)

  8. Kleberson Leite
    16 de junho de 2009 at 21:02
    Responder

    Olá Carlos.. Fico feliz em saber que existem profissionais interessados em passar aos iniciantes a forma correta de trabalhar com website.
    Gostei bastante da sua iniciativa, dos posts e do BLOG.
    Enfim, tudo aqui ta muito legal…
    Abraços,
    Kleberson Leite 😀

    • CarlosHPS Webdesigner
      17 de junho de 2009 at 11:12
      Responder

      Opa, Kleberson
      Seja bem-vindo ao mundo do Design Web 😀
      E são postagens como esta que me dão mais entusiasmo para continuar meu trabalho.
      Obrigado.

      CarlosHPS Webdesigner 8)

  9. Jônatas
    25 de junho de 2009 at 10:49
    Responder

    Caramba, Carlos… Seu site é demais, e esse artigo então…
    Obrigado por se dedicar a nos passar coisas que serão úteis e necessárias no dia-a-dia, e o melhor, sem cobrar nada, apenas por amor à causa.
    Que Deus te abençoe.
    Abraços
    Jônatas

    • CarlosHPS Webdesigner
      27 de junho de 2009 at 23:31
      Responder

      Que bom que gostou, Jônatas
      Fico extremamente satisfeito e ver opiniões como esta.
      Obrigado.

      CarlosHPS Webdesigner 8)

  10. Isaac
    1 de julho de 2009 at 21:08
    Responder

    Cara,to acompanhando seu tutorial e achando muito interessante.
    Baixei o programa DreamWeaver CS 4 ontem e montei até uma estrutura bem simples de um site seguindo uma video aula q eu achei no Youtube.
    A video aula é bem legal,mas vc ensina mais do q fazer um site,vc dá umas  dicas  de como se tornar um Web Designer e eu achei isso legal da sua parte.
    Valew por compartilhar com outras pessoas os seus conhecimentos,não é qualquer um q tem atitudes desse tipo. 
    Obrigado mesmo.
    Abraço. 😀

    • CarlosHPS Webdesigner
      2 de julho de 2009 at 9:46
      Responder

      Opa, Isaac
      Fico felicíssimo em saber disso. Tenho a filosofia de “fazer o bem sem olhar a quem” .
      Obrigado pela opinião positiva.
      Sucesso!! 😀
      CarlosHPS Webdesigner 8)

  11. Diego RP
    6 de julho de 2009 at 2:21
    Responder

    Cara muito bom seu site tem d td pra qm que inicia na area , e para o aprimoramento d qm ja sabe um pouco muito bom msmo 😀 😀 😀 :mrgreen:

    • CarlosHPS Webdesigner
      6 de julho de 2009 at 2:27
      Responder

      Obrigado, Diego /

      CarlosHPS Webdesigner 8)

  12. Andre Lopes
    18 de setembro de 2009 at 17:19
    Responder

    Muuito legal mesmo!!! :mrgreen:
    Entretanto onde está a Pagina 4 … ❓
    Vlw … Site muito Legal -UP

  13. luiz
    15 de outubro de 2009 at 19:05
    Responder

    Olá , seguinte meu dreamwaver MX é em português e eu não estou conseguindo uma apostila ou tutoriais que me ajudem a criar um site , pode me ajudar? 

    • CarlosHPS Webdesigner
      16 de outubro de 2009 at 13:39
      Responder

      Luiz,
      Material pro MX está difícil, cara. :S Mas tenta no http://www.apostilando.com

      Boa sorte.

      CarlosHPS Webdesigner 8)

  14. Junior Batista | 15 anos | Itu-sp |
    14 de dezembro de 2009 at 8:07
    Responder

    isso que é dedicação, Carlos, Você responde todos os comentários, sou estudante de web design, comecei ja faz 3 semanas e estou a procura de uma fonte de ajuda, acho que encontrei. Obrigado pelo seu entusiasmo em ajudar-nos!
    Uma perguntinha, qual é o termo mais correto para se usar, por exemplo quando alguem pergunta oque eu faço da vida. EX: Oque voce faz da vida?
    Eu: Eu sou web designer
    Eu: Eu sou designer digital
    Eu: Eu sou web desenvolvedor (ou developer)
     
     
    Qual termo faz mais sentido?
     
    Abraços 8)

    • CarlosHPS Webdesigner
      15 de dezembro de 2009 at 9:56
      Responder

      Oi, Junior Batista
      Eu faço questão de responder as pessoas devido eu “amar” o que faço. 🙂
      Quanto à denominação, eu utilizo duas:

      Webdesigner
      Desenvolvedor Web

      Não devemos ter medo, vergonha ou receio de dizer o que somos e o que fazemos. É preciso disseminar as corretas nomenclaturas às nossas profissões, mesmo que pareçam estranhas ou desconhecidas. E como as conhecerão se ninguém nos chama corretamente, não é verdade? 😉

      Grande abraço.

      CarlosHPS Webdesigner 8)

  15. Jéssica Nathany
    12 de Janeiro de 2010 at 17:28
    Responder

    Cara este blog é super 10 ensina coisas diversas e nas quais devemos aprender. Preciso de muitas dicas e truques para a criação do meu site. Virei sempre aqui.

  16. Jair
    24 de Janeiro de 2010 at 13:26
    Responder

    Ola, gostaria de saber se vale realmente investir em programação…
    Pode me dizer mais ou menos qual q remuneração e como são os trabalhos, extressantes, chatos ou complexos, mas fáceis…

    • CarlosHPS
      27 de Janeiro de 2010 at 8:28
      Responder

      Oi, Jair
      Programação para web está em alta e, para quem não tem nível superior, ganha em torno de R$ 1.500,00 a R$ 2.000,00. Mas isso depende de cada região, de qual linguagem você domina, se tem cursos agregados como inglês, e por aí vai. Você ganha mais a medida que estuda mais.

      Quanto ao stress… isso tem em toda profissão. Eu que trabalho com web tento me divertir trabalhando, pois é algo que faço com extremo prazer. No entanto, o stress por atraso de projetos, por maus clientes, por computador que queima, por noites em claros… isso faz parte. E não existe nada fácil nem difícil, mas sim, pouco ou muito trabalhoso. Depende muito de você e do seu conhecimento adquirido.

      Agora, chato, aí fica difícil de dizer, pois só na prática mesmo pra você poder avaliar se o trabalho é chato ou não. Tem gente que adora, outros, odeiam.

      Boa sorte.

      CarlosHPS Webdesigner 8)

  17. gminfo
    3 de Fevereiro de 2010 at 2:05
    Responder

    Carlos, procurei a parte 4 do tutorial “Criando um Site Passo-a-Passo…” mas não encontrei. Já li todos desta série, muito bom! Parabéns

  18. Jonã Machado
    25 de Fevereiro de 2010 at 20:36
    Responder

    Cadê a bendita quarta parte que não acho?

  19. Alexandre
    17 de Março de 2010 at 12:23
    Responder

    Carlos, show d+++++++++++++++ , eu estava com minhas ideias turvas…
    apos ver seu blog as coisas foram pra frente.. estava tentando fazer um layout pro site de onde trabalho e estava desanimado e percorrendo o blog as ideias foram melhorando… sucesso pra vc! 😛

    • CarlosHPS
      17 de Março de 2010 at 13:45
      Responder

      Opa, Alexandre
      Fico feliz em ter encontrado seu “porto seguro” 😀
      Grande abraço.

      CarlosHPS Webdesigner 8)

  20. Alexandre
    17 de Março de 2010 at 13:02
    Responder

    show de bola esse blog! 😉

  21. Felipe Veronez Murari
    1 de outubro de 2010 at 8:25
    Responder

    Pessoal nao estou no lugar certo mas esta area foi a unica que encontrei para deixar uma duvida.
    Meu problema é o seguinte, queria saber como criar aqueles layouts para anuncios personalizados no mercado livre. No qual aonde escrevem a descricao do produto e colocam as imagens sao editaveis pelo mercado livre. e conforme eu escrevo a descricao ela nao sobreponha a imagen de baixo mais sim faça com que ela deça.
    Tentei colocar uma div, porem quando escrevo nela ela sobrepoe a imagem de baixo ao inves de joga-la mais para baixo
    alguem me ajuda? Obrigado desde ja e parabéns!

  22. jhon
    16 de dezembro de 2010 at 8:08
    Responder

    Sem querer encontrei seu site.. pelo que vi ateh agora… parece ser muito bom…
    Gostaria de saber se existe algum tutorial nele ensinando a fazer essas fitas que vc colocou nas postagens… tipo:top locação , lançamento… tem algum tutorial no seu blog ensianando a fazer isso no FW??? flws ateh+++…

  23. Daniel
    13 de Janeiro de 2011 at 22:05
    Responder

    Sem comentários, a idéia que estava tendo agora esclareceu mais. Sem dúvida muito bom esse blog.

    • CarlosHPS
      16 de Janeiro de 2011 at 10:07
      Responder

      Olá, Daniel
      Eu é que agradeço pela sua participação 😉
      Abraços.
      CarlosHPS Webdesigner 8)

  24. Mizael almeida
    26 de Janeiro de 2011 at 23:16
    Responder

    Primeiramente, parabéns pelo site e pelos tutoriais (que, inclusive, me ajudaram muito)
    e pelo trabalho contínuo pelos iniciantes na área e até pelos que já tem certo conhecimento (já estou até pensando em me matricular em um dos cursos on-line).
    Gostaria de saber sobre algo que me chamou a atenção nesta página em particular:
    No final desta etapa há uma figura do resultado final da página a ser criada. Porém, eu já concluí este tutorial e, há uma parte, mostrada na figura desta página (Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora) que, de acordo com o WIREFRAME mostrado logo acima, seria a “Chamada Principal” (Entre o topo e o conteúdo) que, em momento algum do tutorial, é mencionada.O que seria isto? Como posso adiciona-la na página?
    Desde já agradeço.
    Mizael Almeida

    • CarlosHPS
      18 de julho de 2011 at 15:02
      Responder

      Oi, Mizael
      Verifiquei sim e você está correto. O detalhe é que, no decorrer da série, alguma pequenas modificações foram inseridas para ajudar na didática.
      Espero que tenha conseguido sanar a dúvida.
      Abraços.

      CarlosHPS Webdesigner 8)

  25. Neto
    13 de junho de 2011 at 12:44
    Responder

    Como fazer essa tal da estrutura,ou Organograma não entendi essa parte,isso e feito onde no programa,ou não???

    • CarlosHPS
      18 de julho de 2011 at 16:23
      Responder

      Neto,
      Essa estrutura é feita em qualquer aplicativo, Word, Power Point, Photoshop, Paint, Fireworks… porém, existem algumas ferramentas específicas para essa ação. No entanto, é preciso entender como funciona um organograma e qual a sua finalidade, senão, de nada adianta o programa, não é verdade? O que você não entendeu?

      CarlosHPS Webdesigner 8)

  26. Celso
    17 de julho de 2011 at 17:28
    Responder

    Goste muito do Site, Parabéns!!

    Gostaria de saber quando programa que você fez O Mapa do Site, e o Wireframe, para eu monstra para meu cliente uma imagem igual aquela…

    Obrigado, Abraços,
    Celso.

    • CarlosHPS
      22 de julho de 2011 at 8:53
      Responder

      Olá, Celso
      Eu fiz o mapa no Fireworks, mas existem inúmeros programas que fazem muito melhor e mais rápido um mapa mental, um organograma… Procure pelo Xmind, é um dos. Boa sorte.

      CarlosHPS Webdesigner 8)

  27. Guilherme
    21 de julho de 2011 at 18:51
    Responder

    Olá, vc usou o Fireworks para criar o layout ? mt bom o seu trabalho, mt bom msm!

    • CarlosHPS
      22 de julho de 2011 at 8:37
      Responder

      Sim, Guilherme
      Minha ferramenta principal é o Fireworks 🙂
      Abs.

      CarlosHPS Webdesigner 8)

  28. edivilson
    10 de junho de 2013 at 21:43
    Responder

    essas suas dicas sao o maximo carlos, obrigado por esses conteudos,estou começando um curso sobre esse assunto e procurei alguma coisa pra ir adiantando ,e achei ai esses otimos conteudos ,,vleu.

  29. Matheus Chele
    25 de Março de 2014 at 12:50
    Responder

    Olá Carlos, estou gostando muito das dicas que você esta passando para ajudar a criar um site, estou começando a criar o meu e esta me ajudando bastante. Tinha coisas que eu ja sabia porem não lembrava e graças a você consegui lembrar e estou fazendo e esta facilitando muito a criação do meu site. Gostei bastante da sua iniciativa de ajudar nois iniciantes nessa área. Meus Parabéns pelo belo site.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      6 de Maio de 2014 at 23:03
      Responder

      Fico feliz em poder ajudar, Matheus.

      Abs.

      CarlosHPS Webdesigner 8)

Deixe uma resposta
Captcha Clique para atualizar o código