Jekyll, Flat Design & Unicode

I recently updated my site to use Jekyll, markdown, and Unicode icons. There are, of course, still some images, but only as necessary. Portfolio samples and 4 header images to give the site some character. However, I decided to dump a lot of tiny details in buttons and whatnot in favor of just focussing on content, and speed. The images I do use are pretty well optimized, but being that they are portfolio pieces, there's only so small I was willing to go.

tagged as design

I recently updated my site to use Jekyll, markdown, and Unicode icons. There are, of course, still some images, but only as necessary. Portfolio samples and 4 header images to give the site some character. However, I decided to dump a lot of tiny details in buttons and whatnot in favor of just focussing on content, and speed. The images I do use are pretty well optimized, but being that they are portfolio pieces, there's only so small I was willing to go.

So What Changed?

I went with so called 'flat' design to lessen the burden on CSS3 properties (hence to increase page load) and because I felt that I didn't have a true call-to-action. Since I don't have a CTA, I didn't really want any one link outweighing another. I tried to visually imply the different links: ones going to portfolio or blog posts (blue) and ones going to test samples and projects (in teal).

I decide to move to Jekyll for a few reasons. One was because I wanted to learn it, and see why it was so popular (if its good enough for github, it's good enough for me). Another reason was to decrease page load; as it just generates a bunch of static HTML files. And lastly was to start using markdown everyday (which helps me focus on content and nothing else). I blogged last year about adding markdown to CMS', and I really feel this will get more popular in the near future: but that's neither here nor there.

I also incorporated Unicode icons where I felt they made sense. For the link to the main nav (this is more of a gear/settings one, but I dug it), the actual nav, arrows to return back to the main work/blog page, arrows showing users leaving the main site, a return home arrow, a hammer & pick for work, lightning bolt for work/thoughts internally, and an umbrella for my colophon. All are free, all are native, and all are stylable like text is. So, this means they are super easy to use, super flexible/scalable, and as you may have guessed, are super quick to load.

So, whilst this may not be the sexiest site ever; I think it mixes simple, sleek design with large, touch-friendly content and performance. And, in my experience, a great combo of all three is the best UX.


Mused on February 19, 2013


© somewhere through 2014

head home view some work read some thoughts jeff on twitter check my résumé

© 2014

hide