Read more about it here.

Friends have asked why I don’t have anything on my website, and why it’s taken so long. Honestly, I’ve not been in any rush. They’ve said ‘just put something up there’, and ‘no-one will really care if it’s not perfect — you can always change it later’. Well, I care. I’ve been patient, and I’ve finally settled on something that I think reflects a bit of me. Clean, content focused with a few extra details that make magic. That, and I’ve got some big ideas lined up that would be a shame not to have somewhere to document them.

The Brand

What I found hardest about this whole endeavor was creating a brand that spoke to who I was and what I did. When I place my brand on something it has to show that I’m a designer who loves to work with data. When I work with visualisation I always say that the data dictates the colours. The data here is my name, and without being all fancy I just want people to remember it when they see a piece of my work, ergo like the message the colours should be black and white.

The final logo for Dave Bowker is a modified version of Avant Garde Gothic

The Website

The most important aspect of the website was to be able to show big, rich images with clear type at an easily readable size and to not let a loud or complex design detract from that. To achieve this I again followed the new Dave Bowker brand by going for black and white, with a splash of colour here and there to categorise the pieces of work.

The focus was to be more of a portfolio site than index of articles, however I didn’t want to exclude the possibility of a future project having a much longer description which is why I never opted for a pure picture gallery type layout. What I went for was to seperate categories of work from everything else and give them a slightly different treatment to whatever else might end up on here. That way the journal page with scope for longer articles could be simply listed, while the front-page and work category layouts could use the work images to show them off more.

The front page of DaveBowker.com, taken November, 2012.

Responsive Design

I wanted to show images on site of at least 1260px wide, so a responsive site for users of smaller screen sizes and mobile devices was an absolute necessity. Very early on (of this iteration) I decided to hang the navigation and branding on the left keeping them in view yet out of the way so I can try and create a connection with the user. After all, a brand is about recognition and I want to seed that relationship as much as I can.

With 1260px wide images and another column of 140px the site is big, and line lengths aren’t really optimal for reading at that width. I decided to knock out 2 columns on the right for text and leave that area blank, but let the header, footer and those large images flow into that extra space. Resizing the window smaller first scales the main content images, pushes the footer below the left sidebar column before all being scaled down together from then on. This gives a really nice layout for all screen sizes, and even tablets and mobiles have their own adaptions for a better experience.

You can view the responsive versions of this site by resizing your browser window, and these versions also work on tablets and mobile devices too.

Details Vs. Optimisation

I wanted to do something on the site, and visualise the type of content that I work on that will expand and grow with every piece of work that’s added. This meant focusing on the structure of the site to get the content in order, then trying to make WordPress do something that it’s not really built for nor optimised to do — queries on queries on queries, and performing them quickly.

An example for how to do something like this would be to query categories for its number of posts and compare that to a query for total number of posts in all categories. Then query for number of categories to get the width, and perform a calculation of category post total against all post totals for the height. …And this is still nowhere near finished!

Just working on the work category visualisation on the footer adds a fair few queries to WordPress’ database, so I’ve employed a number of various methods to give the hosting servers a hand. If you’re non-tech you can skip this bit.

• First, proper loading of stylesheets via wp_register_stylesheet means they can be caught before they enqueue with the WP-Minify plugin, stripping out all the un-necessary requests to the server. The same too for javascript files via the wp_register_script tag.
• Then an HTML optimser such as WP-HTML-Compression saves between 20-30% of the page size.
• Next, push all of this optimsied code through WP-Super-Cache so that it caches the database requests and stores them in plain HTML.
• Also because of the large size of images on this site I use lazy loading to only load them when they’re coming into the viewport.
• Finally, I run everything through CloudFlare to optimise the delivery of the page.

In the end this site is a place for work and to document the projects I do. There’s lot’s of little details I haven’t bothered to share in this post (the multiple film references and the dinosaurs!), but the focus is on the work. Go take a look.

Built primarily for brands, campaigns, and event organisers to capture the online conversation around a specific event and house it in one place for their audience to engage with. Frequently online comment and reaction can quickly get buried under the volume of it all, but Fusely helps to surface these user interactions and promote the most popular across a variety of media.

This is the basic fusely design style for any site. Colours, fonts and a logo can be changed per setup.

The base theme for Fusely is fully responsive with adaptions for mobile and tablet devices, as well as having the ability to be quickly customised for multiple clients through a range of pre-defined variables.

Fusely is fully responsive, adapting to any screen size and working on all mobile and tablet devices.

Fusely combines all types of media in one place and allows that media to be shown in-site, meaning you’ll never lose your user to a 3rd party site to view external content.

Play videos within the site with an ajax loaded modal window.

