Webinsider

Design

Design e as limitações dos modelos produtivos atuais

02 de dezembro de 2007, 22:44

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.

Por Fabiano Pereira

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:

Uma pequena relação de alguns sites internacionais:

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
Xhtmlmutfagi

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:

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

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:

[Webinsider]

.

Sobre o autor

Fabiano PereiraFabiano Pereira (bipereira@gmail.com) é designer, professor de web (Microcamp-SBC), músico e mantém um blog

Apoio:

  • LayerDev Serviços de Webhosting Profissional

Palavras-chave relacionadas a este texto: [ web standards ] [ programação ] [ blogs ] [ formação profissional ] [ livros ] [ aplicativos web 2.0 ]

Comentários

17 pessoas comentaram o artigo "Design e as limitações dos modelos produtivos atuais"

Felds Data: 02/12/2007 às 11:27 pm

Atividade:

Cidade:

A matéria é boa pra quem chegou agora ou para usar de “material para convencer o chefe”.
É um bom apanhado dos últimos 3 ou 4 anos.

Valentim Augusto Custodio Data: 03/12/2007 às 1:15 pm

Atividade: Professor- Gestão

Cidade: São Bernardo-SP

Achei muito interessante a forma em que foi abordado o assunto,visto que monta uma estrutura de aprendizado desde o começo.

Luan Data: 03/12/2007 às 3:59 pm

Atividade: Aluno

Cidade:

Muito bom o artigo, assisti tanto a palestra do Profº Fabianto, quanto li o artigo, é muito bom pro desenvolvimento do meu site, sou iniciante, sou aluno dele e isso ajudou muito.

Augusto Data: 03/12/2007 às 4:00 pm

Atividade:

Cidade:

Achei legal a sua idéia de compartilhar esse arquivo com as outras pessoas, quando puder vou lê-lo.

parabéns pela atitude

Até mais

Solange Data: 03/12/2007 às 4:01 pm

Atividade:

Cidade:

Muito interessante professor…
O artigo ficou muito bem explicado, fácil de ser entendido.

Até mais

wanderson Data: 03/12/2007 às 4:02 pm

Atividade:

Cidade:

parabéns pela competência exercida em sua pessoa, por se preocupar em passar informações de nível de forma clara e objetiva, com estrutura muito bem organizada contendo exemplos de fácil interpretação. abraços de seu aprendiz e até mais.

Bianca Apª Mendes Data: 03/12/2007 às 4:03 pm

Atividade: Estutande de web,jogadora de futebol

Cidade: São Bernardo do Campo

Foi muito bem abordado o assunto…pois fala desde de quando surgiu a web 2.0!Esta muito claro para poder entender.

Parabéns Professor…
fiko feliz por vc!

issOo so mostra o quanto vc é competente!
até mais

Camilla Barbosa Torres Data: 03/12/2007 às 4:04 pm

Atividade:

Cidade:

Adorei a palestra com certeza tirou todas as minhas duvidas. Depois dela tive uma visão mais clara sobre todos esses conceitos. Espero aprender muito + rsrs.

Adorei mesmo….

Bruno Ricardo Data: 03/12/2007 às 4:05 pm

Atividade: estudante

Cidade: sbc

Esse texto é muito bom
segue um contexto claro e atual !
Pra quem tah começando que nem eu
esse texto é essencial !!

parebéns Fabiano !

10° Lydia Nicotra Data: 03/12/2007 às 4:06 pm

Atividade: Estudante de Web

Cidade: São Bernardo do Campo

Aee Bi!

Seus artigos são ótimos, assim como foi a palestra, nos ajuda e muito durante e depois das aulas.

E parabéns por te-lo publicado nesse site.

=]

11° Anizio Carlos da Silva Data: 03/12/2007 às 4:45 pm

Atividade: Designer

Cidade: Olinda

O texto é bom, até começar a falar em design.

Como disse o Gustavo Fischer em sua excelente dica de leitura no site OUTRO LADO, “web 2.0 é um conceito e não uma forma gráfica”!

http://www.outrolado.com.br/Artigos/a_estetica_da_web_20__botando_o_dedo_na_ferida

12° Camilo Oliveira Data: 03/12/2007 às 11:16 pm

Atividade:

Cidade:

Ah é?
Então hoje só podemos fazer design para web assim?

Engraçado que no meio do texto o próprio autor cai em contradição falando dos requisitos para o “design 2.0″ e os critica posteriormente.

Essa apresentação de Elliot Jay, Destruindo a aparência 2.0 é uma ótima resposta a este texto.

A melhor parte é a que ele fala dos portfólios de bons designers. (Slide 48)

“Designers renomados não cedem às tendências”
“Se os melhores e mais originais designers do mundo estão evitando clichês, isto é uma razão e uma técnica”.

Gostaria de no futuro, com mais experiência e conhecimento, poder escrever um texto como Understanding Web Design, de Jeffrey Zeldman, no A List Apart. A web brasileira parece sentir falta de alguém que tenha esse conhecimento, sem medo de compartilhá-lo. Torço pra que estejamos nesse nível em breve.

13° Augusto dos Anjos Data: 04/12/2007 às 7:27 am

Atividade: Designer

Cidade:

O artigo discorre sobre sites da geração 2.0, especialmente sobre as soluções visuais adotadas em comum, por sites de sucesso. Acredito que houve um bom equilíbrio nas informações, falando sobre conceitos de design e de web 2.0, modelos produtivos e dando uma geral no que ocorreu na web nos últimos anos.

Parabéns pelo excelente artigo!

14° Thiago Valenti Data: 04/12/2007 às 10:13 am

Atividade: Designer gráfico

Cidade: Balneário Camboriú - SC

