Aula 01 Pratica Modelos Cognitivos

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Web Design

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Objectivos : No final da unidade o formando é capaz de aplicar de forma adequada os princípios de design na concepção do produto Finalidade : Aprender os conceitos de design de navegação, design organizacional, e design de interface e suas potencialidades. Aplicar noções de alquimia da cor, e identificação de layouts, interligar os conceitos na criação de páginas gráficas

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Conteúdos teórico-práticos Design de navegação Estrutura da informação Navegabilidade Organização Interface

Design Organizacional Missão do Web design Informação organizacional

12

Design de interface Feedback experimental Alquimia da cor Contraste 18 Cor e espaços

6 Noções de layout O ritmo Construção da mancha Formato das paginas Proporções das margens

9

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Aula 1 Resumo Introdutório • Primeira Abordagem • Importância de páginas bem desenhadas • Dez erros mais cruciais • Processo de desenho para a Web

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Primeira Abordagem Sabemos da evolução da Internet como um meio de comunicação cada vez mais popular. A Internet já provou ser o futuro da disponibilização de conteúdos a nível mundial. Com cerca de 10 milhões de sites em 2000, e cerca de 100 milhões em 2002. O numero de servidores WWW cresce a um ritmo exponencial, mesmo superior ao numero de utilizadores da Internet, o que mostra bem o interesse que a WWW tem actualmente para todos os sectores das modernas sociedades de informação.

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Deve-se ao facto de : - Facilidade de utilização - Grande diversidade de informação disponível - Características multimédia -

Conteudos Estáticos

Conteudos Dinâmicos

International Division

Transição

Esta transição deve-se á necessidade de paginas vivas que interajam com o interlocutor e que tenham elementos dinâmicos que realcem e traduzam a realidade de uma Web cada vez mais viva.

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Protocolos da Internet O termo “aceder á Internet” implica a utilização de uma série de programas denominados clientes. Um cliente estabelece uma interface de acesso a determinados protocolos. Existem actualmente mais de 100 protocolos entre os mais usados temos:

Cliente de correio electrónico Microsoft Outlook Express

Cliente de leitura de newsgroups Microsoft Outlook Express

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Protocolos de pesquisa

Protocolos de partilha

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

O hipertexto e as ligações O hipertexto baseia-se na criação de áreas sensíveis num documento que, uma vez accionadas, levam ao estabelecimento de uma comunicação com outro computador. WWW – World Wide Web (rede mundial) através de uma URL (localizador uniforme de recursos) – transforma um numero IP num endereço alfanumérico do tipo : www.est.ipcb.pt -cada pais tem o seu próprio domínio: domínios internacionais : pt – Portugal com – Sites comerciais es – Espanha net – Serviços internet uk - Reino Unido org – organizações internacionais gov – sites governamentais edu – escolas e universidades

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Browsers (visualizador) Depois do desenvolvimento do hipertexto, surge a necessidade de ver também documentos com imagens. Surge então o desenvolvimento do HTML (Linguagem de Marcação de Hipertexto), uma linguagem de formatação que permite a qualquer pessoa publicar um documento com texto, imagem, som, animações na Internet. A WWW tem vantagens em relação á televisão , rádio, jornais , revistas, etc. Uma vez que permite a actualização ao minuto do conteúdos, pode conter elementos multimédia, a quantidade de informação é ilimitada, a pessoa pode interagir com a informação seleccionando apenas o que interessa, e permite trabalhar de forma personalizada

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Importância de páginas bem desenhadas - Homepage é a face da empresa para o mundo. - Cada vez mais os clientes (ou possíveis clientes) examinam a nossa presença na Web antes de fazer qualquer negocio. - Na Web, a concorrência não se limita as outras empresas do mesmo sector. Com todos os outros milhões de sites existentes estamos a concorrer com o tempo e pela atenção do utilizador.

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

A função da Homepage - Transmitir o que a empresa significa, a importância do site em relação á concorrência e ao mundo físico, e os produtos ou serviços oferecidos. - Permitir o acesso a todos os recursos importantes Analogias Capa de revista Primeira pagina de um jornal Peça de arte

Homepage

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Design da pagina O design da pagina é a parte mais visível do Web design. Com a actual tecnologia de Browsers, os utilizadores vêem uma única pagina de cada vez (ou no máximo duas ou três paginas consoante o tamanho da tela com varias janelas abertas), logo estas devem ser dominadas pelo conteúdo de interesse do utilizador. O design determina a forma. E a forma deve seguir a função. A função primordial do design gráfico é estabelecer hierarquias visuais, onde a ênfase é dada as partes mais importantes, de forma a que o publico entenda a mensagem através de uma organização consistente da informação.

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Design da pagina (cont.) È fundamental que a informação esteja bem organizada. Deve ser dividida logicamente em pequenos blocos. Pequenos pedaços são melhor digeridos pelos utilizadores, sendo a mensagem transmitida com maior eficácia.

O design procura o contraste, uma vez que este enfatiza e diferencia diversos tipos de informação

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

• Objectivos e conteúdos Para a criação de um site para a WWW envolve fundamentalmente - Organização - Criatividade Arquitectura da informação: consiste na produção de um programa em duas partes: -

