Design with me ✨ My full web design process using Figma & Squarespace

[@gouravjoshi953]

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.

[@jenwebbcreates]

oh thank you! I'm glad you liked it 😊

[@TerranovaEmily]

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!

[@jenwebbcreates]

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 😊

[@randomstuffs9161]

This was really amazing , I never seen such a visually appealing web design

[@jeffbeaudoin4544]

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.

[@diaarraaa]

Go with webflow ! Still good to use custom css tho , it will elevate your site a lot , if needed .

[@jenwebbcreates]

I took the same class last year 😊 but also I already had experience with figma and css/html. I haven't used webflow or framer much, but my goal is to build websites for people and make it as easy on them as possible to be able to maintain and update their website when I'm done, so personally I feel that Squarespace is best suited for that at the moment. Framer and Webflow seem more complicated for the average (non-designer) customer to be able to go in and change something without needing help. But again I haven't used them much so I could be wrong in thinking that 🤷🏻‍♀️

[@jeffbeaudoin4544]

@@jenwebbcreates framer is easy once you know Figma, and also easy for your clients

[@selenachynoweth8305]

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

[@jenwebbcreates]

I'm glad you enjoyed it! I plan to make more "design with me" videos like this as I work on more websites 😊

[@rajnomadheart]

Only video that shows the complete process. Thank you so much for sharing this helpful video.

[@damlasehnaz5680]

The video looks fantastic! Could you please consider making a new video focusing on Squarespace and CSS? That would be incredibly helpful!

[@jenwebbcreates]

yess for sure! this is in my list of near-future videos 😊

[@dunkley7776]

Amazing work. From the inspiration pulling to laying things out in illustrator. Then finally Figma for client feedback then to Squarespace 👏🏾👏🏾👏🏾

[@jenwebbcreates]

thank you! 😊

[@phm.ththytrang]

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.

[@jenwebbcreates]

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 😊

[@thetrustedbrush]

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!!

[@jenwebbcreates]

aww thank you for the kind words! I'm so glad you like it! 😊

[@olu648]

Great video! Please share more of your design processes. Thank you!

[@jenwebbcreates]

thank you! I definitely will 😊

[@galopeian]

Love the website color scheme. I love moodboarding

[@gelatogirl24]

This is awesome! I love seeing other fellow designers' processes. It was very helpful seeing how you work through everything.

[@livcreative]

Love seeing the process 🩷 those art illustrations add so much personality to the brand 👌🏼

[@jenwebbcreates]

thank you! glad you enjoyed it😊

[@ptcmarco]

Amazing content and quick overview of a real world example, thank you!

[@jenwebbcreates]

glad you liked it! 😊

[@kerra7386]

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!

[@jenwebbcreates]

I'm glad you like it! I will make more as I get more clients to design their websites 😊

[@arianagonzalez5685]

LOVE LOVE LOVE THIS VIDEO 🤌🏽 it’s so helpful for people that are starting

[@jenwebbcreates]

aw thank you for saying that! I'm so glad you found it helpful

[@Santaho]

Wish I could like this twice!

[@jenwebbcreates]

you kinda did by also leaving a comment! 😆 thank you!

[@henrythomas7112]

The blog is fantastic! A lot of great information can be helpful about the benefits of developing a website. Keep updating the blogs.

[@dikshadiwarekar]

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!

[@jenwebbcreates]

I'm glad it was helpful! 😊

[@writersnoise]

I love the colors they are so different but still match each other

[@jenwebbcreates]

thank you for saying that! I appreciate it😊

[@CASESTUDY8]

It was one of the most wonderful service page websites I've ever seen. Great work Ma'am.

[@jenwebbcreates]

Wow, thank you! I'm honored 😊

[@OrincyWhyteDesigns]

I don’t know how to express to you how incredibly helpful your video was. Thank you so much !!!!

[@OrincyWhyteDesigns]

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 KZbin recommended your video/channel!

[@jenwebbcreates]

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 😊

[@OrincyWhyteDesigns]

@@jenwebbcreates absolutely!!! Looking forward to it as css is my 🫶🏾

[@JordanFlemming]

Great video, thanks for sharing. So cool to see your process and your designs are lovely.

[@jenwebbcreates]

thanks, I'm glad you enjoyed it 😊

[@mattjohnson3058]

This video should have way more views

[@farawaysounds3221]

This is such a helpful video, thanks for posting - gives me hope that I can do this too!

[@jenwebbcreates]

yes you can do it!

[@phuongnguyen3101]

been looking for this kind of video process for a while which is quick, short and right to the point!!!! tysm

[@jenwebbcreates]

thank you for saying that! I plan to make more videos like this as I work on more projects 😊

[@zaiologyy]

Great workflow! 👏 Thanks for sharing

[@janesnider1443]

Loved following along with you! This was really cool and helped me get insiration for my own workflow!

[@jenwebbcreates]

awesome thank you! I'm glad you enjoyed it 😊

[@MeganSarmardin]

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..

[@jenwebbcreates]

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.

[@malcoder]

Just started my agency, i love your content keep it up!

[@codersdude5513]

lovEd this video ,also your talking style!

[@jenwebbcreates]

thank you! 😊

[@codersdude5513]

@@jenwebbcreates welcome! With love

[@reynawang733]

feel like i learned a lot!!! and i love your style and creativity, would love to see more videos like this

