One of the most frequent questions we get from students in our 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 your own design or development business and pick up new clients, it’s a simple fact that you’re going to have to show them examples of your past work — but the good news is, your best work (so far) doesn’t have to mean paid work.

You can absolutely invent imaginary projects just for your online portfolio: In fact, you don’t need to be a beginner to do this — experienced web designers and developers create personal projects all the time to keep up with skills, try new things, and provide fresh solutions to problems.

Lisa Savoie, one of our awesome Teaching Assistants here at Skillcrush, emphasizes why it’s important for students to build portfolios for practice, saying, “Creating a pretend portfolio piece can give you a tremendous boost to your confidence. You’re making all of the decisions from the beginning so you’re able to discuss the details more thoroughly in a job interview. It’s also a fantastic way to showcase what your interests are, allowing you to connect with a future employer in a more personal way.”

Design writer Daniel Mall has written about this extensively, and Katie Kovalcin, Design Lead at Gusto, swears by it.

Is Tech Right For You? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

How to Show Fake 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.

The most important takeaway of doing a fake portfolio project is to make sure you are transparent in interviews and on your actual portfolio website about the work you’re presenting — call them “concepts.” Don’t pretend that you got paid for something that you didn’t.

You also want to be prepared to explain every aspect of the projects in your portfolio examples for potential employers — from how you framed your original ideas to the steps you took to execute them.

Being able to clearly explain and navigate your own UI or UX design 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 and end results that really make your work stand out, and showcase the lifecycle of your project.

For front end developers, you’ll want to be able to explain and navigate through your coding and design decisions as well (e.g., why did you design a particular element as a class versus an ID?).

If you can walk a potential interviewer through your coding design decisions and show them your thought process, which hopefully keeps scalability and ease of maintenance in mind, you’ll stand out among the crowd.

A Note for Front End Developers

Full disclosure: if you’re a budding developer looking for portfolio projects, you might find the portfolio project ideas below are geared more towards designers. We recommend that you adapt these projects to be developer projects by replicating sites rather than redesigning them.

For more practice for developers, we recommend sites like Frontend Mentor that provide design documents that a site can be coded from. Other sites that can help you with the design element of your coding portfolio practice include devChallenges and Wes Bos JavaScript 30.

If you’re already a Skillcrush Front End Developer Track student, you can build up your portfolio from projects you’ve done in class or enter Hackathons and then use the project in your portfolio.

You can put your own spin on class projects by changing up the UI, using a different API, or converting a JavaScript project to React. For example, a few students have changed the UI for the JavaScript project “Guess the Word” game(here and here), while alum Cris Crawford has made some of the React projects her own.

Fun fact: this Palette site was inspired by one of our class projects.

Bonus resources: we have a Skillcrush FAQ of sites to practice HTML & CSS and Skillcrush blog post on JavaScript practice projects if you’re looking for more front end development practice.

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.

For inspiration so you can do the same, check out these examples from Behance of what’s possible with website redesign concepts for companies like Michael Kors or Nikon.

2. A Website for 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 to show potential clients.

Take a stab at redesigning your favorite family-owned restaurant’s site. See if you can give it a completely modern feel with CSS and Adobe Photoshop — banish Flash intros and Comic Sans font — while staying true to the business’s 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 business and product you choose is the kind of thing you want to be associated with — in other words, ask yourself if your prospective clients will want to be aligned with the type of client or 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, especially e-commerce 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 Figma 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 so 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 (or testimonials!) 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.

Also, take some time to familiarize yourself with the WordPress Theme Review Guidelines and start designing one of your own!

Is Tech Right For You? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

5. A Complete Branding Package

Making 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 either 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 online 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, which is a key part of digital branding.You’ll want to up your site design’s SEO game by 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) and integrate responsive design so that your site can easily be viewed on a desktop or mobile device (Google uses mobile-friendliness as part of its site ranking system).

  You should also integrate 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 (especially your logo design) across these platforms.
• Collateral print items. Just because digital rules the world doesn’t mean print has disappeared completely. There are 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.

6. 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 different 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 online 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!

7. Daily Design Project Challenges

If you’re playing the long game (which you should be when it comes to your career), there are many great design challenges and design prompt generators to help you hone your skills for at least 50 days a year.

Here are some to consider:

Daily Logo Challenge gives you 50 days of logo prompts to practice with and Daily UIChallenge ups the ante with 100 days of UI practice prompts.

If you’re interested in improving your design software skills, Behance has you covered with daily challenges like the Daily XD Challenge, the Daily PhotoShop Challenge, and the Daily Illustrator Challenge. The best part is that you can also view previous challenges and choose the ones you’re the most interested in learning and practicing.

In case you want even more practice, Dribbble has an article filled with design prompt generators to spark ideas for concept projects.

8. Redesigned newsletter template

This may sound like a snooze fest, but I did this for my first graphic design portfolio while applying for 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. 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 Analyticsreports 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.

Is Tech Right For You? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals