Publicação de trabalhos na Web

1

Publicação de trabalhos na WebFestival do Instituto de Artes 2010

FEIA 11

2

Agenda

• Coisas que você precisa saber sobre portfólio online

• Cuidados antes e durante a produção

• Imagem: a principal base do portfólio

• Novas (ou não tão conhecidas) ferramentas

• Possíveis novos usos de velhas e conhecidas ferramentas

• Blog: o avô dos portfólios

• Formas de divulgação

• Boas referências em design

3

Coisas que você precisa saber sobre portfólio online

1.99% dos portfólios muito rebuscados não são bons portfólios.

Deixe os efeitos especiais para os filmes do Spielberg.

Evite utilizar Flash. Além de ele exigir uma alta velocidade da conexão, também não ajuda na indexação do conteúdo pelo Google.

“Um portfólio é a lista dos trabalhos de um profissional ou empresa” (fonte: Wikipedia) . Foque-se nisso e você terá um portfólio objetivo e agradável.

5


2.99% dos portfólios feitos em menos de cinco minutos não são atraentes*

Se for fazer um portfólio só por fazer, melhor nem fazer.

Dedique um tempo para explorar a ferramenta e para personalizar de acordo com seu estilo.

Pense em cores, layout e na disposição dos trabalhos.

*Se você é um ninja do webdesign, então você se enquadra no 1%.

7


3.Conteúdo é tudo. Saber transmiti-lo é tudo e mais um pouco

Saber transmitir o conteúdo que você tem para mostrar é algo mais complexo do que se pensa.

Seu portfólio deve transmitir aquilo que seus trabalhos transmitem. Se há detalhes pequenos e importantes, deve-se pensar uma forma de eles terem destaque.

8

http://www.agenciadigitown.com.br/realidade-aumentada-vira-design.html

http://www.agenciadigitown.com.br/realidade-aumentada-vira-design.html

9


4.Saber um pouco de programação é diferencial

Todos os bons portfólios possuem algum toque em design feito em HTML ou JavaScript.

A formatação personalizada depende de um conhecimento básico de HTML. JavaScript é usado para pequenos recursos de funcionalidade.

Site com tutoriais: http://www.truquesedicas.com/tutoriais/html/index.htm

http://www.truquesedicas.com/tutoriais/html/index.htm

http://www.truquesedicas.com/tutoriais/html/index.htm

10


5.Gestos simples garantem uma boa impressão inicial

Uma andorinha faz verão sim.

Por exemplo, ter um portfólio com uma URL personalizada é um detalhe que passa uma impressão de profissionalismo.

Ter uma identidade visual definida e uma assinatura digital presente nos trabalhos é um bom sinal também.

11

Cuidados antes e durante a produção

Criar e produzir um portfólio é igual a fazer um prato culinário.

Você tem que se atentar em providenciar e selecionar os ingredientes, realizar os preparativos, prestar atenção no andamento do processo e, no final, desfrutar dos resultados do trabalho.

Então coloque seu traje de cozinheiro e comece seu portfólio

12


✓ O portfólio deve ser relevante, ou seja, escolha os principais trabalhos a serem exibidos

A diferença entre o portfólio online e offline é que o primeiro é feito para ser de rápida visualização.

Deve-se atrair e prender a atenção do receptor. Para isso, escolha os principais trabalhos para serem exibidos.

Ou seja, quantidade não significa qualidade. Prefiro ver um trabalho bem feito do que um milhão mal feitos.

13


✓ Explore as ferramentas que você pretende utilizar

Do que adianta selecionar cinco bons trabalhos se a ferramenta que você pretende utilizar não suporta ou não é adequada para seus propósitos?

Por isso, informe-se e fuce bem as ferramentas. Descubra o que pode ser feito e pense em como você pode explorar ao máximo os recursos.

Aqui, na oficina, iremos mostrar um pouco do que as ferramentas são capazes, mas muita coisa você terá que aprender sozinho.

