Build your UX Portfolio From Scratch – Getting Started

Our UX portfolio is a key piece of displaying our capabilities as a designer. Hence, it becomes essential to make one that can speak for you.

In this tutorial series, I will walk you through how I designed and developed my UX portfolio website. Sure, I could’ve named this article as ‘How I Built My Portfolio’ but I want to show you how YOU can do it too. It’s easy, and you don’t need to be a developer. Let me show you.

Fabricio Teixeira from the UX Collective clearly outlines the importance of a portfolio website.

There are those people who can design and also do development. Such hybrid individuals are known in the industry as UX Engineers. In fact, this entire blog is for such individuals!

UX Engineers weave together strong design aesthetics with technical know-how.

UX Engineer Role @Google

When you can leverage your talents from both domains. Why not use them to develop your own UX portfolio from scratch?

It is a powerful way to harness what you know to build a portfolio that’s unique to you. The best part is that you and only you are in control of the whole thing.

What to expect in this article?
This will be an exhaustive, multi-part tutorial series. I will walk you through exactly how I designed and developed my portfolio from scratch. This includes my design process, development tools and how I launched the website. I did all this in one month and I’m no web development expert!

If you cannot code, don’t worry. I am no web development expert and I got by. I’m here to walk you through it.

I will show you how to do all this and more. I will also be sharing tons of other resources so be sure to keep an eye out and save them.

There are 3 broad phases of building your UX Portfolio.
Over this multi-part tutorial, I’ll take you through all these phases.

I’m a designer. Why do I have to code?

It offers many advantages for you and your UX portfolio (website).

  • Complete Control
    Create a highly customized portfolio and make it unique to you
  • Not another clone
    Templates are repetitive, which look like other portfolios on the internet
  • You own it
    You and only you are in complete control of EVERY aspect of the website. Everything belongs to and is owned by you. Using third-party providers leaves you at their mercy since your entire portfolio is with them.
  • Freedom
    Third-party portfolio builders can be restrictive, limiting appearance and functionality
  • Web development is not hard anymore
    Various frameworks help ease and speed up the process
  • You learn!
    A designer who knows how to code can create feasible solutions that respect technical challenges.

This is YOUR portfolio – make it your own!

Jessica Ivins beautifully explains with a real-life story about the advantages you have as a UX Designer who can code.

The intent of this tutorial series is to help you learn how to custom code your own portfolio from scratch. By the end, you will be able to rapidly develop, modify and maintain your portfolio with ease in the future.

Completely new to Web Development?
If you’re completely new to web development and don’t know HTML or CSS, W3schools is a great place to start by yourself.

Alternatively, Udemy has a great course for beginners.

Build your UX Portfolio Series
This tutorial is broken up into several parts:

Part 1: Getting Started
Part 2: Design
Part 3: Choosing A Web Stack (Coming Soon)
Part 4: Setting Up Your System To Start Development (Coming Soon)
Part 5: Understanding Your Project Environment (Coming Soon)
Part 6: Getting Dirty With Code (Coming Soon)
Part 7: Optimizing Your Portfolio For Speed (Coming Soon)
Part 8: Launch your Website (Coming Soon)


Getting Started

In part one of this article, I will give you an overview of everything that you need. It should help you prepare and know what to expect from the upcoming articles.

For experts who have their own UX portfolio wanting to redesign or developers, feel free to skip sections you already know. This article will cover certain sections exhaustively to help those who haven’t done this before.

I will walk you through the entire process of how I made my portfolio from scratch. My hope is that you can learn from this, avoiding the pitfalls I made thereby saving you tons of time.

This is how my UX portfolio looks like.

My portfolio – iamsuleiman.com

My hope is that by the end of these tutorial series, you can create a portfolio like this or better.

Although it’s not a complete visual overhaul, you’ll be surprised to see the reworked internals. Now, I can easily redesign and add more content and functionality to my UX portfolio in the future. I want to help you do the same.

Quick Navigation

  1. Getting Started
  2. Tools Needed
    1. Design Tools
    2. Development
  3. Domain Name, Hosting & Launch
    1. Domain Name
    2. Hosting
  4. Wrap Up
  5. Next Steps

Tools Needed to Build your UX Portfolio

For this tutorial series, we’re going to be using a LOT of different tools and software. So before we begin, here’s a heads up of what we need. Be sure to get them up and running before you start.

Design

Paper & Pencil
For ideation and early concepts.

Design Software
From wireframes to high-fidelity mock-ups of what our UX portfolio will look like.
RecommendedSketch (Mac-only)
An Alternative – Adobe XD (Win & Mac), Figma (Free Web tool)

Zeplin logo

Zeplin (Highly recommended!)
Nice integration with Sketch & now, Adobe XD. It helps enable easy and quick hand-off from design to development. This can speed up your development greatly.

Prototyping (Optional)
Most UX portfolios are simple. They have a home and about page along with a few case study pages. Rarely are UX portfolios dense, with complex navigation that warrants a prototype.

Honestly, you can skip this step. But if you feel you need to see the bigger picture, use InVision or Marvel for prototyping. Again, I suggest skipping it. I did.

NOTE
I understand I’m deviating from a typical design process. But each phase is to serve a purpose. A simple, few-page UX portfolio is not so confusing that it warrants a prototype.

I talk more in-depth about design in Part 2.

Development

On a minimum level, you need a text editor and Node installed. But don’t worry as I won’t over complicate things at this stage and dump everything in this article.

