How do you promote your work online?
To build an online presence, designers and artists often head over to Dribbble or Behance, writers go to Medium and programmers to Github. While these platforms can show your work to potential clients, wouldn’t you prefer your own space where you’re the main attraction?
An online portfolio is like having your own art studio. You select the best work, create the aesthetics and guide visitors as they stroll past different pieces and you narrate the story.
What would your exhibition look like? Take a moment to envision 💭
Now, what if we tell you that your vision can be translated into a living online portfolio? With a no-code builder like Ycode, you can create and launch your virtual exhibition—no HTML skills needed (just your creativity!).
In this guide, we’ll walk you through all the important steps to setting up your portfolio website. Let’s go!
1. Elements: Laying the foundation
Discover your personal brand
If you already know what you want your online portfolio to look like, go ahead and skip this step.
Not sure about your graphic design yet? Get inspired by doing a quick Google search on professional portfolios in your industry, and take notes while you scroll through them.
For example, when we browsed the interwebs ourselves, we found so many “oh em gee, this is amazing” examples. Like the entire portfolio website of Illustrator Aurélia Durand.
And another portfolio where we loved every single detail comes from Art Director and Illustrator Chung-Yun Yoo. Do scroll through her entire portfolio, it’s a true piece of art!
Jot down things like:
What about this website design works well? (colors, fonts, elements, arrangements, etc.)
What type of pages does this website have?
How is the work presented?
What makes me excited to work with this person? What not?
Is it clear what action to take? (e.g. fill the contact form, schedule a meeting, subscribe to the newsletter)
After observing different portfolios: What can I do differently to stand out?
Map the website navigation
Great website user experience is all about making it easy for people to find what they’re looking for, in terms of content and website navigation.
The first thing to decide is how much content you want to present. Will one landing page be everything you need or are you building a complete website?
If it’s the latter, visualize beforehand how all pages are connected.
Things to ponder on:
What content is shown on the homepage?
What is the main call to action for each page? (like contact me, read more or continue to a different page)
How is each page linked, and where? (footer, top navigation, side menu)
Most portfolios have one main goal: Impress visitors and get them to contact you to enquire about a possible collaboration. Make sure that people can easily find the “Let’s talk” button. Whether from the top menu, on the side or as a sticky item that moves along the page.
On the portfolio website of designer and no-code expert Ariana Machado, you can see that the contact circle is always visible in the bottom right corner. Smart!
TIP: Before you create your design portfolio, decide on a name. With Ycode, you get a domain name from us. If you rather want to use your own domain name (like www.yourname.com), you can with our custom domain name functionality.
Decide which content pages (and elements) you want
Page #1: Homepage
Also, the grand entree. The main goal of your homepage is to entice readers from the get-go and give clear directions on where visitors should go next.
Unless you’re creating a one-page portfolio, your homepage copy should be short and sweet. Elaborate on things like your projects, biography and skillset on the designated landing pages. And most importantly, instantly impress.
Page #2: About page
Now, we could tell you that the about page is meant for your name, education, hobbies, interests, achievements and whatever else would go on your resume.
But the truth is, this page is meant to show your personality and strong suit. If people like working with you because of your enthusiastic approach, then highlight that and forget about the “should haves” on an about page.
Take Illustrator and Graphic Designer Ella Zheng. Her entire portfolio website is adorably quirky and full of fun details, which makes her portfolio an absolute joy to browse through.
If you find it hard to brag about yourself, ask a good friend or colleague to describe what makes you a great [insert profession]. Oftentimes, they can easily name character traits or professional skills you didn’t know were unique to you.
Questions to help create content:
Why do people enjoy working with me?
What made clients go “hell yes” and decide to hire me for the job?
What skills do I want to highlight?
TIP: Want to add a resume/CV to your about page? You can add a button and link to the PDF link after uploading it on Ycode, or you can embed your PDF directly on the page. To do so, use this code:
<embed src="URL" type="application/pdf" width="100%" height="100%">P.S. If we can show you one more quick example. We also love this about page from UX/UI designer and Notion consultant Roxana (+1 for the emojis and bright design).
Page #3: Showcase page
This page will probably contain a lot of visuals. What’s the best way for you to present your work?
Possible content elements:
Grid system
Photo slider
Thumbnail gallery
Video presentation
In your portfolio, visuals are key. Make sure to use high-quality images that show your work in the best light possible. Investing time and effort into your photography will 100% pay off.
Below you’ll see how Illustrator and Graphic Designer Lorena G. presents her work. Very colorful, very eye-catching.
Page #4: Case studies page
Case studies offer visitors the full scope of projects you’ve worked on.
It’s best to take the reader on a journey—all the way from the initial planning to the finished product. Give insights on what tasks you managed, people you worked together with and challenges you’ve overcome.
Project details to mention are:
Purpose or goal
Objective
Duration
Responsibilities
Results (don’t shy away from using lots of imagery)
A great example of how to present a project well comes from Felix Dorner. View the case study page for a project he worked on for Factory Berlin here.
Page #5: Testimonials
It always sounds more believable when raving feedback comes from someone that worked with you, instead of from your own mouth. Hence: testimonials!
You can add-in testimonials on pages, like your case studies or homepage, or dedicate an individual page to it. Just make sure to ask clients beforehand if you can use their words (and maybe even their image). Press coverage and mentions go on this page too.
Page #6: Contact
On a portfolio website, your contact information should be the most visible item. Therefore, be generous with the placement of contact details like a phone number, email and social media channels.
Ideas on where to place your contact information:
Contact page
Navigation item (that links directly to your email or the contact form page)
Website footer
Sidebar
Pinned element on the side of the screen
A contact page that rocks when it comes to both style and copy (lol at stalk) is from design studio onlychild.
Page #7: Blog
Blog sections are not common on portfolio websites, but writing stories and sharing your design perspectives can give you a competitive advantage. You can elaborate more on your work and skillset and rank for keywords on Google to drive organic search (we’ll talk more about SEO further down).
If you enjoy writing, having your own blog is a great way to share your knowledge and updates.
It gives visitors a reason to come back. You can even entice them to subscribe to your email list to automatically receive all your new blog posts.
Tip: Enticed by the idea of an email list? A blog isn’t the only way to get people to sign up, you can also provide a freebie such as a guide, your expert insights, free downloadables, stock imagery, themes, templates, etc.
Bonus tip: Blogging is just one example. While we’re on the topic, there are many more ways to build your brand, like podcasts, vlogging, social media, guest blogging, webinars, and so on.
Below is an example of a great blog section by Graphic Designer Stella Guan.
2. Design: Presenting yourself in style
Customize design elements
After building your layout, it’s time to make the elements look on point.
In Ycode, we’ll equip you with an entire design sidebar to customize fonts and spacing, but also add effects and transform elements. In this sidebar, you can pick values, colors, etc., while Ycode automatically updates the CSS in the background.
There are a variety of design tweaks that can make your portfolio instantly look professional.
For example, just moving images slightly up or down so they overlap can give your layout some instant playfulness.
Below we’ll give you some evergreen tips that will always be “in style”. But just like apparel, web design trends come and go as well (it’s up to you to tag along or ride your own wave).
Evergreen tips to optimize your portfolio design:
#1. Spacing: Give elements room to breathe by adding enough spacing between them. This balances your design.
#2.Text: It’s best to keep copy short and compact on all pages that are not your blog. So, chop words and break up text wherever you can. Opt for clear fonts (like sans serif fonts) and combine no more than three fonts per web page. Use large font sizes (ideally 16 px for text).
#3. Minimalist design: The fewer people need to see, read or click, the easier it is to navigate your website. Focus on the essentials, so people can quickly find what they need.
#4. Contrast: Good UX means people can easily digest all information. Contrast plays a big role in readability. If you want to double-check if your website colors are contrasting enough, use a tool like Color Contrast Accessibility Validator.
#5. Mobile responsiveness: Making your website mobile-friendly is a must these days. Luckily, all portfolios created with website builder Ycode are automatically responsive. To preview and edit the mobile version of your portfolio site, use the screen sizes option.
The web portfolio of Product Designer Josh Tabansi is a good example of a page with large fonts, compact text, high contrasts and minimalist design. See a part of his portfolio below.
Make content dynamic
Dynamic pages are like templates.
You build the page once, but instead of adding content directly in your layout (like you would on a static website), you connect content elements to database fields. For example: A header connects to the project name, a text field to the project description, etc.
Dynamic content is also the answer to building more efficiently and saving a bunch of time.
Let’s take the case study page we talked about earlier as an example. You want to keep your portfolio up to date, but you probably don’t want to build an entirely new page for each additional case study? With dynamic pages, you don’t have to!
Because the page content is fetched from a database, you don’t need to build a new page for each new project. You just create a new database entry, add all project information and the page is created automatically.
➜ Read more about dynamic content in our documentation
Optional: Add plugins
It can always happen that the thing you wanted to do in Ycode isn’t possible (yet). For these situations, you can install a plugin and make it happen anyway (easy, right?).
You can also work with external APIs to connect websites like Behance, Dribbble, Spotify, Medium, Github, WordPress, any ecommerce, etc—both to embed content once or to automatically update your portfolio.
➜ Learn how to use external APIs in Ycode
3. Launch: Getting your work seen
You’re ready to launch your portfolio site, congratulations! If you’re building a portfolio with Ycode, you can launch publicly by pressing one button. We take care of hosting, deploy and website maintenance.
Let’s go over some quick tactics to get the word out.
Social media
Calling all real-life friends, internet friends and distant followers, it’s time to let them know about your newly launched online portfolio with a social media message on Twitter, LinkedIn, etc.
Don’t forget to add the link to your social bio texts as well.
Email marketing
Email lists are the best way to grow your following, as you’ll have a direct line to contact potential clients. Meaning, no need to post on social media and keep your fingers crossed that the algorithm will make your content visible.
If nurturing relationships via email sounds like something you want to do, you’ll need an email form on your website. You know, so people can sign up.
Tip: In Ycode, you can use the Form icon in the top panel to embed a signup form. If you have a MailerLite account, you’ll be set up and good to go in minutes. Within MailerLite, you can also set up different types of email pop-ups.
We love the surprise pop-up from Designer Meg Lewis. The position, the color and the copy are all 💯.
SEO
Of course, the whole idea behind creating a design portfolio is to be visible on the web. Though the tactics above will get you a good amount of traffic, it’s also good to spend some time on SEO (short for Search Engine Optimization, aka how you rank on Google).
In short, good SEO practices are to find those keywords you want to rank for and integrate them into your website copy. How that’s exactly done, you can read in MailerLite’s guide to SEO.
Tip: Don’t forget to connect your portfolio website to Google Analytics so you can track statistics like traffic and conversions. Here’s Google’s guide on setting up your analytics.
Ready to open your own exhibition?
Whether you’re a web designer, writer, videographer, graphic designer, no-code freelancer, or any other type of creator: A portfolio website is a great tool to get your name out there!
By having all your work and skills gathered in one place, it becomes a lot easier to stay connected with interested people and be found by potential clients.