Creating MySweetChubs’ Art Portfolio Website • Design & Code With Me Ep. 2
Вставка
- Опубліковано 26 чер 2024
- Design & Code Vlog (Episode #2) | Today, I will be building illustrator and animator, MySweetChubs's, art portfolio website.
From moodboarding, to Figma wireframing, and finally to code, follow along as we use her illustrations as inspiration.
Check out Figma to start designing: psxid.figma.com/gtjioxnshenb
(EDIT 8/31/21 - The website is down temporarily, but will be up shortly! For now, visit this link! bit.ly/3DxrFQM)
Learn more about how and why I became a front-end software engineer and designer as you design and code with me! Don't forget to watch till the end to see the final results!
Like, comment, and subscribe if you want to see more design to code tutorial vlogs.
🎨 Check out @MysweetChub's website here & follow/support her art!
↳ art portfolio website: bit.ly/3DxrFQM
↳ mysweetchubs instagram: bit.ly/mysweetchubs-instagram
↳ mysweetchubs etsy shop: bit.ly/mysweetchub-shop
📋 Check out Taskade's Ultimate Design System Checklist to start moodboarding and designing:
↳ bit.ly/ultimate-design-system...
Follow me on Instagram to stay updated on my content & to get to know me more!
↳ / maisyleigh
Keyboard used in this video:
iqunix.store/discount/maisyle...
Code "maisyleigh" for 5% off!
┄┄┄ Try out @Taskade ! (it's completely free) ┄┄┄
↳ www.taskade.com/
↳ Use the code “MaisyLeighUA-cam" for 100% OFF LIFETIME free upgrades of their Taskade Premium Plans.
↳ To signup for free, simply visit www.taskade.com/signup
↳ To upgrade any workspace, login and visit www.taskade.com/billing
┄┄┄ Timestamps ┄┄┄
0:00 Intro 👋🏼
0:30 Brainstorming & Collaboration
1:54 Ultimate Design System Checklist (bit.ly/ultimate-design-system...)
2:40 Moodboarding (Figma, Taskade, Calligraphr)
4:15 Wireframing Website Design (Figma, GoodNotes)
5:45 My Design Principles (bit.ly/maisyleigh-design-process)
6:29 How & Why I Became A Frontend Engineer & Designer
7:58 MySweetChubs Art Portfolio Website Reveal 🎉 (bit.ly/mysweetchubs)
8:52 Animated End Credits
┄┄┄ Other Videos of Mine You'll Also Enjoy! ┄┄┄
Design & Code With Me Ep. 1 - Building My Personal Website: • Building My Personal W...
What's On My iPhone (featuring my custom designed wallpapers & app icons): • What's On My iPhone | ...
My Process for App Design, Ideation, & Getting Inspired: • My Process for App Des...
Work From Home Office & Desk Setup: • Creating My New Produc...
┄┄┄ Download My Used VS Code Themes ┄┄┄
Pastel Night Theme: bit.ly/vscode-pastel-night-theme
Stardew Valley Icon Kit I Use: bit.ly/vscode-stardew-icon-theme
┄┄┄ Previous Video Collaborations with @MySweetChubs ┄┄┄
Building MySweetChubs' Chubby Orange Portable Speaker (From Illustration, 3D printing, to Painting): • Building MySweetChubs'...
┄┄┄ 🖥 Shop my desk setup & tech gear here ┄┄┄
↳ bit.ly/maisyleighgear
┄┄┄ 📱 Purchase my app icons, digital planners & digital wallpaper sets here ┄┄┄
↳ bit.ly/maisyleighshop
┄┄┄ Follow For More Content ┄┄┄
My Instagram: / maisyleigh
My Twitter: / maisyleigh_
My TikTok: / maisyleighs
My Dribbble: dribbble.com/maisyleigh
My Github: github.com/maisyleigh
💌 : maisyleighproductions@gmail.com
┄┄┄ Music Featured ┄┄┄
↳ Lofi Lia // Knuckles' Chaotix - Door Into Summer ( • Knuckles' Chaotix - Do... )
↳ Lofi Lia // On The Beach ( • Yoshi's Story - On The... )
┄┄┄ About Maisy Leigh ┄┄┄
Hi! I'm Maisy, and I'm sharing my story of how I live a cozy lifestyle, find peace, and create new things. I'm a visionary, frontend engineer and designer - and I love ideating solutions that facilitate people's everyday lives, sketching them out and bringing them to life.
I've embarked my content creating journey to share my story, as I navigate life. I love being able to share my creativity through this platform.
I love composing my own songs on the piano, gardening, playing video games, drinking matcha and coffee, archery, hiking, interior designing, ideating & wire framing app ideas, graphic design, and engineering.
┄┄┄ Copyright 2021. MAISYLEIGH © All rights reserved. ┄┄┄
#Design&CodeVlog #SoftwareEngineer #Designer #PersonalWebsite #UXDesigner #WebDevelopment #WebDesign #CodingVlog #DesigningVlog
I hope you all enjoy our video! It was so fun working with my sister on it. Thanks SO MUCH Maisy🥰 Can’t wait to see what else we make together in the future!
thanks mui mui!! can't wait to work with you more as well and see what other chubby creations we will make together :)
@@maisyleigh keep up the good works! 😉
simple yet aesthetic, great job.
You are so talented!!!
@@maisyleigh Your sister could do videos about making her art in her own channel.
Some things i’ve learned:
1. Always have an idea! This is coming from someone who’s lost and just do things just because. It’s beyond frustrating too when it doesn’t come out the way you want it too.
2. Take your time! don’t rush it.
3. Make sure you have something you want to take a way from it!
4. Don’t beat yourself up you’re doing good!
5. Simply just have fun! even if you don’t complete a website fully or have no idea what you’re doing that’s okay, have fun with it!
You're so inspiring in many ways. I was always dreadful about the web-design and kept running away from it. Coding felt like a chore, and it was overwhelming in many ways. Watching your video, seeing you calmly explain the process, my confidence is rising, and I can feel myself developing a joy to learn to code. Perhaps discovering your videos was all I needed to break through my inhibitions. Thank you for making yet again an amazing video.
hi tina! thank you so much! i felt very similarly when i learned coding in school, and just didn't feel happy or inspired to do it. i love how you describe it as feeling like a 'chore', because that reminds me of how i felt too. but i think what really changed things for me, is intersecting my creative passions into what i build - and that made the experience of coding wayyy more fun and entertaining for me.
thank you so much for your comment :) and best of luck! excited to hear your journey and see what you create
Just a single sentence-
There was too much brainstorming and creativity, inspired me ALOT, and i really needed it.
thank you so much!! :D im glad you find inspiration from it!
It's really rare to find the people with exceptional design and coding skills.
You are one of them..
You inspire me to learn figma and designing.
More power to you girl! 💕
thank you so much srujan!!
Watching this video was amazing. I lost all my creativity and passion throughout my CompSci degree. Seeing that you use code more as a helpfull tool to implement your beautiful designs and give life to your creative ideas was so inspiring. This is exactly what I aspire to do.
Still in awe of your story telling ability. Looking forward to the next one in this series.
hi seaton! nice to see you here! thank you so much! glad you enjoy it :)
This video was so inspirational! From the cozy vibes, your narration, your sister's drawings, your desk setup, etc. Thank you for uploading these comfy vids, they're super aspiring to me who's just learning how to code!
glad you enjoy them! thank you for your support
I wish I had a sister as supportive as you with art career! 🥺
oh my gosh i think I just fell in love!!!! seriously, the voice over, the aesthetics and don't even get me started on you and your sisters work. even though i have two years before i start uni, i thought i found my calling in environmental engineering but this has me considering my decision. oh and let me just tell you that I'll be binge watching all of your videos! 💗⭐️
Hi Shanice!! Awwh thank you so much! I'm so happy you enjoyed this video and I hope you enjoy my other ones tooo ^_^ Thank you!
Offtopic but we have the same name AND my last name starts with M 😭
@@neattea3452 what a coincidence 😂😅
huge thanks to @mysweetchubs for this collab, your art is so aesthetic, and filled with cozy vibes. 💛🪴🎨
check out the art portfolio website we made here!
bit.ly/mysweetchubs
and support and follow her art here!
↳ mysweetchubs instagram: bit.ly/mysweetchubs-instagram
↳ mysweetchubs etsy shop: bit.ly/mysweetchub-shop
how about adding animate on scroll?
i had this implemented, but since the illustrations had gifs, it was too much movement on the page. at some point i plan to figure this out and push it to the website :)
I Definitely love how you integrate you with all things on your page.
Also I think you should try to load the font faster. Page has a bit of log with fonts
I resonate with this 100%, I too learned to code in high school, I loved it but was not prepared to study and spend the rest of my life mindlessly coding, now as a university student studying graphic design, I was delighted to discover UI/UX. I now am able to combine two things I love and enjoy.
what course do you recommend for beginners i also like graphic design and ui/ux, and is it possible to do both ui/ux and graphic design?:)
Before i even finish it, i am so happy to see an ep.2 of this ~
wait until ep 3 comes out :D
im studying swe and this definitely inspires me so much more, love this series !
so glad i found your channel! i've always LOVE watching aesthetics youtube videos but they are mostly about home decors and life philosophy.
your channel incorporates designs which is what i do as a career so its easier to relate and find inspirations from.
i learn SOO MUCH from you.
thank you for putting in all the work that you do into your contents
It's sooo calming to see your work space... Those pleasant colors, the things around omg .. I love it ❤️❤️
This is absolutely incredible! It really is alive and so adorable-such a good story behind it. You both did such an excellent job.
thank you so much Nathan!! so glad you enjoyed this video!
To be honest, I've never feel so attached to a youtuber before. I've been your subscriber since your first video and watched all of them the moment they are upload. I don't know why, maybe it's your personalities and values that made me appreciate my life more but regardless, I will always be your supporter. Pls continue to produce good video Maisy!
hi jia! thanks so much for being here since my first video! your comment means so much to me, and no comment you post goes unread :).
you motivate me to keep creating, and remind me that my videos & work helps people out there. so thank you!
Thank you for creating this! I just embarked in ux design field few weeks ago and saw your channel back then. You are one of my biggest inspiration in becoming a good ux design that want to bring good impact to the world. I feel like i keep jumping from one field to one field in terms of career as i havent find one that really fullfil me. When you said by being a ux design fulfill your creative needs, i feel the same too. Like, i always have an idea and become so passionate about it that ux and coding is like a way to make it into tangible thing. I believe this video takes hours to finish it but you make it so seamless and easy. And your sisters art is, so pretty 🥺
Keep creating and inspiring 💕
hi deidre!
aww.. thank you so much for leaving this sweet comment 🥺💛. im truly flattered you find inspiration from my youtube videos and you inspire me to want to create more.
i feel you when you said jumping from one field to another - and my advice is, create things you want to create - even if your current career limits you to a specific thing. you can be as creative you want outside of your career, and your creation will reach other people's lives the more love you put into it!
so excited to see what you create
Yayyy! I was looking forward to your videos!
thanks for being here :) hope you enjoyed this video!!!
I love what you do. You get to express your creativity and work with others. It is my dream job. Please please share how you learned to code and the experience you've had over the years. thank you and can't wait to hear about it!
You inspire me to follow the UI / UX path without abandoning programming, just the motivation I needed, i really love ur work ♥
hi monica! thank you so much. im so glad you enjoy my work and are inspired to keep creating without limitations.
I’m learning to code currently! I want to go into software development when I’m older, it’s cool seeing someone doing what I want to! Have a wonderful day! :)
this video is so good - from the amazing storytelling, beautiful b-roll, breakdown of the design process to that inspiring message about how code can be used to express our creative side! well done maisy!
thank you so much!! im so glad you liked this video :D i had so much fun making it
I relate so much to your dilemma with combining your creative side with such a logical one. I am so glad I discovered you! I’m inspired by what you’ve accomplished
The way she narrates is very relaxing.
i recently stumbled across your channel while looking through aesthetic keyboards, as you had done a review on them, but i delved in deeper and fell in love with your cute, cozy, and aesthetic vibe! i'm a student who aspires to be able to do things like web coding and design and have an energy like yours, and i was waiting for episode 2 to come out when i saw episode 1 of this series! i really look up to you, and you've got another subscriber ♡
thank you so much for deciding to stop by and watch my other videos!! im so happy to have you join our community :)
reading comments like yours keeps me going, and reminds me that people out there truly enjoy my content and that its worth for me to keep doing ~ so thank you for inspiring me as well and pushing me forward!
love, maisy
Wow!!! This was amazing!! Whenever I feel unmotivated or uninspired I watch your Videos and get back to work because I feel so inspired and motivated again haha! Thnaks for this insane Video!
You’ve inspired me to learn to code. Thank you! These videos are my favorite of yours 😍
This was so relaxing and inspiring to watch!!!
thank you!! so happy you enjoyed it :)
This was an awesome video, Maisy! Great to see the connection between design and code. Love your sisters artwork too!
Ahh thanks so much Tom! 🙂 so glad you enjoyed this video !! It was a lot of fun to create. Thanks for the shooting tips too 📸
So sweet how you're helping your sister ❤️ Your passion for uiux and storytelling is really inspiring.. the final page looks AMAZING! So talented (both you and your sister!!)
hi jane!! thanks sooo much!! im so happy you liked this video and the website final results :D i had so much fun making it and working with my sister! :)
I love this so much! You both are artists and always create such amazing thing 😍
ahhh hi luna!!
I really enjoy when i watch your videos 💛
Another inspirational masterpiece, Maisy! Totally loved it! Never thought coding and designing together could be such artistic. Simply amazing! 🙌
hi henry!! thanks so much :D glad you enjoyed it. yes! important to combine all your passions together - and see the amazing things you can create!
You make development look so easy. I'm getting my feet wet as a web developer and am really struggling. Yet somehow when I watch your videos, you make me want to try harder and really work at it.
I love this so much! I kinda felt before that maybe coding isn’t for me and there is no way I could love it since I loved designing more and I was not willing to learn coding before because it drains me. But who would’ve thought I could give coding a chance, I think it is very fun once I get to truly bring my UI/UX designs to life with code. Thank you so much for this series! I love every second of your videos, it is relaxing at the same time I could learn a lot of things from it, plus your voice is very very soothing! 😊😊
Hi Desiree! I'm so happy you enjoyed Episode 2, and that you watched it after Episode 1!
To be honest when I first started coding, I felt exactly like how you describe. But I think the better you become at designing, you start to design with the mindset of "how will i build this too?". Overtime, this practice makes you better at creating designs that can be easily translated into code. Your designs become smarter. And, vice versa. Your code can be structured and built to easily put out designs.
I'm so happy you watched my video, and thank you so much for your sweet comments! Best of luck and always don't hesitate to ask questions!
the video has inspired me to work, I am a front end developer and I found your website very beautiful and aesthetic, I am struggling in the same thing, I can't find pleasure with coding but I found it in design, so thanks a lot
Wowww I can tell a lot of hard work and love went into make this. It’s so cute!! The website turned out amazing!! Can’t wait to see what you guys put out in the future! ☺️
Thanks Gracie’s!!! We love you girlsss 🐧💛✨
Hiyeeee! I just want to say that you’ve inspire me to really push and pursuit my dream of doing app development and UI/UX design. I’ve had this passion since I was young unfortuntely, I chose a different path but I ended up as an app QA, which is within the same space. But I really wanna go beyond that and do something I really want, since I am also an artist. Thank you for your videos, they are not only relaxing but very inspiring.
i really love seeing other designers bring their ideas to live .. great work.. keep it up!
I have no reason to build a website right now, but this reminds me of my middle school phase where I was obsessed with designing websites. I'm definitely going to try that again haha
I hope there's full tutorial on how you develop your site including how did you do the animation video as well as the picture you used for the website.✨
I've come across your channel many times and I'm starting to think this is no longer just a coincidence lol. When you described your journey with infusing code and design, it really spoke me, as I was in the exact same position! Definitely subscribing to tune in to more recent videos :)
Loved this video! I’m inspired to get into coding more to bring my designs to life as well 👏
I love your channel. You are doing excellent! I like the aesthetic vibe that I get when I watch your videos. It’s like a heaven to me😍
You are amazing! I discovered your channel yesterday and I can’t stop watching your videos ☺️ As a software developer myself, you inspire me a lot in designing my own portfolio as well. Great job!
Cuteness overload! I love the colors, artworks, etc. everything looks so eye-pleasing
Thank you so much!
also can I just say -- your B-Roll is next level 💖💖💖💖 it's such a pleasure watching your videos! 🌸
ahhh youre the best 💛
This was incredibly satisfying
Talented family!
thank you so much!
Thank so much for this video. Please, do more. Love you 💞💞
I was hypnotized..
I CAN HEAR YOSHI'S STORY - ON THE BEACH!! GLAD I SUBBED ❤️
The animated header is great. Also liked the Knuckles Chaotix and Yoshi music.
this inspired me to keep going on studying code. thank you.
Love love love this video!
thank you so much!
I looove these videos!!! And I love this series! You're videos are so well done!
thank you so much!! so happy you enjoyed it and that you like this series!! :D
¡Vaya! ¡ Que talento!
OMG this is so cutee and inspiring !!
I love your story telling, videography, editing so so much !
The way you integrate creativeness with technology is so good to see as a viewer.
I cannot represent everyone..but for me you are so inspiring and I look up to your videos and channels so much
thank you so much!! im so happy you enjoyed this video and the website that we created!
i will keep making more of these!
If you're reading this comment, one small positive thought can change your whole day & believe you can and you’re halfway there.✨✨😍😍
I loveee this!!
Maisyleigh is easily becoming one of my favorite UA-camrs 🤍 I love how her videos are so well thought out! Always so very creative and cinematic. I hope you never stop creating. 🥰 It was so nice to see your sister in a video too!
Thank you for this video!
Another web and design video. Your vlogs inspires me to be better at designing and being creative 🥺😊
hi michelle! thank you so much!! im so happy you enjoyed this one
Love this!!! 🥰
what a talented family!
This is an amazing video !
This is absolutely incredible work! I'm a backend engineer and wish I had your creativity for design.. Hats off!
Y are so inspirinng ❤ thank u for this positive vibes and inspiration
Another awesome video yet again. I really love your content around your design and development process. Looking forward to the next one 😀
thanks so much Mark!! glad you enjoyed it :D
Awww... this website feels so nice and cozy! Thank you for sharing your process!!!
I just checked the website and... it seems to be down!
The website is soooo cute!! Really enjoyed learning how it came about!
Keep doing, keep making and that's right inspiration comes from anywhere and that connects
Always!
I love your videos so much.
Am learning how to code and design.
Love from Nigeria ♥️♥️♥️♥️♥️
This is very relaxing.
btw(great vid.)
for real. i want to be ur apprentice both in designing and coding😍
WOAHHH. VERY PRETTY AND AESTHETIC 🥳. I love how the website turned out 🥳
THANKS jamesies!!! :D glad you enjoy how it turned out!
cute design, and inspiring color 👏👏👏
This was so relaxing and amazing video.... Thank you for making the weekend awesome.Waiting for more like these ✨😀
thank you so much!! im so happy you enjoyed it. have a great weekend :) i will be back with more!
Amazing Idea, Amazing Design, Amazing Video.
Informative and Inspiring video. Loved it.
glad you love it!
This was so thoughtfully made and I love how you created everything on the website down to the color scheme. I hope to use this as inspiration in designing my own unique portfolio website. Thank you for this ^^
Glad it was helpful!
it came out sooooo good!! I interned this summer and worked with reactjs and I would love to eventually do front end engineering also with design. I just wish I had the eye for design and was able to draw!
thank you so much!!! im so glad you enjoyed it! keep practicing when designing, with each thing that you design, the better you get. :)
This is so inspiring 😍 You both are awesome! I love seeing the fusion of illustration and tech 💕
hi lucy!! thanks so much for stopping by and watching our video!! 🥰 it was so fun working with my sis and mixing in art + code. what you do on a daily basis :)
AMAZING! Such an inspiration!
THANK YOU!! :D
Your work is so pretty and well done! LOVE IT!
thank you so much!!!!! glad you love it!
This is amazing 🌸
very pleasing to watch...please more :)
glad you enjoyed! more to come
this series keep me so inspired to create designs and learn more about coding, i love it 💛💛
thanks so much !!
@@maisyleigh thank YOU for the content :D
I love it. You inspired me a lot. Thank you so much
Great job maisy! You are a huge inspiration!
Thank you so much!
wow... this is incredible, you are so talented!
Thank you so much!
You're so great!
Ahhh I have a new favorite youtuberrrr!
awhh thank you!!
beautiful work. love your videos! everything is too wonderful
thank you so so much!!
I really like your table and color pattern of your overall setup, it's beautiful :)
Just beautiful!
Thank you!
awesome
Really I love your channel so much your pastel colors and the warm and cozy ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤💟💌
my gosh this video is so inspiring
glad you enjoyed it!