Portfolio Design Tips

In the past couple of months I’ve gotten involved with hiring designers at Automattic (which is a pretty new and kind of weird experience for me). I’ve seen enough portfolios that I’m starting to get a feel for what’s effective and what misses the mark. Here are some tips:

Optimize your images

Don’t make me wait. Your images should be high-quality and retina-friendly, but they also shouldn’t take forever to load. If your design tool of choice doesn’t do the optimization for you, there’s a bunch of free tools you can use to whittle down your file size without losing too much quality. I want to see your big, beautiful portfolio examples, but I don’t want to have to wait for them to load forever.

Make your projects easy to browse

Should be intuitive, and yet… I’ve reviewed so many portfolios where it’s not easy to go from one project to the next. Simple navigation, whether it’s a grid of projects or even just a Back / Next link at the bottom of your project, is enough for me.

If you worked on a project with others, clearly state your role

Design is often collaborative. That’s awesome. But if you’re showing projects you worked on other designers (or art directors, etc.) try to be as explicit as possible about what part of the project you were responsible for. Don’t make whoever is viewing your portfolio try to guess which part is yours and which was done by someone else.

Write case studies

Show me your sketches and your process. In my opinion, the worst thing you can do is just throw a bunch of screenshots or mockups on your site with no sort of explanation or guidance. What were the project goals? Did you accomplish them? What was your process like? Why did you make these decisions? It doesn’t need to be an essay — even a paragraph is fine — but it needs to get me into your head and see the project from your perspective. A couple screenshots isn’t going to do that.

Remove your older projects

I’ve seen a lot of work from 2011-2013. It usually looks outdated, because it is. Just cut it. If you’re worried about not having enough work, spend more time on your recent examples and work them into case studies. Older or mediocre designs bring down the overall quality of your portfolio. It’ll be stronger without them, I promise.

I know this is probably kind of ironic, given I haven’t updated my own portfolio in quite some time and it’s pretty sad and outdated. I’ve honestly been thinking about redoing my site and removing my portfolio in favor of just my blog — but that’s a topic for another time.

PS: Automattic is hiring Product Designers and Marketing Designers!

Why WordPress.com Rocks for Small Business Freelancers

Disclaimer: I work for (and on) WordPress.com, so I’m obviously biased about how great it is 😉

WordPress.com is underutilized by freelancers in the WordPress community. When I hear freelancers talk about making small business websites for clients, self-hosting WordPress seems to be the only solution people mention.

That’s a shame — WordPress.com can be a quick, inexpensive, and secure way to build a website. If you’re adept at theme selection and setup, you can sit down with your client and build a website in just a couple hours.

Here’s why WordPress.com can be an attractive site-building tool for folks who target small businesses:

Easy for clients to use

The hardest part of setting up a site is actually setting up the site in the first place. This can be a huge hurdle for people without website building experience. Once you’ve built up that experience, however, setup can become fast and easy. This is the kind of skill freelancers build in abundance.

Once a site it set up, clients just have to worry about updating and editing content themselves. WordPress.com’s content tools are fairly intuitive. With a bit of training tacked on to your site-building process, you can get your clients up and running on their new site in just an afternoon.

Tons of Themes to Choose From

WordPress.com offers over 350 free and premium themes, the vast majority of which are responsive. (As of this post, 167 free and 192 premium, ranging in price from $19 – $175. Most are in the $49 – $79 range.) Though there aren’t any theme frameworks available, the number of available themes makes up for the lack of flexibility. The available themes, both free and premium, can be used for any small business site you can think of.

All of the themes on WordPress.com have been reviewed for security, speed, and usability. They are maintained, even after retirement (which doesn’t happen until they’ve been around for a couple years). You don’t need to worry about a theme updating breaking your client’s site, or an ignored theme update becoming a vector for hacking.

