avatarKrissy Ruiz ☽✪☾

Summary

The web content provides a comprehensive guide on creating a no-code UGC creator portfolio website using Canva, detailing design, content, and publishing steps.

Abstract

The article serves as a detailed tutorial for freelance content creators, particularly those specializing in user-generated content (UGC), on how to design and publish a professional portfolio website without any coding knowledge using Canva. It covers the importance of preparing a web design style guide, selecting appropriate Canva templates, and customizing website sections and navigation menus. The guide emphasizes the need for a mobile-friendly design, showcasing portfolio examples, and including case studies with engagement analytics to attract potential clients. It also discusses setting rates and services, outlining the project process, and providing a contact page for easy communication. The author shares personal insights and experiences, including tips on video editing and the use of smartphone video frames, to enhance the portfolio's appeal. The article concludes with instructions on publishing the website and encourages readers to continually update their portfolios.

Opinions

  • The author values the ease and efficiency of using Canva for creating a portfolio website, noting its drag-and-drop interface and template options.
  • There is an emphasis on personal branding, with advice on choosing colors and elements that reflect one's creative style and industry focus.
  • The author suggests that UGC creators do not necessarily need a large following to be successful, highlighting the potential for collaboration with brands beyond traditional influencer marketing.
  • Video content is considered important for a portfolio, with the author recommending a variety of content styles and the inclusion of captions for accessibility.
  • The author believes in the power of social proof, recommending the display of past collaboration case studies and client testimonials to build credibility.
  • There is a preference for not posting fixed rates, advocating for flexible pricing based on project complexity and terms of use.
  • The inclusion of an FAQ section is recommended to streamline communication with potential clients by addressing common questions upfront.
  • The author encourages ongoing learning and portfolio development, suggesting that creators should keep replacing or adding content as they grow in their careers.

Freelancing | Design for Content Creators

UGC Creator Portfolio Examples: How To Create an Easy (No-Code) Website in Canva

Start pitching to brands and showcase your skills without having to buy a new domain name

Photos by author, graphics from Canva

Designing a website from scratch (even with WordPress template kits) can be a time-consuming endeavor. Instead of tweaking the back-end stuff like plug-ins, Canva speeds up the time it takes to publish with a simpler drag-and-drop interface.

Note: You can make a Canva website with the free version, but you’ll have more template options with the pro version.

After I read Jenn Leach’s article on UGC creators, I was inspired to jump on the bandwagon. User-generated content is on the rise, becoming an in-demand alternative to influencing.

The difference is that UGC creators don’t need a large following and can make videos for brands to use on their company accounts instead of just the creator’s social media accounts.

I posted on Instagram and Tiktok for a while, so I already had examples to share and added new content for the portfolio.

While I apply for 9–5 jobs, I’m leaning towards freelance work to add more meat on the bones of my resume and LinkedIn profile.

(Side note: if you’re curious to see an example of a UGC project I completed for an art supply company, open a new tab and read my case study here of how I negotiated a brand deal for $100 more than the original rate!)

In this article, I will discuss:

Prepare a web design style guide
Choose your Canva website template 
How to create your sections and navigation menu 
What to put in the first intro section (About You)
Mobile-friendly website tweaks
"Why UGC" description section
Adding portfolio video and photo examples 
How to add the smartphone video frames (optional)
Case studies from past collaborations and engagement analytics
Rates and services
Your project process
FAQs section (optional)
Contact page 
And finally: publishing the website!

How To Design Your Canva Portfolio Website

Prepare a web design style guide (AKA a brand board)

Are you a fashion stylist who likes warm/neutral tones? A makeup artist creator who likes jewel tones? Choose a palette of 3–5 colors that matches your personal brand well.

In my case, I like monochrome pastel purples with an accent color of green. A web design style guide (below) will prepare you with an overview on which elements to reuse throughout the website, including various textures, color codes, and fonts.

Photos by author, other graphics sourced from Canva. If interested, here is the template I customized.

In Canva’s template search — other than “style guide” — type in the keywords “brand kit” or “brand board” and pick the layout you prefer.

