Categoria: Design

Postagens, notícias e tutoriais sobre design de interação, design gráfico e web design.

Como centralizar verticalmente elementos HTML com CSS

Uma das coisas mais comuns, mas ao mesmo tempo mais chatas de se fazer no CSS é alinhar verticalmente elementos em tela. Existem várias formas de fazer isso. Neste post, vou elencar as minhas formas favoritas de fazer isso.

Alinhamento com Flexbox

Flex é uma propriedade incrível do CSS que permite organizar elementos. Se outrora tínhamos que fazer inúmeras gambiarras com float, o flex nos permite controlar o comportamentos dos filhos de um container. Para centralizar verticalmente um objeto, podemos usar a direção de coluna, em seu container pai.

Alinhamento com position

Com um pouco de matemática, conseguimos fazer um alinhamento vertical com o position absolute. Porém, é importante lembrar que o objeto será flutuante e que seu pai, necessariamente, precisa ser um position relative. O problema de usar esse tipo de alinhamento é que o conteúdo da posição precisa ser fixo. Felizmente, hoje, conseguimos fazer cálculos com variáveis de CSS, o que facilita a forma de implementarmos essa técnica. A vantagem dessa técnica é poder usar, justamente, em ambientes flutuantes que se sobreponham. Porém, caso você não precise que ele se alinhe ao pai, mas à viewport, você pode usar também o position como fixed.

Alinhamento com Grid

Outra forma moderna de alinhar verticalmente é através do uso de grids. A vantagem de usar grids é que o tamanho do conteúdo do elemento alinhado corresponderá ao tamanho da grid que se deseja utilizar. Ou seja, é adaptável de acordo com a viewport, e não referente ao seu conteúdo. Para isso, basta definirmos a quantidade de colunas e linhas que desejamos e estabelecemos onde o objeto alinhado vai iniciar e terminar.

Exemplo de uso (Modal Alinhado ao Centro)

Para mostrar como pode ser usado os alinhamentos, que tal criarmos um simples modal alinhado ao centro da tela?

Um modal é composto por uma cortina que reveste o conteúdo original, seguido de um painel com alguma informação dentro. É convenção de que os modals carreguem essas informações no centro da tela, afim de que a informação fique direcionada e encapsulada, levando, assim, o usuário à uma atenção maior àquela informação. Ou seja, isolar e destacar. O exemplo abaixo foi feito usando a primeira estratégia de alinhamento vertical aqui apresentada, pois, desta forma, o tamanho do modal que vai ser a referência para a centralização. Alguns efeitos foram adicionados para ilustrar melhor.

2 de junho de 2021
Tendência: Pantone define Illuminating e Ultimate Grey como cores do ano de 2021

Todo ano a Pantone, maior empresa do mundo no ramo de sistemas de cores, elege as cores que serão usadas para representar o ano seguinte.

A ideia da empresa é, principalmente, criar um catálogo a fim de representar as tendências para o ano seguinte. Catálogo este criado pela The Pantone Color Institute, que busca utilizar de padrões e tons que são significativamente mais globais e genéricos em termos culturais, sobre o que se esperar do ano seguinte.

No ano de 2019, definiu-se que a cor que movimentaria o ano de 2020 foi o Classic Blue (19-4052):

As Cores de 2021: Otimismo e Força

Diante da maior crise sanitária da era moderna, a Pantone sugere que as cores de 2021 deverão representar o casamento entre otimismo e força, e escolheu como suas representantes as cores PANTONE 13-0647 Illuminating (similar ao amarelo canário) e o PANTONE 17-5104 Ultimate Gray (similar ao cinza elefante).

“Ao combinar PANTONE 17-5104 Ultimate Grey e PANTONE 13-0647 Illuminating para ser nossa cor Pantone do ano em 2021, destacamos como dois elementos diferentes se unem para expressar uma mensagem de força e esperança, que é ao mesmo tempo duradoura e edificante, transmitindo a ideia de que não se trata de uma cor ou de uma pessoa, é sobre vários”. — disse Laurie Pressman, vice presidente da Pantone Color Institute. — “Elas comunicam uma compreensão mais profunda da importância dos relacionamentos e da necessidade que temos uns dos outros. A união dessas duas cores diferentes mostra a força e o otimismo que resultam da junção de diferentes ingredientes”.

É importante salientar que Pantone é uma empresa privada e seus sistemas são proprietários, então você não deverá encontrar atualizações em paletas automatizadas em aplicativos como GIMP e Inkscape, mas nada impede que você crie suas próprias paletas manualmente, replicando as cores, ou até encontre algumas na internet feitas por terceiros.

Todavia, as cores e assets já estão disponíveis em serviços como o Adobe Stock e Freepik Premium:

Algumas variações de paletas usando as cores Pantone 2021 já estão disponíveis publicamente no Adobe Color. Dessa forma, já é possível usar as cores em novos projetos através da Creative Cloud, no Adobe XD, Illustrator, Photoshop e InDesign, além de plataformas para projetos de mídias sociais e vídeos, nos dispositivos móveis.

Brasil