Once you buy a Premium theme, there are no recurring fees or subscriptions — you can use it on that site forever. When it is eventually retired, you can continue using the premium theme until you switch to a new one, at which time the theme becomes unavailable.

If your client springs for a Business plan, they gain access to all themes on WordPress.com, free and premium. It’s a nice perk in a more comprehensive upgrade plan.

Built-in Constraints

One of the best parts about WordPress.com is that it has a lot of built-in constraints.

Because clients can’t upload any random plugins or themes they find, or add their own code to their site without you knowing, the risk of getting their site hacked through insecure code is pretty much eliminated. While this limits the kind of features your clients have available, it can also be used as justification for keeping their site small and focused. When you offer people the world, they’re likely to take it. Limited functionality = limited scope creep.

Having limited features available also keeps your build time down. When you don’t need to worry about building functionality from scratch, or installing and configuring a bunch of plugins, you save time. When it comes down to it, most small business websites don’t need a bunch of custom functionality — they can make due well enough with the tons of features WordPress.com does offer.

Provides Most of the Functionality You Need

So what features does WordPress.com offer?

In addition to basic content management, it offers:

  • Custom domains and email support
  • Site stats for all users, and access to Google Analytics integration for Business users
  • Google Webmaster Tools
  • Tools for improving your SEO
  • Easy ways to add your contact information
  • Contact forms
  • Sharing across all major social media platforms
  • Portfolios for creative professionals
  • Testimonials to bolster your social proof
  • Some sweet image galleries options
  • Tons of content embedding options
  • Additional integrations from services like Eventbrite, Google Calendar, etc.

Is it as comprehensive and full-featured as building a custom site for your clients? Heck no. But is it good enough for most small businesses? For sure.

Maintenance and Support

One of the best parts of going with a hosted solution like WordPress.com is what happens after you finish building the site.

Back when I was doing agency work, we’d end up supporting our small business clients pretty much forever. Unless you negotiate a retainer plan, getting emailed every couple weeks or months about updates can be a hassle when you have a bunch of clients or if you’re heads-down in another project.

When you’re using self-hosted installs of WordPress, there’s a lot to maintain — plugin updates, theme updates, security updates, major release updates, etc. You can mitigate some of that by enabling auto-updates on your client sites, but if you client starts installing their own plugins or even themes, the risk of something breaking can get pretty high.

On WordPress.com, you don’t have to worry about that. All of the updates are taken care of for you and your clients behind-the-scenes. In the off chance that something breaks, WordPress.com fixes it right away. That means no ongoing maintenance or emergency 2am phone calls for you. If your business it built on ongoing maintenance and retainer plans, maybe this isn’t for you. If you want to serve a variety of clients without getting tied down to them for a couple years, then you should consider the benefits.

It’s also a super reliable host. WordPress.com hosts some huge names in news and big media, so you can be sure that if one of your client’s blog posts goes viral, or they get linked to from Reddit or something, their site stays up. Downtime is very rare. If something does go wrong? WordPress.com has killer support. Free users get access to forum support, and Premium/Business users get access to email and live chat support (and I really do hope your clients have upgraded off of the free plan — small they may be, but they are a business). Once you build the site, you can essentially push all of the ongoing support to WordPress.com so you can focus on new clients. Your clients get quick answers, and you don’t get emergency phone calls. It’s a win/win.

Why not give it a try for your next small business client?

Good Design is Environmentally Friendly

I recently gave a talk at WordCamp Maine about good design. In this presentation, I had a section on Dieter Rams’ principles of good design. When I was writing the presentation, I thought about how I could apply one of Rams’ principles, “good design is environmentally friendly,” to the web. This principle states:

Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.

“Environmentally friendly” is easy to understand when we’re thinking about industrial design and the production of physical goods. Eco-friendly design is sustainable; the creation, production, and eventual disposal of that product does not harm the environment. Like a good girl scout, our well-designed products might even leave the environment better than we found it.

