web design

Portfolio and sample layout and content

Let's detail the different types of portfolios you can create to showcase your achievements and values. We detail the thinking, the design, the content and the support to have a portfolio that does not look like the others!

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphic designer at Snoweb
Published on 13 October 2021 (Updated on 25 February 2022)

1. What is a portfolio?

What is the purpose of a portfolio?

First of all, let's go back to the definition of a portfolio. It's a paper or digital file that will gather examples of your best work. And the word best is a wise choice! Indeed, you should only show what enhances your expertise, the projects that will highlight your know-how. As a general rule, a portfolio is created to present yourself and demonstrate your skills when looking for a job or an assignment. The ultimate goal is to stand out from the competition and to promote yourself.

Above all, think of your portfolio as the first step in your goal to communicate about yourself. Your portfolio allows you to sell your business, but in reality what you are selling is yourself, don't forget that!

This is why your portfolio must be well written. Your reader must feel your vision, your character and your values through your texts, images and layouts.

The communication about your company will be done in three steps:

do a portfolio for make yourself know

MAKE YOURSELF KNOWN

Here, you will seek to exist on your market. To make yourself known, you will make a portfolio, but not only! Think of flyers to present your services and your contact information!

do a portfolio to be like

TO BE LIKE

In other words, to have a good reputation, to mark the spirits and to hold the attention of the interlocutor. That passes by the distribution of business cards. But also by sending quotes!

do a portfolio to be bought

TO BE BOUGHT

More precisely, to create trust in your customer. You will therefore have to network: e-mail signature, social network banner, advertising on Google...

Don't forget what your customer is going to buy. And first of all, it won't be your prices! He will first sign for your expertise and knowledge. Then values. Then the image you reflect and lastly your rates! If he has been won over on the first three steps, your client will want to work with you even before seeing your rates. The price is not the first decision factor! Yes, it is only one element of your service offer, certainly not negligible, but when it is approved by the client, it validates everything else before. All this to say that your portfolio is the gateway to future work contracts.


2. Steps to create a portfolio

Personal presentation and work process

