Portfolio Revisited

I took my first web design class in the Fall of 2011 from the wonderful Roman Jaster. It was the first time USC was offering a coding class through the Roski School of Fine Arts. Needless to say, I really enjoyed the class, so much so that after it was over, I had this weird desire to code something. Anything. I just really wanted to code.

So, I started working on plans for my first portfolio site. I gathered some inspiration from around the interwebz, made some sketches, created initial mockups in Illustrator, and started coding from scratch (with just HTML, CSS, and a few nifty javascript plugins). This was my result: a fixed width site (960px ftw?) with Isotope filtering, lightboxes, a transparent fixed header, and an HTML version of my resume.

Portfolio Revisited

Ah, yes…vintage portfolio goodness…AKA my first portfolio site.

All in all, I was really happy with the site. It was only the second website I had ever created (this was the first: A Sweater Story), before I had any knowledge of things like responsive web design, PHP, content management systems, or any other fancy web shenanigans. The site served me well for about a year, but it proved to be difficult to update because there was no CMS. It also did not reflect the fact that I was beginning to pursue web design. Ahem, remember that fixed width business? Well, that’s not really so fine and dandy anymore…I began to get nervous about sending my site to potential clients for reference, and instead sent them links to responsive sites I had created more recently. When people I knew stumbled upon my old portfolio site, I would say, “Oh, yeah. I haven’t updated it in a loooong time…haha,” murmuring, “Please don’t look at it,” under my breath.

Designing a portfolio site can prove daunting to even the most industrious, experienced designers, and I was definitely a little nervous. It seemed even scarier because I was a web designer designing a portfolio website to showcase my web design. It was basically web-ception, a website within a website. Okay, maybe not that crazy, but still…I had to make a plan.

I set aside some time between client projects to think about what I wanted and why I was making the new site.

My Goals

I wanted to create a site that…

  • reflects current web standards
  • is easy to update
  • is fully responsive
  • feels modern, bold, and a little bit quirky
  • is “mobile-first”
  • has personality
  • has some fun surprises
  • has nice typography
  • has big images

Site Outline

Next, I thought about the content. What did I want to put on the site? How would I organize the content?

I created a list of the different pages on my site and the content that would appear on each page. Then I sketched some rough ideas.

Portfolio Revisited

Some lists and early sketches. Lists are good.

Research & Gathering Inspiration

This part can be simultaneously fun and completely disheartening. There are so many amazing websites out there in the world that it’s easy to get overwhelmed by the collective amazing-ness of other people. I found that it was best to look for inspiration in small doses and to focus on specific details. I went to some web design inspiration sites like siteInspire, Niice, Designspiration, MindSparkle Magazine, and Httpster, but also looked for inspiration in various sites that I’d bookmarked over the years for one reason or another. It was also helpful to look at the websites of designers I admire.

I used Gimmebar to save my inspiration (they have a nice bookmarklet so you can take screenshots of the entire site) and wrote brief notes about what I liked on each site. While gathering inspiration, I would periodically revisit my site list to add or remove items and rearrange things.

Wireframes

Next, I created wireframes using the desktop version of Balsamiq Mockups. It’s a really nice program that keeps everything looking sketchy and hand drawn, so you really focus on the layout and not the design. It basically makes blueprints of websites.

Visual Design

Once I was happy with my wireframes, I moved on to the the design phase. I used Illustrator to create the mockups. I like it because it allows for easy iteration.

This stage of the process took longer than expected. I was having trouble reconciling the design of my old site with the design of my new one. It was a bit of a process, learning to let go of various design elements in order to create something that reflects my work now as opposed to my work from 2 years ago.

Eventually, after being told to embrace my quirkiness and make the site “weirder,” I found a direction. This direction took the form of some cute little creatures from my sketchbook. I also went away from my turquoise color and opted for a bright, cheery yellow instead (though turquoise makes a cameo appearance on my about page and in my Musings). Once the header and main navigation were set, the rest of the site began to fall into place.

Portfolio Revisited

Balsamiq wireframes for desktop and mobile.

Portfolio Revisited

Illustrator mockups. Just keep iterating, just keep iterating…

Development

Thank you, WordPress for being wonderful! But really, WordPress is pretty great. Most of the sites I’ve made are built with WordPress. I love the flexibility of the platform, the community and resources, and the number of amazing plugins and themes that are available. Speaking of themes, I always start with underscores, (or _s for those in the know). It’s a super minimal theme with basically no styling, so you can start off with a clean slate. Just add some HTML, CSS, PHP, and JavaScript magic and you are good to go!