14


✓ Teste seu portfólio. Peça opinião de terceiros

O que pode estar bom para você, pode não estar para os outros.

Peça opinião de amigos e familiares. Ou melhor: peça opinião de pessoas que você não conhece. Esses talvez serão mais confiáveis do que todos.

Sabendo o que está errado, conserte.

Também pergunte para os conhecidos quais trabalhos eles acham mais relevantes em seu portfólio.

15

Imagem: a principal base do portfólio

Não há como escapar, o próprio termo webdesign já coloca o design como a base essencial do portfólio.

E, como sabemos, a base do design é a imagem. Então, vamos para alguns toques importantes para a imagem digital, tanto para o design do portfólio quanto, principalmente, para o seus próprios trabalhos.

Elementos do Design: Guia de Estilo Prático, de Timothy Samara.

16


Resolução de Imagem (DPI)

Uma das preocupações que devemos ter na hora de passar arquivos para a web é a resolução.A Resolução de uma imagem nada mais é do que o famoso DPI, que você já deve ter visto por ai, cuja a sigla significa Dots per inch ou, em português, pontos por polegada. O que é sempre bom lembrar é que a melhor resolução para uma tela de computador é 72 dpi.

17


Modos de Cor: RGB ou CMYK?

Os dois principais modos de cor são: RGB e CMYK. O modo de cor CMYK é utilizado em impressões gráficas. O modo de cor RGB é apropriado para telas de computador, celular, televisões, etc…. Sendo assim, todas suas imagens devem estar no modo RGB.

18


Mantenha duas cópias de todo seu trabalho!

Isso vale para, principalmente, trabalhos em imagem, mas a idéia é válida para tudo.

Ao passar seu material para o computador (via scanner ou câmera digital) salve-os em alta resolução ( 200dpi ou mais) e depois salve uma segunda cópia com a resolução apropriada para tela. Ao fazer isso, você garante que terá uma cópia de segurança e outra cópia "leve" e apropriada para publicação na web.

19


Marca d’Água

Lembra-se da necessidade de uma assinatura digital? Pois bem.Inclua uma marca d'água em seus arquivos, pois é muito simples de fazer, não atrapalha na visualização do seu trabalho e, quando alguém se mostrar interessado, você apresenta a versão em alta resolução e sem marca d'água, causando um impacto ainda maior.

Como fazer uma marca d’água no Photoshop: http://www.midializado.com.br/2010/10/criando-uma-marca-dagua.html

http://www.midializado.com.br/2010/10/criando-uma-marca-dagua.html

http://www.midializado.com.br/2010/10/criando-uma-marca-dagua.html

20

Novas (ou não tão conhecidas) ferramentas

Agora chega de teoria e vamos à prática: aonde posso aplicar minhas idéias e publicar meus trabalhos?

Iremos nos focar nas ferramentas mais novas ou que são pouco conhecidas. Mas não as subestime: os resultados podem ser mais surpreendentes do que você imagina.

21


TUMBLR (www.tumblr.com)

Tumblr é uma ferramenta de blogs, voltada mais para divulgação de fotos, vídeos e links.

VANTAGENS:-Pouco texto, mais apelo visual-Interface intuitiva-Integração com redes sociais-Liberdade para alterar o código HTML-Ferramenta “REBLOG”

DESVANTAGENS:- Limite de customização no template (usuários inexperientes)- Não há galerias de imagens- Não há comunidade interna para divulgação- Linguagem “Blog”

http://www.tumblr.com/

22


CARBONMADE (www.carbonmade.com)

Carbonmade é um site de divulgação de portfólio que existe desde 2007 e conta com mais de 200 mil portfólios ativos.

VANTAGENS:- Interface simples- “Centralização” dos materiais e portfólios já existentes- Visual final agradável e funcional

DESVANTAGENS:-Limitações da versão free-Não há ligação com redes sociais-Sem comunidade para divulgação e discussão

http://www.carbonmade.com/

