Webdesign hoje: uma visão geral dos aspectos práticos da criação diante dos modelos produtivos atuais, do uso de CMS e o conceito e a individualidade de cada projeto.
1. Definições principais:
Diferenças entre o design off-line e o design para web
O design off-line permite um controle total sobre o layout. Em trabalhos assim, por mais que haja um trabalho de pesquisa de opinião e tudo o mais, o usuário final, a pessoa que digere o design é passiva, e o designer tem o controle total.
Já no design para web, o designer não tem um controle total sobre o layout, pois a página pode sofrer diversas alterações de máquina para máquina, de mídia para mídia, de usuário para usuário.
Se, durante um bom tempo, isto serviu de tortura e desmotivou a criação web por designers, hoje é, na verdade, um grande desafio, ao mesmo tempo que é encarado como qualidade: a capacidade de mutação (ou personalização) do design por parte do usuário. No design para web, parte-se de um (ou mais) modelos pré-definidos, que devem aceitar personalizações diversas.
Um designer que queira controle total de layout hoje deve passar por sérias frustrações, pois a web mudou.
2. Web 2.0
a) Quando surgiu e desde quando?
Houve um grande boom de empresas milionárias chegando à web com muito dinheiro e ilusão de enriquecimento fácil. Tudo isso acabou em abril de 2000, com uma quebra generalizada de várias empresas da chamada web 1.0 e de mentalidade “tacanha”, fenômeno conhecido como “estouro da bolha”. Porém, a web continuou importante nos anos seguintes, se afirmando como “nova” mídia e economicamente viável..
A expressão web 2.0 foi usado pela primeira vez em outubro de 2004 pela O’Reilly Media e pela MediaLive International , numa série de conferências que estudaram as características comuns das empresas que sobreviveram à “bolha” e mantiveram-se economicamente estáveis. Desde então o termo se alastrou pelo mundo rapidamente.
b) O que é?
A web 2.0 muda radicalmente o conceito comum de web. Nela, o serviço oferecido (ou a “vantagem em ir a determinado site”), prevalece sobre todos os demais argumentos.
Na web 2.0, os sites se assemelham a softwares online, com a mesma sofisticação e qualidade de serviços. Por exemplo, o Google possui uma gama de serviços online (inclusive uma pequena suíte de escritório) que funcionam como softwares.
Soma-se a isso a capacidade de interação total com o usuário, indo além da customização visual da página ou da seleção precisa de assuntos: o usuário é, também, provedor de conteúdo.
O’Reilly sugere algumas regras que ajudam a definir sucintamente a web 2.0:
- O beta perpétuo – não trate o software como um artefato, mas como um processo de comprometimento com seus usuários.
- Pequenas peças frouxamente unidas – abra seus dados e serviços para que sejam reutilizados por outros. Reutilize dados e serviços de outros sempre que possível.
- Software acima do nível de um único dispositivo – não pense em aplicativos que estão no cliente ou servidor, mas desenvolva aplicativos que estão no espaço entre eles.
- Lei da Conservação de Lucros, de Clayton Christensen – lembre-se de que em um ambiente de rede, aplicações abertas e protocolos padrões vencem, mas isso não significa que a idéia de vantagem competitiva vá embora.
- Dados são o novo “Intel inside” – a mais importante entre as futuras fontes de fechamento e vantagem competitiva serão os dados, seja através do aumento do retorno sobre dados gerados pelo usuário, sendo dono de um nome ou através de formatos de arquivo proprietários.
c) Alguns sites da web 2.0
Uma pequena relação de alguns sites brasileiros:
- Camiseteria
- Brasilwiki
- Boo-box
- Apontador
- Lista 2.0 br
Uma pequena relação de alguns sites internacionais:
- Wikipedia
- Del.icio.us
- Del.icio.us do autor
- Last.fm
- Flickr
- YouTube
- Orkut
d) O papel do usuário: “a estrela principal do show”
Ei, você aí! Sim, você! Quer ser uma estrela? A web 2.0 quer você! Suas idéias, suas visões pessoais de mundo, de vida. Quer saber o que você pensa do mundo e ler seus textos num blog, quer ver suas fotos no Flickr, em fotologs; quer conhecer você e seus amigos no Orkut, quer conhecer seus links preferidos no Del.icio.us, quer ver seus vídeos no YouTube e muito mais!
Na web 2.0 você é a estrela, aproveite!
3. Design na web 2.0: conceitos
a) CMS, sistemas de gerenciamento prontos, modelo “blog” de produção, gerenciadores de conteúdo, as templates, os modelos, a não necessidade de uma programação inteira, publicação rápida e prática online
Sistema de Gerenciamento de Conteúdo – SGC, do inglês Content Management Systems – CMS, sistema gerenciador de websites, portais e intranets que integra ferramentas necessárias para criar, gerenciar (editar e inserir) conteúdo em tempo real, sem a necessidade de programação de uma linha de código sequer, cujo objetivo é estruturar e facilitar a criação, administração, distribuição, publicação e disponibilidade da informação. Sua maior característica é a grande quantidade de funções presentes para facilitar a vida dos usuários.
Um CMS se traduz em um modelo pré-definido (template, framework) que pode ser customizado pelo usuário. O nível de customização irá depender efetivamente de seus conhecimentos técnicos da linguagem de programação que serve de base para o sistema CMS utilizado.
Ou seja, se o usuário estiver usando o PHP-Nuke, por exemplo, terá que conhecer a linguagem PHP se desejar um nível alto de customização em sua página.
Se estiver usando Plone, terá que conhecer a linguagem Python para customizar, da mesma forma.
Neste modelo de produção recursos básicos e de manutenção e administração já estão prontamente disponíveis. é um sistema que permite a criação, armazenamento e administração de conteúdo de forma dinâmica, através de uma interface de usuário via internet.
b) Papel do usuário
“Ativo”, necessidade de customização, de adequação da página para si mesmo, a produção de “skins”, de modelos para agradar os usuários.
c) Arquitetura aberta, obra coletiva
Não só no conteúdo, mas também no design, o site atual é uma obra coletiva, e esta é, fatalmente, a tal “fórmula do sucesso”.
4. Guia de design web 2.0
a) Conceito da simplicidade, da comunicação simples e imediata, sem rodeios
Se fosse necessário definir o design na web 2.0 (e esta seria uma atribuição ingrata) com uma única palavra, esta seria a simplicidade.
Ser simples é bom, mas é preciso tomar algumas precauções. Simplicidade não significa mediocridade, não se pode fazer algo “simples e direto” que não seja agradável ao olhos, nem convidativo.
O desafio do designer, então, nesta “nova” web em que as aplicações e o web developer reina, é trazer bom gosto, estática bem colocada e seduzir os visitantes. Sem exegeros.
Os ruídos de comunicação, elementos desnecessários e futilidades devem ser removidos, a busca deve ser sempre pela simplicidade, menos é mais.
Para conhecer uma brilhante galeria de horrores na web, visite o Annoying Web Page Award. Tudo está lá: frames confusos, gifs irritantes, designs pavorosos. Um excelente site sobre o que não se deve fazer atualmente. Não deixe de conferir o divertido Web Pages That Suck.
Veja bons designs de sites 2.0 mostrados neste artigo.
b) Layouts em colunas
Um layout baseado em colunas proporciona uma organização clara dos elementos numa página. Ao trabalhar com divisões em colunas, o principal fator a ser considerado é a prioridade da informação, o que deve ser lido num primeiro momento, assunto que é, também, atribuição da tal arquitetura da informação.
Porém, o designer de interfaces deve ter em mente que a organização e a divisão de tópicos a serem lidos não é somente uma atribuição de arquitetos, mas sim uma eterna preocupação do design.
Não há um regra clara no que diz respeito a quantidade de colunas. Três normalmente dão conta do recado, conforme podemos observar nos exemplos anteriores.
Esta não é uma regra fixa. Um exemplo muito conhecido e o da amazon.co.uk. Por mais que o site pareça “desajeitado”, com suas colunas e excesso de informação, conseguiu-se, aqui, organizar de forma lógica o conteúdo de um portal, algo que normalmente não acontece no Brasil.
Nem sempre aqueles que falam sobre web 2.0 realmente aplicam os conceitos em seus próprios sites. Veja este site em quatro colunas e responda: o que deve ser lido primeiro?
A divisão horizontal colabora na divisão geral dos elementos e assuntos. A utilização de cores fortes, juntamente com a aplicação da divisão contextual, produzem um design agradável e típico da web 2.0.
Conheça:
Adaptwebdesign
Chamadigital
Jabber-server
d) Padrões estéticos utilizados: negrito e organização contextual
Devem-se utilizar fontes em negrito, deixar sempre clara e evidente a separação entre as partes de um site.
Não há uma receita mágica para se criar um excelente logo, ou um site de design matador. Se houvesse, o design perderia totalmente a graça. Porém, há sempre bons exemplos. No blog brasil dot net, há uma brincadeira interessante, mostrando a adequação de logos tradicionais ao formato 2.0. É uma oportunidade interessante de se comparar o design de “logos padrão” com o novo formato.
Note o uso inteligente de negrito, o equilíbrio claro e bem definido de todos os elementos, a boa relação de organização.
Se você quiser, a título de brincadeira, pode criar seu logo 2.0. Nunca é demais lembrar que logos são fruto de muito estudo e dedicação, não há fórmula mágica para fazê-los.
e) Padrões estéticos utilizados: cores fortes separando as seções
É preciso deixar clara a separação dos conteúdos de um site. As seções devem ser bem separadas, bem definidas, tornando o design claro e objetivo.
Conheça alguns exemplos:
Hetleukstegatvannederland
Leonardomaia
Cuboidgraphix
f) Superfícies ricas (efeitos de 3D)
É sempre enriquecedor e belo, aos olhos de todos, os efeitos de 3d. Porém, eles devem ser utilizados com moderação, sem exegeros. Barras de links, separações de seções e alguns títulos (destaques), se estiverem dentro de um determinado contexto, aceitam muito bem este tipo de efeito.
São efeitos ricos e interessantes, mas devem ser utilizados com moderação:
Derekstag
CSSexpress
g) Iconografia
Alguns projetos necessitam de ícones, que enriquecem a experiência de navegação e criam referências visuais agradável que tornam-se familiares.
Os ícones devem ser de fácil entendimento, jamais enigmáticos.
Exemplos de ícones simples:
Internet.comunicação
Exemplos de ícones curtos e rápidos:
Technacular
Exemplos de ícones ricos e detalhados, inspirados numa tendência iniciada pelo site da Apple:
Xhtmlmutfagi
CLKM
h) Formas estreladas
Utilizadas para destaques principais, como informações de preços, por exemplo.
- Digitalbox
- Passpack
Observe que muitos outros recursos são utilizados no design para web 2.0, como degradês, sombras, efeitos de profundidade e relevo.
5) Design web 2.0: limitações dos modelos produtivos atuais
a) O conceito e a individualidade de cada projeto.
Cada projeto, apesar de estar dentro de certas normas impostas pelo modelo atual, deve ser encarado de forma única.
A valorização do trabalho do designer está exatamente em oferecer soluções únicas, ou seja, na exclusividade de cada projeto.
b) A adulteração dos conceitos aplicados pelo design: sacrifício válido para a experiência de customização ou o fim do conceito visual na web?
As interfaces CMS, apesar de toda a sua facilidade e de seus aspectos revolucionários, trazem o perigo de fazer surgir toda uma geração de sites parecidos, iguais, pobres de conceito e de design. E necessário tomar cuidado e não cair na armadilha da solução pronta, do caminho mais curto.
c) Complexidades de customização num modelo CMS: é necessário programar para fazer um bom design?
Como dito anteriormente, os modelos de produção CMS trazem alguns exemplos de customização simples, porém, para se aproveitar todo o poder de fogo de uma aplicação CMS dentro de um layout 100% customizado, é necessário o conhecimento relativamente aprofundado das linguagens nas quais estas aplicações são escritas.
Isto se traduz num novo desafio para o designer de interfaces, pois, se quiser ter realmente o controle total sobre a customização de seu projeto, terá que saber programar na linguagem específica. Pelo menos por enquanto.
d) O blog vai substituir os sites, no formato como conhecemos?
Os blogs são os exemplos mais primários de CMS. Com um blog, você pode, fácil e rapidamente, publicar conteúdos diversos, sem necessariamente saber programar.
Atualmente, os sites estão atrelados a blogs. Muitas vezes o site não existe, como é o caso de algumas bandas de rock, por exemplo.
O blog não irá substituir os sites, porém os sites da web 2.0 estão decisivamente influenciados pelo modelo de customização dos blogs. Um site 2.0 deve aprender bastante com os blogs, acredito eu.
6. Conclusões finais
a) A eterna necessidade do pensamento subjetivo humano: são as idéias que movem o mundo
O mundo não é movido por robôs, por novas tecnologias, por inovações da informática. O mundo é movido pela inquietação do pensamento humano, pela vontade de mudar, de comunicar, de aprender.
O sucesso da web 2.0 está basicamente focada neste princípio eterno do ser humano.
b) Visão global do processo produtivo: saindo do chão da fábrica, adquirindo visão empreendedora
Seu sonho é conseguir um grande emprego, numa grande agência?
Você acha que o ápice da sua carreira está num cargo de diretor de arte ou criação? Talvez você esteja errado… Na web, mais do que em qualquer outro mercado, os exemplos de empreendedorismo bem sucedidos são fartos e movimentam grandes somas.
Tem uma boa idéia de produto, serviço ou aplicação web? Invista nela.
Referências
Sites utilizados como referência para este artigo:
- W3.org
- W3Csites
- Webdesign from scratch
- Wikipedia wiki
- CSS Beauty
autor: Fabiano Pereira
fonte: Blog Fabiano Pereira
blog sobre: design, webdesign, internet, ferramentas linux, CSS-XHTML, photoshop, semantica, web standards, browsers e navegadores, compatibilidade XML, usabilidade, acessibilidade, web e internet. Vale a pena uma boa navegada por lá, ótimos artigos.