I used Dreamweaver’s code editor to code this site, though I’ve recently switched over to Sublime Text (that dark background just really speaks to me). I also use Emmet which has lots of shortcuts. Sites practically code themselves (not true at all…). Of course, Firebug is a lifesaver when it comes to developing and debugging. Why is that image suddenly in the sidebar? Oh, I forgot to add display: block. Thanks, Firebug. I’ll fix it now. What if my header was lime green instead? Oh, that’s gross…Thanks, Firebug for saving me from myself…This is pretty much how it goes.

Plugins

A WordPress site would not be complete without a bunch of great plugins:

Admin Menu Editor
This lets you set up the backend admin menu exactly the way you want it to be. You can give each page its own menu item and even add some fun icons. It’s especially great for organizing client sites!

Advanced Custom Fields
This plugin is amazing. AH-MAZING. Thank you, Elliot Condon. ACF allows you to create custom fields for specific pages and posts. It even has conditional logic. This means you can have WAY more flexibility than with just the default WordPress WYSIWYG editor. There are also a bunch of wonderful add-ons that make the plugin even more robust:

  • Repeater Field: This lets you create a field that can be repeated over and over and over and over and over…Super useful for things like images, FAQs, and any kind of modular content type.
  • Options Page: This creates an Options page that can contain custom fields. You can use it to create content that shows up on all pages. I use it to store my Secret Panel content.
  • Flexible Content Field: I sorta, kinda freaked out when I found out about this add-on. It is really and truly fantastic. Basically, it allows you to create different content types that can then be added and rearranged to create a post or a page. I use it to create my Musings. You can actually use this add-on to make a completely modular site. So great.

Custom Post Type UI
This plugin helps you create custom post types and custom taxonomies. Really nice when you have a site that requires a blog AND another kind of post.

Custom Post Type Permalinks
This lets you make archives for custom post types with nice permalinks. Fancy!

Duplicator
This plugin makes developing WordPress sites sooooo much easier. If you’ve ever worked on a WordPress site by developing locally, you know that the move to a real, live server can be quite daunting (what with the database changes and serialized data and all). This plugin takes care of you and holds your hand through the whole process. You can also use it to make backups (important) and take snapshots of your site at a certain point in time. This is a must-have plugin.

Google XML Sitemaps
This makes a nice site map to help major search engines (not just Google) index your site.

Advanced Responsive Video Embedder
As the name suggests, this makes videos responsive. It also has a very nice minimally styled player.

MinQueue
This plugin minifies and concatenates scripts and styles for faster site loading. Hooray! Also, concatenation is a great word. It’s like a whole nation of cats.

Add Meta Tags
This takes care of your SEO needs with basic meta tags, Opengraph, Schema.org, Twitter Cards, and Dublin Core metadata.

HTML Editor Syntax Highlighter
This plugin helpfully highlights code in the WP text editor. It’s especially useful for making sure open tags are closed. Hopefully you don’t have to do too much editing in the text editor though…

Preserved HTML Editor Markup
This plugin keeps your code in line in the WP text editor. Because line breaks and whitespace are useful.

WordPress Backup to Dropbox
Backups are important. This plugin keeps everything nicely stowed away on Dropbox.

JQuery Magic

I use Isotope to do the filtering and masonry on my homepage. The new version is really easy to implement and allows for fast formatting.

Fonts

I use JAF Facit for headings and navigation and PT Serif for body copy. Thanks, Typekit!

Icons

Fontello is a really great place for making icon font sets. You can choose from their huge library of icons and even upload your own custom svgs. That’s how I added the little icons to the filters on my homepage. Yay!

Portfolio Revisited

JAF Facit and PT Serif in action.

Portfolio Revisited

Custom filter icons delivered via Fontello.

Validation

When nearing the end of development, it’s nice to run the site through an HTML validator just to make sure there are no really bad errors like missing closing tags or improper nesting. Sometimes I use a CSS validator too.

Launch!

When I  finished the development, did some cross-browser/cross-device testing, squashed some bugs, and added all the content, it was time to duplicate the site (via my friendly neighborhood Duplicator) and move it on over to its new home! Then I added Google Analytics, set up Google Webmaster, and took a break (and probably a nap).

Launching a site just makes everything seem so worthwhile, doesn’t it? There’s that moment of, “Is this really happening,” and then the obsessive refreshing and checking of pages to make sure everything works, followed by a long sigh of simultaneous joy/relief/exhaustion. Yup, launching my site was fun, and I’m excited to keep on keeping on. Also, I’m not scared to send people here anymore.