Designing a responsive landing page
I’ve been using grids as a graphic and web designer, however I hadn’t delved in deeply to the concept of designing on a responsive grid as we did in this week’s content. As I’ve been transitioning from using Elementor [Wordpress] to Webflow, I’ve been encouraged to consider breakpoints over several screen sizes, and the benefits of restricting a design to a responsive grid.
For this weeks challenge we were tasked with adding responsiveness to our product design. Since I wasn’t ready to design my app interface on web, I decided to create my app’s landing page. An engaging website for your mobile app is key to explaining the purpose of your app and getting more downloads (Webflow 2020). I found the landing page a great exercise in applying the visual design guide and creating a journey for potential wastevine users to learn about the app.
In a traditional design grid, the column widths and gutters stay the same, just the number of columns change (Tang 2019). I designed using a 12 column grid on desktop and 4 column on mobile. This way as the screen size gets smaller several elements shift vertically. I wanted to use cut-out material textures to add a tactile element and emphasise the purpose of the app, aligning these to the grid kept them in order facilitated the mobile design transition.
Final prototype
Similar to my initial brand design session, I set myself the challenge to complete the landing page design in a 1-day sprint. Since I had already created the responsive wireframes, I was able to get the first iteration of the design ready in a couple of hours. I posted in the university forum asking for feedback from my peers.
It was extremely valuable to receive several comments from my peers, some of whom knew little about the product concept. They encouraged me to add a section with a clearer intro to the app’s functionalities, improve the readability of the statistics and I’m pleased with the result of the second iteration. I see a few design improvements to be made in the final version, but I will complete these when I create the live version of the landing page, which I plan to create in Webflow. I’m choosing a responsive web design tool which I can use as a functional site as I will be sharing this landing page with Wastevine’s founder Alex who will use it to seek support for the creation of the app.
First iteration with comments
Second iteration
