SlideShare uma empresa Scribd logo
Web Pixel - Agência Criativa | www.webpixel.com.br
Web Pixel - Agência Criativa | www.webpixel.com.br
O que é o Web designer?
Web Designer é uma extensão da prática do design gráfico, onde o foco do projeto é a criação
de sites e documentos disponíveis no ambiente da World Wide Web.
O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer
subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a
arquitetura da informação, programação, ergonomia,[1] usabilidade, acessibilidade entre
outros.
A preocupação fundamental do web designer é agregar os conceitos de usabilidade com o
planejamento da pessoa em destaque interface, garantindo que o usuário final atinja seus
objetivos de forma agradável e intuitiva.
Planejamento estratégico
Como todo trabalho de design, ele é um projeto, e necessita uma análise informacional, a partir
de um briefing. Detectar corretamente o objetivo do projeto é essencial para um bom
planejamento, de modo que as ações sejam tomadas de forma correta.
É sempre necessário definir o público alvo do site, o objetivo, os serviços oferecidos, o diferencial
para o público. A partir desses e de outros elementos que sejam especificamente relevantes ao
projeto, será definida a estrutura do site (Arquitetura de informação), a tecnologia empregada
e o layout.
De uma forma geral, embora usualmente possa parecer que a primeira impressão que se tem
de um site é o visual, na verdade o visitante busca o conteúdo, por esse motivo o primeiro passo
estratégico é definir bem todas as informações que o site terá, definir claramente a arquitetura
de informação do site e por último, o design visual do site, que não precisa pular, girar e piscar,
a não ser que o que se esteja vendendo é design/imagem (que não se aplica ao meio
informacional que é a Web), mas ter um aspecto profissional seguindo pelo menos os conceitos
básicos do design como aproximação, contraste, alinhamento, dentre outros.
Há uma diferença conceitual marcante entre design nos meios tradicionais, como no gráfico e o
design aplicado na web. Na web, a estética deve ser moldada ao dispositivo que acessa ao site
ou mesmo desabilitada caso não seja necessária no contexto de utilização. No meio gráfico é
possível prever como o usuário final verá a estética do produto, já na web isto não é possível,
pois a aparência pode e deve mudar radicalmente de acordo com o sistema operacional
utilizado, configurações pessoais, navegadores, resoluções de tela e dispositivos, como celular,
TV, impressora, leitores de telas etc. Por este motivo, a estrutura (HTML) com a qual a
informação será exposta deve trabalhar independentemente da formatação estilística (CSS) e
do comportamento (scripts), que são recomendações do W3C.
Web Pixel - Agência Criativa | www.webpixel.com.br
Web Pixel - Agência Criativa | www.webpixel.com.br
Estrutura do web design
A estrutura, também conhecida como arquitetura de informação, do site deve contemplar seu
objetivo, tornando a experiência do usuário a mais confortável e fácil possível, chamamos isso
de usabilidade. Deve-se planejar a estrutura de forma que o usuário obtenha facilmente a
informação ou serviço desejado. Hoje em dia são inúmeras as formas que um site pode adquirir
e a criatividade continua ser o grande diferencial na produção de web.
Layout
O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um
elo de comunicação com o usuário, que sua linguagem seja condizente com o objetivo do site.
Conhecer heurísticas de usabilidade é fundamental para se gerar layouts para a web.
Cada elemento inserido em um website deve ter um objetivo, a perfeição de um website se
atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido.
A maioria dos layouts antigos dos sites da Web eram feitos com tabelas na linguagem HTML,
porém esta forma é inapropriada pois tabelas devem ser utilizadas apenas para exibir dados
tabulados. Entretanto existem layouts que são completamente produzidos sem a presença de
tabelas, sao os famosos "tableless" e esta sim é a melhor forma de estrutura para layouts.
tableless não pode ser entendido como na tradução livre, que seria literalmente "sem tabelas".
Tableless é um conceito e deve ser entendido como aplicação das webstandards (normas da
web desenvolvidas pela W3C).
Navegadores
São programas responsáveis por interpretar o conteúdo de um web site, disponibilizando assim
a interface com a qual o usuário final irá interagir. O navegador está para o web design assim
como o papel está para o jornal. A grande variedade de navegadores e discrepância entre os
recursos fez seus próprios criadores caminharem em direção a um padrão comum. Atualmente
é indispensável criar sites seguindo os padrões da World Wide Web Consortium.
No desenvolvimento do site, o HTML deve ser criado seguindo os padrões do W3C (Web
Standards) de forma que fique funcional, independente dos dispositivos (TV, celular, impressora,
monitor etc). Apesar de em tese não haver a necessidade de testar em diversos navegadores, é
um bom hábito testar em mais de um navegador (Mozilla Firefox, Internet Explorer, Netscape,
Opera, Safari, Google Chrome e outros), pois o layout do site pode apresentar diferenças em
determinados navegadores, e o usuário que navega não entenderá o que está acontecendo.
Web Pixel - Agência Criativa | www.webpixel.com.br
Web Pixel - Agência Criativa | www.webpixel.com.br
Padrões
A World Wide Web Consortium (W3C) é o órgão responsável por recomendar padrões de
desenvolvimento para a internet. Por meio destes padrões se pode classificar: web sites de
acordo com suas características técnicas, indo além do visual e; navegadores, de acordo com
sua capacidade em atender aos padrões definidos.
O grande objetivo de seguir os padrões do W3C é de possibilitar que a informação veiculada
pelo site permaneça independente do dispositivo utilizado pelo visitante e que seja acessível.
Programas utilizados
Existe um leque enorme de programas usados pelos web designers. Para construção do código,
por se tratar de simples texto, qualquer editor de texto pode servir de suporte para a criação do
código. Entretanto, há programas tanto gratuitos como de uso comercial, com interface
WYSIWYG, que são amplamente utilizados no mercado tanto para gerenciar sites, quanto para
apenas editar códigos, como é o caso do Adobe Dreamweaver, Aptana, Microsoft Expression
Web, na parte visual, os editores gráficos vetoriais CorelDRAW, Adobe Illustrator ou o Inkscape),
de bitmap GIMP, e principalmente Adobe Fireworks ou Adobe Photoshop. Para animações e
recursos dinâmicos, o Flash é o mais utilizado. Em relação ao Flash, deve-se ter o cuidado de
usá-lo apenas onde a solução seja impossível de ser reproduzida em HTML, jamais se usa em
menus e áreas de conteúdo por ser um arquivo binário, não ser acessível e estar em desacordo
com as recomendações do W3C. Na atualidade, existem disponíveis na rede website builders,
trata-se de plataformas que o usuário pode criar um site sem a instalação de nenhum programa.
Tais ferramentas são muito interessantes e vem ganhando espaço no mercado, pois leigos na
área de webdesign podem criar seu próprio site e atualiza-lo diariamente se desejado.
Web designer
A tarefa do web designer é a elaboração estética e funcional e a manutenção de um web site. O
web designer deve ter a compreensão da aplicação em mídia eletrônica de disciplinas como
HTML/XHTML, CSS, JavaScript/DHTML, Flash etc. e deve ter conhecimento no uso de software
de desenvolvimento voltado para a web.
A capacitação leva em torno de 1 a 2 anos para ser concluída.
As vantagens de se ter uma página na Internet
A internet se tornou a maior ferramenta de marketing do mundo, e também a mais acessível.
Tudo isso se deve ao seu alcance de grande parcela da população mundial acarretada pela sua
dinamização e disseminação crescentes no planeta. A tendência do mercado atual é que cada
vez mais as empresas, necessitarem de um segundo endereço, o virtual. De modo que
divulguem seu conteúdo para se sobreporem ao seu concorrente que possivelmente já têm sua
Web Pixel - Agência Criativa | www.webpixel.com.br
Web Pixel - Agência Criativa | www.webpixel.com.br
página na internet. Um endereço virtual gera publicidade e credibilidade por parte do internauta
e consumidor.
Os benefícios de se ter uma identidade virtual são vários. Podemos apontar como os principais
o fato que a internet é o meio que passa as devidas informações de maneira rápida e objetiva.
Gerando um grande segmento sobre o cartão de visitas sem haver pressão sobre o cliente. Este
fica à vontade pra decidir o que consumir, sendo atraído de forma natural aos domínios
empresariais.
Torna a relação mais amigável com o consumidor, por diminuir significativamente as
necessidades de inconveniências inerentes às outras formas de divulgação como:
Telemarketing, Panfletos poluentes, Correspondência e Outdoor que causam poluição visual e
ambiental. Desse modo, esclarece mais que todos os meios anteriores citados e com mais
elegância se for contratado o profissional correto para direcioná-lo devidamente. E o custo com
a mão de obra e matéria prima são muito menores, pois, precisam contar com inúmeros
profissionais e/ou despesas de impressão altíssimas devido à demanda comercial. Outra
vantagem que leva sobre as outras formas de anúncios, é que pode ser acessado a qualquer
hora e lugar que tenha internet, tornando mais conveniente e as propostas oferecidas sendo
analisadas com mais peculiaridade e calma.
Design Responsivo
Diante do surgimento das novas plataformas de navegação na internet, tais como smartphones
e tablets, os sites precisaram se adaptar à nova usabilidade dos usuários. O ponto de partida
para essa nova forma de criar conteúdo para a web foi com a publicação em maio de 2010 de
uma matéria de Ethan Marcotte no site Alist Apart. Marcotte é considerado o pai do design
responsivo, pois ele apresentou à toda comunidade digital a necessidade de desenvolver sites
com o conceito Mobile First, ou seja, a partir de agora todos os sites devem ser desenvolvidos
já com a sua versão mobile estabelecida previamente.
Os ingredientes básicos do design responsivo são: a presença de um grid fluído, imagens e mídias
flexíveis e, media queries. Esses igredientes são alcançados através da utilização das já
tradicionais linguagens de programação HTML5, JavaScript para compatibilidades e CSS3, com
suas devidas adptações.
Fonte: wikipedia
Web Pixel – Criação de Sites em Brasília DF

