Você sabe o que é colagem ou ainda pensa que é apenas uma brincadeira de criança?
Segundo o wikipedia, colagem é:

Colagem é a composição feita a partir do uso de matérias de diversas texturas, ou não, superpostas ou colocadas lado a lado, na criação de um motivo ou imagem. Foi utilizada por Picasso e Georges Braque, entre outros. Ela é uma técnica não muito antiga, criativa e bem divertida, que tem por procedimento juntar numa mesma imagem outras imagens de origens diferentes.
A colagem já era conhecida antes do Século XX, mas era considerada uma brincadeira de crianças. O cubismo foi o primeiro movimento artístico a utilizar colagem. Os cubistas colavam pedaços de jornal ou impressos em suas pinturas.

A revista Zupi elegerá os 50 melhores trabalhos de colagem no dia 16 de Agosto. Vi a reportagem no site da revista e me interessei pelo assunto. Pensei em participar mas me dei conta de que não conheço tanto a arte como imaginava. O que parece ser simples, se mostrou bem mais complexo do que apenas uma brincadeira de criança. Parece ser um trabalho divertido mas bem trabalhoso. Encontrei trabalhos fantásticos e estou muito curiosa para saber o resultado dessa seleção.

Encontrei coisas bem legais numa pesquisa rápida sobre o assunto como a Enciclopédia de Arte Visuais do Banco Itaú e a Revista online IdeaFixa. Na enciclopédia encontrei a definição completa de colagem, além de toda a história. É uma boa fonte de pesquisa sobre arte e sua história. Já a revista online IdeaFixa eu já conhecia mas nunca tinha visualizado nenhum exemplar até hoje. Foi uma surpresa. É uma excelente fonte de inspiração. Recomedo darem uma olhada.

Nas andanças pela internet, encontrei alguns trabalhos feitos com a técnica e fiz uma seleção (que segue abaixo). Procurei por vídeos mas nada que valha a pena ser postado aqui, mas se alguém tiver algum que seja interessante, por favor envie o link pelos comentários ou por email.

Quando falamos em usabilidade, nós geralmente nos referimos a interface do usuário (UI – User Interface) – o layout dos botões, textos, tabs e assim por diante. Mas aqui há outro elemento que não deve ser ignorado, pois com isso você pode perder todo o trabalhão que teve pra desenvolver um lindo UI. O Copywriting!
Copywriting é um termo usado para se referir aos textos em seu site. Ele cobre vários tipo de texto, de propagandas à artigos. Neste post vou falar sobre o copywriting que você usa para orientar e informar os visitantes em torno de seu site. Coisas como: instruções sobre como fazer o download de arquivos, como se inscrever em seus feeds, o que é o site, sobre o que é, e assim por diante.

Então, como pode o copywriting influenciar a usabilidade? Para responder a isso, preciso primeiro ilustrar como pessoas geralmente percorrem um site. É caótico. Nós não nos focamos em nada em particular. Ao invés disso, nós “lemos” a página rapidamente, passando de um ponto a outro, tentando achar o que estamos procurando. Está é uma ilustração do caminho que alguém faz ao entrar em alguma página – as linhas e os pontos vermelhos mostram os vários movimentos do usuário e os vários focos de atenção, respectivamente.

Isso acontece muito rápido. Com pouco segundos nós “scaneamos” a página procurando por alguma coisa de nosso interesse. O maior problema que pode ocorrer no copywriting é o comprimento. É muito fácil escrever demais, especialmente quando conhecemos sobre o que estamos falando. É fácil pensar que colocando informações demais deixaremos as coisas mais claras para os nossos visitantes. Isso pode ser verdade, se ele ler tudo – mas ele não lerá!
Nosso visitantes estão “scaneando” loucamente a página procurando pedaços de informação, e a maioria deles não tem paciencia para ler parágrafos de texto – algumas vezes nem sentenças de texto. Temos que desenvolver curtos e consistentes pontos de foco para cada ponto de informação vital em nosso site. Estes pontos de foco devem fazer duas coisas: prender a atenção de seu visitante e chamar a atenção.

Veja um exemplo real:
Aqui está uma parte do site da MacPorts, uma ferramenta para Mac que ajuda a intalar vários programas ‘open source’.

É muito texo. Ninguém lerá isso tudo – e mesmo que leia, ele não ficará muito feliz com isso. Suponho que a maioria das pessoas chegam nesta página desejam fazer o download do MaxPorts, mas o link de instalação está no meio do texto. O que, cerca de 80% deste texto pode ser cortado sem que se perca nenhuma informação importante.