Screenshot of Canva’s search result for brand kit templates

Once you have a copy of the template, it’s time to customize it.

Some suggested keywords for graphic elements to search for are:

  • Brushstroke/watercolor
  • Hand-drawn/doodles
  • Abstract shapes
  • Flourishes/dividers/borders

These can be placed in the textures or elements section of your web design style guide.

Note: some graphics do not have the option to change the color directly because it appears as an image. If that is the case, see if you can get close to your desired color with the Filters section or click on Duotone under the Effects row. When that doesn’t work, I pick another graphic that’s easier to work with.

Choose your Canva website template

Type in the search keyword “portfolio website” and scroll until you spot one that’s a suitable starting point. (I made mine from scratch and experimented with different photo frames and shapes. The dimensions for my website is 1366px x 768px and yours might be similar.)

Screenshot of Canva’s search results for portfolio websites

How to create your sections and navigation menu

Canva websites are landing pages where everything is on the same screen and the navigation links point to each section (which are separated into pages in the edit view).

If you click on the pencil icon on the left column (circled below), you will see the section’s name appear, and you can click on it to type an alternate name (underlined in red). This name will be what appears at the top navigation menu.

Other options within the icon column on the left are to lock it, add a new page below it, duplicate the page, trash it, or move the page up or down the sequence.

Canva edit mode, naming web pages. Screenshot by author.

As you can see, it’s the first anchor link on the top left called “Intro”. I removed the word “page” after taking these screenshots. When you click on any link, it will trigger a scrolling animation in preview mode.

Screenshot of my Canva portfolio in preview mode

What to put in the first intro section— “About me”, mission statement, and preferred target B2C industries

You won’t have the capacity to cater to ALL industries, so specify the ideal targets you’d be the most excited to work with.

In my case, I’m focusing on the following areas:

  • Arts & crafts
  • Stationery
  • Spirituality
  • Photography equipment
  • Jewelry
  • Collectibles (figurines, enamel pins)

Write an overview about who you serve as a freelancer, which leads into the portfolio samples afterward.

Mobile-friendly website tweaks

Group elements together that you want to appear on the same row to prevent them from separating when resized. For example, the first video separated from the other two in mobile, so I highlighted all three videos on the page with the video’s titles and it started to look better.

Screen cap of what ungrouped videos look like in Canva’s website editor preview mode

The final result on mobile might not look 100% perfect, but comes out okay if you don’t have overlapping elements (like texture behind a framed photo). Canva’s Help Center suggests to avoid borders from touching each other so that they are neatly within bounds.

Screen cap of grouped videos in Canva’s website editor preview mode

“What is UGC” or a “Why UGC” description section with statistics (optional)

I skipped this part because the brands who know what UGC is could be ready to hire someone and don’t need that information to convince them.

Some creator profiles I reviewed DO include them and if you want to, keep it simple on one page only.

For example:

UGC increases conversions by 10% when included in an online purchase path. — Todd Kunsman, EveryoneSocial

Also for reference, here’s a few solid statistics from Islah Jade’s portoflio:

UGC with Islah Portfolio statistics example. Her overall website is only four sections long. Short and to the point.

Adding portfolio video and photo examples

Select media content based on your target industries. So far, I have eight videos to showcase and eight photos in my gallery.

Canva is pretty flexible on video file sizes and playback length. My videos range from 14 seconds (at the shortest) up to nearly one minute. As for size, my videos are between 41MB to 127MB each, without having to optimize the MP4 files into smaller sizes.

Also, note that some videos might have autoplay enabled by default in the Video Playback section, and you’ll want to switch that off to avoid overwhelming people who view your website. There’s an option to adjust the video’s volume if needed in the top menu (see below).

Video playback and audio options in Canva’s website editor, highlighted in red. Screenshot by author.

Think about the different content styles you’d like to mix into your portfolio. Determine what’s missing and gather ideas for sample videos to shoot next, including:

  • Unboxing with voiceover
  • Aesthetic style
  • Testimonial story
  • Product demos & features showcase
  • ASMR
  • DIY / how-to tutorials