Mais conteúdo relacionado

Mais procurados

Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro Nielsen
Luiz Agner
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
Vinícius Silva de Andrade
 
Revendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webRevendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da web
Wellington Oliveira
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
Edu Agni
 
Metodologia sugerida para gestão de projetos web
Metodologia sugerida para gestão de projetos webMetodologia sugerida para gestão de projetos web
Metodologia sugerida para gestão de projetos web
diogo_plta
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
Arlindo Correia
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
Gustavo Gobbi
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Augusto César Albuquerque
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
Régis Eduardo Weizenmann Gregol
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
Edu Agni
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
Monica Mesquita
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
Jackson F. de A. Mafra
 
Pitacos sobre usabilidade
Pitacos sobre usabilidadePitacos sobre usabilidade
Pitacos sobre usabilidade
Darcio Vilela
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Guilherme Costa
 
Regras básicas na construção de um site
Regras básicas na construção de um siteRegras básicas na construção de um site
Regras básicas na construção de um site
Ana Santos
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Rennan Martini
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
Marconi Pacheco
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
Gabriel Zavitoski
 

Mais procurados (19)

Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro Nielsen
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
Revendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webRevendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da web
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Metodologia sugerida para gestão de projetos web
Metodologia sugerida para gestão de projetos webMetodologia sugerida para gestão de projetos web
Metodologia sugerida para gestão de projetos web
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Pitacos sobre usabilidade
Pitacos sobre usabilidadePitacos sobre usabilidade
Pitacos sobre usabilidade
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Regras básicas na construção de um site
Regras básicas na construção de um siteRegras básicas na construção de um site
Regras básicas na construção de um site
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
 

