Riley Jones

Coffee Fueled Creative

42

9

Mobile-First Design In WebFlow.

Introduction

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. 

Overview

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

Assignment

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.

Deliverables

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

Resources

Mobile-First Design

Wireframing Tools

Webflow

Class Outline

Comments

Please sign in or sign up to comment.