No final de semana dos dias 19 e 20 de março, a Aldeia abriu as portas para a Hero99 Sessions, uma design jam organizada pela Hero99 com apoio da Joox e patrocínio do Fleety. O evento, apesar de ter o formato de uma jam criativa sobre design, foi aberto e gratuito para todos os interessados que se inscrevessem.
Os participantes ainda tiveram a oportunidade de ver de perto como funciona a Methodkit, metodologia sueca de organização planejamento e execução de ideias utilizada internamente pela Hero99 nos seus projetos.
As vagas para a Hero99 Sessions acabaram no primeiro dia de inscrições, e no final do evento, ainda rolou um happy hour com pizza e chopp para todos os sortudos que conseguiram garantir seus lugares na jam.
Confira no evento oficial no Facebook todos os detalhes desse encontro super produtivo e animador.
Estamos, mais do que nunca, voltados ao equilíbrio profissional e pessoal, mudando hábitos e pensando na economia colaborativa, espaços voltados ao bem-estar e projetos sustentáveis. As WikiHouses são um exemplo dessa transformação da maneira de trabalhar e viver – e é por isso que já começamos a construir algumas aqui na Aldeia.
Essas casinhas fazem parte um sistema de construção open source, que conta com a colaboração de de arquitetos e designers para torná-lo simples e disponível para quem quiser criar, imprimir e montar construções que, além de bonitas, gastam pouca energia e podem ser personalizadas de acordo com as necessidades de quem vai ocupar o espaço.
Por aqui, o arquiteto Juliano Monteiro modificou o projeto para que cada casinha pudesse funcionar como um estúdio privativo do nosso espaço de coworking. Essas vão ser as primeiras Wikihouses de Curitiba e a construção contou com o apoio e o MDF cedido pela Arauco. Dá só uma olhada no processo de montagem:
O minimalismo, os layouts tipográficos e o desenvolvimento de plataformas voltadas ao usuário têm se destacado há um bom tempo. Em 2015, isso continuou guiando o trabalho dos designers e, agora, chegou a hora de saber quais as principais tendências dessa área para o próximo ano. A gente listou alguns estilos e formatos que prometem estar com tudo em 2016, olha só:
Tipografia cada vez mais elegante.
Presença constante em 2015, o uso de fontes diferentes (e as combinações harmoniosas entre elas) continua forte no próximo ano. A tendência é que os layots tipográficos fiquem cada vez mais elegantes e as fontes simples, como Arial, Times New Roman e Helvetica acabem dando espaço para opções desenhadas e com personalidade. Texturas, estampas e outras formas criativas de aplicar textos estão surgindo, dando individualidade aos elementos gráficos.
Um novo flat.
Se, originalmente, o flat design era totalmente minimalista e formado por figuras planas, a nova fase desse estilo explora bem mais as formas e os principais elementos passam a ser as cores dinâmicas, o uso de sombras delicadas – que dão profundidade sem “pesar” no layout – e a combinação de fontes e botões fantasma, aqueles que só precisam de uma borda, sem profundida ou cor interna, para serem identificados como uma chamada para a ação e, ainda assim, deixar que o destaque fique no restante do material.
Foco nas imagens.
Esse já é um estilo adotado por grande parte do mercado digital e, em 2016, deve se intensificar. A expressão certa será: quanto maior, melhor e, principalmente para as plataformas web, o design das interfaces vai usar imagens grandes e destacadas, que mostrem o propósito ou o tema de um site, aplicativo ou material sem precisar de muitas informações. Até os menus e barras devem sumir dos layouts, dando espaço a uma navegação ainda mais clean.
Design feito para ser rápido.
O tempo das pessoas está cada vez mais curto e isso significa que elas querem respostas, reações e resultados de maneira instantânea (ou o mais próximo possível disso). Então, tanto nas plataformas digitais quanto no meio offline, invista em conteúdo que pode ser acessado de um jeito rápido, em diferentes lugares e seja voltado ao toque – ou seja, otimizado para celulares, tablets e outros aparelhos que facilitam a interação onde quer que o usuário esteja, sem precisar obrigatoriamente de um computador. Isso faz com que seja fundamental pensar de forma responsiva, para dar ao seu cliente essa possibilidade de acessar o mesmo site ou app de diferentes dispositivos sem que isso interfira na sua experiência. A palavra de ordem é otimizar, para criar um processo legal de compra, interação ou uso do seu trabalho.
Organização simétrica.
Esqueça os boxes de tamanhos diferentes, sobreposições de informação e materiais de rolagem ou tamanho infinito. A tendência é que os layouts sejam organizados de forma balanceada e bem dividida. Isso não quer dizer que todas as páginas ou peças devem ter a mesma identidade: você pode usar a criatividade e trabalhar estilos e formatos diferentes em cada material, desde que mantenha a unidade e simetria entre todas – para facilitar a interação de quem receber aquela mensagem, deixar claro que é um material integrado e não correr o risco de mudar a hierarquia dos conteúdos e informações.
Quer saber mais sobre tendências do design e como aplicá-las? Aqui tem um post sobre interfaces digitais, experiência do usuário e – pasme – motivos para não usar o Photoshop nesses casos.
Quero contar algo pra vocês: sou contra o Photoshop.
Já faz alguns anos. Gosto do software, comecei a trabalhar com ele mas não dá. Demorou demais pra evoluir.
Antes que você dê um piti, vamos esclarecer algo. Existe uma situação que o Photoshop é imbatível: edição e tratamento de imagens.
A minha birra é usar o Photoshop pra desenho de interfaces digitais. Não dá.
Previously…
Uns bons anos atrás nos habituamos a usar o Photoshop pra desenhar o clássico “layout do website”. Naquela época a resolução máxima dos monitores era 1024×768, a banda larga não era tão larga assim e sequer tínhamos um versionamento de arquivo decente.
O Photoshop era ótimo. Exportava as imagens em tamanho micro (e sem perder a qualidade), fatiava cada elemento em um .jpeg específico (e já organizava isso na pastinha) e ainda era uma mão na roda pras sombras e degradês que a gente usava e abusava naquela época.
Naquela época não existia site mobile, ninguém falava em responsivo, a gente sequer fazia wireframe antes de começar a desenhar. Era in loco, do briefing direto pro layout.
Graças a Deus o mercado evoluiu.
Hoje qualquer bom profissional colhe um bom briefing, faz um research decente, analisa a concorrência e pensa na… Experiência do usuário como um todo
Hoje, peca quem pensa em layout como apenas um site em um tamanho de tela. Vivemos a era da responsividade. Qualquer um tem smartphone, até sua mãe que nunca entendeu nada do computador. Metade dos acessos de qualquer projeto vem do celular. Às vezes até mais.
Pensar em experiência do usuário como um todo envolve conceber a interface que funcione independente de dispositivo.
Tá, isso significa que você faz um layout pra cada device? Não né, e foi aí que comecei a abandonar o Photoshop.
Onde eu me decepcionei com o Photoshop
• Tamanho Responsivo
Photoshop não me deixa pensar nas variações do tamanho de tela. A largura do canvas é fixo, pra pensar nas variações de tela eu preciso criar vários arquivos ou separar várias layers.
A gente fala de ter um único site que abra em qualquer dispositivo mas desenha várias telas que na verdade são um único site.
Não sei vocês mas pra mim não faz o menor sentido ter o “site_mobile” e o “site_desktop” no mesmo arquivo se é um único site. Consegue perceber a redundância?
• Densidade de pixels
Erro clássico de designer: desenhar tudo em 72dpi. Hoje um iPhone de 2 anos atrás já trabalha com 300dpi. Resultado? As imagens aparecem todas serrilhadas no celular e lindas no seu monitor.
Eu sei que o Photoshop consegue trabalhar em densidades maiores mas o que eu quero é algo mais prático: insiro uma imagem em alta e tenho a saída dela em todas as variações possíveis.
E mais do que trabalhar a quantidade de pixels por polegada, eu preciso trabalhar a densidade de pixels que varia de dispositivo pra dispositivo.
Sempre tem a diferença entre como cada browser renderiza uma página. Nunca, jamais você vai conseguir 100% de fidelidade ao que tem no layout usando o Photoshop.
Ao pensar na experiência do usuário como um todo, eu já quero ser confrontado com todas as variações possíveis.
• Animações e interações
Como você simula uma interação animada no Photoshop? Não simula. No máximo você chega pro desenvolvedor e fala: quando clicar ali, essa janelinha vem pro lado assim ó, fiiiiiuuuu, sacou?
E como você define o mouse over de um botão? Cria outro botão e deixa a layer escondida (aí sempre esquecem de fazer).
Como você define que uma área vai ficar fixa independente da rolagem? Impossível.
• Agilidade vs. Redundância
Numa era em que falamos de Lean UX, de testes A/B e de como as coisas precisam estar no ar rápido, o Photoshop vai contra toda essa agilidade.
Ao mudar um elemento, você precisa sair alterando todas as variações que ele tem.
Numa era em que tempo é cada vez mais escasso e essencial, eu não posso me dar a esse luxo.
Uma luz no fim do túnel
Na versão 2015, o Photoshop deu um up. Artboards foram incorporados, temos um Live Preview disponível (mesmo que limitado) e uma biblioteca de assets (chega de alterar mais de uma vez o mesmo elemento).
As novas features resolvem boa parte dos problemas que citei. Porém, tive que esperar mais de 3 anos por isso. Não deu, eu parti pra outra.
A parte boa nessa história é que, como muitos ainda usam o Photoshop, as funcionalidades tendem a tornar o mercado mais sadio e eficaz.
Além do software
Mais do que um update de features, o que a gente precisa é um upgrade de mentalidade.
Hoje não basta apenas desenhar, você precisa conhecer as limitações e possibilidades de cada plataforma.
Não à toa, os melhores designers web que conheço são aqueles que conhecem HTML. Os caras que sabem até onde podem ir e os que menos sofrem na hora de testar e usar um novo software.
Qual é o melhor? Nesse exato momento eu diria que o Webflow, é o que vem respondendo mais rápido às necessidades. Mas reparem que ele não é o substituto, não existe mais O software. O que temos é a necessidade de mercado e o quão rápido as ferramentas se adaptam.
Essa proposta de redesign do IMDB, por exemplo, foi feita direto no Webflow. O que você vê na tela é o produto final que o Webflow entrega, ele entrega um site e não um arquivo de imagem.
Estamos numa época em que tudo muda muito rápido e precisamos nos adaptar. Ficar preso a um único software por apego é burrice, é ficar estagnado. É ser aquela tia que dizia que a TV jamais iria superar o rádio.
Então antes criticar uma simples escolha de software, reflita o quando às vezes ficamos estagnados num mercado em que justamente deveríamos ser os primeiros a experimentar e inovar.
Mais do que uma crítica ao Photoshop, esse texto é uma crítica àqueles que ficam presos a legados do passado. Aqueles que se mantém fiéis a um software por puro apego e por falta de visão estratégica. Aqueles que tem medo de arriscar (mesmo que seja pra fazer um simples layout).
Tentou e não deu certo? Não se preocupe, o mercado digital não é aquele jornal que você imprime e já era. Você pode voltar atrás, fazer de volta e fazer melhor. Você pode(e deve) experimentar.
