featured44The blogging platform Ghost has been getting a lot of attention recently due to its recent move from beta to public release (if you somehow haven’t heard of it yet, head over here and read up).

Like other platforms, Ghost supports third party ‘themes’. In this article we’ll design a simple, responsive and content-driven blog. Then code it into a fully-functional theme for Ghost.

The design

The default theme for Ghost, ‘Casper’, is very clean looking. They put content first, showing off the typography with a modern color palette, so that the focus is on the writing.

We’re going to follow that lead, so our design process needs to start by understanding how Ghost works and what’s available to the user in the back-end. There are 4 main elements that we’ll be able to draw upon from the back-end while designing the theme (apart from the articles/posts themselves obviously) which are:

  • Blog title
  • Blog description
  • Blog logo
  • Blog cover

All of which can be set in the Settings tab in Ghost. These point the design in an obvious direction of some sort of banner at the top of the page, which contains the title, logo and description and a cover picture as a background. Read more