How a designer builds personal website

Ilya Zoria
Dec 15, 2017 · 5 min read

About two years ago I planed to build my own website. A year ago I bought domain name ilyazoria.com and started working on it, year after it went live. If you think that it took me a year to build website, then no — I spent only 2 month, in between full-time job and freelance. It was hard to start this project even after purchasing domain name🙄

So why do I need personal website?

My main goal was to summarize all my projects and reach potential clients and recruiters. Also I want to show that I’m a real person and clients can trust me and finally — improve my skills in front-end development.

Research

Before I actually started working on my project, I collected a bunch of designer websites and studios. It was interesting to see how other professionals present themselves. Here are my favorite links:

Wireframes and content

The most challenging part was writing a content, as text should be very clear and short. In the era of content-focused websites your lo-fi wireframes are based on content structure.

My website structure is based on clients’ frequently asked questions:

  1. What is my workflow?

Those questions help me understand what does client want to see on my website and in what order. Most of text I noted in my Wunderlist and then collected it in one big picture, like a puzzle.

Visual design

Before starting to any style I had to create my personal brand. It’s not so simple, when you work for yourself. You need to create logo, choose brand colors and typography, follow all icons in one style. I created simple mood board and try to compare few color combinations and whole visual style. Firstly my main fonts was Exo 2 for headlines and Avenir Next for body. But later when I start code website I understood that Exo 2 bold 700 doesn’t works in browser. So I just keep Avenir Next as one main font.

In all projects I’m always designing for 3 breakpoints (desktop, tablet, mobile), but in this case I’m just working with desktop version and also keep in mind mobile versions. So I know how mobile will look after implementation.

Responsive website after implementation

I don't want to focus much on visual part because, I offer that you know how to create good visual design, as this article mostly for designers. So let's switch to front end part.

Front End

I had experience with front-end before, when I was working on Wooddoors. It was big challenge for me. I’m created fully functional website from scratch (Design+Front-End+Modx). Check out behance project.

I think main pain point for designers that they don’t know how to code when want to build website. Most designers just used platforms like WIX, Squarespace or Readymag, because it's easier to use predefined templates and just customize them. But here I see two problems: cost💰 and limits ♿ of customization. So why don't build it by myself?

HTML/CSS/JS are absolutely free and there are a lot of open source frameworks in the web, that make your work easier. This is not so difficult. It's same when you learn new tool. Yes you need to spend some time to learn it, but it's worth your time. You can find a lot of resources in web to learn, here are my favorite:

Live website

Some tips for Front-End part:

  1. Organize all assets in 3 folders: fonts, icons, images. Make sure that your icons are in artboards and images optimised.

The benefit I found hosting on GitHub — it's because you can easily edit text in your HTML files and save it as new version. So I can come back to previous version anytime as needed. For CSS it’s a little bit harder, because I used SAAS as preprocessor and Gulp for minification CSS. So in this case I edited CSS locally and than uploaded production files on Github.

I also consider to use Gulp as task manager for those tasks:

  • optimization images

Please check my project on Github.

Summary

Your personal website doesn’t guarantee that you find better job or new client, but it helps stand out from other millions designers that don't have it or make it on default free templates. You don't need perfect or supper animated website, just show your work process and your style and someone will love you for that. Don’t be afraid to learn some basic HTML/CSS/JS to transfer your static pages to working website.

If have any questions or just thoughts please write it below in comments or say hello 🤗

Don't forget to check my website 😉


I’m Ilya Zoria — Product Designer at Wirex. I also host facebook group and telegram channel for product designers with latest articles and tips in design tools. Previously designing for Fareportal and Paymentwall.

Follow me on twitter, dribbble, behance, instagram.

Ilya Zoria

Written by

Product designer. http://ilyazoria.com/