Destaque

Carioca Sunset 2016
Carioca Sunset 2016Carioca Sunset 2016
Carioca Sunset 2016
Rafael Ribeiro
 
Lenguaje corporal
Lenguaje corporalLenguaje corporal
Lenguaje corporal
Becky Martínez
 
Noções de cartografia
Noções de cartografiaNoções de cartografia
Noções de cartografia
Agnobel Silva
 
CURRICULUM VITAE
CURRICULUM VITAECURRICULUM VITAE
CURRICULUM VITAE
Hager Hassan
 
Veronica blasco
Veronica blascoVeronica blasco
Veronica blasco
Veronica Blasco Torres
 
Aniversário anjos pecadores 2014
Aniversário anjos pecadores 2014Aniversário anjos pecadores 2014
Aniversário anjos pecadores 2014
Anjos Pecadores
 
Todd Bollinger 20151114
Todd Bollinger 20151114Todd Bollinger 20151114
Todd Bollinger 20151114
Todd Bollinger
 
Memorandum for Denver Meeting
Memorandum for Denver MeetingMemorandum for Denver Meeting
Memorandum for Denver Meeting
Maggie Ryan
 
مفاهيم مختصرة وأساسية في المناهج وطرق التدريس
مفاهيم مختصرة وأساسية في المناهج وطرق التدريسمفاهيم مختصرة وأساسية في المناهج وطرق التدريس
مفاهيم مختصرة وأساسية في المناهج وطرق التدريس
aymn1424
 
