Tag: design

  • Adobe Illustrator Traz Atualizações Requeridas por Usuários

    Adobe Illustrator Traz Atualizações Requeridas por Usuários

    A última versão da Adobe trouxe atualizações pedidas por usuários.

    Dentre elas, o Adobe Blog destacou três atualizações importantes de experiência do usuário.

    Zoom

    As últimas versões do aplicativo haviam trazido o zoom ao objeto. Ou seja, a ampliação era feita em direção ao objeto selecionado. Agora é possível fazer o zoom ao centro da tela. Para isso, vá em Preferências > Exibição de Seleção e Âncora e desmarque a opção Aplique zoom na seleção.

    Extrair diversos ativos simultaneamente

    O painel exportação de ativos permite que você arraste objetos diretamente para o painel e o possa exportar para diversos formatos. Originalmente, quando você selecionava vários objetos, ele considerava como um único ativo, independente dele estar agrupado ou não.

    Com a última atualização é possível arrastar diversos objetos simultaneamente.

    Manter scripts de automação em ações depois de reabrir

    Scripts automatizam determinadas ações, principalmente para múltiplos arquivos. Requerido por usuários o Illustrator, as ações agora são salvas permanentemente dentro do painel de ações. Esse problema era considerado um erro pelos usuários, mas se tratava simplesmente dos programadores que ignoravam essa função.

     

    Com informações do Adobe Blog.

  • Redesign do Snapchat é Recebido de Forma Negativa pelos usuários

    Redesign do Snapchat é Recebido de Forma Negativa pelos usuários

    No final de 2017, o Snapchat apresentou um novo design para sua aplicação. O foco então foi criar uma separação entre a mídia e o social, deixando os amigos, criadores de conteúdo e anunciantes em áreas separadas. As mudanças também retiraram alguns filtros e adicionou alguns comportamentos diferentes na ferramenta, como um mapa para localização de amigos. O novo modelo de Descoberta mostra uma estrutura similar a um feed, que mostra novidades em ordem de interesse, calculado por um algorítmo.

    O caso é que o resultado não foi bem recebido pelos usuários. A AppStore mostrou que as reviews dos usuários em países como Canadá, Reino Unido e Austrália se tornaram extremamente negativas em 83%. Usuários demonstraram descontentamento como a nova interface e conceito aplicado, também em outras mídias sociais. Apenas 17% deram 3 estrelas ou mais.

    Segundo notícias, o Snapchat teria feito as modificações com o objetivo de otimizar seus anúncios. As mudanças no design teriam sido feitas então para tentar incentivar os usuários a postarem no Stories, visto que enquanto houve crescimento no uso do chat, nos posts públicos não houve o mesmo retorno.

    Envio de Stories se mantém iguais nos últimos meses.
    Envio de Snaps privados crescem
    Envio de Snaps privados crescem

    Essas decisões de redesign, segundo usuários, resultaram em dificuldades para encontrar o que eles já achavam mais rapidamente e não obteve sucesso em trazer novos usuários.

    Com notícias do Techcrunch, The Verge e Busines Insider

  • Adobe Portfolio

    Adobe Portfolio

    Portfólio sempre foi um tema complicado. Mesmo o mais perfeito projeto pode ser mal compreendido ou mal visto se não organizado corretamente. Muitos serviços prometem uma organização de portfólio funcional, mas a maioria não funciona como deveria.

    Mesmo os profissionais com conhecimento em programação front-end e web, ou especialistas em web design, possuem dificuldades para organizar projetos tão diferentes entre si em uma mesma página ou conjunto.

    Um dos melhores serviços, porém pouco conhecido, para organização de portfólio é o Adobe Portfolio.

    Behance

    Em 2012, a Adobe adquiriu o Behance por 150 milhões de dólares em dinheiro (ou seja, nada de troca de ações ou acordos posteriores). A ideia da Adobe era vincular a mídia social de portfólios à sua suite Creative Cloud. Com isso a Adobe resolveu vincular o serviço Behance ProSite a todos os clientes de sua plataforma. Em 2016, a Adobe oficializou o nome Adobe Portfolio como uma evolução dessa ferramenta.

    Não é incomum a Adobe comprar softwares e serviços. Seus principais aplicativos como Photoshop, Illustrator, Indesign, Premiere, After Effects e até mesmo a tecnologia aplicada ao Creative Cloud são resultados de compras e evoluções de ferramentas com o passar dos anos.

    Adobe Portfolio

    O Adobe Portfolio é um serviço vinculado ao Adobe Creative Cloud, seja pelo plano de fotografia ou pelo plano completo, que pode ser acessado diretamente pelo painel do Creative Cloud ou através do site https://myportfolio.com.

    O aplicativo web consiste em um conjunto de ferramentas que permite que você faça sua própria página na web, de forma personalizável, a partir de uma série de templates bases. Todos esses templates possuem características básicas, como responsividade, imagens destacadas grandes e opções de criação de páginas.

    Ao escolher o leiaute, caso já possua uma conta no Behance, simplesmente importe os projetos que você já tem cadastrado lá. Caso não tenha, você pode enviar as mídias e detalhes do projeto diretamente pela ferramenta. Agora, se o seu negócio é fotografia, o Adobe Portfolio ainda possui integração com o Lightroom, podendo ser atualizado diretamente pela aplicação mobile ou pela versão 2017, no Desktop. Inclusive, metadados são suportados.

    Uma vez importado seus projetos, você pode adicionar diversas opções, como ícones de mídias sociais, links para páginas externas, adicionar sua identidade visual, modificar cores, editar e adicionar textos, dentre outras opções de design.

    Antes de publicar, você ainda deve configurar as opções do site per si, como título, menus, organizações de dados no geral. Ainda deve especificar o favicon e pode criar um subdomínio myportfolio.com ou usar o seu próprio domínio (porém sem suporte a SSL), seguindo as informações passadas de DNS, em seu registar.

    #Dica: Você pode encontrar o sitemap para utilizar no Google Console através de subdominio.myportfolio.com/sitemap.xml.

    Uma solução rápida e prática

    O Adobe Portfolio é uma solução eficiente que resolve a maioria dos casos. Possui responsividade, integrações simplificadas e muitas opções de personalização. Existem outras ferramentas para portfolios, algumas gratuitas ou vinculadas a templates de CMS, porém nenhuma é realmente tão simplificada. Além disso, a licença Creative Cloud (praticamente obrigatória para quem é designer) já te dá o direito de usar a ferramenta em sua totalidade, sendo, ao menos, uma plataforma a mais para divulgação de trabalho.

  • Review do Pixelmator Pro

    Review do Pixelmator Pro

    Todo mundo que trabalha com design, fotografia ou simplesmente é um entusiasta em edição de fotos, certamento já deve ter ouvido falar do Photoshop. Todavia, há outras boas opções no mercado. Uma das mais recentes e mais fortes é o Pixelmator Pro, versão ainda mais completa do já muito bom Pixelmator, conhecido editor de imagens para Macintosh.

    Interface Gráfica

    O Pixelmator Pro foi criado pensando em profissionais de fotografia e manipulação digital. Por ser exclusivo para Mac e construído em cima da API Metal, toda sua estrutura gráfica segue os padrões usados na plataforma.

    A tela de criação de novo arquivo agora mostra uma série de formatos pré-definidos. O mais interessante é que além de formatos mais conhecidos, como tamanhos de papel e de vídeo, sãos as predefinições de mídias sociais, que apresentam especificações prontas para diversos padrões de imagens para Instagram, Facebook, Twitter e outros.

    A tela ainda permite escolher a profundidade de cor (até 16 bits) e tipos de unidade de medida para especificar o novo documento.

    A interface do Pixelmator Pro apresenta uma formatação muito comum em aplicativos para correção de fotografia, com a maioria das opções e ferramentas apresentadas no lado direito da tela, deixando praticamente todo resto do espaço para a visualização do projeto. Ele segue uma estrutura bem similar ao Pixelmator para iPad. Ainda há algumas opções a mais no topo, como abas (quando necessário) e uma barra de camadas à esquerda, quando houver mais de uma.

    Diferente de seu antecessor, essa versão do Pixelmator agora traz uma uma iconografia monocromática em cinzas, tal como sua tipografia, para não distrair o profissional.

    Pincel e Pintura

    A ferramenta pincel apresenta uma variedade enorme de pontas e compatibilidade com diversas pen-mouses e tablets. Totalmente personalizável, ela simula bem o comportamento de mistura de tintas e também permite importar e exportar pontas.

    Ferramenta Organizar

    Aqui a ferramenta mover / selecionar, equivalente, é nomeada de Organizar. Através dela você consegue modificar propriedades do documento ou de suas camadas, como rotacionar, ampliar, mover, alinhar e outros pontos organizacionais.

    O diferencial aqui está no fato de que o controle é totalmente adaptado para os movimentos do trackpad.

    Recortando um Objeto da Cena

    Talvez um dos mais impressionantes recursos do Pixelmator Pro seja a ferramenta de Seleção Rápida. Ela funciona como uma mescla de Varinha Mágica com Pincel de Seleção, se comparado com o sistema da Adobe. É mostrado primeiro uma pré-visualização e, ao arrastar, o usuário pode definir a área de recorte de forma realmente rápida e simples e, o melhor, com uma qualidade que nos deixa realmente impressionados.

    Uma outra promessa extremamente curiosa da aplicação é que ela promete a nomeação automática de camadas a partir de Machine Learning. Dessa forma, o designer não precisa se preocupar tanto com a nomeação de camadas e será mais simples uma atualização ou manutenção desse documento.

    Ajustes de Fotos

    Muito além dos ajustes de fotos tradicionais, que precisam de painéis e seleções individuais, o Pixelmator Pro apresenta uma área que é muito similar a editores de câmera RAW, inclusive o próprio Lightroom, porém com a vantagem adicional de ser possível salvar predefinições para que sejam utilizadas posteriormente. Ainda possui o modo que garante que a imagem original sempre seja preservada, lembrando muito a nova versão do software para fotografia da Adobe.

    Efeitos e Pseudo Filtros

    A opção de efeitos, que fizeram tanto sucesso no Pixelmator vanilla está de volta na versão Pro, porém mais poderoso, usando a segunda versão da API Metal, da Apple. Graças ao Metal, o uso otimizado da GPU permite que efeitos sejam aplicados e visualizados em tempo real, mesmo em imagens mais pesadas. Nos testes usamos um MacBook Pro de entrada, Mid 2012, sem GPU dedicada, e tivemos um resultado surpreendentemente bom mesmo com imagens de alta resolução.

    O Pixelmator Pro traz efeitos já conhecidos de distorção, desfoque, mosaico, nitidez, dentre outros, e mais alguns que são exclusivos da plataforma, como o divertidíssimo efeito Caleidoscópio. Cada efeito tem suas particularidades e pode ser editados a partir de alças que são visualizados por cima da imagem.

    Vetores

    Em sua versão comum, é apresentado um conjunto de ferramentas vetorais com estilos e predefinições intitulado de Vectomator. Além de disponibilizar uma série de ícones e vetores prontos (a maioria precisa ser baixado), você ainda pode desenhar vetores simples de uma forma muito similar ao Illustrator. Infelizmente, sua exportação fica restrita a imagens matriciais, não sendo funcional para criação, por exemplo, de identidades visuais.

    Tipografia

    A tipografia talvez seja o ponto mais fraco da ferramenta. Apesar do excelente acabamento tipográfico do MacOSX, as funcionalidades entregadas pelo Pixelmator Pro são muito limitadas. Apesar de haver opções interessantes, o aplicativo não entrega tudo o que poderia, obrigando o usuário a ter que converter o texto para forma ou pixel para que possa usar opções comuns, como sombra projetada.

    Uma Verdadeira Opção ao Photoshop

    Ninguém duvida que o Photoshop é uma aplicação extremamente robusta e completa. Todavia, está anos parado no tempo no quesito usabilidade e interface gráfica. Muitos filtros do Photoshop ainda não usam bem a GPU e não possui resposta em tempo real na maioria de seus filtros e efeitos. Já o Pixelmator, talvez por ser uma empresa jovem, ou por ser exclusivo para MacOSX  pode, assim, usar em totalidade API da Maçã. O resultado é mais poder de processamento gráfico para gerar resultados impressionantes.

    Sendo uma opção muito boa, o Pixelmator Pro é ideal para retoques de fotos, composições e criação de anúncios para mídias sociais, web, ícones e diversos assets para projetos gráficos. Porém pode ser extremamente bem usado também para material impresso.

    Com o preço único de 59,90 dólares (aproximadamente 200 reais), o Pixelmator Pro, se seguir o método de sua versão anterior, vai receber ainda diversas atualizações e se tornará talvez a melhor opção para edição de fotos para usuários MacOSX.

    E você? Já conhecia o Pixelmator? Já tem opinião sobre esse aplicativo? Deixe seu comentário.

  • Efeito Neon com CSS 3, SVG e um tiquinho de Javascript (Texto e Imagem)

    Efeito Neon com CSS 3, SVG e um tiquinho de Javascript (Texto e Imagem)

    O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?

    ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.

    Adicionando a Logo SVG

    Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.

    Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.

    No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.

    Opção de Exportar para Telas, no Adobe Illustrator CC
    Opção de Exportar para Telas, no Adobe Illustrator CC

    O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.

    Montando o HTML

    Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:

    <div class="area_neon">
    	<center>
    		<h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1>
    	</center>
    </div>

    Apenas isso.

    Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.

    Ficando algo similar a:

    <div class="area_neon">
    	<center>
    		<svg class="neon_img" id="img_neon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.06 238.87"><path d="M189.39,53.25c9.32,0,16.87,7.85,16.87,17.54s-7.55,17.54-16.87,17.54-16.86-7.85-16.86-17.54,7.55-17.54,16.86-17.54m7.9,20.35a4.71,4.71,0,1,0-4.53-4.71,4.62,4.62,0,0,0,4.53,4.71m-7.9-26.35c-12.6,0-22.86,10.56-22.86,23.54s10.26,23.54,22.86,23.54,22.87-10.56,22.87-23.54S202,47.25,189.39,47.25Z"/><path d="M127,11.43c1.35,0,2.77,0,4.26,0,35.29.62,54.9,18.2,66,28.77,13.49,12.84,20.56,33,20.59,48.14,0,10.68-42.82,16-64.66,17.32-3.78.23-6.93.35-9.12.35-.59,0-1.1,0-1.55,0h-.41c-2.07,0-8.64.48-10.44,6.46-.32,1-1.23,6.3,2.46,6.3,1.3,0,3.17-.65,5.85-2.37a4.89,4.89,0,0,1,2.68-.89c4.62,0,6.69,8.54,5.11,9.14a2,2,0,0,1-.66.14c-1.25,0-1.54-1.8-1.56-4.17,0-1.4-1.78-2.23-3.59-2.23s-3.53.77-3.87,2.52c7.15,4.17,4.93,14.15,3.6,16.46-.3.53-.65.74-1,.74-1.14,0-2.18-2.4-1.19-3.17,1.29-1,3.47-3.36,2.28-6.13-1.09-2.52-2.4-3.86-4-3.86s-3.46,1.36-5.63,4.24c-1.56,2.05-2.59,2.81-3.86,2.81-2.26,0-5.25-2.45-13.19-4.32a20.2,20.2,0,0,0-4.66-.49,39.34,39.34,0,0,0-10.77,1.7c-19.4,5.66-43.45,25.47-33,59.46,5,16.33,16.27,22.2,27.42,22.2s22.05-5.79,26.72-12.88a15.84,15.84,0,0,0,1.65-3.22,31.73,31.73,0,0,0,1-3.51c1.78-7.59-.07-13.52-2.9-17.44-2.35-3.28-5.38-5.16-7.54-5.44,3.93,4.38-1.27,18.71-9.88,18.71a8.68,8.68,0,0,1-1-.06c-14-1.8-17-17.39-8.69-26.5a19.81,19.81,0,0,1,15-6.62,26.8,26.8,0,0,1,9.65,1.91,30.65,30.65,0,0,1,4.2,2c.41.24.8.49,1.19.76,11.21,7.84,13.5,30.64,3.89,47.88-6.57,11.8-18.72,21-37.41,21a63.65,63.65,0,0,1-7.51-.46c-1.1-.14-2.22-.3-3.36-.5-.51-.08-1-.16-1.55-.26A74.23,74.23,0,0,1,31.3,196.3C18.35,178.52,12.6,155,17.19,130.83,25.76,85.85,50.4,61,72.53,46.29a201.71,201.71,0,0,1,28.21-15.2c3.29-1.51-2.65-9.48-1.51-12.25,1.41-3.43,3.85-7.41,27.8-7.41m60.5,81.15c11.57,0,20.95-9.75,20.95-21.79S199.1,49,187.53,49s-20.95,9.75-20.95,21.79S176,92.58,187.53,92.58M127,5.43c-24.18,0-30.38,3.91-33.35,11.12-1.39,3.39-.07,6.87,1.1,10l.24.63A195.09,195.09,0,0,0,69.21,41.29C38,62,18.54,91.71,11.3,129.71c-4.73,24.85.79,50.41,15.15,70.13a80.46,80.46,0,0,0,50.06,32l1.27.22.4.07c1.32.22,2.51.4,3.64.53a68.58,68.58,0,0,0,8.23.51c18.86,0,34-8.54,42.66-24.06,11-19.83,8.39-45.86-5.7-55.71-.58-.41-1.12-.75-1.64-1.05a38.22,38.22,0,0,0-5-2.4,32.54,32.54,0,0,0-11.84-2.32,25.73,25.73,0,0,0-19.44,8.57,23.09,23.09,0,0,0-4.88,23.24c2.7,7.36,9,12.2,17.22,13.26a13.29,13.29,0,0,0,1.78.11c6,0,11.55-4,14.77-10.52a17.89,17.89,0,0,1-.29,7.33,24.29,24.29,0,0,1-.84,2.83,9.16,9.16,0,0,1-1,2c-3.25,4.94-12,10.18-21.71,10.18-7.38,0-17.13-3.12-21.69-18-3.56-11.62-2.91-22.08,1.94-31.08,5.2-9.64,15.3-17.44,27-20.86a33.17,33.17,0,0,1,9.09-1.46,14.3,14.3,0,0,1,3.28.33,47.43,47.43,0,0,1,8.41,2.82,15.44,15.44,0,0,0,6.16,1.66,8.84,8.84,0,0,0,4.83-1.44,8.36,8.36,0,0,0,.44,2.05,7.74,7.74,0,0,0,7.12,5.5,7.18,7.18,0,0,0,6.19-3.74,20.89,20.89,0,0,0,2.22-9.85,7.92,7.92,0,0,0,.78-.26c2.66-1,5.16-4,4.18-9.35a15.67,15.67,0,0,0-4.95-9c1.37,0,2.86-.13,4.43-.23,5.4-.33,24.35-1.68,41.4-5.27,13.47-2.84,28.92-7.45,28.9-18,0-15.51-7-37.75-22.46-52.48-10.14-9.65-31.24-29.74-70-30.42-1.5,0-3,0-4.36,0Zm60.5,81.15c-8.24,0-14.95-7.08-14.95-15.79S179.29,55,187.53,55s14.95,7.08,14.95,15.79-6.71,15.79-14.95,15.79Z"/></svg>
    		<h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1>
    	</center>
    </div>

    Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.

    Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.

    <link href="https://fonts.googleapis.com/css?family=Nunito:400" rel="stylesheet">

    Trabalhando com o CSS

    Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.

    Leia os comentários no código para entender o seu funcionamento.

    <style>
    		/*
    		Configuração do container
    		onde ficará os Neons
    		*/
    		.area_neon{
    			background-color: #0F0F0F;
    			font-family: 'Nunito', sans-serif;
    			
    			left: 0;
    			right: 0;
    			bottom: 0;
    			top: 0;
    			padding: 20px;
    			padding-top: 40px;
    			position: absolute;
    		}
    		
    		/*
    		Base do Neon apagado (TEXTO).
    		Iremos simular um efeito as lâmpadas
    		de neon apagadas.
    		*/
    		.area_neon h1.neon{
    			font-weight: 400;
    			font-size: 7em;
    			
    			/**
    			O filtro BLUR deve ser mantido em 0, porque 
    			iremos usa-lo quando ligado.
    			Para a animação de transição funcionar
    			corretamente, ele precisa ser declarado
    			mesmo desligado.
    			**/
    			filter: blur(0);
    			
    			/**
    			Para simular a lâmpada, colocaremos um
    			contorno bem suave, para delimitar o
    			objeto, porém com o fundo
    			quase transparente
    			**/
    			-webkit-text-stroke: 1px rgba(255,255,255,0.1);
    			color: rgba(255,255,255,0.1);
    			
    			/**
    			O TextShadow e o BackgroundClip
    			irá servir para colocar um efeito de 
    			profundidade no objeto
    			**/
    			text-shadow: -5px 5px 5px black;
      			-webkit-background-clip: text;
    			
    			/**
    			O Transition é responsável por
    			adicionar uma sensação de animação
    			entre os eventos.
    			**/
    			transition: all ease 1s;
    		}
    		
    		/**Texto com o Neon Ligado**/
    		.area_neon h1.neon.on{
    			/**
    			Será fundametal o desfoque para dar
    			a sensação de luminosidade.
    			**/
    			filter: blur(1px);
    			
    			/**
    			Um objeto com luz precisa possuir seu 
    			centro branco, caso contrário, vai dar
    			a sensação de que está apenas com um
    			sombreamento e não com luz.
    			
    			Por isso, devemos manter a cor branca,
    			que vai representar o centro luminoso,
    			e a borda da cor que desejamos usar.
    			
    			O TextShadow será a luminosidade do
    			ambiente vinda da luz do Neon.
    			
    			O contorno e a sombra deverão ser
    			da cor que você escolher para o neon,
    			mas a cor do texto deverá ser sempre
    			branca.
    			**/
    			color: white;
    			-webkit-text-stroke: 1px #00FFB3;
    			text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB;
    			-webkit-background-clip: none;
    		}
    		
    		/**
    		O neon para a imagem SVG terá que ser
    		um pouco diferente, mas podemos
    		manter a mesma lógica.
    		**/
    		.area_neon svg.neon_img{
    			width: 50%;
    			margin: 0 auto;
    			
    			/**
    			Ao invés de usarmos color, usaremos 
    			o parâmetro FILL para poder determinar a cor
    			do objeto e o STROKE para a borda.
    			
    			Porém usaremos as mesmas lógicas
    			usadas no Texto
    			**/
    			fill: rgba(255,255,255,0.1);
    			stroke: rgba(255,255,255,0.1);
    			
    			filter: blur(0) drop-shadow(-5px 5px 5px black);
     			/**
    			Usaremos o drop-shadow aplicado no filter,
    			para poder ter o efeito similar ao do texto.
    			**/
    			
    			transition: all ease 1s;
    		}
    		/**SVG com o neon Ligado**/
    		.area_neon svg.neon_img.on{
    			/**
    			Aqui aplicamos a mesma lógica usada
    			no texto, porém adaptada para o tipo de objeto.
    			**/
    			fill: white;
    			stroke: #F0FF00;
    			filter: blur(1px) drop-shadow(0 0 10px #F0FF00)  drop-shadow(0 0 200px #F0FF00) ;
    		}
    	</style>

    Ligando o Neon

    Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.

    Para isso vamos criar a função turnOn():

    <script>
    function turnOn(){
    	var texto = document.getElementById("texto_neon");
    	texto.className = texto.className.concat(" on");
    
    	var imagem = document.getElementById("img_neon");
    	imagem.setAttribute("class", imagem.getAttribute("class").concat(" on"));
    	//Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum
    }
    </script>

    Agora vamos testar?

    Clique aqui para ver em uma nova aba

    Você pode pegar o Código Completo deste tutorial diretamente no GitHub.

    Download

    Todavia, também podemos ter outros efeitos interessantes seguindo essa mesma lógica.

    Feliz ano novo com Contagem Regressiva


    Clique aqui para ver em uma nova aba

    Sabre Jedi (liga/desliga) com Som


    Clique aqui para ver em uma nova aba

    Lembrando que todos os códigos demonstrados aqui podem ser baixados pelo GitHub.


    Star

    Deixe seu comentário e compartilhe este post. Curta a página do VelhoBit no Facebook! e entre para o grupo Design e Desenvolvimento.

  • Emojis 🤔. O Que São Realmente? Qualquer um Pode Fazer?

    Emojis 🤔. O Que São Realmente? Qualquer um Pode Fazer?

    ➡ Emojis estão alta na comunicação social e hoje são peças-chave em diversas mídias, sendo aplicadas mais e mais como uma espécie de linguagem universal. Mas afinal, de onde vieram os emojis e qual a diferença deles em relação aos antigos emoticons?

    Para entender mais sobre os emojis e sua história, primeiro precisamos entender sobre charsets e como o sistema operacional compreende e padroniza as informações referentes ao texto.

    Do Bit à Organização

    No princípio era o bit, o bom e Velho Bit 😉. O caractere era traduzido diretamente de um conjunto de 1 byte e impresso no dispositivo de saída de acordo com as variações desse byte. Óbvio que falar que a letra A era equivalente a um conjunto de 1 e 0, logo se tornou ultrapassado e foi necessário codificar isso de forma mais inteligente. Com a popularização cada vez maior dos mainframes, os conjuntos de caracteres precisaram seguir padrões mais organizados e específicos para universalizar a escrita computacional. Foi nesse momento que foi criado o padrão hexadecimal para especificação de caracteres.

    A programação hexadecimal, no início da era da computação, era muito usada para simplificar a compreensão de códigos. Posteriormente, com linguagens de programação, como o COBOL, a forma de escrita foi simplificada justamente a partir dos caracteres hexadecimais.

    Obs. Para quem não está acostumado com o termo hexadecimal, se trata de um sistema numérico com base em 16 digitos. Diferente do sistema decimal mais comum, que vai de 0 a 9, o sistema hexadecimal passa pelos digitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Através desse sistema, é possível criar uma variação maior e mais adequada de numerais, o que auxilia na definição de elementos, como neste caso, caracteres.

    Porém, outros sistemas também foram usados para padronização de caracteres, como o próprio sistema decimal e o sistema octal. A partir dessa interpretação, foi criado nos anos 60 o primeiro documento oficial de padronização desses elementos, através de sistemas básicos, o ASCII (American Standard Code for Information Interchange).

    Table ASCII
    Table ASCII

    O ASCII consiste em um padronização e é conhecido como o sistema básico de codificação de caracteres. Como a computação moderna nasceu nos EUA, é de se esperar que o padrão ASCII cobriria muitos caracteres usados em seu idioma. Por isso, era necessário que essa padronização fosse regulamentada a partir de uma entidade mais internacionalizada. Por se tratar de glifos, algo que já era padronizado em máquinas de escrever e prensas tipográficas, nada mais natural que a responsável por essa padronização fosse a ISO (Organização Internacional de Normalização), que é composta por vários países. De pleno acordo, foi criado o padrão ISO 646, formalizado como o padrão US-ASCII, por usar uma base de caracteres ocidentais norte-americanos.

    A partir daí o ISO formalizou diversas outras tabelas de codificação de caracteres, gerando uma enorme variação adaptada para cada região ou base de caracteres, havendo variações latinas, saxônicas e orientais. Como muitos países possuem idiossincrasias em seus caracteres, a quantidade desses padrões foram crescendo e gerando uma dificuldade de controle, resultando quase em uma despadronização. Se você é programador, provavelmente já deve ter tido muitos problemas com a Windows 1252, que é uma vertente da normalização ISO 8859-1 e já deve ter tido que converter alguns arquivos por problemas de caracteres, seja no banco de dados ou na interpretação da leitura de arquivos.

    O Consórcio Unicode

    Visto que o ISO não era padronizado exatamente por uma organização da área de tecnologia, algumas questões acerca de caracteres ficaram insolúveis ou eram demasiadas burocráticas para fazer determinadas atualizações. Por isso, diversas empresas de tecnologia se juntaram para organizar um consórcio mais específico e organizado para uma diversidade maior de caracteres, em padrões adequados para a computação.

    O Unicode (Universal Code) foi criado para organizar caracteres do ponto de vista mais computacional e adequado, baseado em experiencias anteriores da Xerox (sim, saíram muito mais coisas de lá do que apenas a interface gráfica). Fazem parte do Unicode empresas como a Adobe Systems, Apple, Facebook, Google, Huawei, IBM, Microsoft, Oracle Corporation, Yahoo! e várias outras que entram e aparecem, ou simplesmente seguem essas regras. Essa universalização foi fundamental para a criação de padrões que são altamente usados por praticamente todas as empresas no mercado de tecnologia. Sem dúvida, se você é programador ou designer, já deve ter usado constante, ou buscado por ele, o padrão UTF-8.

    UTF-8 significa Unicode Transformation Format de 8 bits. É um padrão que, além de dar muito espaço para criação de caracteres, também é totalmente compatível com o padrão ASCII, tornando tudo mais simples e descomplicado para codificação adequada de caracteres. Existem outras codificações UTF, mas, por regra, o último numeral representa a quantidade de bits da codificação e, claro, quanto mais bits, mais espaço para adição de novos caracteres.

    Unicode Logo

    A Comunicação Social

    Se por um lado haviam engenheiros desenvolvendo melhores formas de entrada e saída de caracteres, por outro a internet trouxe uma nova forma de se comunicar. Graças a velocidade com que as conexões foram ficando mais ágeis, diminuindo a distância entre os países, sistemas de chat foram ficando cada vez mais populares. Do antigo BBS ao mIRC, mais pessoas digitavam e buscavam formas mais simples e rápidas de demonstrar intenções e rostos a partir de padrões visuais. Foi daí que surgiram os famosos emoticons.

    Emoticons (emotion icon) foi o termo dado a pequenas figurinhas que podia-se fazer a partir de representação com caracteres. Quem nunca usou o famoso 🙂, para representar felicidade, ou 😉, para mandar uma piscadela charmosa? Isso acontece porque nosso cérebro é perfeito para reconhecer padrões e podemos criar assimilações de diversas expressões ou situações.

    Logo, o emoticon se tornou algo popular, por se tratar de uma forma moderna e mais expressiva de comunicação. Se tornaram cada vez mais detalhadas e com mais caracteres e, muitas vezes, com caracteres pouco conhecidos, como ( ͡° ͜ʖ ͡°)¯\_(ツ)_/¯(╬ ಠ益ಠ) e até alguns que exigiam mais de uma linha e espaços de caracteres iguais.

    Visto essa popularização, programas como MSN Messenger (mais tarde renomeado para Live Messenger), ICQ, Chat da UOL, dentre outros, começaram a introduzir ícones mais complexos que representassem essas expressões. Emoticons ganharam um status mais visual e reconhecível na comunicação e obtiveram o apelido de smiles, termo importado a partir do famoso símbolo Smiley, criado pelo artista gráfico Harvey Ball, e seguindo a mesma lógica estética.

    Agora mais complexos, em PNG, coloridos e até animados, os emoticons se tornaram elementos obrigatórios na comunicação em programas de chats modernos.

    Emoticons do Live Messenger - smileys
    Emoticons do Live Messenger – smileys

    E, Finalmente, os Emojis

    Uma vez que os emoticons fizeram muito sucesso em chats e se tornaram uma forma padrão de comunicação na internet, as empresas que correspondem ao consórcio Unicode resolveram organizar para que os emoticons fizessem parte também de suas codificações de caracteres, a fim de que as pessoas pudessem receber emoticons padronizados e que as expressões fossem mais próximas possíveis uma das outras, para facilitar o entendimento. Daí surgiram os emojis.

    Emoji é um termo japonês para pictograma, que ao pé da letra seria uma junção de imagem e letra e fora criado em 1999 por Shigetaka Kurita para uma plataforma móvel de internet. Em 2009, vendo a necessidade de melhorar a integração com seus dispositivos móveis, a Apple e a Google fizeram uma requisição ao consórcio para inclusão dos emojis dentro dos sistemas Unicode. A versão 6.0 do padrão Unicode, em 2010 trouxe ao mundo a integração com os emojis.

    Com a popularidade do emoji pela adoção das frabricantes, a versão 7.0 do Unicode trouxe um pacote com 250 glifos inspirados em tipografias como Webdings e Wingdings. Até a finalização deste post, o Unicode Emoji estava em sua versão 11.0 (beta) com uma lista “xigante” de emojis vinculados ao UTF.

    Dessa forma, é importante deixar claro que a inclusão de um novo emoji depende do requerimento de uma fabricante a aprovação de todo consórcio. Dessa forma, é criada uma padronização na visualização desses emojis. Todavia, ainda fica pendente a implementação desse emoji no sistema operacional usado pela fabricante e na atualização desse sistema. Por isso acontece de às vezes emojis enviados pelo iOS não serem visíveis em um Android, ou vice-versa, principalmente pelo problema de fragmentação deste último.

    😚🤩🤯🤬💩🦔🦉👩‍💻🧛‍♀️🧜‍♀️🧝‍♀️🙏

    A Aparência dos Emojis

    Apesar do acordo dos emojis especificar por escrito quais emojis podem ser aplicados, cabem as fabricantes disponibilizarem a aparência estética desses emojis. Ou seja, cada Sistema Operacional, ou determinados dispositivos e aplicativos, possuirão seus estilos de emoji, adequando-se ao design de sua aplicação. Isso as vezes causa problemas de interpretação, pois alguns emojis são extremamente diferentes entre fabricantes, como no caso do emoji do ET 👽 e do Robô 🤖.

    Exemplos de variação de emojis do mesmo tipo
    Exemplos de variação de emojis do mesmo tipo

    Fazendo parte também do consórcio, mais recentemente a Adobe resolveu incorporar uma nova estrutura de font para a utilização de emojis personalizados. As fonts SVG foram especificadas por outro consórcio muito conhecido, a W3C, onde especificou o uso de SVG à estrutura de fonts vetoriais. Apesar de não ter sido muito adotada para web, e já estar sendo quase abandonada, a Adobe viu nessa estrutura a chance de lançar famílias tipográficas inteiras baseadas em emojis, que é o caso do EmojiOne. Porém existem também diversos serviços e bibliotecas que substituem os glifos específicos por um padrão personalizado de emoji, no caso para quem pretende usar algo mais personalizado para sistemas web.

    A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.
    A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.

    Concluindo

    Os emojis são o resultado de uma evolução natural da comunicação online. Elas são formas de demonstrar emoções e ideias com apenas um caractere e da forma mais universal possível. Não se trata simplesmente de uma terra sem lei, pois todos pertencem a um consórcio específico da área de tecnologia e as empresas devem seguir esses padrões para o funcionamento correto em navegadores e sistemas operacionais.

    De código aberto, qualquer um pode acessar o site do Emoji Unicode e verificar suas tabelas e documentações para criar e implementar as próprias imagens ou comportamentos em seus sistemas.

    Se você gostou deste post, compartilhe e, se quiser, deixe seu comentário. 😘

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