Arquivos de Categoria para Design

Um protótipo que facilita a definição do CSS a partir de um arquivo PSD

Brackets- From Design Comp to Code

Ainda é um protótipo, mas em breve será lançado no Brackets.

Nesse vídeo, Rain Wilson e Mary Lynn Rajsku demonstram as funcionalidades desse editor de HTML que importa arquivos PSD e facilita a visualização das medidas e guias visuais de cada uma das camadas do arquivo. Segundo os criadores, o objetivo é facilitar o processo de interpretação de arquivos PSD quando eles são passados do Designer para o Developer – algo que ainda é feito manualmente em muitos times de desenvolvimento por aí.

Leia também:

A aproximação entre Designers e Desenvolvedores (e alguns links úteis caso você esteja interessado)

Styleguides são o novo Photoshop

Tentando melhorar os esboços no design de interação

Olá, aqui quem escreve é o Gil Barros e este post é sobre o meu doutorado. Na academia falamos de uma forma, aqui eu posso falar de outra, e vou contar sobre o que se trata de uma forma mais informal.

Aqui está ele, se quiser dar uma folheada:

Se você estiver lendo este post por email ou RSS e a apresentação acima não abrir, veja-a no blog.

E se preferir baixar a versão em PDF, aqui você encontra o resumo mais formal e o link para o PDF.

Era uma vez…

O doutorado começou com um desconforto: percebi que os esboços (“sketches”) que fazia em design de interação eram altamente deficientes. Eu desenhava as telas, mas não o que acontecia entre as telas. E se pensarmos bem, a interação é justamente o que faz passar de uma tela para outra. Ou seja, eram esboços de leiaute, mas a interação simplesmente não estava representada naqueles desenhos.

Eu fazia uma comparação com arquitetura, onde fiz minha graduação. Lá os esboços vão muito além do desenho, são uma forma de pensar, um artifício que o arquiteto (designer) tem para conseguir colocar mais coisas na sua “memória de trabalho”. Parte dela fica dentro da cabeça e parte dela é transferida para o desenho. Pode parecer estranho pensar assim, mas de alguma forma é uma prótese cognitiva.

Aprendi a fazer isto na faculdade, e faço isto para resolver muitos dos problemas da minha vida. Preciso pensar algo mais complicado, pego lápis e papel e começo a rabiscar. Pode ser um diagrama, uma lista, um cronograma, qualquer coisa. Se tornou uma segunda natureza.

Mas no design de interação ficava um gosto de cabo de guarda-chuva na boca quando ia fazer esboços. Eu não conseguia colocar no papel justamente a parte mais difícil de se ver, que é a interação.

Daí vem o argumento: “mas o digital é interativo, é dinâmico, o papel é estático, não tem jeito…”.

Bom, vamos refletir e comparar com a arquitetura, que é um campo do design com um pouco mais de história (uns 4500 anos a mais). O papel é bi ou tridimensional? E a arquitetura? Mas eu consigo representar o 3D no plano! E como eu consigo fazer isto, e funciona tão bem? Para mim era o mesmo problema.

Exemplo de projeção ortogonal

A arquitetura resolveu com algumas formas específicas de representação. As projeções ortogonais, a isométrica e a perspectiva são algumas delas. Ou seja, a chave talvez fosse uma forma de representação adequada. Neste caso curto o que o Bill Buxton diz:

“A notação é uma ferramenta de pensamento.
Um problema bem representado está em grande parte resolvido.”

O doutorado

Foi aí que eu comecei o doutorado. Primeiro eu pesquisei um bom tanto. Em 2009 e 2010 devo ter lido mais de 30 livros teóricos, mais os práticos, um montão de artigos e uma infinidade de páginas na web. Daí usei isto para me ajudar a bolar uma técnica.

Fiz a primeira versão, escolhi algumas interações chatas de representar e fiz um teste. Estava um lixo! Ótimo, entendi melhor o que eu tinha que fazer, li mais um pouco e fiz outra versão (v0.2, ilustrada abaixo). Daí fiz mais 4 iterações de testes e reformulação (design iterativo!) e cheguei na versão 0.6.

Continuar lendo →

Em busca do pixel perfeito

UsTwo Pixel Perfect

O pessoal da UsTwo produziu um manual bem detalhado sobre regras que para muitos parecem básicas, mas que não custa nada relembrar.