Evaluacion de software hot potatoes
Evaluacion de software hot potatoesEvaluacion de software hot potatoes
Evaluacion de software hot potatoes
Alan_26
 
Protagonista, la júlia
Protagonista, la júliaProtagonista, la júlia
Protagonista, la júlia
pilarmestres
 
Actividad financiera emily
Actividad financiera emilyActividad financiera emily
Actividad financiera emily
Edilyn Carolina Perozo Morles
 
Youtube ad-vantage 2
Youtube ad-vantage  2Youtube ad-vantage  2
Youtube ad-vantage 2
Le Quy
 
Frame example
Frame exampleFrame example
Frame example
Wesam Zahran
 
Empresarial
EmpresarialEmpresarial
Creación de logotipo para marca de ropa de surf
Creación de logotipo para marca de ropa de surfCreación de logotipo para marca de ropa de surf
Creación de logotipo para marca de ropa de surf
Diego Ljubisa Yesquen Petkovich
 
TCC Presentation
TCC PresentationTCC Presentation
TCC Presentation
Sofia Borges Lebr
 
Audio Lingual Method rizzo-simón
Audio Lingual Method rizzo-simónAudio Lingual Method rizzo-simón
Audio Lingual Method rizzo-simón
Sofy Simón Repetto
 

Destaque (20)

Drive
DriveDrive
Drive
 
Carioca Sunset 2016
Carioca Sunset 2016Carioca Sunset 2016
Carioca Sunset 2016
 
Lenguaje corporal
Lenguaje corporalLenguaje corporal
Lenguaje corporal
 
Noções de cartografia
Noções de cartografiaNoções de cartografia
Noções de cartografia
 
CURRICULUM VITAE
CURRICULUM VITAECURRICULUM VITAE
CURRICULUM VITAE
 
Presentación9
Presentación9Presentación9
Presentación9
 
Veronica blasco
Veronica blascoVeronica blasco
Veronica blasco
 
Aniversário anjos pecadores 2014
Aniversário anjos pecadores 2014Aniversário anjos pecadores 2014
Aniversário anjos pecadores 2014
 
Todd Bollinger 20151114
Todd Bollinger 20151114Todd Bollinger 20151114
Todd Bollinger 20151114
 
Memorandum for Denver Meeting
Memorandum for Denver MeetingMemorandum for Denver Meeting
Memorandum for Denver Meeting
 
مفاهيم مختصرة وأساسية في المناهج وطرق التدريس
مفاهيم مختصرة وأساسية في المناهج وطرق التدريسمفاهيم مختصرة وأساسية في المناهج وطرق التدريس
مفاهيم مختصرة وأساسية في المناهج وطرق التدريس
 
Evaluacion de software hot potatoes
Evaluacion de software hot potatoesEvaluacion de software hot potatoes
Evaluacion de software hot potatoes
 
Protagonista, la júlia
Protagonista, la júliaProtagonista, la júlia
Protagonista, la júlia
 
Actividad financiera emily
Actividad financiera emilyActividad financiera emily
Actividad financiera emily
 
Youtube ad-vantage 2
Youtube ad-vantage  2Youtube ad-vantage  2
Youtube ad-vantage 2
 