This concept is a little bit trickier when you think about the web. As designers and developers, the products we build don’t often impact the environment at all. (The exception is perhaps our physical tools themselves: computers, tablets, and phones.)

Instead of the physical environment, we can apply Rams’ principle to the digital environment. Eco-friendly design does not harm an online community or its denizens. This means protecting our users’ information and privacy, and shielding them from abuse and harassment. If our designs don’t protect our most vulnerable users, then they are not eco-friendly.

We need to design to reduce anxiety, and design for people in crisis situations. Above all else, we should design so we don’t need to build sites like this.

Eco-friendly design becomes even more important as our world becomes more connected. More than three billion people now use the internet. That’s a lot of people whose lives we can fuck up through laziness, neglect, or malicious intent.

Mike Monteiro has given a great talk on this topic, entitled How Designers Destroyed the World:

I had the privilege of seeing Monteiro present in person. His talk has made a lasting difference on how I think about our roles as architects of the web. The decisions we make can, and often do, have a huge impact on the lives of our users. It’s our responsibility to see that our impact is positive.

Let’s leave the web a better place than when we found it.

Design Thinking at Smith College

Unleashing Creativity: An Interterm Introduction to Design Thinking

The establishment of a “Design Thinking” initiative at Smith College is one of the most exciting pieces of news I’ve heard since graduating in 2010.

While I was at Smith, there weren’t a lot of opportunities to get into design as I know it outside of connecting with particular staff and faculty members. I ended up forging my own path into design.

By my junior year at Smith, I knew that I wanted to go into design. I got into web design as a kid, making HTML sites from scratch on Angelfire and Tripod. My first year at Smith, I worked as an assistant for a professor, and one of my tasks was designing and building her website. That led me to working with Aisha Gabriel in the Educational Technology Services department, who at the time was the “web” expert. She helped me surpass my rudimentary knowledge of web design by introducing me to writing my own CSS (versus using something like Dreamweaver and tweaking).

I also was lucky enough to work closely with John Slepian, a digital design professor in the Art Department for both Smith and Hampshire. I took all of his digital media classes, and when I finished those, I worked with him to create a special studies focused around digital design with the goal of developing my design skills. It was a blast, and introduced me to new techniques and design methods that helped as stepping stones into my career.

Before my senior year, I did a web design internship with a local agency which turned into a job, which turned into another job, which turned into my career after graduating. During my senior year, Smith created an Arts and Technology minor. The work I’d been doing with John, and the classes I’d been taking on web design, development, and digital art fit snuggly into it. I swapped over my art minor for arts & technology without reservations.

I think the creation of an Arts & Technology minor was finally Smith conceding that the two departments, Art and Computer Science, can fit together wonderfully. The introduction of a Design Thinking J-Term workshop, and a subsequent semester course, is a bold step towards creating a future where design thinking is embraced by all fields. By creating the initiative, Smith College is making a strong statement about its commitment to creating strong women leaders who have the tools to not only pursue their dreams, but also improve the world through empathy and human-first design.

I wish Design Thinking had been offered while I was at Smith, because it would have helped my professional development tremendously. Learning about user research, prototyping, and creative problem solving is an asset to any field. I would encourage any Smith student interested in building solutions that improve the lives of other people to check out the class, and all future Design Thinking initiatives.

Grief in the Age of Social Media

Last week I lost my nineteen year old cousin, Casey.

I — thankfully — found out when I received a call from my mother, early Thursday morning. She left me a shaky voicemail, the kind of horrifying, short, “call me back” messages that just tells you something is awful something is wrong. I called her back as soon as I checked it, fearing the worst. We had a tearful, awful conversation as she broke the news. At first I didn’t really get what she was saying. “Casey? Like Rob and Irene’s Casey?” My mom tearfully recounted what happened — black ice, trucks, the highway. A terrible accident, senseless, the wrong place at the wrong time. A fucking tragedy. Before she hung up, she gave me a sad, scared, “I love you, Mel.” 

