Introdução ao web design

Introdução ao Web Design

Prof. Anderson MaiaE-mail:[email protected]


• Alguns profissionais, empresas, cursos, matérias de revistas e conversas de botequim associam o design à produção de imagens ou manipulação de um software específico.

Obs:A definição do que é design vai muito além do Photoshop.

Introdução ao Web DesignDefinição:

• O web design é uma extensão da prática do design,

• O foco do projeto é

Criação de um projeto visual e funcional(Web Site) e documentos disponíveis no ambienteambiente WEB.

Criação de um projeto visual e funcional(Web Site) e documentos disponíveis no ambienteambiente WEB.


• O Web Design tende à Multidisciplinaridade.

Areas como programação, inovação nos recursos dos navegadores que em conjunto com o design gráfico, estão em constante evolução.


Definição 2• A função do design, além da estética, é tornar

um produto funcional. É transformar informação em comunicação.

Ao contrário do que muitos pensam, a função do design não está vinculada pura e simplesmente à produção de imagens.


• O propósito do Web Design é facilitar a comunicação entre utilizador e conteúdo.

• Desenhar para Web significa desenhar para as pessoas que usam a web e não como achamos que usam.


• Os Web Designs necessitam de capacidades para serem bem sucedidos neste ambiente.

1. Deve conhecer perfeitamente os objetivos do site para os poder alcançar.

2. Deve ser claro e objectivo que o design vai ter, e manter esse propósito.

3. Deve ser simplista, isto é, se um elemento adiciona complexidade mas não valor, então deve ser mudado.

Introdução ao Web DesignMas por onde começar o Projeto

É um conjunto de informações.


O briefing deve buscar um roteiro de ação para criar a solução que o cliente procura, é como mapear o problema, e com estas pistas, ter idéias para criar soluções.


Exercício para evidenciar a importância de um brief.Obs:Equipes de 4 alunos. Só podemos utilizar os matérias encontrados na lixeira da cantina e da sala de aula.1ª fase: Cada grupo irá pensar em um abajur feito com a sucata e escrever em um papel como seria a montagem desse abajur (apenas escrever, sem montá–lo).

2º fase: Na próxima fase trocaremos os projetos. Um grupo diferente irá montar o abajur, sem que quem escreveu o projeto dê qualquer palpite ou ajuda.


Agora que já estudarmos o briefing devemos ter conhecimentos também sobre como trabalhar a pregnância da forma.

http://ligiafascioni.wordpress.com/2007/06/03/pregnancia-da-forma-na-web/


Desenvolvimento Projeto Web

1. Planejamento e Estratégia Desenvolver uma estratégia que

se ajuste às necessidades do desenvolvimento do projeto para Web.

Coletar e organizar as informações para o projeto.


Fatores Primordiais:1.Objetivo do Projeto2.Produto3.Público4.Identidade Visual5.Motivações6.Comunicação7.Etc.....


Envolve respostas a algumas perguntas práticas.

1. Qual é o público do site?2. O que é preciso comunicar?3. Qual a necessidade ou objetivo do cliente que

queremos conquistar?4. Qual o esboço do site?5. Que outros sites são similares ao gosto do cliente?


Fases do Desenvolvimento1.Estratégia:•Os objetivos do site•As necessidades e gostos da hipotética audiência.•As formas e fraquezas da empresa concorrente•As capacidades da própria empresa


Como definir uma estratégia?


1. Definir a mensagem a ser transmitida.Exemplo:


2. Decidir como persuadir a audiência em aceitar essa mensagem.Exemplo: decidir em “educar” os utilizadores na inúmeras possibilidades de cada celular, e criar, assim, um ambiente( uma forma de estar) que os utilizadores querem participar. No fundo, tornar a venda mais fácil.


3. Escolher um tomSerio e formal ou divertido e informal? Visionário ou conservador? Dramático ou prático.

4. Identificar o nível de informação e detalhe oferecido no site.


Objetivos1.A definição pode ser formal ou informal,

mediante a dimensão do projeto. Formal – é necessário convocar reuniões com todas

as pessoas envolvidas – formando assim uma equipe de concepção.

Informal – falar com elas individualmente, tendo cuidado, contudo de anotar suas ideias.


Exemplo da Empresa NokiaObjetivo: Atrair novos Clientes e a possibilidade de

compra online.

O objetivo pode ser modificado de acordo com o número de utilizadores, no entanto, a definição inicial de um objetivo define de imediato o público alvo, a estratégia e conteúdo dos sites.

O objetivo pode ser modificado de acordo com o número de utilizadores, no entanto, a definição inicial de um objetivo define de imediato o público alvo, a estratégia e conteúdo dos sites.


Objetivos1. Qual o seu propósito?2. Qual o público-alvo?3. Qual o seu objetivo principal?4. Que informações disponibilizar?5. Quais os sites favoritos do cliente?6. Qual o esboço do site?


• Exercicio: Enumere os textos abaixo de acordo com a pergunta dos objetivos do slide anterior.

Para que servirá esta presença na Internet? Para divulgar a empresa? Para vender Produtos ou serviços? Qual o Propósito da empresa?

Fidelizar o cliente? Assisti-los no seu problema? Expandir o mercado da empresa? Centralizar os seus recursos? Angariar novos Clientes


Informação a respeito de como estruturar o trabalho de modo que ele atenda a expectativa o gosto do cliente.

Quais os clientes da empresa? Que idade têm? São pessoas instruídas? Quais são as condições econômicas? São pessoas que dominam as novas tecnologias? Que futuros clientes se pretende alcançar.


Produtos e serviços comercializados? Informação técnica sobre os produtos? Recursos de assistência ao cliente? Divulgação empresarial?

Esta etapa é similar a definir os objetivos do site.

Produção Web Site

• Implementam-se os conceitos e o design através da construção de páginas web utilizando um tipo de linguagem disponível.

• Selecionar tecnologias que melhor se adequam aos objetivos definidos, que se adequam aos recursos disponíveis e capacidade dos utilizadores.

Produção Web Site

Especificar qual a forme de produzir: A escrita manual do código HTML, por intermédio dos de

editores de texto ou editores especializados de código HTML.

U através de ferramentas para Web que fornecem interfaces gráficas de fácil utilização que exigem muito menos conhecimento sobre linguagem HTML, tais como Dreamweaver da Macromedia(Adobe) ou frontPage(Microsoft).

Produção Web Site

Teste e ValidaçãoUm site envolve a utilização De várias aplicações de software, Portanto é necessário testar a integração dessas aplicações de modo a assegurar que todos os componentes de software e hardware funcionem em conjunto como se espera.

OBRIGADO PELA ATENÇÃO!

Bibliografia

BEAIRD, Jaison. Princípios do Web Design Maravilhoso. São Paulo: Alta Books, 2008.

ANDERSON, Chris. A cauda longa. Rio de Janeiro: Elsevier, 2006.

Documents

Introdução ao web design