→ 01/02/2010 @2:07

Coisas que eu aprendi sobre web design

Vida GuerraVida Guerra

Um artigo publicado neste site, dedicado ao significado das cores, ensina-nos que o vermelho sugere «energia, força, paixão, estimula o metabolismo, aumenta o ritmo respiratório, a transpiração, o apetite e eleva a pressão sanguínea.»


Qualquer visitante do Bitaites sabe que eu perco muito tempo com o design do blogue. Comecei por modificar um tema já existente; finalmente, peguei num tema em branco só com o código PHP e classes vazias de CSS e criei o meu próprio tema – bom ou mau, é meu. Tem a vantagem de não existir em mais lado nenhum e ajuda a reforçar a identidade de um blogue.

Aprendi algumas coisas básicas que qualquer web designer já está farto de saber – não faz mal, este não é um post para os prós, é para amadores como eu. Um conjunto de dicas que poderão ajudar a desenhar um blogue que cumpra os mínimos olímpicos em termos gráficos.

A ordem dos pontos é subjectiva: fui escrevendo à medida que me ia recordando.


E agora, assoado o nariz de cera, as coisas propriamente ditas

1. Internet Explorer: não podes vencê-lo, mas ninguém te obriga a juntares-te a ele.

2. Design é 10 por cento de beleza e 90 por cento de organização. Uma casa com móveis muito bonitos e de grande qualidade não causa grande impressão ao teu hóspede se guardares as meias no frigorífico e a cerveja no cesto da roupa suja.

3. Faz-te bem perder uma hora com pormenores insignificantes que só tu reparas. Aprendes bastante com todas as mariquices que procurares implementar no teu blogue usando apenas o código.

4. A sidebar não é uma arrecadação onde penduras toda a merda que encontras. A não ser que seja um blogue de astronomia, duvido que o teu visitante esteja interessado em ver as fases da Lua. E antes de meteres mais um relógio todo catita em flash, pondera na possibilidade de o teu visitante também ter um relógio no ambiente de trabalho ou mesmo no pulso. Não faças da sidebar um arranha-céus de irrelevâncias. E que interessa mais um gadget a mostrar o livro que estás a ler? Se lês, então escreve sobre o que lês, afinal tens um blogue ou uma montra?

5. Ainda a propósito de mariquices: agora que já te divertiste a experimentar uma data delas, dá mais um passo na direcção certa e livra-te de quase todas. Deixa só ficar as que forem realmente úteis à navegação do teu blogue.

6. É verdade, cá vai mais uma regra óbvia: o design de um blogue deve estar ao serviço do conteúdo, não o contrário.

7. Só porque gostas muito de duas cores não quer dizer que combinem bem uma com a outra. Abdica de uma e experimenta várias tonalidades com a tua outra cor preferida.

8. A relação entre os elementos do design é mais importante do que os elementos vistos individualmente. É esta a razão pela qual tive de abdicar da minha Scarlett Johansson das fontes, a Georgia: safa-se nas citações e em legendas, mas ao ser usada nos blocos de texto não combina bem com os restantes elementos.

9. Never underestimate the power of the White Force.

10. É uma tentação justificar o texto – eu que o diga! Qual é o segredo para inverter a tendência que temos em achar que texto justificado fica mais bonito? Resposta: redireccionar o olhar. Observa um texto justificado: em vez de dirigires o teu olhar para a forma como está todo alinhado de um lado e do outro, concentra-te nos buracos que surgem no interior do bloco de texto. A pouco e pouco, deixarás de os poder suportar e alinharás o texto à esquerda. E tem em atenção que largar o texto justificado é como deixar de fumar: é possível que tenhas uma recaída. Se isso acontecer, insiste. Esfrega os olhos e tenta outra vez.

11. Quanto menos fontes, melhor. Uma, duas, três, no máximo dos máximos e tendo sempre em conta que a escolha dos tamanhos deve obedecer a uma hierarquia: a mesma fonte para o texto, a mesma para os títulos, escolha de tamanhos consoante a importância de cada elemento na estrutura do blogue, por aí fora. Usar múltiplas fontes de post para post destrói completamente a consistência gráfica do teu projecto. Dá-lhe um ar amador. Tal como o texto justificado, prejudica a leitura do conteúdo.

