Building Your Portfolio Site

Domain name registration

A domain registrar basically connects your custom, unique URL (e.g., www.autoisevil.com) to the web server where the files are actually stored (see Hosting below). Many registrars offer extra features such as email hosting (e.g., jeremy@autoisevil.com), which can add a nice level of polish to your professional presentation.

TLDs
In short, choosing a top-level domain means deciding what label to use at the end of your site's URL — .com, .net, .tv, etc. 

Advice

Use Hover

  • …but wait!
    If you want to use Squarespace as a host, they offer a free domain name registration with a 1-year plan (WHOIS privacy included). See below.
  • "Free" WHOIS privacy
    Hover may cost slightly more than another registrar, but they do not charge extra for WHOIS privacy. Without WHOIS privacy, anyone can easily find out where you live simply by knowing your URL. Creepy.
  • Simplicity
    Their site is easy to use. They're not sleazy. They don't spam you. 
  • Discounts
    Check the show notes for recent 5by5 podcast episodes for offer codes (currently 10% off). Don't just mooch — Listen to some of Dan Benjamin's excellent podcasts. They'll make you a better person.

Avoid GoDaddy (& similar)
If you cannot understand a company's site before you give them money for a service, trust that it will only get worse afterwards.

Picking a URL

  • Pick a URL that is not impossible to read or remember. That's becoming more difficult since so many simple URLs are taken, but it's your job to be clever.
  • Stick to the basic TLDs for our industry, such as .com or .tv. Avoid .biz, .info, etc.


Hosting

A web host stores and serves your site's files. Your domain registrar and host will need to be linked in their respective settings. The big hosts usually have instructions for linking with the big registrars, and vice versa, so it can be helpful to stick to the big guys.

The old school method of building a site was to design and code locally using software like Dreamweaver, then upload the files to your host's server via FTP. In recent years, this practice has largely been replaced by the use of a content management system.

CMS
A CMS helps you build a website more quickly by providing design templates and automating a lot of tedious coding tasks. A CMS user interface is typically a webpage, so your site building is done inside a browser. Some hosting solutions rely solely on their own CMS, so that's the only way to update your site's content. Choosing the right CMS for you means picking one whose templates and level of complexity appeals to you.

There are many free and paid options available, like Squarespace, Wordpress, Tumblr, Joomla! and Drupal.

Advice

Use Squarespace

  • Gorgeous templates
    Not everyone is or wants to be a web designer, but template has become such a dirty word because of the proliferation of horribly designed CMS templates. These are some of the most non-templatey templates out there.
  • Simplicity
    I use Squarespace for this site. I'm an old man who is tired of wrestling HTML code when that's Not My Job™. I used to be the kind of nerd who loved to spend weeks building and hosting this stuff myself. Now I've sold out, and I love it. 
  • Prices & Discounts
    • Free 2-week trial
      Take it for a spin.
    • Pre-pay
      They offer a 10% discount when you pre-pay for a year or more. You also get a free custom domain name, so you can avoid having to pay a separate registrar and you won't have to worry about configuring them to talk to each other. Neat.
    • Offer code
      Again, check the show notes for recent 5by5 podcast episodes for an offer code (currently good for an additional 10% off).

Honorable mention

  • Behance Student Show
    "An exclusive community for current students, Student Show provides students' work with the recognition it deserves. Best of all - membership is free!"
  • Behance
    "The leading online platform to showcase & discover creative work. The creative world updates their work in one place to broadcast it widely and efficiently. Companies explore the work and access talent on a global scale."
  • Cargo
    "For the last few years Cargo’s main goal has been to create accessible tools and a networked context to enhance the exposure of talented individuals on the Internet." (By invite only)
  • Carbonmade

Beware of "free"

  • Protect your time
    "Free" tends to have a cost, whether that's your time, sanity, hair or in my case all three.
  • Protect your image
    If you don't care enough about your professional site to spend a little money (it's 1/10th of my cell phone bill), that's going to say something to potential employers and clients about how serious you are.
  • Social media networks ≠ professional site
    It's fine to have a social media presence, but you don't own those pixels. Social network sites have a different business model than yours, and they may place ads, allow and display comments (potentially negative or inappropriate) or add other elements to your design that detract from your presentation.

Turn off comments

  • Comments are great for a social media site where you may be building a network, but again, you should own every pixel on your professional site. I don't like it when my neighbors' dogs take a dump in my yard. I feel the same about comments.

Video

