November, 2024

Ux / Ui Design

Ux / Ui Design

Ux / Ui Design

Framer

Framer

Framer

Figma

Figma

Figma

My Role:

Web Designer e UX/UI Designer

The challenge:

Create a landing page focused on showcasing the features, benefits, and plans of a music and podcast app. This launch landing page is designed for conversion and driving downloads.

How did I overcome this challenge:

For the launch of digital products, it is crucial to have a clean, clear, responsive, and straightforward landing page, ensuring conversions into downloads for your product.

In this case, I developed a landing page for the Soundbite app, featuring a page with various animations, a clear and eye-catching hero section, and sections highlighting the benefits of downloading the app as well as the available plans. The entire page was designed with a minimalist aesthetic, focusing on clarity of information.


Summary

In November 2024, I embarked on a learning journey by developing a fictional project using the Framer platform. Under the guidance of Professor Kácio at Framer Skills, the main goal was to put design and development techniques into practice, applying knowledge from Figma and Framer, as well as exploring the use of a style guide to create a cohesive and impactful project.

Soundbite

Imagined as a musical entertainment solution for the whole family, Soundbite is an app that offers an extensive library with millions of artists and podcasts. It is designed to bring moments of fun and relaxation, with personalized playlists for any occasion. Whether you want to liven up the atmosphere, unwind after a long day, or discover new artists, Soundbite promises a musical experience that everyone can enjoy.

Style Guide

From the beginning, attention to the style guide was essential. I chose the Lexend typography, known for reducing visual stress and providing a comfortable reading experience. The colors selected followed a harmonious palette that reflected the vibrant identity of the app, ensuring visual consistency across all sections.

Design of the website

The design of the Soundbite website was carefully crafted to provide a modern and engaging experience. Fully responsive, it adapts perfectly to any device, ensuring smooth navigation whether on smartphones, tablets, or desktops. With subtle and interactive animations, the site captures the visitors' interest and guides them intuitively through the content, keeping them engaged.

Each visual element was designed to be eye-catching and highlight the app's features, creating a dynamic journey that encourages exploration and facilitates conversions. The strategic use of colors and typography gives the site a unique and impactful identity, reflecting Soundbite's essence as a vibrant and family-friendly platform.

Hero Section

The hero section of the website was designed to make a powerful first impression. It features striking images that capture the essence of music and entertainment, conveying the energy and dynamism of the app. The copy and phrases are carefully crafted to communicate the main benefits of Soundbite in a direct and engaging way, sparking curiosity and interest.

In the top right of the hero section, a strategically placed call-to-action (CTA) button invites visitors to sign up for the app with a free trial, encouraging immediate action. The button is highlighted with a contrasting color, making it impossible to miss and helping convert visitors into users.

All of this contributes to a visual and interactive experience that motivates the audience to explore more and join the community.

MOMENTOS MARCANTES

A Música perfeita, em um clique.

Descubra, ouça e compartilhe. Suas músicas, playlists e podcasts em um só lugar.

Big Spender

Illusionize, Gorillowz

0:30

-1:48

Drops of Jupiter(Tell Me)

Train

MOMENTOS MARCANTES

MOMENTOS MARCANTES

A Música perfeita, em um clique.

Descubra, ouça e compartilhe. Suas músicas, playlists e podcasts em um só lugar.

Big Spender

Illusionize, Gorillowz

0:30

-1:48

Drops of Jupiter(Tell Me)

Train

MOMENTOS MARCANTES

A Música perfeita, em um clique.

Descubra, ouça e compartilhe. Suas músicas, playlists e podcasts em um só lugar.

Features

The features section of the website was designed to clearly and attractively showcase some of the key functionalities the app offers. With a modern design, this section includes interactive cards that highlight the app's features. When visitors hover over the cards, subtle animations are triggered, providing a dynamic and informative visual experience.

APROVEITE COM AMIGOS

Infinitas Possibilidades

O que existe de melhor no mundo da música para você e toda a sua família.

Milhares de Artistas

Encontre as suas músicas e artistas favoritos em um só lugar.

