Design and Code: Responsive Portfolio Website (Part 1)
Hey, Pixels! In this 2-part video series, I’ll show you how to design and code this responsive clean modern one-page portfolio website in Adobe XD using the latest techniques in UX design. Click here to watch Part 2.
This one-page portfolio is perfect for the modern day designer/developer that uses various social media accounts, such as Behance, Dribbble, Twitter and Instagram to showcase their work. So, without any further delay, let’s get started!
Gold Members can download the final project file below:
What You’ll Need To Design Your Portfolio Website
You will need the following resource in order to complete this tutorial:
First, open a new Web 1280 artboard in Adobe XD. Select the artboard and change its fill color to a very subtle gray linear gradient:
To help with object alignment as we’re designing, we’re going to activate the layout grid and change its columns to 8.
As you can see in the assets panel, I’ve already chosen my colors for this design. I’m also using a Google Font called Nunito throughout the website.
Hit “R” on your keyboard to grab the rectangle tool. We’re going to draw two borderless rectangles. Draw the first rectangle starting at the top left corner of the artboard, as wide as the first grid column and full height of the artboard. Draw the second rectangle adjacent to the menu, near the bottom, and full-width.
For the menu, I’m going to fill it with this colorful linear gradient:
Then, I’m going to add a vertical list of common portfolio menu items. Hit ‘T’ on your keyboard to grab the type tool then type the first menu item, in this case, I’ll write “about”, then press
Cmd ⌘ (Mac) or Ctrl (PC) + D on your keyboard to duplicate the menu items, I’ll add some spacing in between each item and then rename the rest to “portfolio”, “blog”, and “contact”. I’ll apply the font Nunito Semibold to the menu items and align them to the center of the menu area.
I want to show the behavior of the links on hover, so I’m going to select the last three links, hit number “5” on my keyboard to lower their opacity to 50%. Now, it looks like the “About” is being highlighted and the others are not. You’ll see this in action when we code the site in part two of this series.
Main Content Area
The main content area of this portfolio will contain a hero title, a short blurb, a portrait photo and a call to action button. Feel free to turn off the layout grid to better see that artboard.
First, we’re going to draw some shapes to decorate the main content area of the portfolio website. Hit “P” on your keyboard to grab the pen tool and draw two s-shaped lines.
You can do this by adding an anchor point, adding another anchor right across from the first, then hold and drag down to make the first curve. Repeat the second step once more but this time, drag upwards to make another curve. Keep in mind that it doesn’t have to be perfect, we’re going to resize them later one.
Now, we’re going to draw a triangle using the pen tool and then hit ‘E’ on your keyboard to grab the ellipses tool and draw a circle. All the shapes will have no fill, and a white border that’s 3px.
You may arrange the shapes any way you like, within the main content area. Once all the shapes have been arranged, select them all and then press command or ctrl G on your keyboard to group them and the press command or control + L to lock them so that they won’t move around as we design our other elements.
Now that the background for our main content area is completed, we can write our main content.
Hero Title & Blurb
Grab the type tool and write out your preferred hero title for this portfolio site. I’ll write “Passionate UX Designer”. The font I’ll use is Nunito light, 66, and color it dark blue.
Below, I’ll write out a 3-line “about me” blurb. The font I’ll use is Nunito light, 22, with 38 line spacing and color it dark blue.
To design the CTA or call to action button, grab the rectangle tool and draw a rectangle that’s 200x60px. Set its corner radius to 30, remove its border, change its fill color to purple and add a light blue shadow. I’ll set Y to 4, blur to 40 and 100% opacity. Now, grab the text tool and write “Hire me” on top of the button. The font I’ll use for this text is Nunito bold, 22pt.
Finally, we’re going to add a portrait. To do so, grab the ellipses tool and draw a 220px borderless circle. Drag and drop a photo from your computer folder, right onto the circle object. Apply the same shadow to the portrait object we applied to our “Hire me” button.
Social Media Stats
As you can see, I’ve already chosen and arranged the social media icons in this Adobe Illustrator document. To get them into XD, I’m going to select them all,
Cmd ⌘ (Mac) or Ctrl (PC) + C to copy and then
Cmd ⌘ (Mac) or Ctrl (PC) + V to paste them onto our XD artboard. I’m also going to color them with this bluish grey color and arrange them so they’re centered, and evenly spaced out.
Below the social media icons, I’m going to add some follower stats.
Since this portfolio website is responsive, it’s always in good practice to design a mobile version of the site you’re going to develop. That way, you can modify how it will look on smaller screens. First, I added a new iPhone 6/7/8 artboard and used the layout grid by setting column width to 42. Then, I duplicated objects on the desktop version onto the mobile artboard and arranged them accordingly.
Note that when resizing the menu background, you’ll need to reposition the gradient so that it’s horizontal. It looks much better this way. You’ll also want to center the main content and social media icons.
You’ve completed Part 1 of 2!
There you have it! You’ve just designed a clean responsive one-page portfolio website in Adobe XD! Stay tuned for part 2 where I will show you how to code this using the latest in web development, so you can actually see it in action. Subscribe to XO PIXEL for more great design, code, and tech videos.