Publishing the Underground - A Case Study

December 15, 2015 at 23:26

It's been around 10 months since I last wrote a blog post, and I'm happy to say that this is because I've had a very busy year! I recently completed a project for Dead Ink Books, a publishing company based in London and Manchester that publish fiction and poetry from up-and-coming authors. The project had a very short time-frame, I had just over three weeks to design and develop the site, in my evenings and weekends.

The Brief

To design and develop a single-page website that will advertise Dead Ink's Publishing the underground initiative, and allow consumers to pre-order the upcoming products.

The Role

I was responsible for the design and the development of the website. Designing the website also contributed to the design of the broader initiative, along with a refresh of the Dead Ink logo.

The Technology Stack

HTML5, CSS3, Libsass and Bourbon, jQuery, Backbone.JS, Underscore.JS, Browserify, Karma, the Gulp task-runner and numerous Gulp plugins. WordPress

The Software

Adobe Photoshop CC, Sketch, Adobe Illustrator CC, IntelliJ IDEA 14, OSX Terminal, FileZilla

The Fonts

Futura - Hero title,
Lora - Headers,
Open Sans - Body text

The PageSpeed UX Score


The Design

The brief for this project was very open-ended, "Clean, light and professional" was the only real instruction I received. Luckily, the name of the project, Publishing the underground is descriptive in itself. I began looking for visuals to create a mood-board to work from, one image I found and instantly liked was one from Stocksnap.io, a great resource for high-quality copyright-free images. The image is a symmetrically framed, monochromatic underground car park. Once I had this image, I began experimenting with colours and fonts in Photoshop and Illustrator. I couldn't resist breaking out the Futura Bold, and trying out a Wes Anderson-esque title across the centre of the screen.

Dead Ink and Publishing the underground already lend themselves to an urban theme. Operating out of London and Manchester, Dead Ink publishes authors who "may not yet be known or commercially viable", this instantly had me thinking of a dark colour palette. From here I began thinking about content structure and the general layout of the site. It is at this point I began receiving content for the site to work into the designs. The next step in my though process was to create a very print-influenced layout, relying on a column-based layout. A big influence for this decision came from reading modern publications such as The Skinny, and Crack. From here, I created my first page concept:

For this project, I liked the idea of creating a fullscreen hero image that would set the tone of the content and would leave a lasting impression, something that would make a user want to hit refresh just to see the introduction again. Whilst I was happy with the static image, I suggested Dead Ink create a video that we could loop in the background. They then created a great short film featuring the Publishing the Underground authors and the printing of some exclusive Dead Ink t-shirts. Over this video I overlaid the Publishing the underground title, which featured a subtle fade-in, the title is then followed shortly after by the Dead Ink logo and sticky Pre-order button. One other feature I really liked on this design is the white border framing the page.

I wanted this site to be feature-rich, but in a very subtle way. An example of this can be found in the way I have made the main call-to-action and the logo sticky. Because the border wrapping the page is 25px wide, I didn't want the buttons to be permanently position:fixed. so when the user lands on the page, those elements are position:static, until the begin scrolling, then at a height of 25px those elements are caught by the top of the page.

The Dead Ink Logo

Whilst working on another project for Dead Ink, I quickly created this logo to use as a placeholder, and I really loved it so implemented it into these designs too. The logo ended up making it's way into the final project and has sort of become the Dead Ink logo for the Publishing the underground initiative. The fonts used in the logo are Lato Bold and Lato Light, with some slight adjustments to the tracking.

The Favicons

When creating the iconography for the site, I took the droplet design used on the current Dead Ink website, and added the Publishing the underground placeholder image that was used whilst the site was under construction. I really like how these icons turned out, and the retina versions look great on iOS devices.

The User Experience

Unfortunately, as this project had such a short time-scale, one thing I wish I had time to improve was the overall user flow of the website and delivery of information. In my opinion, the site features too much extraneous information, a lot of which is either repeated or not display in an easily discoverable or digestible way. Again, this is a result of the time constraints and is something that requires careful time and consideration. The issue with the user-flow of the website is that users don't have any direction or end-goal... The aim is to get people to click on the Pre-order button, however there is no real driver towards that goal. Having said that, I am extremely happy to say that Dead Ink did reach their funding goal for the project, so at least a few people found the button!

The Task-runner

As with the design stage of this project, the development stage began much more methodically before the project accelerated. For this project, I decided to try using Gulp as the main task-runner. Having had previous experience using Grunt, I had read a lot of people talking about how much faster and more efficient Gulp was, so I thought I'd give it a go. I have to say, Gulp is pretty fantastic. There were a few things I was worried about when I first started setting up the project, for example, not being able to use Require.js, and the fact there aren't as many packages for Gulp as there are for Grunt. But after using it on this and a couple of other small projects, I don't think I'll ever go back to using Grunt.

So in my project, I set up three tasks, a styles task, a scripts task and a test task for running my JavaScript unit tests. As I wasn't really doing anything complicated with this project, all of my tasks are fairly straight forward. My styles featured the sass and Bourbon libraries, an autoprefixer, a minifier and a linter:

gulp.task('styles', function() { return gulp.src('./scss/pages/*.scss') .pipe(sass({ includePaths: require('node-bourbon').includePaths }).on('error', sass.logError)) .pipe(autoprefixer({ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'], cascade: false })) .pipe(minifycss()) .pipe(csslint('csslintrc.json')) .pipe(csslint.reporter()) .pipe(gulp.dest('./css')) });

Similarly, my scripts task firstly configures Browserify, and shims jQuery, Backbone and Underscore. The output is then linted through JSHint, all ES6 is made into browser-friendly ES5, everything is uglified and then output to a tiny .js file.

gulp.task('scripts', function() { return gulp.src('scripts/bundles/*.js') .pipe(browserify({ insertGlobals : true, debug : !gulp.env.production, shim: { jquery: { path: 'bower_components/jquery/dist/jquery.min.js', exports: '$' }, underscore: { path: 'bower_components/underscore/underscore-min.js', exports: '_' }, backbone: { path: 'bower_components/backbone/backbone-min.js', exports: 'Backbone' } } })) .pipe(jshint('.jshintrc')) .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('js')) });

Similarly, my scripts task firstly configures Browserify, and shims jQuery, Backbone and Underscore. The output is then linted through JSHint, all ES6 is made into browser-friendly ES5, everything is uglified and then output to a tiny .js file.

The Conclusion

Overall, I am very proud of the site, particularly because of how much was achieved in such a small amount of time. Whilst I wish I could have gone back and made the changes I'd have liked to the site's layout and copy, it did exactly what Dead Ink needed it to, and they reached their crowdfunding goal!

Thoughts, Portfolio