Frame example
Frame exampleFrame example
Frame example
 
Empresarial
EmpresarialEmpresarial
Empresarial
 
Creación de logotipo para marca de ropa de surf
Creación de logotipo para marca de ropa de surfCreación de logotipo para marca de ropa de surf
Creación de logotipo para marca de ropa de surf
 
TCC Presentation
TCC PresentationTCC Presentation
TCC Presentation
 
Audio Lingual Method rizzo-simón
Audio Lingual Method rizzo-simónAudio Lingual Method rizzo-simón
Audio Lingual Method rizzo-simón
 

Semelhante a O que é Web Designer?

Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
Jose Claudio Terra
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro Gomes
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Silva
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Luiz da Silveira
 
Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)
Rafael Teixeira
 
Dream 02
Dream 02Dream 02
Dream 02
Anderson Maciel
 
Dream 02
Dream 02Dream 02
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
Felipe Fernandes
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao
Carlos Franco
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
Alan Pereira
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
Israel Degasperi
 
Producao para web
Producao para webProducao para web
Producao para web
Alex Sanches
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
Alexandre R. de Castro
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
Alexandre R. de Castro
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projeto
Odair Cavichioli
 
Como criar um site inteligente e que ajuda sua empresa a vender?
 Como criar um site inteligente e que ajuda sua empresa a vender? Como criar um site inteligente e que ajuda sua empresa a vender?
Como criar um site inteligente e que ajuda sua empresa a vender?
Silvio César de Oliveira
 
Treinamento
TreinamentoTreinamento
6 Elementos essenciais na criação de sites
6 Elementos essenciais na criação de sites6 Elementos essenciais na criação de sites
6 Elementos essenciais na criação de sites
Rafael Rangel
 

Semelhante a O que é Web Designer? (20)

Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)
 
Dream 02
Dream 02Dream 02
Dream 02
 
Dream 02
Dream 02Dream 02
Dream 02
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
 
Producao para web
Producao para webProducao para web
Producao para web
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projeto
 
Como criar um site inteligente e que ajuda sua empresa a vender?
 Como criar um site inteligente e que ajuda sua empresa a vender? Como criar um site inteligente e que ajuda sua empresa a vender?
Como criar um site inteligente e que ajuda sua empresa a vender?
 
Treinamento
TreinamentoTreinamento
Treinamento
 
6 Elementos essenciais na criação de sites
6 Elementos essenciais na criação de sites6 Elementos essenciais na criação de sites
6 Elementos essenciais na criação de sites
 