An example of a branded Fusely page with content from the TechCrunch Disrupt conference

The site is built on the Bootstrap framework, using LESS CSS for dynamic styling and easy customisation. There are optionally 15 different box module templates built in to Fusely depending on the content, and all can be customised together or independently through a LESS variable file.

To try and accomplish a finished painting within an hour was a challenge I’d set myself after seeing some of the amazingly talented speed painters like Nico Di Mattia on YouTube. This is a new skill I’m trying to get to grips with, so I chose the subject and went to work. As I’d set myself the challenge of getting this done within an hour there are things that aren’t finished on it — that’s part of the point — but I tried to focus on the asteroid detail itself.

A digital painting created in Photoshop using the brush tool

A larger crop of the asteroid, showing some of the detail of how it enters the atmosphere

Another project built to showcase some of the Ultra Knowledge content aggregation technology, AllPopNews and Deriva are two websites built using more or less the same theme but with content from two different languages – English and Norwegian. The technology powering the sites is language independent, can be set to run autonomously and updates in near real-time to always have the most recently shared news.

Note: During the week when these screenshots were taken Ultra Knowledge were transitioning servers to cloud storage and not all processes were running, specifically with this project those that update the social ranking numbers.

The branding for these sites would only ever be used online and aimed to be fresh looking with a dynamic feel.

The front-page of Deriva, a site which shows the most up to date shared news in Norway.

The technology behind the site allows articles to be automatically assigned a category based on their content.

The technology category page for AllPopNews.

The Kultur (translates as Culture) page for Deriva. All categories are colour coded and have their own social media profiles so users can subscribe to just what they’re interested in.

The technology behind these sites also ranks the contributing sources, and tracks the change of articles that have made it into the top lists through the ranking algorithm. You can explore how the articles change week by week and see what types of articles are trending.

Ranking the top contributing sources, and tracking their change over time and total social score.

Seventh is a company run by a group of highly skilled business people working in different aspects of media and marketing coming together to create and deliver a bespoke social media based service. With many people to please the design ended up quite simple, with strong type choices and structured layout making up the majority of the design.

The goal was to create something strong, simple and understated. That it would sit on a letterhead in a pile of papers and be noticeable but not loud.

The target audience for the site are high level business executives who need to know some key background information before meeting with the Seventh team in person. As the core goal was to impart a feeling of what Seventh do and how, the design was kept clean, light with an ultra readable type scheme and little distraction from the content.

The page template for most standard pages used on Seventh Social

Seventh were also looking to conduct weekly interviews with people they knew — innovators in business and creative thought leaders.

The innovator interviews would follow a very simple question and answer format.

The aim for Seventh was to blog regularly and grow an audience by the quality of content they write.

The blog index was built as a quick overview to past and popular content on Seventh.

An overview of the UK Tech Meetups piece with space for editorial copy left blank.

176 recorded tech-based meet-ups in the UK, with 7,635 recorded total attendees.

The data for this project was scraped from meet-ups which had an online presence with registered members, and meet-ups which were not listed on the meet-up services site were not taken into consideration for this graphic.

It was determined that the volume of groups and attendees by location was to be considered lesser to each meet-up groups subject matter and popularity. This was because larger cities with a greater population density, such as London, would have shown an aggregate of larger attendees and more groups than any other location.

In order to showcase which groups were most popular among attendees, regardless of their geographical location, a simple bar chart was used with most popular groups running from the left to the least popular groups on the right. Each meet-up is colour coded per subject, and place names are noted underneath each bar. This way you can garner that the ‘Cambridge University Entrepreneurs’ group is by far the most popular meet-up group with around 2000 registered members, that ‘Londroid’ is the most popular group focusing on mobile technologies and that the ‘Geek and Tech’ category is the most popular subject for meet-ups.

An enlarged view showing some of the detail of the graphic

An iPad version of this graphic was also created, and is much easier to read for digital devices.

Interactive Map

To accompany the print graphic, and for the iPad and Wired UK website, I used the Google Maps API to build an interactive version using the same data. This version pinpoints the locations of the meet-ups with accompanying description, number of attendees, website address and twitter username. The interactive version is much easier to see the data and explore what meet-ups are happening where.

Click to view the interactive website

The accompanying article was written by Georgina Voss and was published in the October, 2011 edition of Wired UK.

From this graphic you can see that the leaders on Twitter tend to be mostly those from the more powerful or emerging economic sector countries, with huge Twitter blackouts happening across most of Eastern Europe and nearly all of Africa and Asia.

An overview of the world showing what countries are active on Twitter and who’s connected to who.

You can see how South America really embraces Twitter, and there are lots of connections between the leaders of many countries.

I’m not sure how many leaders, if any actually run their own Twitter accounts, but you can see below the the @Number10Gov account at the time was run by a chap called ‘Ian’. This just makes me wonder if our leaders are actually aware of what updates are happening on Twitter, especially if the account profile is set up as the person instead of the leadership.

You can see how some of the leaders use Twitter to talk to one another, however not all Twitter accounts are actually run by the country’s leaders. Hello, Ian!

This is the map of international diplomacy according to Twitter. [The data was] compiled by Matthias Lüfkens, associate director of media at the World Economic Forum, it shows who follows whom among the world’s leaders (although, says Lüfkens, none tweets personally).

Twitter Data Set Update

This project was originally started in April, 2011 and although almost completed Wired, UK asked me to recreate the graphic based on a new data set they were given. The original author of the data set had updated it with many more accounts and lots more connections between leaders that the original format of the graphic would not have been appropriate.

“Things are moving fast in the Twittersphere but world leaders still don’t understand its global dimension,” says Lüfkens. “When I first presented this work [at Paris conference Le Web 2010], the @elysee account wasn’t even following its own ministries. But it is now.”

The graphic shows lots more connections between accounts than the original version.

I’ve tried to put some of the bigger accounts in the centre of the graphic which is where most of the connections happen. Bigger accounts are indicated with a relatively sized node (circle), a mutual following between accounts is indicated with a thick blue line and smaller directional follows are shown with a grey line weighted thinly from its origin to a fatter destination.

You can really see how the bigger accounts are followed by, and follow lots of the other leaders creating a whole tangle of connections around them.

The accompanying article was written by Joao Medeiros and was published in the August, 2011 edition of Wired UK.

In May, 2011, Search Engine Watch (SEW) adopted the Ultra Knowledge (UKn) Content Marketing Hub in preference to using their existing CMS for delivering the front-end reading experience. As Creative Lead for UKn it was my job to develop the site structure, pages and features that enabled its hugely successful relaunch.

The masthead and top of the site shows how the categories match the colours on the SEW branding.

Feeds from the SEW CMS were processed and categorised into 10 main categories. Each of these main categories has its own index page, each article is tracked based on page views and social reach, and each category pushes out its content automatically through Twitter, Facebook and traditional RSS.

The category index pages on SEW allow an introduction to the section, localised social following profiles and sponsorship opportunities.

Search and topic pages for SEW are automatically created using the most up-to-date content being written. When an author publishes a new piece of content the back-end platform automatically categorises it, tags it and either assigns it to existing relevant topic pages or creates them.

The topic pages on SEW are automatically built, meaning more pages are indexed into search engines without manual intervention. Frequently updated content on that topic helps to rank the page as a good source of information.

A lot of the pages and features on SEW are as standard a part of the Content Marketing Hub platform. Pages like the NewsWall which allows users to browse content visually and the A-to-Z which is a complete index of all topics on the site automatically built and updated based on the content of the articles.

Some of the default features of the Content Marketing Hub being used on the SEW site include the NewsWall and the A-to-Z automated indexer.

The day-to-day operations of the site are handled by Rebecca Holz of Incisive Media, and maintenance on the platform and new features are developed by the team at UKn.

The aim of the project was to find out if what happened in the matches affected the mobile operators network traffic. First the data had to be manipulated to better show fluctuations between standard traffic and the increase in traffic when something happened.

A traffic baseline was created by averaging the total number of texts per match divided by the minutes, and then comparing that number with the actual traffic data for each minute. If the traffic for that minute was either above or below the baseline, relatively that column was resized as a percentage of the baseline.

You can see comparatively in the 2 blue bars that these are 2 consecutive minutes and how relatively the size has increased by comparing each column against a baseline.

As expected when something happens in the match traffic activity dramatically increases as the fans want to tell people about it. It’s also interesting to see in the minutes that when something does happen it takes a few minutes for traffic to settle back to normal. Reasons for this could be that some fans take longer to text than others, some are too caught up in the moment that it takes them a few minutes before they’re ready, or they could be responses from the recipient to the sender. Nevertheless when something happens it’s clear people want to let their friends know about it.

Very easy to see that after both goals traffic increased.

Traffic was pretty low throughout with a little activity at half time but then a massive increase at the end of the match when Wayne Rooney had an outburst on camera.

Again with Defoe’s goal another traffic spike, and then at full time when England have beaten out the round and progress into the next stage we see another jump in traffic.

Comparatively it’s interesting to see the events in each of the matches which led to the traffic spikes. With all matches plotted together on one line graph you can really see how the fans react to the events.

Defoe’s goal is clearly the most talked about, as it was this event in England’s final game that put them through to the next stage.