In your portfolio, you will introduce yourself personally, but more importantly your company. Here are 4 questions that can help you present yourself:

  • WHY ? What thorn in your client's side are you removing?
  • HOW ? What service offer do you propose and the scope of your service (remote, at the client's place...)?
  • WHAT ? What advantages do you bring over your competitors?
  • IN WHAT WAY ? What are the assets of your personality and your values to put forward ?

Achievements

When it comes to your achievements, you should only present the best and not only concrete projects! I'm not talking about bringing out your childhood drawings! But rather personal projects that you realize, for example illustrations, photography, sculpture...

Situate your work

It is important to know that if the person who looks at your work does not know what they are looking at, they will not remember it. In other words, you must caption your work. So think of putting :

  • A title
  • A caption
  • If it is a manual work or painting add the technique used
  • The possible collaborations on the project
  • The year of creation

Indeed, indicating the date of creation will allow your reader to situate your work. I take the example of a graphic designer. If he made a poster in 2010 and he adds it to his portfolio in 2021, the reader must know that the graphic style used in the realization corresponds to the fashion in 2010.

Highlighting your visuals

Some important points:

  • Use only high definition visuals. There is nothing more unpleasant than looking at a pixelated image.
  • Do not present all your visuals in the same way! Zoom in on details, vary formats (full page, square, 16:9, rounded) and vary colors.

Collaborations and clients

Once again, the goal here is to show your adaptability and teamwork. A very important point, because it shows that you are sociable and that you know how to adapt to the situation.

Present the possible collaborations you have had:

  • Freelance
  • Agency
  • Artist
  • Influencer
  • Public figure
  • and so on.

But also your clients. As for the achievements, only present the best. This is not about showing only the big accounts, no. It's about showing clients similar to your reader. If you're sending your portfolio to a local small business, it's a good idea to show them that you've worked with similar businesses before and know their time, pricing and competitive constraints. This will make your reader feel better.

Skills

Aaah the point that makes you angry ! For this part, there are two ways to look at it.

The first one is to indicate what you master: languages, software, tools, services and to indicate a gauge or a percentage next to it. So that your reader can visually see what you master the most.

The second is to simply list what you are best at but especially what you like to do.

Personally, this is what I do. Here's an example:

I find it counterproductive to say I master Illustrator, Photoshop, After Effect, Première Pro, XD, Sketch. Because in fact, yes I master them all but I don't like using them all! If a client makes me work on Sketch, I will be much less productive than if I work on XD. That is, for something that should take me 5 minutes, I'll spend 15!

This is something I've always done and will continue to do: I've always preferred to mark less stuff, but mark only what I like to do, and what I'd be happy to get up for in the morning! Not everyone is looking for the five-legged sheep who knows how to do everything, many are looking for someone who is an expert in their field.

Contact

Last but not least: your contact information! Indicate how your reader can reach you: e-mail, phone, website, online calendar, be clear!


3. Taking care of your identity

Here, I'm going to address two important points for his portfolio:

  • Profile picture
  • Logo

Profile picture

First of all and very quickly, let's talk about your photo. It's your choice to display it or not and I won't try to convince you of one or the other! The idea here is just to state the facts. And while the photo is not required, your reader or recruiter will prefer to see it.

💡 The benefits of putting your photo.

It can help give a positive image of you as opposed to the one your reader can find on your social networks! 😉 Your photo is part of your marketing and communication, it must convey a message of trust and authenticity, so forget the all strict ID photo! Last point, the photo will allow your reader to memorize your face and therefore by the same time your portfolio.

⚠️ The disadvantages of putting your photo.

Not putting a photo allows you to remain anonymous and your reader will only focus on your work and skills. Your reader will therefore only rely on what your portfolio exudes. Another point, not putting a photo allows you to avoid discrimination. Your reader will not be able to judge you by your appearance.

Logo

Your logo, or visual identity, serves to identify you from the competition.

Before talking about logos, let's start with an observation. The brands whose names we remember all have one thing in common. That of having a strong visual identity. Like Apple or Netflix for example.

If you want to work on your logo, I advise you to read this article which details the important steps to create a logo. But, by experience, I don't recommend you to launch yourself in it! It's very complicated to create your own logo and to find a version that satisfies you. However, you can go through a professional, like a graphic designer. Everyone is good at something and works because they love to and are passionate about it, so a graphic designer is the most appropriate to create your logo.

Quickly, I explain what he will bring you:

  • Advice and expertise: he will not just execute your ideas, he will advise you on your choices and their coherence between activities and brings an outside look to the project so critical and less in the emotional.
  • Technical: he will give you HD files in the right formats for the web, print or social networks. He can accompany you in the creation of your communication supports.
  • Deadlines: Super important! You prefer to spend several months working on your own and breaking your head on your logo or have a professional logo made in a few days? Working with a graphic designer allows you to stop a final idea: something complicated when you make your logo yourself and I know what I mean!

TO KNOW

Once he is done, he can give you - if it is part of his service - what is called a "graphic charter". And what is it? What is this again? The graphic charter will be one of the founding documents of your communication. In other words: it's a document (often a large .pdf) that lists your rights, your duties and all the respect you owe to your logo. From this document, your visual identity can be adapted, declined and used on your next supports and providers.

What to remember from all this?
Doing your identity and website yourself costs much less, but the result is not professional, not sustainable over time and above all, easy to enrich and develop. It is more a constraint than an advancement. Most of you will have to call a professional afterwards to create the whole thing: you will have lost time for the development of your structure.

4. Example of a social portfolio

Behance

Behance remains the most accessible way to create a free digital portfolio! It is one of the leading creative social networks around the world.

1️⃣ Creating your portfolio

  • Create an account for free and then you can create projects.
  • Add your best projects as you go along which will build up a complete portfolio in the long run. For each project, you have the possibility to customize the typography, colors, backgrounds, or separators. Your project page will look like a web page with a scroll.

2️⃣ Gain visibility

  • Have an impeccable and not common presentation!
  • Fill in as much information as possible about your project? Namely your approach, your research, your collaborators or even possible variations.
  • Write your texts in English to have more visibility and impact.
Be careful! All projects with less than 3 images will not be highlighted by Behance.

3️⃣ Create your community

  • Your primary goal on Behance is to get comments and likes from important people. Be creative, reach out to them!
  • Categorize your project well, it will help its visibility. Choose a unique category for your project and a category specific to your field of activity.
  • Publish on a regular basis, avoid publishing once in a while when you think of it! Create a publication calendar and make sure you follow it. I recommend a project every two weeks or every month!

Sample portfolio: motion designer

Discover the complete portfolio on this link

Sample portfolio: UX-UI designer

Discover the complete portfolio on this link

Instagram

Create an Instagram profile to show another side of your portfolio!

Here are some tips:

1️⃣ Think beforehand how to highlight your achievements. Indeed, Instagram is a social network that highlights the "beautiful". Once on your profile, your reader must be able to distinguish the entirety of your work but especially your style.

2️⃣ Create a publishing schedule for yourself. In other words, you need to know what you publish, with what text, on what day, on what date and with what hashtags (#). Document yourself on the hashtags of the moment and use them to boost your visibility.

3️⃣ Create a dynamic profile! The idea is not to only post photos, format them, add graphic elements on them and why not some text! Also think about alternating a photo with a more graphic or textual visual, it will give rhythm to your profile and not bore your reader.

4️⃣ Don't let anything go by. Use all the tools of Instagram. Prioritize stories to highlight a new post or to describe what you're doing at the moment. Use fun typography on your profile and for post descriptions.

Here is an example of a graphic designer's portfolio

Find here a complete, dynamic and very instructive profile! There are different types of visuals: quotes, question/answer, definitions, achievements and many more! The universe of the brand is found in each visual or text and this is what brings strength to your brand.

graphic designer portfolio on instagram

LinkedIn

Last social network I will talk about: LinkedIn. Create your own LinkedIn account: few jobs don't benefit from it, you can even find products or craftsmen showing their creations. But be careful, LinkedIn is not to be used as a digital CV! Remember! What are you selling? Your personal branding, not your 3rd grade internship report. It is neither more nor less than your first website or the continuity with your other social networks.

As an example, I'll give you my LinkedIn profile, it's nothing crazy! However, I wanted to show you the essential points to add to your profile:

  • A professional photo, no Snapchat selfie 😉
  • A branded cover photo with your logo or at least your company logo
  • A clear profile title that states in a few words what you do and your field of activity.
  • A worked description describing your strengths
  • A modified public url. Indicate the name of your complete profile, avoid profile urls such as: www.linkedin.com/in/anne-laure-compain254156812
  • The session we are interested in today: the content selection. Here you can add various types of content to highlight yourself. You have a choice of:
    • Posts you published on LinkedIn
    • Articles you published on LinkedIn
    • Links to web content
    • External media: images, presentation or pdf documents

Personally, I opted for my pdf portfolio and some publications.

  • Selected experiences, as I told you above, the idea is not to mark all your internships or summer jobs! You have to show your expertise in your field. For my part, I have listed my internships in graphic design, my freelance projects in graphic design and especially the creation of my companies to show my entrepreneurial side.
  • Your education: school, degree, certification ...
  • And finally your skills and recommendations. If you add skills, people you have worked with can recommend you on it. It brings weight to your profile.

5. Example of a pdf portfolio

Overall, the pdf portfolio requires the same constraints as any other portfolio. Except for one thing! The pdf portfolio has only one reason to live: to be sent by e-mail or uploaded in application forms. It must therefore be optimized for e-mailing and not be too heavy. You should keep your presentation and achievements to a minimum number of pages. You have between 10 and 20 pages to be convincing!

Here are a few things to keep in mind when creating your pdf portfolio:

  • Add page numbers. If there are some who wonder why, well simply because if you have to talk about a particular project with your reader, you'll just have to tell them which page to go to.
  • Make the front page graphic and colorful and especially the back page even more impactful! It's the last thing your readers will see, so make it eye-catching! In addition, it is on this page that you often put your contact information.

If you don't know how to make your portfolio in pdf, here are 2 examples of super practical tools:

Since a picture is worth a thousand words

Here are 3 examples of well constructed and enjoyable pdf portfolios!

6. Example of a web portfolio

Let's talk about web portfolios! Yes, having your portfolio online is still great, even if, personally, I had recruiters who told me "Sorry but we only accept applications with a pdf portfolio". How can I put it, it's frustrating! Anyway, let's move on!

If we assume that you already have your identity and your social networks launched, the creation of your web portfolio will be a piece of cake! Indeed, since your identity has been established, you know what colors, typography and graphic style you want for your site. Then thanks to your various social networks, you will have backlinks, that is to say external links that direct to your website. You also already have a large number of visuals that can be used for your website.

Now, you have to know how to make your website! What to do? How to do it simply? What tools should you use to make it convenient to regularly add achievements?

Before telling you about a tool that I particularly like, I just want to insist on one point. Don't forget that you will have to update the content of your web portfolio very regularly. And that a project that you find great today, may not be great tomorrow because you've done something better! So you need a practical solution for that. Don't start designing a website by yourself or a custom website made by a developer. You'll have to keep asking him to modify images and texts, and that will cost you, in the end, a lot of money.

Let's take the case of my portfolio. I made it with Snoweb CMS. I feel that a question is coming in your head, what is a CMS? As you know, there are many platforms with which you can create a website. Well, these platforms are called in the jargon "CMS" for Content Management System.

With a CMS, the creation of a website is very simple and does not necessarily require technical skills. Snoweb CMS, for example, requires no technical knowledge.

Besides, the article you are reading was made with Snoweb CMS.

Here are some advantages to make your portfolio on Snoweb CMS:

  • Add your images and SVG in one click. Little more, sort them into collections to better find them. Your images will be automatically optimized by the CMS to ensure a website optimized for Google.
  • Add your brand elements: your logo, but not only! Add also your color palettes simply so that your site is consistent with the rest of your communication.
  • Write your texts simply and format them in a few clicks. You can play on the fat, the size or the shape of your texts.
  • Add contact or newsletter forms wherever you want: at the top, middle or bottom of the page!
  • Add an infinite number of pages to your website
  • Create a "template" page and duplicate it to save time. You will then only have to modify the text and images!
  • Move forward! Create pages and put them in draft, you will publish them in due time
  • Put your blog online: create articles, add SEO optimizations and publish them.
  • Go international! Switch your portfolio to multiple languages and manage your pages separately.
  • Make it easy to book appointments. Connect an online calendar like Calendly to your website.
  • Benefit from the best optimizations of the moment for your SEO or natural referencing
    • Metadata
    • Link structure
    • Generation of sitemap
    • Addition of enriched schemas
    • Page redirection

And many more! I'll leave it to you to read this article on the Best CMS.

Here are some super handy blocks from Snoweb CMS that you can use for your portfolio that I show you just below!

  • Resume
  • Gallery
  • Content
  • Feature

View the essential blocks for your web portfolio

These blocks have been specially designed and optimized for portfolios.

Content to add

Let's start with an important point: what should you put in your web portfolio?

Well, the same things as any other portfolio! Namely:

  • A mini biography
  • A resume
  • Your achievements
  • Testimonials from your clients or collaborators
  • A contact page
  • And for the most courageous among you: a blog with a dozen articles!

I've been talking to you about blogging for a while now and you must be wondering why. Simply because a blog allows you to have a lot of textual content on a page. And Google loves that! Think of Google as a big word eater! The more relevant text you feed it, the more it rewards you.

Let's take my portfolio as an example. My home page links to :

  • 1 "CV" page
  • 1 "Blog" page, itself made up of 8 pages of articles. And for each article, I wrote an average of 1500 to 2500 words.
  • 1 "Achievements" page, itself made up of 15 pages of achievements.

In total, I have 26 pages that revolve around my portfolio and highlight it. For those who want to start a blog, here is a methodology for writing a blog post.


Examples of web portfolio

Example Portfolio Web Agency

web agence web portfolio

https://mcbridedesign.com/

web agency web portfolio

https://madebyshape.co.uk/

Photograph Portfolio Example

photograph web portfolio

https://www.pedrontheworld.com/

photograph web portfolio

https://www.gregoryrossblog.com/

Example Portfolio Développeur


web developper web portfolio

https://bruno-simon.com/

web developper web portfolio

https://jacekjeznach.com/

Example Portfolio Designer

robby leonardi

http://www.rleonardi.com/

damian watracz

https://watracz.com/


7. Example of a paper portfolio

Very fashionable in some creative fields, the paper portfolio is coming back in fashion everywhere! Given that today we are invaded by screens and that all communication is done like that, giving a paper portfolio to a recruiter can literally change the game. First of all, he will remember you because you did not do like the others, you made the effort to make a portfolio and especially to print it. Secondly, because it's always nice to see work printed in high definition, like a magazine.

However, there are some things to keep in mind:

  • Prefer A4 (21x29,7cm) and A3 (29,7x42cm) formats, which are easy to carry and to browse. The French (vertical) or Italian (horizontal) orientation remains an aesthetic choice. The square format is very chic but not easy to lay out, but if you start with this format, start with a size greater than or equal to 21x21cm.
  • Always print several copies! I advise you to print 4 copies for each interview. Why 4? Well, one for the recruiter, one for your future superior, one for a possible other person and especially one for you.
  • Have fun with the textures and your choice of paper. There are many different papers (thick, grainy, iridescent, etc.) so don't deprive yourself! The purpose of the portfolio I remind you is to stand out and represent yourself so go all out!

Bind your portfolio pages, there is nothing more unpleasant than browsing through loose sheets! Here are some guidelines on bindings:

  • Wirebound (like notebooks): for up to 68 sheets
  • Glued square back (like books): for a minimum of 40 sheets
  • Spiral: be careful, the result may seem academic and not very qualitative
  • Sewn back (like magazines) : for a minimum of 48 sheets
Tips: for printing, the number of pages in your portfolio must be a multiple of 4! Finally, use a CMYK color format in 300 dpi
I need help withmy portfolio redesign