Portfolio Site

Portfolio Site

Christopher Murphy · 20 July, 2020

Summary: In these unsettled times, it's important to have a portfolio site, somewhere you can call 'your home on the web' to showcase your work. Think of this as your curriculum vitae in a more digestible form.

You might choose to use Behance or a Dribbble portfolio – which are fine as a start – but it's a good idea to build a home that you own (more on that below). I created this to help you focus on what's required.

Here are some suggestions about improving your portfolio site that I wrote for my #ixdbelfast students at Belfast School of Art. Hopefully you find them useful. I plan on adding to these to enhance them for The School of Design.

As a designer – and now an employer – here's what I'm looking for, at the very least:

  • a home page that gives me an overview, that's easy to digest and focused;
  • a portfolio page, with links to projects; and
  • a biography page, where you share a little more of your background.

Hosting

I wrote this section primarily for my #ixdbelfast student who are taught about GitHub in Year 1. You may wish to fast-forward to the next section.

If you’re using GitHub to host your site that’s fine, but I’d strongly suggest registering your own domain name. You can still host your site on GitHub and point your domain to it, but I think it’s important that you own your own domain.

There are other services – that aren't GitHub – that you can use, but the point remains: register a domain name, it creates a better first impression. It also means you own your domain.

So, let's say you've decided to use Webflow to build your website, register a domain (that's the www… part) and follow the help documents so that you move your site from here:

  • https://sirjohnsmith.webflow.com

To here:

  • http://sirjohnsmith.com

What's wrong with Behance, Dribbble, etc.?

Nothing, but…

A part of Adobe's family of products, Behance advertises itself as: "The leading online platform to showcase and discover creative work." I agree – and I showcased Behance in Chapter 3 of my book ‘Building Beautiful UIs’ for Adobe – but Behance doesn't allow you to own your own domain name.

For you to own your own domain, you'd need to use Adobe Portfolio, which you'd have to pay for as part of Creative Cloud.

So why not just use Behance anyway?

Let's imagine Adobe makes a strategic decision to discontinue Behance, closing it down in favour of Adobe Portfolio. You could find yourself with no portfolio.

That's why it's important to own something that you control and have destiny over, protecting your future.

Design and Build (#nocode)

I've leaned into #nocode tools here to help as many people as possible. If you're from a design and build environment, you might want to build your own site. I've prioritised webflow because a lot of the designers I'm mentoring are using it.

Webflow

For a website, webflow's Basic plan will do exactly what you need, allowing you to:

  • connect your domain;
  • include SSL (this is the 'https://' part, with the 's', which stands for secure and is important);

  • create 100 pages, more than enough; and
  • accommodate 25,000 visits (that's visits to your site).

This plan is more than enough for most people. If you're running into issues where you need more than 25,000 visits, paying an extra $4 a month won't be a problem.

Even better, you can start with webflow for free. You'll have to publish to webflow.io, i.e. https://sirjohnsmith.webflow.com, but you can get started on the free plan and upgrade when you're ready.

weblow have put together a video at webflow university that explains everything you need to know about connecting your domain (www.yourname.com) with your webflow site. You can watch the video here.

image

Here is a Zip that includes step-by-step screenshots of the build process.

webflow-walkthrough.zip4747.3KB

I'll add additional tools here, shortly. (19 July, 2020)

Email

Don’t use Gmail, Hotmail or Whatevermail.

In my – strongly held – opinion it looks unprofessional, especially if you're working on the web (or hope to work on the web). If you've purchased a domain name, as I've recommended above, I'd suggest setting up an email address for yourself.

This looks unprofessional:

crazyguy@gmail.com

This looks much more professional:

salutations@mrmurphy.com, christopher@mrmurphy.com, etc.

yourname@yourdomain.com

Add An Email Signature

Once you’ve set up your email, it’s important to add a signature. (That’s the part at the bottom of the email that is added to all your emails automatically.) This should include:

  • Your Name
  • Your Contact Details
    • The URL of Your Website
    • Instagram / Twitter / Dribbble / GitHub
    • Mobile Number (If you’re comfortable with that – and, if you need work – you probably should be, especially if this is your business number.)

I use the signature at the bottom of my emails to share a little context (I'm a 'Designer, Writer, Speaker, Teacher') and to promote The School of Design. I also provide my contact number.

Adding a signature to your emails means the recipients of your email – or anyone it's forwarded to – can find out more about you.
Adding a signature to your emails means the recipients of your email – or anyone it's forwarded to – can find out more about you.

Website Content

First impressions count. Working designers will make a split second decision looking at your home page (literally a split second) so you need to make the first impression count.

Working in a studio is a busy affair, so don’t expect people to spend hours browsing your site. Make it easy for people to hire you. If I'm looking at a portfolio – especially a number of student portfolios – I will open them all in tabs and click through them:

  • open everything in tabs;
  • look at the first, just a quick glance;
  • make a gut reaction decision: yes, or no; if it's a no, I'll close the tab and move on; if it's a yes, I'll keep the tab open and move on;
  • finally, I'll properly look at the tabs that are left, looking at:
    • their description, who is this person?
    • their work, what's their work like?
    • their attention to detail, are there spelling mistakes? poor grammar? (Poor attention to detail equals close the tab and move on.

General Guidance

Keep your home page clean and simple. At the top of the page, share a little about yourself. Here’s my biography:

Christopher Murphy An award-winning designer, writer and speaker based in Belfast, I work with business of all shapes and sizes, helping them to grow and thrive.

Note: This is for my consultancy work.

Underneath that showcase some of your recent work. I’d suggest one hero project – the thing you’re most proud of – and underneath that 2-4 other projects that are visually smaller.

You can list further projects on a dedicated portfolio page. Start with three projects, ensure they're really well considered, then add more. Build carefully and pay attention to detail.

For each of the projects, include a title, an illustration (or a photograph), a short description and a link to a dedicated page for that project where you can share more about the project.

Student projects are fine, but if you’ve been working on side projects, show this work.

Underneath the work I’d suggest listing your strengths. This might include:

  • UX +/ UI
  • HTML, CSS, JS
  • Branding
  • Illustration
  • Etc.

Everyone is different so list what’s most relevant to you.

In the footer of the page, ensure your contact details are listed clearly. At the very least there should be an email address. Don’t use a contact form, a clickable email address is better.

Even better, use a mailto: link that includes a subject line. (There are tutorials online that show you how to do this. Chris Coyier's is good.) This means you can use rules in your email client to route enquiries to a dedicated folder so you don't miss them.

I’d also suggest listing a mobile number. This – after all – is your de facto business phone number, so share it with potential employers. The only reason you wouldn’t include a phone number is that you’re overwhelmed with work and are actively trying to avoid extra workload.

Site Structure

Everyone’s site will be structured differently, but at the very least you need:

  • Home Page
  • Portfolio Page
    • Dedicated Project Page 1
    • Dedicated Project Page 2
    • Dedicated Project Page 3
    • Etc.
  • About Me
  • Contact Page

Projects

If you’re thin on work for your portfolio – which you won't be, if you're working with me – you need to create some work. You don’t need to work for a client to create something for your portfolio, you could do a side project and share that. Consider:

  1. Unsolicited redesigns of existing apps or websites. These showcase how you might re-imagine a UX, a UI or both.
  2. Ideas for apps or websites that you design. These showcase that you’re not resting on your laurels and that you’re actively learning and applying that learning in a self-motivated manner. (If you have time to binge a Netflix series, watch half of it and spend the other half of the time learning.)

Do the above, self-motivated work in the same manner you would do your very best professional work, i.e. share your process. Consider showing:

  • User Research (Personas, Card Sorting, etc.)
  • Sketching Concepts
  • Element Collages
  • Refined Wireframes and / or Mockups
  • Prototypes (XD, etc.)

Don’t just design pretty looking things for Dribbble, that can actually do you harm (because it comes across as superficial and lacking in a considered design process). By all means share your work on Dribbble, but link it pack to a project page at your website where you show your working process.

A PDF Portfolio

I'll be adding a section on this shortly, it's a good idea to keep a Keynote or PowerPoint file as a portfolio too. This allows you to send through samples of project work if a prospective studio wants to see more.

I suggest building separate case studies – following the same template – that way, when you're applying for a job or pitching for a job, you can build up a final deck like LEGO.

I'll be adding an example shortly, I just need to check with a student. (If I forget to add this, remind me by @replying to me on Twitter.)

Instagram, Twitter, Dribbble, GitHub…

I imagine most will be focused on Instagram, if so, throw your weight behind that. You should probably also set up a Dribbble account if you haven’t already done so and share your work there, too.

Twitter is still important (for finding opportunities) so don’t discount that. At the very least set up a Twitter account and follow some interesting designers and studios. If you follow a carefully selected list of studios (Google will help you to identify them) then you will see if they have work or placement opportunities. Be proactive.

Keep your business Instagram (etc.) and your personal Instagram (etc.) separate.

You absolutely don’t want a potential employer looking at your Instagram account (or other social accounts) and seeing you legless in a club at the weekend or at a party snorting cocaine. (Believe it or not, I have seen both of these. Yes, even the cocaine.)

You are aspiring professionals, ensure you present yourself that way.

Karma

Lastly, don’t forget karma. I believe that if you put good into the world you will get good out of the world. Be nice to people and it will come back to you. (Be nasty to people and it will come back to you.)

Hopefully the above helps.