Seja qual for o projeto, o mais importante de tudo sempre será o conteúdo.

Agora, somarei ao assunto o que acredito ser um grande tabu no trabalho dos webdesigners: descobrir a dosagem exata de como projetar design, sem esquecer da importância do conteúdo¹.

¹ – Chamo de conteúdo tudo o que deve ser levado em conta para conceber um projeto: o propósito, a definição, o público alvo, os benefícios e etc.

O que importa é o conteúdo

Design é casual. É arte com propósito de venda. Por conta disso, não deve ser encarado como fatia determinante em um projeto web. O papel do design é chamar atenção aos olhos para um conceito, porém, assim como a propaganda de TV, ele não tem o poder de obrigar o consumo daquilo.

Tomemos como exemplo o Twitter. As primeiras versões da sua página web eram modestas, porém o poder da ferramenta era aparente. Façamos, agora, uma comparação com o Meme do Yahoo!. É notável que a sua interface foi desenhada com todo cuidado, porém será que a beleza da ferramenta era o bastante para encantar os usuários de Twitter ao ponto de fazê-los migrar para lá?

Outro exemplo interessante é o Delicious. Nos seus primórdios a sua interface — apesar de usual — era bem pobre de estilo. Ainda assim, naquela época o Delicious era considerado uma das melhores ferramentas de social bookmarking (quiçá a melhor).

Conclusão

Não quero ser polêmico ao ponto de dizer que design não é importante. Eu adoro navegar em sites bonitos e gosto mais ainda de usar ferramentas bem desenhadas. Aliás, tenho certeza de que todas as pessoas também gostam. Contudo, saber a dosagem certa do design para web e aplicá-lo da forma correta ao propósito do projeto é muito importante, até porque, não nos esqueçamos, sem conteúdo não há webdesign. :)

¹ – Defino website como qualquer tipo de site, hotsite, blog ou portal; apesar de alguns portais terem características de sistema agregados.

Conceitos de User Experience e User Interface

UX ou UE é, basicamente, a forma de criação da arquitetura e das interfaces de um produto com foco na Experiência do Usuário, como o próprio nome se refere. Ou seja, trata de todos os aspectos de interação do usuário com o produto. Aí entra o papel da UI: tranformar a UX em algo visualmente atrativo e eficiente.

Confesso que é deveras complicado chegar numa construção de Design UX/UI que seja agradável ao usuário tanto pela usabilidade, quanto pela aparência. Mas é aí que entra a parte interessante da história: experimentar!

Agora, as comparações

1. Masthead

Em sistemas web, o Masthead define um menu horizontal na parte superior direita da tela. É uma forma rápida e prática para apresentar links de perfil de usuário e saída do sistema. Estes links podem ser encontrados, por exemplo, em qualquer serviço Google, como o Gmail.

Em websites a coisa muida de figura, já que é difícil encontrar um cenário em que o masthead se encaixe. O link “pular para conteúdo” pode ser uma boa “simulação” de um masthead. Este link, inclusive, pode ser encontrado neste meu blog.

2. Boxes (ou caixas)

Os boxes (ou caixas) são uma forma muito interessante de organizar várias seções de um sistema numa mesma tela. O administrador do WordPress utiliza muito deste conceito.

O interessante é que a utilização de boxes pode ser muito similar nos websites. Portais jornalísticos utilizam muito deste conceito também.

3. Largura do layout

Descobri — depois de muitas experimentações — que o layout fluido (ou elástico) é a melhor pedida para desenvolver sistemas web. Este formato abre o leque de possibilidades para a criação de controles, boxes adicionais e formulários. Além disso, é possível incluir uma sidebar fixa que se movimenta junto com o tamanho do canvas do browser do usuário.

Em websites a largura do layout é um assunto um pouco polemizado, porém ao meu ver é algo muito simples de imaginar: basta saber a característica do negócio. Um blog talvez tenha uma interface mais bem trabalhada numa estrutura fixa e não tão larga. Já um portal jornalístico (como pode ser visto acima) necessita de um layout mais amplo, visto a quantidade de informação que precisa ser organizada.

4. Iconografia

Penso ser indispensável a utilização de ícones em sistemas web², mas em suas devidas proporções. É importante deixar claro para o usuário que tipo de informação ele vai encontrar em determinado link (um menu por exemplo).

² – Acho fantástica a iconografia incluída no WordPress 2.7, no estilo barra de ferramentas do PhotoShop.

Para utilizar ícones em websites também é preciso — assim como na escolha da largura do layout — entender a característica do negócio. É muito comum websites não utilizarem ícones e ainda assim serem usuais. Porém é importante levar em conta questões como contraste nas cores e no tamanho da fonte dos títulos que compõem a tipografia, por exemplo.

