How the new Hermit Spirit site mastheads were designed, Part 1

A look behind the scenes — and how things so often take longer than you think.
For links to all of the fonts and original images used for Hermit Spirit’s site-wide and section mastheads, see Credits/Colophon.

A week ago I launched the newly redesigned and rechristened Hermit Spirit website here after about two months of spare-time effort. Two major tasks were involved, the largest designing 12 brand-new mastheads for different sections of the site, including the home page/blog header. At the same time, I wanted to retain the typography and layout I’d previously developed for the main content area (body copy) plus the navigation menus, sidebar, and footer.

The latter task required porting the CSS, or cascading style sheets, from the preceding Think Outside the Box version of the site built on the now-defunct Headway theme into GeneratePress, which the current website uses. (Both are themes for WordPress.) I won’t go into the travails involved with the latter task because it’s code-intensive and not something most readers will care about. But I thought it might be of interest to take a peek behind the scenes at how I designed all the mastheads.

The main site and blog masthead

First, for comparison, here’s the previous Think Outside the Box blog masthead, followed by my new one for the retitled Hermit Spirit version. (Click on any image in this post to enlarge.)

You’ll notice two things off the bat: The new blog masthead is much simpler and deeper vertically (at 400 pixels) than the previous one (286 pixels deep). I found that the Think Outside the Box masthead — designed primarily for computer monitors — lost most of its impact on smartphone displays, which are much smaller but have now come to be used for a significant percentage of all web surfing. So my watchwords for the new masthead series were larger and simpler.

Read moreHow the new Hermit Spirit site mastheads were designed, Part 1

Hermit Spirit blog conversion: interim report

Wardolfski turns over a new leaf with a reasonable-length post (say it ain’t so, Joe!), while his hermit self beavers away designing a new incarnation of the blog.

Things are going well with the website conversion, all things considered, with about five weeks of spare time now into it. I really enjoy the process of envisioning a new direction for any endeavor, whether something ongoing or a fresh start, especially the brainstorming side of things.

It’s a fragile endeavor, though, the ideas coming and going swiftly: for visuals, headlines, layouts. One must be on continual standby to note things down immediately, lest they disappear as evanescently as they flicker before the mind’s eye, trying to catch the proverbial lightning in a bottle. With pen and paper or a computing device at the ready, for a time prisoner of the muse or mistress. Pledged to do her bidding so as not to be cast out before you have obtained both satisfaction and release from your desire.

For me this stage tends to go by relatively quickly. Ideas typically come in a multitude of rapid staccato bursts — an experience of one “high” after another. While there can also be some cognitive dissonance as sometimes-contradictory ideas spew out like fireworks, it’s all part of the process.

As someone who enjoys learning new things and having my head turned upside down occasionally while simmering and percolating through to a new view, cognitive dissonance is to be welcomed because it means things are in flux. And flux, a boiling over of ideas, often chaotic, is a key aspect of the creative process. Eventually, as things evolve, the contradictions resolve themselves, and any ill-fitting pieces puzzled over begin falling into place. A direction progressively becomes clear, but as it does comes the challenge, the hard part: all the detail work required to implement the vision.

Read moreHermit Spirit blog conversion: interim report

Achieving enhanced web typography, by a 30-year veteran

Enhanced typography is still difficult to achieve on the web — well over 20 years after the web’s inception, no less — and by now should be much easier, to my way of thinking. As a professional typographer for 30-plus years now, I thought it might be helpful for others to explore how I went about putting that aspect of things together here on “Think Outside the Box.”

This overview takes a look at the various typographic elements I’ve given special treatment on the Think Outside the Box blog and website, including a number of WordPress plug-ins that have been utilized. For those who are more intrepid, what’s covered in this post should hopefully be enough as a jumping-off point to help get started implementing these solutions as well. Although I had experience hand-coding a couple of previous websites (HTML and CSS, though not more advanced code like JavaScript or PHP), I myself could certainly have used an overview like this over a year ago when I began trying to get TOTB going in my spare time using WordPress.

Read moreAchieving enhanced web typography, by a 30-year veteran

css.php