Escute Offline

Baixe suas músicas e podcasts favoritos e escute quando quiser.

Compartilhe

Faça playlists, escolha músicas e compartilhe.

APROVEITE COM AMIGOS

APROVEITE COM AMIGOS

Infinitas Possibilidades

O que existe de melhor no mundo da música para você e toda a sua família.

Milhares de Artistas

Encontre as suas músicas e artistas favoritos em um só lugar.

Milhares de Artistas

Encontre as suas músicas e artistas favoritos em um só lugar.

Escute Offline

Baixe suas músicas e podcasts favoritos e escute quando quiser.

Escute Offline

Baixe suas músicas e podcasts favoritos e escute quando quiser.

Compartilhe

Faça playlists, escolha músicas e compartilhe.

Compartilhe

Faça playlists, escolha músicas e compartilhe.

APROVEITE COM AMIGOS

Infinitas Possibilidades

O que existe de melhor no mundo da música para você e toda a sua família.

Milhares de Artistas

Encontre as suas músicas e artistas favoritos em um só lugar.

Milhares de Artistas

Encontre as suas músicas e artistas favoritos em um só lugar.

Escute Offline

Baixe suas músicas e podcasts favoritos e escute quando quiser.

Escute Offline

Baixe suas músicas e podcasts favoritos e escute quando quiser.

Compartilhe

Faça playlists, escolha músicas e compartilhe.

Compartilhe

Faça playlists, escolha músicas e compartilhe.

Benefits

The benefits section of the website was designed to highlight all the advantages users gain by choosing the app, emphasizing how it can transform the music and entertainment experience. With a visually appealing layout, this section clearly communicates the key benefits, using icons and descriptions that make reading easy and engaging.

O MUNDO NA SUA MÃO

Seus artistas favoritos, sempre por perto.

As Melhores Músicas

Já pensou encontrar todas as suas músicas em apenas um único lugar, sem dificuldades.

Biblioteca Personalizada

Crie as suas bibliotecas do jeito que sempre sonhou e escute quando e onde quiser.

Descubra Universos Novos

Você tem dificuldade de encontrar músicas novas temos um sistema de recomendação avançado.

O MUNDO NA SUA MÃO

O MUNDO NA SUA MÃO

Seus artistas favoritos, sempre por perto.

As Melhores Músicas

Já pensou encontrar todas as suas músicas em apenas um único lugar, sem dificuldades.

As Melhores Músicas

Já pensou encontrar todas as suas músicas em apenas um único lugar, sem dificuldades.

Biblioteca Personalizada

Crie as suas bibliotecas do jeito que sempre sonhou e escute quando e onde quiser.

Biblioteca Personalizada

Crie as suas bibliotecas do jeito que sempre sonhou e escute quando e onde quiser.

Descubra Universos Novos

Você tem dificuldade de encontrar músicas novas temos um sistema de recomendação avançado.

Descubra Universos Novos

Você tem dificuldade de encontrar músicas novas temos um sistema de recomendação avançado.

O MUNDO NA SUA MÃO

Seus artistas favoritos, sempre por perto.

As Melhores Músicas

Já pensou encontrar todas as suas músicas em apenas um único lugar, sem dificuldades.

As Melhores Músicas

Já pensou encontrar todas as suas músicas em apenas um único lugar, sem dificuldades.

Biblioteca Personalizada

Crie as suas bibliotecas do jeito que sempre sonhou e escute quando e onde quiser.

Biblioteca Personalizada

Crie as suas bibliotecas do jeito que sempre sonhou e escute quando e onde quiser.

Descubra Universos Novos

Você tem dificuldade de encontrar músicas novas temos um sistema de recomendação avançado.

Descubra Universos Novos

Você tem dificuldade de encontrar músicas novas temos um sistema de recomendação avançado.

Plans

The pricing section of the website was designed to be clear and informative, allowing users to easily compare options and choose the one that best fits their needs. With an attractive and organized visual presentation, the section displays three different plans, highlighting their key features and prices.

