Design, particularly web design, is about communication. When you design a website for a client you have a clear idea of their message. However, when you build something for yourself, the product itself is the message. Every detail communicates who you are as a designer. And if you have a hard time talking about yourself, then you’ll have a harder time building something for yourself
Treat yourself like a client
There is a lot of visual inspiration and a vast collection of code snippets from around the world. As a designer you never want to have too much freedom. I relish having constraints. I don’t find it limiting to have a solid brand identity, or a mission statment, or to know the audience. When building my personal website, I had to decide on what’s most important to me, and what represents me the best. I had to create my own brand identity.
This isn’t my first personal website, by far. My first portfolio was built using Flash in 1999. It was grungy, animated, with lots of artistic elements and creativity. Although it was visually appealing it would have made for a horrible user experience. While I still appreaciate the grunge look, my tastes have turned to the minimal. This is how I want others to view me and my work. I believe form follows function, and I even live that way.
Building a website is like building anything
My girlfriend and I built a tiny house last year, and I’ve found many similarities between web and house construction. Planning to live in 240 square feet forced us to consider how we live. Our design embraces a minimal lifestyle. We use appliances that can be put away, we have lots of creative storage spaces, and we have a king-sized trundle bed that doubles as our couch. We didn’t jump into it, we started eliminating superfluous stuff while we were living in our studio apartment. We started thinking more about what we need rather than what we want.
Too often people build houses and websites that are too robust for their content and lifestyle. They buy the biggest one they can afford and spend a lifetime trying to fill it up. Soon, they find out that it’s more trouble to maintain then it’s worth, or they’re not happy because it doesn’t fit their needs. I’ve made this same mistake on previous iterations of personal websites. I would build myself a website, then struggle with filling it up with content. We do this because we’re comparing ourselves to others. Inspiration is a great thing, but be careful about applying it to yourself. You may think a pool would look great in your back yard, but if you don’t swim it’s probably a waste of space.
When building a website, think about your content, then decide how much space you need for it. I’m not much of a writer, so it doesn’t make sense for me to build my website on a blogging platform like Wordpress. Yet, I did for the last several years. At the time it’s what I wanted because everyone else had one. I wished I had kept it simple. Even a single page would have presented who I was more accurately. Building something personal, like a website, is very exhibisionist. Musicians write songs, painters create portraits, and web designers make websites. Every aspect of the site tells the visitor something about the designer. Why did they choose that image, those colors, or those words? As a designer we constantly scrutinize our work.
Your work is never done
The key to building your own site is to build it fast. Before you can change your mind. Once you have something up you can continue to improve on it.
This site takes inspiration from around the web. It grew from a basic idea and has evolved as I’ve worked on it. I wanted to keep it simple, so I took a mobile first approach, then added enhancements for the desktop.
- Jekyll Page templates.
- Sass CSS compiled with the power of SCSS
- redcarpet markdown parser
- Bower Package management.
- Yeoman Webapp generation.
- Github Pages Testing and hosting of this website.
- Grunt Task manager.
- Advanced Jekyll Features
- Jekyll and Livereload Flow
- How I built my (Jekyll) Blog
- Manage Jekyll Excerpt
The development environment and build system are generated by generator-jekyllrb.