Aqui vai um rápido redesign:

Não está perfeito, mas eu penso que já é um grande avanço. Se eu tivesse mais tempo teria mudado um pouco mais o design e re-escrito o topo e os botões de seleção, mas as áreas mais importantes foram modificadas. Marcadores, titulos consistentes, fontes largas e chamando atenção, tudo ajuda tornar a página scaneável. As pessoas conseguem ver quais links estão disponíveis e a encontrá-los olhando rapidamente sem que seja necessário ler muito texto.

Copywriting deve ser sucinto e conciso. Usar fontes grandes para chamar atenção. Deixe claro a próxima ação com o mínimo de palavras possível e nunca entre em detalhes. O mais importante – corte qualquer palavra e sentença que não adiciona nenhum valor real. Seja curto e grosso!
Você provavelmente pensará que o copywriting está curto o suficiente, mas foi você quem escreveu – você conhece tudo o que está escrito e do que se trata. O visitante não e para encontrar ele terá que ler – eles estão aqui para fazer alguma coisa, então tire algum tempo e dê atenção para fazer coisas super fáceis de se scanear e encontrar.

Texto original: www.usabilitypost.com

Para designers:

Firebug

Firebug disponibiliza ferramentas de desenvolvimento ao seu alcance enquanto você navega. Você pode editar, depurar e monitora o CSS, HTML, JavaScript em qualquer website.
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

Pixel Perfect

Pixel Perfect é integrado ao Firebug (uma outra extensão inegrada ao Firefox) que permite ao webdeveloper e designers a sobrepor, com facilidade, uma imagem do website (layout) sobre a versão HTML para que seja feita uma comparação minuciosa sobre os detalhes e diferenças entre a versão web e a versão original (imagem).
https://addons.mozilla.org/en-US/firefox/addon/7943

Font Find

Basta destacar um único elemento (por exemplo, um parágrafo ou uma palavra), clicar com o botão direito e selecione “Font Finder”, e será informado qual o CSS Styling utilizada do elemento.
https://addons.mozilla.org/en-US/firefox/addon/4415

MeasureIt

Desenhe a uma régua para obter a largura e a altura, em pixels, de quaisquer elementos em uma página web.
https://addons.mozilla.org/en-US/firefox/addon/539

FireShot

FireShot é uma extensão do Firefox que cria screenshots de páginas web (integralmente ou apenas parte visível). Ao contrário das outras extensões, este plugin fornece um conjunto de ferramentas de edição e anotação, o que permite aos usuários capturar página, modificar e inserir textos, gráficos e anotações.
A captura pode ser:

1. Salvos em disco (nos formatos PNG, GIF, JPEG ou BMP);
2. Impressa;
3. Copiado para a área de transferência;
4. Enviado por e-mail.

https://addons.mozilla.org/pt-BR/firefox/addon/5648

Para Developers

IETab

Incorpora o Internet Explorer nas abas do Mozilla / Firefox.
https://addons.mozilla.org/en-US/firefox/addons/versions/1419

Web Developer

Adiciona um menu e uma barra de ferramentas com várias ferramentas importantes e úteis para desenvolvedores web.
https://addons.mozilla.org/en-US/firefox/addon/60

Firebug

Firebug disponibiliza ferramentas de desenvolvimento ao seu alcance enquanto você navega. Você pode editar, depurar e monitorar o CSS, HTML, JavaScript em qualquer website.
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

Pixel Perfect

Pixel Perfect é integrado ao Firebug (uma outra extensão inegrada ao Firefox) que permite ao webdeveloper e designers a sobrepor, com facilidade, uma imagem do website (layout) sobre a versão HTML para que seja feita uma comparação minuciosa sobre os detalhes e diferenças entre a versão web e a versão original (imagem).
https://addons.mozilla.org/en-US/firefox/addon/7943

HTML Validator 0.8.5.2

Valida codigos HTML dentro do Firefox. O número de erros em suas páginas HTML é vista na forma de um ícone na barra de status enquanto navega.
https://addons.mozilla.org/en-US/firefox/addon/249

Validaty

Proporciona um botão para validas páginas usando validator.w3.org
https://addons.mozilla.org/en-US/firefox/addon/2609

FireFTP

É de graça, segura plataforma FTP para seu Firefox que proporciona fácil e intuitivo acesso à Servidores FTP.
https://addons.mozilla.org/en-US/firefox/addons/versions/684

