Moodboard & Design Walkthrough & Tips w/ Milanote and Figma | Design & Code With Me Ep. 3

Today, I will be moodboarding & designing the website for our upcoming cozy pixel art video game, Wistful Orchids! I'm a software engineer & designer, and I'll be using Milanote & Figma to brainstorm, moodboard, wireframe, and prototype a website design. We'll be discussing how to construct moodboards using Milanote, my own moodboarding process, how I wireframe with Figma, and how I utilize Figma components, variants, and properties to create scalable designs that can tremendously improve the design to code handoff process.

In part 2 of this episode, I will be taking this design and bringing it to life. I'll also go over exactly how what I created as a designer is very easy for me to implement as an engineer. So, stay tuned!

💛 𝙁𝙤𝙡𝙡𝙤𝙬 𝙢𝙮 𝙤𝙩𝙝𝙚𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨 • • • • • •

📱 2022 𝘿𝙞𝙜𝙞𝙩𝙖𝙡 𝙋𝙡𝙖𝙣𝙣𝙚𝙧𝙨, 𝘾𝙪𝙨𝙩𝙤𝙢 𝘼𝙥𝙥 𝙄𝙘𝙤𝙣𝙨 & 𝘿𝙚𝙨𝙠𝙩𝙤𝙥 𝙒𝙖𝙡𝙡𝙥𝙖𝙥𝙚𝙧𝙨 • • • • • •

Check out the product links below if you're interested in any of the items I included in my cozy space! By clicking and/or purchasing from these affiliate links, I get a small commission (at no cost to you) ♡. This helps me out a lot to fund my future videos and creations! 🌸

🛒 𝙋𝙧𝙤𝙙𝙪𝙘𝙩 𝙇𝙞𝙣𝙠𝙨 • • • • • •

𝘿𝙚𝙨𝙠 𝙎𝙚𝙩𝙪𝙥 🪑 --

𝙏𝙚𝙘𝙝 𝙂𝙚𝙖𝙧 🖥 - -

𝘾𝙤𝙯𝙮 𝙇𝙞𝙜𝙝𝙩𝙨 💡 - -

𝙊𝙩𝙝𝙚𝙧 - -

🎶 𝙈𝙪𝙨𝙞𝙘 𝙁𝙚𝙖𝙩𝙪𝙧𝙚𝙙 • • • • • •

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

𝗖𝗼𝗽𝘆𝗿𝗶𝗴𝗵𝘁 𝟮𝟬𝟮𝟭. 𝗠𝗔𝗜𝗦𝗬𝗟𝗘𝗜𝗚𝗛 © 𝗔𝗹𝗹 𝗿𝗶𝗴𝗵𝘁𝘀 𝗿𝗲𝘀𝗲𝗿𝘃𝗲𝗱.

This video is sponsored by Milanote.

#Milanote #Figma #Designer #SoftwareEngineer #CozyGames #Moodboarding #Wireframing

[nathanbryant]

Such good storytelling in this video. I'm no coder, but it made so much sense to me. The reasoning and excellent attention to detail. It's so cool to see this project come to life. It looks so playful, adorable, and adventurous. What a team you all make. I’m excited to witness this journey!

[kellydoesstuff]

i love this series so much! as a girl who's interested in web dev, it's really refreshing to see someone who looks like me making these types of videos !! love how thorough your thought process is, keep up the good work!! :))

[nothingiseverperfect]

HOLY COW THIS IS SO USEFUL DUDE

just following your work flow is a great help, I can’t wait for the next part in the series, HELL YEAH

[maisyleigh]

Let me know what you’d like to see next!! It really helps me determine if I should keep working on this series and sharing my design & coding processes! ☺️ Thank you!!

[juliastelzer]

I can’t wait to see part 2!! Your content has inspired me into learning how to code so I can use my passion for art & design and create wonderful things like you do!! ♡ Keep up the great work, can’t wait to play Wistful Orchids!

[mysweetchubs]

GURLL!! ^o^ So happy this video finally came out! Can't wait to see where this game/website takes off 💪

[dear_rion]

Your design and code with me videos are my favorite and just by watching this episode made me learn more about designing. Can't wait to see this game to come out ☺️☺️☺️

[CrisTryingToBeProductive]

Maisy I'm a fellow software developer. It's always good to find women in STEM that present themselves with such confidence, like you 🙂

[InkedCollection]

This is my favourite series!! You’re the only creator that I drop everything to watch ☺️ Your content is so inspiring and motivating & I’m really keen to see more coding & development videos from you! I’m now also incredibly excited for this game 🥰

[kaylacupp]

I love watching your design and code with me videos! I'm starting to learn front-end development and I find them really inspiring.

[maristaovia]

I've been obsessed with your reels on Instagram for a while now and came to check out your channel. Absolutely love this video, so informative and easy to understand for people like myself that don't know much about design and coding. Love your work! Can't wait for the next episode :)

[luxaethern]

Im a software engineer but I worked as an UI designer before and occasionally still do some designs. Today I work with Figma for development.
I loved to see your creation process! Please, do more videos like this  🥰🤎

[rtyaas]

First i wanna say thank you for making this video 🥺❤️ Awaken my passion for my dream again 🥺🥺🥺🥺❤️😘 Thank you so much!

[tristan]

This game is gonna be the warmest and coziest thing I will experience in my entire life

[InesSilva]

i'm software developer and i really like the way you present your workflow, never thought designing and coding could look like something so relaxing :P

[-jae]

Yay!! Was waiting for this! Thank you, Maisy! I’m excited to watch the video. 🤩

[SegosaurusRex]

Your content is always so inspiring for me. It always keeps me motivated to keep learning code as well as design. Can't wait for part 2! ✨

[UNKNWN]

I just finished the CSS section of my web dev class and watching your videos are so inspiring for me to keep pushing myself and learning more, really appreciate your content and insight!

[fromlumi]

This is such a cute game! I can't wait to see it come to life~Thanks for introducing Milanote I needed an app for my design moodboarding!

[PcHabitat]

This is so amazing, you're living a life where you connected both worlds; Art & Code. Im still trying to bridge them both.