A ideia é que o produto final se torne um site de um restaurante fictício de pokes, chamado Hello Poke.
A marca fictícia Hello Poke solicitou a criação de um site moderno e compatível com sua marca. O Hello Poke é um restaurante que vende apenas pokes, um prato tropical típico do Hawaii que tem base de arroz japonês, uma proteína -normalmente o salmão- e adicionais como frutas, legumes, peixes, entre outros.
O cliente entrou em contato com os seguintes requisitos:
- Página que apresenta a empresa
- Cardápio
- Redes Sociais
- Contato - Direcionamento para whatsapp
A primeira etapa de qualquer projeto é entender sobre o projeto/empresa e as necessidades/desejos do cliente.
- É interessante coletar peças anteriores criadas pela empresa que definem o estilo da mesma. Aqui vale observar cores, tipografia, formas e outros elementos já utilizados.
Como é uma marca fictícia sem identidade visual formada, ela será criada do zero. Vamos supor que a marca deseja representar o sabor do poke e fazer com que seus clientes fiquem com vontade de pedir pelo delivery.
A partir disso, uma ideia inicial da tipografia e cores usadas é gerada.
Supondo que o cliente já havia disponibilizado uma logomarca.
Inspirada nas cores do prato.
Perguntas importantes a serem respondidas sobre a marca
Qual o tipo de site (institucional, comércio eletrônico, aplicativo web)? O cliente quer vender online ou ter apenas uma vitrine?
- O tipo de site é parecido com uma vitrine, uma vez que o cliente não deseja fazer vendas pelo site, e sim redirecionar o usuário para o whatsapp ou ifood. A intenção é que o site seja expositivo, para visualização de cardápio.
Quais produtos/serviços serão expostos no site (descrição e pontos fortes)? Qual a forma de contato para adquirir/tirar dúvidas sobre os produtos e serviços?
- Os produtos exibidos serão 6 tipos de poke oferecidos pelo restaurante. Terá a imagem de cada um deles, os ingredientes de levam, tamanhos disponíveis e preços. A forma de contato será através de um link de redirecionamento para o whatsapp.
Será necessário cadastro de usuários, blog? Frequência de atualização?
- Não será necessário cadastro.
Terá uma parte falando sobre a empresa, história, funcionários, vagas, eventos?
- As seguintes seções são estabelecidas: sobre, cardápio e contato.
- Objetivo: Descobrir quais informações estão disponibilizadas em sites de concorrentes, como preço, contato, informações.
- O que é possível fazer nos outros sites?
- No primeiro site analisado, o site é dividido nas seguintes partes: slideshow de fotos dos produtos, header, quem somos, lojas e contatos, tudo na mesma página. As cores laranja, azul e branco são usadas, e lembram as cores do salmão e do mar. O site não permite que façam pedidos, apenas que entre em contato por um formulário.
- O segundo site analisado, o site é dividido nas partes: header (menu com vários guias), slideshow dos produtos, apresentação da empresa, informações sobre as unidades, página para quem quiser abrir uma franquia, cardápio, página de delivery que incentiva o download de um app. O site se distancia um pouco da proposta do Hello Poke, sendo mais direcionado à franquiados e não à clientes. Novamente, a cor laranja é utilizada, assim como preto e branco.
- O terceiro site contém as seguintes sessões: home,quem somos, cardápio, encontre uma loja, mana store, contato. O cardápio é um link para um pdf, não faz parte do site. A paleta de cores contém tons pásteis das cores: rosa, amarelo, azul e verde, o que lembra o clima havaiano.
Wireframes são uma parte crucial do processo de design de interfaces, pois permitem que os designers visualizem e testem a estrutura e as funcionalidades de uma página ou tela antes da criação da interface final.
Nesta seção, explora-se o processo de criação dos wireframes pelo Figma. Os wireframes foram utilizados como base para o desenvolvimento do design final.
O wireframe da página principal do site foi criado para oferecer uma visão atrativa do produto, para que o usuário visualize as fotos do prato e conheça o alimento servido.
São identificadas as informações mais importantes que deveriam ser destacadas na página, como o logotipo, o menu de navegação contendo sobre, cardápio e o contato. Depois, há uma seção dos pratos mais vendidos, com uma breve descrição que direciona para a página do cardápio. Por fim, a página finaliza com o footer, que contém todas as principais seções e informações de contato.
A página Sobre apresenta uma descrição do restaurante, seus objetivos e valores, além de uma foto da fachada, para que os usuários conheçam melhor a empresa.
A página mais importante do projeto, conta com 6 opções de pokes com diferentes proteínas e uma imagem de cada uma delas, assim como descrição e preço. Assim, o cliente pode ter mais detalhes antes de pedir no Whatsapp do Hello Poke.
A seguir, está uma visão geral dos wireframes, que ilustra as escolhas de design e a estrutura da página.
Este protótipo apresenta a solução final de design para o site do restaurante. Ao longo do processo de desenvolvimento, busquei entender as necessidades e expectativas dos usuários para criar uma interface intuitiva e atrativa.
Existem no projeto 3 páginas: Home, Sobre e Cardápio. O primeiro passo foi determinar o estilo usado em todo o site: as cores, tipografia e espaços possíveis. Para melhor formatação e organização, as páginas são divididas em 12 colunas centralizadas.
Com o estilo pronto, o próximo passo foi a criação da primeira página.
A seção principal da página apresenta uma imagem de alguns pratos. Abaixo disso, está a seção de pokes destaques, que apresenta os itens de cardápio mais populares, acompanhados de fotos atraentes e uma breve descrição. Em toda a página existem botões que direcionam o usuário para o whatsapp da empresa, para que possam fazem os pedidos.
Usando o modelo base do wireframe, esse foi o resultado:
No cardápio são mostrados as 6 variações de pokes disponíveis, em formato de lista, com a imagem, preço e descriçao de cada uma delas. Por fim, um botão que leva ao whatsapp da empresa.
Na página sobre, existe uma foto da fachada do restaurante, além de uma descrição dos valores da empresa. Por fim, os ícones de suas redes sociais.
A fim de simular o produto final, a ferramenta de protótipo do Figma foi usada para conectar as seções clicáveis entre si.
Em conclusão, a primeira parte deste projeto, o design de interface de usuário para o site de restaurante fictício de pokes foi uma jornada de muito aprendizado. Como meu primeiro projeto na área de UI/UX, foi um desafio e uma oportunidade para aprender e aprimorar minhas habilidades.
Usando o Figma, pude experimentar e testar diversas opções de design para chegar ao resultado final. Além disso, pude aprender sobre as melhores práticas de design de interface de usuário e como criar wireframes eficientes que serão convertidos em protótipos.
Você pode conferir o protótipo do projeto nesse link
Com esse protótipo como base, dou início à segunda parte do projeto, que é a criação do site com HTML, CSS e Javascript.