Ainda com essa nomenclatura de Web 2.0?
Bom, descarte qualquer novidade do ítem 4, do que foi citado de técnicas estéticas, pois já é usado na mídia impressa faz tempo.
Os outros modelos de produção sim podem ser novidades.

15° Wanderson Luis Data: 04/12/2007 às 1:20 pm

Atividade: Instrutor de Informática

Cidade: São Bernardo do Campo

Muitas pessoas têm uma visão errada sobre o artigo publicado neste site. Web 2.0 nada mais é que uma praticidade que tira a idéia que existem três divisões: Computação Gráfica, Programação e Administração do Site. Verdade é que a Web 2.0 é uma idéia inovadora que reune design e praticidade de forma a tornar a página mais dinâmica e sem ser uma navegação cansativa.

16° Cristina Data: 07/12/2007 às 11:13 pm

Atividade:

Cidade:

acredito que a web 2.0 é uma inovação ótima que deve ser explorada e cada vez mais aprimorada para que alcance seu verdadeiro intuito.
Parabéns mais uma vez pelo artigo.
;)

17° tiaozinho Data: 27/12/2007 às 9:47 am

Atividade:

Cidade:

Esse FP pode até ser convincente em querer demonstrar a importância dessas questões, só que escreve num português tão pobre que prejudica o conteúdo. É um tiro no pé, e um exemplo perfeito de como um conteúdo interessante perde credibilidade por ser mal apresentado. E é um “professor”, por favor…

Avisos
Os ítens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:

Preencha os dados abaixo e clique em enviar

Outrolado.com.br

Leia

Boas práticas no desenvolvimento de websitesUma lista de pontos a observar que podem significar o sucesso do site que você está criando agora para o seu cliente, especialmente se orientado a vendas. Por Marcelo Mattei

Roteiro para controle de qualidade em projetos web Na aplicação de processos de qualidade em projetos web, crie roteiros de navegação e execução de tarefas para averiguar se a resposta do sistema condiz com o esperado. Por JC Rodrigues

A usabilidade móvel do Arizona Daily StarEdição para celular do diário americano é um bom exemplo de navegação confortável na telinha do PDA, smartphone ou mesmo celular. Interface estilo iPhone vai acabar com a navegação por teclas? Por Mario Lima Cavalcanti

Conceitos de design: função, letras, cores e formasNão sabe bem o que é design, mas tem simpatia? Leia para ter uma compreensão mais clara da função do design e um roteiro para iniciar estudos. Se entendeu e empolgou, é isso mesmo. Por Agni

Site em Ajax? Site em Flash? Pergunta ruim.Não pense em fazer sites “em Ajax” e nem sites “em Flash”. Faça sites com os padrões web e use Ajax ou Flash onde isso irá ajudar seus usuários. Por Elcio Ferreira

Ilhas de produção - e não linha de produçãoUma produtora pode funcionar melhor organizada em ilhas de produção, em vez da tradicional linha de produção. A vantagem é a troca de informações interdisciplinares. Por Walmar Andrade

Design e marketing são aliados, não inimigosA marca da empresa é um bem único e deve ser tratado como investimento pela equipe de marketing, que conta com a competência de um bom designer que participe dos processos de decisão e compartilha resultados. Por Thiago Valenti

Como medir a qualidade de um siteLayout, usabilidade, arquitetura de informação, acessibilidade, web standards… nada disso é sinônimo de qualidade sem antes definir qual é a utilidade do seu projeto na web. Trabalhe menos e faça mais. Por Rochester Oliveira

CSS, Ajax, tudo bem. Mas não esqueça o HTMLHTML limpo e harmonioso faz com que os sites funcionem em todos os dispositivos. CSS e Ajax então podem entrar sem prejudicar informações básicas. Por Marcos Moura

Marcos Nähr

Não existe webdesignerExiste o designer que faz web. Por Marcos Nähr

Desenvolver é alternar dialética e positivismoOptar pelo conservador ou pelo revolucionário é uma das primeiras decisões antes do desenvolvimento. Qual a sua filosofia quando o assunto são sites e soluções de comunicação ou design? Por Sérgio Mari Jr

Marcos Nähr

O que é preciso para ser um bom designer?Quando uma idéia é rejeitada, muitas vezes é a apresentação que está sendo rejeitada e não a idéia em si. Por Marcos Nähr

Você utiliza algum tipo de documentação?Existem várias maneiras de documentar o desenvolvimento de projetos web. Como você faz com os seus? Quando isso ocorre? Usa alguma ferramenta específica?
Por Henrique Costa Pereira

O que você vai ser quando crescer? Designer!Não leia se você não for um designer. Este texto vai parecer despropositado e sem senso, pois foi escrito em uma frequência que só um deles poderá captar. Por Claudio Martins

A criação de identidade visual em etapas definidasNa criação de uma identidade visual, a tarefa principal do designer é definir um conceito adequado à representação da marca, caracterizando a personalidade da empresa em um símbolo. Por Flávio Levi

Programas que facilitam o trabalho de designChega o momento em que você precisa de fotos gratuitas de boa qualidade, de fontes diferentes… E que tal um testador de sites em diferentes browers? Conheça estas opções muito úteis. Por Rogério Favero

A distância entre a criação final e a vontade do clienteContratos que detalham as fases de produção podem ajudar muito a evitar desgastes e retrabalho, diante da dificuldade humana em expressar de maneira objetiva uma idéia subjetiva. Por Monica W. Rodrigues

Uma abordagem prática para projetos em criseAprendemos as maiores lições nos momentos de crise: quem nunca esteve num projeto prestes a naufragar? Por que isso acontece? Alguns procedimentos simples e um pouco de experiência podem nos livrar de grandes enrascadas. Por Marcelo Okano

Webinsider