Mobile-First Design In WebFlow

Riley Jones, Coffee Fueled Creative

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (52m)
    • 1. Introduction

      0:54
    • 2. The Mobile-First Approach

      4:44
    • 3. Wireframes

      2:31
    • 4. Moodboards

      0:58
    • 5. Webflow Explained

      0:46
    • 6. Webflow Further Help Info

      0:34
    • 7. Webflow Workspace

      1:21
    • 8. Homepage Foundation

      7:28
    • 9. Styles Pt. 1

      7:00
    • 10. Styles Pt. 2

      7:50
    • 11. Styles Pt. 3

      7:46
    • 12. Styles Pt. 4

      6:53
    • 13. Final Stylings

      2:27
    • 14. Final Remarks

      1:14

Project Description

Assignment

To design a homepage for a restaurant with a mobile-first approach inside of Webflow.

http://three-point-pizza-initial.webflow.io/

We will start with planning out the type of content we want on our site. Then we'll prioritize the content and structure based off of importance. After that comes, wireframing from our content structure. We will then create moodboards for the aesthetic of our site. Once the moodboard is set, we will design our concepts within Webflow.

Deliverables (what you should post in discussion/project site)

  • List of content rated based of a scale of importance
  • Wireframes
  • Moodboard
  • Webflow link for work in progress
  • Post webflow link again when progress has been completed.

Extended Resources

Mobile-First Design

Wireframing Tools

Webflow

Student Projects