For your portfolio: Screenshots VS Mockups

Published on June 20, 2011 under Marketing, Business, Web Development

Mockups VS Screenshots

I had an interesting debate recently with a colleague. She's a very experienced media producer, and we recently collaborated to completely overhaul her website and personal branding. It was a chance again for me to implement much of the technology I put into this very website into her website. We hit a snag though when it came to her production experience in web media. She ran into the issue where all her past work was not online anymore as live websites.

My colleague wanted me to somehow take past web work and create functioning mockups of these past sites that would sit on her web host space, and thus she would link potential clients to them as examples of her work. The mockups would basically be a few pages that would make one believe this is the actual built site.

I personally think it's a bad idea in this case, but she made a valid point that in this economy, employers are looking for any tiny ridiculous reason to knock you off the long list of qualified applicants for one opening, thus she felt having no actual live work online and only showing screenshots would hurt her chances of landing work. I still beg to differ.

The Case for Mockups

I think a functional mockup is necessary when you need to show functionality. You might have built some amazing web application that can't be shown in just screen shots. I for one can't imagine how anyone could show the functionality of a mobile application or one of those fun image-creating sites like the "The Simpsomaker".

Maybe you built some amazing drag and drop shopping cart and want to show off how it really works. Flash animated sites and banner ads should especially be shown as a mockup, since there really isn't a way to show off the work as a still image. I'd also say sites utilizing video would definitely be call for a mockup.

The Case for Screen Shots

Screen shots are best for pretty much everything else. If you're showing off layout designs, pieces of a campaign, anything and everything where functionality has no bearing on the work being judged. I've seen even a few copywriters want mockups of pages when a screen grab can do the trick. In the Creative section of this site, I only use screen shots because that's all I feel I need to show. Functionality can be described and even proven here in this blog.

You want to control the conversation.

This is really where I wanted to lead this all to, and what I told my colleague. In the world of job hunting and fighting to get noticed by potential clients, no matter what you want to be able to control the conversation. When you make your resume or even a portfolio, you want to be able to guide someone down the path you set to show off your best assets and your strengths.

I've had a few people claim my portfolio site doesn't really show off "what I do", but I disagree. I don't need to put on loads of "techy" elements like digital 0's and 1's, or crazy art pieces that make one think I'm the typical graphic designer. Every section on this site serves a purpose. When someone goes to About I want him or her to read my bio, see my client list, and possibly check out my resume.

On my resume, I want them to see what I can do, what I'm working on doing, and what I've done. I don't need to write a novel on my life in the resume, but make sure I hit the right keywords as they pertain to my work. Too many others seem to believe "not telling enough" will hinder you. If you have nothing to show, then yes you need to stretch the truth. However, if you have much to show, then just show it and highlight why that work sets you apart from the competition.

The Knowledge blog is much like this. I've had a few friends feel my portfolio site doesn't show off how much I can do with PHP and even AJAX. That's why I did this blog, and called it "Knowledge". I can post loads of past work, photos, and even make mockups, but it's pointless unless I can show I really keep up with this industry and how I do what I do. Any Head Developer or Creative Director can look at one of the "how to" articles and realize that I know what I'm talking about. Anyone else can see the other articles and understand that I am thinking way more than artistic when I do this kind of work.

Now I'm not trying to front an ego, but merely state that how you create your resume and portfolio comes down to how you wan the conversation to go. With every piece of work in Creative I want to show not only that I can design, but also build, and that I was thinking deeply about how said items were built. I want to walk into an interview and be able to go off for an hour about how a site was built and all the inner details you won't see even going through a live site.

What I do not want is for the wrong details to be focused on. So going back to a mockup of a site produced in let's say 2003, you might be happy to have something "live" to show, but what if the potential client suddenly asks why you're using an old XHTML/CSS drop-down menu as opposed to AJAX? Or what if they ask why the site looks as if it's optimized for a 800x600 screen? Right then and there you're on a weaker standpoint, and thus it could hurt your chances for getting said job. They might see you as behind the times.

If you use mockups, then make sure it's for the right reasons. A website nowadays has a shelf life of a year or less since most of this work now is for temporary ad campaigns. No one is going to dismiss someone if they don't have any live work. I've even seen many portfolios even where there are no external links whatsoever, because the designer or developer felt you don't need to leave in order to see proof of work. want to be able to control the conversation when it comes to your work. Always keep that in mind with anything you post in your portfolio.

What do you think? Screenshots or Mockups?

Tags: portfolio, screenshots, mockups, resume, marketing

comments powered by Disqus