T
he portfolio is a hot topic item in the field of experience and interface design. As designers, a portfolio is a great way of showcasing what we’re capable of, and packaging that work in a way that tells a compelling story to potential employers and clients. Portfolio formats can range from hand-coded websites to printed books, but in this guide you’ll learn how to create a portfolio website by leveraging the powerful design and prototyping features in Adobe XD to put together a dynamic, easily shareable portfolio asset that can be used to showcase your talents with the world.
Types of portfolios
Depending on the job you’re applying for, or the type of client you wish to attract, your portfolio should reflect the work you want to be doing, and even better still if it reflects the typical formats or workflows that you’ll be working with. For example, a designer wishing to get hired for work in print design is more likely to have a physical portfolio containing printed examples of work, where a digital artist may include links to a PDF or website showcasing theirs.
For those in the fields of interaction design, user experience and product design, it then makes sense that our work is presented through a medium that we’ll be working with routinely. Leveraging Adobe XD for portfolio website design allows us to create portfolio assets in a dynamic way, allowing for easy iteration, distribution, and feedback collection. The portfolio itself becomes a tangible representation of your capabilities as well.
In this guide you’ll be learning how to leverage XD portfolio website design in the context of a product, or user experience design role, but the same approach can be applied for interface, interaction, and marketing design specific roles, tailoring the projects to the work you wish to acquire. For more inspiration before getting started, be sure to check out some of these inspiring UX portfolio examples.
Starting your portfolio website design project
Designing a portfolio in Adobe XD is much like designing any other project, and starts with the selection of an artboard. Whether you’re designing your portfolio to be shared as an XD Prototype, or designing it to handoff into a web build, selecting the right artboard is important.
For desktop viewing, XD has commonly used desktop sizes available as presets. Using something like the 1366px wide artboard will look great on most laptop computers, and is a good choice for getting started with.
Quick Mockup plugin
If you’re not sure where to begin, making use of plugins like the Quick Mockup plugin will allow you to get started quickly with templated layouts for a variety of page types, including a portfolio layout.
These templates can be used as is, with options to change the theme, or by using them as a base and customizing the elements and layouts to create a unique design for your work. Either way Quick Mockup can help alleviate the creative block that may come from a blank canvas.
UI Kits and templates
If you’re simply looking for some inspiration, or assets to use for your portfolio design, there are a number of UI Kits available for use in Adobe XD, as well as endless inspiration on platforms like Behance. Explore these resources for inspiration, but make sure to give it a personal touch.
Defining your portfolio style
Like any project, the style or aesthetic of your portfolio can have a large impact on readability, and how the portfolio is perceived. Remember, your portfolio is a reflection of your work just as much as the work itself.
When picking the colors, typography, and general style for your portfolio, try to keep it simple, so as not to overwhelm the viewer. At the same time, adding some color to help it stand out can be advantageous as hiring managers are often looking at many portfolios in sequence.
Using tools like Adobe Color can help you find inspiration and define a color palette. Select a base color (perhaps a personal favorite color) and build a full set of colors based off of that selection. Keep in mind you want the projects themselves to be the star of the show, so avoid using many bright and distracting colors.
Adobe Capture allows you to sample color palettes from real life and save them into a library for quick use in Adobe XD. This is a great tool not just for your portfolio, but for keeping a memory bank of inspiration for future projects.
With your colors selected, they can easily be added to the Document Assets panel in Adobe XD to use throughout your project. Adding colors here makes it easy to update across the document if you want to modify the style later on.
Character styles also can be saved and defined in the Document assets panel, and applied to text on the design with a single click.
Choosing a style that can help focus attention on the work you’re trying to showcase can go a long way in directing the attention of your audience to what you wish for them to see. Keep readability and legibility front of mind when selecting your colors and typography, and use plugins like Stark to ensure accessibility in color selections.
Adding projects to your portfolio
The most important part of designing your portfolio is actually adding in the projects that you wish to showcase. There is room for creativity when thinking about how to lay out projects, and what story you wish to convey, but there are also some principles to keep in mind to ensure that your portfolio is successful.
- Projects should be easily discoverable
- Don’t make it hard to find the projects a hiring manager should be looking at. Present the work that best represents your skills and abilities for that job, right at the top. Use clear imagery and titles to make it clear what is being viewed. Remember, the portfolio itself is an example of your skills as a UX designer, presenting a portfolio that is difficult to navigate is not beneficial.
- Ensure projects are focused on the topic
- With the ability to have multiple versions, don’t hesitate to customize which projects are shown to tailor to a particular audience or job. Including unrelated projects at the forefront will distract from what you’re attempting to demonstrate.
- Use compelling imagery
- Certain projects may include more written text, or explainer (especially for UX portfolios), it is still important to leverage compelling imagery to draw viewer eyes into a particular project. When reviewing many projects in sequence, reviewers often don’t want to read through every project. Use compelling imagery of the final result of a project to draw them in and provide incentive to read through your project.
Designing portfolio cards
One of the landmarks to the portfolio is the gallery view of projects on a home page. Clicking one of these projects then expands and opens the detailed view of a project. Using components and component states, a reusable card format can be created and used for all projects, complete with its own hover interaction.
Draw the card structure
To make use of Padding and Stacks, how the card is structured is important. Start with a background rectangle to form the backdrop of the card. Then draw out the placeholder for an image or graphic on top. Select both rectangles and group them into a layer called Background.
This will create the foundation for the card, and allow us to leverage Stacks and Padding. Next, add in a text field for the title, and any additional information you wish to include on the card. Use the Auto Height text option to allow the text box to expand vertically, or the Fixed Size if you wish to keep it a defined height and width.
Group the newly added text content into its own group separate from the background group created above. Finally, combine both the background group and content group into a final group called Project Card. This is what will be used to make the component.
Create the component
Select the Project Card group, and enable Padding under the Layout section in the property inspector on the right. This will create customizable padding between the content layer and the background layer, keeping all the spacing intact as labels are customized in the cards.
If desired, enable Stack on the content group you defined, if there are multiple rows of text boxes. This is an option to allow for quick reordering of the content later. If you only have a project title, don’t worry about this.
Finally, using the right click menu, or the keyboard shortcut, create a component from the Project Card group. This will convert the card to a Main Component that can be copied and reused throughout the project.
Add an image
To add a graphic to the component, double click into the component and select the image placeholder defined in the background group. Click and drag an image from your file browser or the web and drop it into the shape. Adobe XD will automatically mask the image in the shape.
Make it hover
To add some fidelity to the card, add a hover state, so as viewers mouse over the projects, they’ll get feedback that they are clickable.
In the top right corner, click the + in the components menu. Select the Hover option with the lightning bolt.
With the hover state selected, the properties of the card can be edited to create the desired hover effect. In this case, adjusting the image mask will create a ‘zoom’ effect when the card is hovered. You can also experiment with text formatting like size, opacity and color. To edit an image mask simply double click on the image.
Duplicate for each project
Now this component can be copied out and reused for each project card on the page. This can be done either by copying and pasting, or leveraging Repeat Grid to quickly duplicate the card down the page.
Once duplicated, ungroup the Repeat Grid, then images and text can be overridden for each project, creating unique cards for each. In the hover state the mask may need to be adjusted for each image to ensure the proper zoom effect.
Connect to detail pages
With the hover interaction in effect the project cards can now be linked to their corresponding detail pages in the project. Quick Mockup has templates that can help with building these pages, and using components you can also build reusable sections to ensure your project templates stay consistent.
Set your prototype links on each instance, rather than the Main component so that they each have unique destinations.
Choose the desired effect, using slide overs or dissolve keeps things simple and distraction free here. If you’re feeling more ambitious, leverage the power of Auto Animate to add some nicer transition interactions.
Share your work
Once your portfolio is ready to share, move to the Share tab to create a link with the current version of your portfolio. Using the Presentation view will open it in a full screen view with all interactions, allowing employers to view it much like a website.
At any time changes can be made in Adobe XD, and the link can be updated to reflect the changes. Alternatively create links for other versions of the portfolio so you can distribute them to other job opportunities, and keep custom views for each project.
Benefits of using Adobe XD
Portfolios can be a daunting task, but crafting a portfolio website design doesn’t have to be intimidating. There are a number of advantages to designing your portfolio in Adobe XD, from sharing functionality, to tools for rapid iteration and adjustments.
Quickly iterate
Features like Repeat Grid, Stacks, Padding and Components make iterating more efficient allowing you to quickly adjust page layouts, modify elements, and add or remove content.
This ability to quickly iterate unlocks the potential for crafting various versions of your portfolio without the need to adjust code, or manage URLs if working on a custom website based portfolio.
Control visibility
Once versions are ready to share, Adobe XD gives you granular control on who can access them. Each Flow, or version can have a dedicated share link with unique sharing permissions. This means that you can easily share out your branding portfolio to hiring managers for the branding position, and the product design portfolio to the company looking for a product designer.
Each link can be updated with a click, and changes or edits can be passed along without the need to re-send a link.
Easily add new projects
Since your portfolio is now housed in the same tool you’re crafting work in, adding projects to a portfolio has never been easier. With a simple copy and paste, your work from Adobe XD, and even Adobe Illustrator can be easily pasted into your Adobe XD portfolio, and distributed to your audience with a click.
Thanks to the powerful import capabilities in Adobe XD, content from Photoshop, Illustrator and even Sketch can be imported into your XD document and added to the portfolio in a similar fashion.
However you choose to design it, developing your portfolio in Adobe XD makes it easy to distribute your work, make changes on the fly, and showcase your talents with the world. Download Adobe XD today and try it for yourself.