Infelizmente não tive tempo de dar uma analisada no site, não sei direito como ele funciona mas segundo as pessoas da lista que já utilizaram já fizeram suas fonts e disponibilizaram. Segundo o pessoal do DG (www.designgrafico.art.br), o sistema do site é bem simples, difícil de errar e além de poder distribuir, ainda existem mais duas opções como ‘download’ onde vc pode baixar a sua fonte e usar a vontade, de graça. A outra opção ‘clonar’, que possibilita a cópia ou a criação de um novo projeto.
Vale a pena dar uma conferida.
Boa sorte no desenvolvimento e por favor, não se esqueça de compartilhar conosco suas criações!

Fonte: Lista de discussão do DG

Estes foram apenas alguns trabalhos, visite o portifólio e confira os outros. São excelentes e impressionates. A riqueza de detalhes é absurda… é espantoso.
Portfólio: khaismanstudio.com

Artista gráfico, ilustrador, director de arte, fotógrafo, docente na Bauhaus, pioneiro do Modernismo no design europeu e norte-americano. Herbert Bayer (1900-1985) nasceu na Áustria. Foi estudante da Bauhaus de 1921 até 1923. Em 1925, foi convidado a dirigir a Oficina de Tipografia e Publicidade; assim, Bayer passou a integrar o corpo docente da Bauhaus. Bayer pensou poder superar os limites impostos pelo vai-vem das modas; para tal, subordinou o seu desenho de letras a leis “intemporais” e “objectivas”.

Um dos seus lemas era: Os problemas de estilo e da expressão individual deviam retroceder face à “pureza da geometria” e às exigências da funcionalidade. Sturm Blond Em 1925, Herbert Bayer apresentou o protótipo de uma letra reduzida às formas geométricas mais elementares – linhas e circunferências. A justificativa a sua proposta foi: “a tipização dos elementos da letra, tendo por base o quadrado, a circunferência e o triângulo reduz o consumo de material tipográfico“. Este método culminou numa tipografia cujas formas fossem tão elementares, que pudessem atingir uma validade “universal”.

Sturm Blond, também conhecida como ‘Universal’

No tipo “universal” que Bayer apresentou em 1925 com o nome sturm blond, a redução foi extrema. A orientação que adotou foi o uso exclusivo de letras minuscúlas, formas da geometria elementar, redução ao mais simples, universalidade. Herbert Bayer era considerado um ‘radical’. Em sua opinião, a cultura era ‘artificial’ enquanto a ciência e o raciocínio eram ‘puros’. Por este motivo, deduzia que as formas de letras simples e geométricas iriam proporcionar algum benefício na sociedade. Os protagonistas da universal typographie pensavam que os novos sistemas de glifos deviam ser “nus” – nus como uma máquina, livre de embelezamentos, livre de qualquer ideologia da cultura. Apesar de Herbert Bayer advogar essa linguagem visual “nua”, também se mostrou apto a trabalhar de forma mais refinada.

Herbert Bayer deixou a Bauhaus em 1928 e foi seguir carreira como designer freelance. Desmobilizou o seu rigor e purismo, para poder vender o seu trabalho. Em 1933, a Fundição Berthold encomendou-lhe uma tipografia para uso comercial.Para esta encomenda, Bayer apresentou a sua sturm blond, mas numa variante já “vestida”, ou seja: com serifas, e bastante condensada.

Versão com serifa da Sturm Blond

Houve poucos clientes do exterior interessados no design moderno e na tipografia feitos na escola Bauhaus. O sucesso comercial das ideias e dos protótipos da Bauhaus – se é que houve um tal sucesso – só começou a esboçar-se no fim dos anos 20. Depois de trabalhar ainda longos 30 anos como artista plástico e gráfico nos EUA, fez o legado da sua obra ao Denver Art Museum. Hoje, a tipografia digitalizada da ‘universal’ é a familia Architype Bayer:

versão digitalizada: family architype bayer

Outros trabalhos do designer:

Links:

• http://www.tipografia.com.br
• http://www.tipografos.net/indice.html
• http://www.wikipedia.org (em inglês)

Gosto de idéias inteligentes… admiro estas pessoas.

1º – QUALI-SIGNO

Se algo aparece como pura qualidade, este algo é primeiro. É claro que uma qualidade não pode aparecer e, portanto, não pode funcionar como signo sem estar encarnada em algum objeto. Ela é apenas um sentimento vago, indiscernível, num nível de primeiridade, aberta a interpretação junto com seu suporte. Seu caráter qualitativo – cores, luminosidade, cheiros, gostos, volumes, texturas, formas etc. – enriquece o objeto impregnado.

2º – SIN-SIGNO