No Brasil, através do Twitter, algumas pessoas tem manifestado reações sobre a decisão da Pantone.

Essa é a verdadeira pantone do Brasil #Pantone2021 pic.twitter.com/owm3DuiXb3
— Greengo Dictionary 🦜 (@greengodict) December 10, 2020

https://twitter.com/priguicil4/status/1337088108756602880

@metrosp_oficial @Via_Quatro Linha 4 amarela: esse é seu momento #Pantone2021 #Pantone pic.twitter.com/uEbtjOiNj4
— Millenial Esgotado 🇷🇺🇵🇸 (@mazierismo) December 11, 2020

As Cores do Ano 2021 da Pantone. pic.twitter.com/4ygKcuohvV
— Gil Marcel (@gilmarcel) December 10, 2020

https://twitter.com/threuytt/status/1336866930330906625

Com informações do da Adobe, Dezeen, Freepik e Pantone.

11 de dezembro de 2020
Sistemas de Design: Padronização de Sistemas
Design é projeto. E, como todo projeto, ele deve ser documentado, possuindo descrições, informações de uso e instruções em geral. É exatamente isso que são Sistemas de Design.

Sistemas de Design são documentações, online ou físicas, que descrevem a padronização e uso de elementos de um projeto, com o objetivo de que ele possa ser usado em diferentes aplicações, mantendo uma identidade compartilhada. Essa identidade pode ser referenciada a um projeto, linha, segmento ou empresa. São usados elementos como formas, grades, tipografia, assets, iconografia, recomendações de uso, dentre outros. Algo muito semelhante ao que o design gráfico já está acostumado ao criar um Manual de Identidade Visual.

Um exemplo comum, do dia a dia dos usuários de computador, é o Microsoft Office. Trata-se de um conjunto de aplicativos que, por serem da mesma linha, precisam seguir a mesma identidade. Para que os desenvolvedores possam trabalhar com esse padrão, um sistema de design certamente foi desenvolvido para que a equipe de desenvolvimento possa trabalhar de forma coerente.

O Sistema de Design garante ao usuário uma fluidez no uso das aplicações e reconhecimento das propriedades do software. Facilitando, dessa forma, não só a identificação, como ajudando o usuário a pressupor determinados recursos ou localizações de ferramentas.

Assista o vídeo para complementar a leitura

Experiência Compartilhada

Grandes empresas de tecnologia desenvolvem seus próprios sistemas de design para que desenvolvedores terceiros possa criar experiências mais coesas e confortáveis para o usuário. Seguir esses sistemas pode ser requerimento ou uma simples recomendação, dependendo da loja e sistema operacional que precisar aprovar.

Aplicativos, mobile e desktop, são os mais comuns a receberem influencias direta dos sistemas de design de sistemas operacionais que, recomenda-se, devem ser mesclados aos sistemas da própria empresa. Para esses casos temos como exemplo:
Como dito anteriormente, seguir um sistema de design de sistema operacional é fundamental para manter uma experiência fluida para o usuário. Por isso que, por exemplo, é possível sentir diferenças entre uma mesma aplicação desenvolvida para Windows, Android e dispositivos Apple, porque cada desenvolvedora, apesar de manter sua própria identidade, adapta-se para o ambiente em que o usuário estará.

O Whatsapp adapta quase que completamente sua UI de acordo com o sistema de design de cada Sistema Operacional

Visual Studio no Windows 10 vs Visual Studio no MacOSX

Não necessariamente o designer ou desenvolvedor são obrigados a seguir um determinado sistema de design de terceiros. Às vezes, a melhor opção é justamente criar o seu próprio sistema ou criar uma barreira para ter uma identidade única para sua aplicação.

Algumas empresas, como a Google, estimulam para que os designers utilizem seus sistemas também em sites ou aplicativos web. Para isso, dão descrições específicas de usabilidade e ferramentas que possam agilizar o desenvolvimento dessas aplicações.

Frameworks e Bibliotecas

Para facilitar o desenvolvimento, muitas empresas oferecem frameworks e bibliotecas, tanto web quanto para desktop e mobile, afim de estimular o desenvolvedor a seguir aquele determinado padrão.

É interessante para as grandes desenvolvedoras que outras empresas sigam seus padrões de design, pois, dessa forma, ditam tendências e criam assimilações dos usuários com suas próprias plataformas, principalmente quando essas outras empresas utilizam ferramentas e APIs das grandes.

A exemplo de frameworks e bibliotecas temos:
Porém, nem sempre essas opções suprem a demanda, pois não são compatíveis com outras bibliotecas e tecnologias. Por isso, muitos grupos de desenvolvedores trabalham para criar frameworks e bibliotecas abertas que seguem os padrões estipulados pelos sistemas de design. Como por exemplo:
- React UWP (Fluent Design)
- Materialize (Material Design)
- Material UI (Material Design)
- Ratchet (Apple Guideliness iOS)
- Semantic UI (Inspirado na Apple e Material Design)
Utilizar Sistemas de Design, além de facilitar o processo de desenvolvimento, ajuda a manter o usuário mais confortável no ambiente em que ele está acostumado. Criar ou adaptar o seu próprio sistema também ajuda a criar uma identidade única para seu conjunto de aplicativos e serviços.

