I’m a little late to the party, but I wanted to mention thatĀ WordPress 4.0 “Benny” was released last week. As of writing this post, it’s been downloaded a total ofĀ 2,527,700 times.
The release revolved around polishing the way we manage and create content. There are a lot of things to love about 4.0, including my favorite new feature: previewing of embeds within posts and pages.
I played smallĀ role in a lot of different small design tasks during the release, including:
The design for the new plugin “cards”
Minor design tweaks to the new media grid and media grid attachment modal
A small Dashicons update
The design for the “About” page
If you’re already running WordPress, be sure to update your sites to 4.0.
Today marks a year since I officially started at Automattic.
This year has been one of the busiest, craziest, and most rewarding years of my career. In the past year, I’ve traveled to Chicago, San Francisco, Santa Cruz, Las Vegas, Rome, Austin, Seattle, and New Orleans. Joining Automattic felt like being welcomed into a big family. I’ve had the pleasure of working with some of the most talented, dedicated, and welcomingĀ people I’ve ever met. My colleagues constantly inspire me, and push me to become the best designer I can be. I am incredibly thankful for their encouragement.
At Automattic, I can make a difference in the web, in the world ā and since we’re fully distributed, I can do it from wherever I happen to be, whether it’s my coworking space in Cambridge, orĀ the other side of the country, or even the other side of the world.Ā I have total freedom and flexibility.
It’s humbling to know that theĀ productsĀ I create touch thousands of lives every day.Ā I am empowered to create greatĀ work and be the change I want to see. If I spot something that needs work, I can jump in and fix it myself. We’re trusted to make smart decisions and think for ourselves.
I can’t believe an entire year has gone by. Some days it feels like I only just joined our merry little band, and other days it feels like I’ve always been here. Here’s to many more years ahead of me.
(Of course, no one-year post would be complete without mentioning that we’re hiring.)
I presented on creating a great portfolio site atĀ WordCamp ConnecticutĀ this past month. Here are my slides, with included summary:
I made my first portfolio site some time during or right after my senior year of college, after I had been working in the field for a year or so. It was pure html/css, with some jquery sliders hacked in to each page. My “About Me”Ā section read a lot like an overbearing resume, with some unprofessional photo choices. It wasnāt that great.
When it came to my work, I had a couple pieces in two different sections ā web, and graphic. The web stuff was better than the graphic pieces, but I felt like I needed to flesh out my portfolio, which was looking kind of barren. I had to scrounge for some graphic design examples.
Since then, Iāve done a handful of iterations to my portfolio, including two larger redesigns. In the time, Iāve picked up a couple tips and best practices for building portfolios which I want to share. These notes are meant to be read alongside my slides.
Keep it simple
My personal portfolio journey has seen a trend of going from more complex to simple. Each version gets a little more focused and streamlined. Recently, I set out to update the design of my portfolio again. I wanted to keep the same general look and feel, but refine it and remove cruft. I had this sidebar hanging out on my blog page with pretty useless content.
In my new version (not yet launched), I cut out the sidebar entirely and gave the content some more breathing room. I simplified the overall layout, while still make different stylistic accommodations for a couple different post formats I use pretty often.Ā Additionally, my interior pages all had room for a sidebar which I just didnāt put anything into. It was just this black bar there to break up space so my line-length didnāt get too long.
If youāre redesigning your portfolio, be sure to remove unnecessary cruft. Always question your decisions. Does that sidebar really need to be there? Make sure youāre using your space effectively. You should be able to back up every design decision you make with a reason.
Let your personality shine through
Portfolios are personal. No matter how youāre making yours ā designing your own, customizing a theme, whatever ā itās important for your portfolio to reflect you. Thereās a couple ways you can bring in a bit of your personality into your portfolio, especially your homepage. Here’s a few ways you can do that:
Clever microcopy or intro statements
Youāll just want to make sure your microcopy fits the tone youāre trying to present. Fun, frivolous copy is okay when thatās the attitude youāre projecting ā young, hip, and trendy ā but if your target clients or dream job are more conservative and business-y, youāre going to want a more serious tone.
Type and iconography
I consider type and iconography to be pretty tied together, and ideally, your type and icon choices should complement each other. You can show a lot of personality just through your choices of type and iconography. Thinner, lighter fonts and icons present a very different image from heavier, bolder fonts and icons.
Illustration and animation
Hand-crafted illustrations, or just a little bit of signature animation can go a long way.
Even just between the two illustration examples in my slides, thereās a lot of difference. Theyāre both flat, but the use of color is very different and gives them very different feels.
Self portraits
Thereās nothing like slapping your face on a page to say, āHey, this thing is mine.ā
This is especially true when you combine it with some clever copy.
Iād advise only doing this if you have some quality head shots.
Tailor your portfolio to a specific audience
You want to tailor your portfolio to a specific audience. The more specific your audience, the better you can tailor what projects you use and what tone you want to convey.
So this is a pretty popular quote, ādress for the job you want, not the one you have.ā The same goes for your portfolio. What do you want your next job to be? Tailor the projects you show to that specific job, whether itās a freelance client project or a full-time job. Your portfolio isnāt any different from a resume and cover letter in that regard.
That said, itās also totally fine to have a portfolio that is purely a showcase of your work (like living museum of your achievements and skills) instead of a tool for job finding. Thatās cool, and it also means you can be a little more relaxed about the type of work you show and how much you end up explaining it.
Now that I’m redesigning my portfolio again, Iām planning on emphasizing a lot of the more recent work I’ve been doing inside of the WordPress ecosystem. My portfolio is becoming more of a showcase and a home for my professional progress, rather than something I’m using to get hired.
Don’t showcase work you wouldn’t want to do again
That leads into this next topic ā donāt showcase work you wouldnāt want to do again, because at some point, someone is going to ask you to do it again, and youāre not going to like it.
For example, Iāve discovered that logos arenāt really my forte. And Iām not really fond of making them. Theyāre a bit too abstract for me. But by including my logo work in my portfolio, people asked about them. And Iām like, āno, Iām not good at logos, why do you want me to make one?ā I eventually just took them all out.
Don’t do something cool just because you can
The first time I redesigned my portfolio, I convinced myself that I really wanted to use Isotope, which is a fun js plugin for displaying and rearranging content in a grid. I really wanted to combine it with a gallery to make a filterable portfolio, so viewers could look at everything at once, or drill down by subject. After some intense googling, I found a way to combine Isotope and Nextgen gallery.
Building it was awful. I bashed my head against coding it for a while before finally getting help. It was by far the most challenging piece of my portfolio redesign, but at last, I finally had a filterable portfolio.
The end result looked something like this:
Except, with only a couple pieces per section, it ended up looking pretty sad and bare. I ended up inflating it with mediocre work just to get it to fill out. It was stupid. I fell in love with a idea because it sounded cool, not because it made my portfolio better.
Less is more, as long as it’s high quality.
This brings me to another point: less is more, as long as itās high quality.
My first portfolio had as many items as I had work to show that I wasnāt embarrassed by, since I was still starting out.Ā My next iteration saw an influx of mediocre work just to fill space. When I was showing a lot of examples, they weren’t that great. The quality of my entire portfolio was lower. I was only showing images, not giving any sort of explanation.
I thought more was better and images were better than lots of writing, but I realized I was wrong. Just a couple pieces are okay, and your portfolio is only as strong as your weakest piece.
My current portfolio only has four pieces. Iāve decided on a 4-6 project limit for now, just to make sure Iām not tempted to add in any work just to fill out space. This has worked out pretty okay for me.
Explain your process. Your work doesn’t speak for itself
Related to just showing images, Iāve learned that in order for my projects to have any impact, I need to explain them. (This is also much easier to do when you only have a handful of projects.)
You should focus on the problem you solved, not the tools you used.Ā My first site did have some explanation around each piece, but I emphasized the tools I used instead of the underlying problems, goals, and process. It doesn’t really matter how I did it. Tools come and go and are specific to each person’s workflows. You should like your tools and be passionate about them if questioned, but I don’t think they matter as much in your portfolio.
(Side note: the only big exception to this that I can think of is a fine art, photo or video portfolio, where the tools and the outcome are tied much more closely than in a web work portfolio.)
I used to just have thumbnails that opened into light boxed static mockups, along with a short blurb about the piece. When I redesigned my portfolio the first time, I cut even that out and just used static thumbnails and mockups to show off my work. It wasnāt super effective. The lightbox technique was fine, but without any sort of content backing up my images, the impact of each piece was totally lost.
One of the best ways to explain your work is through case studies.Ā Case studies are detailed overviews of a project. They focus on the entire project and its different moving piecing, rather than just looking at the finished product. Depending on the scope of the project and the purpose of your overall portfolio, they can go from long and detailed to short and succinct.
Writing a longer case study
What was the overall goal of the project?
ex:Ā increase membership by 10%, double revenue, gain 100 new subscribers, etc. Usually tied to a metric, but not always. Could also be raising brand awareness or perception.
What problem was the project trying to solve?
ex: how can we make our content more relevant, how can we reach the right user base?
What role did you play in the project?
designer? developer? copywriter?
What was the process you used to solve the problem?
ex:Ā user interviews, users testing, built custom solution, load testing, etc.
What were the results?
Were you able to meet your project goals? Why/why not?
Good place to include testimonials, if you have them
Link to the final product
A shorter case study can also be okay.Ā Artists, musicians, or anyone making a showcase-style portfolio can get away with a brief project description.
Writing a shorterĀ case study
What was the project?
What was your role?
Relevant screenshots, mockups, code snippets
Link to the final product
(Side note: Don’t rely on your GitHub or Dribbble accounts.Ā Iāve seen a pretty big trend of people relying on their Github accounts instead of having a portfolio. While GitHub and Dribbble are great for seeing an overview of your technical skills, they’re notĀ great for learning about your process or how you work in a team (unless you’re very visible in OSS).Ā It’s okay to link to and hype up your Github/Dribbble profile, but your work there doesn’t speak for itself.)
Make it easy for the right audience to get in touch with you
This pretty much goes without saying, but make it easy for people to contact you. This could be a general, all-purpose contact form, a contact form crafted for generating project leads, or even just links to your professional accounts like LinkedIn. People shouldnāt have to hunt for a way to chat with you, unless you want them to have to hunt.
In my case, I actually removed the contact form from my website, since it was just being used by sketchy recruiters or people looking for support with my theme, which Iād prefer to go through the support forums. Anyone who really needs to get in touch with me can ping me on Twitter.
What do employers look for in a portfolio?
I polled twitter to see what employers look for in portfolios. Here are some of the responses I received:
Make each portfolio pieceĀ its own page, and link to them from a central portfolio page
Finding (or making) a good theme
What makes a good theme?
Keep it simple so you can customize
Even if youāre non-technical, Iād try to customize any theme you choose just a little bit. If child theming is a little too much, there are plugins that allow you to change a themeās css without overwriting the theme itself.
Aim for the general layout you want
Aim for the general layout you want, especially if you arenāt as strong with css. Layout changes are a pain, but basic style changes (like colors and fonts) are much easier.
Avoid themes with too many options
Additionally, try to stay away from themes with a million different options. In my experience, they end up being a lot more complicated than if youād just done some basic customizations yourself. Itās easy to lose site of what youāre doing when youāre presented with 10 pages of options.
Avoid baked-in functionality
Same, avoid baked-in functionality like custom portfolio solutions. Leave those for plugins. If you decide to change themes later, youāll lose all of that functionality.
I’ve gone through and picked a coupleĀ free themes I think would be good starting points for portfolios.
Widely has nice, big images and has fairly simple styles, making it really easy to customize. Get it on WordPress.com or download for WordPress.org.
Same with SemPress, which I think would make a great starting point for someone without a lot of images, like developers or writers. Itās also fairly simple, so you can do a lot with just a couple color or font changes. Get it on WordPress.com or WordPress.org.
I found Mixfolio to be complicated to set up like the demo page, especially without reading the documentation, but it has a pretty great layout for a portfolio. It also looks super bare- bones, making it easier to customize with your own style and personality. Get it on WordPress.com or WordPress.org.
Hatch is pretty similar to Widely, and is made just for portfolios. Itād be great for a visual designer, artist, or photographer. Get it on WordPress.com or download for WordPress.org.
Portfolio Press is a portfolio-specific theme built by Devin Price, who also has a Portfolio CPT plugin that pairs with the theme, making it easier to add content. Disclaimer: it does have options, which Iām generally against, but theyāre less egregious than other themes, and are added via a plugin, not the theme itself. Get it for WordPress.org.
Motif is great for a more business-y, professional portfolio, especially for a one-person agency. If youāre using it on WordPress.com, it also hooks in to our testimonials custom post type so you can easily enter quotes from clients. Get it on WordPress.com or download for WordPress.org.
Illustratr and Espied are using WordPress.comās new Portfolio custom post type, which makes adding projects super easy. Theyāre both designed explicitly to be portfolios.Ā Both are pretty simple, so again, it would be easy to apply your own colors and fonts.
If youāre a developer an youāre looking for more of a casual, blog-style portfolio, Crowd Favorites has a really awesome theme called Capsule, which they label as a ādeveloperās code journal.ā You can easily add and annotate code snippets. Itās a really fun and unique use of WordPress. Download it for WordPress.org.
Feel confident with your css skills and want to roll your own? Check out _s. Itās what Automatticās theme wranglers use to start all of their themes.
These are just a couple I pulled out that would make an okay starting point for creating your own portfolio. There are hundreds of free or paid themes out there you could potentially use!
Enhance your self-hosted portfolio with plugins
Jetpack comes packed with awesome functionality. Iām mentioning it first because it actually has a lot of the same functionality that the other plugins Iām going to recommend, except in one plugin. Here are some Jetpack modules you can use to make a portfolio:
Photon (load your images from WordPress.comās CDN)
Widget Visibility (chose what widgets appear on each page)
Publicize (easily share your work with your social media accounts)
Carousel (shows your images with a nice lightbox effect)
Tiled Galleries (adds a bunch of different gallery layouts to chose from. I love the tiled mosaic one)
Contact Form (easily add a contact form to your site)
Custom CSS (lets you customize your css without overwriting your theme)
Portfolio custom post type (coming soon?)
Donāt want Jetpack? No problem. For better galleries, Iāve used Nextgen before. Definitely adds another layer of complexity, but you get a ton of control over your galleries, which is extra great if youāre an artist or photographer.
Contact Form 7 was my go-to contact forum plugin before I started using Jetpack. It looks a little more technical, but it actually has a lot of pre-set options that make it easy to throw together a form.
Devin Priceās Portfolio Post Type plugin is great if you want to add your content using a CPT, but donāt want to write it yourself. Youāll still need to customize your theme to take advantage of the post type, so Iād recommend this more for users with a little bit of templating knowledge, or really great documentation reading skills.
I recently hopped over to Amazon for some reason or another, and was immediately presented with this prompt:Ā
There it was, a prompt for buying a book from an author I’d bought a couple books from before in the past.
“Oh,” I said to myself, “that’s dirty. That’s just dirty. That’s not playing fair.” And I continued saying that as I clicked on the title and pre-ordered the book. It was straight out of BJ Fogg’s behavior model ā I had the motivation (“I like this author!”), I had the ability (It was two clicks between seeing this prompt and pre-ordering the book), and this provided the trigger. Well played, Amazon.
WordPress 3.9 “Smith” was launched this afternoon. It’s the fifth release I’ve contributed to. The cycle focused a lot on improving the content and media editing experience within the WordPress admin, along with adding a redesigned theme browser for installing new themes, and a new way to add widgets to your site via the Customizer. (Post Status has a nice recap of the user-facing features) It was an incredibly feature-rich release that I’ve personally been looking forward to for a while.
Along with 266 other contributors this cycle, I:
Worked on refining the design of the playlist settings panel
Helped Gregory Cornelius and Andrew Ozz with the UI and UX around the various gallery and image editingĀ improvements
Helped redesign a lot of the variousĀ TinyMCE modals along with Janneke Van DorpeĀ and Andrew Ozz
Along with Ben Dunkle, added a ton of new icons to Dashicons, the WordPress admin icon font, including an entire suite of of media icons to replace the old “crystal” icon set
Designed theĀ 3.9 “About” page along with Kelly Dwan
Thanks to all of the contributors this cycle, especially the releaseĀ leads Andrew Nacin andĀ Mike Schroder, and feature developers Andrew Ozz, Gregory Cornelius, andĀ Scott Taylor. 3.9 was a good one. :)
A familiar notification ping summoned me over to Facebook. Hark! You’ve received a comment on your status update! When I clicked in to see what the new comment said, I was hit by the new Facebook design. Since then, I’ve had a couple hours to sit around with it in the background. Here are some of my initial thoughts:
The top nav/masterbar feels much nicer in this iteration. Already, I feel like I’ve done less hunting for the right thing to click.
Everything feels just a little tight. I don’t mind things being a little smaller, and I totally understand why Facebook took the approach they did, but I find myself longing for a bit more space between and inside of updates on my news feed, even at the expense of taller updates. Even just jumping from 12px to 15px inside of each update feels like a world of difference.
Same goes for the text itself ā the line-height feels a little too short, so everything feels cramped.
I’ve wanted to be able to minimize groupings in my left sidebar for the last couple iterations; now that everything is just a little tighter, I really want to be able to now. Something like this:
Collapsed sidebar. Only while mocking this up did I discover that I can actually archive the plethora of lists I’m shown by default… but archiving doesn’t seem to actually do anything?
All this said… I am one of those people using a high-end computer with a beautiful retina screen. I’ve been spoiled by large, crisp images and text. A lot of the cramped issues could look better on an average laptop, or a smaller screen. A better test would be to give it a go on my Chromebook and see how it feels in that context. Maybe I’ll check it out when I get home later.
I don’t find the new Facebook update too bad. And, like all changes, I will adjust. Kudos to Facebook for putting the bulk of their users first, and not just going for the design that looked best on a retina Macbook Pro.
This past weekend, I attended New England GiveCamp. The goal is to spend a weekend helping out a local organization or non-profit somehow with their web presence. This could mean redesigning an outdated website, or helping them build a new site or app.
The camp went from 6pm Friday to 5pm Sunday. Over the weekend, my team and I spent about 24 hours total on our project, Mill Falls Charter School. We were comprised of:
Meryl Levin, the founding board chair at Mill Falls
I ended up on the Mill Falls project by chance ā the original project I had been assigned to was unable to make it, so my team got split up and put onto other projects. (This worked out well for the Mill Falls team, whose original designer was also unable to attend.)
Old Mill Falls homepage
Old Mill Falls interior page
Once my group snafu got figured out, Kelly started making updates to the Mill Falls WordPress install (it was running WordPress 3.1 ā ouch!), and started removing unused plugins. I huddled up with Meryl and Rachel to go through the project goals, and then on the site’s information architecture. The current site was a little complicated ā there were some pages that could be condensed and combined, as well as restructured into more specific top-level categories.
We whiteboarded out all of the pages together
After deciding on an updated site architecture, we discussed what we thought some of the most important elements were, so we could highlight them on her homepage. I finished up the night wireframing out a basic homepage and interior layout at desktop and mobile sizes as the rest of my team got together and talked about some of the more technical bits. We touched on the site aesthetics at the end of the night, and then at around midnight, we wrapped up and Kelly and I headed home.
The second day dawned rainy and cold ā the perfect kind of day to spend inside, designing and coding. I jumped straight into designing, mocking up the homepage and interior design in Photoshop. It’s been over a year since the last time I worked on a client site, and it was fun to slip back into familiar patterns.
Meryl was interested in keeping the existing look and feel of their site, but growing upon and modernizing it. Their existing site already looked pretty good, so I had a really solid base to work off of. One of my favorite features were some really charming slides in a carousel on the homepage. However, since you probably shouldn’t use a carousel, I decided to take out all of the slides and highlight them on each primary page. While I originally intended for Meryl to eventually replace them with photography, the slides grew on me more and more throughout the weekend.
Since the site was also pretty navigation-heavy, despite our re-architecting, I decided to give each sections its own on-page submenu, instead of just relying on the menu’s dropdown. This would give site visitors a better sense of where they were. I drew in colors from the slides, which already formed a really lovely color palette.
I finished mocking up my pages in the early afternoon and had a check-in with Meryl via Google Hangout, since she was unable to drive down to BostonĀ that day. She was super enthusiastic, and provided some great feedback as we went through the designs. I ended up with very few elements to change. After making some minor adjustments, I handed off the mockups to Kelly to start implementing.
While Kelly started coding out the designs, I worked on restructuring the current site’s menus and pages to match the IA we had discussed the previous night. The rest of the day was focused on structure and development. Later that evening, when it started to get into crunch time, I helped out Kelly with some minor theming bits like styling forms and the interior sidebar. We wrapped up at 11 with an almost entirely complete theme.
The rest of today was spent wrapping up. We activated the theme on the live site and made some minor adjustments to the content, including setting the featured image and header background color for each page, depending on the image. We walked Meryl through the site and its various features, and had the pleasure of introducing her to the (somewhat new) WordPress media modal, Jetpack galleries, and the new admin color schemes.
We also put together a style guide so she would have quick and easy access the colors we used, and a visual guide to the different text and header stylings, using Mark Jaquith’s WP Help plugin. Kelly wrote up some additional documentation around widgets, menus, installed plugins, and changing the featured images and their background colors.
We ended up pushing right up to the presentations at the end of the day. All told, we spent 24 hours over the weekend working on the site. I’m incredibly happy with the site we produced, and it was really great being able to help. Working with Meryl, Rachel, and Kelly was a real pleasure. Their professionalism, enthusiasm, and and knowledge really helped shape this project into something special. I had a really great weekend.
This week, I attended An Event Apart Seattle with a handful of coworkers. It was the first time I had seen any of these particular coworkers since October (and in the case of one coworker, it was the first time I had met her). Getting a couple days to hang out in a conference setting with my coworkers was amazing. I’m constantly reminded of how passionate, talented, and dedicated they are. I get pumped just thinking about hanging out with them, and I can’t wait to get together with my team in New Orleans in a couple weeks.
AEA:S itself was fantastic ā from a learning and development standpoint, it was definitely the best web conference I’ve ever attended. I learned something new at every talk. The speakers were smart, funny, and engaging. I got to see one of my own personal design heroes, Mike Monteiro, speak live for the first time. I can’t wait for my next chance to attend AEA.
I’m also incredibly grateful to work for a company that will let me take a few days to meet up with my coworkers and learn from some of the best and brightest minds in the industry. I love my job, and I love what I do, and I’m really excited to come back, full of energy and enthusiasm for what I’m working on.
