Moodboard & Design Walkthrough & Tips w/ Milanote and Figma | Design & Code With Me Ep. 3
Вставка
- Опубліковано 18 чер 2024
- Check out 𝙈𝙞𝙡𝙖𝙣𝙤𝙩𝙚 at milanote.com/maisyleigh. Thanks Milanote for sponsoring this video!
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!
Give our artist MySweetChubs ( / mysweetchubs ) some love! Her art is CRAZY good and I'm so proud of her and excited for the upcoming game!!
💛 𝙁𝙤𝙡𝙡𝙤𝙬 𝙢𝙮 𝙤𝙩𝙝𝙚𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨 • • • • • •
↳ All My Links: www.liinks.co/maisyleigh
My Instagram: / maisyleigh
My TikTok: / maisyleighs
My Twitter: / maisyleigh_
My Github: github.com/maisyleigh
💌 𝙀𝙢𝙖𝙞𝙡 𝙛𝙤𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙞𝙣𝙦𝙪𝙞𝙧𝙞𝙚𝙨 • maisyleighproductions@gmail.com
📱 2022 𝘿𝙞𝙜𝙞𝙩𝙖𝙡 𝙋𝙡𝙖𝙣𝙣𝙚𝙧𝙨, 𝘾𝙪𝙨𝙩𝙤𝙢 𝘼𝙥𝙥 𝙄𝙘𝙤𝙣𝙨 & 𝘿𝙚𝙨𝙠𝙩𝙤𝙥 𝙒𝙖𝙡𝙡𝙥𝙖𝙥𝙚𝙧𝙨 • • • • • •
Shop My 2022 MUJI-Inspired Digital Planner (shrsl.com/3axnr)
Minimal & Pastel Custom App Icons (shrsl.com/3axnt)
Desktop Wallpapers from / mysweetchubs
- Dreamy Skies Wallpaper: shrsl.com/3axnu
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! 🌸
🛒 𝙋𝙧𝙤𝙙𝙪𝙘𝙩 𝙇𝙞𝙣𝙠𝙨 • • • • • •
↳ My full desk setup & tech gear links here: kit.co/maisyleigh/my-ultimate...
𝘿𝙚𝙨𝙠 𝙎𝙚𝙩𝙪𝙥 🪑 --
• Ergonofis Sway Desk (Maple, White) - shrsl.com/3nok4
• Ergonofis Neat Filing Cabinet (Maple, White) - shrsl.com/33tpo
• Ergonofis Desk Shelf (Maple) - shrsl.com/33tpw
• Ergonofis Cable Management Solution (White) - shrsl.com/33tq0
• Grovemade Wood MacBook Dock (Maple) - bit.ly/2YxoDMy [CODE "MAISY" for 10% OFF! ]
• Orbitkey Desk Mat (Stone) - bit.ly/3tyWSwV
• Grovemade Wall Shelves (Maple) - bit.ly/3zPQ0PL [CODE "MAISY" for 10% OFF! ]
𝙏𝙚𝙘𝙝 𝙂𝙚𝙖𝙧 🖥 - -
• Iqunix Mini-ITX Case (White): iqunix.store/discount/maisyle... [CODE “ITX-Maisyleigh” for $20 OFF!]
• Samsung Ultrawide Curved Monitor (34-Inch, White): shop-links.co/cfGz0sZqzL2
• 2020 Apple MacBook Pro with Apple M1 Chip (13-Inch, Silver): amzn.to/3ewEBvV
𝘾𝙤𝙯𝙮 𝙇𝙞𝙜𝙝𝙩𝙨 💡 - -
• Globe Lamp aka Gantri Cantilever Table Light (Sand) - gantri.sjv.io/LX5N1V [🏷 Code "COZYLEIGH20" for $20 off any lights from Gantri!]
• LED Strip Behind My Monitor: amzn.to/3vlfxPd
𝙊𝙩𝙝𝙚𝙧 - -
• My Floyd Sectional Couch: bit.ly/3zygQuK
🎶 𝙈𝙪𝙨𝙞𝙘 𝙁𝙚𝙖𝙩𝙪𝙧𝙚𝙙 • • • • • •
↳ Lofi Lia // Yoshi Touch & Go - Flower Garden ( • Yoshi Touch & Go - Flo... )
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
𝗖𝗼𝗽𝘆𝗿𝗶𝗴𝗵𝘁 𝟮𝟬𝟮𝟭. 𝗠𝗔𝗜𝗦𝗬𝗟𝗘𝗜𝗚𝗛 © 𝗔𝗹𝗹 𝗿𝗶𝗴𝗵𝘁𝘀 𝗿𝗲𝘀𝗲𝗿𝘃𝗲𝗱.
This video is sponsored by Milanote.
#Milanote #Figma #Designer #SoftwareEngineer #CozyGames #Moodboarding #Wireframing
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!
Hi Nathan!!
Wow thank you so much! This means so much to me. I’m glad this video resonated to you even though you’re not a coder ☺️ I love breaking these concepts down into ways anyone can understand and find interest! Thanks for your engagement on my content as always!
Maisy I'm a fellow software developer. It's always good to find women in STEM that present themselves with such confidence, like you 🙂
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!! :))
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!
Thank you so much Julia!! 💛☺️ We can’t wait too! Keep creating and blending your passions together 💪
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 ☺️☺️☺️
Thank you so much!! I’m glad you learned something new from this episode☺️ more to come!
GURLL!! ^o^ So happy this video finally came out! Can't wait to see where this game/website takes off 💪
Yayy we're the dream team! Our game is gonna be awesome!
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 🥰
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!
I love watching your design and code with me videos! I'm starting to learn front-end development and I find them really inspiring.
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
I love this series so much!! I'm currently on my way developing my designing skills so this series is really helpful for me to understand how the design process is!💓
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! ✨
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 :)
This is so amazing, you're living a life where you connected both worlds; Art & Code. Im still trying to bridge them both.
I absolutely love these design and code with me videos. They're my favorite!
Yay!! Was waiting for this! Thank you, Maisy! I’m excited to watch the video. 🤩
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!
This is so inspiring and relaxing... As an artist and a computer science student, contents like this is something so meaningful and unique... Love it so much... Hope to see more videos like this in the future... Keep up the fantastic work.... 😍😃❤
This looks so interesting! I can't wait for the game to come out and try it out 😆 Your narration are so relaxing and cheerful to hear 殺
This video is amazing. I'm studying graphic design and this was a very insightful video. Beautiful work, I can't wait for the game.
Yeees the video I was waiting for! Thank you so much, I'm always interest in your design process. Love the figma tips
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
omg I love cozy games!! I cannot wait to follow this project with you and eventually play it!
Always enjoyable to watch these! I was thinking of Cosy Grove when you spoke about the game so it was cool to see in the inspiration list!
your videos always amaze me! I want to be a front end developer but I have 0 eye for design, I love to see your work process
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 🥰🤎
Wowww, this game looks amazing and cute already!! I love that you explain your design process..very cools. Can’t wait to play it one day!! 😁🌺🌾
This game is gonna be the warmest and coziest thing I will experience in my entire life
yes it is!! :)
🤯Amazing! I wish I could be that organized! Congratulations and looking forward to part two
This looks so interesting! I can't wait for the game to come out and try it out 😆 Your narration are so relaxing and cheerful to hear 🥰
Thank you so much!! Glad you enjoyed it ☺️💛
love this 🧡can't wait for part 2!
I'm so excited for this series!
Loved this video! Thanks for sharing - looking forward to part 2
Nice work!! Love your brief step by step process! Great editing btw!
i love this so much, can’t wait to play ❤️
can't wait for the next video. It looks really good, and the concept is great
i really love your content
Wow milanote seems really helpful during the research phase of design. I’ll definitely check it out! Thanks!
I discovered you through these videos, and now I'm literally obsessed with your workflow! I binge-watch your videos and hope to see some more similar videos. I am getting into UI/UX and love Web Development. One thing I get confused about is the assets I need before building? For eg., the logo, and images are some. But, how do you get your assets, what are they built on, and what are some assets that one definitely needs?
First i wanna say thank you for making this video 🥺❤️ Awaken my passion for my dream again 🥺🥺🥺🥺❤️😘 Thank you so much!
Wow!!! This is so cool I’m so excited for it! I love pixel art games :)
I simply love you. Your channel is so inspiring! Great video!
Can't wait for the next part
Great video as usua!
I've been enjoying your video from the very beginning of your channel.
This motivates me to create a game ❤️ Thank you for sharing your ideas!
Your setup is so cozy I love it 🥰
I'm getting started in UX UI design and this is sooooooo helpful
I love your videos!! Please make more 🥺
i can't wait to see part 2!
love your content, mood aesthetic so much. and LOVE the fact that you're a WOC coder (i'm in product so just sending some tech sis love). but also....gurl you gonna make me go broke - i just want everything!!!
Thank you so much. I enjoyed it a lot!
Your videos bring me so much joy 🙌🏽 I currently do illustration, but you’ve inspired me to consider taking on software development, hahah 🌸
I really love the way you work
Am so subscribing! Love your content
This is SO good! Love it! 🤗🥰
Can't wait to play the game. Look calming and aesthetically pleasing.
I absolutely loved this! If you ever decide to make more figma vids, I'd absolutely love them! Especially auto-layout haha and maybe your favorite icon plugins?? I can't wait to watch the React video. We basically use Figma and React, so these videos are perfect! Thank you!!
Nice vlogs so productive vlog \\best productive vlogs
Very hardworking maisy and your video is so clear always love your vlogs🌟😍
this is such a gold mine
Thanks for the video, I really liked it.
Damn gurl. you sparked my intrest in making wabsites again lol. i've been having creative blocks for the past days and seeing you making everything crystal clear with smooth research made me wanna go and do make something lol. ima sub and wait for part 2
Can’t wait for this game to come out! Looks so good 😊
Me too!
Thanks Anthony!! :)
Love your vibes and appreciate the knowledge! This channel feels like Animal Crossing come to life.
i love this and i love you 🥺❤️
Milanote the best, thank you!
Nice video, cool project 👍🏻
this is so amazing, i have the brain for design but hate the design process becuase some of the tools are so hard to use. you make figma look so easy T_T. im gonna retry my hand at it and use milanote to plan my other projects!
I really like your videos so much you’re a awesome people I like your keyboard and also your iPad. You are so awesome.❤😊
Great job!
Insightful content as always :D
So beautiful
thank you
I've always been excited for your coding videos as I can relate it to myself more being from the Software Engineering background 😀 Such an amazing video Maisy!!!
I'm late to watch though :(
i like the editing skills :) hope i can do it in the future.
Your video quality is amazing! The video is so calm, lo-fi and enjoyable. But I think it's a better idea to make a work with me with no talking. It will help me so much! By the way, great video!
Thank you for sharing! I’d like to learn more in designing and coding in my free time. I wish one day i will change my job to this industry. You’re my inspiration. :-)
Thank you so much for watching!! :) I'm so happy you enjoyed this video and are inspired by it!! 🥰
this was very insightful. Are those concept arts available to download somewhere?
Nice!💜
I will download the game you’re creating🌸🎉
Question. Im watching all of your episodes for learning purposes 😅. I love your work. In the previous episode you mentioned that you learned code in high school. What type of code would you recommend an upcoming UX/Ui , product designer , web designer to learn ?
I had to use a app design software for a class and Figma was really use friendly. Plus, it has so many public libraries.
yes! it's amazing :)
I hope i get to buy a desktop set like that.
In fact, next year a time like this, i will come back here to tell you guys i made it.
Please like to keep reminding me. :-)
Did you make it?
Great video, it has many important tips, I'm already looking forward to the next video to see how you develop with Reat. One question... Can you recommend any online courses to learn how to develop UI/UX like you do? I think the UI you produce is very nice and clean. Thanks for the great video ^^
Your voice is like a professional narrator.
You’re so talented 🤩👌🏻
aww thank you so much!!
Graceful and Smart
I always admire your video. especially the Samsung screen. it makes me crazy lol
What’s that LED light (soft led that spreads) behind your monitor? Looks fantastic 😊
What cam do you use? I love you and the way you live. So clean and inspiring 🥰🥺
I love setup😊can you put everything in the description of what you bought? And how you did your keyboard? Thx happy COZY Halloween!🎃
Hope that we can have the updates/progress on your game :)
I LOVE your setup. I'm trying to invest in a better setup right now and have never had a monitor before. Yours is a little out of my budget, do you have any others you recommend that are a bit cheaper? Open to anyone with recs !
Awh!
She’s so adorable ☺️
Hey! I've been wondering, what's the roomba look-a-like thing that sits on your desk?
what do you use to make those components, like the Steam and Insta logos? Are they all hand-drawn in a tool like Procreate, or they imported from somewhere else?
i love you so much!!!!!!!!
Hi miss maisy! 😊 ever since I discovered your channel I feel inlove with it already 🥰 and I'm inspired by your videos especially with the work you do 😍 and I really want to switch my career and be software engineer/designer like you. I'm currently a telecom engineer in the Philippines and 26y.o. 😅 and I know it's not yet too late for me to start 😁 Can I just ask 🥺 if what can you suggest that I should study? I'm just really a newbie 🥺 and I'm currently studying HTML and CSS 😅😅 and planning to study more about this field. Hope you notice me. 🥰
I love your channel
Thank you!!
How long did it take you to learn UI/UX design and front end development? Did you take a course/training or just self learn through free resources?
your voice ❤❤❤❤😍😍😍
Important video