Riley Jones

Coffee Fueled Creative



Mobile-First Design In Webflow.


Project Description

The goal of this project is to have a better understanding of how to take the mobile-first approach when it comes to designing content in Webflow. We will consider practices of UX and UI when it comes to structuring content and deciding how to display the right information on a mobile-screen. Within the webflow platform, we can easily take our designs and put them into a working prototype to where we can see it in a live environment. 


  • Mobile-First Design
  • Brief Intro/Setup For Webflow
  • Goals and Wireframes
  • Moodboarding
  • The Visuals
  • Webflow Transfer
  • BONUS: Interactions and animations with WebFlow


To design a homepage for a restaurant with a mobile-first approach. We'll start with wire-framing and focusing on content structure. From there, we'll move to moodboarding and getting a good sense of the aesthetic of our site. Once the moodboard is set we will design our concepts and then build them within Webflow.


  • Mobile First Wireframe
  • Moodboard
  • Mobile First Design
  • Link to webflow site.


Mobile-First Design

Wireframing Tools


Class Outline


Please sign in or sign up to comment.