Qual a melhor maneira de um codificador apresentar seu portfolio?

Finalizador, codificador, front-end engineer, front-end web developer, client-side developer ou – como brincamos na Wenetus – engenheiro de frente-fim.

Não importa o nome, o profissional que transforma imagens de interface em código tem sempre um grande desafio: como apresentar seu portfólio?

Tomei consciência sobre isso essa semana, quando estava reformulando o portfolio do Fator W.

Coloquei vários projetos nos quais eu fiz o layout (e geralmente também os códigos HTML, CSS e JavaScript), mas fiquei meio perdido na hora de botar outros nos quais eu fiz apenas o código, como é o caso do site Papo de Homem.

No caso do Papo de Homem, o layout foi criado pela designer Manuella Nejaim. Eu apenas peguei as imagens e passei tudo para HTML, CSS e JavaScript. Como colocar isso no portfolio?

O codificador deve apresentar o portfolio através das imagens do site? Ao visualizar um portfolio assim, o usuário identifica que quem desenhou aquilo foi o autor do portfolio. É preciso deixar claro por escrito que o codificador fez apenas o código.

Há alguns casos interessantes. Se você foi contratado só para fazer o código e o visual do site era horrível, você bota no portfolio um visual feio com um código limpo? Ou acha pouco provável que alguém vá visitar o site feio para conferir se o código é bonito?

O inverso também é verdadeiro. Se você participou de um projeto que tinha um visual bacana, mas não teve tempo ou não conseguiu fazer um código bem estruturado, você exibe no portfolio ou não?

Enfim, qual a melhor maneira de um codificador apresentar seu portfolio?

Conteúdos relacionados