5. E por falar em tipografia…

Uma boa tipografia dá elegância a qualquer projeto. Por conta disso não há uma regra que me faça comparar as tipografias de sistemas web e websites, exceto em dois aspectos:

• Sistemas web podem ter seções com fonte de tamanho reduzido e os parágrafos não precisam ter o line-height acentuado, já que é rara a utilização de textos longos.
• Websites precisam receber maior cuidado na separação dos textos (veja este meu artigo que trata um pouco disso).

6. Footer

Alguns webdesigners não se preocupam muito com ele, mas ao meu ver o footer (rodapé) tem tanta importância quanto o header (cabeçalho) de um website. Em sistemas web ele pode ser mais discreto.

O footer talvez seja a seção que tenha mais diferenças entre os dois cenários deste artigo. Um website com um footer rico melhora — e muito — a navegabilidade. Já num sistema web praticamente todos os recursos estão dispostos acima dele, o que dispensa sua incrementação.

Considerações finais

Os cenários deste artigo são fruto de experimentações que fiz (e faço) ao longo do tempo. De qualquer forma, não tomo estes conceitos como regra: sou a favor da flexibilidade. Cada projeto é um projeto e tudo é válido na construção de uma interface usual, bonita e agradável ao usuário final. :D

Good Designers Redesign, Great Designers Realign.

Então vai a pergunta: como se tornar um “grande designer” sem redesenhar?

Ser designer com um Q a mais

Quando falamos de profissionais de internet, sempre nos deparamos com certas questões que dificultam a definição de certas profissões. E quando falamos da relação Web designer ↔ Web Developer as definições se confundem ainda mais, visto que tais denominações são de profissões completamente complementares.

Para ser um web designer preparado para realinhar sites, o primeiro passo, inevitavelmente, é saber se situar diante de uma estrutura de marcação, o que seria, inicialmente, uma atribuição de um web developer.

Eu separaria a estrutura de um site em dois tipos de design: o design interno e o externo.

Entendendo o design interno e externo

Design interno seria toda a cara que é dada à estrutura de marcação do site (XHTML + CSS). Tão importante quanto o design externo, é no design interno que acredito ser possível fazer um site ser realmente usual.

Para ser um “grande designer” (para web) não há como fugir dos conceitos de desenvolvimento, já que sem eles, acabamos por nos tornar meros desenhistas de “folders digitais”.

Tomemos como base o CSS Naked Day, uma iniciativa que visa disseminar a boa prática da semântica na web. A idéia é que se um site tiver um bom “design interno”, mesmo sem nenhuma estilização externa, terá uma boa apresentação visual, com todas as seções no devido lugar.

O design externo, por sua vez, entra para dar a beleza ao site e ser responsável pela externalização das funcionalidades do mesmo. Aí entram fatores de usabilidade, acessibilidade e tudo mais.

Organizando um design interno

A chave de tudo é uma boa estrutura de marcação. Resumidamente, isso inclui:

• Utilização dos headers <h1> a <h6> para definição de títulos;
• Separação de seções (cabeçalho, corpo e rodapé, por exemplo) de conteúdo com <hr />;
• Não utilizar imagens no corpo da marcação para definir design. Deixe todas as imagens de layout para o CSS.

E por aí vai…

Como realinhar

Tendo uma boa marcação montada, realinhar se torna uma prática simples, porque tiramos do processo aquela cara de retrabalho que um redesign dá.

O realinhamento é um trabalho versátil, já que precisa, somente, de uma nova estilização (CSS) e das imagens do novo design. Nada na marcação precisa ser mudado¹.

^{1 -} É importante lembrar que, dependendo da grandeza da renovação, alguns componentes precisam ser inseridos na marcação do web site, mas nem por isso precisamos nos esquecer das boas práticas para se ter facilidade num realinhamento.

Conclusão

O prática do realinhamento mostra mais uma razão para o web standards ser tão importante para o desenvolvimento de soluções para web. Ao usarmos web standards, realinhar se torna como criar templates. Temos todas as peças na mão, bastando-nos, apenas, colocá-las nos lugares que o novo design pede.

É como brincar de lego. :P.

A tipografia está diretamente relacionada com a característica visual de um projeto gráfico. Falando-se em web, especificamente, a adequação do estudo de tipografia à diagramação do projeto torna-se complementar, exatamente por este motivo. Todo belo design começa sempre com um belo conjunto de typefaces.

Por falar em typefaces…

Veerle Pieters, no úlimo @media 2006, já dizia:

Good designers use typefaces, great designers use typography

A abordagem citada por ela está ligada à colaboração dos typefaces no design. Nada de usar um typeface qualquer na hora de pensar em tipografia. O estudo dos typefaces está diretamente ligado à característica tipográfica e visual de um projeto.

