Desenvolvimento de Animações para Internet

Semana 1 - Design e Web Design

Prof. Me. Francisco Gerson Amorim de Meneses

Esp. Análise de Sistemas e em Banco de Dados Bel. Ciência da Computação Lattes: http://lattes.cnpq.br/5327908527296762 Tel: (86) 9986-3355 / (86) 8853-2319 Email: [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 Design

Design [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 modelo 2. Desenhista industrial.

3. Desenhista de produto. 4. Programador visual.

Conceitos de Design

Conceitos de Design

Design é 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 Design

O 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)

Web Design e Web Designer (Design e Designer)

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.

Web Design e Web Designer (Design e Designer)

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.

Web Design e Web Designer (Design e Designer)

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.

Web Design e Web Designer (Design e Designer)

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 e Web Designer (Design e Designer)

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.

Web Design e Web Designer (Design e Designer)

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.

Projeto de um web site

• • 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.

Projeto de um web site

• 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.

Briefing

• 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...

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.

Hierarquia da informaçã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.

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.

Montando o layout

Exemplo do layout de nosso site.

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

Podemos, 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.

REGRA DOS TERÇOS

Esta área valorizada do layout corresponderá ao FOCO de INTERESSE do observador.

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.

Montando o layout

Algumas exemplos de resoluções (em pixels): 800 X 600, 1024 X 768, 1280X1024 Entretanto, 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.

Montando o layout

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

Normalmente, 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.

• • •

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!