Although some CMS's can host all of your site's files, you may want to upload your videos to another site, and then embed them into your site with a simple snippet of code. Video files can be huge, and serving them all through your web host can eat through any bandwidth limitations you might have. The advantage to hosting on YouTube or Vimeo is that since they're hosting the files, they eat the bandwidth (although they may also set some limits). They also tend to load very quickly and have very little downtime.

Vimeo and YouTube are also free, so what's the catch? You may not be able to fully control the look and feel of those embedded videos. For instance, Vimeo limits embedded videos to standard definition unless you pay for a Plus or PRO account, although you can still view them in HD on Vimeo's actual site. After playing an embedded YouTube video, users may be presented with a grid of "Watch next…" videos that are distracting and potentially inappropriate.

Advice

Use Vimeo

  • Community
    Vimeo has a great community of artists and filmmakers. YouTube represents the worst of humanity.
  • Upgrade if you want 
    • A Plus account is probably good enough for most of us. It's also handy if you exceed the free upload limitations. 
    • If you or your clients need to scale, the PRO account is huge. 
    • They also offer a revenue model — Vimeo Tip Jar
  • Tips
    • Plan ahead
      With a free account, you only get 500 MB of uploads and 1 HD video per week.
    • Compression artifacts & color banding
      Subtle gradients, especially like those found in motion graphics projects, tend to compress poorly, resulting in nasty artifacts. Combat this by applying a slight noise/grain adjustment layer before compressing and uploading. This will fool H.264 into thinking that detail should be preserved, and thus avoid those compression blocks.
    • Better poster frames
      When you upload a file to Vimeo, it automatically selects a frame to use as a thumbnail. When a user views the video on your site (or Vimeo's), that thumbnail automatically loads first and then waits for the user to press the play button before loading/playing the video. Sometimes it chooses wisely, sometimes not. If you go to the settings page for the video file, under Basic > Thumbnails, you can manually choose the perfect frame from the video, or even upload a custom image that doesn't even appear in the video (a logo or business-card-style frame, kittens, etc.).
    • Customize the embed
      When you click the "SHARE" button on your video, a pop-over is displayed that includes the code for embedding. Click the "+ Show options" link to customize what is actually included in the embed. 
    • Export smarter
      Premiere CS6 has H.264 export presets for Vimeo. The word on the street is that if you use these, Vimeo will see the flags that Premiere places in the file, and therefore will not recompress your footage, saving you time and an additional generation loss.
Premiere Pro CS6 For Format, choose H.264, then choose an appropriate Vimeo preset.

Premiere Pro CS6
For Format, choose H.264, then choose an appropriate Vimeo preset.


Layout

While the visual style of your site is up to you, I recommend keeping things minimal and only including a few key sections on your site. This is your portfolio site, not your personal journal to dump everything into. The exact word choice in your navigation is up to you, but I'm a fan of simplicity and consistency.

  1. Reel
    Make this the main page for your site. It should contain an embed of your demo reel and nothing else.
  2. Work
    This page should contain multiple video embeds, representing whole projects from your portfolio. Try to keep this to under seven projects. The more non-critical things you present to someone to watch, the more likely they are to miss or skip the things you really wanted them to watch.
  3. Resume
    This can be a download link to a PDF version of your resume. You can also create a page that is a custom, web version of your resume, but don't forget to include a PDF option. Don't make the mistake of uploading a JPG version. I guarantee somebody will try printing it, then wonder why your resume looks like crap.
  4. Contact
    This page can contain your email address (assuming it's not already in the header or footer of your layout), a phone number (if you think it's necessary; I don't), a guide to pronouncing your name (again, if necessary) and a contact form. I also think this is a good page to include a short "About me" segment that can serve as a more personal introduction than a resume. Maybe include a photo. Maybe not.

Misc. Tips

    • Grown-up email address
      Now is the time to consider retiring your old email address, especially if it's at all unprofessional (unless that's your thing, zombieunicorn69@comcast.net). Seriously though, numbers that indicate your age or date of birth? Gone. AOL? Yahoo? Gone. An email address from basically anywhere except Gmail or a custom domain? Gone. 
    • Avoid (some) spam
      Use a utility like Dan Benjamin's Enkoder Form to mask your email address from spam bots. I'm not 100% sure how well it protects you nowadays, but it doesn't hurt to try. If you have a Gmail address, you already benefit from their excellent spam filtering.
    • Uploading a PDF resume on Squarespace
      Squarespace does not support uploading a PDF file directly in an image block, so you have to get a little fancy. First, click the "Add Page" button under Main Navigation, then choose "Link". Enter a title (how about "Resume"?), then click the section labeled "Click to add URL…", click "Files", then choose the PDF version of your resume.