Web Design Responsivo

Definies.

Web Design Responsivo

Pginas Adaptveis para todos os tipos de dispositivos!
possvel desenvolver uma s apresentao para um site, um s web design. Mais alm: que esse design seja bem apresentado em quaisquer dispositivos e, conforme se tenha planejado, que se adapte aos diferentes meios em que este site acessado.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

Web Design Responsivo

Exemplo: Site da CNN, em um navegador comum.

possvel desenvolver uma s apresentao para um site, um s web design. Mais alm: que esse design seja bem apresentado em quaisquer dispositivos e, conforme se tenha planejado, que se adapte aos diferentes meios em que este site acessado.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

Web Design Responsivo

Exemplo: Site da CNN, em um dispositivo que no seja um computador.

possvel desenvolver uma s apresentao para um site, um s web design. Mais alm: que esse design seja bem apresentado em quaisquer dispositivos e, conforme se tenha planejado, que se adapte aos diferentes meios em que este site acessado.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

Web Design Responsivo

Exemplo: Site que utiliza o conceito de responsividade.

possvel desenvolver uma s apresentao para um site, um s web design. Mais alm: que esse design seja bem apresentado em quaisquer dispositivos e, conforme se tenha planejado, que se adapte aos diferentes meios em que este site acessado.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

Web Design Responsivo

Um site com web design responsivo - ou responsive web design - pode ser acessado de um PC, notebook, smartphone, tablet, TV, geladeira, banheira, etc. Em resumo, de qualquer dispositivo com acesso rede, independentemente de: sua resoluo, sua capacidade de cores,

se touch ou no. E, mesmo com essas diferenas dos dispositivos que podem acessar seu site, ele continua bem apresentado.
Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012. 6

Web Design Responsivo

Um site com web design responsivo - ou responsive web design - pode ser acessado de um PC, notebook, smartphone, tablet, TV, geladeira, banheira, etc. Em resumo, de qualquer dispositivo com acesso rede, independentemente de: sua resoluo, sua capacidade de cores,

se touch ou no. E, mesmo com essas diferenas dos dispositivos que podem acessar seu site, ele continua bem apresentado.
Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012. 7

Web Design Responsivo

Sobre o mercado mobile do Brasil, em 2011 a venda de smartphones cresceu 179% no Brasil, com destaque para as informaes de que: 33% das pessoas j tinham smartphones; 20% com funes consideradas avanadas, comoWi , GPS etc;

41% acessava a internet;

No ltimo quadrimestre, o nmero de usurios mobile cresceu 40%.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

Web Design Responsivo

Mais nmeros, A difuso dos smartphones atinge 40% da populao e esses proprietrios de smartphones dependem cada vez mais de seus dispositivos. 73% acessam a internet todos os dias no smartphone e muitos nunca saem de casa sem ele;

88% dos usurios de smartphones procuram informaes locais em seus telefones e 92% tomam decises em decorrncia disso, como fazer uma compra ou entrar em contato com a empresa;
31% dos usurios de smartphones fizeram uma compra pelo celular; Anncios para celular so vistos por 94% dos usurios de smartphones; 75% dos usurios realizaram uma pesquisa em seus smartphones depois de visualizar um anncio on-line.
Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012. 9

Web Design Responsivo

Conceito de OneWeb!
O Design Responsivo costuma ser uma forma de implementar OneWeb com usabilidade adequada pra todo mundo.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

10

Web Design Responsivo

3 Conceitos Bsicos para o Web Design Responsivo
Para conseguir desenvolver um design responsivo para a web, baseia se em 3 tecnologias principais(ou modos de aplicar essas tecnologias, se preferir) : 1) Layout fludo; 2) Imagens e recursos fexveis; e

3) Media Queries.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

11

Web Design Responsivo

Desenvolver sites com layouts fuidos (fluent layout, tambm chamados de grids fexveis), ou seja, desde a concepo do projeto, primar pela no especi ficao de medidas fi xas no layout do projeto, tornar possvel que haja uma adaptao natural e automtica do que se apresenta na tela. Independente da resoluo do dispositivo que fez o acesso, evitamos barras de rolagem inconvenientes e/ou contedos cortados, no exibidos em sua completude.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

12

Web Design Responsivo

Desenvolver sites com layouts fuidos (fluent layout, tambm chamados de grids fexveis), ou seja, desde a concepo do projeto, primar pela no especi ficao de medidas fi xas no layout do projeto, tornar possvel que haja uma adaptao natural e automtica do que se apresenta na tela. Independente da resoluo do dispositivo que fez o acesso, evitamos barras de rolagem inconvenientes e/ou contedos cortados, no exibidos em sua completude.

Fonte: ZEMEL, Trcio. Web Design Responsivo. Casa do Cdigo, 2012.

13

Identidade Visual
Logotipos, tipologias e cores

14

Logotipo
Refere-se forma particular como o nome da marca representado graficamente, pela escolha ou desenho de uma tipografia especfica. um dos elementos grficos de composio de uma marca, algumas vezes o nico, tornando-se a principal representao grfica da mesma

Logo = Palavra, Conhecimento

Tipo = Padro, Grafia

15

Logotipo
Logotipo = Representao apenas tipogrfica

16

Logotipo
Logotipo a assinatura e identidade da empresa. O consumidor deve lembrar facilmente do nome da empresa Alguns itens a serem levantados relativos a construo do logotipo:

