Desenvolvimento de Animações para Internet

Desenvolvimento de Animações para Internet

Semana 1 - Design e Web Design

Prof. Me. Francisco Gerson Amorim de MenesesEsp. Análise de Sistemas e em Banco de Dados

Bel. Ciência da ComputaçãoLattes: http://lattes.cnpq.br/5327908527296762

Tel: (86) 9986-3355 / (86) 8853-2319Email: [email protected]

Facebook: https://www.facebook.com/francisco.ademeneses

Conteúdo programático• Aula 1: Etimologia da palavra design e conceitos de

design• Aula 2: Web design e web designer (design e

designer)• Aula 3: Projeto, briefing, montando o layout,

hierarquia da informação e acessibilidade• Aula 4: Prática de web design

Etimologia da palavra DesignDesign [Ingl.]1. Concepção de um projeto ou modelo;

planejamento. O produto desse planejamento.

2. Desenho industrial.3. Desenho de produto.4. Programação visual.Designer [Ingl.]1. Indivíduo que planeja ou concebe um

projeto ou modelo2. Desenhista industrial.3. Desenhista de produto. 4. Programador visual.

Conceitos de Design

Conceitos de DesignDesign é a tentativa de conjugar a satisfação do cliente

com o lucro da empresa, combinando de maneira inovadora os cinco principais componentes do design:

performance, qualidade, durabilidade, aparência e custo. O domínio do design não se limita aos produtos,

mas inclui também sistemas que determinam a identidade pública da empresa (design gráfico,

embalagens, publicidade, arquitetura, decoração de interiores das fábricas e dos pontos de vendas).

(Philip Kotler, 1989)

Conceitos de DesignO Design é uma atividade especializada de caráter técnico-científico, criativo e artístico, com vistas à

concepção e desenvolvimento de projetos de objetos e mensagens visuais que equacionem sistematicamente dados ergonômicos, tecnológicos, econômicos, sociais, culturais e estéticos, que atendam concretamente às

necessidades humanas.

(Projeto de Lei nº 1.965, de 1996, que visa regulamentar a profissão no Brasil)

Conceitos de Design

Conceitos de Design

Para fazer um bom design é necessário conhecer muito bem o produto que se está trabalhando, dominar técnicas e ter bom senso para aplicar o seu conhecimento na hora de expressar as suas ideias. Um bom designer deve saber escutar, observar e destacar coisas que pessoas comuns não percebem, deve procurar expressar suas ideias através de formas e cores, a fim de mostrar o óbvio sem ser óbvio.

Web Design e Web Designer (Design e Designer)

Antes de mais nada, acho importante deixar bem claro que um "Web designer" nada mais é do que um Designer especialista em Internet, o termo web designer vem

sendo muito difundido e repetido à exaustão nos últimos anos, tudo bem, o termo se refere ao profissional de design que trabalha com Internet, mas nunca

devemos esquecer que para isso, o profissional deve ter muito bem definidos vários conceitos de cores, formas, usabilidade, e até marketing, isso desqualifica

pelo menos 80% dos “web designers” de plantão, não basta saber "usar" o Frontpage ou Dreamweaver, saber copiar algumas imagens de outros sites e

roubar alguns códigos por aí, claro que muita gente vai dizer que “nesse mundo nada se cria, tudo se copia”, mas essas pessoas também não devem saber a

diferença entre plágio e referência, essa pode ser a diferença entre contratar o "sobrinho" ou um amigo micreiro e um verdadeiro profissional de Design.

Andrej Grujic(Professor de Design da Universidade Anhembi Morumbi)


A Internet tem como principal característica o rápido acesso às informações, o web designer ou designer é o grande responsável em aliar um visual bonito, atraente aos olhos dos visitantes e que seja condizente com a proposta do projeto, à facilidade de navegação do site. Para isso, é necessário além da criatividade, alguns conhecimentos básicos de técnicas de design e informática.


Na Internet “imagem” é tudo, ou quase tudo, portanto um web designer tem que saber exatamente os elementos que deve ou não utilizar em cada projeto. Beleza e bom gosto fazem parte do processo, mas são aspectos subjetivos, afinal qual o conceito de belo ou feio guardadas as devidas proporções? Uma das principais tarefas do web designer é observar e desenvolver os aspectos funcionais do site e procurar simplificar ao máximo a navegação, o visitante deve saber exatamente aonde encontrar o que deseja, a isso vamos chamar de navegação intuitiva.


Para isso, é importante ter uma visão do design de um site como um todo, e não apenas como um amontoado de elementos fragmentados que constituirão o resultado final. Conhecer alguns conceitos como equilíbrio dos elementos visuais e utilização das cores são fundamentais nesse tipo de processo criativo, além de organização.


Toda forma de mídia tem elementos visuais próprios e com a Internet não é diferente. Sites que tenham um design bem definido, objetivo e que estejam de acordo com a proposta do produto ou do assunto a que deram origem, com certeza serão mais eficientes.


Web Design é o Design voltado para a Internet, e Web designer é o criador do processo. É importante procurar sempre o bom senso e certa sobriedade no estudo e criação de projetos, procurar aplicar os conhecimentos e técnicas na estética sem perder a ousadia e sem esquecer de vez a simplicidade. A tela do computador é o universo em que o Web designer deve trabalhar, e nesse universo é ele que decide a disposição de todos os elementos que vão compor o projeto.

Projeto de um web site

• Um projeto é um esforço temporário empreendido para criar um produto, serviço ou resultado exclusivo. Os projetos e as operações diferem, principalmente, no fato de que os projetos são temporários e exclusivos, enquanto as operações são contínuas e repetitivas.

• Os projetos são normalmente autorizados como resultado de uma ou mais considerações estratégicas.

• Estas podem ser uma demanda de mercado, necessidade organizacional, solicitação de um cliente, avanço tecnológico ou requisito legal.

• O projeto de um web site relaciona processos internos organizacionais, online e offline, a diferentes ações de interlocução com públicos diferenciados, que vão desde a venda e a distribuição de produtos até a divulgação de informações para fornecedores e parceiros.

• Os canais online, sejam web sites institucionais, hot sites de campanhas promocionais, canais de venda, fazem parte de um conjunto de ações que associa a comunicação com o público interno e externo a uma estratégia de negócios definida.


• Ao termos em mãos um projeto, devemos nos organizar da maneira correta antes da execução do serviço. Primeiramente, antes de pensar no visual do SITE, devemos nos focar em:

Que informações haverá no SITE e que público atingirá (ou seja, o BRIEFING)!

ESRUTURA E HIERARQUIA DA INFORMAÇÃO (o conteúdo, destaques e quais serão os links).

Conceitos de design, que por sua vez irão definir a disposição dos elementos no LAYOUT.


Briefing

• O Briefing é o início de tudo. Nele constarão “instruções” para a execução do projeto, ou seja, dados relevantes para que tenhamos um resultado final satisfatório.

• Vamos exemplificar um projeto de SITE para uma empresa fictícia que vende cursos de informática multimídia.

• O nosso briefing conterá informações como:

- Dados sobre a empresa, sua atuação e o que faz;- Seus produtos;- Qual seu público alvo, faixa etária e econômica;- Quais as preferências deste público;- Como ele disponibiliza seus serviços e vende seus produtos;- Forma de contato com o consumidor seja prestando serviço ou vendendo.

Briefing

• Procure acumular o máximo de informações antes de começar, além de informações específicas para seu projeto:

- Qual o retorno que a empresa espera com o site?- Quantas visitas serão esperadas por dia?- Quais as cores preferidas pelo seu público?- Que tamanho de fonte este público prefere, etc...

Briefing

Hierarquia da informação

• Sabemos que é na página inicial onde ficarão as chamadas em destaque.

• Junto delas, textos resumidos sobre o assunto, textos de fácil leitura que apresentarão o assunto ao usuário, e se aquilo despertar sua atenção, ele irá clicar neste link para levá-lo ao assunto na íntegra.

• E aí entra nossa organização.

Deveremos, antes de tudo criar um FLUXOGRAMA de todos os assuntos e links, desenvolvendo, desta forma, a ordem e a hierarquia de todas as páginas.

E precisamos estudar e mapear todos os links antes de começar.

Hierarquia da informação

Montando o layout• Geralmente essa parte do projeto é

feita pelo Web design, ficando a parte de codificação com o Web master.

• A preocupação fundamental do web designer é agregar os conceitos de usabilidade, acessibilidade com o planejamento da interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva.

Para desenharmos o layout de um site podemos usar aplicações gráficas como o pencil, ou até mesmo ferramentas mais sofisticadas como fireworks ou corel draw.

Montando o layout

Exemplo do layout de nosso site.

Montando o layoutPodemos, para WEB, calcular a região mais

valorizada em que, obviamente, ficarão os destaques do site, do mesmo modo que os

fotógrafos fazem para calcular a área de interesse no enquadramento de uma

fotografia.

Ou seja, divide-se o Browser em nove partes

iguais; as áreas de interesse serão as

proximidades onde haja as interseções de nossas

linhas imaginárias.

REGRA DOS TERÇOSEsta área valorizada do layout corresponderá

ao FOCO de INTERESSE do observador.

Montando o layoutEntretanto, somos pegos por um fato muito relevante em DESIGN DE WEB: o fato de o tamanho da mídia, no caso a área visível do site no Browser, ser mutável, dependendo da RESOLUÇÃO do monitor que o observador estiver utilizando.

Algumas exemplos de resoluções (em pixels): 800 X 600, 1024 X 768, 1280X1024

Montando o layoutNormalmente, os sites se estendem por barras verticais. Se trabalharmos com uma única barra de rolagem, o usuário tem um caminho lógico para seguir o conteúdo, o que facilita a navegação.

Deveremos tentar evitar que seja necessário o uso das barras de rolagem horizontais.

Acessibilidade• A Acessibilidade deve envolver três noções, "Utilizadores", "Situação" e

"Ambiente": O termo "Utilizadores" significa que nenhum obstáculo é imposto ao

indivíduo face às suas capacidades sensoriais e funcionais; O termo "Situação" significa que o sistema é acessível e utilizável em diversas

situações, independentemente do software, comunicações ou equipamentos; O termo "Ambiente" significa que o acesso não é condicionado pelo

ambiente físico envolvente, exterior ou interior.

• A acessibilidade da Internet caracteriza-se pela flexibilidade da informação e interação relativamente ao respectivo suporte de apresentação.

• Esta flexibilidade permite a sua utilização por pessoas com necessidades especiais, bem como a utilização em diferentes ambientes e situações, e através de vários equipamentos ou navegadores.

http://www.acessibilidadelegal.com/

Usando a ferramenta Pencil• Pencil é uma ferramenta

de prototipagem com interface gráfica útil para layout, esboço, análise e finalização de ideias usando uma ampla gama de elementos, incluindo formas comuns, elementos básicos da web, elementos que compõe uma GUI e muito mais. Estes podem ser exportados em vários formatos.

https://code.google.com/p/evoluspencil/downloads/detail?name=Pencil-1.3.4.win32.installer.exe&can=4&q

Obrigado!

Desenvolvimento de Animações para Internet

Documents

Transcript of Desenvolvimento de Animações para Internet