Learning Ghost theme design

Squee!

Ahem…I’ve been on the fence about trying Ghost out for at least a month. Then I ran across an excellent tutorial on Tutsplus on how to build a Ghost theme from scratch. Highly recommended to learn the whole process.

I already had node.js installed to learn how to use Stylus as my CSS pre-processor so I spun up a local instance of Ghost and got to work.

I’ve been spending the past couple of weeks ripping apart the Inspyr theme for Wordpress and running into many little roadblocks when customizing the PHP, frustrating.

My experience so far with Ghost and Handlebars to handle templating has been near sublime in comparison. Setting up new page templates and understanding how partials work was so much quicker than wrapping my head around how hooks work in practice.

##LESS to Stylus The tutorial series linked above was excellent, with only one downside: the entire CSS workflow was built on using LESS…but I was going to use Stylus for it’s python-esque elegance, especially after discovering the awesomeness of Jeet for managing a grid system.

Translating LESS syntax, especially around the math, ended up being an excellent way to learn the correct Stylus syntax, so a win-win there, even with a bit more time spent.

But finishing a single tutorial, however long, isn’t a sign of actually learning how to theme Ghost. Next step? Theme this blog.

Oh, and then theme another existing blog which I’ll be porting onto Ghost on a Digital Ocean droplet, because I hear that service is awesome.

Other challenges to try out:

  • Mirror this Ghost development workflow to a Windows environment.
  • Learn more about node.js, ember.js, and Javascript in general in order to extend Ghost’s functionality, or at least lend a helping hand.
  • Might be a ways down the road, but now that I’ve migrated this site onto Ghost properly I’ll be trying my hand at a more specific theme. I like this one, but nothing like building your own sometimes.

Doubt Limits

Thanks Bruce! Still working with minimal designs and geometrics. Original idea was hand drawn, but realized digitally.

From a tiny little book, You² that I received as a gift (one of the most powerful I’ve ever received) recently. I suspect more quotes from that book will be showing up here later.

video thumbnails

I’ve got my hands on an awesome plugin, UberGrid (aff link) for making resizable grids and for a simple way to handle the massive number of videos I have on Play Everywhere. And thus I realized I needed some thumbnail style images for all the videos, because the auto-generated ones from Youtube were crap.

So time to experiment with minimal typography and use of color for these. The thumbnails I see on youtube sometimes with the super heavy thick strokes or other effects feel a bit tacky to me, so I’m trying something a bit simpler. For a bit of contrast at distance I’ve added a sign-painter style drop-shadow, but that may not stay in the final versions. Otherwise setting type in styles that fit the name and direction of travel.

2hvaultThumb

lazyvaultThumb360ubThumb speedvaultThumb stepvaultThumb turnvaultThumb

The way these images line up without any adjustments to code is also a perfect example of why grid based plug-ins (or custom CSS like purecss) are great for creating beautiful, symmetrical, layouts.

Structure Yields Freedom

"Structure yields freedom to creatively roam." -Todd Henry From Todd Henry’s book, Die Empty

I love this quote, and the idea for this poster was from some inspired scribbling in a notebook while taking a breka for lunch. The final design took me much longer to realize, as I had the intent to do all the lettering by hand. I think for the next experiment I’ll have to try hand-drawing everything and just inking the design digitally.

Structure SketchFreedom to SketchCreatively sketch

And on. I did learn some tricks in Illustrator to pull that off, and the sketches looked alright using that method, but not quite what I had intended. I kept structure hand-lettered but the final project used a new typeface I found, Myriad Std Tilt, for the rest of the text. During the process I experimented a bit with some script faces and using paths to make the letters wander around, but it just wasn't having the effect I wanted. And thus this crazy design happened.

Book Designin'! Religion of the Samurai (Skillshare Project)

Whew, who knew how much effort went into just laying out the text for a book. Just wrapped up the project for a Skillshare class on styling novel interiors.

 Have a look!

The main title page for my Religion of the Samurai project.

The main title page for my Religion of the Samurai project.

More geometrics + quotes

Paul Jarvis Quote

Shapes in illustrator = easy. But in photoshop they’re just a pain to work with (at this point).

video editing day

I won’t usually put in video editing stuff, as it tends to be straightforward. However today was a bit of playing around with fonts for the intro along with some subtle music syncing to a short clip.

pattern recognizers

Playing with pairing fonts, basic geometric designs, and the blend tool in Illustrator.

jsQuoteBauhaus

After finishing a book about Bauhaus I wanted to try to emulate some of the formative practices they used in their courses. Part of the preliminary courses at the school were studies in using color and basic shapes for ideas. On top of that I just discovered that the blend tool in illustrator could quickly create hundreds of objects, so with that in mind this experiment happened. Also decided to see how I could use the personality of different fonts and pair them together, without relying on color to convey the emotion of the text.

 

learning hand lettering (part 1)

Humanist style serifs, hand-lettered.

letteringPractice1

One of the first things I went to the moment I got some good brush markers was lettering. I’m not sure why it attracts me at this point, besides the attraction to typography in general. Grids are amazingly helpful, but right now even with them I’m sucking at creating elegant curves in some letters. C, I’m looking at you.

Learn to make

"Learning how to make things turns you from a spectator into a participant, from someone at the mercy of the system to someone who is helping to run the system. Learning how to make gives you the guts to make more, to fail more often, to get better at making."

- Seth Godin, The Icarus Deception: How High Will You Fly?