Disciplina: Web Design
Diretoria de Pós-graduação e Pesquisa
Centro Universitário Senac
Prof. Me. Denise [email protected]
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
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
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
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
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
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
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