For the better part of this year, I have been wanting to house a blog on my personal site. The stars have finally aligned and it’s now live! With the help of Chris Coyier, we were able to build a Jekyll site that was easy for me to update without sacrificing my design vision. We worked closely together to both make design decisions and write the code. There are a lot of neat little details that went into this site that I wanted to share.
###SVG Bonanza I was inspired by the bold, geometric textile patterns that Dusen Dusen creates. The exciting energy of their patterns and shapes is something that I wanted to capture for the web. Since Chris knows a thing or two about SVGs, it made sense to utilize them for my shapes. I wanted to push a variety of animations to further create excitement within these shapes.
Translating animation ideas out of your brain and to a developer is hard. We did a lot of back and forth to try and achieve the looks that I wanted. We used a variety of methods including Keynote animations, finding examples on CodePen that were similar, and a Google Doc full of written descriptions. In the end, it came down to just getting something in place in code for me to be able to finesse the details. My favorite animation is the “glitch” that appears in a couple of the shapes. This was an idea that I knew I wanted in the beginning, and Chris found a great example to base this off of. He wrote more on that here.
###Jekyll & Grunt I have previous experience using Jekyll and Grunt, so I didn’t really explore other options. I know how Jekyll is updated, and Chris used it as an excuse to learn it. There are some awesome Grunt tasks (that I can’t really speak to) that do things like automatically update the SVGs when I save from Illustrator. Having the developer think about how the designer will work is something that made the entire process smoother for both of us. It caused less headache for him to not have me ask a zillion questions, and it was nice for me to have someone consider how I will be maintaining what they build.
The other nice thing about using Jekyll is that this site is hosted on GitHub Pages! I don’t host anything myself, and have previously just hosted on a friend’s server. I wanted to have it more in my control, and GitHub Pages is great for that.
###Design Considerations In addition to the textile patterns, I’m perpetually inspired by Scandinavian design. My designs for myself tend to be mostly black, white, and geometric. I went on a trip to Iceland while designing this site, and inevitably drew a lot of inspiration from there, including the city of Reykjavik and the glacier lagoon—where my main header photo photo is shot (I loved the geometry of the icebergs!). There were some beautiful black and white houses sprinkled between bright pops of color. Storefronts ranged from minimalist and refined to fun and colorful. I brought more pops of color into this site design than I normally would, and explored many color schemes. If we’re being completely honest, I decided on this final color scheme while watching the Cool Runnings opening title sequence. I tied the colors specifically to the three sections of the site to restrict their application from overwhelming the page.
I wanted to keep a very strict grid. I didn’t want it to feel stale either, so I used that geometry to create an asymmetrical grid of images for my portfolio. I was worried that my mockup might end up looking like a mistake in code, but I’m super happy with how it turned out. In the next iteration, I want to explore other options for small viewports to retain this feeling.
###Harry Potter I haven’t been clever enough to have an easter egg on my site before, but I do now! There is an homage to Harry Potter somewhat hidden on the site. It might be one of my favorite little details about it.
I’m so excited about my new site and I hope you enjoy it!