O legal é que além de dicas de Visual Design, eles também dão uns toques de navegação, acessibilidade, organização e até ajuste de perfil de cor do seu monitor.

Ideal para aquele assistente dedicado ou para aquele amigo mais experiente que gosta de mandar os arquivos desorganizados. ;-)

O link para ver o manual (em PDF) é esse aqui: http://cdn.ustwo.co.uk/PPP/PPP2.pdf

O processo de design flexível

  • Um bom processo de design é sobre comunicação. Como você explica para as pessoas o que está na sua cabeça?
  • Qual é a quantidade mínima de trabalho que você precisa ter para vender suas ideias para o restante do time? Como comunicar um design de forma rápida e efetiva?
  • Crie uma argumentação que ajude as pessoas a entenderem o porquê das suas decisões de design. Explique a ideia por trás do design.
  • Ser ágil significa evoluir o seu processo a um ponto em que ele possa mudar quando necessário.
  • Bom design acontece quando existem restrições. Com o tempo, você encontra mais restrições, à medida em que toma novas decisões. Mas são restrições boas. O problema são as restrições que aparecem logo no começo do projeto, que são as restrições enviesadas.
  • Papel é um bom lugar para começar. Mantenha a fidelidade baixa e foque em fazer algo que as pessoas que estão em volta se sintam confortáveis em colaborar.
  • Sketchbooks não mostram se você é um bom artista, mas sim se você é um bom pensador.
  • Focar muito no estilo te faz pensar apenas em como dizer algo, mas não em o que dizer. Contexto e significado são a parte mais importante do processo de design.

Notas de Luke W sobre apresentação de Jason Santa Maria em Seattle, 2013.

A aproximação entre Designers e Desenvolvedores (e alguns links úteis caso você esteja interessado)

Designers versus Developers

Quantas vezes você já ouviu alguém falando que o site, app ou campanha “não foi para o ar do jeito que projetamos”?

É, várias.

Já trabalhei em estúdios de design muito pequenos onde precisava fazer de tudo um pouco. Quando você passa a trabalhar em lugares maiores, com mais departamentos e maior quantidade de bons profissionais no projeto, é natural que você pense “esse projeto vai ficar completíssimo e vai ser o melhor projeto que já fiz”. Mas no final, você se vê repetindo exatamente a mesma frase de antes.“Ficou legal, mas não foi para o ar do jeito que projetamos”.

Será então que eu preciso voltar lá para o começo da minha carreira e fazer de tudo um pouco?

Não acho que seja o caso. Por mais que você aprenda a programar, você nunca será o melhor programador. E essa limitação pode acabar influenciando aquilo que você faz como Designer.

Mas e se ao invés de só entregar uma pasta cheia de Wireframes e PSDs, você entregasse outras coisas? Um guia de espaçamentos, um outro de estilos de elementos, uma página HTML com elementos básicos, imagens recortadas, variações de tamanhos de um mesmo elemento para outras resoluções…

“Ah… mas aí você está aumentando a lista de coisas que eu preciso entregar, e o prazo é curto, e assim o programador não vai fazer mais nada.”

Não, não é bem assim.

Esse tipo de entregável traz muito mais benefícios junto com ele: muitos PSDs não precisarão ser feitos, a responsividade do design fica mais natural e quando você está próximo do desenvolvedor e ele tem dúvida sobre algum elemento fica muito mais fácil de resolver.

Hoje trabalho ao lado de um desenvolvedor e posso dizer que a parceria tem sido frutífera para os dois lados. A ideia é que Designer e Desenvolvedor se aproximem cada vez mais, e esqueçam qualquer tipo de “rivalidade” que possa existir entre um e outro. Não faz mais sentido. Essa é uma das formas que encontramos de ser mais ágeis por aqui e conseguir montar protótipos o quanto antes, ainda nos estágios iniciais do projeto. O resultado é visível. Nas reuniões com o cliente, é muito mais fácil chegar com protótipos funcionais, com o mínimo necessário para que ele entenda como aquilo vai funcionar.

Se você é designer ou desenvolvedor e também está interessado em se aproximar mais do seu colega do outro time, reuni aqui alguns links sobre ferramentas que podem ser úteis no dia-a-dia:

https://www.makesets.com/visual-design-to-development

Se tiver algum link para compartilhar, é só mandar aqui nos comments que eu incluo na lista :)