If you have voiceovers, make sure that they have captions. (My voice is soft, and I had a feeling others couldn’t hear me if the volume was low.)

Adobe Premiere Pro was used for 80% of my video editing, but I applied the auto captions in CapCut, with some animation and color adjustments.

How to add the smartphone video frames (optional)

Some people just drop the videos in directly and resize them without using frames, but I think it looks more fun to use them with short-form videos.

Walkthrough video on how to drag and drop a smartphone video frame to a Canva portfolio website
  • On the left-hand menu, go to Elements > type in “phone” keyword
  • Select the smartphone frame that you want
  • Return to the left menu and click on Uploads > and add your video to the media library. Drag and drop it into the new frame.
  • Hit play to test it

Case studies from past collaborations and engagement analytics from your social accounts

In this section of UGC portfolios, I often see a gallery of brand logos as social proof of past clients that someone worked with.

Take a peek at Jenna’s portfolio:

UGC by Jenna Libman screenshot of her portfolio website. Reaction messages from clients on the right side.

I like the blue and white floral theme. Looks pretty and elegant, right?

If you don’t yet have past experience with brand deals, it’ll take some time to get an update on the actual results (i.e. how many sales) that occur from your project. Maybe follow up with the client after a month or so to ask how their post performed.

In the meantime, you can use testimonials from them to say things like how you delivered quickly, exceeded their expectations, delivered a fun video with cool transitions, etc. Basically to indicate that you were a pleasure to work with and they’d recommend others to hire you.

When available, screenshot your highest performing content (either from your own profile or shared from the client).

UGC by Mari Moroz portfolio website screenshot example

Rates and services

Don’t you wish you could make THIS much money in one week from UGC deals? Photo by Alexander Mils on Unsplash

Some creators charge extra for raw/unedited footage, since brands can stretch their clips for multiple sponsored or organic videos in whichever order.

You can offer packages at a discounted rate based on the quantities chosen, perhaps $X amount off three videos for instance. It’s a good idea that sweetens the deal for brands.

Personally, I don’t post rates on my portfolio. As an arts & crafts content creator — if were to start a paid craft project for example, it might be something that takes several days to record; especially if it involves waiting for paint or glue to dry. The rate would vary depending on the complexity and how time consuming a project is.

Tiktok creator/influencer coach Halle Deneen spills her opinion on why the rate sheet is not necessary for everyone to provide:

Since the rates will also vary based on the terms of use, you can say starting at $X+ amount so that brands will know that you don’t intend to be locked into fixed pricing. The actual project cost is discussed during negotiations.

Mari Moroz UGC portfolio package rates example

Your project process section

Breakdown what your client can expect when working with you.

Screenshot of my portfolio’s “content creation steps” section

FAQs (frequently asked questions) section (optional)

This part could help reduce repetitive questions that you’ll anticipate from a discovery call. A few Q’s you can place in this section include:

  • What is your typical turnaround time?
  • How many video revisions are included?

Contact page

Add a Calendly link (or something similar) for people to quickly book an intro/discovery call. I also added my business email and LinkedIn profile on this section.

My UGC portfolio’s contact page

Social media icons with links are typically displayed at both the beginning and end of the website.

And finally: publishing the website!

In the top menu, click on the Publish Website button. In the dialog box, check the “resize on mobile” option, choose if you want it with or a without navigation menu, and select “Free domain” to generate a new URL. (It will look like [CustomName].mycanva.site)

You can take a look at my portfolio here for inspiration to build your own.

Remember to keep replacing or adding content as you grow!

Thanks for reading this long tutorial! I hope you found the answers you needed.

Are you on Pinterest? Feel free to save this graphic to one of your boards:

Photo by author

If you enjoy reading stories like this, consider signing up to become a Medium Member (if you aren’t already). It’s $5 a month, and you’ll receive access to read many more stories here.

Freelancing
Canva
Content Creators
Portfolio
Personal Brand
Recommended from ReadMedium
avatarTech Insights Hub
Drag and Drop Sales Funnel Builders

Intro

11 min read