Num segundo nível, o da secundidade, qualquer coisa que se apresente diante de você como existente único, material, aqui e agora, é um sin-signo. Isto porque qualquer existente real e concreto está conectado ao universo do qual ele faz parte, irradiando sentido em outras direções. É o seu caráter físico-existencial que aponta para as outras coisas. Rastros, pegadas, resíduos fazem parte de uma existência concreta. Daí, sin-signo.

3º – LEGI-SIGNO

Ao nível de terceiridade, o caráter do signo aparece quaando, em si mesmo, o signo é de lei. Isto porque, ao ser representado, é portador de uma lei que, por convenção ou pacto coletivo, determina que aquele signo represente seu objeto. Note-se que se é por convenção aquilo que ele representa não é individual, mas geral. Por exemplo, as palavras são caracteres cujos códigos são combinados, mantêm um acordo firmado entre o grupo – uma lei – para que o signo possa significar. Já dizia Peirce: “você pode escrever a palavra “estrela”, mas isto não faz de você o criador da palavra – e mesmo que você a apague, ela não foi destruída. As palavras vivem nas mentes daqueles que as usam. Mesmo que estejam todos dormindo, elas vivem nas suas memórias. Elas são coletivas, não individuais”.

AS DIMENSÕES SEMIÓTICAS SEGUNDO CHARLES MORRIS

Em uma análise posterior, Charles Morris aprofundou e estabeleceu uma classificação entre a relação do receptor do signo com o objeto designado. A análise desse processo apura quatro fatores: o veículo sígnico – aquilo que atua como um signo; o designatum – aquilo a que o signo se refere; o interpretante – o efeito sobre alguém em virtude do qual a coisa em questão é um signo para esse alguém; e o intérprete – o alguém.
Morris também estabeleceu as três dimensões do signo:

1. A DIMENSÃO SINTÁTICA

Os signos formam-se e se agrupam segundo regras, isto é, os signos se organizam, não se amontoam. Esse é o ponto de partida da sintática. O pensamento, caótico por natureza, é forçado a organizar-se para dar sentido aos signos. As partes se juntam em construção, relacionando-se umas às outras, para formar um todo. É do todo organizado, das partes que interagem, que se parte para obter uma análise. A dimensão sintática é a relação dos signos entre si.
Exemplos:

• As palavras que compõem um poema, um texto jornalístico, uma propaganda.
• As notas musicais que se agrupam para formar uma música
• Os elementos visuais de uma fotografia, de um quadro.
• Os tipos de letras de uma propaganda impressa.
• Os fotogramas, as seqüências, os takes de um filme.

2. A DIMENSÃO SEMÂNTICA

É a que considera a relação entre o signo e seus significados. Todos os signos significam, quer dizer, têm um significado. Por natureza e por definição não há signos sem significado, pois que o significado é precisamente aquilo pelo qual está para alguém. Agora, o que é o significado, esse é um dos problemas maiores de toda a semiótica e que constitui o campo da semântica.
O significado de um nome ou signo é apreendido por quem conhece a língua ou o conjunto dos signos em que esse signo se enquadra. Normalmente um signo tem um significado e a esse significado corresponde uma referência. O mesmo significado e a correspondente referência têm em diferentes línguas diferentes expressões.
Os significados estão sujeitos à ação do tempo e da formação cultural do grupo interpretante. É por isso que os significados mudam de grupo para grupo e de tempos em tempos.

3. A DIMENSÃO PRAGMÁTICA

Considera-se a dimensão pragmática a relação entre o signo e seus usuários. É a ação, o movimento de interpretação que é compreendido e incorporado ao sistema global de outros signos. Qualquer estudo semântico ou sintático conduz inexoravelmente à investigação pragmática. Para se fazer uso do signo, há que se fazer sentido.
As regras pragmáticas estabelecem as condições em que algo se torna um signo para os intérpretes. Ou seja, o estabelecimento das condições em que os termos são utilizados por ele em seu processo de pensamento. Daí que qualquer signo produzido e usado por um intérprete pode também servir para obter informações sobre esse intérprete.
Os signos podem ser usados para condicionar comportamentos e ações tanto próprios como alheios.
O que a pragmática vem acrescentar à semiótica é a descrição das regras de uso dos signos. Sintaxe e semântica estudam exclusivamente o sistema, a pragmática estuda o uso dos elementos do sistema. A esta cabe definir as regras do uso dos signos, que são diferentes das regras do sistema. Por exemplo: Não basta que uma frase esteja correta do ponto de vista gramatical, é preciso também que ela se adapte ao contexto para que possa ter o sentido pretendido e possa ser entendida nesse sentido.