Design with me ✨ My full web design process using Figma & Squarespace
HTML-код
- Опубликовано: 14 авг 2024
- My step by step process for designing a website for a client starts with gathering inspo from Pinterest, brainstorming brand concepts in Illustrator, designing in figma and building it out in squarespace. Let me know what you think!
I plan to do more Design With Me videos, as well as a more in depth video on how I use custom CSS in Squarespace websites soon. Stay tuned 😊
If you're interested in working with me on your own website fill out this form!
www.jenwebbdes...
✿✿✿
WHERE TO FIND ME
/ jenwebbcreates
/ jenwebbcreates
my web design website: www.jenwebbdes...
my art portfolio: jenwebbcreates...
spoonflower shop (wallpaper, fabric, home decor):
www.spoonflowe...
✿✿✿
IN THIS VIDEO
wordmark (visualize fonts installed on your computer): wordmark.it/
figma (design program): www.figma.com/
adobe illustrator: www.adobe.com/...
website builder (squarespace, not sponsored 🥲): www.squarespac...
squarespace ID finder (chrome plugin): chromewebstore...
✿✿✿
CAMERA EQUIPMENT
small tripod: amzn.to/3SeKVuN
big tripod: amzn.to/3Oiy5KF
camera: amzn.to/3Sv2zeN
microphone: amzn.to/3SsGX2K
✿✿✿
♫ music: artlist.io/ref...
✿✿✿
All opinions are my own. Some links listed are affiliate links which means I earn a small commission if anyone decides to purchase through them. Thank you so much for your support!
chapters
00:00 intro
00:28 gathering inspo
01:41 branding
03:39 designing in figma
05:35 building in squarespace
07:46 mobile styling 
Хобби
I recently took an "Advanced SquareSpace Design Course" through ilovecreatives. The entire course was about how to manipulate SQSP with custom CSS... then at the end we were instructed to build our custom site using Figma (but zero instruction was offered on Figma). So, I have since learned Figma, which has basically convinced me that I am better off with Webflow or Framer than SquareSpace if I want to the freedom to design as a see fit without manipulating with custom CSS.
Go with webflow ! Still good to use custom css tho , it will elevate your site a lot , if needed .
Love the website color scheme. I love moodboarding
Great video! Your attention to detail in the website design process is truly impressive. I especially appreciated how you explained your thought process behind choosing color schemes and layout elements.
oh thank you! I'm glad you liked it 😊
This video was really helpful to me. It gave me space to believe in myself and my abilities as a new freelancer. I love your process and I want to take pieces of it so that I can have a more organized system as I transition from a full time office job to full time freelancer. Also a big Notion fan here so I love that you use it for planning!
I love hearing this, I'm so glad I could help in any way. Sometimes we just need to see how other people do things in order to get the validation and confidence that we can do it ourselves. Good luck with your transition to full time freelancer! I was exactly in your place a year and a half ago 😊
Love this video so much!! Can you make more videos like this? Everything from the website design to the editing of this video was so so good!
I'm glad you like it! I will make more as I get more clients to design their websites 😊
Just started my agency, i love your content keep it up!
Only video that shows the complete process. Thank you so much for sharing this helpful video.
Wish I could like this twice!
you kinda did by also leaving a comment! 😆 thank you!
Amazing work. From the inspiration pulling to laying things out in illustrator. Then finally Figma for client feedback then to Squarespace 👏🏾👏🏾👏🏾
thank you! 😊
Thank you! 💖
thank you for this video, there wasnt too much "design with me" videos so it was nice to get to see the building process live from start to finish! also loved the pinterest part
I'm glad you enjoyed it! I plan to make more "design with me" videos like this as I work on more websites 😊
I love the colors they are so different but still match each other
thank you for saying that! I appreciate it😊
This is awesome! I love seeing other fellow designers' processes. It was very helpful seeing how you work through everything.
Hi Jen. I love your design, especially the font you use for the site. Can you make video about CSS code in the future, please? It's definitely helping me a lot.
yes! I'm glad to hear this was helpful, I will definitely work on a video about CSS in the future! and in case you're interested the heading font I used is an Adobe font called Thirsty Rough, and the body text is Alice 😊
Great video! Please share more of your design processes. Thank you!
thank you! I definitely will 😊
Thank you for sharing the video! It's lovely and helpful. As a student, this helps me a lot to gain insight into the design processes!
I'm glad it was helpful! 😊
Love seeing the process 🩷 those art illustrations add so much personality to the brand 👌🏼
thank you! glad you enjoyed it😊
I absolutely loved how thoughtful and collaborative the process was and I was shocked to be reminded of my original website 🫣 What a step up and the best investment I could make! Thank you, Jen!!
aww thank you for the kind words! I'm so glad you like it! 😊
been looking for this kind of video process for a while which is quick, short and right to the point!!!! tysm
thank you for saying that! I plan to make more videos like this as I work on more projects 😊
This video should have way more views
This is such a helpful video, thanks for posting - gives me hope that I can do this too!
yes you can do it!
Amazing content and quick overview of a real world example, thank you!
glad you liked it! 😊
The blog is fantastic! A lot of great information can be helpful about the benefits of developing a website. Keep updating the blogs.
Loved following along with you! This was really cool and helped me get insiration for my own workflow!
awesome thank you! I'm glad you enjoyed it 😊
I don’t know how to express to you how incredibly helpful your video was. Thank you so much !!!!
Things I learnt that will help me:
1. Having the Pinterest board have a variety of styles just in case the client’s style is/isn’t what it actually is
2. Your approach to building out the moodboard during the branding process was so unique, I’m so sorry but I want to implement it into my process. It’s brilliant 😅
3. The chrome extension for Squarespace/css 👩🏾🍳😘
4. I’m rewatching to take notes! Thank you again! What a blessing RUclips recommended your video/channel!
ah that's amazing I'm so glad to hear this!! I'm actually working on a new video right this moment where I dive into CSS for squarespace, hopefully that one will also be helpful 😊
@@jenwebbcreates absolutely!!! Looking forward to it as css is my 🫶🏾
It was one of the most wonderful service page websites I've ever seen.
Great work Ma'am.
Wow, thank you! I'm honored 😊
I love it. Thank you for sharing your process. It's very good. And you explained everything. I just need to get my head around using illustrator and figma now..
thank you! and yes it can be a lot.. I would suggest to use the tools you're already familiar with if possible! I think Figma is a lower barrier to entry than Illustrator, which can be a little overwhelming at first.
The video looks fantastic! Could you please consider making a new video focusing on Squarespace and CSS? That would be incredibly helpful!
yess for sure! this is in my list of near-future videos 😊
Great workflow! 👏 Thanks for sharing
lovEd this video ,also your talking style!
thank you! 😊
@@jenwebbcreates welcome! With love
Thanks Jen! It's a really insightful vid to learn how other designer work and process, love it! Pls share more in the future
aw thank you! I love seeing other designers’ processes too that’s what inspired me to make this video. I’ll definitely make more 😊
Looks so goood! Well done! Also the css tips were great! I was a bit intimidated by trying to integrate css afraid I might mess something up , but you made it seem so simple and great examples of use cases!
amazing glad I could help! I have another video explaining all about CSS in squarespace if you want to check it out 😊 ruclips.net/video/-zhzzEvC8GQ/видео.htmlsi=R8CQe2_2PG-2bIuu
feel like i learned a lot!!! and i love your style and creativity, would love to see more videos like this
so glad it could help you in some way! I plan to do more videos like this as I work on more web design projects 💕
Thank you for sharing your design process. I've had a bit of a creators blocked and this has helped.
that's amazing, I'm so glad this video helped!
Nice process, i do it way differently
What is your process like? I'm always curious to hear other designers' process.
Great video! We want more! More CSS would be nice. 💚
This was nicely done
🥳🥳 sick website
i love it! keep it up
I loved this video! So helpful and enjoyable
aw thank you I'm glad you enjoyed it!
Love it, keep going ❤
Cool video. SquareSpace looks interesting these days. I think I still prefer Webflow at the end of the day.
I was actually just talking to someone about Webflow today, I'm thinking I might want to start using it too. I've only played around with it and it seems very impressive.
pleaaaase, do more videos with squarespace!! im starting to work with it and im so lost haha
I will! I realized this video is maybe too fast to really see what I'm doing so I think I'm going to more walkthroughs of different parts of the process in future videos 😊 wishing you luck with squarespace, there's definitely a learning curve but once you learn some tricks I think you can create some amazing websites with it!
@@jenwebbcreates omg thank you so much!!! i really loved your aesthetic in this one, really hoping to see more
Very use full
LOVE LOVE LOVE THIS VIDEO 🤌🏽 it’s so helpful for people that are starting
aw thank you for saying that! I'm so glad you found it helpful
Inspiring! Thanks!!!
Thank you so much! It helps me a lot =D
I love it,keep going.
thank you for the encouragement 💕
Loved the video ❤
thx jen for this video
Hello! This is very helpful for a beginner! I'd like to dive into how you created the background images and used them on Squarespace? Was this also on Figma or Illustrator?
hi! I used Illustrator to create the backgrounds/illustrations for this website. I created another more in depth video on how to use squarespace if you want to see how to add backgrounds to sections: ruclips.net/video/UBfXDc_ZyPI/видео.htmlsi=YiJncHlQGEQhvWBC
let me know if you still have questions after that so I can answer them in a new video!
just subscribe, hope to see more of you
The website came out great! I’d love for you to make me a website some day!
I would love to 🥺
thank you!
Hey there, I just subscribed and I love your vids. I’m also a freelance designer and I enjoyed watching your design process, the website looks awesome! How do you find freelance clients specifically looking for a personal website? I have some web design experience but I’d love to work with small businesses and other creatives.
hello! the two clients I've worked with on personal websites have actually been friends of mine. Most of the websites I've worked on so far have been nonprofits, through word of mouth. I'm still trying to figure out how to find new clients though because I want to work with more creatives and small businesses too. if you find out, let me know! haha
I love this video so much! I am just starting out with web-design - how long did it take you to acquire these skills? :)
aw thank you! I did web design freelancing on the side for several years, it wasn't until the past year that I quit my job to focus on it full time. I learned a little here and there as I went, so it took probably 5 years to get to where I'm at today. If I was more focused on it I probably could have learned everything a lot quicker 😅
👏👏👏👏
This is a wonderfully informative video, thanks so much Jen :)
Btw, could you inform me how much would you generally charge for building something like this for your clients?
Also, how much did you used to charge for building "brochure" type websites, when you were a beginner??
I'm glad you liked it! I currently charge clients based on the complexity of the project, between $2,000-$4,000, although I think that's too low and I'm thinking of raising my prices. when I started I was doing mostly non-profit websites, and I didn't have confidence in my abilities yet so I was wayy undercharging.
@@jenwebbcreates that helps beginners like me out a lot. Thanks Jen
Thanks for the video. Is figma also where you take the long screenshots of the full page design to put in your portfolio?
actually I use a browser extension called GoFullPage:
chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
i'm new to framer/figma/webflow thing
so, we cannot directly convert the design in figma to squarespace?
no unfortunately it doesn't work that way with Squarespace. Mostly I just use figma to brainstorm and iterate before I build the site out directly in Squarespace. It has drag and drop functionality so it's very easy to design as you go.
I've heard that Framer (alternative to Squarespace) is easier to integrate with Figma, or maybe it's just similar to Figma. I haven't tried it myself so not entirely sure how it works.
How do you know what squarespce template to chose? Do we have to chose a template?
I start with a blank template. no matter which you choose you can just delete the pages they create for you and change the fonts and color palette.
Great video! Did you teach yourself all that?
Thank you! I picked up a lot of this over the years but I just recently took a really comprehensive squarespace design course that really tied it all together and gave me more confidence in what I was doing, not affiliated with them but it was super helpful: ilovecreatives.com/squarespace-design-course
wow your really good lol
hey thanks haha
@@jenwebbcreates :)
Any tips for recording like you do Jen? What software do you use?
thank you for saying that, I still feel new to video editing and feel like I have a lot to learn! I use Premiere pro but I'm starting to incorporate after effects too, see if you notice a difference in upcoming videos 😊
Hey why you don't use Framer instead of Square ?
only that I've used squarespace for years so I'm used to it. I do want to learn framer but just need to give myself the time to play around with it.
Really nice. How long did it take you to learn figma?
thank you! we actually used figma at my old job. I think it's pretty simple to learn the basics, but I'd say it took probably a couple weeks of using it off and on to really get the hang of it. Maybe I'll do a video on figma in the future 🤔
The software You have been using in First is Figma or Adobe Xd?
figma!
how much you charge to your client for this complete process ? :)
I typically charge between $2k-4k but it varies depending on so many different factors.
@@jenwebbcreates Great, thank you so much for your reply.
New subscriber! This is the content I want to see. I enjoy learning about the business side of design (contracts, pricing, pm) but I wanted to learn more about the actual project design phase. I would love to see more content like this maybe even a video where you show the full process even pricing and timeline updates. 🩷🩷🩷
thank you! I'll definitely be doing more of these in the future, and I was thinking of doing a video explaining the business side of things as well. that's the kind of content I needed when I first started freelancing to give me the confidence in what I was doing, so I want to share that with others 💕