Que outros sistemas de design e frameworks vocês podem recomendar? Deixem nos comentários.
22 de dezembro de 2019

Como criar um uploader drag & drop, AJAX com porcentagem e Javascript puro?

Eu sei, o título é grande, mas trata-se de uma tecnologia muito útil quanto a usabilidade. A ideia é criar, da forma mais simples possível um uploader que mostre a porcentagem do que está sendo enviado, com múltiplos arquivos. Porém, não apenas isso, mas da forma mais pura possível, sem a necessidade de frameworks, bibliotecas de terceiros ou pre-processadores. Em nosso tutorial, usaremos PHP no back-end, mas você pode usar a linguagem que melhor lhe adequar. Abaixo você pode testar um exemplo:

Clique ou arraste o arquivo

DISCLAIMER: Para preservar você, o blog e a mim, o upload.php do exemplo não está fazendo upload de verdade, então você não vai ter acesso ao arquivo no final, porém, no link do github está o código funcional.

Download

HTML

Antes de prosseguir, vou alertar que estou usando o font-awesome no exemplo, apenas para não ter que fazer nenhum upload de imagens por hora, mas ele não é obrigado para o que vamos fazer.

Iniciaremos com um HTML bem simples. Vamos definir apenas a área de upload, da lista e uma área onde ficará o input. Esse input deve ser do tipo file e deve estar com o atributo mutiple definido. Nada muito especial por enquanto, pois nosso trunfo está mais no CSS e Javascript.

<div class="area-upload">
			<label for="upload-file" class="label-upload">
				<i class="fas fa-cloud-upload-alt"></i>
				<div class="texto">Clique ou arraste o arquivo</div>
			</label>
			<input type="file" accept="image/jpg,image/png" id="upload-file" multiple/>
			
			<div class="lista-uploads">
			</div>
		</div>

CSS3

O CSS que usaremos tem pontos específicos aos quais devemos prestar atenção. Por isso, vamos ver por trechos:

.area-upload{
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	margin: 20px auto;
	padding: 20px;
	box-sizing: border-box;
	
	width: 100%;
	max-width: 700px;
	position: relative;
}

.area-upload label.label-upload{
	border: 2px dashed #0d8acd;
	min-height: 200px;
	text-align: center;
	width: 100%;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #0d8acd;
	position: relative;
	
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
}

.area-upload label.label-upload.highlight{
	background-color: #fffdaa;
}

.area-upload label.label-upload *{
	pointer-events: none;
}

A área de upload é definida pelo CSS a partir de um espaço abrangente. O label, vai ser a referência que vamos usar para atingir toda a área pré-determinada e é o que vai também receber o estilo que indicará onde e quando pode soltar o objeto. Dessa forma, deve estar com um position: absolute, pegando toda a área do upload. Um detalhe importante é que esse label não pode possuir filhos com eventos do mouse, pois isso pode acarretar em funcionamento inadequado ao fazer um hover em uma área não indicada.

A área marcada como hightlight é justamente para demonstrar ao usuário que ele já pode soltar o arquivo.

.area-upload input{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	-webkit-appearance: none;
	opacity: 0;
}

O input vai nos servir de área de drop. Isso já é um padrão tanto para Windows, MacOS e Linux – de receber um (ou mais arquivos) arrastando os dados para o botão. Retirando a aparência padrão, podemos nos aproveitar dessa função e economizar várias linhas de código do Javascript. Não havendo a necessidade de configurarmos eventos de arquivos.

.area-upload .lista-uploads .barra{
	background-color: #e6e6e6;
	margin: 10px 0;
	width: 100%;
	position: relative;
}

.area-upload .lista-uploads .barra .fill{
	background-color: #a1f7ff;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 0;
	
	-webkit-transition: .2s all;
	-moz-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
}

.area-upload .lista-uploads .barra.complete .fill{
	background-color: #bcffdf;
}

.area-upload .lista-uploads .barra .text{
	z-index: 10;
	text-align: center;
	padding: 3px 5px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	color: black;
	font-size: 12px;
}
.area-upload .lista-uploads .barra .text a{
	color: black;
	font-weight: bold;
}

.area-upload .lista-uploads .barra.error .fill{	
	background-color: #c02929;
	color: white;
	min-width: 100%;
}

.area-upload .lista-uploads .barra.error .text{
	color: white;
}

Talvez a área que possa confundir um pouco mais, principalmente os mais novatos, seja o CSS referente as barras de loading. As barras são definidas como relative e seu conteúdo como absolute. Dessa forma, podemos herdar a porcentagem do upload e usá-la diretamente no min-width do elemento. Usamos min-width, ao invés de width para utilizar o transition, dando uma leveza no upload ao invés de pequenos estalos.

Javascript

Inicialmente iremos definir os efeitos de drag and drop. Utilizaremos os eventos específicos para adicionar ou retirar o css de hightlight. Aquele que falamos acima ao montar o CSS.