Determinar os objectivos do site Compreender o publico alvo

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Objectivos Qual a posição do cliente perante a concorrência do mercado? O que se pretende com a sua presença na Web “ sem objectivos claros, o desenvolvimento de do site cedo estagna ao seguir caminhos não identificados, levando inclusivamente a um fraco ROI ” Então : Todas as pessoas com importância decisiva devem ser consultadas.

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Objectivos O estabelecimento de objectivos passa necessariamente por responder a :

-

Qual o seu propósito? Quais os objectivos principais? Qual o publico alvo? Que informação disponibilizar?

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

• Conteúdos Depois de traçados os objectivos é necessário definir os conteúdos e que tipos de funcionalidades vamos oferecer. Então devemos : elabora-se uma lista de conteúdos e funcionalidades (discutida com os intervenientes no processo)

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Identificação de conteúdos Existem 4 categorias: -

Estáticos – informação sobre direitos de autor, regras para membros etc.

-

Dinâmicos – informação actualizada...

-

Funcionais – informações que carecem de programas para serem disponibilizados como,por exemplo,consultas a BD.

-

Transaccionais – informações relativas a pagamentos e suas funcionalidades inerentes

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Estrutura e Navegação Depois de - Delineados objectivos - Programado conteúdos -

Definir

Estrutura Organizacional da Informação Acesso a essa mesma informação

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Estrutura A informação deve ser estruturada por : Categorias e Subcategorias Dependendo do tipo de informação, assim será a estrutura do site. Então a estrutura fundamental de qualquer site deve conter:

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Estrutura Pagina Principal Menu Sub-Menu

Pagina de Conteúdos

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Navegação

A navegação deve ser feita a partir da pagina principal.

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Top 10

Dez erros a evitar em desenho de paginas:

Lista de Nielson

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

1 Tempos de Carregamento Longos Regra dos 10 segundos Tempo que utilizador leva a perder interesse 15 seg pode ser aceitável na Internet Mais do que este valor só para paginas de conteúdos Banda larga ---- realidade ---- desde 1195

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

2 Informação desactualizada Regra geral : As pessoas preferem criar conteúdos do que mantê-los

E-commerce Informação desactualizada  perda de interesse

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

3 Cores de elos não padronizadas Paginas não visitadas – Azul Paginas visitadas – Vermelho Preferencial não alterar: Ajuda a navegação Consistência na aprendizagem

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

4 Falta de Apoio á Navegação Utilizadores não conhecerem o nosso local Utilizar mapa... para se saber o que se esta a visitar Utilizar um bom mecanismo de busca “Logo local” no canto superior esquerdo ligado á homepage. Estrutura de outline indicando a localização actual

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

5 Paginas muito longas Conteúdo critico e navegação no topo da pagina Paginas de informação podem ser maiores – se existir interesse irão procurar conteúdo Importância decrescente – não usar mais de 3 ecrãs; informação de topo mais importante

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

6 URLs Complicados Não expor endereços maquina Devem ser de fácil leitura por qualquer pessoa Nomes devem reflectir o conteúdo www.diariodenoticias.pt URLs difíceis de enviar por email

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

7 Animações continuas Muitas animações só complicam Imagens em movimento estimulam um visão óptima. Utilizadores desligam-nas Os utilizadores tem de ter “sucesso” para ler os conteúdos.

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

8 Uso gratuito da tecnologia

Não atrair novos utilizadores com ofertas de software... Os utilizadores normais estão preocupados com os conteúdos...

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

9 Paginas órfãs

Todas as paginas devem indicar qual o local onde pertencem Elos para a homepage Indicação onde pertencem e a posição na estrutura local

Programa FORDE Tecnologia

SK

Curso “Produção Multimedia” Designação do Módulo – Web Design

Escola Superior de Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

10 Frames Confundem utilizadores Conflito com modelo utilizado da pagina web Unidade de navegação diferente unidade de visualização Motores de busca tem problemas com frames Que parte dos framesets incluir nos índices Utilizadoras de uma forma geral preferem paginas sem frames 70-90% Nota : WWW =/= desktop http://www.useit.com/alertbox/9605.html

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Processo de Desenho Web

Descoberta Exploração Refinamento Produção

Avaliar as necessidades . Compreender expectativas . Determinar âmbito do projecto . Características dos utilizadores . Avaliar site actual e/ou concorrência

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Processo de Desenho Web

Descoberta Exploração Refinamento Produção

Gerar alternativas . Ver de soluções para requisitos idênticos . Desenhar informação e navegação . Primeiro Design gráfico . Seleccionar um

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Processo de Desenho Web

Descoberta Exploração Refinamento Produção

Detalhar desenho . Níveis de detalhe crescente . Forte ênfase no design gráfico

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Processo de Desenho Web

Descoberta Exploração Refinamento Produção

Ultimar desenho . Criar produto final . Especificações, linhas mestras e protótipos . Alto nível de detalhe

Programa FORDE Tecnologia

SK

Escola Superior de

Curso “Produção Multimedia” Designação do Módulo – Web Design

Instituto Politécnico de Castelo Branco

Duração – 30 Horas Formador – Pedro Silva

Designers Criam representações de locais em múltiplos níveis de detalhe Locais Web refinados a todos os níveis

Mapas Soryboards Esquemas Simulacros