O que é Web Designer?

  • 1. Web Pixel - Agência Criativa | www.webpixel.com.br Web Pixel - Agência Criativa | www.webpixel.com.br O que é o Web designer? Web Designer é uma extensão da prática do design gráfico, onde o foco do projeto é a criação de sites e documentos disponíveis no ambiente da World Wide Web. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a arquitetura da informação, programação, ergonomia,[1] usabilidade, acessibilidade entre outros. A preocupação fundamental do web designer é agregar os conceitos de usabilidade com o planejamento da pessoa em destaque interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva. Planejamento estratégico Como todo trabalho de design, ele é um projeto, e necessita uma análise informacional, a partir de um briefing. Detectar corretamente o objetivo do projeto é essencial para um bom planejamento, de modo que as ações sejam tomadas de forma correta. É sempre necessário definir o público alvo do site, o objetivo, os serviços oferecidos, o diferencial para o público. A partir desses e de outros elementos que sejam especificamente relevantes ao projeto, será definida a estrutura do site (Arquitetura de informação), a tecnologia empregada e o layout. De uma forma geral, embora usualmente possa parecer que a primeira impressão que se tem de um site é o visual, na verdade o visitante busca o conteúdo, por esse motivo o primeiro passo estratégico é definir bem todas as informações que o site terá, definir claramente a arquitetura de informação do site e por último, o design visual do site, que não precisa pular, girar e piscar, a não ser que o que se esteja vendendo é design/imagem (que não se aplica ao meio informacional que é a Web), mas ter um aspecto profissional seguindo pelo menos os conceitos básicos do design como aproximação, contraste, alinhamento, dentre outros. Há uma diferença conceitual marcante entre design nos meios tradicionais, como no gráfico e o design aplicado na web. Na web, a estética deve ser moldada ao dispositivo que acessa ao site ou mesmo desabilitada caso não seja necessária no contexto de utilização. No meio gráfico é possível prever como o usuário final verá a estética do produto, já na web isto não é possível, pois a aparência pode e deve mudar radicalmente de acordo com o sistema operacional utilizado, configurações pessoais, navegadores, resoluções de tela e dispositivos, como celular, TV, impressora, leitores de telas etc. Por este motivo, a estrutura (HTML) com a qual a informação será exposta deve trabalhar independentemente da formatação estilística (CSS) e do comportamento (scripts), que são recomendações do W3C.
  • 2. Web Pixel - Agência Criativa | www.webpixel.com.br Web Pixel - Agência Criativa | www.webpixel.com.br Estrutura do web design A estrutura, também conhecida como arquitetura de informação, do site deve contemplar seu objetivo, tornando a experiência do usuário a mais confortável e fácil possível, chamamos isso de usabilidade. Deve-se planejar a estrutura de forma que o usuário obtenha facilmente a informação ou serviço desejado. Hoje em dia são inúmeras as formas que um site pode adquirir e a criatividade continua ser o grande diferencial na produção de web. Layout O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuário, que sua linguagem seja condizente com o objetivo do site. Conhecer heurísticas de usabilidade é fundamental para se gerar layouts para a web. Cada elemento inserido em um website deve ter um objetivo, a perfeição de um website se atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido. A maioria dos layouts antigos dos sites da Web eram feitos com tabelas na linguagem HTML, porém esta forma é inapropriada pois tabelas devem ser utilizadas apenas para exibir dados tabulados. Entretanto existem layouts que são completamente produzidos sem a presença de tabelas, sao os famosos "tableless" e esta sim é a melhor forma de estrutura para layouts. tableless não pode ser entendido como na tradução livre, que seria literalmente "sem tabelas". Tableless é um conceito e deve ser entendido como aplicação das webstandards (normas da web desenvolvidas pela W3C). Navegadores São programas responsáveis por interpretar o conteúdo de um web site, disponibilizando assim a interface com a qual o usuário final irá interagir. O navegador está para o web design assim como o papel está para o jornal. A grande variedade de navegadores e discrepância entre os recursos fez seus próprios criadores caminharem em direção a um padrão comum. Atualmente é indispensável criar sites seguindo os padrões da World Wide Web Consortium. No desenvolvimento do site, o HTML deve ser criado seguindo os padrões do W3C (Web Standards) de forma que fique funcional, independente dos dispositivos (TV, celular, impressora, monitor etc). Apesar de em tese não haver a necessidade de testar em diversos navegadores, é um bom hábito testar em mais de um navegador (Mozilla Firefox, Internet Explorer, Netscape, Opera, Safari, Google Chrome e outros), pois o layout do site pode apresentar diferenças em determinados navegadores, e o usuário que navega não entenderá o que está acontecendo.
  • 3. Web Pixel - Agência Criativa | www.webpixel.com.br Web Pixel - Agência Criativa | www.webpixel.com.br Padrões A World Wide Web Consortium (W3C) é o órgão responsável por recomendar padrões de desenvolvimento para a internet. Por meio destes padrões se pode classificar: web sites de acordo com suas características técnicas, indo além do visual e; navegadores, de acordo com sua capacidade em atender aos padrões definidos. O grande objetivo de seguir os padrões do W3C é de possibilitar que a informação veiculada pelo site permaneça independente do dispositivo utilizado pelo visitante e que seja acessível. Programas utilizados Existe um leque enorme de programas usados pelos web designers. Para construção do código, por se tratar de simples texto, qualquer editor de texto pode servir de suporte para a criação do código. Entretanto, há programas tanto gratuitos como de uso comercial, com interface WYSIWYG, que são amplamente utilizados no mercado tanto para gerenciar sites, quanto para apenas editar códigos, como é o caso do Adobe Dreamweaver, Aptana, Microsoft Expression Web, na parte visual, os editores gráficos vetoriais CorelDRAW, Adobe Illustrator ou o Inkscape), de bitmap GIMP, e principalmente Adobe Fireworks ou Adobe Photoshop. Para animações e recursos dinâmicos, o Flash é o mais utilizado. Em relação ao Flash, deve-se ter o cuidado de usá-lo apenas onde a solução seja impossível de ser reproduzida em HTML, jamais se usa em menus e áreas de conteúdo por ser um arquivo binário, não ser acessível e estar em desacordo com as recomendações do W3C. Na atualidade, existem disponíveis na rede website builders, trata-se de plataformas que o usuário pode criar um site sem a instalação de nenhum programa. Tais ferramentas são muito interessantes e vem ganhando espaço no mercado, pois leigos na área de webdesign podem criar seu próprio site e atualiza-lo diariamente se desejado. Web designer A tarefa do web designer é a elaboração estética e funcional e a manutenção de um web site. O web designer deve ter a compreensão da aplicação em mídia eletrônica de disciplinas como HTML/XHTML, CSS, JavaScript/DHTML, Flash etc. e deve ter conhecimento no uso de software de desenvolvimento voltado para a web. A capacitação leva em torno de 1 a 2 anos para ser concluída. As vantagens de se ter uma página na Internet A internet se tornou a maior ferramenta de marketing do mundo, e também a mais acessível. Tudo isso se deve ao seu alcance de grande parcela da população mundial acarretada pela sua dinamização e disseminação crescentes no planeta. A tendência do mercado atual é que cada vez mais as empresas, necessitarem de um segundo endereço, o virtual. De modo que divulguem seu conteúdo para se sobreporem ao seu concorrente que possivelmente já têm sua
  • 4. Web Pixel - Agência Criativa | www.webpixel.com.br Web Pixel - Agência Criativa | www.webpixel.com.br página na internet. Um endereço virtual gera publicidade e credibilidade por parte do internauta e consumidor. Os benefícios de se ter uma identidade virtual são vários. Podemos apontar como os principais o fato que a internet é o meio que passa as devidas informações de maneira rápida e objetiva. Gerando um grande segmento sobre o cartão de visitas sem haver pressão sobre o cliente. Este fica à vontade pra decidir o que consumir, sendo atraído de forma natural aos domínios empresariais. Torna a relação mais amigável com o consumidor, por diminuir significativamente as necessidades de inconveniências inerentes às outras formas de divulgação como: Telemarketing, Panfletos poluentes, Correspondência e Outdoor que causam poluição visual e ambiental. Desse modo, esclarece mais que todos os meios anteriores citados e com mais elegância se for contratado o profissional correto para direcioná-lo devidamente. E o custo com a mão de obra e matéria prima são muito menores, pois, precisam contar com inúmeros profissionais e/ou despesas de impressão altíssimas devido à demanda comercial. Outra vantagem que leva sobre as outras formas de anúncios, é que pode ser acessado a qualquer hora e lugar que tenha internet, tornando mais conveniente e as propostas oferecidas sendo analisadas com mais peculiaridade e calma. Design Responsivo Diante do surgimento das novas plataformas de navegação na internet, tais como smartphones e tablets, os sites precisaram se adaptar à nova usabilidade dos usuários. O ponto de partida para essa nova forma de criar conteúdo para a web foi com a publicação em maio de 2010 de uma matéria de Ethan Marcotte no site Alist Apart. Marcotte é considerado o pai do design responsivo, pois ele apresentou à toda comunidade digital a necessidade de desenvolver sites com o conceito Mobile First, ou seja, a partir de agora todos os sites devem ser desenvolvidos já com a sua versão mobile estabelecida previamente. Os ingredientes básicos do design responsivo são: a presença de um grid fluído, imagens e mídias flexíveis e, media queries. Esses igredientes são alcançados através da utilização das já tradicionais linguagens de programação HTML5, JavaScript para compatibilidades e CSS3, com suas devidas adptações. Fonte: wikipedia Web Pixel – Criação de Sites em Brasília DF