A couple hours later, another cousin, Casey’s older sister, made the announcement on Facebook. She set up a crowdsharing campaign to help cover the funeral costs, which I shared. Another cousin saw my share.

Oh my god this is terrible

She hadn’t heard the news until seeing my Facebook share. What a terrible fucking way to find out. She was probably just scanning her Facebook feed, early for her on the West Coast, when she stumbled on my post. No warning, no phone call, just a shitty Facebook post.

That’s the reality of being a digital native today. News breaks fast. There are no secrets on social media. Facebook’s algorithms are designed to show you what they think you want to see. If a friend of yours keeps being tagged in posts, if you visit their Facebook wall, if you engage with those posts, clearly something important is up — so clearly you should see it.

For a week, my Facebook became a shrine to the collective grief of Casey’s friends, schoolmates, our family, and our family friends. Every time I looked at it, another post tagging Casey showed in my feed. Every time I would maybe start to think about something other than her death, I’d end up back on my Facebook tab or I’d be browsing on my phone and suddenly, there would be another gut-wrenching post about how much Casey meant to someone. I’m still seeing straggling posts.

What does it mean to grieve in an era of social media? Is it a burden, a constant reminder of pain, or a blessing to get to see just how loved she was? Does collective grieving make it any easier? Was it right that I was sitting there, absorbing someone else’s grief to help sooth my own? Was it an invasion of privacy? Should we just assume all digital spaces are public? I battled with all of these feelings and all of these thoughts but I just couldn’t look away, and I couldn’t avoid it without avoiding Facebook entirely.

After a solid week of social barrage, I’m still not sure what to think.

Casey was a really fucking cool kid. She’d been accepted into the Disney College Program, and was going to study animation. Out of my huge extended family, she was the only cousin I had who was like me. She was really into anime and cosplaying and conventions. We shared a mutual love of Steven Universe. If we’d been closer in age, I think we would have been great friends. She was fun, and vibrant, and so fucking young. It’s not fair that she’s gone and I am so, so angry. She was so loved. At the end of her wake, I heard one of the folks from the funeral home estimate that some 700 people had attended, waiting for hours in the freezing cold weather to cram themselves into the packed building so they could say goodbye and pay their respects. At her funeral the next day, the procession was so long we completely stopped traffic in two separate towns. It required a police escort. For someone so young, she’d touched so many people’s lives.

RIP Casey. You will be sorely missed.

Don’t try to be clever

Don’t design to prove you’re clever. Design to make the user think she is.

— Jeffrey Zeldman, The Year in Design

You should read the whole article, but this last point really stuck because I often see people frustrated with themselves when something goes wrong on a site or app they’re using, as if the error was somehow their fault or caused by some personal shortcoming. Nope — it’s our fault! Sometimes it’s specifically my fault.

The clever solution isn’t always the best.

Sketching with Sharpies

I love sketching, but I always find sketching with pencils a little daunting; there’s this constant desire to go higher fidelity than I should when I’m starting a project. Maybe it’s because of art — I associate pencils and sketching with drawing, which I always approached as something polished. If I wanted to set myself free and do something gestural or sketchy, I always found conté or charcoal easier to let loose with. Pencils were a tool to create something I would eventually show off. (The fact that you can erase pencil probably plays a huge role reinforcing that belief.)

Lately I’ve been trying something different. Instead of sketching with pencils, I’ve been using sharpies. (For a while I was carrying around a miniature whiteboard and markers, but that started feeling a little ridiculous.)

Sharpies are great — they come in a variety of weights, they never look polished, and they are completely un-erasable. You can’t casually make sharpies look like anything other than sharpies. They are inelegant, imprecise, and easy to draw with. As long as you have a thick enough paper to draw on, sharpies are a great way to get ideas down without having to commit to anything. They eliminate that desire I have produce something polished. Sketching with sharpies has improved my design process.