Disciplina: Web Design

Diretoria de Pós-graduação e Pesquisa

Centro Universitário Senac

Prof. Me. Denise Nevesprofa.denise@hotmail.com.br

Conteúdo da Aula

Primeira Parte

1- Apresentação da disciplina.

2- Critérios de Avaliação.

Segunda Parte

1- Entendendo o Web Design.

2- Usando a Arquitetura da Informação.

3- Diagramando a Arquitetura da Informação.

2

Primeira Parte

3

Ementa

Discute o Design como disciplina que concilia diferentes

aspectos de um produto, como funcionalidade, estética,

mensagem, etc. e o Web Design como design de produtos para

Web. Apresenta as técnicas e conceitos de Web design e

Gestalt através da análise de Web sites. Permite o

conhecimento básico das competências essenciais do Web

designer e avaliação de seu trabalho dentro de contextos

específicos.

4

Conteúdo Programático

1. O que é Web Design/A evolução do Web Design.

2. Arquitetura da Informação/ Wireframe/ Storyboard.

3. Referências para a criação do layout.

4. Experiência do Usuário (UX).

5. Web Design Responsivo.

6. Acessibilidade na Web.

5

Bibliografia

Bibliografia Básica

RADFAHRER, Luli. Design/Web/Design 2. São Paulo: Market Press, 2001.

GOMES FILHO, João. Design do Objeto: bases conceituais. São Paulo: Escrituras, 2006 .

GOMES FILHO, João. Gestalt do Objeto: sistema de leitura visual da forma. São Paulo: Escrituras, 2006.

BEAIRD, J. Principios do Web Design Maravilhoso. São Paulo: AltaBooks, 2010.

Bibliografia Complementar

BOULTON, M. A Practical Guide to Designing for the Web. Penarth: Mark Boulton Design, 2009.

DA SILVA, J.C.R.P. [et al] O Futuro do Design no Brasil. São Paulo: Editora Unesp, 2012 .

DONATI, Luisa Paraguai; CARVALHO, Hélio; PRADO, Gilberto. Sites na Web: Considerações Sobre o Design Gráfico e a Estrutura de

Navegação. Revista da Pós-Graduação. Campinas: Instituto de Artes, UNICAMP, vol.1, n.1, pp.27-39, 1997.

FAIOLA, A.; MATEI, S. A. Cultural Cognitive Style and Web Design: Beyond a Behavioral Inquiry into Computer-Mediated

Communication. Journal of Computer-Mediated Communication. Vol. 11, pp. 375–394, 2006.

TOLLETT. J.; WILLIAMS, R. Web Design para Não-Designers. Rio de Janeiro: Ciência Moderna, 2001.

SILVA, Maurício Samy; WEB DESIGN RESPONSIVO. São Paulo : Novatec, 2014.

SIARTO,Jeff ;WATRALL,Ethan. Use a cabeça: Web Design. Rio de Janeiro: Alta Books, 2009.

UNGER, R. O Guia para Projetar UX. São Paulo: Bookman, 2009.

6

Critério de Avaliação

INSTRUMENTO DE AVALIAÇÃO DATA DA APLICAÇÃO DEVOLUÇÃO

Presença e participação das aulas

e exercícios propostos em sala de

aula

Aulas 1 a 7 Término de cada aula

Apresentação Conceitual de

trabalho em grupo para a

execução do trabalho final.

Aula 5 Aula 6

Entrega do projeto final

implementado e avaliação final da

disciplina.

Aula 9 Aula 10

30% - presença e participação em aula

20% - Trabalho Conceitual

50% - Avaliação final ( 20% Entrega do projeto + 30% avaliação individual)

7

Projeto Final

Desenvolver uma proposta de um site de serviços para idosos (terceira

idade)

Grupos : até três pessoas.

1. Apresentação Contextual :

O grupo deverá fazer um estudo do público alvo e sites concorrentes.

O grupo deverá projetar a arquitetura da informação e esboços do design

(protótipo em baixa fidelidade)

O grupo deverá testar a usabilidade e navegabilidade em baixa fidelidade.

O grupo deverá propor a identidade visual do site.

2. Apresentação Final :