12. A propósito: na net, os parágrafos são teus amigos. Lençóis de texto dão sono.

13. Sempre que metes música a tocar de forma automática no blogue, um gatinho muito querido e inocente morre na China. Lembra-te disto, por favor.

14. Seguiste estas regras, trabalhaste no duro, consultaste os melhores sites, fizeste um tema todo teu e todo fixe, e sentes-te capaz de escrever um post como este? Excelente! Agora só falta aprenderes o mais importante: não ficaste a perceber um boi de design, pá, apenas ficaste com mais meios para disfarçar a sua ausência.

15. É provável que as tuas preciosas conclusões sejam desmentidas na zona de comentários sem dó nem piedade por quem tem mais olhinho para isto do que tu. Prepara-te assim para a eventualidade de não teres razão. Perde o teu orgulho, ganha o teu blogue. Já me aconteceu algumas vezes. Bem, muitas. Foda-se, demasiadas.

25 comentários

  • 1
    Rui C.
    com Firefox 3.6 Firefox 3.6 em Windows XP Windows XP
    1 de Fevereiro de 2010 - 09:54 | Link permamente

    Corolário do ponto 14: Não é por colocares Zappa a tocar automaticamente que os teus visitantes irão começar a gostar.

    :mrgreen:

    Já agora parabéns pelos 5 anos do blog do gajo que faz o bits & bytes

  • 2
    com Firefox 3.5.3 Firefox 3.5.3 em Windows 7 Windows 7
    1 de Fevereiro de 2010 - 10:13 | Link permamente

    13. Seguiste estas regras, trabalhaste no duro, consultaste os melhores sites, fizeste um tema todo teu e todo fixe, e sentes-te capaz de escrever um post como este? Excelente! Agora só falta aprenderes o mais importante: não ficaste a perceber um boi de design, pá, apenas ficaste com mais meios para disfarçar a sua ausência.

    Não o diria melhor ;)

  • 3
    com Firefox 3.6 Firefox 3.6 em Windows Vista Windows Vista
    1 de Fevereiro de 2010 - 11:16 | Link permamente

    Marco,
    obrigado por estas dicas. Sendo Amador nestas andanças, nunca são demais todas as sugestões de melhoria. De tudo o que li, destaco sobretudo isto:
    «

    criei o meu próprio tema – bom ou mau, é meu. Tem a vantagem de não existir em mais lado nenhum e ajuda a reforçar a identidade de um blogue.

    »
    Podia ser assim, assado, mas o que isso interessa. É teu, foste tu que fizeste e isso é mesmo o mais importante. Um blogue também não é um espaço onde se tente agradar a Gregos e Troianos.
    Há pouco tempo, quando começaste a fazer mudanças, lembro-me de teres insistido no texto Justificado :) Nesse ponto não há volta a dar. Desistam! Alinhem à esquerda que facilita mais a leitura!
    «

    A sidebar não é uma arrecadação onde penduras toda a merda que encontras

    »
    Existe um blogue que apenas leio o que publica por RSS. Recuso-me a lá entrar. Além do tempo que demora a carregar tudo, é preciso por óculos escuros e ter muito cuidado com tudo o que se move ou pisca. Com se diz, ao fim de 1m já estou almareado.
    Também não há necessidade de publicar todos os magnificos prémios de qualidade atribuídos pelos amigos. O “Seta de qualquer coisa”, “Blog do catano”, “Vale a pena ler” e mais umas centenas de derivados, não devem ser expostos.
    Devias ter mencionado uma coisa que no meu caso provoca ânsias: ALTERAR O CURSOR DO RATO!
    É pá, navegar num blogue com o cursor transformado em borboleta, gota ou outra merda, é de gritar.

  • 4
    com Firefox 3.6 Firefox 3.6 em Windows Vista Windows Vista
    1 de Fevereiro de 2010 - 11:16 | Link permamente

    Marco, suspeito que o meu comentário anterior tenha ficado preso no Spam :(

  • 5
    com Firefox 3.6 Firefox 3.6 em Windows 7 Windows 7
    1 de Fevereiro de 2010 - 11:51 | Link permamente

    O anti-spam tem andado idiota, mas neste caso parece que o teu comentário passou.

  • 6
    com Firefox 3.6 Firefox 3.6 em Windows 7 Windows 7
    1 de Fevereiro de 2010 - 11:52 | Link permamente

    Bluewater, é verdade: estás a gostar do Firefox, tens algumas dúvidas que te possa ajudar ou já tens saudades do IE? :-)

  • 7
    com Firefox 3.6 Firefox 3.6 em Windows Vista Windows Vista
    1 de Fevereiro de 2010 - 12:04 | Link permamente

    :) Não, sem dúvidas. E sim, estou mesmo a gostar do Firefox. IE quê!?

  • 8
    com Firefox 3.5.7 Firefox 3.5.7 em Windows XP Windows XP
    1 de Fevereiro de 2010 - 13:35 | Link permamente

    é sempre bom não nos sentirmos sozinhos nestas coisas!! subscrevo completamente o ponto 14. ando a tentar mudar para o wordpress mas ainda não consegui dominar certas ferramentas com a facilidade com que o faço no blogger!!! a pouco e pouco se vai melhorando. boa continuação…

  • 9
    com Firefox 3.5.7 Firefox 3.5.7 em Ubuntu 9.10 Ubuntu 9.10
    1 de Fevereiro de 2010 - 14:07 | Link permamente

    Epá, ninguém se chama assim: Vida (e) Guerra. Mas fazem tanto sentido :p

  • 10
    com Firefox 3.5.7 Firefox 3.5.7 em Windows 7 Windows 7
    1 de Fevereiro de 2010 - 14:41 | Link permamente

    Eu tenho que aprender algumas coisas para deixar meu blogue – que fará dois anos – mais “redondo”, digamos assim. Por enquanto, sigo no blogspot…

  • 11
    com Firefox 3.5.7 Firefox 3.5.7 em Ubuntu 9.10 Ubuntu 9.10
    1 de Fevereiro de 2010 - 14:51 | Link permamente

    Muito bom. Estava na Campus Party na semana passada e ouvi muito disso que acabou de relatar acima. Meu blog é fácil combinar com as minhas cores preferidas: preto e branco :wink:

  • 12
    Tiago V
    com Firefox 3.6 Firefox 3.6 em Windows XP Windows XP
    1 de Fevereiro de 2010 - 15:38 | Link permamente

    arf arf arf , sim, sim, o vermelho o vermelho, muito bom o vermelho

  • 13
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    1 de Fevereiro de 2010 - 15:49 | Link permamente

    este layout está muito fixe. “less is more”… ou kiss.

    agora, só te falta publicar um post a explicar como fazer child themes e já não preciso de ti para mais nada.

    (alinhamento justificado: pior do que os buracos é a leitura das tags html pelos motores de busca: se alguém aqui for maníaco do justificado – como eu – faça-o na folha style.css.)
    agora paguei a visita, vou ver televisão que instrói mais.

    • 14
      com Firefox 3.6 Firefox 3.6 em Windows 7 Windows 7
      1 de Fevereiro de 2010 - 16:48 | Link permamente

      cjt, child themes de que framework? Há várias…

  • 15
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    1 de Fevereiro de 2010 - 19:06 | Link permamente

    pois…
    eu gosto muito das thematic e afins – especial interesse no buddymatic.

    mas nem sequer sei se são a coisa mais interessante para o meu blog… quer dizer, gosto de coisas minimais.
    o que eu queria era uma que desse para organizar as barras, ter umas na página principal e outras diferentes nas páginas e single post, percebes?

    já agora, uma pergunta: estes child themes são possíveis apenas em temas de frameworks?
    eu já me dava bem se conseguisse fazer um do tema que tenho agora, percebes?

    abraço.

    (p.s.) para quem lê o bitaites no feed e só cá vem para comentar (eu sei…) fazia jeito a magia da subscrição dos comentários por e-mail, pá.

  • 16
    com Firefox 3.6 Firefox 3.6 em Windows 7 Windows 7
    1 de Fevereiro de 2010 - 19:25 | Link permamente

    Minimalista? Então o Hybrid é teu amigo… :wink:

  • 17
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    1 de Fevereiro de 2010 - 20:30 | Link permamente

    sim, o hybrid! gosto muito!
    mas quando chega a hora de sabermos o que fazer com aquilo, é necessário registo no site e andar para ali às voltas… acho que até é necessário “ser do clube”…
    ora, já vês… eu pago 60 euros por ano para manter o site e não estou para mais despesas… anda curto para estes lados…

  • 18
    com Firefox 3.6 Firefox 3.6 em Mac OS X 10.6 Mac OS X 10.6
    1 de Fevereiro de 2010 - 22:42 | Link permamente

    As dicas que referiste são bastante práticas e muito boas.

    Eu também escrevi um artigo com algumas dicas que penso serem úteis a quem se quer iniciar na actividade de web designer. Esse artigo pode ser encontrado no seguinte link: http://www.goncalorodrigues.com/blog/dicas-para-ser-um-melhor-web-designer/

    • 19
      com Firefox 3.6 Firefox 3.6 em Windows 7 Windows 7
      1 de Fevereiro de 2010 - 22:52 | Link permamente

      Ah, mas o teu artigo já está a outro nível, mais acima, mais profissional e complementado com links a exemplificar, muito obrigado pela partilha, está bastante bom :)

  • 20
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    2 de Fevereiro de 2010 - 09:45 | Link permamente

    muito bom, gonçalo… para além dos conselhos preciosos, há ali uns links que podem vir a fazer jeito.

  • 21
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    2 de Fevereiro de 2010 - 10:08 | Link permamente

    Não quero parecer arrogante, porque ando nisto dos blogs só desde ontem, mas tantas regras? É certo que um blog pode ser uma ferramenta “política”, mas não pode também ser mais “pessoal”, sem o intuito de agradar a quase todos? E se eu gostar da mesinha de cabeceira dentro do guarda-fatos? Não obrigo ninguém a dormir no meu quarto…
    Seja como for, parece-me que grande parte dos conselhos são uteis e acertados.
    E se um blog vive de comentários, o meu não vai longe!
    Parabéns pelos 5 anos!

  • 22
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    3 de Fevereiro de 2010 - 18:54 | Link permamente

    ATTENTION PLEASE:
    Introducing ELASTIC!

    • 23
      com Firefox 3.6 Firefox 3.6 em Windows 7 Windows 7
      3 de Fevereiro de 2010 - 19:25 | Link permamente

      Porra, com um comentário assim tive de te resgatar da pastinha de spammers…

  • 24
    com Internet Explorer 6.0 Internet Explorer 6.0 em Windows XP Windows XP
    3 de Fevereiro de 2010 - 19:33 | Link permamente

    :-)

  • 25
    com Firefox 3.5.7 Firefox 3.5.7 em Mac OS X 10.5 Mac OS X 10.5
    4 de Fevereiro de 2010 - 21:36 | Link permamente

    Olá Marco, graças a este post sai da RSS e vim espreitar o site.

    Vou deixar uma dica que espero que conste da tua próxima lista :)

    No header, do lado esquerdo costuma estar o título do site / logotipo. No teu design lá está, Bitaites em grande. É obrigatório que esse “logo” tenha um link para a homepage!

    Eu entrei directo nesta página e queria espreitar a homepage, fui directo a esse local e dei por mim a clicar no vazio… desci até ao menu na esperança de ter o home logo no primeiro item, e nada também! Só depois na Navegação é que encontrei o link, não chega.

    De resto, boas dicas e parabéns por teres a coragem de fazer um tema do zero.

    Abraço

    P.S. – Estou a ouvir o Zappa que puseste embebido no post. Porreiro pah :mrgreen:

  • Dizer NÃO à taxa