let drop_ = document.querySelector('.area-upload #upload-file');
drop_.addEventListener('dragenter', function(){
	document.querySelector('.area-upload .label-upload').classList.add('highlight');
});
drop_.addEventListener('dragleave', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});
drop_.addEventListener('drop', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});

Agora precisamos validar os dados antes de colocar em nosso servidor. Compusemos uma validação que verifica o tipo de arquivo e a quantidade máxima de 2MB. Essa validação é totalmente no front-end. É recomendado que você também faça uma validação posterior no back-end para evitar fraudes. Essa função receberá como parâmetro um arquivo, o qual faremos a validação.

function validarArquivo(file){
	console.log(file);
	// Tipos permitidos
	var mime_types = [ 'image/jpeg', 'image/png' ];
	
	// Validar os tipos
	if(mime_types.indexOf(file.type) == -1) {
		return {"error" : "O arquivo " + file.name + " não permitido"};
	}

	// Apenas 2MB é permitido
	if(file.size > 2*1024*1024) {
		return {"error" : file.name + " ultrapassou limite de 2MB"};
	}

	// Se der tudo certo
	return {"success": "Enviando: " + file.name};
}

Para enviar os arquivos, usaremos uma função AJAX simples. Fazemos um request no método POST. Nesta função, iremos capturar também a porcentagem do upload e atualizaremos a barra a partir desta, através do evento progress. Essa nossa função receberá o índice, para identificar o arquivo que está sendo enviado e a barra que será modificada.

function enviarArquivo(indice, barra){
	var data = new FormData();
	var request = new XMLHttpRequest();
	
	//Adicionar arquivo
	data.append('file', document.querySelector('#upload-file').files[indice]);
	
	// AJAX request finished
	request.addEventListener('load', function(e) {
		// Resposta
		if(request.response.status == "success"){
			barra.querySelector(".text").innerHTML = "<a href=\"" + request.response.path + "\" target=\"_blank\">" + request.response.name + "</a> <i class=\"fas fa-check\"></i>";
			barra.classList.add("complete");
		}else{
			barra.querySelector(".text").innerHTML = "Erro ao enviar: " + request.response.name;
			barra.classList.add("error");
		}
	});
	
	// Calcular e mostrar o progresso
	request.upload.addEventListener('progress', function(e) {
		var percent_complete = (e.loaded / e.total)*100;
		
		barra.querySelector(".fill").style.minWidth = percent_complete + "%"; 
	});
	
	//Resposta em JSON
	request.responseType = 'json';
	
	// Caminho
	request.open('post', 'upload.php'); 
	request.send(data);
}

Por fim, iremos juntar um pouco de cada coisa que fizemos, adicionando uma função em um evento change do input do upload. Neste momento, também é feito o laço dentre o(s) arquivo(s) selecionado(s) para validar e, se for válido, fazer o upload, utilizando os outros métodos acima mencionados. É neste momento também que serão criadas dinamicamente as barras: uma para cada arquivo.

document.querySelector('#upload-file').addEventListener('change', function() {
var files = this.files;
for(var i = 0; i < files.length; i++){
var info = validarArquivo(files[i]);
    //Criar barra
    var barra = document.createElement("div");
    var fill = document.createElement("div");
    var text = document.createElement("div");
    barra.appendChild(fill);
    barra.appendChild(text);

    barra.classList.add("barra");
    fill.classList.add("fill");
    text.classList.add("text");

    if(info.error == undefined){
        text.innerHTML = info.success;
        enviarArquivo(i, barra); //Enviar
    }else{
        text.innerHTML = info.error;
        barra.classList.add("error");
    }

    //Adicionar barra
    document.querySelector('.lista-uploads').appendChild(barra);
};
});

PHP

E pra terminar com chave de ouro, um PHPzinho que receberá esses arquivos e retornará um json com a confirmação de sucesso ou erro. Não aplicamos muitas validações nesse PHP pois nosso foco era neste exemplo está no front-end, mas é suficiente para que você compreenda sua funcionalidade.

<?php
ini_set('upload_max_filesize', '2M');
header('Content-Type: application/json');
$file = $_FILES['file'];

$ret = [];

if(move_uploaded_file($file['tmp_name'],'uploads/'.$file['name'])){
    $ret["status"] = "success";
    $ret["path"] = 'uploads/'. $file['name'];
    $ret["name"] = $file['name'];
}else{
    $ret["status"] = "error";
    $ret["name"] = $file['name'];
}

echo json_encode($ret, JSON_PRETTY_PRINT);
?>

E, como sempre, você pode baixar o código inteiro no Github e usar direto na sua aplicação.

Download

Gostou? Se sim, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

1 de fevereiro de 2019

Wireframe, Mockup ou Protótipo?

Quando iniciamos um aplicativo, site, sistema, ou diversos outros ambientes de interação, o primeiro passo é criar diferentes tipos de propostas de como vai ser a aplicação e de como vai ser seu comportamento. Se você é desenvolvedor, independente de ser designer ou programador, ou ainda está estudando, você já deve ter tido a necessidade de criar, ao menos, um rascunho de como será a interface gráfica de sua aplicação. E, se você pretende trabalhar especificamente com interfaces gráficas ou UX, a definição desses termos é ainda mais importante, sendo fundamental para uma boa comunicação e escolha de ferramentas adequadas.

