UNIP

Produção de Design em Multimídia

Profa. Cristina Ramos (cristina.ramos@unip.br)

Aula 1

 Apresentação da disciplina

 Conceitos de design / hipermídia

Design
• design . [Ingl.] S. m. 1. Concepção de um projeto ou modelo; planejamento. 2. O
produto desse planejamento. 3. Restr. Desenho industrial. 4. Restr. Desenho-de-produto.
5. Restr. Programação visual.

"Design significa ter e desenvolver um plano, um projeto, significa designar. É trabalhar

com intenção, com cenário futuro, executando a concepção e o planejamento daquilo
que virá a existir." (Moura, Mônica)

Design de comunicação: design gráfico; design editorial; design de hipermídia; web

design; design de interação; design de jogos

Área de conhecimento e a prática profissional que tratam da organização formal de

elementos visuais que compõem peças gráficas e virtuais

"O web design tende à multidisciplinaridade, uma vez que a construção de páginas web
requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas
como a arquitetura da informação, programação, usabilidade, acessibilidade
entre outros. A preocupação fundamental do web designer é agregar os conceitos de
usabilidade com o planejamento da interface, garantindo que o usuário final atinja seus
objetivos de forma agradável e intuitiva." (http://pt.wikipedia.org/wiki/Web_design -
acesso em agosto/2010)

"Criar, desenvolver, implantar um projeto - o design - significa pesquisar e trabalhar com

referências culturais e estéticas, com o conceito - norteador da proposta. É lidar com a
forma, com o feitio, com a configuração, a elaboração, o desenvolvimento e o
acompanhamento do projeto." (Moura, Mônica)

Focado em desenvolver um objeto, que tenha por razão de existir tanto a função como a
fruição, o designer é diferente de outros profissionais, como engenheiros, que
eventualmente só se ocupam da função, ou artistas plásticos, que se ocupam da
fruição do objeto. (Alexandre Santaella Braga)
UNIP – PDM

Hipermídia

Características da hipermídia

Hibridismo: associação de duas ou mais mídias, encontro de dois ou mais meios;

conjunção simultânea de diversas linguagens.

Não-Linearidade: ao contrário das mídias tradicionais, como livros, filmes, etc onde a
apresentação da informação tem um início bem definido e uma progressão linear até o
final, a mídia não linear baseia-se em escolhas. A informação é divida em vários blocos,
cujos conteúdos podem ser compreendidos sem necessidade de uma sequência pré-
determinada.

Hipertextualidade: o usuário seleciona aquilo que o interessa dentro de um bloco de

informação e, ao clicar em um hiperlink é transportado para uma nova localização dentro
da mesma página, outra página ou mesmo para uma outro site.

Interatividade: possibilidade de se transformar os envolvidos na comunicação em co-

autores, ao mesmo tempo emissores e receptores da mensagem.

Navegabilidade: diz respeito ao ato de navegar, à exploração e à mobilidade do usuário

no ciberespaço, na rede ou em um aplicativo de hipermídia.

Isso significa que o designer digital, diferente do designer gráfico, está elaborando um
meio hiperespacial que não se encerra na leitura da interface em questão. O designer de
interface tem a função, extra, de dar vários rumos ao usuário, rumos estes que se
tornam uma série de elementos visuais espalhados pela interface. (Alexandre Santaella
Braga)

Na prática

As habilidades de um web designer profissional estão constantemente mudando, porque

a Web está mudando constantemente. Esta natureza acelerada da Web é considerada
boa por alguns (porque abre oportunidades), enquanto outros odeiam, porque você tem
que estar pronto para aprender novas habilidades regularmente.

A seguinte lista detalha aquilo que, no momento atual (2010), você precisa saber para se
tornar um web designer profissional.

2
UNIP – PDM

Elementos básicos do funcionamento da Web:

 Domain names - Domínio

 Hosting - Hospedagem

 Protocolos - FTP e HTTP

Habilidades de projeto

 Conhecimento da mídia

 Compreender o fluxo de trabalho web design - Processo

 Briefing

 Arquitetura

 Criação: concepção, elaboração

 Wireframe

Habilidades de desenvolvimento

Dreamweaver

HTML

 Estrutura da página e do site organização/pastas

 Conceitos básicos de HTML – marcação correta (tags, doctypes)

 XHTML (em breve HTML 5)

 Listas, tabelas e formulários

CSS

 Os princípios básicos CSS – importância, vantagens, limitações, sintaxe, cascata,

aplicação.

 Propriedades básicas de CSS– margins, floats, padding, z-index, propriedades de

texto

 Box model

 Posicionamento

 Layout CSS page

DHTML

 Básico do Javascript – (Jquery)

3
UNIP – PDM

Habilidades de design

Fireworks/Photoshop

 Princípios básicos de design - espaço em branco, tipos de letra, alinhamento

 Tipos de imagem utilizados na web (JPG, GIF, PNG). Os prós e contras.

 Básico de edição de imagem aplicado à criação de websites - tamanhos e

otimização.

Habilidades básicas de Programação

 PHP / ASP

 Banco de dados

Outras Competências

 Flash para animação

 Codificação de vídeo

 Blog / CMS: Wordpress, Drupal, Joomla.

 Usabilidade - como fazer sites mais amigáveis.

 SEO – fazer sites mais amigáveis para Search Engine.

4
UNIP – PDM

Pesquisa - O que é qualidade em um website?

Liste 10 características negativas e 10 características positivas percebidas em sites

visualizados (não precisa ser no mesmo site, nem comuns aos sites)

Ruim (?)

http://www.angelfire.com/super/badwebs/

http://www.webpagesthatsuck.com/

http://www.areavoices.com/www/

http://pcworld.uol.com.br/reportagens/2006/09/18/idgnoticia.2006-09-18.2013605880

http://www.time.com/time/specials/2007/article/0,28804,1638344_1638341,00.html

Bom (?)

http://www.arteccom.com.br/webdesign/peixegrande/

http://tutorialblog.org/30-great-website-designs-part1/

http://tutorialblog.org/30-great-website-designs-part2/

http://tutorialblog.org/30-great-website-designs-part3/

http://www.premioibest.com.br/vencedores/homepage.asp

http://www.webbyawards.com/webbys/current.php?media_id=96&season=11