freeCodeCamp portfolio design with Adobe XD
I recently signed up with freeCodeCamp to learn how to become a full stack web developer while creating projects for nonprofits. I’m in the early stages, and one of my first assignments is to create a portfolio page.
Adobe Experience Design CC allows you to design, prototype, and share mobile app and web designs. My portfolio is a simple, one-page design, but I wanted to make sure it would look good across devices. Designing my portfolio in Adobe XD will also serve as a visual guide when I code the page in HTML and CSS later (see Figure 1).
Design the layout
I first worked in Design mode to create the design for the desktop, tablet, and mobile layouts. Since my design is pretty simple, I only needed to use some of the tools available. The Design space adapts to your web or mobile app design allowing you to create as many artboards as necessary.
Note: Check out the comprehensive tutorial on designing in Adobe XD.
I created 10 artboards for each layout. The portfolio page design shows 9 tiles that will each link to a different project I have created. When I actually code the page, I would like to implement an animation to display the title of the work with a pink background when a user clicks on the tile. The first artboard shows what the landing page will look like. The additional artboards show the tile that will display when the visitor taps it from the landing page (see Figure 2).
Prototype the interactions
I then used Prototype mode to wire interactions between artboards and apply animation settings to those interactions. Here’s a comprehensive tutorial on prototyping in Adobe XD. My prototype was also simple – I just wired each image on the home page to the artboard with the corresponding title card. Then, I defined the animation, easing, and timing of each interaction (see Figure 3).
You can use CMD + A to see all of the wired interactions between artboards (see Figure 4).
Preview the design and interactions
Once I was satisfied with each, I used the preview feature to record video demos of layout. Adobe XD presents a preview window along with an option to record the interactions. When I finished recording, Adobe XD generated a .mov file for each. I posted those on my Youtube channel and embedded them here.
Video for the mobile design.
Video for the tablet design.
Video for the desktop design.
I’ve shared each of the 3 layouts on the web. I would love any feedback on the design.