The goal for this phase is not to demonstrate our developer prowess as designers (although you could if you want to). But rather, it is to build a UX portfolio quick and easy.

This is why we’ll be using Bootstrap 4 to rapidly build our site and customize it to suit our needs. Then, we will take this a step ahead and automate some repeated web development tasks to speed up our workflow.

All this and more will be covered in Part 4.

Text Editors
Two really good text editors are Sublime Text 3 and Atom. I have extensively used both. It ultimately comes down to personal preference.

Sublime Text or Atom? Trouble deciding? This Reddit debate can help you decide.

In the end, whatever you choose, familiarize yourself with some handy shortcuts. You’ll be faster and more efficient!

More on the tech stack in Part 4.

Domain Name, Hosting & Launch

Once we’re done developing our UX portfolio, we need to launch it online. For that, we need a domain name and a hosting plan. If you haven’t done this before, don’t worry because it’s much easier than you think. I’ll walk you through this too, outlining some of the best and cost-effective options.

When your UX portfolio is ready, you need two things to launch.

  1. Domain Name
  2. Hosting

Start giving this a thought right from the start!

NOTE
Your portfolio could take a while to build. The last thing you want is to see the domain name you wanted is unavailable. Hence, if you have a good domain name in mind, go ahead and buy it first.

You don’t need powerful hosting options for a UX portfolio website. Get something basic.

Now, a domain name and hosting are two very different things and each warrants a section of its own. But if you feel this might be too much of a hassle, just go with a hosting provider that also handles the domain name for you.

The Hosting section of this article covers this. Otherwise, if you want to get tied in fully by one provider, continue to read on.

Domain Name

But, I do urge for one thing. Get yourself a domain name. Now! Especially, if you don’t have a portfolio of your own already. If you wait, you might not get the domain name you want. I got mine much before I even had a portfolio – iamsuleiman.com.

Where to buy domain names from?
Here are a few popular names from whom you can buy a domain name. Usually, everyone offers an introductory price for the 1st year. Don’t just go by that though. You want to look at what you’ll be paying every year after the first one.

Here are a few popular providers. This should give you a sense of how much hosting can cost. Usually, companies offer a highly discounted introductory price. So keep in mind the actual yearly costs after that.

Source(1st year)Renewal
NameCheap$8.88$10.98/yr
GoDaddy
$11.99$17.99/yr
BlueHost
$11.99 $11.99/yr
HostGator$12.95$15/yr
1&1 IONOS$1$15/yr

NOTE
None of these are affiliate links. If you buy from any of these providers, I don’t make money from it. So you can be assured that my opinions aren’t biased.

Personally, I bought my domain from 1&1 IONOS. I find their service very good and reliable. It is a great option if you don’t want to pay too much upfront. Otherwise, NameCheap is a great alternative that saves you money in the long run.

Don’t just go by the price. You might want to look into various other factors such as customer support, ease of use and more.

If you have trouble deciding, here are the 15 best domain name registrars in 2019. Many of these services provide hosting too. It should help you decide and pick one.

But wait!
Before buying a domain, read about hosting too. Certain hosting providers offer a free domain name (for the 1st year) when you buy from them.

Hosting

So what about hosting then? Consider hosting plans where they offer a free domain for the first year. Having your domain and hosting in one place simplifies a lot of the hosting process.

TIP
Consider a provider who offers both domain registration and hosting. This can save you the hassle of connecting both and money upfront.

Here’s a little overview of the cheapest shared hosting plans by hosting providers.

ProviderPrice (1yr)Free DomainStorageSSLWebsites
InMotion$7.46/moYesSSDFREE2
BlueHost$4.95/moYesSSDFREE1
HostGator$5.95/moYesRegularFREE1
iPage$7.99/moYesRegularUnlimited

TIP
Consider buying hosting for at least a year. The longer period you buy for, the lower is your $/month.

To help you decide, here are 7 hosting providers who offer a free domain.

If you’re a bit nerdy, you might want to see performance tests of some hosts. Hostingfacts.com has those results for 30 different providers.

Personally, I purchased hosting with InMotion Hosting. Their Business Plans may seem slightly pricier than other competitors. But the SSD storage and free SSL certificate were important for me.

NOTE
When a provider says unlimited. It doesn’t actually mean unlimited. There will be a cap limit buried in the details so keep an eye out for that.

I tried to be brief as I can and yet, give you enough insight. Spend some time picking the right domain registrar and hosting provider for yourself.

Still, have trouble deciding? Check out the best web hosting companies for 2019 by HostingPill.

Part 8 will cover how to set everything up and launch your UX portfolio.


Wrap Up

I know this might’ve been a lot to digest. But I hope I’ve done my best to convey them to you simply.

By this point, if not hosting, get a domain name at least (if you haven’t already).

If all the above was too much to take in for you, then no problem. I made an infographic that has condensed everything I just said above.

Download the free infographic on how to build your UX portfolio.

Next Steps

In this article, I hope I have given you a fair overview of the 3 major phases of building our portfolio.

  1. Design
  2. Development
  3. Hosting & Launch

If you know someone who wants to build a unique UX portfolio of their own, share this with them! If you have any questions or thoughts, I encourage you to comment below.

Don’t forget to subscribe if you want to know when the next part comes out!

Read Part 2: Designing your UX Portfolio

Suleiman

Product Designer who occasionally writes code.

You may also like...

Leave a Reply

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