Hello there!! 👋
Day 13 - LET'S GO!
Today we'll be designing a wireframe. This could be a landing page, an onboarding screen, a user profile page or something else.
The point is, when we're using no-code tools, we're often worried about making our projects functional but sometimes forget to make them useable. That's why it's super important to hone our design skills and there's no better tool to do that, than Figma.
📝 Task type: Mini (guided) challenge
🧱 Project: Design a wireframe
⏲️ Estimated time: 30 mins
🛠️ Tools: Figma
👇 Steps...
-
Firstly, if wireframe is a new term for you, read this to get acquainted with what it means and the different types of wireframes you can produce.
-
You'll see that wireframes are a great way to plan what you're going to build too, making the build process itself far smoother. With this in mind, write down one or two screens related to a project you want to build. This could be a signup page, profile page, homepage or something else related to your idea. Something that your end users will interact with.
-
Before you begin digitally sketching out your wireframe, now is a good moment to get yourself familiar with Figma itself by watching this video.
-
Now take the idea for the screen(s) you want to wireframe, and begin desiging. Refer back to the best practices of this article to guide you though this process.
-
To improve the design of your wireframe(s), you can also invite your friends or project co-founders to collaborate on the same Figma page.
-
Share your progress by hitting the red button below!
Bonus ➕
If you're looking for more guidance on design in the context of building no-code products, check out this workshop here.
Did you know❓
You can turn your Figma designs into fully fledged mobile apps thanks to Bravo Studio. Feel free to check it out and have a play.
Tomorrow we'll be creating a tweet scheduler.