Redsgned: projetos de redesign de sites e apps famosos

Post rápido para compartilhar um link: Redsgned é um repositório de projetos espontâneos e não-solicitados de redesign de interfaces (e marcas) famosas do nosso dia-a-dia.

Abaixo um exemplo do famoso Whatsapp (aplicativo de troca de mensagens de texto para Android e iOS), redesenhado pela designer Dora Szabo:

Whatsapp_redesigned

A lista conta com apps de celular, websites, logotipos, softwares e outros produtos com os quais frequentemente estamos em contato.

Leia também: Dustin Curtis X American Airlines

UX Design não é uma profissão

Uma colher

Esse é o ponto que Daniel Eden levanta em seu blog: User Experience Design não é uma profissão independente, é apenas uma habilidade que os designers devem ter.

“Eu já tive um pouco de problema em entender o que um UX Designer faz de verdade, e eu continuo chegando sempre à mesma conclusão: um User Experience Designer não faz nada de especial. Ele é só um designer.

Antes que eu comece a insultar vocês que carregam esse título, vamos pensar sobre Design. Você vê, um bom designer fica perfeitamente confortável em qualquer mídia. Um grande designer pode desenhar uma colher com a mesma facilidade que ele consegue desenhar um website ou um pôster. É assim que eu meço minhas próprias habilidades, e eu acho que é uma medida precisa. Eu vejo designers como Dieter Rams, Bruno Munari, Josef Müller-Brockmann como perfeitamente capazes de irem além de sua especialização. Seus princípios e suas práticas vão muito além de uma mídia, e se estendem a todas as áreas do Design.

Todos os produtos têm uma experiência do usuário (UX). E essa experiência não é explicitamente desenhada; é um subproduto de desenhar uma interface. E eu não me refiro à interface como em uma GUI ou em um site; estou me referindo ao Design como um todo. Todas as coisas desenhadas têm uma interface. Uma colher tem uma interface com a qual você interage quando precisa usá-la para comer ou cavar. Com essa interação vem a experiência, seja agradável ou desagradável. Um pôster tem uma interface; uma que você interage usando seus olhos. A experiência é a soma do efeito que o design e a interface causam em nós; quão efetivo o design é em comunicar a mensagem, ou preencher a função, sem causar distração, ser paternalista ou dissonante.

(…)

User Experience não é uma camada extra do design que pode chegar depois ou que pode ser delegado a outro profissional; está entreleçado nas fibras de um projeto desde o início. Quando uma mudança entre dois estados de uma aplicação ou website causa confusão nas pessoas, isso é um problema na experiência do usuário – mas os problemas na experiência do usuário são resolvidos com soluções de design. Problemas na experiência do usuário são problemas de design.“

Moedas comemorativas das Olímpiadas Rio 2016

Moedas olímpicas 2016 - 2

Esse projeto de conclusão de curso feito por Douglas Cavendish seria “apenas bonito” se eu compartilhasse somente as imagens finais.

Mas o que encanta são as etapas do processo e o sentido que faz algumas coisas tão óbvias. Tomando inclusive o cuidado de saber se é viável de ser produzido.

Moedas olímpicas 2016 - 1

Moedas olímpicas 2016 - 3

Moedas olímpicas 2016 - 4

Nas palavras do designer:

“Este projeto visou por meio de uma pesquisa histórica, semântica e visual, definir uma proposição de padrão de identidade visual para as moedas comemorativas olímpicas Rio 2016, já que é comum aos países sede lançarem este tipo de produto, no período comemorativo do evento em questão; e através da aplicação deste projeto, reforçar e consolidar o programa de design para as olimpíadas à se realizar em 2016 no Brasil.

Considerando fatores como: contexto cultural, abordagem do design gráfico nas olimpíadas, padrões visuais criados para comunicação das olimpíadas, tipografia, ícones, símbolos, pictogramas, aplicação cromática, instrumentação de análise visual, análise de similares, aspectos de produção, proporção e identificação sensorial.”

O projeto completo você pode ver aqui.

Não teve como não fazer um paralelo com nossos projetos. Será que usamos todas as etapas que precisamos? E apresentamos todas elas para os clientes? Será que o cliente não aprovaria mais fácil o trabalho se tivesse a possibilidade de conhecer todo o processo? Sim ou com certeza? :)

Afinal, interfaces estão em todo lugar e não são apenas digitais.