O grupo deverá propor e implementar a acessibilidade para o projeto.

O grupo deverá desenvolver um protótipo em alta fidelidade do projeto.

8

Segunda Parte

9

Design

O trabalho do designer consiste basicamente em combinar diferentes

elementos, ordenando-os de tal maneira que crie um conjunto

harmônico, que possa e mereça ser apreciado, que tenha um aspecto

atraente. O resultado deve ser um produto que ajude o público a

entender a mensagem que se pretende transmitir e que encontre nela

algum significado.

10

Web design

A internet, por sua vez, é um meio de comunicação capaz de disseminar a

comunicação de muitos, com muitos ao mesmo instante, em escala global. É

capaz de transformar a cada dia o modo pelo qual nos comunicamos.

É como as pessoas veem as informações do seu site.

É a arte de apresentar conteúdos em hipertextos e hipermídias na World Wide

Web utilizando browsers.

O advento da computação gráfica na década de 80 e o uso de ferramentas

diversas e acessíveis aos interessados em produção para a Web , propiciou

uma grande avalanche de possibilidades de se apresentar ao mundo sem

limites de distância. Assim surge a primeira fase de sites .

11

O Web Design tende à multidisciplinaridade, a construção de páginas web

apoia-se em diversas áreas técnicas, além do design propriamente dito.

Desde os layouts mais básicos marcados apenas pelo fundo branco, letras

pretas e os conhecidos links azuis do primeiro website lançado em 1991,

até à atual popularidade da internet levada além do desktop e que nos

acompanha em qualquer lugar, vários passos foram dados na busca de uma

melhor integração da tecnologia no nosso dia-a-dia.

Programação , inovação nos recursos dos navegadores e o design gráfico estão

em constante evolução.

Web design

12

Evolução do Web Design

Os sites da primeira fase surgiram no final da década de 80-90, com a intenção

de ser funcional, a internet foi idealizada em HTML com objetivo de ter uma boa

visualização em terminais ASCII (apenas textos), de forma que os cientistas de

todo o mundo pudessem compartilhar de tal descoberta.

Haviam restrições com relação aos modens lentos e monitores

monocromáticos.

O aspecto da página era muito simples, apresentava uma sequência do topo

para a base, da esquerda para a direita com textos e imagens, envolvidas por

linhas. A inserção de uma imagem era algo, praticamente, impossível devido

à lentidão do sistema.

13

Caracterização:

Design pouco apelativo;

Constituídos por uma coluna;

Texto disposto como se fosse um documento word

Evolução do Web Design

14

Primeiro Navegador

Evolução do Web Design

15

Os sites de segunda fase surgiram em 1995, quando a Netscape lançou um

conjunto de extensões para HTML, que possibilitava um pouco mais de recurso

com relação aos de primeira geração.

Os ícones tomam o lugar das palavras, o fundo chapado é substituído por uma

determinada textura, ou até mesmo aplicação dos logotipos de empresas. As

imagens e ilustrações passaram a fazer parte das páginas.

A estrutura destes sites começa com uma página inicial, home page que leva a

uma segunda página que contém o leque de opções a serem acessadas.

Evolução do Web Design

16

.

Evolução do Web Design

17

Ferramenta de Busca

Evolução do Web Design

18

Os sites de terceira fase surgem ainda na década de 90, e o design é peça

fundamental diante de todo contexto.

Passam a atrair usuários pela porta da frente (home page) e guiam para o

interior. Os designers especificaram a posição e os relacionamentos de todos

os elementos na página, obtendo um controle preciso da diagramação.

É empregado metáforas e um tema visual para atrair e também guiar. A cada

página o usuário se depara com algo que chamará sua atenção, e que no dia

seguinte ou semana poderá ter outros elementos que o convidará a entrar e

navegar (páginas dinâmicas).

Novas tecnologias e recursos , como o Flash.

Guerra dos Browsers (Microsoft X Netscape)

Evolução do Web Design

19

tela9

Evolução do Web Design

Páginas dinâmicas

20

Evolução do Web Design

21

Evolução do Web Design

A partir do ano 2000 surgi a quarta fase e a a internet se populariza dia-a-dia.

