When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
Design with Figma: One-Page Restaurant Website
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.
This Course Includes
skillshare
0 (0 reviews )
5 hours 53 mintues 
english
Online - Self Paced
course
SkillShare
About Design with Figma: One-Page Restaurant Website
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
What You Will Learn?
- 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!.