A design portfolio website with your typography and your palette, and how to build it
On this page
- What a design portfolio has to do
- The pages that earn their place
- Case studies with process
- The design editor: your type, your palette, everywhere at once
- Custom CSS for the last five percent
- Work under NDA, and work in progress
- Resume and links, styled by the site
- What changes with what you design
- Templates made for designers
- The plan that fits
- Build it this afternoon
- Keep it current
A designer's portfolio website is judged twice: once for the work in it and once for the site itself, because a designer who cannot set a page is not a designer a client trusts with theirs. The site has to carry case studies that show the thinking, and it has to look like you rather than like the tool that made it. This is the FolioPage guide for graphic, brand identity, UI and UX, product, web, motion, packaging, editorial and book, type, industrial and interior designers, exhibition and presentation designers, art directors and design studios on what such a site has to do, how to build case studies with process, what the design editor gives you control over, custom CSS for the last five percent, work under NDA, the templates, the plan, and how to have it live this afternoon.
What a design portfolio has to do
The reader is a creative director, a founder, a recruiter or a client with a brief, and they decide in a minute whether to keep reading. Their questions: is this work at the level I need, can this person think and not only make, would I want to work with them, and how do I start. The site's four jobs follow:
- Show the work large and first, with one image per project that reads at thumbnail size.
- Show the thinking in case studies: the brief, the problem, the options, the decision, the result. Designers are hired for the middle three.
- Prove the craft with the site itself: type set with care, a palette that is yours, spacing that holds. The site is the first case study.
- Make the next step one click: an email, a form, an availability line.
The pages that earn their place
| Page | The reader's question | What goes on it |
|---|---|---|
| Home | Is this work at my level? | One line about what you design and for whom, six to nine pieces in a grid, the way in to the case studies |
| Work | What have they done? | The case-study index, filterable by discipline: branding, digital, print, packaging, motion |
| A case study | Can they think? | The brief, the problem, the process in images, the decision, the result, the next case study |
| About | Would I work with them? | A portrait, four sentences, who you have worked with, where you are, what you are open to |
| Resume | Can I hire them? | For designers in a job search: the resume page and its PDF |
| Contact | How do I start? | An address or a form, with availability and a line about how you begin a project |
Most designers run this on one page with the case studies behind it. Studios and designers with a long client list want several pages, and a few of the templates for this category are built that way.
Case studies with process
On FolioPage a case study is an item in the Portfolio app: a cover, a gallery, a long description that supports Markdown, custom fields for the facts (client, role, year, team, deliverables), and a category. The gallery holds as many images as the story needs, in order, and the description can run to the length a real case study wants.
The shape that works, whatever the discipline:
- The brief in two sentences, and the constraint that made it hard.
- The problem underneath the brief, which is usually not what the client first asked for.
- The process in images: sketches, the options you rejected, the system taking shape. Three to eight images, captioned.
- The decision, and why.
- The result: the shipped work, large, and what happened after, with a number when there is one.
Every case study gets its own page with one of twenty-four layouts and links to the next and previous one; the index has thirty layouts and filters by category without reloading. Ten case studies and three categories on the Free plan, a hundred and fifty on Pro, unlimited on Max.
The design editor: your type, your palette, everywhere at once
This is where a designer's site stops looking like a theme. The design editor sets, for the whole site and with a live preview:
- Fonts, separately for body text, headings and navigation, from a catalog of more than two hundred families plus the system stacks, with the weights and sizes to match.
- Colors: a palette of background, text, headings, accent and surface tones, from presets or your own values, applied to every section that reads them.
- The header and the footer: their family, their layout, what they show.
- Page and section headings: the style, the alignment, the eyebrow, the spacing.
- Global styling: radius, borders, shadows, the details that make a site feel like one thing.
- Animations: the reveal on scroll, on or off, per site and per section.
When one page needs an exception, every section carries its own settings for colors, spacing and background, so a dark case study can sit in a light site without a hack.
Custom CSS for the last five percent
On Pro and Max, custom CSS applies site-wide over the template's stylesheet, so the tracking on the headings, the hover on the cards or the grid gutter are yours to change. Custom HTML in the head lets you load your own typefaces from a font service or a self-hosted file and use them in the CSS, which is how a designer with a licensed face gets it onto the site. Nothing is filtered: what you paste runs as pasted.
Work under NDA, and work in progress
Two switches cover the awkward cases:
- Password-protected pages on Pro and Max: a case study you can show to one interviewer or one client, sent with a link and a password, hidden from search engines.
- Hide from search engines on any page, on every plan, for the work you want reachable by link but not findable.
Resume and links, styled by the site
For designers in a job search, the Resume app publishes a resume page and generates a PDF from the same content, in the site's type and colors, so the resume looks like the portfolio. The Links app puts Behance, Dribbble, LinkedIn, Instagram and the PDF in one column on your address, for every bio and application. Both are on every plan, with the Free plan's limits of one resume layout and five links.
What changes with what you design
| If you are a | Lead with | Case studies sorted by | The page that matters most |
|---|---|---|---|
| Graphic designer | A grid of the strongest pieces | Discipline | Work |
| Brand identity designer | One identity, every application | Industry | The case study, with the system |
| UI or UX designer | Screens, in a device or flat | Product type | The case study, with the process |
| Product designer | One product, in use | Domain | The case study, ending on a metric |
| Web designer | Live sites, screenshots | Industry | Work, with live links |
| Motion designer | A still from your best piece | Format | Work, with video on Max |
| Packaging designer | The pack, photographed | Category | Work |
| Editorial or book designer | Spreads | Publisher or format | Work, as an archive |
| Type designer | The typeface, set large | Family | The specimen pages |
| Industrial designer | The object, three views | Category | The case study, with process |
| Interior designer | One room | Residential, hospitality, workplace | Work, with galleries |
| Exhibition or presentation designer | One room or one deck | Client | The case study, as a walk-through |
| Art director | The campaign | Client | Work, with credits |
| Icon and UI asset designer | The set, as a wall | Set | Work, with a specimen per set |
| Design studio | The team and the range | Discipline | Services and Work |
Each of these deserves its own guide, and they will follow in the Guides section, one at a time.
Templates made for designers
Eight FolioPage templates were built for this category, seven one-page sites and one with several pages, each with the Portfolio app switched on and sample case studies in place. Three of them show the range:
Preview any of them live on desktop and on a phone, then make it yours in the design editor. The structure and the pace are what you are choosing; the type and the palette are yours to set.
Design portfolio templates
The full set is on the Design templates page.
The plan that fits
- Free builds the site and holds the first case studies: ten of them, three categories, fifty files, the design editor in full, a folio.page address. No card, no time limit.
- Pro, $12 a month or $108 a year, is the working designer's plan: custom CSS and your own fonts, premium sections, a domain you own, no branding, the contact form, password-protected pages for NDA work, a hundred case studies and 2 GB of media.
- Max, $24 a month or $216 a year, adds video uploads for motion work, 8,000-pixel images, 10 GB, unlimited pages and case studies, and the Blog app.
Motion designers go to Max; everyone else moves to Pro on the day they want their own type and domain. The pricing page has the full comparison.
Build it this afternoon
The order that works, assuming the case-study images are exported.
Choose six to nine pieces, and one image each
The work you want more of. The image that reads at thumbnail size is the cover; the rest goes on the case-study page.
Pick a template by pace, not by palette
Grid or statement, light or dark, one page or several. Preview on a phone, click Use this template, and the site is built with your account.
Set the type and the colors first
Body, heading and navigation fonts, then the palette. Do it before touching content, so every page you build is already yours.
Build three case studies
Brief, problem, process images, decision, result. Custom fields for client, role and year. A category each.
Make the homepage and the About page
The line, the grid, the way in. Four sentences and a portrait.
Switch on Resume and Links if you need them
Fill each once; the PDF and the links page take the site's style.
Check on a phone and publish
Set the SEO titles, hide the NDA page from search, publish, and put the address on every profile.
The longer version, with the schedule by the hour, is the guide on how to build a portfolio website in a day.
Keep it current
- Replace, do not append. The grid stays at six to nine; a new piece pushes the weakest one out.
- Re-set the palette when your work changes. One session in the design editor, every page follows.
- Keep the case-study structure identical across projects. Consistency is the craft the reader is judging.
Can I use my own fonts?
The design editor offers more than two hundred families plus the system stacks, applied separately to body, headings and navigation. On Pro and Max you can load your own typefaces through custom HTML in the head and use them in custom CSS.
Can I hide work that is under NDA?
Yes. On Pro and Max a page can be password-protected and hidden from search engines; share the password with one client or interviewer and nobody else sees it.
Can a case study show the process, not only the result?
Yes. A case study's gallery holds as many images as the story needs, in order, with a long description beside them, and any page can mix text, image and gallery sections to walk through the work.
Will the site look right on a phone?
Every template and section is responsive, and the editor previews the page on desktop and mobile before you publish.
Can I show motion work?
Video uploads (MP4 and WebM) are on the Max plan. On other plans, embed from a video service through custom code on Pro, or link to it from the case study.
Set the site in your own type.
Pick a design template, set the fonts and the palette once, and publish your case studies on a free address this afternoon.
Start freeOther fields have their own page in the Made for section, and every general how-to lives in Guides.