Crescimento do Google;

Sites utilizam novas técnicas de construção : o Tableless, que junto com o CSS

(folha de estilo), permite desenvolver layouts mais ricos. Abre-se a

possibilidade de trabalhar com inúmeras variações de elementos visuais.

Variedades de sites com conteúdo interativo (conteúdo oferecido de modo

inovador e criativo)

Sites em constantes atualizações.

Poderosos sites para armazenar elementos multímidia.

22

Evolução do Web Design

23

Surge o termo Web 2.0, que pontua a Era de uma internet focada na interação, nas

redes sociais; sendo encarada como uma plataforma que suporta aplicativos e

sistemas altamente integrados e complexos.

Evolução do Web Design

A Web passa a ser encarada como uma plataforma, na qual tudo está facilmente acessível e em que

publicar online deixa de exigir a criação de páginas Web e de saber alojá-las num servidor

24

Pensar na funcionalidade : de onde vem a

informação?

Fonte: http://www.flexi.pt/blog/evolucao-webdesign/

Evolução do Web Design

25

Receita para o desenvolvimento de um website :

Objetivos do Website.

Wireframe.

Layout.

Programação.

Podemos dizer que todo o website são constituídos por camadas de:

Apresentação (layout)

Informação (conteúdo)

Lógica (programação)

Desenvolvimento de um website

26

Qual objetivo ou necessidade do cliente?

qual a missão do cliente?

Qual a estratégia dele no mercado?

Qual a sua visão de mercado?

Quais os sites favoritos do cliente?

Há algum material no qual se basear?

Que outros sites são similares a ideia do clientes?

Qual o público-alvo do site?

O que é preciso comunicar?

Negócio Público Alvo Planejamento

.

Por onde começar

Antes de pensar no layout...

27

O propósito do Web Design é facilitar a comunicação entre utilizador e conteúdo .

Desenhar para a Web significa desenhar para as pessoas que usam a Web e não

como achamos que usam.

As pessoas chegam aos sites de variadas formas:

Percorrem as páginas à procura de pistas em vez de as lerem .

Tiram conclusões rápidas, em vez de avaliaram cuidadosamente.

Nem sempre olham para o “quadro geral” .

Os olhos do usuário

28

Arquitetura da Informação

O termo Arquitetura da Informação (AI) foi popularizado por Richard Saul Wurman

em meados da década de 1970 aliando os estudos de Arquitetura e de Informação.

É uma estrutura ou mapa de informação que permite aos usuários encontrar o que

necessitam. Esse estudo fornece elementos necessários para uma estrutura adequada

de construção de um website, indicando como organizar as informações e as formas de

disponibilizá-las, com a criação diversos caminhos de acesso.

É o processo pelo qual você divide o conteúdo de seu Web site em parte e, então,

organiza essas partes hierarquicamente em relação uma à outra de um modo lógico.

29

Arquitetura da Informação

Início

Seu diagrama sempre iniciará com sua página inicial

ou principal no topo da hierarquia.

Cada nova linha é uma subseção da seção acima.

30

Organograma: Mapa do site em geral, sei para cada elemento deve ir.

Entender a arquitetura do site, faz pensar em como pode ser criada uma boa navegação e um

bom design.

Atividade

Inicie o processo da Arquitetura da Informação perguntando a seu cliente o conteúdo

que ele deseja para o site.

MemorandoAssunto: Conteúdo do site para idosos

O site deverá divulgar as notícias sobre serviços ou produtos para idosos, que serão divulgadas nos

principais meios de comunicação.

Os produtos serão de empresas parceiras.

O site deverá conter uma seção de eventos, por categoria, onde o usuário irá selecionar o evento desejado e

será informado os detalhes do evento.

O site deverá ter uma seção de cuidadores com opção de envio de formulário para mais informações sobre

cuidadores.

O site precisa de uma página de contato.

31

Referências

SIARTO,Jeff ;WATRALL,Ethan. Use a cabeça: Web Design. Rio de Janeiro:

Alta Books, 2009.

Links:

http://www.evolutionoftheweb.com/?hl=pt-br

http://oldweb.today/

32