Tag: interação

  • Adobe pretende lançar versão completa do Photoshop para iPad

    Adobe pretende lançar versão completa do Photoshop para iPad

    Com o poder de fogo atual dos iPads, já é possível executar softwares mais pesados e complexos. Por esse motivo, a Adobe está planejando lançar a versão completa de seu aplicativo de edição de fotos  para o dispositivo da maçã. Esse processo é parte de uma nova estratégia para tornar seus produtos multiplataformas, algo que já começou com o Lightroom.

    Além disso, nesta semana, a desenvolvedora Serif lançou uma versão do Affinity Designer, concorrente do Illustrator, para iPad. A introdução da versão completa do Photoshop para o dispositivo, traria ainda mais espaço para a Adobe no iOS, que no momento está com a área de design dominado por outras empresas.

    Lighroom para iPad
    O Lightroom para iPad e Desktop já compartilham a mesma versão e estrutura

    Outro motivo pelo qual o Photoshop pode ser uma boa aposta da Adobe, é a função que tem o iOS de sincronizar arquivos entre vários dispositivos, facilitando a integração do usuário entre desktop e mobile. Ainda, o editor de imagens teria compatibilidade integral com o Apple Pencil.

    O aplicativo está previsto para chegar ao mercado em 2019, caso não hajam problemas mais sérios em seu desenvolvimento.

    Os clientes da Adobe, particularmente em mídia e entretenimento, estão cada vez mais trabalhando  em  tablets, em vez de computadores de mesa, e pediram à empresa a capacidade de fazer ‘edições on the fly’ em seus projetos criativos, disse Scott Belsky, vice-presidente executivo da Creative Cloud, à Bloomberg.

    Diante dessa nova informação e do lançamento anterior do Lightroom, tudo indica que a criação de aplicativos multiplataformas é a estratégia da Adobe para os próximos anos . Uma nova versão do Illustrator também estaria em desenvolvimento, mas sem muitas informações e previsão de lançamento.

    Com notícias da Bloomberg e Blog da Adobe.

  • O que é Design de Interação?

    O que é Design de Interação?

    Quando se fala em design, muitas pessoas compreendem como algo artístico ou estético, geralmente relacionado com o visual. Mas design vai muito mais além. Design é projeto. É entender o comportamento do usuário de acerca de um artefato e otimizar para que sua função seja executada da forma mais simples e objetiva possível.

    Na área de TI, temos uma vertente do design que é chamada de Design de Interação. Como o próprio nome diz, corresponde aos fatores de interatividade do usuário com o sistema. É função do designer de interação projetar como o usuário vai enviar, receber e responder (ou seja, interagir) o sistema ao qual está usando. Por conta disso, o designer de interação precisa possuir uma série de habilidades específicas que adentram a área de desenvolvimento como um todo, com conhecimentos que vão desde movimentos artísticos à performance de banco de dados. Abaixo vamos listar as algumas das competências agregadas a um designer de interação.

    Estética

    Sem dúvida a parte do design que as pessoas mais lembram é a estética e por isso estamos falando dela primeiro. A estética depende do conhecimento relacionado a arte e filosofia. Estética não significa beleza, mas sim ajustar a aparência de acordo com a proposta do projeto. Muitas vezes, a estética é uma consequência de algo bem desenvolvido e é a última parte em que o designer trabalha.

    Um termo muito usado na área de TI para se referir a estética de um sistema ou aplicativo é Look & Feel (Aparência e Sensação). Esse termo define a sensação que o usuário tem acerca de todo padrão estético de uma interface gráfica. Essa ideia é clara a medida em que as pessoas tendem a sentir sensações distintas ao utilizar aplicativos e, principalmente, sistemas operacionais diferentes. A sensação de usar o Windows, o MacOSX ou uma GUI (Graphic User Interface – Interface Gráfica de Usuário) para Linux / Unix, mesmo que usando o mesmo aplicativo, é diferente e até um pouco difícil de explicar tal diferença.

    Legibilidade

    A legibilidade é um conceito que envolve a compreensão simples dos elementos da tela. Lembre-se que, dentro da visão de comunicação, texto não são somente palavras escritas, mas sim qualquer símbolo que possua um significado, como um ícone, uma imagem ou um som. A legibilidade é o que torna o texto compreensível em seu contexto. Trocando em miúdos, trata-se de como os elementos podem ser facilmente interpretados pelo usuário.

    A legibilidade vai desde as escolhas dos termos e palavras escolhidas à iconografia e tipografia. Até mesmo qual fonte será usada e sua espessura, se os ícones forem esqueumórficos ou minimalistas, se os espaçamentos vão ser maiores ou menores, tudo isso está envolvido no conceito de legibilidade.

    É neste ponto do projeto que também se pensa em contrastes. Compreende-se contraste não apenas a diferença do preto no branco, mas em todas as reduções de nuances que facilitam a legibilidade. Quanto menos etapas de algo, mais contraste ela tem. Grande/Pequeno, Claro/Escuro, Cores Opostas, etc.

    Usabilidade

    Uma das principais preocupações do designer de interação é o quão fácil pode ser para o usuário chegar ao seu objetivo. A usabilidade está vinculada a legibilidade, mas vai além. Para isso, o designer precisa definir elementos que direcionem a atenção do usuário e que facilite a localização instintiva dos items interativos. É pensando na usabilidade que o profissional irá diagramar a tela e preparar protótipos de comportamento.

    Dentro da usabilidade, o Designer de Interação deve fazer pelo menos um desses materiais:

    • Wireframe: Trata-se de um rascunho que define as funcionalidades do sistema. Pode ser um desenho à mão ou feito no computador, mas não possui compromisso com a fidelidade do projeto final. Sua importância é definir conceitos básicos enquanto está sendo desenvolvido o design final da interface.
    • Mockup: Imagens estáticas que representam as interfaces com a aparência mais próxima possível da final. O objetivo é demonstrar para equipe ou para o investidor como o projeto deverá ficar no final. O mockup também serve como base para criação do código referente a GUI do sistema.
    • Protótipo: Similar ao Mockup, porém simulando as interações, com ações de cliques e movimentos. Contudo, os dados geralmente são fictícios e funciona em ambiente controlado. Seu objetivo é permitir um melhor planejamento da interação, como também mostrar exemplos a investidores ou usuários teste.

    É fazendo testes de usabilidade que o designer de interação vai determinar diversos fatores de espaçamentos, tamanhos de ícones e acessibilidade. Ainda, é neste momento que deve-se sair da zona de conforto e experimentar o leiaute em diferentes contextos.

    Funcionalidade e Programação

    Design é dar uma função à forma. Uma forma sem função, sem motivo de existir, não é design, mas arte. Diferente da arte, o design necessita de um função à quem este serve. Tudo o que se decide em um projeto, desde a sua elaboração estética até sua agilidade, existe para retornar um resultado, que é o objetivo da existência de um determinado sistema ou aplicativo.

    Por isso, o designer de interação não deve apenas conhecer da parte gráfica e estética, mas também das idiossincrasias referente a área na qual está trabalhando. Neste caso, tecnologia e desenvolvimento.

    Assim como um designer de moda precisa entender de costura e um designer de interiores de arquitetura, um designer de interação precisa saber como programar, ao menos o front-end, e como implementar o design que ele próprio elabora. Mesmo que ele não seja o responsável direto por aplicar esse código, é necessário que possua um conhecimento profundo de front-end e razoável quanto a back-end e banco de dados. Inclusive, muitas vezes, a responsabilidade de criação de novos componentes de interatividade é justamente do designer de interação.

    Isso é necessário pois a Experiência do Usuário (UX- User eXperience), item chave do trabalho de um designer de interação, depende de todos os fatores tecnológicos que acompanham o desenvolvimento de um projeto (e até mesmo antes do usuário ter acesso ao sistema). Em determinado ponto, o designer precisa testar a confiabilidade dos dados, o tempo de resposta, praticidade de atualização, necessidade de fragmentação e, inclusive, o tempo de reparo de um eventual problema e a saúde do código. O relacionamento com o programador as vezes é esquecido, mas a experiência do programador e dos outros profissionais da empresa são tão importantes quanto a experiência do usuário, pois isso se refletirá em todo desempenho e qualidade do projeto.

    Afim de compreender, conversar, sugerir e implementar, o designer de interação precisa ter conhecimentos específicos de diferentes linguagens de programação e marcação, além de suas tecnologias agregadas, tendo foco principalmente (mas não apenas) no front-end, como:

    • HTML;
    • CSS;
    • Javascript;
    • Lógica de programação;
    • Documentos DOM específicos de algumas plataformas;
    • Kits de plataformas (como Android Kit, iOS e UWP);
    • Linguagens Back-End como PHP, Java, Python, ASP ou outras que forem sendo necessárias aprender em seu cotidiano.

    Ambiente Controlado vs Produção

    Se por um lado o designer de interação deve possuir conhecimentos acerca do comportamento e da área de tecnologia, por outro, grande parte daqueles que se afirmam profissionais não estão trabalhando pensando em ambiente de produção.

    Não é incomum ver os chamados “Designers de Dribble“, ou “Designers de Ambiente Controlado“. Basicamente, quando alguém busca no Google por UI Design vai encontrar centenas de interfaces impressionantes e incríveis, com cores vibrantes e lindas que nem a Apple conseguiria fazer tão perfeito. A verdade é que esses designs funcionam apenas em ambiente controlado, que não representam a usabilidade real e ainda frustram aqueles que estão começando.

    Na próxima vez que buscar por inspiração (se for o seu caso), comece a refletir quando achar algo no Google, coisas como: E se o nome da cidade for maior do que o desse exemplo? E se o número nessa área superar o esperado? Será que o usuário vai compreender esse nome truncado? Qual o tempo hábil para fazer determinado efeito e se vale a pena? Qual o funcionamento em telas menores? Além disso, uma das coisas mais complexas do design de interfaces é criar padrões para formulários que sejam funcionais independente do tamanho de seus dados ou localização. O que é ainda mais complicado em sistemas densos como ERPs e outros específicos.

    Pensando nessas respostas é que empresas que desenvolvem sistemas operacionais possuem suas próprias guidelines, que descrevem o comportamento de usabilidade em ambientes reais e traz fortes sugestões de padronização.

    Claro que um profissional não precisa seguir à risca esses padrões, porém eles são fundamentais para a base do desenvolvimento de interfaces mobile e desktop pois não é bom que fujam demais do padrão do Sistema Operacional e o usuário sinta-se perdido. Entretanto sites e sistemas web possuem maior flexibilidade, ficando a cargo do Designer de Interação desenvolver o próprio Guidelines para os serviços e produtos relacionados com esse sistema.

    Concluindo, Design é Projeto

    Design não é desenho. Design não é ilustração. Design não é leiaute. Design é projeto. Então, diferente do que muitos pensam, alguns inclusive que se intitulam design, a área não é arte pela arte. O design serve à função e, como tal, o profissional que projeta algo precisa possuir conhecimento em diversas áreas relacionadas àquela específica vertente na qual está trabalhando. Logo, o designer de interação, além dos conhecimentos empíricos do design, como tipografia, colorimetria, filosofia, matemática (geometria), antropologia e comportamento, também precisa possuir a habilidades específicas em programação front-end e back-end (full-stack), história e negócios da área de Tecnologia da Informação.

    Se você gostou deste post, curta e compartilhe ele nas mídias sociais. Caso não tenha gostado, tenha alguma dúvida ou queira fazer uma observação, deixe um comentário.

  • Experimentando o Adobe XD

    Experimentando o Adobe XD

     

    A Adobe lançou o preview do Experience Design. Trata-se de uma aplicação para que designers de interação possam criar leiautes e protótipos para webapps e aplicativos mobile. Atualmente a versão preview está disponível apenas para MacOSX, porém foi prometido uma versão para Windows até o final do ano (2016). No site da Adobe você poderá se cadastrar para pegar o preview para Windows assim que sair. Vale lembrar que você precisa ter uma conta válida da Adobe para poder usufruir do aplicativo.

    Uma informação interessante é que o responsável pelo projeto é o brasileiro, Demian Borba, famoso no Brasil por trazer o Adobe e o FlashCamp, além de ter sido representante principal do BlackBerry há alguns anos. O Demian Borba sempre foi envolvido com design de interação, desde a época do desenvolvimento de RIAs com o Flex.

  • O Número de Ouro e sua Aplicação em Design

    O Número de Ouro e sua Aplicação em Design

    Geometria Fractal

    Já pensou que retas paralelas podem se encontrar?

    Quando aprendemos tipos de imagem, no design gráfico, duas representações gráficas costumam ser estudadas: A matricial, que consiste em um mosaico de pontos muito próximos, compondo uma imagem, e a imagem vetorial, que são equações que geram pontos (âncoras), que são ligados através de retas e curvas, em um plano, usando geometria cartesiana. Todavia, há uma outra forma de representar a imagem de forma computacional, uma forma pouco estudada em cursos de design gráfico, mas bem conhecida por quem trabalha com computação gráfica: a Imagem Fractal.

    A Geometria Fractal descreve fenômenos da natureza de forma mais exata. As formas, na verdade, não são elementos geométricos montados. Árvores não são cilindros, com outros cilindros e cones, núvens não são círculos, girassóis não são estrelas, mas sim, como é definido pelo termo fractal, são “Objetos que apresentam auto-semelhança e complexidade infinita” (CONCI & AZEVEDO), ou seja, é a repetição eterna de cópias muito aproximadas de si mesmo.

    Descrevendo de forma mais simples, imagine uma onda no mar. A onda é feito de ondas menores que, por sua vez, são feitas de ondas menores. Assim como a nervura de uma folha, que se estende para nervuras menores e para outras nervuras menores ainda.

    Nervos da Folha

    Em 1854, o matemático alemão Bernhard Riemann descreveu o fenômeno de longitude e latitude com a afirmação de que linhas paralelas se encontram em um ponto: no polo.

    A descrição de Riemann leva a uma compreensão diferente, porém lógica, do universo. A forma como vivemos deixa claro não haver necessariamente um plano reto, mas sim, que tudo possui uma curvatura.

    Benoît Mandelbrot, em 1975, criou o termo fractal, baseado na interpretação de diversos trabalhos pelo mundo, que, diferente da geometria euclidiana resumida a 3 dimensões, mostra que é possível fracionar uma dimensão. Através do estudo de Mandelbrot, conclui-se que as paisagens terrestres possuem uma dimensão que ronda a “2.1”. Essa dimensão fracionada define o quanto a paisagem é irregular, o que mudaria de planeta para planeta.

    Conjunto de Mandelbrot

    O conjunto de Mandelbrolt e o Floco de Neve de Kock são exemplos de fractais. Hoje a simulação do fractal para uso da computação gráfica baseia-se nesses exemplos, onde é adicionado um fator aleatório para poder aumentar a irregularidade da forma. Montanhas, oceanos e lagos, nuvens, etc. são criados a partir de fractais. A lógica que leva a reconstrução tridimensional de um fractal possui várias aplicações nos ramos da medicina, engenharia, meteorologia, dentre outros, incluindo, claro, o design.

    Oceano Gerado Por Computador

    A Sequência de Fibonacci

    Anos antes da definição de fractal, matemáticos já se impressionavam com os padrões geométricos do que era natural, da forma como as conchas e samambaias se desenvolviam. É possível ver um padrão des semelhança em praticamente tudo o que é natural. Leonardo Fibonacci (1180-1250) sugeriu que seria impossível “subsistir algo se não for devidamente proporcional à sua necessidade”. Ou seja, que tudo precisaria de uma proporção, relativa ao que este é.

    Sugerindo o problema da reprodução de coelhos, Fibonacci conseguiu definir uma sequência proporcional nomeada como Sequência de Fibonnacci.

    Fibonacci sugeriu o problema dos Coelhos: Um casal de coelhos atingem a maturidade sexual em dois meses, a cada mês, um casal com maturidade sexual gera um novo casal. Considerando que as condições de reprodução desses coelhos sejam iguais, e ignorando qualquer problema genético, quantos coelhos teremos em N meses?

    A resposta e dada pela sequência, considerando cada mês e quantidade de casais, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55…

    A sequência de Fibonacci é uma referência a um padrão matemático proporcional, isto é, o numeral 1 equivale a uma variável, é uma representação de algo. Essa sequência se baseia que o número atual seja a soma dos dois números anteriores. Matematicamente representado por Fn = Fn-1+Fn-2, em um processo de recorrência.

    Sequência de Fibonacci

    A representação do Fibonacci em um fórmula fechada, é representada pela equação abaixo:

    Fórmula de Fibonacci

    Um modelo muito comum e geometricamente eficiente de demonstrar a sequência de Fibonacci é através do Triângulo de Pascal. O triângulo de pascal segue uma lógica recursiva, similar a de Fibonacci, onde se demonstra algumas propriedades dos números binomiais. Gerado a partir de cálculos simples, mas trabalhosos, uma notável característica que se assemelha a descrição de Fibonacci pode ser encontrada. A de que o número atual é o produto da soma do número acima e de sua diagonal. Ou seja:

    Triângulo de Pascal

    Esse é um comportamento bem interessante, mas onde está a relação com a sequência de Fibonacci? Com uma rápida olhada, não é possível visualizar, mas quando presta-se bastante atenção é possível ver a sequência de Fibonacci ao observar suas diagonais ascendentes.

    Fibonacci em Pascal

    A Sequência de Fibonacci descreve como as coisas podem crescer através da geometria fractal. Exemplos de como essa disposição numérica ocorre podem ser vistos em diversos elementos naturais, como as escamas de um peixe, o centro de um girassol, os flocos de neve e até mesmo a forma como as cores se formam na natureza. Para utilizar essa sequência, podemos obter a razão dela dividindo o número atual (n) com o número anterior da sequência e, a partir do terceiro número, vamos notar que há um certo padrão na divisão que se aproxima muito de um número bem interessante.

    Número de Ouro em Fibonacci

    Quanto maior o número da Sequência de Fibonacci em razão ao número anterior, é possível encontrar um número aproximado e cada vez mais próximo ao número de ouro, φ.

    O Número de Ouro

    Os gregos antigos eram amantes das formas. Na busca pela Physis, pelo belo, pelo sentido, em sua arquitetura, em suas esculturas e em várias formas de manifestação artística, buscavam encontrar padrões matemáticos. O pensamento do cidadão grego se fazia forte na racionalidade e a compreensão de fenômenos naturais para dar um sentido as coisas, dar um sentido ao mundo.

    Os gregos estudavam as proporções da natureza a partir de observações em imagens e sensações. A partir de um instrumento experimental chamado monocórdio, Pitágoras elaborou a escala musical usando como base uma proporção dois por um.  Essa proporção musical foi notada a partir da forma como a corda vibrava, se dividindo em seções menores, agradáveis, similares, porém em tons mais agudos.

    Essa mesma proporção foi observada em uma forma geométrica em especial: o pentagrama regular, utilizado como símbolo principal da sociedade Pitagórica e existente em vários exemplos na natureza. O pentagrama foi escolhido por suas peculiaridades exatas.

    O Pentagrama regular é obtido através das extensões das diagonais de um pentágono regular. Ou seja, como se as linhas do pentágono fosse esticadas até o momento que se encontram.

    Pentagrama Regular

    O que faz do Pentagrama algo realmente interessante é que a soma do comprimento das duas linhas mais curtas é igual ao comprimento da terceira linha, e a segunda e a terceiras linhas menores somadas são exatamente iguais a quarta. Essa característica foi chamada de Regra de Ouro, que gera a definição do que hoje é conhecido como Proporção Áurea.

    Pentagrama Regular

    A Proporção Áurea origina-se por uma razão recursiva específica de suas medidas e pode ser produzida infinitamente, descrevendo assim a natureza. Produz geometricamente o que talvez seja a forma básica mais usada nas artes: O Retângulo Áureo.

    O Retângulo de Ouro pode ser gerado ao infinito mantendo sempre a mesma proporção. Essa geração infinita gera o que é conhecido como a Espiral de Ouro (ou Espiral de Fibonacci), tendo este nome porque a base da Proporção Áurea segue a mesma lógica da Sequência de Fibonacci.

    Espiral de Fibonacci

    A Geometria Euclidiana então sugeriu o que seria conhecido como retângulo perfeito que é gerado a partir da divisão em média e extrema razão. Pode ser definido então como quando “a razão entre as medidas de comprimento do lado maior e do lado menor é um valor aproximado do número de ouro”. Mas como obter um Retângulo Áureo?

    Imagine um quadro perfeito. Agora encontre o centro de um dos lados. Você vai notar que o resultado é a divisão desse quadrado em 3 triângulos, sendo dois deles triângulos retângulos. Usando como raio a hipotenusa de um dos triângulos retângulos criados, e como centro de um cículo a metade do lado, podemos traçar uma curva que vai da outra extremidade da hipotenusa até a linha do centro do círculo. Completando as retas do quadrado até que se cruzem, é possível obter o que vem a ser conhecido como Retângulo Áureo, que leva esse nome por possuir as mesmas proporções que chegou as notas musicais e ao Pentagrama regular, ou seja, Possui a mesma Proporção Áurea.

    Retângulo de Ouro

    Mas afinal, qual é o valor algébrico dessa Proporção Áurea?

    Com o Retângulo Áureo, podemos perceber que a razão entre seus lados é igual a seu lado menor dividido pela subtração de seu lado maior pelo seu lado menor. Vamos considerar que o lado maior seja L e o lado menor seja X. Considerando que L=1 teremos 1/x = x/1(1-x), o que nos resulta em uma equação do segundo grau, escrita como x² + x – 1 = 0. Aplicando Bhaskara, podemos chegar ao valor negativo de -0.6180… e o positivo de 1.6180…, como proporções são consideradas apenas positivos, obtemos a Proporção Áurea, ou o Número de Ouro, conhecido como Phi, conclui-se que φ = 1.6180…

    A Aplicação do Número de Ouro no Design

    Por ser uma descrição matemática orgânica e que é repetida em vários elementos na natureza, visível desde a forma de crescimento de uma samambaia até na forma de uma galáxia, o número de ouro foi utilizado por várias escolas artísticas. Na arte grega e renascentista, o φ influenciou na arquitetura, na escultura e na pintura. Leonardo Da Vinci, em sua Gioconda, é um belo exemplo do uso da Espiral de Ouro nas proporções da Monalisa. Talvez um dos maiores exemplos do uso da Proporção Áurea seja o Homem Vitruviano, também de Da Vinci, onde este mostra as proporções perfeitas em um ser-humano.

    Arte e matemática são ferramentas fundamentais do design moderno, o uso do número φ se torna fundamental para a criação de artefatos visuais cada vez mais orgânicos e esteticamente admiráveis. Mesmo quando não feito propositalmente, o ser-humano tende a buscar esse número ou uma aproximação do mesmo.

    No design gráfico, a espiral de Fibonacci talvez seja a forma mais usada para criar uma leitura mais fluida dos elementos da imagem. Na diagramação de livros, por exemplo, o uso de retângulos áureos são usados para criar um espaçamento entre bordas mais confortáveis para a leitura.

    Livros com Retângulos Áureos

    Não diferente, o designer tende a utilizar uma razão mais próxima possível do retângulo áureo nas medidas dos papéis, as vezes, arredondando os lados para uma compreensão mais simples em produtos que exigem a medição do usuário ou específicas para determinadas máquinas. Todavia, optar por formatos padrões com proporção mais próximas ao retângulo áureo, ajuda a ter um resultado mais apropriado e orgânico.

    Qualquer artefato gráfico que exija uma melhor compreensão e objetividade na informação, como em revistas e interfaces gráficas para computadores, pode tirar um bom proveito da Proporção de Ouro e da Espiral de Fibonacci. Todos os produtos, ícones e marcas da Apple, por exemplo, são baseados na Espiral de Fibonacci.

    Um dos motivos pelo qual a interface do iOS, da Apple, parecer mais bem acabada que a do que a de outros Sistemas Operacionais móveis, é a proporção com a qual seus ícones são criados. A Apple disponibiliza uma guideline para ícones. Essas linhas-guia são criadas a partir da referência da Espiral e Fibonacci. Na verdade,  os quadrados que formam a espiral são transformados em círculos e centralizados. A Proporção Áurea tem seu uso recorrente na área de iconografia.

    iOS ícones

    A tipografia também é um estudo que utiliza as proporções áureas. Tanto a própria criação do tipo per si quanto a forma como ele é utilizado, a proporção áurea torna-se fundamental no planejamento. Para criar a tipografia, as Proporções Áureas são usadas para gerar suas formas.

    Helvetica Proporção Áurea

    Já no que diz respeito a utilização da tipografia aplicada em textos, podemos usar a proporção áurea para saber quais os diferentes tamanhos de tipos podemos usar em um artefato gráfico.

    1em  2em   3em  5em 8em

    O Número de Ouro é aplicável em qualquer cálculo matemático em que se busca uma proporção mais orgânica, é utilizável até mesmo em cores. O cálculo pode ser feito através de frequências ou calculando em números decimais por canal de cor. Já existem alguns aplicativos que tentam gerar essas cores baseadas em φ. Talvez a maneira mais eficiente seja calcular a paleta a partir de um Pentagrama Regular colocado em cima de um Disco Cromático de Newton.

    Na área de Design de Interação, é comum achar cálculos que respeitem o Número de Ouro e a Proporção Áurea na preparação de interfaces. Apesar de ser um processo dependente de tecnologias e diversos outros fatores relacionados a websemântica, é possível gerar guias que usam proporções para encaixar melhor elementos na página.

    Exemplos do Número de Ouro em UX

    Todavia o local onde o Número de Ouro é mais é lembrado, na área de Design Gráfico, são nas Identidades Visuais.

    Um designer gráfico geralmente cria o seu conceito no papel e quando vai finalizar sua marca, organiza suas curvas, espaçamentos e formas a seguir um padrão de grade que este cria. Esse padrão de grade, na maioria das vezes, é criado respeitando a Proporção Áurea e tende a ser seguido por todos os outros produtos e serviços relacionados à essa marca.

    Além da grade, a Proporção φ também é usada para gerar objetos de tamanhos diferentes mas respeitando a composição, deixando a aparência final mais fluida. Mesmo sem querer, os designers são condicionados a finalizar suas criações usando essas proporções, com o tempo isso se torna quase automático. Todavia, é importante o uso das Proporções Áureas até mesmo para criar um conceito estético ou se o desejo for desconstruir completamente a proporção para chegar no conceito e função da forma que está sendo projetada.

    Marcas Com Proporção Áurea

    Aqui mesmo na PortilloDesign, utiliamos Proporção Áurea e o Número de Ouro em alguns de nossos projetos.

    Projetos pela PortilloDesign

    Apesar da utilização do número de ouro ser importante em projetos gráficos, não significa que ele sempre deve ser sempre seguido à risca. Algumas vezes, dependendo do projeto, talvez o ideal seja não usar esses cálculos ou usar outras referências de grades. Todavia, para se quebrar uma regra, precisa primeiro conhece-la bem. Além disso, uso da proporção áurea não significa usar as formas redondas e retângulares que a ilustra, mas sim usar seus conceitos e cálculos para se chegar a uma forma ideal para o projeto. A proporção áurea é, como seu próprio nome diz uma referência de proporção e não exatamente da forma.

    Concluindo

    O Número de Ouro e a Proporção Áurea fazem parte de um conhecimento geométrico fundamental para o designer. A medida que os elementos naturais tendem a seguir a geometria fractal, simular esse efeito em seus projetos conduzem o designer a um acabamento mais agradável, tanto orgânico quanto esteticamente, aos olhos do observador. Além disso, a criação de grades baseadas nessas proporções ajuda como um estímulo à criatividade, definindo linhas e formas que podem ser transformadas na mente do criador.

    Vale lembrar que nem sempre estamos fazendo algo pensando na proporção áurea ou definindo uma grade em todos os projetos. Com o tempo, essas definições acabam se tornando intuitivas e o designer acaba por adicionar essas formas mentalmente, sem nem mesmo perceber. Esse fenômeno explica o porquê de designers mais experientes conseguirem, muitas vezes, concluir projetos complexos em menos tempo.

    Claro que, assim como os simulacros da computação gráfica, a adição de fatores aleatórios que quebram parte dessa proporcionalidade é algo muito bem-vindo, se usado com responsabilidade. O importante, em todo caso, é compreender como funcionam essas formas de desenvolvimento e a relação entre geometria, álgebra e geração de conteúdo usando essa tão desejada proporção 1.61, φ.

  • Design Flat e Simplicidade Não São Sinônimos

    Design Flat e Simplicidade Não São Sinônimos

    Zapeando pela internet, eu me deparei com um conteúdo bem interessante. Tratava-se de uma série de palestras para jovens profissionais – o que eu acho bem legal. Porém, uma dessas palestras falava sobre tendências, mais especificamente sobre o atual uso do Flat Design. O que me deixou um pouco preocupado é que o autor da palestra que insistiu em igualar Flat com Simplicidade: ”Flat = Simples”. Uma equação que simplesmente não faz sentido.

    O que é Design Flat?

    O Flat é uma tendência na área de design que busca criar imagens e conceitos objetivos, com o mínimo de informações possível, evitando o uso de formas que sugiram profundidade, daí o nome Flat.

    Para poder ser funcional, essas formas precisam ser mais simplificadas e todo o leiaute precisa conter uma alta quantidade de contrastes. Mas o Design Flat não é nenhuma novidade.

    O Flat na verdade é uma tendência que marca o retorno de um movimento artístico, muito forte nos anos 60, chamado Minimalismo. A história da arte mostra que as escolas são cíclicas, ou seja, tem o costume de sempre ser contrárias as anteriores, com pequenas modificações, as vezes através de movimentos de contra-cultura, as vezes simplesmente trazendo uma “inovação” – que na verdade é a recuperação de uma antiga tendência. Design não é arte, mas a arte é usada como ferramenta do design, logo, os movimentos artísticos influenciam diretamente no resultado de um projeto gráfico.

    The Rolling Stones - Exemplo de Minimalismo

    Esqueumorfismo

    Esqueumorfismo, ou Simulacro, é um conceito artístico que tende a imitar um objeto ou situação, mas de forma a deixar claro que ela é uma imitação, uma sugestão do real. No Design Esqueumórfico, costumamos dizer que aquele ícone, imagem ou leiaute busca a fácil identificação do usuário, baseado na sua semelhança direta com o objeto real. A ideia é que se o usuário já viu uma lixeira, então um desenho que parece-se clasramente com uma lixeira vai ser mais facilmente identificável.

    Esqueumorfismo no iOS

    O Esqueumórfico e o Flat na História da Interface Gráfica

    Com a chegada das interfaces gráficas, no começo dos anos 80, o design se encontrou em uma área ainda desconhecida, o design de interação. Agora, uma equipe necessitava definir regras de conceito para facilitar o uso de uma máquina, que era interagida não somente com o uso de um teclado, mas também de um dispositivo apontador chamado mouse.

    No início, toda computação gráfica era “Flat”. Isso porque os computadores simplesmente não tinham poder de processamento gráfico para gerar imagens mais detalhadas. Claro que computadores, na época, ainda eram equipamentos muito caros, então essa facilidade era importante, mas não tanto quanto hoje em dia, pois eram comprados, geralmente, por pessoas que já tinham algum conhecimento ou estavam sinceramente interessados em desenvolver-se e aprender mais sobre seu uso.

    Porém, com a popularização dos softwares de manipulação de imagens e processadores gráficos cada vez mais potentes, os profissionais de interação agora conseguiam gerar imagens mais similares a imagens reais. Isso encantou os olhos de empresários como Steve Jobs, que cresceram em épocas que o fazer isso simplesmente era impossível. Então, se agora era possível fazer, e isso fará com que meu usuário assimile mais rápido, então que se faça.

    Na metade da década de 90, houve uma explosão de ícones e leiautes cada vez mais realistas, chegando até mesmo ser uma espécie de desafio para os designers., assim como elementos arredondados (que agora eram mais fáceis de fazer), e isso gerou uma estética bem específica no final do século XX.

    Evolução OSX

    Todavia, os designers formados no final da primeira década do século XXI, cresceram vendo toda essa tendência do simulacro. Como dito anteriormente, os movimentos artísticos são cíclicos, logo, o movimento minimalista foi escolhido com a antítese ao esquemorfismo. Então, hoje, temos o Flat. Se o indivíduo cresce em um ambiente de uma tendência específica, o contrário tende a parecer mais inovador, mais moderno, pois está fora de seu escopo habitual de conhecimento.

    Por que Flat não é sinônimo Simples?

    É comum confundir o Flat com simplicidade, por suas formas serem mais minimalistas, mas isso não quer dizer que sejam mais simples. Na verdade, o Flat precisa de um conhecimento prévio e um entendimento do contexto social e cultural da mídia em que se está inserida. Ou seja, se você não souber do que se trata, você não vai assimilar.

    Não entendeu? Vamos a um exemplo. Olhe a imagem abaixo:

    Círculo Verde

    Então? Você entendeu o que é? Você sabe o que deve fazer com ele? Talvez olhar somente, talvez arrastar, quem sabe chacoalhar. A questão é que fora de um contexto ou sem prévia explicação, fica um pouco confuso a finalidade dessa símbolo.

    Porém pode ser questionado que o Flat foca no conteúdo e, geralmente, há uma mensagem, quase sempre escrita, para explicar a utilidade daquele símbolo (Vou pular o fato já conhecido de que ler uma palavra é muito mais complicado para o cérebro do que ler uma imagem). Então, vamos colocar um contexto no círculo para que ele ficar mais compreensível:

    Círculo Verde Com Caractere Chinês no Meio

    Ok! Agora ficou claro o que você deve fazer com esse círculo verde, correto? Não?

    Talvez não tenha ficado muito claro porque não é um símbolo que um usuário ocidental esteja acostumado. Ou seja, foi dada uma informação para explicar o que deve ser feito com esse círculo verde, ou o que ele representa, mas como o usuário não tem um conhecimento prévio da informação ou do contexto em que está inserido, não vai compreender o objetivo desse círculo. Além disso, o uso desse conjunto só será possível por pessoas que dominem esse idioma, reduzindo a quantidade de pessoas que poderiam ser atingidas com esse projeto.

    Agora, com esqueumorfismo, vamos fazer o mesmo símbolo:

    Botão Verde

    Ahhhh… agora está mais fácil de entender o que é. Okay, você ainda pode entrar no contexto que seja uma camisinha, um nariz de porco do AngryBirds, mas, para a maioria, irá compreender logo que é um botão. Ou seja, nesse caso, com o esqueumórfico, fica mais fácil para qualquer um entender o que deve fazer com esse símbolo. É um botão, logo, deve ser apertado. E, mesmo que eu não saiba chinês tradicional (estava escrito aperte), eu vou entender o que posso fazer com esse objeto na tela.

    Além disso, outras informações podem ser passadas, sem a necessidade de confundir ou passar mais informações ao usuário.

    Botões Verdes Esqueumórficos

    No exemplo acima, é mostrado duas situações do mesmo botão. Está sendo dito, sem palavras ou complicações, que o botão pode ser apertado e que o botão já foi apertado.

    O exemplo citado é um tanto específico, mas pode ser usado em diferentes situações. Um simples botão de REC (gravar), no meio de um aplicativo de gravação de voz, pode ficar confuso para um usuário mais leigo, que não tem o conhecimento prévio e a cultura acerca de um determinado símbolo. Além disso, mesmo se for usado mais elementos, a assimilação do usuário pode ser um pouco mais lenta, pois precisará processar, em seu cérebro, algumas analogias adicionais.

    Concluindo

    O Flat é uma tendência poderosíssima, que está em alta tanto como uma forma de antítese à cultura dos anos 1990 e 2000, como para facilitar a criação de interfaces que funcionem bem em diferentes resoluções. Porém, como mostrado no exemplo acima, o Flat não necessariamente será mais simples. Talvez, mais limpo, mas não simples.

    Para um usuário leigo é muito mais fácil, e simples, compreender uma imagem que ele já identifica em seu cotidiano e sua história de vida, do que ser inserido em um novo contexto social e cultural ao qual ele deverá se acostumar. Há pessoas que dizem (Como a Bia Kunze) que o uso do esqueumorfismo foi fundamental para a popularização dos dispositivos móveis.

    O que veremos, muito provavelmente, é que, com o tempo, o Flat encontrará uma posição melhor. Provável que, daqui a alguns anos, em um movimento na busca pela inovação, e o esqueumorfismo for esquecido, este volte a tendência com um novo nome. Talvez pela alcunha de mimetismo.