November 15, 2014 in Blog Design Bits

Blog Design Inspiration – World of Tanks

World of Tanks is a team based multiplayer online game dedicated to armoured warfare in the mid-20th century.

The basic layout consists of a two column layout. The stabdout feature of the website is gorgeous renders of he tanks.

Read More

Blog design bit bbc mashable

October 16, 2013 in Blog Design Bits, Web Design Bits

Blog Design Bits: How BBC & Mashable Do Social Media Sharing

A collection of blog design bits that showcase the different approaches the BBC and Mashable have taken in their social media sharing.

BBC Homepage

The BBC’s homepage is based around a large content slider, with literally no social media profiles or sharing buttons in sight. Have the BBC gone Stalin!, dictating our sharing? Well, yes; I expect the BBC know that their visitor ship is here for their news content, and at this stage, are not ready to share.

It’s interesting to note that the BBC homepage does not show what readers are sharing the most, instead – the hierarchy and size of the news posts sets the importance level to the reader.

BBC Homepage

BBC Single Post page

Once you’ve clicked on a news piece and arrive at a single post page the BBC offer a quaint placement of social sharing buttons, a simple row of small icons atop and below the news post.

BBC Social Share Icons

They have 3 main icons in each space; 1.Share This, 2.Facebook, 3.Twitter.

Interestingly the ‘Share” isn’t the typical “Share This” widget you’d normally get from the official service, it seems the BBC have used the iconology of the green badge with connected node icons and the word “Share” alone.  Click on the Share icon and a box pops up with more social media icons, just like the original Share This service. Obviously, the BBC feel the iconology of the Share This mark is a worthy convention, even for a website of this size.

Mashable Homepage

The Mashable homepage has more shares than a 90’s web start-up. The big blue header houses a row of social media icons (1.Facebook, 2.twitter, 3.Google+) that when hovered over pops up with a large bar with their social media icons, leading to their social network profiles.

Mashable homepage

Mashable know their audience is technical and have designed their social media to be plentiful. You wont find any social media icons further down the homepage though – as Mashable use one of those ‘bottomless glass’ type of content scrolling systems that just keeps popping up with content forever and ever.

Mashable news post

The Mashable homepage is split into three columns of news posts; The New Stuff, The Next Big Thing, and Whats Hot. Each news item has it’s overall shares displayed. If you hover over the latest news post in the Whats Hot column the shares area becomes  a list of social media sharing icons.

They have 6 icons: 1.Facebook, 2. Twitter, 3.Google+, 4.LinkedIn, with each icon displaying the number of individual network shares.

Mashable Single Post Page

Once you’ve clicked on a news post and arrive at a single  post page,  Mashable slap you across the head with a wet haddock full of social.

Mashable single news

This layout has more icons than an Xfactor contestant. We start with a giant overall social share number positioned at eye level (top, left), followed by a large row of social media icons, with the bubbles displaying the different social networks share numbers.

Then follows a line graph, yep, I said that, a line graph. Mashable know how to appeal to their technical audience, it turns out it’s the Mashable Velocity Graph, it shows how quickly people are sharing this news post, it’s technical and geeky, I love it. Though I do feel it’s too abstract and holds no value or clarity of data, a thermometer or speed dial may get across this data with more clarity.

Then to the the right theres a row of social media profile links: 1.Facebook, 2.Twitter, 3. Google+ – just in case your convinced to Like Mashable now you’ve read their content.

Mashable have taken note of how we all love sharing photos, they have a row of social media icons appear when you hover over an image.

Web Design Bits: Mobile Navigation Examples With No Traditional Navigation

A collection of web design bits that showcase how web designers are tackling mobile navigation. On these designs the web designers have chosen to simplify the design so much that there is no traditional primary navigation in-sight, instead the focus is on getting the user straight into the content. This method ultimately saves lots of valuable space on the mobile screen and takes advantage of the linear scrolling of a mobile.

Mobile Navigation


Read More

Web Design Bits: Mobile Navigation, Less Is More Examples

A collection of web design bits that showcase how web designers are tackling mobile navigation.

Cutting down options is always a good thing and in these web designs the designers have chosen to cut down the number of navigation items down to a small handful, thus saving valuable space on a mobile device.

Simplebits mobile navigation

clear left mobile navigation

Read More