23


SLIDESHARE (www.slideshare.net)

Slideshare é uma ferramenta desenvolvida para o compartilhamento on-line de apresentações em powerpoint, pdfs, vídeos ou até mesmo documentos de word.

VANTAGENS:-Acesso através da conta do facebook-Aceitação de diversos formatos de apresentação e documentos-Comunidade para troca e compartilhamento-Redes sociais

DESVANTAGENS:-Visual final poluído-Tira o foco do que realmente interessa: seu trabalho.-Página de “perfil” limitada.

http://www.slideshare.net/

24

Exemplo SlideShare

http://www.slideshare.net/DigitalGroup/digital-portfolio-3469385

http://www.slideshare.net/DigitalGroup/digital-portfolio-3469385

25

Exemplo SlideShare

http://www.slideshare.net/myriankatto/portfolio-myrian-5165924

http://www.slideshare.net/myriankatto/portfolio-myrian-5165924

26


DEVIANTART PORTFOLIO (www.portfolio.deviantart.com)

O Deviantart já é conhecido entre fotógrafos e principalmente ilustradores como uma ótima ferramenta para expor e trocar críticas sobre trabalhos.

VANTAGENS:- Visual mais profissional que a conta “regular”- Comunidade “Deviantart” (Grupos e forums)- Possibilidade de utilizar uma conta já existente

DESVANTAGENS:-Limite de 100 imagens-URL pré-definida

http://www.portfolio.deviantart.com/

27

Exemplo DeviantArt

http://ryanford.cleanfolio.com/

27

http://ryanford.cleanfolio.com/

28


BEHANCE NETWORK (www.behance.net)

O Behance Network é um dos sites mais completos e ilimitados para construção de um portfólio on-line.

VANTAGENS:-Não há limites de projetos, imagens ou videos-Aceita vários tipos de arquivos, inclusive upload direto de videos do computador ou incorporados do Youtube ou Vimeo-Customização dos projetos e da página de perfil-Comunidade de artistas profissionais

DESVANTAGENS:-Interface complexa-Entrada através de convite

http://www.behance.net/

29


FLAVORS.ME (flavors.me)

O Flavors.me é conhecido como “cartão de visitas” para a Web.

VANTAGENS:- Design minimalista, ao estilo do Tumblr.- Não exige conhecimento de HTML.- Personalização de cores e de design bem intuitivo e simples.

DESVANTAGENS:- Não permite muitos recursos.- Por ser minimalista, não há como ter grande diferenciação com outros perfis.


30

Exemplo Flavors.me

http://flavors.me/tiagodoria

30

http://flavors.me/tiagodoria

31


ZUINN (zuinn.com.br)

Zuinn é um site brasileiro de portfólio, com mais de 6 mil inscritos.

VANTAGENS:- É brasileiro, ou seja, as instruções estão em português, além de ter vários usuários falando a mesma língua.- É gratuito.- Tem efeitos interessantes.- É interligado com o Flickr.

DESVANTAGENS:- É feito em Flash- Funciona apenas se tiver uma conta no Flickr.


32


VIMEO (vimeo.com)

Vimeo é um site para upload de vídeos, ou seja, uma alternativa ao Youtube. O nome é uma mistura entre Video e Me.

VANTAGENS:- É MUITO simples de se usar.- A qualidade da imagem é melhor do que o Youtube.- Boa integração com as redes sociais.

DESVANTAGENS:- O pacote free tem muitas limitações.- Ainda não alcança o potencial de resolução do Youtube.


33

Possíveis novos usos de velhas e conhecidas ferramentas

E as tradicionais ferramentas? Elas se esgotaram ou não oferecem mais recursos?

Pode até ser verdade, mas é com limitações que a criatividade é mais valorizada.Agora vamos mostrar que até o Orkut pode ser seu cartão de visitas para o portfólio.

34