Importância

Quando o desenvolvedor está em reunião com seu cliente, ou apenas lendo os requerimentos, este já vislumbra em sua mente o processo pelo qual o usuário conseguirá atingir seu objetivo. Além disso, também pensa em como comandos e dados devem influenciar uns aos outros (o que chamamos de regra de negócio do software). Mas nossa mente não é exatamente o melhor local para armazenar informações, pois a memória humana é volátil, se adapta e, o que é mais comum, se esquece de informações que podem ser importantes.

Por isso, é normal que um profissional, desde o seu primeiro pensamento, já comece a fazer rabiscos e anotações em uma caderneta ou em um guardanapo. Dessa forma, ele vai poder planejar não apenas o leiaute, mas todo comportamento do usuário e, inclusive, ajudar a modelagem de dados e lógica do projeto.

Esboços ou Sketchs

Um esboço ou sketch, é o primeiro passo para a criação da interface gráfica de um aplicativo. Basicamente é o que o desenvolvedor em primeiro passo. Desenhos simples, com muitas marcações, textos e números, que devem ser suficientes apenas para a compreensão deste e/ou do designer responsável (caso o designer não seja o próprio desenvolvedor). Esses esboços são feitos em papel, de preferência em um bloco de anotações, com lapiseira ou caneta. Fazer à mão é importante para que a fluidez do pensamento resolva melhores definições, assim como a ideia flui melhor dentro da cabeça de que o está projetando.

Para quem tem uma frequência muito alta de rascunhos, existem cadernetas específicas para isso, tendo formatos e linhas de base adequadas para o tipo de dispositivo. Outras pessoas preferem andar com papéis impressos com os templates base. Sites como o SneakPeekit e o PaperBrowser, disponibilizam templates para esboços.

fonte: geekchix.org

Wireframes

Wireframes são leiautes demonstrativos da diagramação de elementos na tela, geralmente contendo indicadores. Trata-se de uma evolução de um esboço, sendo mais bem trabalhado, indicando a disposição dos diversos elementos e conteúdo. Por originalmente serem desenhados em papeis milimetrados ou pautados, são também chamados de esboços de grade. Esta etapa ainda pode ser feita por alguém sem muita experiência com design, pois é basicamente uma forma de organizar as ideias rabiscadas anteriormente no papel. Se você designer, é comum pular essa etapa, indo do esboço direto para o mockup.

Foto: Todd Moy

Hoje os wireframes são feitos digitalmente, por ferramentas específicas, como o Balsamiq Wireframes ou através de conjuntos de bibliotecas e plugins que podem ser incorporados aos aplicativos da Adobe, como o Illustrator.

Biblioteca de Wireframes no Adobe Illustrator. Foto: Toptal.

Exemplos Wireframes

Mockups

Agora é a vez do designer (ou seu lado designer) brilhar. Os mockups são leiautes com exemplos finais, ou muito próximo destes, da interface gráfica. Basicamente serve de mapa para a implementação da mesma, com exemplos das telas, componentes e estilos já finalizados. Os mockups são bem mais trabalhados que os wireframes e raramente possuem indicadores internos, para não atrapalhar a compreensão da GUI (Interface Gráfica do Usuário). Muitas vezes, é comum mostrar os mockups também em cenas de interações, ajudando a demonstrar o uso e a ter uma melhor ideia do resultado final.

Fonte: https://portillo.myportfolio.com

Dentre diversas ferramentas para criação de mockups, temos o Adobe XD (gratuito), o Sketch e há quem até hoje prefira criar bibliotecas no Photoshop, Illustrator, Pixelmator ou similares. Sendo opção ou não do designer seguir as diretrizes de interface humana recomendado para o sistema ou aplicação.

Human Interface Guidelines

Se você é designer, você ainda deve trabalhar no chamado Human Interface Guidelines ou Diretrizes de Interface Humana, como alguns gostam de chamar. Trata-se das instruções básicas de como deve ser a GUI da aplicação, de um contexto de uma suite agregada ou até mesmo, como em sistemas operacionais, instruções de como outros designers devem implementar soluções para essa aplicação.

Para quem já trabalha ou trabalhou com identidades visuais, se assemelha muito aos manuais destas, porém ainda mais detalhados, mas com as informações sobre espaçamentos, iconografia, tipografia, cores, etc, incluindo, mas não se resumindo, a um conjunto de mockups que possuem exemplos das telas. Essas informações devem ser seguidas à risca por quem for implementar, sejam outros designers ou programadores front-end.

Fonte: https://portillo.myportfolio.com

Fonte: https://portillo.myportfolio.com

Fonte: https://portillo.myportfolio.com

Fonte: https://portillo.myportfolio.com

As Diretrizes são fundamentais principalmente em um sistema com uma quantidade de telas indefinida, como sistemas de gestão. Elas vão servir de guia para a criação de novas telas e componentes, além de inspiração para futuros materiais de publicidade e até sites.

