Identificar a hospedagem
Apresentar localização, proposta e identidade visual já na abertura.
REBRAND DIGITAL / UX/UI E WEB DESIGN
MORADA
ITAGUARÉ.
Rebrand e redesign
do site da hospedagem.
Pesquisa com a Morada, nova direção visual e uma experiência digital para apresentar a hospedagem, explorar os ambientes e consultar uma estadia. Minha atuação reuniu UX/UI, captação em drone e desenvolvimento.
CONHEÇA O PROJETO ↓
01 / CONTEXTO E AUTORIARedesign do site da hospedagem,
Redesign do site da hospedagem,
da pesquisa à implementação.
O desafio era apresentar a identidade da hospedagem e organizar as informações que ajudam uma pessoa a escolher onde ficar.
A Morada Itaguaré é uma hospedagem em Bertioga, entre a praia e a Mata Atlântica. O projeto, encomendado pela hospedagem, envolveu o rebrand da presença digital e o redesign do site.
Conduzi a pesquisa com a Morada, a definição da linguagem visual, o design das interfaces e a captação em drone. Também desenvolvi o front-end e o back-end do projeto.
O rebrand digital reuniu uma nova paleta, tipografia, grafismos e composição de imagens. A proposta foi dar consistência à apresentação da Morada e conectar a descoberta da hospedagem à consulta de estadia.
- CLIENTE
- Morada Itaguaré
Hospedagem · Bertioga, SP - MEU PAPEL
- Pesquisa, UX/UI, direção visual,
drone e desenvolvimento - ESCOPO
- Rebrand digital
e site responsivo - FLUXO PRINCIPAL
- Conhecer a hospedagem,
explorar e consultar
MINHA CONTRIBUIÇÃO
Conduzi pesquisa com a hospedagem, rebrand digital, UX/UI, drone e desenvolvimento. Reorganizei a apresentação dos ambientes e integrei datas e hóspedes ao início da consulta pelo WhatsApp.
02 / PESQUISA E DIAGNÓSTICOPesquisa com a hospedagem
Pesquisa com a hospedagem
e análise do site anterior.
A pesquisa com a hospedagem e a leitura do site anterior orientaram a organização da nova experiência.
O site anterior já apresentava a Morada e oferecia caminhos de contato e reserva. No redesign, trabalhei a relação entre essa apresentação, as fotografias dos ambientes e as informações práticas para quem está planejando uma viagem.
Defini três prioridades de interface: explicar o que a hospedagem oferece, dar espaço às imagens que ajudam a avaliar a estadia e manter a consulta fácil de encontrar. Essas decisões aparecem na estrutura e nas telas a seguir.
Avaliar os ambientes
Distinguir studios privativos, comodidades e espaços compartilhados.
Consultar uma estadia
Reunir datas e hóspedes antes de continuar a conversa no WhatsApp.
ANTES E DEPOIS / EXPERIÊNCIAS NAVEGÁVEIS
O que mudou na apresentação.
Compare o site anterior com o redesign em funcionamento. Explore o menu e role dentro de cada janela para acompanhar a mudança da abertura às seções da hospedagem.
01 / ANTES
Site anterior
Apresentação com imagem do rio e chamadas de contato e reserva.
moradaitaguare.comABRIR ↗
02 / DEPOIS
Redesign com vídeo
Captação aérea, nova identidade e consulta de datas na abertura.
Morada / redesignABRIR ↗
Da fotografia à apresentação em vídeo
A vista aérea em movimento situa a hospedagem no entorno. A nova paleta, os títulos e os grafismos se repetem nas demais seções.
Acomodação e áreas comuns com funções distintas
O redesign apresenta os studios antes dos espaços compartilhados e reúne detalhes do quarto em uma galeria com comodidades.
Datas e hóspedes antes do contato
A abertura passa a reunir os dados da estadia e preparar a mensagem para o WhatsApp, dando contexto à conversa com a hospedagem.
O Antes carrega o site disponível no domínio da Morada e pode mudar com o tempo. As capturas completas preservam a versão usada na análise. Use “Abrir” para explorar cada experiência em uma aba própria.
03 / ARQUITETURA DA INFORMAÇÃOArquitetura da página:
Arquitetura da página:
da apresentação à consulta.
Organizei a página em torno das perguntas de quem considera uma estadia: onde fica, como são os quartos, o que há no local e como consultar.
A apresentação da marca vem antes dos detalhes da acomodação. Studios e espaços compartilhados têm seções próprias, para que a pessoa entenda o que pertence ao quarto e o que faz parte da estrutura da hospedagem.
Depoimentos, dúvidas frequentes e contato complementam a leitura. Os caminhos de consulta reaparecem ao longo da página, sem exigir o retorno à abertura.
Apresentação
Localização, vista aérea e proposta da hospedagem.
Acomodações
Studios, comodidades e galeria de ambientes.
Espaços
Piscina, lounge, academia e entorno.
Informações
Relatos de hóspedes e perguntas frequentes.
Consulta
Datas e hóspedes para continuar pelo WhatsApp.
04 / REBRAND DIGITAL E SISTEMA VISUALIdentidade aplicada
Identidade aplicada
à experiência de navegação.
A direção visual reúne referências da natureza, da praia e do repertório de surf e reggae presente na proposta da Morada.
O verde profundo cria continuidade entre os blocos de maior imersão. O tom de areia oferece uma base clara para textos e fotografias. O amarelo concentra atenção nas chamadas e nos destaques; o coral complementa a composição.
Ondas, grafismos e fotografias do lugar tornam essa linguagem recorrente ao longo do site. As escolhas visuais acompanham funções de interface: separar assuntos, destacar ações e orientar a leitura.
Verde floresta#123D35 · BASE
Areia#F4F0E4 · LEITURA
Amarelo#F9D45C · DESTAQUE
Coral#DF6044 · APOIO
ALMA LEVE.
A largura condensada permite títulos grandes sem ocupar muitas linhas. O peso forte distingue as aberturas de seção dos textos de apoio.
Conheça os studios.
Planeje sua estadia.
Usada nos parágrafos, formulários e botões, mantém as informações práticas legíveis e diferencia o conteúdo funcional dos títulos.
05 / DECISÕES DE UX/UIDecisões de UX/UI para
Decisões de UX/UI para
avaliar a hospedagem e consultar.
01 / CONSULTA DE ESTADIA
Preparar o contato com dados úteis.
Entrada, saída e número de hóspedes aparecem na abertura. O formulário organiza essas escolhas em uma mensagem para o WhatsApp, evitando que a pessoa precise repetir as informações ao iniciar a conversa.
A ação é apresentada como consulta: disponibilidade, valores e confirmação de reserva continuam com a equipe da hospedagem.
02 / ACOMODAÇÕES
Mostrar o studio e seus detalhes.
A foto principal apresenta o quarto. As imagens complementares mostram mini copa, bancada e banheiro, enquanto a lista de comodidades organiza o que está incluído.
A galeria ampliável permite examinar esses ambientes sem sair da página. A decisão foi aproximar a descrição da acomodação das imagens que a comprovam.
03 / ESPAÇOS COMPARTILHADOS
Distinguir o quarto da estrutura do local.
Piscina, lounge e academia têm fotografias e identificação próprias. Essa separação deixa mais claro o que a pessoa encontra além do studio privativo.
A composição em alturas diferentes dá ritmo à exploração, mantendo a associação entre cada imagem, o nome do espaço e sua descrição.
FOTOGRAFIAS ORIGINAIS DO PROJETO
Acomodações e espaços em detalhe.
As imagens usadas no site permitem avaliar os ambientes reais. Toque em uma foto para ampliar.
04 / INFORMAÇÕES PARA DECIDIR
Reunir dúvidas e caminhos de contato.
Depoimentos apresentam relatos de hóspedes. Perguntas frequentes reúnem informações práticas em respostas expansíveis, e as chamadas de contato oferecem continuidade à consulta.
Esses conteúdos complementam as fotografias: além de conhecer o espaço, a pessoa encontra informações para planejar a estadia.
ADAPTAÇÃO RESPONSIVA E INTERAÇÃOA mesma informação,
A mesma informação,
organizada para o celular.
O layout se adapta à largura da tela sem reduzir a página desktop a uma versão em miniatura.
No celular, as seções passam a uma coluna, os campos da consulta se reorganizam e a navegação usa um menu compacto. O vídeo de abertura tem uma versão vertical própria.
A galeria tem navegação por teclado, as perguntas frequentes podem ser expandidas e o vídeo oferece controle de pausa. Foco visível e acesso direto ao conteúdo complementam a interação.
06 / PRODUÇÃO AUDIOVISUALVídeo para apresentar
Vídeo para apresentar
a hospedagem no seu entorno.
Produzi as imagens em drone usadas na abertura do site.
A vista aérea situa a Morada e apresenta a relação entre a hospedagem, a vegetação e o litoral. O movimento faz parte da primeira apresentação do lugar, antes de a navegação entrar nos detalhes dos ambientes.
A entrega inclui vídeos e posters para desktop e celular. A pessoa pode pausar a reprodução; a interface também considera a preferência por movimento reduzido e a economia de dados.
07 / EXPERIÊNCIA NAVEGÁVEL
Explore o site completo.
Navegue pela entrega, explore as fotos dos studios e dos espaços e veja como o conteúdo e as interações funcionam juntos.
EXPLORAR O SITE EM TELA CHEIA ↗Abrir experiência completa
Morada Itaguaré / redesign AO VIVO
O NOVO SITE, DENTRO DO CASE
Toda a página, da hero ao rodapé, com o vídeo em movimento.
VER ENTREGA E APRENDIZADOS ↓O lugar real, em movimento.
A captação aérea apresenta a hospedagem e seu entorno já na chegada.
Uma linguagem da Morada.
Verde, amarelo, ondas e títulos expressivos conectam a tela ao clima do lugar.
Da descoberta à consulta.
Datas e hóspedes entram na abertura para preparar a conversa sobre a estadia.
08 / ENTREGA E APRENDIZADOSRebrand, UX/UI e desenvolvimento
Rebrand, UX/UI e desenvolvimento
em uma entrega integrada.
O que foi entregue
Um site responsivo com direção visual própria, vídeo de abertura, apresentação dos studios, galeria de fotografias, espaços compartilhados, depoimentos, FAQ e consulta pelo WhatsApp.
A mudança pode ser explorada no comparativo: vídeo aéreo e consulta na abertura, studios com galeria e comodidades e áreas compartilhadas em uma seção própria. O resultado entregue é o site responsivo; ganhos de conversão ainda não foram medidos.
O que orientou as decisões
Separar acomodação de áreas compartilhadas, aproximar fotografias e informações práticas e definir uma ação de consulta coerente com o atendimento da hospedagem.
O aprendizado foi trabalhar identidade e organização do conteúdo em conjunto: a apresentação visual precisa ajudar a pessoa a entender a oferta e encontrar o próximo passo.
ABRIR SITE DO PROJETO ↗Jorge Yasuo / Product Designer
Todos os projetos ↗