It's a me!

The ideal

The process of standing up a new website can often be a chaotic mess, so when creating this new site, I wanted to follow a stepped, logical process.

Specifically, I wanted to;

• Define my wants and concepts
• Sketch out my ideas
• Define the information architecture
• Build a style guide
• Build a minimal UI library
• Build a more fleshed-out prototype
• Create the site structure
• Create the site content
• Test
• Iterate
• Deploy

Without having external interference, it's an easy, but regimented process. Over the past 4 years, a number of my new sitebuilds have had external pressure on various things. We web designers and front-end developers suggest fast, light and free typefaces, the brand team needs something they can "feeeeel". We request a scalable, maintainable platform, a stakeholder has stock in another company with a less stable product. There is a lot of give-and-take.

You can rarely build in a sterile environment, unless it is self-directed.

The beginning

I began by hand-sketching a lot of the assets. There are a number not yet in use, but this is one example. I drew a self-portrait in brush pen, scanned it in and converted it to vector.

Next, I sketched some icons; a hand, an arrow, a chevron, a home, some social media icons, email icon, etc. These, also converted to svg via illustrator.

Then came the information architecture. I have one stakeholder, me, so I was easy to pitch to. Minimal iteration.

Middle steps

I created my mockups in XD, my style guide in Zeplin (with the help of XD and Figma), and then created a draft website on my local server. Build was done with Ruby and Jekyll, markdown, liquid, scss, html and javascript. Once done, I created new posts, posts of stuff from my old portfolio, polished some of them, staged the mockups, and pushed it live. My web server uses a git process, which makes things easy to maintain, although there's just one of me, so git is overkill.

The finished product

And in the end, there you have it. A meta mockup, a mockup of the site inside the site you're viewing the mockup on.

All that, to create a portfolio. It's necessary to keep your skills sharp, however.