Este projeto consiste em uma releitura do antigo site Le Scone , um restaurante gourmet Italiano, como parte do curso de web design no SENAI. A proposta inicial era aprimorar tanto o design quanto as funcionalidades do site original, visando proporcionar uma experiência ainda mais envolvente e intuitiva aos usuários.
Utilizando o software de prototipagem Figma, foquei em um processo criativo que me permitiu explorar diversas ideias e conceitos para aprimorar o site. Decidi adotar uma abordagem mais contemporânea, destacando elementos visuais impactantes e focando em uma navegação fluida e intuitiva.
Uma das principais mudanças implementadas foi a introdução de um header que da um design mais moderno, proporcionando uma experiência de navegação mais eficiente e dinâmica para os usuários.
Além disso, investi significativamente na seleção e exibição de imagens de alta qualidade do restaurante e de seus pratos irresistíveis. Acredito que a apresentação visual desempenha um papel fundamental na atração dos clientes e na transmissão da atmosfera e do sabor autêntico da culinária italiana.
No que diz respeito às funcionalidades, decidi segmentar o menu em três categorias distintas: "Drinks", "Menu" e "Sobremesas", cada uma acessível por meio de imagens destacadas na página inicial. Ao clicar em qualquer uma dessas imagens, os usuários são direcionados instantaneamente para a seção correspondente do menu, proporcionando uma experiência de navegação mais intuitiva e eficaz.
Em resumo, esta releitura do site Le Scone representa não apenas uma atualização visual, mas também uma reimaginação completa da experiência do usuário. Estou confiante de que essas mudanças contribuirão significativamente para aprimorar a presença online do restaurante e encantar os visitantes com uma experiência gastronômica única e memorável.
-
Header Flutuante: Um header flutuante foi adicionado para melhorar a navegação e proporcionar uma experiência mais intuitiva ao usuário.
-
Imagens Atrativas: Substituíram-se as fotos antigas por imagens de alta qualidade e mais atrativas dos pratos oferecidos no restaurante italiano, com o objetivo de despertar o interesse dos visitantes.
-
Menu Interativo: O menu foi dividido em três categorias: "Drinks", "Menu" e "Sobremesas". Ao clicar nas imagens do menu, o usuário é direcionado para a seção correspondente na página.
Este projeto foi desenvolvido utilizando as seguintes tecnologias:
- HTML5: Utilizado para estruturar o conteúdo do site.
- CSS3: Utilizado para estilizar e dar vida ao design do site.
Para visualizar o protótipo do Le-Scone desenvolvido no Figma, clique aqui.
Utilizei o Figma para criar um protótipo detalhado que retrata a evolução do Le Scone em três versões distintas: o Lescone antigo, a primeira versão e a versão definitiva que está atualmente no site. Esta ferramenta colaborativa permitiu que eu participasse ativamente do processo criativo, refinando cada aspecto do design e das funcionalidades propostas. Desde a concepção inicial até a versão final, o protótipo no Figma serviu como uma plataforma dinâmica e flexível, facilitando a iteração e o aprimoramento contínuo do projeto.
A tipografia desempenha um papel crucial no design do site. As fontes utilizadas foram selecionadas com cuidado para garantir legibilidade e coesão visual em todo o site.
title-header
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| Petrona | Medium | 60px | Automatic | 0% | None | 0px | Original |
title-menu
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| Aref Ruqaa | Medium | 30px | Automatic | 0% | None | 0px | Original |
menu-item
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| PT Mono | Regular | 24px | 24px | 0% | None | 0px | Original |
menu-price
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| Aref Ruqaa | Regular | 24px | 35px | 0% | None | 0px | Original |
title-footer
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| PT Mono | Regular | 18px | 30px | 0% | None | 0px | Original |
button-text
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| Petrona | Light | 20px | 79px | 0% | None | 0px | Original |
header-text
| Font | Weight | Size | Line Height | Letter Spacing | Text Decoration | Paragraph Spacing | Case |
|---|---|---|---|---|---|---|---|
| Petrona | SemiBold | 24px | 30px | 0% | None | 0px | Original |
| Cor | Hexadecimal |
|---|---|
| white | |
| salmon | |
| full-black | |
| black | |
| gold-price |
Você pode contribuir com este projeto seguindo os passos abaixo:
- Faça um fork do projeto.
- Crie sua branch de feature
git checkout -b feature/MinhaFeature. - Faça commit de suas alterações
git commit -am 'Adicionar nova funcionalidade. - Faça push para a branch
git push origin feature/MinhaFeature. - Abra um pull request.
