Re: Lotte Lemon Band Website

Responsive Lotte Lemon band website

Last summer, I designed Lotte Lemon’s website. Up until very recently, the website was but a high-fidelity prototype on Figma.

I’ve been wanting to create a live version of the website, but due to my limited coding abilities and the rigidness of most website builders, I felt stuck. When I learned about Webflow, a flexible website builder that utilizes many CSS concepts, I saw an opportunity to bring Lotte Lemon’s website to life.

Although I was unable to replicate the semicircle navigation and the free Webflow plan did not allow for more than two pages, I focused on making the “home” and “music” pages responsive for all devices. Webflow provided several breakpoints from screen widths of 479px to 1920px.

I chose to make a collapsable navigation for screen sizes of tablets and smaller so that the interface was less cluttered and the focus could be on the initial content. I also used the same colors and font as the Figma prototype to match the brand style.

Overall, this was a useful experience in that I was able to learn how to use Webflow and reinforce my understanding of CSS, but there is definitely still much more to learn. You can find the live website at lottelemon.webflow.io.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store