Foto: Microsoft Fluent Design

Se você vai fazer uma aplicação para um determinado sistema operacional, ou apenas quer usar um como referência para não se preocupar tanto com o design, existem algumas diretrizes bem famosas, dentre elas a da Apple (disponível para iOS/MacOS/TVOS/WatchOS), o Material Design do Google (aplicável para sites e Android), o Fluent Design da Microsoft (também disponível o UXGuide legado) e tantos outros mais genéricos que você pode encontrar ou comprar pela internet.

Fonte: Apple

UI Kits

Se você está trabalhando com mockups e wireframes, geralmente você está trabalhando focado no funcionamento em um sistema operacional. Para montar seu leiaute de forma mais simples e sem perder muito tempo se adequando à diretriz escolhida, as desenvolvedoras costumam também disponibilizar UI Kits.

Esses kits de interface de usuário são arquivos ou bibliotecas que possuem os principais elementos gráficos genéricos do sistema. Geralmente é incluído elementos como botões, inputs, padrões de texto, cores, etc. Os principais UI kits, incluindo Android e iOS estão disponíveis direto pelas respectivas empresas ou através das desenvolvedoras dos principais softwares de mockups.

UI Kit do Android / Material Design para o Adobe XD. Fonte: Adobe.

Protótipo

O último passo antes (ou até durante) a implementação é a prototipagem. Basicamente, ele é um passo acima do mockup. Uma etapa onde o designer de interação não apenas demonstra o leiaute per se, mas as ações e interações entre as telas e elementos. Há várias formas de se criar um protótipo.

Algumas pessoas mais experientes preferem criar HTMLs simples, com animações e ações apenas com dados de exemplos, para demonstrar o comportamento, sem se importar ainda com tecnologias ideais ou funcionalidade, pois a ideia é ser apenas demonstrativo.

Exemplo de prototipagem no Adobe XD. Fonte: divulgação.

Hoje em dia, entretanto, é mais comum usar ferramentas de prototipagem. Quase todas as ferramentas modernas de mockup também fazem prototipagem, como o Adobe XD, Sketch, Figma, Zeplin, dentre outros. Esses aplicativos possuem diversas ferramentas não só de interação, como demonstração de transições e testes em dispositivos móveis.

Exemplo de prototipagem no InVision. Fonte: divulgação.

Outra forma de prototipagem são as criadas para apresentação em vídeo. Geralmente são criadas para vender uma ideia e não tem ainda um planejamento do software. Algumas ferramentas de prototipagem, como o InVision, Fuse e o Proto.io possuem ferramentas específicas para exportação em vídeo. Há também quem prefira fazer as transições do protótipo direto no After Effects, para dar um charme a mais para essas apresentações, geralmente com o uso de bibliotecas de animações.

Concluindo

O processo de esquematização visual de uma aplicação é fundamental para que a equipe envolvida no desenvolvimento tenha um guia de como deverá ser projetada a aplicação. Desde o esboço até a prototipagem, essas técnicas ajudam na compreensão, agilidade e segurança do projeto. O esforço para conhecer bem os termos ajuda na comunicação entre os integrantes da equipe, garantindo uma melhor interação entre todos.

Se gostou do que leu, curta a página no Facebook e compartilhe a informação.

31 de janeiro de 2019

Como destacar (hightlight) uma célula de uma Tabela HTML após uma busca

Melhorar a experiência do usuário é sempre importante. E, muitas vezes, resultados de pesquisas tendem a ser muito grandes, principalmente em pesquisas semânticas. Por que então não destacar o elemento buscado para facilitar que o usuário saiba a linha e/ou coluna correta? E, como sempre, Javascript puro.

Exemplo

Coluna A	Coluna B	Coluna C
abacaxi	manga	limão
coelho	espinafre	jerimum
tomate	cebola	rapadura

HTML

Para começar, vamos criar o form e a tabela. Nada complicado e semanticamente correto.

<form id="search" onsubmit="highlightColumn();return false">
  <input type="text" id="word"/>
  <button>
  Buscar Palavra
  </button>
</form>


<div id="areaTabela" class="area-tabela">
  <table>
    <thead>
      <tr>
        <th>Coluna A</th>
        <th>Coluna B</th>
        <th>Coluna C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abacaxi</td>
        <td>manga</td>
        <td>limão</td>
      </tr>
      <tr>
        <td>coelho</td>
        <td>espinafre</td>
        <td>jerimum</td>
      </tr>
      <tr>
        <td>tomate</td>
        <td>cebola</td>
        <td>rapadura</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

Precisamos fazer o CSS. De forma geral, não precisamos criar tantas opções. O importante é você criar as classes referentes ao highlight e ao highlight da coluna. Tem um charminho de escala e sombra, mas você faz como achar melhor.

.area-tabela table{
  margin-top:20px;
  border-spacing: 0;
  border: 1px solid grey;
  width: 100%;
}

.area-tabela table td, .area-tabela table th{
  width:80px;
  padding: 5px 10px;
  font-size: 14px;
  
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}

