Unb 2012.1 - dweb - 02 - por onde começar

DWEB – Design para Web

1 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?

“Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus.” 2 Timóteo 1:13

Curso Superior de Tecnologia em Design Gráfico

2 Por onde começar?

DWEB – Design para Web / Carlos José


Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Descrever a profissão de web design, bem como suas atribuições e realizações.



Agenda

n Por onde começar? n O que preciso aprender? n Frontend vs Backend n As camadas n Uma visão de futuro para web n Diagramação na web



Começando...

n  Introdução î Desde que a web foi criada em meados de 1989

com suas motivações iniciais muita coisa mudou! î A web como meio de comunicação e veículo

comercial, veio para ficar, sendo assim: n  Serve como oportunidade de carreira; n  Um estimulo para acompanhar os concorrentes; n  Apenas uma possibilidade de conseguir mostrar para

o mundo o que você faz.



Começando...

n  Por onde começo? î O primeiro passo é ter uma compreensão básica

de como a web funciona e seus documentos. n O que preciso aprender?

î O web design combina várias habilidades: n  Design gráfico n  Design de informação + Arquitetura da informação n  Design de interface n  (x)HTML + CSS n  Programação n  Multimídia



Começando...

n  Frontend Vs Backend î Frontend

n  Refere-se a qualquer aspecto do processo de design relacionado diretamente ao navegador (browser).

n  Tarefas do frontend: î  Design gráfico î  Design de interface î  Design de informação î  Utilização dos Web Standards para produção de websites

§  (x)HTML + CSS + Javascript (jQuery)



Começando...

n  Frontend Vs Backend Grandes empresas, como Yahoo!, Google, Twitter, Microsoft e Adobe, investem pesado em front-end

A falta de um profissional especializado nessa área pode representar risco ao projeto

O domínio de especialidades de front-end pela equipe é essencial para o sucesso de um produto na web

Edição 81 Novembro/Dezembro 2010



Começando...

n  Frontend Vs Backend î backend

n  Refere-se aos programas e scripts que rodam no servidor web para tornar dos documentos web dinâmicos e interativos.

n  Tarefas do frontend: î  Design de informação relacionado a como a informação é

organizada no servidor web. î  Processamento de formulários eletrônicos î  Programação de banco de dados î  Sistemas de gerenciamento de conteúdo î  Programação web

§  PHP, ASP, JSP, Rubi on Rails, Java e etc.



Começando...

n As camadas! î O web design contemporâneo é composto de

três camadas: n  Camada de Estrutura

î  O conteúdo do documento web com suas marcações (X)HTML.

î  É a base sobre a qual as outras camadas serão assentadas n  Camada de Apresentação

î  Controlar a aparência visual formatando com CSS todo o conteúdo que deverá aparecer no navegador.

n  Camada de Comportamento î  Inclui os scripts jQuery de programação que tornam a

experiência do usuário interativa.



Começando...

n Uma visão de futuro para a web

http://inspirationfeed.com/2011/01/20-inspiring-ted-videos-for-graphic-and-web-designers/



Começando...

n Diagramação na web Cada recomendação gerada em wireframe foi pensada e tem uma razão de ser. Logo, deve ser respeitada pelo designer. Em qualquer tipo de interface, contraste, ritmo, harmonia e equilíbrio estão presentes na composição. Agregaram-se então a arquitetura de informação e a usabilidade como campos de estudo do que podemos chamar de “diagramação digital”.

Edição 71 Novembro 2009



Começando...

n Diagramação na web: Grid System Grids não são uma moda passageira: foram criados antes dos tipos móveis. Parece que todos os designers interativos estão, pela primeira vez em suas carreiras, olhando para os impressos e para a teoria gráfica em busca de inspiração. As pessoas justificam um projeto ruim porque “não quebra o grid”, eles esquecem que feio é sempre feio. O grid é uma ajuda, não uma garantia.

Edição 125 Dezembro 2010



Começando...

n Diagramação na web:– 960.gs



Começando...




Começando...




Começando...




Começando...




Começando...




Começando...

n Diagramação na web:– na prática!



Começando...

n Diagramação na web:– na prática!



Perguntas

?



Considerações Finais

Fonte: ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição

Documents

Unb 2012.1 - dweb - 02 - por onde começar