Perguntas & Respostas

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

  1. É Walmar, complicado!
    Eu, por exemplo, sou um profisisonal de “portfólio ilustrativo” nulo, uma vez que só trabalho com coficacação e programação.
    Estou passando por esse dilema agora, no prepado de meu portfólio on-line. Há de usar a criatividade.. hehe
    Bom o post! Abraço.

  2. Afinal, portifólio de codificador é pra quem entende ver, ou seja, pra quem sabe, qualquer pingo é letra. Então! Basta colocar assim:
    Cliente: Fulano de tal.
    Participação: Codificação e finalização do layout.
    Sistemas implantados:
    – Gerênciamento de conteúso (CMS).
    – Álbum de imagens.
    – Gerenciamento de clientes.
    Linguagem: ASP
    Banco de dados: SqlServer
    Extras: Css, Flash, javascript, ajax,…

    Que codificador não vai entender isso?
    Cá pra nós…
    Repito, poortifólio de codificador é pra quem entende ou se interessa, pois não da pra explicar ao leigo passo-a-passo o que você fez, não é verdade? Ao contrário de um portifólio de um DesignWeb, que uma imagem já diz tudo.

    Agora, como fazer para que se interessem pelo seu sistema desenvolvido, se a interface é feia? Utilize imagens q ilustre seu graaaaaande projeto, seja criativo!
    Agora, se a interface é bonita e seu código é uma b*s*a… aaaa meu filho, nem queime seu portifólio.

    É uma solução. Concordam? 😉

  3. Vinícius,

    Isso que você falou está mais para um programador do que para um codificador. Eu estava me referindo no post ao profissional que trabalha basicamente com HTML e CSS, às vezes um pouco de JavaScript.

  4. Que tal deixar um zip (ou até um .pdf) para o interessado baixar o fonte que foi entregue? Até porque é bem comum seu código ser totalmente mexido (ou avacalhado) depois de implantado.

  5. Mostrar o nosso trabalho é mesmo complicado, pois minha intenção é que todos entendam meus propósitos e finalidade, e não apenas “quem entende de código”.

    Para fim de portfólio devemos separar nossas melhores peças, afinal quero vender meu peixe!
    Se meu foco é o código, o layout provindo de outro designer é irrelevante, desde que eu descreva como foi pensado e resolvido a codificação, mostrando algum resultado, sendo válido XHTL/CSS, por exemplo.

    Como regra, acredito que sempre deve ser citado quem foi o designar gráfico, quem foram os programadores, para qual agência ou não trabalhou, etc.

    Preciso arrumar o meu portfólio também, queria uma maneira mais clara e objetiva, está faltando tempo para isso…

  6. Concordo com Areta. Se você citar o nome do designer, fica mais fácil de compreender que você não fez a interface.

    Vale até colocar um link para o portfolio dele, ainda mais se forem parceiros. Pode acontecer do cara gostar do layout do site e não entender ou ligar para o código, e então procurar o designer, que por sua vez, vai te procurar para codificar.

    Talvez seja uma boa alternativa.

  7. Reescrevi esse comentário umas três vezes até chegar ao ponto que queria levantar: para que serve um portfólio de código?

    Portfólios de design/publicidade/arte servem a um fim muito claro de _mostrar_ para uma pessoa o que você já fez em termos _visuais_.

    Código de front end não é _mostrável_ para leigos. Me parece que uma lista de projetos mais verbal, com explicações mais extensas dos objetivos e processos, e discriminação dos recursos dos quais se lançou mão naquele projeto é muito mais produtiva.

    Quanto à imagem, acho que se usar um corte de um screenshot, sem mostrar o todo, talvez centrando no logo ou em algum detalhe de interface interessante diminui o risco de confusão entre desenhei vs. implementei.

    Afinal, quando alguém quer te contratar, seja para um projeto isolado, seja para uma posição fixa numa empresa, a pessoa tem objetivos muito claros em mente: ‘preciso de alguém que mande bem em XHTML/CSS com jQuery e tráfego de dados por Ajax’. É diferente de ‘preciso de uma marca, vou ver alguém cujo trabalho me pareça interessante’.

    A atividade é mais verbal e especializada; é justo que a apresentação de projetos seja assim, mais currículo que portfólio.

  8. Bruno,

    A grande sacada de um “Finalizador, codificador, engenheiro de frente-fim ou front end engineer”, é transformar “a viajem” do designer que fez o layout em código, e mostrar visualmente isso é essencial!

    Os leigos entendem sim quando você especifica que esse ou aquele efeito não foi feito em com tabela, com Flash, com mágica… e sim com puro CSS+XHTML! Deixando claro os benefícios que isso vai trazer para a navegação e posição do site dele perante os demais.

    Eu acho que a imagem do projeto, o projeto em si e uma boa descrição do seu papel no mesmo são essenciais.

    😉

  9. Bom eu coloco tudo os feios os bonitos, os bem codificados e até os que o código ficou uma bosta. Faço isso pois quero mostrar por quais problemas eu ja passei, as dificuldades enfrentadas, enfim…Mas coloco os pontos fortes e fracos de cada projeto, o pq de um ter ficado tão bom e o outro nem tanto…Gosto disso. Ótimo post, acho que nós web developers (eu prefiro chamar assim) somos as vezes desprezados por nem desenharmos e nem programarmos, ficamos ali no meio termo, mas nosso papel talvez seja o mais importante afinal a web gira em torno do html sem essa linguagem nada seria possível nesse meio.

  10. Deixe uma imagem do layout, um link para ele e fale a sua participação.

    Se foi só HMTL, só CSS, os 2, ou reestruturação do código antigo.

    Deixe claro se foi o código inteiro, parte dele, se possível coloque os nomes (e links) de quem também participou.

    Não acho que usar a imagem de outro designer seja problema, até porque você usou o layout dele pra montar.

    E fale sobre tudo o que rolou. Explique no que os webstandards ajudaram naquele projeto, se foi Strict ou Transitional e o porquê, o quanto de velocidade aquele Ajax melhora.

  11. Eu entendi perfeitamente, mas meus critérios tbm são válidos para HTML e CSS, às vezes um pouco de JavaScript.

    Acredito no que eu disse.

  12. Qual programa você utilizou para tirar as screenshots da tela inteira em seu portfolio?

  13. Bem, como todo portifolio o objetivo geral é demonstrar sua capacidade de desenvolver um projeto com determinada qualidade. E tem que ser de acordo com o que você desenvolve.
    Um design gráfico consegue passar isso somente com a exibição de uma imagem, as vezes eles complementam com informações da implementação do projeto (como art-works, brainstorm e etc). Isso funciona perfeitamente para o design e, na minha opinião, é a única maneira de demonstrar a capacidade de um designer.
    Já para um desenvolvedor de código, uma simples imagem não demonstra a capacidade de um programador, são usados outros parâmetros para qualificar um trabalho. Alguns falam sobre as tecnologias utilizadas, a velocidade de uma aplicação, a robustez, etc.. Hoje em dia também é muito importante demonstrar a metodologia com que você faz o projeto, quais são suas preocupação por qualidade, e etc.
    Podemos notar que para mostrar o que você é capaz, é preciso demonstrar que você é bom no que é importante para o seu projeto. Para o designer o importante é o visual, para o programador é a qualidade da aplicação. Então para um “front end engineer” o que podemos mostrar? No meu entender, características como tamanho final (em Kb) do projeto, funcionalidade em múltiplas plataformas e navegadores, grau de separação do Conteúdo + Visual + Comportamento, etc.
    Com isso estaremos mostrando para os interessados no trabalho o que realmente eles querem ver.
    No caso de um portifolio misto, com design e programação, se preocupe em deixar separado de maneira clara ao usuário, para que não haja dúvida do que se trata cada case.
    Bem é isso o que eu penso.
    Abraços

  14. Então, voltando…
    Acho que algumas das sugestões do José de que tipo de informação passar, como funcionalidade em múltiplos navegadores e o grau de independência do conteúdo em relação à camada de apresentação são boas alternativas.
    Mas num ponto tenho de discordar veementemente: o que importa para um designer não é simplesmente o resultado final.
    O núcleo do design é o processo, e não o resultado, e freqüentemente uma imagem não consegue ilustrar nem de longe a complexidade de um projeto e a dedicação/desempenho do profissional que o desenvolveu.

    Mas a discussão parece estar rendendo bons frutos. : )

  15. E que tal colocar uns ícons para cada trabalho realizado e na frente a sua avaliação/carga de trabalho?

    Por exemplo se o cara montou em xhtml, css e programou flash e javascript, pode colocar um icon [xhtml] com o link para o validar o código e o mesmo para a css.
    Para o flash e javascript um icon para cada e a percentagem da caga de trabalho.

    Assim consegue um portfolio visualmente atraente e ao mesmos tempo comunicativo.

    E claro pode por uma pequena descrição do trabalho realizado para quem entende.

  16. Vamos ver se a gente consegue montar algo prático, então vai minha sugestão:

    – Imagem(Screengrab)+Código(.zip+online)+Comentários

    Imagem serve para encher os olhos e fazer da seção “Portifólio” algo agradável aos olhos. Sim, sei que muitos já disseram que os “louros” são do web designer (e são mesmo), tudo bem, mas convenhamos que de posse do layout final temos um parâmetro em mãos que unido ao código podem revelar para os interessados peculiaridades da implementação: abstração, simplicidade, gambi, semântica, organização, etc. Sempre que vamos mostrar nosso trabalho para alguém sempre destacamos aquilo que foi mais importante mesmo que por algum momento, seja pela complexidade, ou quando lidamos com algo novo, alguma coisa sempre marca em um projeto, uma característica particular que determinado projeto possa trazer, tudo isso podemos contar na forma de comentários. E talvez, não sei se para alguns seria ruim, abrir para comentários alheios.