So you’ve decided to start a career in UX/UI Design. Great! The market for User Experience and User Interface Design jobs is booming and there’s never been a better time to become a Web Designer or Product Designer. To get a job in the field, however, you’ll need a great portfolio. But when you’re just starting to learn design fundamentals and play around with the technical tools of the trade like Sketch and Illustrator, how do you come up with ideas for projects?
One of the most exciting things about design is that there are so many types of projects you could work on, from app design to website design. The most important thing early in your education is to try out lots of different types of projects to see what you like. Once you get a feel for the type of design you enjoy most, you’ll start to specialize and come up with your own concepts for projects that solve real problems. Employers love to see junior designers who have chosen a specialty and developed a deep expertise in that field, filling their portfolios with comprehensive projects backed up by user testing and solid research.
But like we said, early on you should experiment with lots of types of projects to see what you like best! In this article, we’re outlining a few simple UX/UI design portfolio projects you can work through to let you experiment with lots of different ideas quickly.
Ready? Let’s go!
The right process to follow for these projects
For all of these projects, start with research. Look at the designs on the websites and apps of similar companies to see how they’ve solved the same problem. Take notes and write down what you like and dislike about similar digital products.
Next, create user personas to understand who will be interacting with these designs and to help you visualize what their goals will be when they land on the page you’re designing. After that, brainstorm and sketch! Get out a pen and piece of paper and sketch out high level ideas for the design based on your research. Get as many ideas on paper as you can in 10 minutes.
Next, open a tool like Sketch (hint: you get 3 free months with our Portfolio Starter Kit) and create a wireframe of the page you’re designing. If you’re feeling ambitious, you can create a digital prototype in InVision to show what actually happens when a user interacts with each element of the wireframe.
Then show your designs to a friend and ask them to provide feedback as though they were a real user of the product. Once they’ve given you feedback on the design, incorporate it into your wireframe and then start creating the high fidelity version of the design. Add color, typography, copy, and make it look as slick as possible.
Be sure to research grids, color theory, and typography so you understand how to use these elements harmoniously to create a beautiful final product. Alright, now that the basics are out of the way, let’s get on to the projects!
Product Page for an Ecommerce Website
In this project, design the product detail page for a product on an ecommerce website. A product detail page is the page on an ecommerce website that describes the product you’re considering buying, showcases it visually, and lets you actually add it to your cart or purchase it directly. Depending on the product, a visitor might be able to customize specific features like size and color, read reviews, and view other technical specifications.
Start by coming up with a company. For this project, you can either choose a real company that sells products online or a fictional company you come up. If you choose a real company, think about industries you like and identify a company whose ecommerce conversion rates or overall user experience could be strengthened by a redesign. If you come up with a fictional company, think about industries you’re interested in that sell some form of product online and choose a product to sell. This could be anything from fashion to digital products.
Your final deliverable for this project should be a high-fidelity version of the product detail page for one product.
Portfolio Site Splash Page
In this project, you’ll design a static splash page for your personal portfolio site. A splash page is a non-scrollable landing page that visitors to a website see before they continue to the main content of the website. Splash pages are generally used to quickly introduce and/or promote an organization, product, or individual. Think of it like a visually pleasing greeting card that gives visitors a quick overview of who you are and entices them to learn more.
Splash pages generally include a strong call to action and button to encourage visitors to continue on to the main website. If you don’t have enough projects to have a full portfolio site yet, a splash page can also serve as a great temporary landing page so you can start to establish an online presence while you work to build up your portfolio.
Start by reviewing your current portfolio site. And if you haven’t created a portfolio site yet, take some time to put together a list of the information you’ll want to include on your splash page. Generally, a strong splash page includes this information:
- Your name and/or logo
- A brief description of who you are and what you do
- One or more Calls to Action enticing visitors to visit your full site
- A beautiful background image or original graphic element
- Social and/or email icons
Pricing Page for a SaaS Startup
For this project, you’ll design the pricing page for the website of a Saas (Software as a Service) startup. A pricing page generally includes detailed information about the price and features of different tiers of a company’s product. Most pricing pages generally include the following information:
- Unique names for each plan
- Pricing for each tier (including options for monthly and/or annual plans)
- The main product features of each tier
- Calls to action to learn more or sign up
For this project, you can either choose a real SaaS startup or a fictional startup you come up with on your own. Try to include at least 3 price tiers in your final design and choose one of the tiers as the “target tier” that you’ll try to convince people to purchase with your design.
Startup Landing Page
For this one, you’ll design an above-the-fold landing page for a startup’s website. A landing page is the first page that a visitor sees when arriving on a company’s website. Since first impressions are crucial online (and since most visitors will only spend a moment or two before deciding whether to invest additional time learning about a product), a strong landing is a crucial factor in a startup’s growth.
The page should include a short description of the product, a few main benefits or use cases, and a clear call to action to compel the visitor to continue learning more or to sign up immediately. If you choose a real company, think about industries you like and identify a company whose conversion rate could be improved by a more effective landing page.
Mobile App Homepage
For this project, you’ll design the home screen of a mobile app of your choosing. For this project, you’ll choose an app and redesign the first screen you land on after logging in or signing up. The home screen of most mobile apps serves as an informational landing page or dashboard that showcases relevant information to a user depending on the function of the app
Think about the experience of a user just landing on a client’s app for the first time. How do you convey the necessary information simply and effectively while also clearly showing them the different options they have to navigate to other parts of the app? Get experimental with the structure for your page!
You can spend as long as you want on these projects, but we’d suggest limiting yourself to a couple of hours in order to get used to the types of constraints you’ll likely encounter in a full-time job. Most of all, have fun with it! Use these projects to experiment with different ideas, layouts, and graphic elements. If you’re happy with the final design, you can develop it into a more comprehensive portfolio piece using the projects in our Portfolio Starter Kit, but your initial focus when working on these mini projects should be on testing and experimentation.
Want more help coming up with ideas for detailed projects and then building them up into fully-formed portfolio projects? Consider our short-term Build Your Portfolio program where you’ll work with a mentor over a few weeks to create an amazing portfolio for yourself!
And if you want a more detailed step-by-step guide to help you work through projects like this, our Portfolio Starter Kit includes more detailed versions of the projects in this article as well as 30+ more projects and tons of resources to help you create an amazing portfolio!
Get 30+ detailed UX/UI portfolio projects, tons of resources, and more to help you build an amazing design portfolio.
If you are the kind of individual that sees aesthetics as a problem to be solved through the creative use of modern technology, becoming a professional designer can be a fulfilling career choice.
Interviewing for a position is an anxiety-inducing experience in any industry. For those working in the creative sector, it can be hard to translate their experiences, artistic point of view, and career aspirations across the other side of the desk.
Bootstrap is an open source as well as the most popular CSS framework.