Making a personal homepage
In the process of establishing myself in my career, I realized I would need a personal website to showcase my portfolio and have a presence on the web. I also decided I should build it myself, not only because it could showcase what I was capable of coding, but also because it was just plain fun.
I looked at the online portfolios and websites of other UX designers. In addition I read articles on what should be on a personal webpage or portfolio. I kept all my notes, images, and screenshots in my Evernote account so that I could quickly access them, and store them just in case I need them.
Commonly listed important elements were as follows:
- Introduction / Elevator pitch
- Work Samples
- Web presence & links
After understanding what content was needed in a personal portfolio site, I had people card sort content types into piles where they expected different content to be located. Since my content inventory was rather small, most of the sorts came back as expected with almost no variation at all. From the results I created a site map with pages, sections, and content. A site map is like a road map to the various sections I would need to code up and produce content for, and allowed me to see the project from a top-down view.
After defining the content and their architectural relation to one another, I sketched out a variety of pages with Sharpie on paper. Eventually I created more medium fidelity wireframes on Sketch 3 so that I had a better visual idea of my eventual website. In doing this, I saw the parallels between design and HTML/CSS: setting out the contents in IA was the HTML: content, while wireframing created the CSS: the style.
I coded up my website with a Ruby-on-Rails framework with some Bootstrap to get me started. I created templates for my project sample so that the styles could be consistent and I would know how to create new project pages as I built my portfolio.
I made my code modular by splitting up different sections and partials which would be rendered with the Ruby-on-Rail engine. This allowed me to see the whole website from the big picture view, instead of seeing a jumble of markup. See my code at my Github repository.
As you read this, you are on my WordPress site. I am enjoying the WordPress CMS very much as it lets me worry about design and front end development, instead of how data is stored. In addition, it gives me an opportunity to learn more about the platform that a quarter of the internet’s sites are built on, without doubt a useful skill to have. I am still designing and developing websites and applications, but now I am more focused on the particular skill sets employers hire me for.