Design & Code Responsive Portfolio Website (PART 1) | XO PIXEL

Design & Code Responsive Portfolio Website (PART 1) | XO PIXEL


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. 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! 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. 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. 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. 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. 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.

Comments

  1. Post
    Author
    XO PIXEL

    ✨ 📝 Read the article version of this tutorial for design assets & details: http://bit.ly/2tCn6BH. Share your work with me using #XOPIXELPerfect on social media!
    (PART 2: https://www.youtube.com/watch?v=Y7uxyGzT2lM)

  2. Post
    Author
  3. Post
    Author
    Dragonbreak

    I think i figured something out…
    You love shades of pink and purple, am I right?
    Also I'm in the process of designing my new slider-based website… I hope I'll be able to share it with you as I get it finished.

  4. Post
    Author
    meg3501

    Hi! I love your videos, they’re super helpful! I just have a quick question. How do I practice building websites without actually paying for each domain name, hosting, etc.. I really want to get into WordPress installations for small businesses but I’m confused as to the practice part. Thanks in advance!

  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
    Majid Poureftekhari

    Why not do it with css and html which then you could apply a little javascript to show random data and have transactions and animations….

  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
    Mary Jane Faller

    Hi. I'm an I.T student and I want you to know that it helps especially for the newbie in creating a web/system design. I love how you explain. LuvLots. New subscriber here. 😙

  12. Post
    Author
    Melody T

    Hey there, love your video, so nice to see a fellow female coder making videos. They are really simple and easy to follow. Keep up the good work!

  13. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *