6 Tips + Real Life Examples To Help You Create An Amazing Portfolio In Squarespace

6 Tips + Real Life Examples To Help You Create An Amazing Portfolio In Squarespace --> Click through for full post!

I’m in quite a few Facebook groups for creatives and one of the requests I see a lot is for ideas + inspiration for setting up an online portfolio.

Your portfolio is one of the most important components of your website and there’s a lot of pressure to get it right. You wanna make sure you’re showcasing your skills and the benefits of working with you, plus it's how others will decide if they identify with your work and can be a major factor in deciding if someone should hire you or not.

To get you thinking about how you can set your portfolio up, I wanna give you some quick tips and guidelines then show you 6 of my favorite portfolios created with Squarespace! (The examples are all design portfolios but the principles can easily be applied to any creative work).

Since all are created using built-in Squarespace features, I'll even show you how to recreate each one for your own site. 

6 tips for creating an awesome portfolio:

01 // Tell a story while presenting your work

Give your portfolio visitors a solid snapshot of the project. This is basically like creating a case study that walks someone through the life of the project, and it gives your visitors a real example of how you've helped someone else achieve their goals.

The most beautiful example I've ever seen of this is from Jamie of Spruce Rd, who has been so foundational in my own approach to portfolio build out! For each project in your portfolio, consider Including info such as:

  • The client's target market

  • The goals of the project

  • Stages or phases of the project. For example:

    • Your discovery/inspiration/consultation/sketch phase (to show how your ideas were formed)

    • The creation/curation/implementation of the project's foundational pieces (to show the framework for the rest of the project)

    • The project's build out (aka how you applied elements from the previous stages)

    • Your client's results (what happened for the client because of your work together)

  • Break down how you made your creative decisions. Here are some examples:

    • Brand designers could explain colors, fonts + logos

    • Interior designers could do the same with patterns, textures + color

    • Hair dressers could break down color formulas, patterns, or talk about the client's hair history and what was done to cater specifically to that client

    • Photographers could discuss location, props + angles

  • Include any hurdles you encountered during the project and explain how you worked through them

02 // Include client testimonials

In most cases, hiring a creative professional (such as yourself) will be an investment for your clients. Investments can be risky, and testimonials can help decrease your riskiness factor in the minds of your clients.

Testimonials are a form of social proof, which is important for showing potential clients how you can help them achieve similar results. They're effective because the results are coming straight from the horse's mouth, which is an incredibly powerful way to back up what you say about your work. 

03 // Include quality visuals

There's no way to get around this: from the eye of someone who's never personally experienced good results from you, poor imagery = poor craftsmanship, and that's the last thing you want if you're a creative trying to convince someone to hire you.

This doesn't have to be complicated, but you do need to outsource or get creative with your options if you aren't confident in your abilities to produce the high standard needed for your portfolio visuals.

  • Something I utilize for all of my design projects are mock ups from Envato (great resource if you're also a designer)

  • You could also create or hire out styled photography of your work:

    • DO NOT USE YOUR PHONE TO TAKE PHOTOS! I'm serious! You're a professional, not an amateur, and you need quality imagery if you want others to feel that way about you.

    • I'm willing to bet you know someone who's handy with a professional camera, or at least someone who knows someone - so start putting out feelers on Facebook + with your friends and family!

    • I encourage you to think of this as an investment in your business. If you spend a couple hundred dollars on professional photography, how much more money could that bring in for your business?

    • Or, if your portfolio is something you'll be adding to consistently, consider investing in a starter digital camera and take an online course or ask a photographer friend to show you the ropes. Outside of experimenting with angles/styling, you really only need a solid grasp of how to create good lighting + basic photo editing skills.

04 // Create a template for how each project will be laid out

Not only does this build cohesion into your portfolio, but I love you and I want your life to be as uncomplicated as possible 😘

Consider everything you'll be including in a standard project (the story you'll be telling, testimonials + a general sense of the visuals you'll need to include) then map out how everything will be laid out. I like to do this in a notebook because, well it just helps my brain and I think it's great to step away from the computer sometimes.

When you've got a general sense of the layout, create one project on your website then use the duplicate page feature in Squarespace to make a copy of it (page settings > duplicate page).

From there you just plug in the new information and visuals for each new project!

Generally speaking, adding new projects to your portfolio can seem like a daunting task and is a big reason why many people put off updating their portfolio as they complete new projects. Creating a system and layout for each project will help you get your updates done quicker because you'll already know the exact information and content you need to collect beforehand (and you won't have to recreate the wheel each time).

05 // Think about the user experience (**important!**)

That's fancy talk for how your site visitors will interact with your website, and you have a lot of control in the experience you provide (that's right....your website has the potential to be an EXPERIENCE for people!).

While a lot of people out there have amazing projects on their site, there are many who don't make it easy to sift through the collection.

I know it only takes a second or two to click back to the main portfolio page from a project, but every millisecond counts for or against you, so I encourage you to eliminate any unnecessary steps for your site visitors.

06 // If you're still building up projects for your portfolio, consider creating example case studies

The thing is, people just wanna see what you're capable of doing. So even if you don't have a lot of client work under your belt or can't gather actual customer testimonials, you can still showcase your skills and capabilities in a professional and beautiful way. 

As a matter of fact, a year ago is when my business and quality of clients really turned around. I was creating work for clients but those projects weren't allowing me to design the types of things I wanted to design, so I made time every week to create things that were more in line with the direction I wanted to take my business. IT WAS LIFE CHANGING ON SO MANY LEVELS.

These weren't full-on projects, so instead of putting them in my portfolio I shared this work on Instagram (it was more like experiments in pattern, color, type + print design). I never had a single person ask me about the nature of the designs, only people who were excited about the work I was creating. GLORY GLORY HALLELUJAH!!

I encourage you to do this for your portfolio, too - whether you're just getting started in your field or just wanna switch gears a bit. Make sure to take time and think through who the project "client" will be and lay out the project parameters before designing (just like you would for a regular project).

The last thing I'll add here is DO NOT lie to or mislead your site visitors. You don't need to pretend the project is for a real client, so adjust your copy and info accordingly. Instead of saying "The client's goals were A, B + C...", you can say "The goals of this project were A, B + C...". 

Again, the point is to show people the type of work you're capable of producing, and creating example case studies can help you do that.

And that leads us into these amazing Squarespace portfolio set ups!

All of these examples are super charged portfolios because they flesh out details of the project in some way or another (giving insight and authority into the work created), and they foster a great user experience by making it easy for visitors to sort through the collection of projects.

Each example utilizes a different method so let's dive in:

01 // Create a project list in your navigation with the use of folders

I love how Derek utilizes elements that are already on his site (such as his navigation) to organize his portfolio. This is super straightforward and is a great option especially if your brand reflects minimalism and efficiency (something Derek does really well). Bonus points to Derek for having a sticky nav, making quick access to his other projects even easier (learn how to do this for your own site with a few lines of CSS).

Here’s how to do it in Squarespace:

  • Create pages for all of your projects or galleries in the unlinked pages section.

  • Create a portfolio/work folder in your main navigation.

  • Add links for all of your projects to the folder (add a new page in the folder > choose "link" > choose "content" > find  project > repeat).

  • BAM.

TEMPLATE SPECS: can be done with any template

02 // Create a project list that shows up on each of your project pages

I already mentioned how much I love Spruce Rd's portfolio set up, and how pivotal it's been in how I look at portfolios now. In Jamie's portfolio, she makes use of her template's built-in sidebar feature to create a menu for her projects (but I'll also show you how to mimic it if your Squarespace template doesn't include this feature).

Here’s how to do it in Squarespace (built-in feature):

Bedford, Anya, Bryant + Hayden are the only templates that support special sidebars for folders and indexes.

  • Create a folder in your unlinked pages (this will house all of your projects).

  • Create a new page for each of your projects and add them to the folder (if you already have the pages built out, just drag and drop them into this folder).

  • In your main navigation add a link (click the (+) icon, click "link"), select the content option then search for the 1st project in your unlinked folder.

  • BAM.

Here’s how to do the workaround:

This is way more time intensive but it's totally worth it if you really like this type of set up.

  • Create a regular unlinked page (this will be for an individual project).

  • Lay out all of your project's imagery and info, then add a new text block.

  • Click and drag this text box to the left hand side of your page. It should take up a whole column + push everything else over to the right.

  • Adjust your column size, type in the title for each of your projects (including the one you're currently working from) then save.

  • Duplicate the page + customize for each new project you'll be adding.

  • The layout and list of projects will be recreated for each new project, but the project list won't be linked to anything yet. To quickly do this you'll need to link all of the projects on one of your project pages, then copy and paste the linked list into each of your other pages.

  • To link these up to your navigation, create a "link" page (titled Portfolio/Work) then point it to the first project on the list.

  • As you add new projects you'll need to update the project list on each page (you can do this with copy + paste) and reset the navigation link to the newest project.

TEMPLATE SPECS: this feature is built into Bedford, Anya, Bryant + Hayden but the workaround can be done on any template

03 // Utilize the Montauk family's built-in index grid + previous/next controls

I had to include Allison's portfolio because it utilizes TWO features that help users sort through her projects, and I haven't seen anyone else on Squarespace using these features.

Once you click a project from Allison's main portfolio page it pushes the entire grid down while opening up details for the targeted project, and it also offers a prev/next option at the bottom of each project. The best part is it takes minimal effort to create because these features are just built into her template.

You have the option of creating a pre-footer area for each of these pages too, which Allison uses to shine a spotlight on what she does best (print work). 

Here’s how to do it in Squarespace:

MontaukJuliaKent + Om are the only templates that support these features.

  • Allison's portfolio is created by housing individual pages inside of an index. Most Squarespace templates stack index pages, but the Montauk family creates a grid with them instead.

  • So the first step is creating the index in your main navigation.

  • Next you'll add individual pages for each project (you can do the duplicate page trick here). Clicking each new page will take you to where you can edit the content.

  • Adding a banner image to each page (done in page settings) will determine what shows up in the grid view from your main portfolio page.

  • That's it! BAM.

TEMPLATE SPECS: can only be done with MontaukJuliaKent + Om templates

**I also wanna mention that Allison doubles up on her portfolio information: in addition to giving a general overview of each project inside of her portfolio, she includes a link to a blog post for each ones that goes into even more detail. I know that seems like a lot of work but it's a super smart idea for building backlinks + amping up search engine keywords, and I honestly don't know any other designer who gets as many search engine leads as she does.

Basically what I'm trying to say here is SURROUND YOURSELF WITH PEOPLE WHO ARE SMARTER THAN YOU.

04 // Add a gallery block with all of your work on each project's page

Hi!! This is my portfolio!! I love the option of using a gallery block on each project's page because it gives my site visitors a visual which can be more enticing than text, plus the carousel layout I chose takes up minimal space - meaning it's not overshadowing any other content on the page.

Here’s how to do it in Squarespace:

  • After you create each of your individual project pages, you’ll go to the pages panel and create an unlinked gallery.

  • Add a photo for each project + link each one to it’s project page (to do this just hover over an image > click the little circle icon > click options > go to the "click through" box + find that project’s page > you can also customize the URL if you want).

  • Go back to each project page and add a gallery block (carousel) to the bottom. When you add the block just click over to existing gallery and find the one you just made. Save.

  • Every time you duplicate a new page to add a project down the road, the gallery will copy over too. Just make sure you're adding a thumbnail to the unlinked gallery for each new project you add down the road, which will auto-populate into all of the gallery blocks on each of your project pages 😉

  • Also, BAM.

TEMPLATE SPECS: can be done with any template

05 // Add a summary block with all of your work on each project's page

I frickin' love summary blocks and they're a smart way to showcase content around your site. Erica from Big Cat Creative and I are essentially doing the same thing (adding portfolio visuals + links you can scroll through at the bottom of each project page), we just approach it slightly differently. 

Here’s how to do it with summary blocks instead:

  • After you create each of your individual project pages, you’ll go to the pages panel and create an unlinked gallery.

  • Add a photo for each project + link each one to it’s project page (to do this just hover over an image > click the little circle icon > click options > go to the "click through" box + find that project’s page > you can also customize the URL if you want).

  • Go back to each project page and add a summary block (carousel) to the bottom. When the summary box pops up, find the Gallery section then locate the one you just made then, customize the display + save.

  • Every time you duplicate a new page to add a project down the road, the summary block will copy over too. Just make sure you're adding a thumbnail to the unlinked gallery for each new project and it will auto-populate in the feed 😉

  • BAM.

TEMPLATE SPECS: can be done with any template

06 // Create a blog post for each project + link to the post from your main portfolio page

The award for most detailed projects definitely goes to Lauren from Elle & Company. Instead of using a regular page for each of her projects, Lauren links each one to a blog post that goes into thorough detail of her process and the project's results. She also makes sure to add a summary block to the bottom of each post so visitors can easily scroll through her other portfolio projects (which is done a little differently from Erica's summary block usage above). 

Here’s how to do it in Squarespace:

  • Create a new blog post for each of your projects (you can totally duplicate the first one and customize the content for each new project here, too).

  • Make sure to add a category or tag for each of these posts ("portfolio" will suffice).

  • Add a thumbnail in the options tab.

  • At the end of the post add a summary block (carousel), click your blog, go over to the display tab and search for the "portfolio" tag or category. Make sure to customize the display, too.

  • Publish your blog post then link to it from your main portfolio page.

  • BAM.


TEMPLATE SPECS: can be done with any template

Okay so tell me: did this post give you any ideas for your portfolio? Do you have any of your own tips to share? Leave them in the comments below!