SlideShare uma empresa Scribd logo
1 de 24
Hotsite em 30 min. com Gimp!
Respeita o Moço
Os novos Paradigmas da Web
Layout é

só um rascunho.
Desenvolvendo para qualquer aparelho.
●

Desenhe primeiro para Mobile, depois para Desktop

●

Grids Fluidos

●

Design Adaptável

●

Conteúdo Flexível

●

Otimização de Desempenho

●

Dê preferência para a unidade em
Comece pelos celulares
O que são Hotsites?

Sites temporários com ótimos recursos visuais.
Muito usados com objetivos promocionais.
Hotsites e Startups

Startups precisam criar MVPs rapidamente
Hotsites atraentes e criados
rapidamente ajudam a testar
a sua idéia
30 minutos!
O caminho das Pedras
Crie os Backgrounds em um único arquivo.
Adicione texto e links, com a formatação
pretendida.
Os textos não serão exportados diretamente...
Não se esqueça: é um rascunho.
Posicione as guias onde você vai fatiar e desative as
camadas desnecessárias.
Fatie!!!
Crie o CSS
Agora é com vocês.
Luiz Bruno @luizbweb
facebook.com/luizbweb
Vice-presidente da CEBRATi
http://webdesignaberto.wordpress.com/

Mais conteúdo relacionado

Mais procurados

O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
PUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de UsabilidadePUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de UsabilidadeNeca Boullosa
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Por quê blogar com e sem WordPress
Por quê blogar com e sem WordPressPor quê blogar com e sem WordPress
Por quê blogar com e sem WordPressPaulino Michelazzo
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapFlavio Souza
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 
Blogs para professores de idiomas, porque e como fazer
Blogs para professores de idiomas, porque e  como fazerBlogs para professores de idiomas, porque e  como fazer
Blogs para professores de idiomas, porque e como fazerMarcos Padilha
 

Mais procurados (11)

O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
PUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de UsabilidadePUB5AN - Dicas de Usabilidade
PUB5AN - Dicas de Usabilidade
 
Aula 12 Word
Aula 12 WordAula 12 Word
Aula 12 Word
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Por quê blogar com e sem WordPress
Por quê blogar com e sem WordPressPor quê blogar com e sem WordPress
Por quê blogar com e sem WordPress
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Blogs para professores de idiomas, porque e como fazer
Blogs para professores de idiomas, porque e  como fazerBlogs para professores de idiomas, porque e  como fazer
Blogs para professores de idiomas, porque e como fazer
 

Destaque

Design Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtosDesign Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtosHenrique Monnerat
 
Manual de esgotamento sanitário
Manual de esgotamento sanitárioManual de esgotamento sanitário
Manual de esgotamento sanitárioRafael Zivickovict
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Software livre x software proprietário
Software livre x software proprietárioSoftware livre x software proprietário
Software livre x software proprietárioprofesssorcarlinho
 
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Sérgio Souza Costa
 
Software livre x Software Proprietário : Propriedade Intelectual
Software livre x Software Proprietário : Propriedade IntelectualSoftware livre x Software Proprietário : Propriedade Intelectual
Software livre x Software Proprietário : Propriedade IntelectualWisllay Vitrio
 
Verbos para construir_objetivos
Verbos para construir_objetivosVerbos para construir_objetivos
Verbos para construir_objetivosEelliiaass Ssuuaa
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...SlideShare
 

Destaque (11)

Software livre
Software livreSoftware livre
Software livre
 
Design Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtosDesign Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtos
 
Apresentação aptana
Apresentação aptanaApresentação aptana
Apresentação aptana
 
Manual de esgotamento sanitário
Manual de esgotamento sanitárioManual de esgotamento sanitário
Manual de esgotamento sanitário
 
Software livre
Software livreSoftware livre
Software livre
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Software livre x software proprietário
Software livre x software proprietárioSoftware livre x software proprietário
Software livre x software proprietário
 
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
 
Software livre x Software Proprietário : Propriedade Intelectual
Software livre x Software Proprietário : Propriedade IntelectualSoftware livre x Software Proprietário : Propriedade Intelectual
Software livre x Software Proprietário : Propriedade Intelectual
 
Verbos para construir_objetivos
Verbos para construir_objetivosVerbos para construir_objetivos
Verbos para construir_objetivos
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
 

Semelhante a Crie Hotsites em 30 minutos com Gimp

A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignGustavo Zimmermann
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
 
Web Designer - O Arquiteto da Informação
Web Designer - O Arquiteto da InformaçãoWeb Designer - O Arquiteto da Informação
Web Designer - O Arquiteto da InformaçãoGustavo Zimmermann
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasAndré Silveira
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
 
Fazer um Novo Site
Fazer um Novo SiteFazer um Novo Site
Fazer um Novo Sitemarclick
 
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Pedro Edson Silva Barros
 
Web development - Como criar a web
Web development  - Como criar a webWeb development  - Como criar a web
Web development - Como criar a webHerson Leite
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03Neca Boullosa
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraenteSuzana Viana Mota
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designerRoney Sousa
 
Criando aplicações Híbridas com AngularJs, TypeScript e Material Design
Criando aplicações Híbridas com AngularJs, TypeScript e Material DesignCriando aplicações Híbridas com AngularJs, TypeScript e Material Design
Criando aplicações Híbridas com AngularJs, TypeScript e Material DesignAndre Baltieri
 

Semelhante a Crie Hotsites em 30 minutos com Gimp (20)

A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Producao para web
Producao para webProducao para web
Producao para web
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Web Designer - O Arquiteto da Informação
Web Designer - O Arquiteto da InformaçãoWeb Designer - O Arquiteto da Informação
Web Designer - O Arquiteto da Informação
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapas
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Web components
Web componentsWeb components
Web components
 
Web components
Web componentsWeb components
Web components
 
Fazer um Novo Site
Fazer um Novo SiteFazer um Novo Site
Fazer um Novo Site
 
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
 
Web development - Como criar a web
Web development  - Como criar a webWeb development  - Como criar a web
Web development - Como criar a web
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensar
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Criando aplicações Híbridas com AngularJs, TypeScript e Material Design
Criando aplicações Híbridas com AngularJs, TypeScript e Material DesignCriando aplicações Híbridas com AngularJs, TypeScript e Material Design
Criando aplicações Híbridas com AngularJs, TypeScript e Material Design
 
Design responsivo
Design responsivo Design responsivo
Design responsivo
 

Crie Hotsites em 30 minutos com Gimp

Notas do Editor

  1. GIMP – GNU Manipulation Program Software Livre de Verdade! Editor de Imagens Oficial do Projeto GNU Nasceu em 1995 criado por Spencer Kimball e Peter Mattis como um projeto para a faculdade. Atualmente, ele é mantido por um grupo de voluntários e licenciado sob a GNU General Public License. Criado para seres humanos – Muito antes do Ubuntu. Influenciou projetos como Gnome, KDE, e mais tarde o Ubuntu
  2. Novos Dispositivos HTML5, Javascript e CSS evoluindo rapidamente. Novas tecnicas de producao
  3. Mesmo que o Software permita, o projeto deve ser desenvolvido de maneira experimental, de forma mais rapida e com a contribuicao do cliente. O tempo do PSD pronto acabou!
  4. Análise de Desempenho: http://developers.google.com/speed/pagespeed/insights/