Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Design with Figma: One-Page Restaurant Website

via Skillshare

Overview

FLASH SALE: Ends May 22!
Udemy online courses up to 85% off.

Hey there, my name is Adi Purdila, I’m a web designer and developer and this class is about designing a one-page restaurant website in Figma.

Together we'll design a simple website for a fictional restaurant called Birdhouse Bar & Grill. Among other things, it features a nice food menu section, a menu navigation, Instagram photo gallery, a contact form with a map and also a newsletter signup area.

By taking this class, I guarantee you’ll learn 2 things: UI/UX design and Figma.

In terms of UX design you'll learn how to read a project brief and, based on it, create wireframes. But we’ll also discuss information architecture or how we structure the content in the webpage.

Then, it's on to the user interface or UI design. Here, you'll learn how to define the typography so it matches the type of website you're designing and how to pick appropriate colors and apply them to various elements. You’ll learn how to use the 8pt system for spacing and sizing so you'll never have to guess what values to use for margin, padding, width or height. And you'll also learn how to create responsive designs. We'll initially design for large screens and then create versions for medium and small.

And while this is happening, you're also learning how to use Figma for website design. Of course, you'll learn the basics like working with frames, text, colors, shapes, pages and keyboard shortcuts. But also, you'll get a taste of the more advanced features.

You'll learn how to use auto layout for alignment and moving elements around very easily. You'll also learn about the various resizing modes in Figma like hug-contents or fill-container and when you should use each one.

There’s also a class project available so you can follow along and apply the theory.

All in all, I think this class is perfect for beginners because I’ll go through every step of the process — from wireframing to designing a responsive version for small screens.

I look forward to seeing you in class!

Syllabus

  • Welcome
  • The Class Project
  • Wireframing Basics
  • Wireframing: The Header & Hero Section
  • Wireframing: The Food Menu
  • Wireframing: The About and Instagram Sections
  • Wireframing: The Contact Form
  • Wireframing: The Footer
  • Defining the Typography
  • Picking Colors
  • Working with the 8pt System
  • A Quick Introduction to Figma Auto Layout
  • Site Header
  • Hero Section
  • Food Menu Description
  • Food Menu for Steaks
  • Food Menu for Burgers and Sandwhiches
  • Food Menu for Quickies and Salads
  • About Section
  • Instagram Section
  • Contact Header and Sidebar
  • Contact Form
  • Newsletter and Footer
  • Design for Medium Screens
  • Design for Small Screens: Changing the Type Scale
  • Design for Small Screens: Changing the Layout
  • Design for Small Screens: Creating the Overlay Menu
  • The Epic Conclusion

Taught by

Adi Purdila

Reviews

Start your review of Design with Figma: One-Page Restaurant Website

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.