How to create a UX design portfolio with Semplice
This article was originally published on DESK by Jon
No matter what type of design you do, an online portfolio is a must. While the nature of UX design work might seem more difficult to showcase visually, a portfolio is even more necessary for UX designers.
Given the popularity of this field, UX designers need to stand out in a sea of competition online. What’s more, companies are still learning what UX design means for business, so it’s up to you to show how you are vital to theirs.
Semplice, our WordPress-based portfolio tool, is made specifically for designers and creative types. Using Semplice, you can create a unique website in no time at all, without coding knowledge.
We’ve shared examples of great UX portfolios built with Semplice. Now I’m going to show you how you can quickly and easily build your own beautiful UX design portfolio site, step by step.
This is just a simple site based on my own design. Of course, it’s up to you how you’d like to design your own site (Semplice is not a template — you have full control over the design) but this tutorial should help you understand the basic steps and main features.
Step 1: Getting started with Semplice
To begin, you’ll need to have a working install of Wordpress along with Semplice. You can purchase Semplice here.
Step 2: Creating & categorizing your projects
I first recommend adding all of the projects you intend to include on your site. We’re not going to worry about laying out all the project pages just yet. For now, we will just add the projects into the backend. This helps you think about how your work will be organized and displayed throughout your site.
To add a project, go to the Projects page in Semplice and click ‘Add New Project.’ Let’s also add a thumbnail image for each project. The thumbnail will be relevant when we create our Portfolio Grid later.
Pro tip: You can set a different image that appears when someone hovers over your project thumbnail. Just enable the ‘Thumbnail Hover’ option in your project settings.
If you have work beyond UX design, such as product design or art direction, you can create separate categories for each type of work you’ve done. This way, a potential employer or client can see your diverse skills and interests.
To set categories for each of your projects, simply assign the category within your individual project settings.
Step 3: Creating your homepage
Now let’s create the homepage. To create the front page of your site, go to the Pages area of Semplice. (If you’re curious about the difference between Pages and Projects in Semplice, check out this guide from the Semplice helpdesk.)
First, we’ll create a nice, bold headline as a Cover section. A cover section allows you to use a full-screen visual on your page. You can choose to set a background image or video for your Cover section.
With your Cover section created, now add your first headline text block and align the text in your section options.
Now that your headline section is complete, place a Portfolio Grid on the page. This will house all of your projects.
Now adjust the settings for your grid as needed. I’ve set both my horizontal and vertical gutter values to 30. I set my first two projects to have a column width of 6, and my last project to have a column width of 12. You can set a custom column width value for each project in your individual project settings.
Step 4: Building your first project page
With your homepage grid created, let’s now build out one of your project pages. First, we’ll create a Cover section, just like we did on the homepage. Same as before, we’ll set a full-width background image.
Next, we’ll create our project details area by placing several text columns in rows. We’ll use spacer columns to add white space.
Now, let’s make our case study page more visually appealing. We’ll do this by creating a 50/50 split image section to help break up our page and add some more bold visuals.
To do this, place both a spacer column and an image side-by-side. Now add some padding around the image. Next, place a background image on the spacer column and set the size to Cover. Now go to your section options and set a background color on the section. Finally, go to your section options and set the section width to full-width with the gutters removed, and the section height to fullscreen.
Next, I’ll embed an InVision prototype I created onto my page. To do this, just place a Code module onto the page. Code modules in Semplice accept any kind of raw code, such as Javascript or iframes. You can simply paste in a mobile prototype embed code from InVision into the Code module.
Next, I added some device screens showing a glimpse of my product user flow. I placed three images in side-by-side columns, and added a text column beneath each image to serve as a caption.
Step 5: Creating your About page
As you’ve probably heard us say before, your About page is the most important page on your site. It not only highlights your work history and experience for a potential employer, but it’s also a great place to share your personality.
You can create your About page as a regular page in Semplice.
First, I placed an image next to a text column on this About page to serve as an introduction. Next, I placed text columns in rows to talk about work experience and achievements. I used spacer columns to offset my text columns.
Step 6: Editing the navigation
Once your About page is finished, you can add it to your menu system. Just go to Customize > Navigations in Semplice, and under ‘Menu,’ look for the ‘Add Menu Items’ option. To learn more about how to customize your navigation bar, read this article.
Step 8: Adding your contact information
Of course, you want to make it as easy as possible for people to contact you. So let’s add contact info as a custom footer appearing on all pages.
Go to customize > footer and create a new footer.
Now add your contact information. I’d recommend writing out your email address rather than adding a link or a form. Most people will simply want to copy and paste your info straight into their preferred email platform.
Next, in your page and project settings, set this custom footer to show everywhere.
Wrapping things up
Now you can add some final touches to your site, such as thumbnail image hovers in your project settings, or perhaps a nice page transition.
Boom! You now have a beautiful new portfolio site that required no coding and was fun to make. Winner winner, chicken dinner.
To see some of our other Semplice features for UX designers, check out this page. For more portfolio tips and inspiration, browse this section on the blog. You can also find lots of step-by-step Semplice guides and hacks on our helpdesk. And if you have a request for a guide or a tutorial on DESK, send us a tweet @semplicelabs. We’ll do our best to write it for you.
Thank you for reading,
Tobias
