Arte & Ilustracao 2024-2026 Handmade Digital / Tutorial Sketchnote

Vertical Whiteboard Timeline

Estilo Vertical Whiteboard Timeline: landing page tutorial com visual de quadro branco, timeline vertical, steps numerados, setas desenhadas a mao e icones doodle.

vertical whiteboard timeline step-by-step tutorial onboarding handmade sketch doodle icons sticky notes hard shadows moldura metalica marcadores expo Permanent Marker Caveat Kalam Patrick Hand setas curvas circulos numerados bordas irregulares pastel fills flowchart vertical

Uso: Tutoriais passo a passo, Onboarding de produto, Guias educativos, How-to pages, Documentacao visual, Landing pages long-form

Contexto Histórico

Variacao vertical do estilo Whiteboard Flowchart, inspirada em infograficos de tutorial desenhados a mao em quadros brancos fisicos. O layout timeline vertical com steps numerados a esquerda e conteudo a direita e um padrao classico de UX educativo, combinado aqui com a estetica handmade de marcadores, post-its e setas organicas. Ideal para conteudos sequenciais que precisam guiar o usuario de cima para baixo com clareza visual.

Especificações Técnicas

Cores

Primárias

#F9FAFB

#1A1A1A

#B8BBBE

#E8E9EB

Secundárias

#A5D8FF

#FFF9E6

#C3E8BD

#FADADD

#FFE0C2

#E8DCF5

Efeitos

MOLDURA METALICA: Borda cinza gradient multi-stop simulando frame de aluminio de whiteboard fisico com box-shadow duplo. Na base, marcadores Expo e apagador como elementos decorativos (divs estilizados). | TIMELINE VERTICAL: Linha tracejada ou solida preta irregular descendo do lado esquerdo (30-40% largura), conectando circulos numerados de cada step. | CIRCULOS NUMERADOS: Circulos com borda preta grossa 2.5-3px, fill pastel (azul, verde, rosa alternando), numero grande em Permanent Marker. | SETAS CONECTORAS: SVG paths com stroke-linecap round, stroke-width 3-4px variavel, curvatura organica. Setas horizontais do circulo para a caixa de conteudo a direita. Setas verticais descendentes entre steps. | CAIXAS DE CONTEUDO: Retangulos com bordas pretas irregulares 2-3px, fundo branco ou amarelo pastel, hard shadow 4-6px offset sem blur. Screenshots internos com bordas grossas e cantos levemente amassados. | ICONES DOODLE: SVG stroke-only (laptop, pasta, engrenagem, play, megafone, cursor), contorno preto 2-3px, fill pastel opcional, tamanho 40-80px. | SOMBRAS HARD: box-shadow com blur ZERO, offset 4-6px, cor #333 opacity 0.3-0.5. | TEXTURA WHITEBOARD: Background noise sutil 5-8% opacity sobre fundo branco-gelo.

Light/Dark

✓ Full / ✗ None

DESIGN.md

Prompt para AI

Relacionados

Arte & Ilustracao

Memphis Design

Última sincronização: 01/04/2026