SlideShare uma empresa Scribd logo
WebDesign - Exercício prático
Prof.: Paulo Trentin
Escola CDI de Videira
Para Estudar
1 - Estude a apresentação "Dicas para criação de Layout".
Ela se encontra no servidor, na pasta de materiais, ou no site,
a última apresentação: www.paulotrentin.com.br/aulas/web-
design
2 - Leia o post sobre Hierarquia visual de Elementos aqui:
http://design.blog.br/web-design/hierarquia-visual-de-elementos
Wireframes
Usados para definir o posicionamento dos elementos na
página. São construídos antes do layout gráfico do site.
Atividade
Aplicando o exercício feito durante a semana, e as dicas para
criação de um layout, crie o Wireframe (veja próximo slide) da
página inicial do site e da página de cursos.
Essas páginas são obrigatórias (como visto no briefing aula
passada).
Em seu Wireframe, você pode inserir quaisquer elementos que
julgar necessário. Por exemplo, imagens, menus, campos de
conteúdo etc.
Atividade
A criação do Wireframe deve ser feita com a ferramenta online
iPlotz.
1 - Acesse o site oficial da ferramenta: http://iplotz.com/index.
php
2 - Clique em "Get Started"
3 - Na versão "Free", selecione "Try now"
Atividade
Caso não consiga acessar seguindo os passos anteriores,
apenas acesse este link: https://iplotz.com/app/
Após alguns segundos (no máximo 2 minutos) irá carregar a
tela inicial da aplicação onde é solicitado o usuário e senha
(selecione o idioma em Português). Marque a opção "Sou um
novo usuário"
Atividade
Preencha os dados que são pedidos, e começe a usar a
ferramenta clicando em "Criar um novo projeto"
Atividade
Defina as propriedades
deste projeto e clique em
"Salvar"
Atividade
Selecione o projeto e clique em "Wireframe"
Atividade
Por fim, defina o tamanho da área de edição para 1024x768
Atividade
À esquerda encontram-se as ferramentas que você pode usar
(menus, botões, áreas para banners etc). Você pode fazer uma
busca apenas colocando o nome.
Para usar uma ferramenta basta clicar sobre ela (na imagem
abaixo a ferramenta é "Área para Imagem") e arrastá-la na
área de edição branca.
Atividade
Finalmente, desenvolva seu Wireframe de acordo com suas ideias. Na próxima
aula iremos discutir os projetos desenvolvidos e melhorá-los para termos um
definitivo.
Atividade - Final
Essa ferramenta ajuda muito, afinal podemos depois exportar e
trabalhar em equipe em um mesmo Wireframe.
Desenvolva pelo menos 2 Wireframes (página inicial e cursos).
Divirta-se e mecha bastante na ferramenta, afinal só assim
poderá aprender e futuramente dominá-la.
Bons estudos!

Mais conteúdo relacionado

Semelhante a WebDesign_Exercicio_pratico.pdf

Apostila: Netbeans
Apostila: NetbeansApostila: Netbeans
Apostila: Netbeans
Verônica Veiga
 
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo VisualDs aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
Centro Paula Souza
 
Curso Intensivo De Adobe Photoshop
Curso Intensivo De Adobe  PhotoshopCurso Intensivo De Adobe  Photoshop
Curso Intensivo De Adobe Photoshop
estrela1
 
Desenho da atividade online
Desenho da atividade onlineDesenho da atividade online
Desenho da atividade online
Adelaide Dias
 
VB 6.0 1
VB 6.0 1VB 6.0 1
VB 6.0 1
cjc173
 
Como montar seu projeto de fribra
Como montar seu projeto de fribraComo montar seu projeto de fribra
Como montar seu projeto de fribra
jalvesf
 
1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf
joaoJunior93
 
Tutorial ea padronizado
Tutorial ea   padronizadoTutorial ea   padronizado
Tutorial ea padronizado
Vladimir Alves
 
JavaFx - Introdução
JavaFx - IntroduçãoJavaFx - Introdução
JavaFx - Introdução
LuisGustavoAraujo3
 
Atividades unidade4
Atividades unidade4Atividades unidade4
Atividades unidade4
polianepaixao
 
Atividades I E D Livro
Atividades I E D LivroAtividades I E D Livro
Atividades I E D Livro
proinfoundimeparaiba
 
Manual paint net
Manual paint netManual paint net
Manual paint net
raul_m_c_f
 
Tutorial ea padronizado
Tutorial ea   padronizadoTutorial ea   padronizado
Tutorial ea padronizado
Fábio Paixão
 
Visual Basic Básico
Visual Basic BásicoVisual Basic Básico
Visual Basic Básico
Clico - Ana Isabel Rodrigues
 
Apostila impress
Apostila impressApostila impress
Apostila impress
Valdair Marcolino
 
Apostila impress
Apostila impressApostila impress
Apostila impress
Valdair Marcolino
 
2335 inventor
2335 inventor2335 inventor
2335 inventor
Regisnaldo Alencar
 
