Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

A importância do prototipo de um site ou blog

Achados na Interweb

Já vi muita gente — inclusive eu — sofrer muito na hora de fazer o código de algum layout. Se você trabalha com HTML sabe o que estou dizendo, principalmente se você desenvolve temas para tumblr, wordpress, cutenews, blogpost, dentre outras plataformas de blogs que possui tags de post e/ou linguagem PHP. Antes de eu entrar no estágio, logo depois de fazer um layout eu partia direto para o tema WordPress, e sempre — SEMPRE mesmo! — dava algum problema nos códigos quando eu testava em meu blog. Te garanto que isso já aconteceu contigo, não é verdade? Pois bem, aqui vai minha dica: crie sempre um protótipo antes de fazer qualquer coisa em um tema.

    protótipo (pro-tó-ti-po)
    s. m.
    Primeiro exemplar, primeiro modelo, original.
    Fig. O exemplar mais exato, mais perfeito.
    fonte: dicionariodoaurelio.com

Aprendi na faculdade — e o estágio só reforçou mais ainda — que há várias etapas a serem feitas no processo da realização de um design de interface (realização de briefing, seguir uma metodologia de projeto, etc). Eu fazia as coisas da forma mais difícil e nem sabia! Então, depois de virar estagiária aprendi a importância de um protótipo. Quando um colega meu de trabalho falou o termo "protótipo de um site" eu fiquei boiando, imaginando mil e umas coisas que não tinham nada a ver. Foi me explicado então que o protótipo era a parte mais importante de um site/blog. Era o desenvolvimento apenas do HTML e CSS, sem programação alguma. Mas afinal, para que serve um protótipo de um site/blog e por que é tão importante?

Para que serve?

A criação de um protótipo é o mesmo que uma criação de uma página estática em html simples. Sem tags de post, sem programação, absolutamente nada que o deixa dinâmico! É um HTML puro com uma folha de estilo (CSS) acompanhando, juntamente com alguns scripts de função (tipo jQuery, mootools, etc) e metatags. Parece bobo, mas faz uma diferença tão grande num projeto… a dor de cabeça é diminuída ou poupada completamente — isso se, na hora da prototipação você já fica pensando qual código poderia entrar ali para ser dinâmico na hora em que seu site/blog estiver no ar. Sempre é bom estar um passo à frente. […]

Por que é importante?

Na hora de fazer a "programação" ou a inserção das tags de post, o tempo que você gastaria quebrando cabeça junto com a criação do HTML é bem menor, porque depois de todo o HTML pronto é só partir para colocar o código correspondente à plataforma do site/blog (tumblr, wordpress, blogpost, etc). Uma programação de semanas pode ser convertida em dias quando já possui um protótipo, que ele sozinho já pode levar semanas — então, economiza mais tempo. ;D E, consequentemente, o projeto fica mais caro. É claro; o que antes se fazia tudo de uma vez e com chance de ter bugs, agora é dividido em duas etapas, e as chances do projeto funcionar da maneira esperada e atingir as expectativas é bem maior.

Relação entre designer e cliente

A apresentação de um protótipo a um cliente é bem mais viável do que um projeto já pronto, programado e pronto para ser entregue. Imagina fazer a programação tudo de novo se o cliente não gostou do que você fez? É melhor editar um HTML simples do que quebrar a cabeça, ao invés de pensar novamente qual código você terá que substituir e alterar o HTML junto sem ferrar com as outras partes já feitas. Por isso, a programação só pode ser feita depois de um protótipo aprovado.

Dica importantíssima!

É por isso que é sempre bom prototipar tudo! Desde a paginação, itens de menu, textos e links da barra lateral, até exemplo de artigos com imagens e vídeos e área de comentários. Você precisa prever tudo o que poderá ser feito no site/blog. Esse é o melhor caminho para ver como ele ficará em pleno vapor. Assim, a réplica será perfeita e terá muito mais chances de adorar o resultado final. Além do mas, é uma dica perfeita para quem quer deixar de usar temas bases de uma maneira mais fácil, divertida e criativa! ::cool::

Veja também...

Um desapego que vale a pena
Inspiração: Layouts responsivos
Masonry, seu site com cara de Pinterest
¬¬ zZz x_x o_O ^^ T_T ;D :x :S :P ::teary:: ::sweat:: ::stress:: ::rolleyes:: ::love:: ::cool:: ::blush:: ::attention:: ::angry:: :) :( ._. *o* *O_O


12 Comentário(s)

(12 pelo blog e pelo facebook)
  • Natalia
    Visitar blog
    25 . 01 . 2012

    Excelente post, fazer protótipo é super importante.

    Outra coisa importante também é fazer sketchings antes mesmo do protótipo. Fazer esboços, com lápis e papel mesmo, fazer a mesma tela mais de uma vez, e ir testando os elementos. Se tem um "problema" que não está bem resolvido, vai pro papel!

    Outra coisa, protótipos também podem ser feitos de outras maneiras, no Fireworks é uma opção super válida, e esboços (sketchings) podem ser feitos no computador, com o Balsamiq por exemplo :)

    Beijos!

    Responder

  • May
    Visitar blog
    24 . 01 . 2012

    Hoje em dia confesso que ando tão sem tempo, que parto logo pra programação pura! Mas acredita que eu não aprendi isso no curso? Quando eu tinha mais tempo de preparar meus layouts, sempre fazia um só em html e css pra ver como ficaria, e depois passava pro PHP. Importantíssimo, mesmo, e eu nem sabia que se chamava "protótipo de layout" auhsuahsu!

    Beijos,
    May ;*

    Responder

  • Lucas Maia
    Visitar blog
    24 . 01 . 2012

    Realmente faz uma diferença grande. Também já mexia em tudo e não separava nada, mas depois que fiz webdesign aprendi que nem que seja uma imagem feita em photoshop, tem que ter para mostrar ao cliente. E outra dica Ana, é esbouçar no papel mesmo, era o que meu professor mais dizia. Pois colocando, mesmo garranchos no papel já ajuda a reunir as ideias. ^^

    Beijos, Ana!

    Responder

  • Andreia
    Visitar blog
    24 . 01 . 2012

    Achei o post muito interessante. O que tu quiseste dizer é que se deve ter uma base, alguma coisa que nos permita começar de novo – sem realmente o fazer ne?

    Eu de HTML e CSS só conheço mesmo o basico para o Blogger, então não posso falar muito. :X

    Beijokas

    Responder

  • Amy
    Visitar blog
    24 . 01 . 2012

    adorei o post.
    aprendi isso no curso em que estou fazendo e realmente ajuda muito.
    *_*
    arrasou Ana!

    Responder