.area-tabela table th{
  background-color: grey;
  color: white;
  font-weight: normal;
}

.area-tabela table tr:nth-child(even) td{
  background-color: #efefef;
}

.area-tabela table tr td.high_col{
  background-color: #e5f7f8;
}
.area-tabela table tr:nth-child(even) td.high_col{
  background-color: #d1eff0;
}

.area-tabela table tr th.high_col{
  background-color: #063b5a;
}

.area-tabela table tr td.high_col.high{
  background-color: #93fffc;
  font-weight: bold;
  transform: scale(1.05);
  box-shadow: 0 3px 5px rgba(0,0,0,.5);
}

Javascript

Agora vem a parte que pode complicar um pouco. A primeira coisa que precisamos fazer é certificar-se, em um laço, que limparemos as classes high_col e high dos outros elementos. Em seguida, iremos usar a função evaluate para verificar se o texto digitado está contido em uma das células. Para capturar os td’s da coluna ativa, iremos verificar o índice da célula encontrada e usaremos isso para colocar a classe nas outras células e cabeçalho dessa coluna.

function highlightColumn(){
	//Clear
  document.querySelectorAll("#areaTabela table tr td").forEach((item)=>{
	item.classList.remove("high");
  item.classList.remove("high_col");
});
  document.querySelectorAll("#areaTabela table tr th").forEach((item)=>{
	item.classList.remove("high_col");
});
  
	var word = document.querySelector("#word").value;
 	
  if(word == ""){
  	return false;
  }
  
  //pegar o elemento
  var el = document.evaluate("//td[contains(.,'" + word + "')]", document.querySelector("#areaTabela"), null, XPathResult.ANY_TYPE, null ).iterateNext();
 
  //Se quiser a palavra completa e não trecho dela, troque a linha acima por:
  //var el = document.querySelector("td[text()='"+word+"']");
  
  //Check if el exists
  if(el == undefined){
    return false;
  }
  
  //Highlight column
  var index = (Array.prototype.slice.call(el.parentNode.children).indexOf(el));
  
  document.querySelectorAll("#areaTabela table tr td:nth-child("+(index+1)+"), #areaTabela table tr th:nth-child("+(index+1)+")").forEach((item)=>{
    item.classList.add("high_col");
  });
  
  //Highlight Element
  el.classList.add("high");
  
  return false;
}

Obs. Se você quiser buscar pelo valor específico, substitua o evaluate por document.querySelector(“td[text()=’”+word+”‘]”). Dessa forma não será selecionado nenhuma célula a menos que o valor seja exato.

Simples não é?

Como sempre, o exemplo e código completo está disponível abaixo, desta vez no jsFiddle. Basta copiar o código se quiser usar diretamente em seu projeto.

Se gostou, compartilhe e curta a página no Facebook. Entre também no grupo através do link abaixo.

20 de janeiro de 2019

FAB (Botão Flutuante) com CSS3 e HTML (sem Javascript)
Disclaimer: O comportamento não vai funcionar no iOS, pois o iOS desconsidera as pseudoclasses utilizadas aqui. No lugar, ele utiliza uma pseudoclasse de :hover para significar a seleção sem clique. Ainda estou vendo qual a melhor forma de usar no iOS sem bugar o comportamento em desktop.

Continuando com os exercícios de lógica com CSS e HTML, iremos desta vez ver se é possível criar um FAB (Float Action Button) sem usar Javascript. E, adianto, sim, é possível. Se você quer ver os outros exercícios, acesse a categoria de Tutoriais, deste site.

Editado -> Para quem quer aplicar uma interação melhor, eu adicionei um exemplo de uso com Javascript no final do Post.

Esse tipo de botão é comum em aplicativos Android com Material Design. Se trata de um botão flutuante que fica em uma das extremidades inferiores (geralmente a direita) que abre uma lista com outros botões. Bem, se você está nesta página, basta olhar logo abaixo 😁.
Opção 1

Opção 2

Opção 3
HTML + CSS

Um dos desafios é conseguir fazer algo semanticamente correto. Então, o leiaute em si consistirá em um container que contém um botão e uma lista de botões. Cada botão terá uma etiqueta (label) que será a descrição do que ele pode fazer.
```
<div class="fab"  ontouchstart="">
  <button class="main" >
  </button>
  <ul>
    <li>
      <label for="opcao1">Opção 1</label>
      <button id="opcao1">
      ⎈
      </button>
    </li>
    <li>
      <label for="opcao2">Opção 2</label>
      <button id="opcao2">
      ⎗
      </button>
    </li>
    <li>
      <label for="opcao3">Opção 3</label>
      <button id="opcao3">
      ☏
      </button>
    </li>
  </ul>
</div>
```
No exemplo, há apenas 3 opções e com caracteres genéricos. Você pode substituir por imagens (mas tomando cuidado com o tamanho destas) ou usando font-icons, como o Font-Awesome, o MaterialDesign Lite ou até mesmo criar os seus próprios font-icons, como mostra este tutorial. Também pode colocar quantos items quiser na lista, apenas tomando cuidado para não ficar alto demais e enrolar o usuário.