O site mais popular de vídeos tem uma série de recursos já conhecidos pelo público, criação de canais personalizados, vídeos com legendas, anotações e até links entre vídeos.É com esse último recurso que a agência de propaganda Boone Oakley, da Austrália, criou seu portfólio no Youtube.

http://www.youtube.com/watch?v=Elo7WeIydh8.

http://www.youtube.com/watch?v=Elo7WeIydh8

35


A rede social mais utilizada pelo brasileiro deve ser pensada como um portfólio. Muitas empresas pesquisam pelo perfil do candidato através das redes sociais. Então, que tal pensar seu perfil como uma amostra de seu portfólio?Coloque seus trabalhos, indique vídeos, divulgue o link do seu portfólio.

36


Além de ter os mesmos recursos que o Orkut, o Facebook tem a possibilidade de compartilhamento do conteúdo (botão “Curtir”) e também a criação de páginas próprias.Além disso, é a rede social mais utilizada no mundo. Ou seja, é uma boa vitrine para seus trabalhos. Então, cogite descrevê-los em inglês.

37


A rede social da música está saturada, porém, com um pouco de conhecimento em HTML ou Flash, é possível fazer páginas diferenciadas que forneçam uma experiência agradável para o visitante, além de divulgar sua música ou trabalho de áudio.

http://www.myspace.com/bandacapslock

http://www.myspace.com/bandacapslock

38

Blog: o avô dos portfólios

Todas ferramentas apresentadas inicialmente são baseadas em conceitos de blogs. Postagem rápida e customizada, organização dos trabalhos, design personalizado, tudo isso é possível em blogs.

39


A diferença é que as ferramentas já te dão tudo “mastigado”: em blogs, para realizar todos os recursos presentes nas ferramentas, deve-se ter uma boa noção de HTML.Mas as possibilidades nos blogs são muito maiores, principalmente com o Wordpress

40


Vantagens de ter um blog como portfólio:- Personalização total- Possibilidade de maior diferenciação criativa- Integração entre todos os trabalhos- Aparência profissional

Desvantagem:- Tem que saber HTML

Template Pronto: um caminho para driblar o HTML

41

Formas de divulgação

Ok, agora tenho meu portfólio. E agora José?É hora de você começar a divulgá-lo por aí e mostrar do que você é capaz. Para isso, você deve pensar tanto em divulgar online quanto offline.

42


- Use e abuse das áreas e grupos de discussão que lhe interessam e que tenham a ver com seu trabalho.

- Saiba receber críticas.

- Seja sucinto na descrição dos trabalhos.

- Comente no trabalho de outras pessoas, eventualmente elas virão e passarão a comentar o seu trabalho e, assim, você terá feedback de pessoas da sua área.

43


- Use o maior número possível de redes sociais.

LinkedIn, por exemplo, é uma rede social para profissionais e que tem um espaço dedicado aos links de portfólio.

Já o Twitter é ótimo para disseminar o seu conteúdo.

44


- Divulgue no mundo físico

Faça um cartão de visita contendo seus contatos e o link para seu portfólio.

Coloque também em seu currículo e em apresentações pessoais.

“Um trabalho vale mais do que mil palavras”

45

Boas referências em design

Abduzeedo (www.abduzeedo.com)

- Grande referência no Brasil sobre design. Recomendadíssimo.

Design Flakes (www.designflakes.com.br)

- Organizador do Pixel Show, é outra grande referência.

Design Follow (www.designfollow.com)

- Em formato de blog e em inglês, traz muitas dicas para webdesign.

DesignRFix (www.designrfix.com)

- Bem parecido com o Design Follow. Em inglês.

http://www.abduzeedo.com/

http://www.designflakes.com.br/

http://www.designfollow.com/

http://www.designrfix.com/

46

Obrigado!

Gabriel Ishida@gabrielishida

[email protected]

Marcos Singulano@marcossingulano

[email protected]

www.midializado.com.br

mailto:[email protected]

Publicação de trabalhos na Web

Education

Transcript of Publicação de trabalhos na Web