O que a empresa?
Por que existe? Qual objetivo? Para que serve? A quem se destina?

Qual sua histria?

17

Logotipo
Significado

Analise. Agradam? Porqu? Significa alguma coisa? Representa a empresa? Fcil de entender e memorizar? Traduz a identidade da empresa?

18

Logotipo
Significado

A tipografia condiz com a empresa? Tem personalidade? Empresa sria, letra sria Desenhe as letras Seja nico

19

Logotipo
Caractersticas

Um bom logotipo lembrado por muitos anos; Pode ser atualizado, mas sempre o mesmo; Quando no representar mais a empresa, tem que ser refeito.

20

Logotipo
Caractersticas

Um bom logotipo lembrado por muitos anos; Pode ser atualizado, mas sempre o mesmo; Quando no representar mais a empresa, tem que ser refeito.

21

Logotipo

22

Identidade Visual
Introduo Uma pequena explicao do que a empresa e seus objetivos Conceito a justificativa e a explicao de criao.

Forma de Utilizao
a aplicao do logotipo a uma cor, colorido, positivo, negativo
23

Identidade Visual
Adequaes A parte que informa o que pode sofrer variaes na aplicao do logotipo, conforme a necessidade. Cores Informaes em linguagem grfica das cores utilizadas.

rea de Influncia
Espao vazio determinado para ficar em volta do logotipo, quando utilizado junto a textos.
24

Identidade Visual
Malha de Construo o logotipo desenhado em espao quadriculado Base para entender os espaos que o logotipo ocupa e sua correta proporo

Diagrama de Construo
o logotipo desenhado em detalhes tcnicos, com medidas modulares e indicaes de posies e distncias

25

Identidade Visual
Tipografia Deve-se determinar a tipografia a ser utilizada, como fator importante na unidade da comunicao da empresa Aplicaes em Geral Como o logotipo dever ser aplicado nas peas de papelaria e demais locais que necessitam identificao.

26

Identidade Visual
Tipografia Deve-se determinar a tipografia a ser utilizada, como fator importante na unidade da comunicao da empresa Aplicaes em Geral Como o logotipo dever ser aplicado nas peas de papelaria e demais locais que necessitam identificao. Usos Inadequados Deve-se informar os usos inadequados para o logotipo.
27

Identidade Visual
Tipografia Deve-se determinar a tipografia a ser utilizada, como fator importante na unidade da comunicao da empresa Aplicaes em Geral Como o logotipo dever ser aplicado nas peas de papelaria e demais locais que necessitam identificao. Usos Inadequados Deve-se informar os usos inadequados para o logotipo.
28

Logos com significados ocultos

J reparou na seta escondida entre a letra E e X do logo da FedEx Express? Ela simboliza a rapidez dos servios de entrega da empresa. O famoso logo foi desenhado por Lindon Leader, em 1994. O designer precisou fazer mais de 200 criaes diferentes para chegar a este resultado final.
Fonte: http://super.abril.com.br

29

Logos com significados ocultos

De primeira, este logo parece apenas utilizar uma tipografia moderna. Mas, na verdade, existe um significado por trs do desenho: as duas primeiras letras representam um sinal analgico e as duas ltimas so os nmeros 1 e 0, em referncia ao sistema binrio. Uma maneira legal de representar uma linha de notebooks voltada para a integrao de udio e vdeo, no?
Fonte: http://super.abril.com.br
30

Logos com significados ocultos

A cidade de Berna (Sua), conhecida por suas altas montanhas, chamada tambm de A Cidade dos Ursos. A companhia de chocolate Toblerone, que fica na cidade, resolveu homenagear Berna usando esses elementos no prprio logo da empresa. possvel encontrar a silhueta de um urso na ilustrao da montanha. Olhe bem!
Fonte: http://super.abril.com.br
31

Logos com significados ocultos

Este logo, obra da agncia londrina Stylo Design, foi criado com apenas um nmero: o 8. Repare como todas as letras do nome da marca surgem a partir da omisso de certas partes do nmero.

Fonte: http://super.abril.com.br

32

Logos com significados ocultos

ED Elettrodomestici -Home Appliances

Esta uma das criaes mais legais. D uma olhada em como o designer conseguiu apresentar as letras E e D (iniciais da marca) e, ao mesmo tempo, formar um plug eltrico.

Fonte: http://super.abril.com.br

33

Logos com significados ocultos

A seta amarela do logo da Amazon no apenas um sorriso. Ela tambm sugere que voc pode comprar tudo, de A a Z, no site de vendas da empresa.

Fonte: http://super.abril.com.br

34

Logos com significados ocultos

O truque deste logo simples, mas bem feito: o nmero 1 oculto entre a letra F e as linhas indicando rapidez.

Fonte: http://super.abril.com.br

35

Logotipo passo a passo

36

Identidade Visual

37

Identidade Visual

38

Identidade Visual

39

Identidade Visual Aplicao do Logo em papel

40

Identidade Visual Aplicao do Logo na web

41

EXERCCIO Baseando-se na empresa escolhida e e acordo com o wireframe construdo, desenvolva a identidade visual, considere:

1) Uma paleta de cores a ser utilizada no site.

2) A Tipologia empregada, quais sero utilizadas e suas variaes. 3) Um logotipo, como mostrado no exemplo. Com as descries de cores, tipos, aplicaes, insero ou no de cones etc.

42