
Já tem um bom tempo que eu me aventuro no mundo de UI/UX e acredito que consigo compartilhar alguns conteúdos úteis e que possam ajudar no dia a dia. Então, vamos aprender sobre: Contraste, hierarquia visual, espaçamento e efeitos simples de sombreamento.

Obs.: não coloquei nenhuma cor fora nosso preto total(#000) e branco total(#fffff). Também evitei definir valores no texto, o objetivo é apenas conceitos e não padrões de tamanho, etc.

Utilizei o [Figma](http://figma.com/) para criar o card.

## 1 - Card de um carro com várias informações

Como exemplo prático, vamos imaginar que você estava desenvolvendo um card para uma loja de carros:

![Desktop - 10](https://user-images.githubusercontent.com/34286800/156477228-a27abf36-0482-4ebd-a9d6-fd88d2be592f.png)

Já da para perceber que não é uma das melhores interfaces, repare em como fica estranho se comparar com sites maiores.

## 2 - Organizando as informações

É sempre bom manter dados relacionados de maneira agrupada, para isso usamos o [espaço em branco](https://uxplanet.org/white-space-in-ui-design-8647d4f685a7). Ele não tem um peso visual tão grande — não fica nada bizarro e cheio de coisas para você se perguntar "O QUE É ISSO?" — e mantém a interface bem limpa e mínima. Você web dev conhecer esse espaço como `Margin` ou `Padding`.

Lembre-se de tentar manter uma mesma proporção de espaçamento para dados do mesmo grupo e espaços maiores entre grupos diferentes.

![Desktop - 11](https://user-images.githubusercontent.com/34286800/156477248-37cf1516-721a-4338-8b48-fa5c9dd7a295.png)

## 3 - Mudando o peso da fonte(font-weight) e o espaçamento interno(line-height) entre texto

Até agora nossos textos tinham apenas um peso 400/regular, mas mantendo todos iguais nós não conseguimos impor uma boa hierarquia visual. Vamos dar mais peso(semibold, bold) para informações mais relevantes.

Outra ponto importante: o espaçamento entre os textos estava pequeno, para resolver isso podemos calcular o line-height como o `font-size * 1.256 ou 1.4 ou 1.61`(prefiro usar 1.4).

Ex.: font-size de 16px -> line-height = 16 \* 1.4

![Desktop - 12](https://user-images.githubusercontent.com/34286800/156477252-37d2af33-525a-4d2f-83a5-44dc67fee220.png)

## 4 - Priorizar alguns dados e diminuir o contraste de outros

Iremos definir um título/label para os dados e diminuir a opacidade e font. O resultado será um texto descritivo e o dado em sí logo abaixo. utilizando desse formato, a estrutura dos detalhes do veículo ficam mais bem divididos e o usuário entende qual texto é uma dado e não apenas um título.

![Desktop - 13](https://user-images.githubusercontent.com/34286800/156477254-8e5dedd1-a2d6-485e-8b3d-b85600e0900b.png)

## 5 - Melhorando nosso Call to Action(CTA) ou button

Você percebeu que nosso botão era apenas um link bem simples e sem tanto peso? É... isso não é muito legal, ainda mais no caso de uma ação de compra. Vamos tranformar ele em um botão grande com máxima largura no grid(até onde o texto da descrição começa e termina), com um contraste alto e um leve sombreamento para dar um efeito de levitação. No texto nós podemos aumentar o letter-spacing e o font-size.

![Desktop - 14](https://user-images.githubusercontent.com/34286800/156477255-b0e85b96-db1b-4070-82d5-fd39fb6741c4.png)

## 6 - Contraste em texto sobre imagem

Esse Layout não é dos melhores, o preço está lá no lado esquerdo e em cima da imagem. Então, para evitar que dependendo da imagem o texto fique com um contraste péssimo e o usuário não consiga entender nada:

- Vamos aumentar essa font-size e mudar a cor para algo bem mais claro;
- Para aumentar o contraste basta adicionarmos um background na imagem com linear-gradient sendo escuro, lembre-se de adicionar mais opacidade em baixo e ir diminuindo para cima.

![Desktop - 15](https://user-images.githubusercontent.com/34286800/156477256-85a7fdb4-052f-4e42-870b-1ccaf88e8b0b.png)

## Resultado em um gif e link do figma

https://www.figma.com/file/eUHjkMYVBnDikQ970byfGe/blog?node-id=412%3A2

![Peek 02-03-2022 21-11](https://user-images.githubusercontent.com/34286800/156477067-f0765cae-d5c3-41ed-8a34-0ea0265a773d.gif)

## Até logo

Tudo que eu coloquei aí em cima não é uma regra que você deve seguir em todos os casos, cada interface deve ser analizada e compreendida, busque mais referências e teste. É sempre bom testar :)

É isso leitor random da internet, parabéns por chegar até aqui e até outro post.

> Agora que eu percebi que as imagens ficaram com a qualidade reduzida e o gif lento :|
>
> provavelmente foi por conta do upload das imagens nas issues do github hehe.


Em UI existe alguns conceitos que podem facilmente serem aplicados em diversas interfaces, nesse post eu lhe ensino um pouco sobre eles.

Como melhorar interfaces com alguns passos simples


## Um resumo resumido

Meu nome é Matheus e estou cursando Ciência da Computação pela UFMT, o **Blog** é uma forma para aprender mais e também compartilhar conhecimento.

Talvez você ser pergunte, o porquê criar um blog ao invés de utilizar o [medium.com](https://medium.com)? Bom, eu queria algo mais `meu` e também saber exatamente como funcionava um blog.

Já faz um tempo que me pergunto se é melhor usar [Markdown](https://docs.pipz.com/central-de-ajuda/learning-center/guia-basico-de-markdown#open), ou um editor que já retorna um HTML com os textos. Até o momento estou curtindo usar o [Markdown](https://docs.pipz.com/central-de-ajuda/learning-center/guia-basico-de-markdown#open) e depois transpilar para HTML, funciona bem!

> Sem termos técnicos demais: Markdown e HTML são 'apenas' linguagens de marcação, aqui eles devem deixar o conteúdo do blog em um padrão para eu poder manipular.\
> \
> Um texto cru, o famoso .txt, ficaria feio e difícil para estilizar.

## Quais conteúdos?

Faço algoritmos para tudo que me gera interesse... Então nesse blog pode ter de tudo, porém a maior parte de conteúdo possa ser relacionado a WEB, por conta que estou tentando trabalhar como **_front-end_** e **_UI/UX_**.

## Criação dos textos/editor

Escrevo no [stackedit](https://stackedit.io/) e vejo as possíveis correções na [clarice.ai](clarice.ai).

O **_stackedit_** é apenas um editor de markdown com uma pré visualização, já o site **_clarice_** é uma IA que consegue corrigir textos e dar uma nota(é incrível, recomendo demais o uso).

## Qual linguagem de programação foi utilizada, frameworks, libs?

### Javascripto

A linguagem foi o tal do **Javascript**. Agora sendo mais preciso: foi o superset chamado **[Typescript](https://www.typescriptlang.org/)** (basicamente adiciona tipagem e alguns recursos interessantes para o javascript).

### Nextjs

Ir só no javascript vanilla seria bem trabalhoso, então não tentei recriar a roda, utilizei o **[Nextjs](https://nextjs.org/)**.

Aproveitei a parte de gerar sites estáticos e fiz cada página do blog ser gerada na build do projeto(getStatisPaths + getStatisProps).

> talvez você tenha percebido que esse blog abre tudo muito rápido, isso é por causa do Nextjs que já deixa tudo pronto e só envia alguns arquivos para você

### Styled-components

Nos estilos eu optei por **CSS in JS**, o famoso [styled-components](https://styled-components.com/).

Sou fã demais do Styled, alguns motivos: opção de passar os parâmetros para o CSS e evitar aquele monte de **_className_** e **_ID_**; melhora na legibilidade do código.

> Vamos manter tudo em JS? \
> R.: Quase tudo :)

![Galo cego(apelido de uma pessoa que virou meme) fazendo beleza](/content/memes/blz.gif)

### Remark

O [Remark](https://github.com/remarkjs/remark) é o responsável por transpilar **_Markdown_** para **_HTML_**.

O código utilizado pelo blog está assim:

```javascript
// src/service/markdown.js
import remark from 'remark'
import html from 'remark-html'
import footnotes from 'remark-footnotes'
import remarkGfm from 'remark-gfm'
import prism from 'remark-prism'

export default async function toHTML(markdown) {
  const result = await remark()
    .use(footnotes)
    .use(remarkGfm)
    .use(html)
    .use(prism)
    .process(markdown)

  // <img src="/img.png"> to <img src="img.png" loading="lazy">
  return result
    .toString()
    .replace(/<img (?<attributes>.*)">{1}/gm, `<img $1" loading="lazy">`)
}
```

## Como está funcionando

1.  Escrevo o conteúdo da postagem em um **_arquivo.md_**;

2.  Faço o envio(`push origin master`) desse **_arquivo.md_** para o _github_;

3.  A vercel entra em ação e faz a build do novo commit;

4.  O algoritmo percorre todos os arquivos da pasta **_posts_** transformando-os em HTML(remark) e criando uma página para cada.

5.  Vocês veem uma nova postagem no blog :)

Acredito que para algo usado por mais pessoas seria melhor usar um CMS, mas por aqui é só eu ✌️.

#### speedrun de uma postagem teste

(sem mandar para o repositório no github)

![gif acelerado de eu criando uma postagem no blog](/content/speedrun.gif)

## Acessibilidade

Usando como base meus conhecimentos de UI e também as postagens do [Willian Justen](https://willianjusten.com.br/), eu melhorei a acessibilidade desse blog. Coloquei em prática o uso dos **_tabindex, alt, title e html semântico_** + uns truques com a **ContextAPI**.

> se você é uma pessoa portadora de necessidades especiais e/ou utiliza leitores de tela, por favor me mande um feedback sobre a acessibilidade desse blog.\
> email: matheuscorreia559@gmail.com\
> \
> Eu testei, mas é sempre bom ter o feedback do público alvo.

No vídeo abaixo, a navegação foi feita apenas com o teclado, perceba a mudança do **_tabindex_** no canto direito.
Esse menu da esquerda, quando ativo, desabilita o **_tabindex_** das postagens, permitindo que o usuário só navegue na área visível(aqui que entra a **contextAPI**).

<figure class="video_container">
  <video controls loop autoplay>
    <source src="/content/acessibilidade.mp4" type="video/mp4">
  </video>
</figure>

## Bônus

#### Por quê tem alguns quadrados do lado de cada postagem?

Isso aqui:
![vários quadrados verdes bem pequenos, alguns estão separados tanto em x quando em y](/content/pixels.png)

> obs.: só aparece no desktop/computador/tablet

É um suporte para postagem, foi feito apenas para decoração. É realmente necessário? Não!\
Cada postagem tem seu mapa(quadradinhos/pixels) único, ou quase único.

O algoritmo funciona indo em cada letra do título e pegando a posição dela no alfabeto, começando em 1 e indo até 26, depois é feito duas condicionais que usam o índice da letra no título, com isso é gerado um **x** e **y**, e o algoritmo desenha um retângulo de 1 pixel nessa posição.

_condicional 1_ => Se o **índice** daquela letra no título for par, o **x** recebe o valor do **índice**. Se não, o **x** fica sendo o índice da letra no alfabeto.

_condicional 2_ => Se o **x** for par, o **y** vai ser o índice da letra no alfabeto. Se não, o **y** fica sendo o índice da letra no título.

```javascript
const x = indexInString % 2 === 0 ? indexInString : indexInAlphabet
const y = x % 2 === 0 ? indexInAlphabet : indexInString
```

#### Canvas.

Os pixels foram desenhados no **Canvas**.\
É necessário adicionar no CSS do **Canvas** a propriedade:

```css
/* src/components/Post/style.tsx */
image-rendering: pixelated;
```

essa propriedade mantém o estilo pixelado e com definição(sem um 'blur')

Abaixo você encontra como ficaria sem a propriedade **_image-rendering:pixelated_**

![vários quadrados verdes bem pequenos, alguns estão separados tanto em x quando em y, mas tem um blur nos quadrados](/content/pixelSemCSS.png)

#### Código que cria os quadrados(js)

```javascript
// src/components/Post/index.tsx

function drawRectanglePixel(
  cvs: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  str: string
) {
  str = str.replace(/[^\w\s]/gi, '').replace(/\s/gi, '')

  let size = str.split('').length

  size = size < 26 ? 26 : size

  cvs.width = size
  cvs.height = size

  drawChess(ctx, size)

  str.split('').forEach((s, indexInString) => {
    if (indexInString === str.length - 1) return

    const indexInAlphabet = s.toLowerCase().charCodeAt(0) - 97 + 1

    const x = indexInString % 2 === 0 ? indexInString : indexInAlphabet
    const y = x % 2 === 0 ? indexInAlphabet : indexInString

    ctx.fillStyle = theme.colors.primary
    ctx.fillRect(x, y, 1, 1)
  })
}
```

## Final

Acredito que seja tudo para uma primeira postagem.

Obrigado por ler até aqui!


O motivo da criação do blog e alguns detalhes sobre a construção dele

Como melhorar interfaces com alguns passos simples

O começo do blog