[@jenwebbcreates]

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 💕

[@SamiraJay]

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!

[@jenwebbcreates]

amazing glad I could help! I have another video explaining all about CSS in squarespace if you want to check it out 😊 kzbin.info/www/bejne/Y6vLq617q6hrfbMsi=R8CQe2_2PG-2bIuu

[@ABCthrills]

Thank you for sharing your design process. I've had a bit of a creators blocked and this has helped.

[@jenwebbcreates]

that's amazing, I'm so glad this video helped!

[@miawang667]

Thanks Jen! It's a really insightful vid to learn how other designer work and process, love it! Pls share more in the future

[@jenwebbcreates]

aw thank you! I love seeing other designers’ processes too that’s what inspired me to make this video. I’ll definitely make more 😊

[@DropZoneMedia]

Great video! We want more! More CSS would be nice. 💚

[@Applecitylightkiwi]

Nice process, i do it way differently

[@jenwebbcreates]

What is your process like? I'm always curious to hear other designers' process.

[@RevelynMaeOnrejas]

New subscriber here! I really love your design process! It's impressive and so thorough. How long does it usually take you to go through it?

[@jenwebbcreates]

hello! it depends on a lot of things especially on the scope of the project. this one in particular took a lot of time because I was having to convert illustrations to vectors to try to incorporate into the branding, and since it was for a friend I got carried away with the amount of brand concepts and iterations I gave her to choose from. I'm working on another project right now where the branding is less involved (just a simple text-based logo and neutral color palette) and the entire project (including building the website in squarespace) I'm estimating will take around 30-40 hours.

[@clintsshield4880]

pleaaaase, do more videos with squarespace!! im starting to work with it and im so lost haha

[@jenwebbcreates]

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!

[@clintsshield4880]

@@jenwebbcreates omg thank you so much!!! i really loved your aesthetic in this one, really hoping to see more

[@mjp5926]

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?

[@jenwebbcreates]

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: kzbin.info/www/bejne/i3PJiXeZlL-shqssi=YiJncHlQGEQhvWBC let me know if you still have questions after that so I can answer them in a new video!

[@ItsNerradT]

This was nicely done

[@thomasanderson2551]

Cool video. SquareSpace looks interesting these days. I think I still prefer Webflow at the end of the day.

[@jenwebbcreates]

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.

[@maha_studios]

Thanks for the video. Is figma also where you take the long screenshots of the full page design to put in your portfolio?

[@jenwebbcreates]

actually I use a browser extension called GoFullPage: chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl

[@Killari.x]

🥳🥳 sick website

[@lifewithsevvalek]

I loved this video! So helpful and enjoyable

[@jenwebbcreates]

aw thank you I'm glad you enjoyed it!

[@chandlerjean]

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.

[@jenwebbcreates]

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

[@emilym6343]

Love it, keep going ❤

[@alexandrafotis]

Thank you! 💖

[@NiteshChoudhary-i7f]

i love it! keep it up

[@Tatiforver]

Very use full

[@lilivere2628]

I love this video so much! I am just starting out with web-design - how long did it take you to acquire these skills? :)

[@jenwebbcreates]

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 😅

[@randomyogi]

The website came out great! I’d love for you to make me a website some day!

[@jenwebbcreates]

I would love to 🥺

[@mariadolotova7969]

Inspiring! Thanks!!!

[@kevinkipto]

I love it,keep going.

[@jenwebbcreates]

thank you for the encouragement 💕

[@dungao1399]

Thank you so much! It helps me a lot =D

[@sval08]

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??

[@jenwebbcreates]

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.

[@sval08]

@@jenwebbcreates that helps beginners like me out a lot. Thanks Jen

[@sutejotan5817]

i'm new to framer/figma/webflow thing so, we cannot directly convert the design in figma to squarespace?

[@jenwebbcreates]

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.

[@daurianasimpson7169]

Loved the video ❤

[@alaaalmekdad9062]

thx jen for this video

[@AlexPerkins-i5s]

Any tips for recording like you do Jen? What software do you use?

[@jenwebbcreates]

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 😊

[@chloe-gy2hb]

How do you know what squarespce template to chose? Do we have to chose a template?

[@jenwebbcreates]

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.

[@shane_ohara51]

thank you!

[@casmir8604]

just subscribe, hope to see more of you

[@oooBoEoNooo]

Great video! Did you teach yourself all that?

[@jenwebbcreates]

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

[@InFellowShip]

Hey why you don't use Framer instead of Square ?

[@jenwebbcreates]

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.

[@tabithao.abiola7540]

Really nice. How long did it take you to learn figma?

[@jenwebbcreates]

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 🤔

[@NightmareCollecter13]

👏👏👏👏

[@joanaldo8404]

The software You have been using in First is Figma or Adobe Xd?

[@jenwebbcreates]

figma!

[@shane_ohara51]

wow your really good lol

[@jenwebbcreates]

hey thanks haha

[@shane_ohara51]

@@jenwebbcreates :)

[@praavinhublikar123]

how much you charge to your client for this complete process ? :)

[@jenwebbcreates]

I typically charge between $2k-4k but it varies depending on so many different factors.

[@praavinhublikar123]

@@jenwebbcreates Great, thank you so much for your reply.

[@MissAmiraXO]

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. 🩷🩷🩷

[@jenwebbcreates]

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 💕