Cafeteria Solstice

Cafeteria Solstice

Neste projeto desenvolvi o layout de um site para uma cafeteria fictícia chamada “Solstice Café”. A ideia central foi criar uma identidade visual acolhedora, com tons quentes, inspirada no clima convidativo de um café artesanal. Busquei transmitir sensações de conforto, proximidade e sabor — elementos essenciais para uma cafeteria que deseja se comunicar com o público de forma cativante.

O objetivo foi estruturar uma página inicial simples, elegante e funcional, com destaque para a marca, menu de navegação e uma seção de chamada principal com imagem, texto e botão de ação. Além de projetar o design visual, também construí a estrutura básica do layout em HTML e CSS para demonstrar como a interface funcionaria na prática.

Para a criação deste projeto utilizei:

Inkscape – para desenvolver a ilustração principal da homepage, representando a identidade visual do café. Trabalhei formas, degradês e espessuras simples para manter um estilo minimalista e moderno.

Visual Studio Code (VS Code) – para criar e organizar o código HTML e CSS do layout. É o editor que utilizo para projetos web por sua leveza e pelos recursos de extensão que agilizam o fluxo de trabalho.

Navegador Web Chrome – para visualizar o resultado em tempo real e ajustar detalhes de espaçamento, cores e responsividade.

1. Conceito e paleta de cores

Comecei definindo a atmosfera que eu queria transmitir: calor, aconchego e sabor. Escolhi tons terrosos e alaranjados, próximos ao café e ao pôr do sol — elementos reforçados pelo nome “Solstice”. A paleta ajudou a manter coerência em todos os elementos.

2. Criação da ilustração no Inkscape

No Inkscape desenhei o ícone principal:

Uma flor estilizada similar a um Sol simbolizando acolhimento e naturalidade.

Uma xícara central representando a essência da cafeteria.

Um fundo com degradê quente, reforçando a identidade visual.

Optei por formas simples e linhas limpas para garantir boa legibilidade tanto em telas grandes quanto pequenas.

3. Estruturação do layout no VS Code

Com a identidade visual pronta, comecei a montar o layout:

HTML: Estruturei o cabeçalho com o logotipo e o menu (Início, Menu, Sabores, Contato). Em seguida, criei a seção principal com a ilustração, título, parágrafo e botão de ação.

CSS: Trabalhei uma estética minimalista, com bastante respiro entre elementos, tipografia serifada para dar um toque clássico e alinhamento equilibrado entre texto e imagem. Ajustei espaçamentos, fontes e contraste para criar uma experiência visual limpa e agradável.

4. Ajustes e refinamentos

Após montar o layout, fiz vários testes no navegador, ajustando proporções, cores e espaçamentos para garantir harmonia. Busquei manter uma hierarquia visual clara e uma navegação simples.