Então a dica é não nos prendermos no básico. Devemos nos aprofundar na linguagem que os typefaces apresentam, adequando cada linguagem à cada característica visual que precisamos criar.

A importância da tipografia no design

George Everet, em um de seus últimos artigos, cita:

Graphic design is typography, derives from typography, and can’t exist without typography.

Pois é! Tipografia vai além da escolha de typefaces. Tipografia é todo um estudo de como apresentar dados textuais e, além disso, como transformar textos em UI.

Algumas características do estudo de tipografia:

• A linguagem dos typefaces;
• O alinhamento de elementos de textos, bem como a sua definição de margens;
• Espaçamento entre caracteres e linhas;
• A definição de tamanhos diversos de texto para cada área a compor no design;
• Cuidados com contraste entre texto e plano de fundo (backgrounds).

E por aí vai…

Tipografia como base do webdesign

Oliver Reichenstein, em uma série de (até agora) dois artigos, foi categórico: Webdesign é 95% tipografia!

Webdesign, realmente, é em grande parte composto somente de texto. Isso quando pensamos em texto não como conteúdo e sim como UI. Por isso a importância da definição de uma tipografia de qualidade.

Para finalizar, destaco um trecho interessante do segundo artigo de Oliver:

We don’t need to make sure that a website looks the same on all platforms!

Mais vale um texto legível e acessível, porém com o visual característico ao dispositivo que é utilizado, do que um texto mal formatado tipograficamente para, meramente, ostentar-se de um troféu de site exatamente igual em qualquer navegador. Deixemos isso para as áreas não textuais. Afinal, webstandards também é flexibilidade. ;)

A identidade não necessariamente precisa ser definida somente neste momento. Na declaração do escopo já é possível traçar, através dos dados coletados, algumas particularidades pertinentes à cara que o projeto deve ter. Porém, para não atropelar as fases de desenvolvimento, cria-se uma etapa para tratar desta parte exclusivamente.

Na fase de definição de Identidade Visual é iniciado o estudo do logo do cliente (logomarca, logotipo) ou, caso ele ainda não tenha, inicia-se um estudo para a criação de um. A paleta de cores (swatches) do site acaba sendo criada neste mesmo momento, já que as cores que compõem o logo podem ser muito sugestivas nesse processo de combinação de cores.

Talvez ainda seja cedo para definir uma tipografia, porém isso não é uma regra, visto que muitas das etapas de todo o processo são administráveis. Idéias surgem à qualquer momento. A organização dessas idéias é que devem ser trabalhadas.

Passada essa pequena etapa, chegou a hora de trabalhar a diagramação do site. Veremos isso no próximo capítulo. ;)

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Preocupe-se mais com sua consciência do que com a sua reputação. Porque a sua consciência é o que você é e a sua reputação é o que os outros pensam de você. E o que os outros pensam, é problema deles!

Autor desconhecido

Tanto na Web quanto do outro lado da janela estamos sempre preocupados com a aparência; sobre qual será nossa imagem perante os outros. Eu não me preocupo com isso, aliás, concordo com o quote acima, mas em se tratando de Web, inevitavelmente, temos que tratar a reputação de nossos projetos com muito cuidado.

Na vida somos o que somos e as impressões externas (positivas ou negativas) vêm para moldar aquilo que somos, para que possamos crescer como pessoa e agregar, cada vez mais, valores positivos. Já na Web o processo é praticamente o inverso. Aquilo que criamos deve ser, logo de cara, exatamente como os outros querem ver. Isso pode ser difícil às vezes, mas nós devemos aprender a lidar com essa relação “quem sou” versus “o que devo ser”.

Ao criar, não necessariamente precisamos nos desvincular de nosso estilo (acho até imprescindível ter um). Basta que saibamos adequar o nosso campo de visão pessoal e criativa para aquilo que o usuário final gostaria de ver, ou precisa encontrar, ao entrar num site. Acredito que isso até ajuda na identificação dos requisitos e na implementação. O estudo da área ao qual o trabalho será inserido é importante para delimitar onde termina o Life Style do criador e começa a Arquitetura da Informação.

E a usabilidade, onde entra nisso tudo?

A usabilidade está no clique; está no olhar. O usuário costuma ser muito crítico (eu, como usuário, também o sou). Na primeira rolagem já somos capazes de definir vários pontos positivos e negativos para os locais que visitamos. É a primeira impressão que temos, será sempre assim.

O que criamos é o que sentimos de forma externalizada. Na Web é importante que, ao criar, também sejamos capazes de tentar sentir o que os outros sentem e pensar como os outros pensam. A criação deve ser algo de muita empatia. Uma troca visual e textual entre criador e utilizador que merece toda uma sintonia. Isso pode garantir uma boa relação e fazer com que o usuário volte sempre. ;)