Using a contrasting color, we draw attention to the recommended plan, helping users make their choice and facilitating conversions.

O QUE COMBINA COM VOCÊ

Preços especiais de Planos

Mensal

Anual

Começando

Gratuito

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Download limitado

Acompanhe e compartilhe

Podcasts selecionados

Profissional

R$ 15,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Baixe e ouça quando quiser

Faça playlists personalizadas

Mais de 30 mil podcasts

Família

R$ 24,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Tudo do plano Profissional

Até 4 membros da família

Playlists compartilhadas

Mais de 30mil Podcasts

O QUE COMBINA COM VOCÊ

Preços especiais de Planos

Mensal

Anual

Começando

Gratuito

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Download limitado

Acompanhe e compartilhe

Podcasts selecionados

Profissional

R$ 15,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Baixe e ouça quando quiser

Faça playlists personalizadas

Mais de 30 mil podcasts

Família

R$ 24,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Tudo do plano Profissional

Até 4 membros da família

Playlists compartilhadas

Mais de 30mil Podcasts

O QUE COMBINA COM VOCÊ

Preços especiais de Planos

Mensal

Anual

Começando

Gratuito

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Download limitado

Acompanhe e compartilhe

Podcasts selecionados

Profissional

R$ 15,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Baixe e ouça quando quiser

Faça playlists personalizadas

Mais de 30 mil podcasts

Família

R$ 24,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Tudo do plano Profissional

Até 4 membros da família

Playlists compartilhadas

Mais de 30mil Podcasts

O QUE COMBINA COM VOCÊ

Preços especiais de Planos

Mensal

Anual

Começando

Gratuito

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Download limitado

Acompanhe e compartilhe

Podcasts selecionados

Profissional

R$ 15,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Baixe e ouça quando quiser

Faça playlists personalizadas

Mais de 30 mil podcasts

Família

R$ 24,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Tudo do plano Profissional

Até 4 membros da família

Playlists compartilhadas

Mais de 30mil Podcasts

O QUE COMBINA COM VOCÊ

Preços especiais de Planos

Mensal

Anual

Começando

Gratuito

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Download limitado

Acompanhe e compartilhe

Podcasts selecionados

Profissional

R$ 15,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Mais de 50 milhões de músicas

Baixe e ouça quando quiser

Faça playlists personalizadas

Mais de 30 mil podcasts

Família

R$ 24,90/mês

Perfeito para você começar a escutar no seu dia a dia.

Tudo do plano Profissional

Até 4 membros da família

Playlists compartilhadas

Mais de 30mil Podcasts

CTA

The last section of the website is an impactful call to action (CTA), strategically designed to motivate users to download the app. With an attractive background color, such as a shade of purple, this section stands out visually and ends the page with an irresistible invitation to take action.

CONSTRUÍMOS JUNTOS

Preparado para criar o seu universo

Encontre os seus artistas, playlists, podcasts e musicas preferidos em um só lugar.

CONSTRUÍMOS JUNTOS

Preparado para criar o seu universo

Encontre os seus artistas, playlists, podcasts e musicas preferidos em um só lugar.

CONSTRUÍMOS JUNTOS

Preparado para criar o seu universo

Encontre os seus artistas, playlists, podcasts e musicas preferidos em um só lugar.

Conclusion

After creating the entire website, I can say that this journey was extremely enriching, providing significant learning about using Framer and its advanced tools for creating interactive websites. Throughout this project, I applied various concepts and techniques that strengthened my understanding of modern and responsive design.

I used style guides to maintain visual consistency across all sections, ensuring that the website’s identity remained cohesive and appealing. I worked with a strategically chosen color palette that not only reflected the vibrant identity of the app but also helped highlight important elements such as call-to-action (CTA) buttons and key sections. The careful application of CTAs was crucial for guiding users intuitively and encouraging them to engage with the content and download the app.

The entire process taught me the importance of creating interfaces that are not only visually attractive but also functional and conversion-oriented. My experience with Framer has given me more confidence and skill to develop future projects with greater creativity and precision.