Tag: design de interação

  • Como fazer efeito float label animado com CSS3 puro

    Como fazer efeito float label animado com CSS3 puro

    O último post sobre como criar um efeito ON/OFF em um checkbox usando CSS3 puro fez muito sucesso. Dessa forma, pensei o que mais poderia ser legal para fazer com CSS3. Analisando um pouco o comportamento do Android, me lembrei de um componente bem interessante que é o input com um label float animado. Basicamente, ao preencher o conteúdo, o label sobe e vai para um pouco acima do input, como no exemplo abaixo:


    Agora… como fazer?

    O segredo está novamente nas pseudoclasses e operadores. Graças as pseudoclasses eu posso definir, com alguns gatilhos, o comportamento de um determinado elemento HTML.

    No caso, esse gatilho é o placeholder, então é fundamental que o input possua um placeholder (vazio ou não) para criar o efeito. Pois o que identifica que algo foi preenchido ou não é justamente o placeholder. Sem o placeholder definido, o efeito não funciona. A pseudoclasse referente ao required também é usada em nosso exemplo:

    Já para o efeito de transição, usaremos o transition e o comportamento do absolute que, por definição, tem seus eixos referentes ao pai, no caso desse ser relative. Então basta usar o CSS abaixo:

    Como sempre, estou disponibilizando o exemplo completo no JsFiddle!

    Gostou? Então curta a página no Facebook e compartilhe com os coleguinhas!

  • Como Criar Sua Própria Fonte e A Usar Como Ícone?

    Como Criar Sua Própria Fonte e A Usar Como Ícone?

    Quem está estudando para ser designer, precisa estudar um assunto muito importante: Tipografia. E, por muitas vezes, precisa criar a própria família tipográfica, ou seja, como criar fontes. Além disso, podemos usar uma tipografia personalizada como ícones, tornando o site ou o sistema, desenvolvido em HTML5, ainda mais leve e bonito.

    Este tutorial visa ajudar você com o processo técnico de converter os símbolos e criar sua própria fonte OTF, TTF, SVG, etc. Também um pequeno resumo de como implementar sua fonte em CSS3 para funcionar como ícone.

    Para começar, você vai precisar instalar o Inkscape em seu computador. Baixe a versão mais recente do aplicativo Inkscape. Ele está disponível para Windows, Linux e Mac. Caso você use o MacOSX, será necessário instalar o XQuartz.

    Você vai precisar também de algum programa para desenho vetorial, pode usar qualquer um de sua preferência, como o Illustrator, CorelDRAW ou o próprio Inkscape.

    Crie seu símbolo para cada caractere

    Primeiramente, é necessário criar os glifos. Você pode utilizar o Illustrator ou qualquer outro programa de ilustrações vetoriais. Exporte o arquivo no formato SVG. Você pode, se quiser, colocar todas as ilustrações no mesmo arquivo. Os desenhos não deverão ter contornos, somente preenchimento e devem ser compostos somente de preto.

    Fonte Criada no Illustrator

    Anexando Glifos aos Caracteres no Inkscape

    No Inkscape, selecione File>New>fontforge_glyph. Essa opção adiciona as predefinições necessárias para criação coerente da família tipografica.

    New FontForge_Glyph

    Com o documento criado, importe os glifos (File>Import) criado anteriormente por você. Caso você tenha feito todos os glifos no mesmo arquivo, o Inkscape irá importar todos agrupados na organização que foi salvo.

    Importar Arquivo no Inkscape

    Quando o arquivo é importado, ele vem agrupado e com algumas configurações que o Inkscape não reconhece corretamente.
    Siga os passos abaixo para não haver erros e incompatibilidades:

    Selecione o objeto, clique com o botão direito e escolha Ungroup. Faça isso quantas vezes for necessário até o objeto estar totalmente desagrupado;

    Desagrupar

    Ainda com o objeto selecionado, vá no menu Path>Combine;

    Em seguida vá no menu Path>Union;

    Combinar e Unir

    Essas ações são necessárias para que o glifo se torne um unico objeto e possa ser anexado corretamente ao caractere escolhido.

    O próximo passo é abrir a tela de edição de fontes. Selecione o menu Text>SVG Font Editor.

    Abrir o SVG Font Editor

    Será aberto o painel SVG Font Editor, que permite você criar uma fonte no formato SVG (interpretado pela maioria dos smartphones). A primeira coisa a se fazer é criar um nome e família para a fonte. No painel de edição de fonte, e com a guia GLOBAL SETTINGS ativada, clique  no botão New. Em seguida, clique duas vezes no nome que foi gerado para que possa modificar e colocar o nome que você quiser.

    Colocando Nome na Fonte

    Agora, ainda no mesmo painel, abra a guia GLYPH e clique no botão Add Glyph, ele irá criar uma nova linha na tabela Glyph name/Matching string. Você deve dar dois cliques no nome criado para editar o nome. Ao lado, você deve dar dois cliques no espaço vazio (logo abaixo de Matching String) e você descobrirá (sim, está escondido) que você pode editar esse campo. Simplesmente digite a letra a qual você quer assimilar o glifo.

    No exemplo a seguir, assimilei o meu glifo de Editar a letra “e” minúscula. Vale salientar que você pode vincular a qualquer caractere que deseja, inclusive caracteres especiais como #,ø,®,†, etc.

    Por fim, selecione o objeto (ou grupo) que você quer vincular ao caractere e clique no botão Get curves from selection. Para verificar se foi adicionado corretamente, digite, em Preview Text, o caractere que deseja verificar.

    Relacionar Fonte ao Caractere

    ATENÇÃO: Caso o ícone não apareça no Preview Text corretamente, como aparecer pequeno ou simplesmente não aparecer, você deve repetir os passos acima de Ungroup, Combine e Union do objeto. Provavelmente o objeto não foi preparado corretamente e por isso não relacionou como deveria.

    Salve o arquivo normalmente. No formato padrão de SVG do Inkscape.

    Salvar Fonte Criada no Inkscape

    Transformando a fonte SVG em OTF ou TTF

    O arquivo SVG está pronto. Agora precisamos converter para uma fonte usável pelo sistema operacional. Há muitos sites que fazem essa conversão.

    O que recomendo que faça a conversão é o FreeFontConverter. Basta importar o seu arquivo SVG, escolher o formato (Aconselho OTF, primeiramente, que tem melhor acabamento) e depois clicar em convert. Ele fará o download automaticamente da fonte.

    Converter a Fonte em OTF

    ATENÇÃO: Caso dê erro durante a conversão, você pode tentar salvar o arquivo em SVG Optmized, no Inskscape.

    Você pode ver que a fonte pode ser instalada normalmente no seu sistema operacional.

    Fonte Convertida

    Usando a fonte personalizada em CSS e usando-a como ícone

    Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.

    Gerador de Fontes da FontSquirrel

    Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência) no seu site e chamar via CSS.

    @font-face {
        font-family: "minhafonteregular";
    
        src: url("fonts/minhafonte-webfont.eot");
        src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
             url("fonts/minhafonte-webfont.woff") format("woff"),
             url("fonts/minhafonte-webfont.ttf") format("truetype"),
             url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");
    
        font-weight: normal;
        font-style: normal;
    }

    Para usar como ícone em um botão (ou em qualquer outro componente HTML5), basta você usar a opção content, do CSS3, como descrito abaixo:

    button.editar{
            padding:10px;
    }
    
    button.editar:before{
            font-family: "minhafonteregular";
            font-size:36px;
            content:"e";
            -webkit-content:"e";
            -moz-content:"e";
            -o-content:"e";
            -ms-content:"e";
    }

    E basta adicionar a tag Button com a classe determinada:

    <button class=”editar”> </button>

    ATENÇÃO (iOS): Devido a padrões do iOS, o ícone só vai aparecer se tiver uma cor de fundo (devido ao webkit-appearance), se você quiser, entretanto, usar a cor padrão, utilize o CSS abaixo:

    button{
    background-color: buttonface;
    }

    Abaixo, você pode ver o exemplo usado no vídeo (no topo do post), que tem uma forma um pouco diferente de usar.

    Qualquer dúvida, deixe um comentário, mande uma mensagem no skype ou por email. Siga @velhobit no Twitter e curta nossa página no Facebook.

    Até o próximo Tutorial.

  • Adobe XD cheio de novidades anunciadas no AdobeMAX

    Adobe XD cheio de novidades anunciadas no AdobeMAX

    O Adobe Experience Design, ou simplesmente Adobe XD, já é uma ferramenta extremamente democrática para quem ama design ou simplesmente quer prototipar seus projetos. Isto porque além de estar disponível no Windows, MacOS e extensões para iOS e Android, ainda possui um plano gratuito.

    Como já não bastasse ser tudo de bom, a Adobe lançou novas funções neste dia 15 de Outubro de 2018. Funções essas que são de deixar de deixar qualquer Times com cara de Helvetica.

    Gatilho por Voz

    Com a chegada de novos assistentes para a casa, como o Google Home Hub e o Alexa Echo Show, os designers de interação precisam prototipar também aplicativos que irão responder ao comando de voz. Por isso mesmo, a Adobe introdução uma forma de passar a tela por comando de voz! Veja no vídeo abaixo um exemplo de protótipo do Alexa Echo Show.

    Plugins? Temos sim.

    Lembra que meses atrás a Adobe abriu um financiamento para quem quisesse desenvolver ferramentas para o Adobe XD (que você ainda pode se inscrever)? Pois é, e aqui está o resultado. A Adobe trouxe diversas integrações, até mesmo com o Slack, Trello e Microsoft Teams, que são ferramentas altamente usadas no ambiente de desenvolvimento.

    Animação Automática

    Pois é… tem gente que não é muito fã de passar um tempinho animando. Por isso, a Adobe introduziu um sistema de animação automática. Muito similar mesmo ao que a gente vê no Keynote, da Apple. Essa animação automática dá um resultado misto muito bom em elementos da tela, deduzindo o comportamento de cada elemento, para uma melhor transição dos mesmos.

    Gatilho de Gesto de Arrastar

    Uma das interações mais comuns dos dias de hoje é arrastar algo com o dedinho. Por que não ter isso no protótipo? Agora o AdobeXD tem um gatilho que nos permite arrastar um elemento para servir como gatilho para a passagem para a próxima tela, demonstrando o funcionamento correto daquele elemento.

    E o que mais tem?

    O Adobe XD ainda trouxe as opções de vincular símbolos, integrar facilmente elementos vetoriais do Adobe Illustrator CC (já havia no Photoshop) e ainda exportar, com alta fidelidade, o protótipo e suas animações, para o Adobe After Effects CC, ajudando o designer a vender mais facilmente sua ideia e criando mockups mais elegantes para apresentação.

    O legal é que tudo isso já está disponível, e não só para os assinantes do plano Creative Cloud, como também para quem usa gratuitamente através do plano Starter.

    Com notícias do The Blog, da Adobe.

  • 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.

  • 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.