Com base no diagrama do processo de criação web postado no artigo anterior, apresento as características da primeira fase.

Coleta de dados

É o primeiro contato com o cliente. Essa fase inicial acaba tendo uma cara de palestra, porque à medida que o cliente vai passando seus desejos, nós temos que mostrar quais serão as formas que eles podem ser criados e, naturalmente, o que pode ou não ser criado, mas como diz o ditado que o cliente pode tudo, eu troco por o que deve ou não ser criado.

A parte de coleta de dados, por ser o início de tudo, deve ser capaz de adquirir o maior número de informação possível do negócio do cliente. Depois, com todos os pontos identificados e organizados, começamos a pensar na forma de criação das próximas etapas.

Natureza do projeto

Projetos mais simples nos dão mais liberdade de fala, assim conseguimos agregar idéias ao cliente com mais facilidade, já com projetos mais robustos, não há outro jeito, reuniões e entrevistas serão necessárias para definir os pontos de implementação.

Caso de uso

O caso de uso é algo que costumo usar para melhor documentar o projeto. Mostrar ao cliente tudo aquilo que foi entendido nos encontros é uma forma de passar comprometimento com aquilo que deve ser feito. A apresentação do caso de uso serve para acertar os desencontros de informação.

Arquitetura da Informação nesse processo

A Arquitetura da Informação é item essencial no desenvolvimento de qualquer projeto no decorrer de todas as suas fases. Nesta parte inicial, de declaração de escopo e identificação de funcionalidades, a Arquitetura da Informação, através do Design da Informação, serve como um meio de melhor apresentação de tudo aquilo que foi coletado.

A AI, basicamente, é o estudo da Ciência da Informação e da Interação Humano-Computador, ou seja, o ato de focar o trabalho na forma com que o usuário irá interagir com o produto final. Isso inclui Usabilidade e Acessibilidade por exemplo.

Criar um Design de Interação também é fator de suma importância, pois ele é responsável pelo link entre Arquitetura da Informação e o Design Gráfico (área verde do Diagrama do processo de criação web).

Bom… O que importa nesta etapa inicial é o bom senso. Escutando tudo o que o cliente tem a dizer e mostrando os prós e contras de implementar este ou aquele recurso.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Para tanto, acredito que diversas técnicas de desenvolvimento de software podem (e devem) ser aplicadas para um bom desenvolvimento web, até porque, atualmente, até já se fala em Desenvolvimento de Software Baseado em Web! O conceito acaba sendo o mesmo para os dois universos: softwares de CD e softwares de URI, porém dando o devido crédito aos softwares de CD, já que estes são mais maduros.

À medida que vou criando sites, vou pensando em formas de melhor criar meus próximos projetos. Vou aprendendo com os erros e mudando ao longo do tempo. Isso faz com que eu desenvolva melhor os projetos que estão ainda só na agenda. Para explicar um pouco do que penso sobre, apresento uma imagem descritiva de como costumo trabalhar atualmente nos projetos que crio.

Não é lá nenhum Best Pratics, mas com esses conceitos eu tenho conseguido criar meus projetos de forma organizada e mais bem documentada. Pretendo melhorar e acrescentar muitos conceitos, ainda.

Criei quatro seções com cores diferentes na imagem. Elas seriam como grupos de desenvolvimento. Em breve, explicação de cada uma delas nos próximos posts. ;)

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Como montar um design para web

O design para web tem característícas próprias que estão ligadas diretamente à sua forma de criação (editoração de texto e imagens, por exemplo). O restante é tudo Design puro aplicado à web.

O Webdesigner deve pensar muito além do XHTML e do CSS. Não há como ser Webdesigner sem pelo menos:

• Saber estruturar um briefing;
• Saber criar uma diagramação;
• Saber conceitos de tipografia;
• Entender semiótica;
• Integrar usabilidade ao design.

Um Webdesigner que não pensa como Designer pode correr o risco de perder sua identidade como criador.

Por falar em identidade…

Acredito que a maior virtude de um Webdesigner é encontrar sua identidade como criador, o seu estilo. É claro que seu trabalho deve ser voltado a vários fatores do ambiente e com isso pode haver, em determinados casos, a necessidade de se adequar a outras formas de criação, mas, independentemente disso, criação e criador devem ter um feeling, senão, de nada adianta criar, já que não se completa como criador.

Dica do page

Pegue um lápis e um papel (uma page). Desenhe! Crie! Simplesmente rabisque, mas crie! Faça arte e não somente traços de Pen Tool sem personalidade. ;)