Nick Stead is an author based in Huddersfield, in England. He has a passion for writing horror and dark fantasy, and finally realised his dream of publishing the Hybrid series, which he has spent over 10 years writing and refining.
The Challenge
Nick contacted me to create the logo, branding and website for his personal author website, as well as the branding and a full website to replace the existing book launch page for the Hybrid series. He wanted the branding of both to reflect the dark tone of the his work and feel that the two websites are connected. Nick also had a very small amount of money to spend on this project which challenged my creativity to find solutions on a shoe-string budget whilst maintaining a high-quality result.
Outcome
I worked with Nick to create a brand that was versatile, scalable and could span different mediums. I incorporated different branding elements across both websites for a cohesive look. The brand embodies the dark atmosphere Nick was looking for whilst avoiding being overly clichéd, giving his brand a unique, yet readily identifiable look.
01. Discovery / Strategy
At the start of the project I provided Nick with a questionnaire to fill out. This gave me a better understanding of his needs and if the project would be a good fit for both of us. Afterwards, I compiled everything and distilled it into a proposal. I outlined the goals for his websites (primarily to drive sales of his novels), the target audiences and the scope of the project. I also conducted research into other authors in this genre by looking at their websites and branding to see what worked and what didn't.
02. Brand Preposition
Once I knew the goals of the website I created a simple mood board to show the design direction for the project. I presented this to Nick and we discussed what he liked and disliked to get a better understanding of the design direction.
Moodboard
03. Logotype
Nick wanted a logo that spoke to his personality and the worlds that he creates. Due to the budget constraints, we decided on a logotype based on an existing typeface (New Rocker) rather than hand-lettering or a completely bespoke logo.
The final piece was a blackletter inspired logo that met Nick's need for 'bestial' and 'primal' without removing readability. The 'N' created a tail which was suggestive of the demonic themes in Nick's writing. This was also used as an icon elsewhere (such as on the Hybrid series website) and as the favicon. The slashes through the letters were intended to suggest the bestial elements in his work, for example, werewolves and other clawed monsters.
Logo Sketches
Final Logo
04. Visual Language
Imagery
To keep costs low, we decided on an abstract background for the author site, business card design and on social media. This was paired with a series of masthead banners that used a combination of free and paid imagery. Some of these images were then reused in the creation of the Hybrid series website. The images were colour graded and edited to create a harmonious look.
Background image used on business cards and nick-stead.co.uk
Background image for hybrid series.co.uk
Masthead images from nick-stead.co.uk
Typography
Typographic elements were also created using free assets. The typefaces Destroy and Shortcut were chosen because they were used in the book cover and created continuity between the books and the rest of the branding. Elsewhere, Open Sans was used for the body copy because of its legibility and multiple weight options. The author website also uses Another Danger for the navigation to provide contrast.
Typography
Colours
Red was used as the primary colour for the branding with white and black as secondary colours. Different shades of red were chosen as tertiary colours, such as for hover states on buttons.
Colour scheme
Stationary
Nick requested some business cards that he could take with him when he was out promoting his series. We decided on a simple design and I also created a letterhead that Nick could use if he writers to his fans by letter, or general purpose use.
Stationary — business cards & letterhead
Pricing List
Nick planned on selling his books on stalls at horror and writing conventions happening throughout the year. Nick was originally using a printed piece of paper with his prices but we felt that it could be improved. One of the main factors is drawing the eye to the prices and books on offer so I used the Blood of Man shade red to grab the attention of any passing by his stall.
Pricing list poster for horror & writing conventions
The brand embodies the dark atmosphere Nick Stead was looking for whilst avoiding being overly clichéd
05. Information Architecture
Content Strategy
I began work on the websites by doing inventory for the existing content on the launch site and any existing content Nick had for his personal website. By using a content-first approach you can design a robust solution that fits the content rather than trying to force the content to work in an existing design that might not work as well. Another benefit of working this way is that it allowed us iron out any problems with the content without getting distracted by aesthetics or technical details.
Content audit document
User Flow
In the process of creating content, I also created a user-flow document to outline the different pages and their general relationship to one another. This allowed us to make sure the flow of content worked across the sites and that the architecture of the websites worked to meet Nick’s needs.
User-flow document
06. Website Design
Once the content strategy and information architecture was agreed upon I moved onto ideas generation for the website. This stage consists of very quick and rough thumbnail sketches of wireframes. The idea here is to get all the possible variations down without getting caught up on a particular direction or style.
From there, I looked through the ideas and choose the ones that will work the best and created a larger, more refined wireframe using the actual content. Again, this is still quick and rough, but using a pencil and paper allows me to get this down without being distracted or hindered by software. When I was happy with that, I moved onto the computer and created digital versions of the wireframes and make any alterations, and finally moving onto creating high-fidelity mockups.
Website wireframe sketches
Low-fidelity mockup for homepage of nick-stead.co.uk
Final Designs
The author website was created with the purpose of explaining who Nick Stead is and showcasing his work. This meant a simple design that focuses on his stories with thought-out typography. For example, attention was given to ensuring the contrast between the background and the type colour to reduce eyestrain.
The Hybrid series website is also simple to avoid distracting users from the goal of purchasing the books.
The primary goal was to create excitement around the series for new and existing fans alike by giving them information on the series as a whole, as well as each individual book, in a way that would translate into sales.
The second reason for the redesign was the single-page launch site didn’t lend itself to multiple books because where a book launch page would typically display one book a series of books would require a different information architecture to cater to existing fans who want information on the latest book as well as new fans to the series. Therefore, it was decided that we would create a fully fledged multi-page website. Indeed, prior to the redesign, the launch page did try to address these issues by linking to the first two books in the series but it caused confusion with some users as one book was more prominent than the other.
The final goal was to make it easy for fans to get updates so we added the same newsletter from his author website. I also added social media links to the navigation to make contact information easy to find. A modal window was added with vendors, something which was lacking in the previous launch page. This gives users more choice in buying options with the hope that they'll be more likely to buy.
nick-stead.co.uk
hybridseries.co.uk (before redesign)
hybridseries.co.uk (after redesign)
07. Front-end Development
The websites are both responsive for cross-device use, and built on the Foundation framework by Zurb. Some type elements were converted to inline SVG to reduce page requests. Similarly, the vendor logos in the modal window were also inline SVG to reduce HTTP requests. Images, CSS and JavaScript files were compressed and optimised to increase performance. We decided to use WordPress to create both websites with custom post types and meta boxes to make it easier for Nick to update content on his own. WordPress also allowed us the opportunity to include a number of additional plugins to easily provide Search Engine Optimisation (SEO), Google Analytics and caching to improve overall site performance for returning users.
Clare did an amazing job of capturing the themes of my work and creating the right atmosphere for my sites.
— Nick Stead
Services
Branding | Logo design | Stationary design | Web design
Deliverables
Guidelines | Logo | Graphic design | Website
Client
Nick Stead