Como sempre usaremos as pseudoclasses para poder reconhecer ações. No caso, utilizaremos a pseudoclasse :active e :focus para detectar o “click” ou o “foco” (quando o tab fica em cima). Você também notará a existência de um símbolo de positivo (+). No CSS, o símbolo + é um indicativo de que o item que deverá ser formatado é o item logo após o DOM atual, porém no mesmo container hierárquico. Ou seja, quando você declara input + p, você quer aplicar o estilo no p imediatamente após o input.

Sem mais enrolações, segue o CSS
```
.fab{
  position: fixed;
  bottom:10px;
  right:10px;
}

.fab button{
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background-color: #cb60b3;
  border: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  font-size: 24px;
  color: white;
    
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #5b19b7;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.fab button.main:before{
  content: '⏚';
}

.fab ul{
  position:absolute;
  bottom: 0;
  right: 0;
  padding:0;
  padding-right:5px;
  margin:0;
  list-style:none;
  z-index:10;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab ul li{
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin-bottom: -10%;
  opacity: 0;
  
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
  transition: .3s ease-out;
}

.fab ul li label{
  margin-right:10px;
  white-space: nowrap;
  display: block;
  margin-top: 10px;
  padding: 5px 8px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  border-radius:3px;
  height: 18px;
  font-size: 16px;
  pointer-events: none;
  opacity:0;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main:active,
.fab button.main:focus{
  outline: none;
  background-color: #7716ff;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
 }
 
.fab button.main:active:before,
.fab button.main:focus:before{
  content: '↑';
}

.fab button.main:active + ul,
.fab button.main:focus + ul{
  bottom: 70px;
}

.fab button.main:active + ul li,
.fab button.main:focus + ul li{
  margin-bottom: 10px;
  opacity: 1;
}

.fab button.main:active + ul li:hover label,
.fab button.main:focus + ul li:hover label{
  opacity: 1;
}
```
O que estamos fazendo é aplicar um estilo na lista assim que o botão ganha foco ou é ativado. Você pode, se preferir, adicionar também ao passar em cima com o mouse, bastando adicionar, junto aos demais comandos do botão principal, a pseudoclasse :hover e repetindo o resto da declaração.

Simples, não é? E, como sempre, o exemplo no JsFiddle para você ir experimentando e fazendo seus próprios testes. Compartilhe com a galera!

Versão com Javascript:
24 de dezembro de 2018

Efeito float label animado com CSS3 – Igual ao do novo login do Google

No post anterior, eu mostrei como fazer aquele efeito de label float do Material Design. Eis que esta semana eu me deparo com o novo input do login do Google e achei bem legal, mas pensei que ninguém ia se interessar.

Como vi uma pergunta em um grupo do Facebook, resolvi rapidinho então fazer uma variação do que foi feito no anterior, para atingir o mesmo efeito do input login do novo login do Google. Ah e, mais uma vez, sem javascript 😉.

Telefone

Nome de Usuário

HTML e CSS

Se precisarem de alguma explicação mais aprofundada, dê um olhada no artigo anterior. Só uma observação importante é que o top, do label, deverá ser ajustado de acordo com o tamanho da letra e a tipografia usada, pois tipografias diferentes mudam a sensação de tamanho.

<div class="label-float">
  <input type="text" placeholder=" ">
  <label>Telefone</label>
</div>
<br>
<div class="label-float">
  <input type="text" placeholder=" " required="">
  <label>Nome de Usuário</label>
</div>

.label-float{
  position: relative;
  padding-top: 13px;
}

.label-float input{
  border: 1px solid lightgrey;
  border-radius: 5px;
  outline: none;
  min-width: 250px;
  padding: 15px 20px;
  font-size: 16px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -webkit-appearance:none;
}

.label-float input:focus{
  border: 2px solid #3951b2;
}

.label-float input::placeholder{
  color:transparent;
}

.label-float label{
  pointer-events: none;
  position: absolute;
  top: calc(50% - 8px);
  left: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  background-color: white;
  padding: 5px;
  box-sizing: border-box;
}

.label-float input:required:invalid + label{
  color: red;
}
.label-float input:focus:required:invalid{
  border: 2px solid red;
}
.label-float input:required:invalid + label:before{
  content: '*';
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
  font-size: 13px;
  top: 0;
  color: #3951b2;
}

E, como sempre, o link, com o exemplo do jsFiddle, se você deseja apenas experimentar e treinar um pouco:

Compartilhe se você achou legal!

21 de dezembro de 2018

Categoria: Design

Alinhamento com Flexbox

Alinhamento com position

Alinhamento com Grid

Exemplo de uso (Modal Alinhado ao Centro)

As Cores de 2021: Otimismo e Força

Brasil

Experiência Compartilhada

Frameworks e Bibliotecas

HTML

CSS3

Javascript

PHP

Importância

Esboços ou Sketchs

Wireframes

Mockups

Human Interface Guidelines

UI Kits

Protótipo

Concluindo

Exemplo

HTML

CSS

Javascript

HTML + CSS

HTML e CSS