How a designer builds personal website

Ilya Zoria
Dec 15, 2017 · 5 min read
Image for post
Image for post

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

Image for post
Image for post

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?
  2. What are your responsibilities?
  3. What platforms did I have experience with?
  4. Why are you better then the others? (Benefits)
  5. What is your work experience?
  6. What did you do for others? (Portfolio)
  7. What kind of person are you?
  8. How to contact with you?

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

Image for post
Image for post

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.

Image for post
Image for post
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

Image for post
Image for post

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:

Image for post
Image for post
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.
  2. Use tools and and frameworks that save your time: Command Line, Atom, Gulp, SAAS, Bootstrap, Chrome dev tool.
  3. Use version control system for code. It’s helps you come back to previous versions if needed. I used GitHub as most popular or you can try
  4. GitHub Pages for hosting. As I uploaded all production source files on GitHub I easily can convert all repository to working website and also link my custom domain to it.

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
  • compile SAAS to CSS
  • live browser sync
  • minification CSS and JavaScript

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store