SlideShare uma empresa Scribd logo
Fundamentos do
desenvolvimento de
um layout web
@richarley
Fundamentos pra que!?
* Metodologia de projeto gráfico
* Web sites, aplicativos online ou mobile,
softwares, publicações digitais, etc.
1. Mapa do site
* Conteúdo previsto em um site
* Arquitetura da informação (Sigla: AI)
1. Mapa do site
* Lista estrutural de conteúdo
* Seções, subseções...
- Página inicial
- Sobre o site
- Produtos
- Categoria 1
- Categoria 1.2
- Categoria 2
- Contato
1. Mapa do site
* Fluxo de navegação do site
* Diagrama visual
Página inicial

Produtos

Sobre o site

Categoria 1
Categoria 1.2

Contato

Categoria 2
2. Wireframes
* Representação visual básica
* Organizar elementos
* Hierarquia
2. Wireframes
* Elementos gerais
CABEÇALHO
MENU

CONTEÚDO

RODAPÉ
2. Wireframes
* Elementos adicionais
LOGO
Inicial

BANNER
Produtos

Contato

CONTEÚDO

Inicial | Produtos | Contato
Copyright

rss

f

t

BARRA LATERAL
2. Wireframes
* Lápis e papel
- Rascunhos

- Recortes ou
post-its
2. Wireframes
* Softwares
- Programas
específicos

* balsamic.com

- Programas de
Edição Visual
2. Wireframes
3. Mockup
* Representação visual detalhada
* Imagem estática
3. Mockup
* Grids
3. Mockup
* Cores
3. Mockup
* Tipografia
3. Mockup
* Eye-tracking
3. Mockup
* Diferentes resoluções e dispositivos
3. Mockup
4. Protótipo
* Simulação interativa
4. Protótipo
Atividade em classe
* Escolher um site qualquer e fazer uma lista
estrutural de seções e subseções.
* Simular o wireframe de uma página do site.

Atividade em casa
* Definir o mapa do site (em lista e diagrama)
e preparar o wireframe da página inicial para
ser analisado na próxima aula.

Como referência
http://www.wireframeshowcase.com/

Mais conteúdo relacionado

Mais de Richarley Menescal

Brief(ing) digital
Brief(ing) digitalBrief(ing) digital
Brief(ing) digital
Richarley Menescal
 
Planejamento estratégico digital
Planejamento estratégico digitalPlanejamento estratégico digital
Planejamento estratégico digital
Richarley Menescal
 
Marketing viral nos meios digitais
Marketing viral nos meios digitaisMarketing viral nos meios digitais
Marketing viral nos meios digitais
Richarley Menescal
 
Estratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociaisEstratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociais
Richarley Menescal
 
Co-criação na web
Co-criação na webCo-criação na web
Co-criação na web
Richarley Menescal
 
Imagens para web
Imagens para webImagens para web
Imagens para web
Richarley Menescal
 
Cores para web
Cores para webCores para web
Cores para web
Richarley Menescal
 

Mais de Richarley Menescal (7)

Brief(ing) digital
Brief(ing) digitalBrief(ing) digital
Brief(ing) digital
 
Planejamento estratégico digital
Planejamento estratégico digitalPlanejamento estratégico digital
Planejamento estratégico digital
 
Marketing viral nos meios digitais
Marketing viral nos meios digitaisMarketing viral nos meios digitais
Marketing viral nos meios digitais
 
Estratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociaisEstratégias de comunicação para mídias e redes sociais
Estratégias de comunicação para mídias e redes sociais
 
Co-criação na web
Co-criação na webCo-criação na web
Co-criação na web
 
Imagens para web
Imagens para webImagens para web
Imagens para web
 
Cores para web
Cores para webCores para web
Cores para web
 

Último

Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptxSlides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
LuizHenriquedeAlmeid6
 
Atividade - Letra da música "Tem Que Sorrir" - Jorge e Mateus
Atividade - Letra da música "Tem Que Sorrir"  - Jorge e MateusAtividade - Letra da música "Tem Que Sorrir"  - Jorge e Mateus
Atividade - Letra da música "Tem Que Sorrir" - Jorge e Mateus
Mary Alvarenga
 
LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...
LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...
LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...
ssuser701e2b
 
- TEMPLATE DA PRATICA - Psicomotricidade.pptx
- TEMPLATE DA PRATICA - Psicomotricidade.pptx- TEMPLATE DA PRATICA - Psicomotricidade.pptx
- TEMPLATE DA PRATICA - Psicomotricidade.pptx
LucianaCristina58
 
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
Escola Municipal Jesus Cristo
 
Fato X Opinião (Língua Portuguesa 9º Ano).pptx
Fato X Opinião (Língua Portuguesa 9º Ano).pptxFato X Opinião (Língua Portuguesa 9º Ano).pptx
Fato X Opinião (Língua Portuguesa 9º Ano).pptx
MariaFatima425285
 
Egito antigo resumo - aula de história.pdf
Egito antigo resumo - aula de história.pdfEgito antigo resumo - aula de história.pdf
Egito antigo resumo - aula de história.pdf
sthefanydesr
 
“A classe operária vai ao paraíso os modos de produzir e trabalhar ao longo ...
“A classe operária vai ao paraíso  os modos de produzir e trabalhar ao longo ...“A classe operária vai ao paraíso  os modos de produzir e trabalhar ao longo ...
“A classe operária vai ao paraíso os modos de produzir e trabalhar ao longo ...
AdrianoMontagna1
 
Biologia - Jogos da memória genetico.pdf
Biologia - Jogos da memória genetico.pdfBiologia - Jogos da memória genetico.pdf
Biologia - Jogos da memória genetico.pdf
Ana Da Silva Ponce
 
Pintura Romana .pptx
Pintura Romana                     .pptxPintura Romana                     .pptx
Pintura Romana .pptx
TomasSousa7
 
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptx
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptxSlides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptx
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
os-lusiadas-resumo-os-lusiadas-10-ano.pdf
os-lusiadas-resumo-os-lusiadas-10-ano.pdfos-lusiadas-resumo-os-lusiadas-10-ano.pdf
os-lusiadas-resumo-os-lusiadas-10-ano.pdf
GiselaAlves15
 
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptxA dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
ReinaldoSouza57
 
livro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdf
livro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdflivro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdf
livro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdf
Escola Municipal Jesus Cristo
 
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdfEJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
Escola Municipal Jesus Cristo
 
Slides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptx
Slides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptxSlides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptx
Slides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
Caderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdf
Caderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdfCaderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdf
Caderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdf
enpfilosofiaufu
 
Caça-palavras - ortografia S, SS, X, C e Z
Caça-palavras - ortografia  S, SS, X, C e ZCaça-palavras - ortografia  S, SS, X, C e Z
Caça-palavras - ortografia S, SS, X, C e Z
Mary Alvarenga
 
Unificação da Itália e a formação da Alemanha
Unificação da Itália e a formação da AlemanhaUnificação da Itália e a formação da Alemanha
Unificação da Itália e a formação da Alemanha
Acrópole - História & Educação
 
the_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdfthe_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdf
CarinaSoto12
 

Último (20)

Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptxSlides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
 
Atividade - Letra da música "Tem Que Sorrir" - Jorge e Mateus
Atividade - Letra da música "Tem Que Sorrir"  - Jorge e MateusAtividade - Letra da música "Tem Que Sorrir"  - Jorge e Mateus
Atividade - Letra da música "Tem Que Sorrir" - Jorge e Mateus
 
LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...
LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...
LIBRO LAS MANOS NO SON PARA PEGAR-MAESTRA EN PREESCOLAR_organized_rotated (1)...
 
- TEMPLATE DA PRATICA - Psicomotricidade.pptx
- TEMPLATE DA PRATICA - Psicomotricidade.pptx- TEMPLATE DA PRATICA - Psicomotricidade.pptx
- TEMPLATE DA PRATICA - Psicomotricidade.pptx
 
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
 
Fato X Opinião (Língua Portuguesa 9º Ano).pptx
Fato X Opinião (Língua Portuguesa 9º Ano).pptxFato X Opinião (Língua Portuguesa 9º Ano).pptx
Fato X Opinião (Língua Portuguesa 9º Ano).pptx
 
Egito antigo resumo - aula de história.pdf
Egito antigo resumo - aula de história.pdfEgito antigo resumo - aula de história.pdf
Egito antigo resumo - aula de história.pdf
 
“A classe operária vai ao paraíso os modos de produzir e trabalhar ao longo ...
“A classe operária vai ao paraíso  os modos de produzir e trabalhar ao longo ...“A classe operária vai ao paraíso  os modos de produzir e trabalhar ao longo ...
“A classe operária vai ao paraíso os modos de produzir e trabalhar ao longo ...
 
Biologia - Jogos da memória genetico.pdf
Biologia - Jogos da memória genetico.pdfBiologia - Jogos da memória genetico.pdf
Biologia - Jogos da memória genetico.pdf
 
Pintura Romana .pptx
Pintura Romana                     .pptxPintura Romana                     .pptx
Pintura Romana .pptx
 
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptx
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptxSlides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptx
Slides Lição 9, Betel, Ordenança para uma vida de santificação, 2Tr24.pptx
 
os-lusiadas-resumo-os-lusiadas-10-ano.pdf
os-lusiadas-resumo-os-lusiadas-10-ano.pdfos-lusiadas-resumo-os-lusiadas-10-ano.pdf
os-lusiadas-resumo-os-lusiadas-10-ano.pdf
 
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptxA dinâmica da população mundial de acordo com as teorias populacionais.pptx
A dinâmica da população mundial de acordo com as teorias populacionais.pptx
 
livro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdf
livro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdflivro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdf
livro da EJA - 2a ETAPA - 4o e 5o ano. para análise do professorpdf
 
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdfEJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
 
Slides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptx
Slides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptxSlides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptx
Slides Lição 11, CPAD, A Realidade Bíblica do Inferno, 2Tr24.pptx
 
Caderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdf
Caderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdfCaderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdf
Caderno de Resumos XVIII ENPFil UFU, IX EPGFil UFU E VII EPFEM.pdf
 
Caça-palavras - ortografia S, SS, X, C e Z
Caça-palavras - ortografia  S, SS, X, C e ZCaça-palavras - ortografia  S, SS, X, C e Z
Caça-palavras - ortografia S, SS, X, C e Z
 
Unificação da Itália e a formação da Alemanha
Unificação da Itália e a formação da AlemanhaUnificação da Itália e a formação da Alemanha
Unificação da Itália e a formação da Alemanha
 
the_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdfthe_story_garden_5_SB_with_activities.pdf
the_story_garden_5_SB_with_activities.pdf
 

Fundamentos do desenvolvimento de um layout web