The most frequent question I get from students in my classes is “Are we really going to build a portfolio? What can we possibly put in it when we’ve never had any clients or been paid for work?”
And it’s a great question! If you want to start picking up clients, it’s a simple fact that you’re going to have to show them your work—but the good news is, that doesn’t have to mean paid work. You can absolutely invent imaginary projects just for your portfolio: In fact, you don’t need to be a beginner to do this— experienced web designers and developers do it all the time to keep up with skills, try new things, and provide fresh solutions to problems. Design writer Daniel Mall has written about this extensively, and Katie Kovalcin, and Senior Product Designer at Vox swears by it.
How to Show Fake Design Projects in a Portfolio
“If you make fake projects, the trick is to make it look real. Put it in context: Print it out and photograph it, mock it up however you need to as if it were really a finished product and not just comps/ideas,” says Kovalcin. If it’s a website, make sure it functions, even if the domain name is just attached to your own portfolio site.
What I’m about to suggest to you is a framework of portfolio project categories that aim to showcase a wide range of your skills. You can do all of these without a client or previous experience. A few considerations:
- Make sure you are transparent in interviews and on your actual portfolio about the work you’re presenting—call them “concepts.” Don’t pretend that you got paid for something that you didn’t.
- Be prepared to explain every aspect of your projects, from how you framed your original ideas to the steps you took to execute them. Being able to clearly explain and navigate your own work is as important as the work itself in an interview or presentation setting. This could include everything from the research you did, to the user personas you created, to briefs and wireframes. These are the types of deliverables that really make your work stand out, and showcase the life cycle of your project.
These projects are broken down by web developer and design projects, but a well-rounded portfolio should pull from both.
Web Developer Portfolio Projects
1. The Dream Client Site
Aiming high with your web development portfolio projects gives you a chance to show what you can do with a website on a larger scale. I once interviewed a self-taught developer who learned to code over the summer and had redesigned the New York Times website on his portfolio. It was amazing. He thought through every detail—how it looked on tablets and mobile phones, what the app experience was like, how comments and threading worked in his solution and lots more. It was the only project in his portfolio—but it was so thorough and thoughtfully presented, it was all he needed to get the job.
2. A Local Business
Since working with smaller businesses is the easiest way to get your foot in the door and build a solid client base, you’ll definitely want to include a design or redesign of a local non-profit or neighborhood business in your portfolio. Take a stab at redesigning your favorite family-owned restaurant’s site. See if you can give it a completely modern feel—free of Flash intros and Comic Sans font—while staying true to the business’ identity.
There’s nothing holding you back—except for a few critical freelancer rules that you need to keep in mind: First, make sure that the product associated with the business you choose is the kind of product you want to be associated with—in other words, ask yourself if your prospective clients will want to be aligned with the concept products you’re presenting. That redesign of “Crazy T’s Ammo Depot” might look cool, but it’s not necessarily going to go over with all audiences. Second—and this is critical but easy to overlook—make sure your small business is the kind of thing you can find good stock photos for. Photography makes a huge impact on websites, so think ahead.
3. Improved Mobile Product UX
This is a chance to break out your mobile design chops and show how you would improve the mobile UX experience for an existing client or brand. Look for a case where you love a website but think the mobile experience needs an overhaul, then work towards its reinvention with UX deliverables in mind—think wireframes, prototypes, flowcharts, sitemaps, and usability/analytics reports. Mobile design has long since stopped being an afterthought—in fact, mobile web usage officially overtook desktop usage in 2016—so your ability to present a seamless mobile user experience will be a tentpole in your design portfolio. Software like Sketch allows you to create mockups of mobile sites that will display on a desktop for presentation, or you might consider taking a high quality video of yourself scrolling through your mobile site or app design and add that to your portfolio.
When choosing a mobile redesign project, pick a company with strong, existing branding do you don’t get stuck doing tons of extra legwork just to get started. In many cases, established brands will even have a style guide available online that you can work from—Urban Outfitters, Skype, Firefox, and even the New York Transit Authority are examples of brands with online style guides.
4: A Stock Theme for WordPress
WordPress is the most popular content management system currently available, so it makes sense to develop a stock theme for WP. One of the big perks about developing a stock theme is that you can also sell it as a premium theme, generating income while contributing to your portfolio. Or you can give your theme away as a means of promoting yourself (consider offering support or customization for an additional price in this case).
Look at other themes that are on the market and see what makes popular themes stand out—are they responsive? Simple and uncluttered? Compatible with popular WordPress plugins? ThemeForest is a great place to study successful theme designs, and if you check out these simple WordPress themes by Paul Jarvis you’ll see you don’t have to get too fancy. Then take some time to familiarize yourself with the WordPress Theme Review Guidelines and start designing one of your own!
Projects You Need to Have in Your Graphic Design Portfolio
1: A Complete Branding Package
Creating a website mockup concept for a company you love is a great place to start when building a graphic design portfolio, but why not take on a complete digital branding package?
Creating a complete digital brand update is a major (but worthwhile!) undertaking for a graphic or web design portfolio, and can be done for either as as a concept for a real or made up company (Hello, bakery you’ve always wanted to own). If you’re not sure where to start, scroll through all the branding packages uploaded to sites like Behance. And—once you’re ready to get started—here’s a list of some elements you’ll need to include in this graphic design project (on top of the more obvious graphic design features like logos, fonts, and color palettes):
- SEO friendly web design. In addition to presenting a professional, brand-centric website design as part of the brand package in your graphic design portfolio, it’s critical to make sure the site design is SEO (Search Engine Optimization) friendly. SEO refers to the techniques used to improve a website’s visibility and ranking in search engines like Google and Yahoo, which is a key part of digital branding. Some basic tips for upping your site design’s SEO game include making sure you create user-friendly URLs (www.yourkillerbrand.com/tips-for-branding-design is infinitely more SEO-friendly than www.yourkillerbrand.com/qs?/3600), integrating responsive design so that your site can easily be viewed on a desktop or mobile device (Google now uses mobile-friendliness as part of its site ranking system), and integrating your brand’s social media presence into your page (this won’t necessarily directly affect your search engine ranking but it will help to spread your content across the web, and an increase in likes, mentions, and links to your content will move you up the search engine ladder).
- Keyword research. Researching brand-relevant web search keywords that can drive traffic to your site is another important part of building a digital brand—by getting a handle on the keyword demand for your market you’ll not only get a better idea of what keywords to incorporate in your SEO-friendly website, but you’ll also start to piece together a picture of what motivates your brand’s potential customers. Using a tool like Google AdWords Planner (a free program that requires an AdWords account, but doesn’t require you to actually create an ad)—you’ll be able to get information on the volume of searches your keywords produce and decide which ones should be incorporated in your branding package.
- Social media maintenance. A comprehensive social media suite is no longer a fun add-on for a digital brand package—a brand-consistent presence on Facebook, Twitter, Instagram, and other social media platforms is as essential as your website design itself. As part of your digital brand package, be sure to include mockups of your brand across these platforms.
- Collateral print items. Just because digital rules the world doesn’t mean print has disappeared completely. There are a still fundamental print components you need to keep on the table when presenting a digital branding package. Business cards, stickers, postcards, and packaging, are all examples of print collateral pieces that you can add to bolster a digital campaign.
- A style guide. This will tie up the project entirely, and showcase your ability to organize and plan. Check out the many digital style guides available online that you can use as a template or starting point in putting together your own rules for a comprehensive branding package.
2. Your Twist on an Icon Set
Icon sets are the group of stylistically similar images attached to different functions on apps and websites—for instance, the trashcan that appears when you want to delete something or the pencil you click on to enter an editing mode. Designing your own icon set is a fairly standard web design project, but it’s an easy way for you to offer something for free to the visitors on your website and to include a project of a completely differently scale in your web design portfolio.
An icon set might seem ubiquitous, but that’s exactly what makes it a good portfolio add—while common and easy to overlook, icon sets are a backbone of web design, so showing your ability to design them will let employers know you have your fundamentals down. It’s also an opportunity to define your aesthetic, which helps people remember you and your work when perusing portfolios. Check out Dribbble for examples of icon sets done differently. Or, what if you designed a few of your own emojis to add to the next set of releases? Sky’s the limit!
3: A 365 Design Project
If you’re playing the long game (which you should be when it comes to your career), then starting a 365 graphic design project is a phenomenal way to demonstrate commitment. 365 design projects consist of creating a simple design, usually along a theme or for a particular type of design (icons, logos, typography, etc.), and posting them every day for a full year.
Some designers are doing these as collaborative projects, inviting other designers to join in, while others take them on entirely solo. Check out this super useful article by Cynthia Koo on how to design your own 365 project, as well as some examples of real world 365 projects like Jessica Hische’s daily drop cap or Stefan G. Bucher’s daily monster.
4. Redesigned newsletter template
This may sound like a snooze fest, but I did this for my first graphic design portfolio while applying for my one of my first jobs in tech. One of the administrative duties of that job was to send out newsletters about events, interviews, breaking news, and other timely items so before I applied, I spent half a day redesigning the org’s newsletter, creating three samples and including it all in my portfolio. Needless to say, they were impressed. I got the interview (and two follow ups) AND the job.
In order to pull off a successful newsletter redesign, it’s helpful to remember a few best practices. First, put extra care in making your newsletter design short and simple—avoid long, impenetrable blocks of text and make sure there’s adequate white space in your overall design to make the text that is there appear streamlined and easy to read. Try to limit the amount of fonts you use in your design as well—other than possibly using one font for your headline and another for the body of the email, be very cautious about adding additional fonts into the mix since they’ll likely overcomplicate things. And finally, think twice about using images or graphics—it’s easy to throw in stock photos or filler charts, but unless these images are integral to your design and critical to your brand identity they’re just going to distract from your message.
Along with the overall structure of your newsletter design, remember to keep mobile viewing at the top of mind as well. Litmus Email Analytics reports that in 2016 mobile email opens rose to 56 percent (while desktop opens maintained at 19 percent), which means that for newsletter design to be effective, it needs to be mobile-forward–make sure you’re working with responsive design templates, so your content can be read as easily on a mobile device as it can on a desktop.
A newsletter redesign might seem a bit daunting if you don’t have coding skills, but fortunately there are major newsletter platforms that don’t require a coding background to create customized templates. HubSpot features a Template Builder that allows customization using zero code, while MailChimp has an extensive guide covering some of the coding basics needed to build templates.
Dee is a fun-loving instructor with diverse tech experience across Fortune 500 companies, early-stage start-ups, government agencies & non-profits. Dee works at mobile product design studio Funsize, in Austin Texas where she lives with her husband, 2 border collie mixes, & 2 cats.