How to Build your UX Design Portfolio Website with Squarespace! TUTORIAL
Vložit
- čas přidán 27. 07. 2024
- This is a step-by-step tutorial on how to build your UX design portfolio website using Squarespace! This has been highly requested~ I hope you find it useful!
cofolios.com/#modal-close
All my projects were created at Springboard UX design bootcamp. Use my code "SHARONKIM" to get $1000 off your tuition! Link here: shorturl.at/bkrwT
Sign up for Figma's Professional Plan: psxid.figma.com/em3v47p03tov-...
To note, for resources and products mentioned above I have personally used and enjoyed before being offered custom affiliate links. Therefore, I may receive commissions for purchases made through links in this post.
----------------------------
❤️Let's be friends! ✌🏻
sharonyeunkim@gmail.com
www.sharonyeunkim.com/
Instagram: @sharonyeunkim
LinkedIn: / sharonyeunkim
----------------------------
📸 Gear:
Phone Tripod (portable): amzn.to/3uvKDlr
Phone Tripod (tall size): amzn.to/2PCzXTC
----------------------------
⏰ Timestamps:
INTRO: (00:00)
Pick a Template: (00:29)
Create Custom HomePage: (01:54)
Add Your Work: (05:41)
Aligning Your Cover Images (09:55)
Adding Your Social Handles: (10:25)
Organizing Navigation Bar: (11:40)
Create + Link Your Case Studies: (12:15)
Set your HomePage as the Landing Page: (15:31)
Editing Site Title: (16:19)
Link Your LinkedIn + Resume: (16:41)
Conclusion: (18:54)
----------------------------
🎵Music:
feellikedying by Loxbeats spoti.fi/34tPBBO
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/2RjmWP3
Music promoted by Audio Library • feellikedying - Loxbea...
_____
Afternoon Tea by Mona Wonderlick / monawonderlick
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/3s2zeIr
Music promoted by Audio Library • Afternoon Tea - Mona W... - Jak na to + styl
Hey! I'm just starting to make my portfolio and this has been an amazing video!
My only question is about the links to the different case studies. Is this only if you have already made a case study on another website? I just got a little confused about this part in particular.
Hey Michell! No, you DO NOT have to have your case studies built out first/on another website before linking, although that would make more sense because why else would you link to something that doesn't exist yet.
However, it does NOT have to be built on another website. If you want you CAN link it to a case study you made on another site OR link it to an internal page within your Squarespace pages (left nav). If your case study within Squarespace is yet to be finished, you don't have to link it and the cover image can still be there on the home screen to be a placeholder or smtg.
--------------------------------------
So you have TWO options to link:
1) Case Studies built on Squarespace:
- If you already built out your case study via creating a new page in your left-hand nav, simply link that to the thumbnail image you put on your homepage.
- If you have yet to build out your case studies in Squarespace: No worries, feel free to add an image on the homepage and leave it blank for now. You can link it later when you built out the case study within Squarespace.
For both instances ^^ The format (url) usually goes "YourDomainName.com/CaseStudyPageName" --> ex: sharonyeunkim.com/onnit
___________________________
2) Case Studies built out on another website:
- same thing, find the link of where your case study lies, Behance, other website, etc. and insert that link into the cover image located on your homepage.
Does this make more sense? :) Lmk if u need more clarification!
@@sharonyeunkim Yes that makes sense! Thank you so much for clarification!
@@sharonyeunkim One more question I have is if you added any CSS code to make your mobile version look a certain way or if the responsive design from squarespace was good enough to leave it how it is
@@mitchellbiderberg9775 I personally have not additional CSS. If you are looking for more something very specific I'm sure there's a tutorial out there!!!
Thanks for making this video, this was super helpful when setting up my portfolio. Keep doing whatcha doing girl!
This is super helpful! Thank you for going so much into detail and even adding timestamps!
Thank you so much! I'm halfway through a bootcamp and we start working on portfolios this month. You really just saved me
This was superrrr helpful, thank you for going through the process step by step! 💕
you are a SAINT for this. Seriously. I've been pushing off creating my portfolio because Squarespace was so overwhelming. This was so so helpful and detailed. I can't believe you made that so easy. Thank you!!!
So glad it helped!!! :-)))
This was extremely helpful! Thank you so much for breaking things down step by step.
Thank you! I’m working on my portfolio and this video was so helpful!
This was awesome and super helpful, thank you so much Sharon!
This is so helpful! Thank you so much for creating such a great resource
super informative :) love thissss
Girl, each time I want to quit my bootcamp program, your videos pop up in my feed & bring me back to life lol Thank you so much for this :))
soo awesome!! thx for sharing :)
This is great! I am going to build my own portfolio after this video. Thanks for the video
Hii! Thank you so much for making this video I can't wait for your video on how to create a case study on Squarespace and how to link the Figma prototype! I am struggling with Squarespace when it comes to making my case studies look pretty.
Thank you, really informative video! And great job on your portfolio, looks awesome!!
thank you so much! Let's connect on LinkedIn too :-) www.linkedin.com/in/sharon-yeun-kim-368a01168/
This is such an awesome content , keep up the good work 😁.
thanks so much! Will do :)
This was super helpful. Thanks for taking the time to go through each step. I am finishing up ux program from brainstation and I remember watching your video when you talked about your experience with springboard. I remember you saying springboard is suitable when you have arts background so I took that into account when exploring different programs. Thanks again!
My pleasure! ❤️
this was so so so helpful!!! thank you!!!
you got it!!
U actually saved my life with this tutorial. Thank u, sincerely
My pleasure!
Lovely! Thanks a bunch.
☺️
Thank you so much! This is very helpful!
you're welcome!
Super helpful video! Thank you so much for this! Subscribed :)
Glad it helped! :)
Thank you sooooooo much for sharing your experience!!!
My pleasure!
Sharon, BLESS YOUR HEART!!!! So I've been dealing with major imposter syndrome + got diagnosed with ADHD a few months ago which explains why was it so hard to get started on doing certain things that felt overwhelming and I had been struggling with the single thought of having to build my portfolio, I already have 5 years of experience and after much work on myself and therapy sessions, I've been taking little steps. Thought about building my website from scratch but applying my own MVP thinking, I think taking advantage of these pre-made tools is very wise and this tutorial was super detailed and amazing.
Thank you, I'm on my way to get my dream job!!! Sending you hugs! Xo
Hugs right back atcha!
Girl this video is saving my life!!!!!!
:)
Super helpful!!!! Thank you~
My pleasure!! :)
Glad I found this video because I was about to give up and try webflow but webflow made me even more frustrated lol
What a video full of useful information!
One question: can I develop my case study in Figma and then organize it in Squarespace?
very informative
If you have any questions, please let me know down in the comments! :)
⏰ Timestamps:
INTRO: (00:00)
Pick a Template: (00:29)
Create Custom HomePage: (01:54)
Add Your Work: (05:41)
Aligning Your Cover Images (09:55)
Adding Your Social Handles: (10:25)
Organizing Navigation Bar: (11:40)
Create + Link Your Case Studies: (12:15)
Set your HomePage as the Landing Page: (15:31)
Editing Site Title: (16:19)
Link Your LinkedIn + Resume: (16:41)
Conclusion: (18:54)
Hey Sharon, could you share the fonts you use? Did you have to download the fonts and install to Squarespace?
this was so helpful! thank you! really helped ease my anxiety with starting Squarespace
good to hear! Let me know if you have any questions.
@@sharonyeunkim do you have a video on how you put together your individual projects content on square space? I noticed you have specific placements for pics or texts. I am guessing you had to use the spacer feature a lot to get things to a certain location.
Great one Sharon! Thanks! My question is how to segregate the portfolio for people who has both UX design and UX research projects. Can you help me understand the recruiters perspective of having the same portfolio for both design and research opportunities?
Great Video!
Thank you! What would you like to see next?
Can you make a video about how to get real work experience in order to add real projects to portfolio? Thank you
Okay dang I wish I found your video before paying my Squarespace designer $1500! Subscribed!
Dang $1500?!??? Girl that’s painful 😭 I’m sure it looks beautiful though!!
i love this video
Thanks I appreciate it!! :))
Hey! I'm gonna start my portfolio and this video will be very helpful for me. Thank you for making this amazing video. I just have one quick question regarding the mobile mockup. Do I need to make a different portfolio for mobile users or Squarespace will automatically resize my desktop mockup to mobile/tablet mockup for mobile/tablet users?
hi sharon! thanks for sharing this! i wanted to ask what you used for editing photos of your mock up? thank you! love your portfolio its really clean and detailed!
Hey :) if I understand your question correctly, it was all done in Figma! Look up “iPhone mock-up” in Figma Community and there should be templates for free you can use there.
Otherwise the profile images of people in my app I got it from Pexels.com lol. Free stock images!!
Hi Sharon, for your second photo you uploaded 7:20 , how did you do that to make it look like it’s at an angle?
Hey,
This video is super helpful!
When I upload my case study from Figma, the slides are all zoomed out, and theres grey on both sides. Do you have any idea how to fix this?
Great Video! I am wondering how did you build your Case Study, specifically what software? I have a case study ready but it's in slides :( not sure how to make a beautiful case study page for squarespace... Please help! Could you give a tutorial on how to make a beautiful case study :)
Hi Sharon how did you create that Final Figma Clickable Gallery at the bottom? I can't figure this out. Thanks!
Thank you for the video but what if I am taking a Coursera program in UX how do I add that to my website portfolio?
Hi Sharon! Thanks so much! I am trying to add a gif or a repeating video of my prototype? I am struggling lol I uploaded a gif at 15MB and it is still looking bad!
This is so helpful! Thank you, Sharon! I just have a question - how do you make all of your graphics? You mentioned you make them in Figma, but how do you decide what size frames etc and how do you get the iPhone containers around your designs?x
You can get those iPhone mockups from Figma community files, that's where Sharon gets hers because she uses Figma in most of her videos. There are a ton of other resources you can get from the Figma community in general. Hope this helps!
@@laiba_sings_ that’s so helpful of you! Thank you so much - I just found some great ones
Hey Sharon, great video! I'm not sure I'm understanding, can you change font and size of texts once you pick a template? Or does the template come with those fonts and containers? Also, can you change the shape (ratio) of the images or is that template optimised for that horizontal rectangular shape for all images? Thank you!
hey! Yeah, you can absolutely change the font styles and all. Go to home --> Design --> site styles --> on each section you'll see an option of "site title font" where you can choose.
you can change the ratio by
1) adding a spacer block,
2) choosing a different design style when choosing to "edit" the image (ex: 'overlap', 'collage', 'stack') or
3) you'd most likely have to alter the actual image to be a square if you don't want it to show as a rectangle.
Hope this helps!
@@sharonyeunkim this is gold! Thanks so much!! Keep it up 💪🏻
@@MsLaTrau humbled I'm able to help :)
Hi Sharon, I followed the same process and linked all my work and ended up disabling the work page. But it’s doesn’t load when disabled. Could you help me figure why that’s happening?
Hey Sharon,
I have a question, square space platform is not free, give you a 14 day trail?
Really great video I am also using square space to make my portfolio, I had to contact them for help a couple times and the chat support is amazing, they sent me a video of example of what I needed to do in the chat that I could download and refer back to. I tried wix and liked square space more!!
also nice to see a fellow Canadian UXer on youtube!🇨🇦
Hey! Thanks for the support :) And yes! Fellow Canadian :) which part are you from?
do you have a good tutorial on how to make the project covers on figma?
I’m having a hard time with the adding the stacked photos next to each other it keeps pushing my caption to the side and adding it next to it instead of them both being below the caption
Really helpful but to publish the website, annual charge is 216 usd - minimum. Is there any minimal cost option available?
Please help me. I know you had your Figma prototype fully working on your website. How do you do that?
Please bless us with a video on how you laid your case studies. The people need that lmao
;)
@@sharonyeunkim PLEASE :)
I make my web site on this .but how can I published freely. Because I want to show my work to my teacher through e mail
Did you select a business or personal plan w/ Squarespace?
at 8:24 To get both of those images to be the exact same size did you export them both at a particular size? I'm having an issue getting my images to be the same length and I don't understand if I'm supposed to be correcting that in Squarespace or before I import them
Hey! To be safe I would export them same size. Sometimes squarespace can be funky so what id do it delete both images and just try again.
Hi! What tools did you use to design your images for your case studies? (the pngs/jpegs that you uploaded)
5:54 Figma.
Definitely helpful overall, thank you! But what I'm really having trouble with is designing the page for the project itself. I'm extremely confused on how insert images/text as well as how to animate features while showcasing the project. I would've loved a tutorial on that as well.
Hey! Thank you for the suggestion- I’ll do a tutorial for laying out/structuring your case study.
@@sharonyeunkim Would definitely appreciate that whenever time allows 😭🙏🏾
Hi Sharon! What plugins did you use to create those mock ups for your thumbnails! Thank you :)
all done in Figma :)
How can I add my case study from figma to my squarespace website? I uploaded it as an image, but is is too longand always shows up cropped!
you probably have to upload each screen individually into squarespace...
How were you able to create those thumbnails for your case studies?
All done in Figma. I’ll make a tutorial
Hey @skim ...
What do you think including section like About and contact form in the portfolio?
Because if recruiters want to connect they can do easily from there and if they're interested to know more about you they can read from there.
Hey! You should absolutely do those. I'm going to do that next in my own!
I'd probably create a new page titled "about me" where you can write a blurb about yourself.
@@sharonyeunkim hey Skim.. Still people believe in taking portfolio in a PDF format.
can the website be edited once published? Can we add a new project or new pages to existing projects?
hey! yeah of course, you just need to hit the edit button top left corner and there are lots of options to add more projects or pages~ Squarespace should have separate tutorials on that general tool!! :))
Hi, Sharon, the video is useful for me. Thank you. I have a question. I have to share my portfolio with my peers through the college website, but Squarespace does not work. I have to permit each person. Without permission from all my peers, how can they access my portfolio via my link? Let me know.
Hm I’ve never seen that before. If you buy a website domain and create a website with square space it should be fine? I’ve never seen this happening before!
@10:13 🤣🤣
how did u get ur margins for the project so that it doesnt touch the edge?
add a new block on each side called 'spacer'!
Super helpful !!! I hate Webflow
LOL
This was really helpful. How do you get your designs into a phone screen?
Type “iPhone mock-up” in the Communtiy page in Figma. There should be free templates you can use there!
@@sharonyeunkim Thank you so much!
What size are you exporting your images from figma to be the cover for your case studies? Mine ends up being blurry
Presentation side 16:9 ratio I believe. Use the frame presets they have on Figma and if they still turn out blurry, export it as 2x or 3x when you’re in the export stage. By default, it’ll be by 1x (1x meaning size, so exporting it at 2x = double the size = higher resolution)
Worst comes to worse, I remember for some of mine I literally took a screenshot on Mac, LOL so you could try that too. As long as it works!
Did that make sense? Let me know if I got your question right.
@@sharonyeunkim Thank you!
How did you know what dimensions the images of the thumbnails and case studies should be for the site?
I took a screenshot of whatever default cover image it was, imported that into Figma, then scaled it up haha~
Hey . after making a portfolio how do check other people open our portfolio ?
Actually not sure about that, perhaps there is a setting you can look up or a plug-in you can install. I would Google this.
It’s not allowing me the options to stack or the edits when scrolling. Any advice ?
Stack? What do you mean like stack diff blocks for your main page?
@@sharonyeunkim yes, it doesn’t give me the scroll effect option or the option to stack with the pictures and I’m using square space as well ! I was trying to finish before my 14 day trial ends but it’s not looking so promising
@@lsx_brando that's really strange - I'd try clearing the page and importing the photo blocks again one by one. I feel sometimes it's a coding problem with the software maybe.
Can you tell me what programs do you use as a UX Designer? The same as UI Desginer? Hmm! Thank you a lot!
Figma all the wayyyyy
Do i need to pay for this service?
It is a paid service.
Wheres your ux portfolio link
www.sharonyeunkim.com