Inventor
InventorInventor
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
maurohs
 
Bada
BadaBada

Semelhante a WebDesign_Exercicio_pratico.pdf (20)

Apostila: Netbeans
Apostila: NetbeansApostila: Netbeans
Apostila: Netbeans
 
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo VisualDs aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
 
Curso Intensivo De Adobe Photoshop
Curso Intensivo De Adobe  PhotoshopCurso Intensivo De Adobe  Photoshop
Curso Intensivo De Adobe Photoshop
 
Desenho da atividade online
Desenho da atividade onlineDesenho da atividade online
Desenho da atividade online
 
VB 6.0 1
VB 6.0 1VB 6.0 1
VB 6.0 1
 
Como montar seu projeto de fribra
Como montar seu projeto de fribraComo montar seu projeto de fribra
Como montar seu projeto de fribra
 
1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf1502 - Revista - SQL Server.pdf
1502 - Revista - SQL Server.pdf
 
Tutorial ea padronizado
Tutorial ea   padronizadoTutorial ea   padronizado
Tutorial ea padronizado
 
JavaFx - Introdução
JavaFx - IntroduçãoJavaFx - Introdução
JavaFx - Introdução
 
Atividades unidade4
Atividades unidade4Atividades unidade4
Atividades unidade4
 
Atividades I E D Livro
Atividades I E D LivroAtividades I E D Livro
Atividades I E D Livro
 
Manual paint net
Manual paint netManual paint net
Manual paint net
 
Tutorial ea padronizado
Tutorial ea   padronizadoTutorial ea   padronizado
Tutorial ea padronizado
 
Visual Basic Básico
Visual Basic BásicoVisual Basic Básico
Visual Basic Básico
 
Apostila impress
Apostila impressApostila impress
Apostila impress
 
Apostila impress
Apostila impressApostila impress
Apostila impress
 
2335 inventor
2335 inventor2335 inventor
2335 inventor
 
Inventor
InventorInventor
Inventor
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
 
Bada
BadaBada
Bada
 

Último

DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
Momento da Informática
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 

Último (8)

DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 

WebDesign_Exercicio_pratico.pdf

  • 1. WebDesign - Exercício prático Prof.: Paulo Trentin Escola CDI de Videira
  • 2. Para Estudar 1 - Estude a apresentação "Dicas para criação de Layout". Ela se encontra no servidor, na pasta de materiais, ou no site, a última apresentação: www.paulotrentin.com.br/aulas/web- design 2 - Leia o post sobre Hierarquia visual de Elementos aqui: http://design.blog.br/web-design/hierarquia-visual-de-elementos
  • 3. Wireframes Usados para definir o posicionamento dos elementos na página. São construídos antes do layout gráfico do site.
  • 4. Atividade Aplicando o exercício feito durante a semana, e as dicas para criação de um layout, crie o Wireframe (veja próximo slide) da página inicial do site e da página de cursos. Essas páginas são obrigatórias (como visto no briefing aula passada). Em seu Wireframe, você pode inserir quaisquer elementos que julgar necessário. Por exemplo, imagens, menus, campos de conteúdo etc.
  • 5. Atividade A criação do Wireframe deve ser feita com a ferramenta online iPlotz. 1 - Acesse o site oficial da ferramenta: http://iplotz.com/index. php 2 - Clique em "Get Started" 3 - Na versão "Free", selecione "Try now"
  • 6. Atividade Caso não consiga acessar seguindo os passos anteriores, apenas acesse este link: https://iplotz.com/app/ Após alguns segundos (no máximo 2 minutos) irá carregar a tela inicial da aplicação onde é solicitado o usuário e senha (selecione o idioma em Português). Marque a opção "Sou um novo usuário"
  • 7. Atividade Preencha os dados que são pedidos, e começe a usar a ferramenta clicando em "Criar um novo projeto"
  • 8. Atividade Defina as propriedades deste projeto e clique em "Salvar"
  • 9. Atividade Selecione o projeto e clique em "Wireframe"
  • 10. Atividade Por fim, defina o tamanho da área de edição para 1024x768
  • 11. Atividade À esquerda encontram-se as ferramentas que você pode usar (menus, botões, áreas para banners etc). Você pode fazer uma busca apenas colocando o nome. Para usar uma ferramenta basta clicar sobre ela (na imagem abaixo a ferramenta é "Área para Imagem") e arrastá-la na área de edição branca.
  • 12. Atividade Finalmente, desenvolva seu Wireframe de acordo com suas ideias. Na próxima aula iremos discutir os projetos desenvolvidos e melhorá-los para termos um definitivo.
  • 13. Atividade - Final Essa ferramenta ajuda muito, afinal podemos depois exportar e trabalhar em equipe em um mesmo Wireframe. Desenvolva pelo menos 2 Wireframes (página inicial e cursos). Divirta-se e mecha bastante na ferramenta, afinal só assim poderá aprender e futuramente dominá-la. Bons estudos!