Tag Archives: Design

Eminent Style Four Point 0

Posted on: June 20th, 2013 by Ben Bishop No Comments

5 plus years is a long time. On the web it’s a life time.

According to TechCrunch, Twitter had a little over 1m users in 2008 and now numbers 500m+. Facebook numbered a paltry 100m users and has now scaled 1 billion. Back in 2008, Google+ numbered…. well for Google back then Google Reader was still a good idea. Yes I am still a little bitter about them shutting it down but in case you wondered its now around 342m active users according to IBT.

Devouring the 1st edition of the excellent Designing for Web Standards by Jeffrey Zeldman was the kick in the ass I needed. It helped motivate me and opened my eyes to taking web design seriously. The web was just getting in to gear and realising that there was another way to nested tables; redesigning the previous version of Eminent Style website, the right way, was an achievement I felt proud of. While the site’s been gattering dust over the last few years, taking a back seat to client work and working at Namesco, this has allowed me to seriously sharpen my tools.

Responsive web design, jQuery, CSS3, Sass and Compass (all of which lavishly applied right here) have come along but the same principles of web standards still apply.

5 years IS a long time in web design but some things stay the same. Stand by your guns, keep learning everyday and if you are gonna do it, do it right. Welcome to Eminent Style 4.0

Photoshop Tip: Set Print Design Work to CMYK

Posted on: February 11th, 2009 by Ben Bishop No Comments

Applies to Windows XP / Vista.

Just a quick tip. I have just designed my new business cards and needed to ensure that the artwork was correctly set to the CMYK colour space needed by my printers.

There are two areas you need to check, ideally before you complete your work else there is probably gonna be some colour correction required.

  1. ‘Edit’ -> ‘Color Settings’ and ensure your working spaces and color management settings are setup correctly. If you are not sure about this, contact your printers.
  2. ‘Image’ -> ‘Mode’ ->’CMYK Color’.

Easy eh?

BenBishop Blog Redesign: Refracted

Posted on: January 15th, 2009 by Ben Bishop No Comments

In the three years since I last redesigned benbishop.me.uk, my personal blog, there have been significant developments in web design. From CSS frameworks like The Blueprint, JavaScript library’s like jQuery to development WordPress themes like Sandbox, all have been designed to decrease development time from concept to implementation.

‘Refracted’ is the product of three years experience with commercial clients and the implementation of many of these techniques.

Design

I had the idea of the logo image in my head for a while and was quite determined to go with a light and vibrant design. Contrasting significantly with the previous ‘Satin’ theme, a light text on dark background theme, I wanted ‘Refracted’ to feel like a change from the old.

The layout was sketched out with old fashioned pencil and paper (!) and the design was composed in Photoshop with Illustrator being used for the 3D typeface effect in the logo. Then Photoshop was used again for the rainbow striped effect for the backoground to the logo and the footer.

Coding

Using the Sandbox wordpress theme, I was able to rapidly convert the design into the valid xhtml and css WordPress theme that you see on the site at the moment. Using Dreamweaver, the code editor is excellent, I began the process of adding the header image, and then working methodically through the design as I got dirty with the CSS, making use of the semantic mark up included with Sandbox.

With the basic design done, I installed and configured the widgets to the preconfigured 2 sidebars and finally did the cross browser compatibility changes requried.

End Result

With the theme 90% finished, I still need to monetise it asap, I have gone live. More information can be found here or take a look at the site itself, benbishop.me.uk

LA Galaxy MySpace Profile Goes Live

Posted on: July 16th, 2007 by Ben Bishop 4 Comments

I am delighted to announce that the LA Galaxy MySpace page has gone live.

I was approached by AEG Worldwide in June about a proposed design for the Los Angeles Galaxy MySpace profile that was to go live in time for the David Beckham press conference. With important time constraints on the project and a complete brand redesign ready to be implemented it was an exciting time to be working with such a prestigious company.

The profile is live and I hope demonstrates what can be done with MySpace and a great brief. Take a look here Official LA Galaxy MySpace Profile.

Eye Tracking Heatmaps

Posted on: May 9th, 2006 by Ben Bishop No Comments

Etra, the usability and accessibility experts, are currently publishing their eye tracking heat maps for some very well known UK sites. Eye tracking is a system involving cameras following eye movement of users browsing websites. These sorts of tests are useful for indicating user trends on your websites literally recording what users look at and crucially what they miss. Eye tracking results are displayed as a heat map indicating the areas covered on a scale from light green to bright red being the strongest focus.

So far they have used Curry’s and Dixon’s websites as a comparison of sites with similar purposes. Interestingly the retailers are both part of the same group, aiming at the same market yet they have achieved quite different results. It would appear while both are offering competitive deals the structure of the Curry’s website with the ‘Top 10’ column along the left hand side would appear to draw the most focus. While advertising the best sellers and drawing viewers attention to them, it appears to be at the detriment to the rest of the site. Meanwhile Dixon’s heatmap displays a less concentrated viewing, while still attracting viewers more evenly across the rest of the page.

This technique can be invaluable to e-commerce sites in particular in gauging how successful a sites design is, but extensive testing has drawn results that can be applied to all websites. Jacob Nielsen‘s, the highly regarded usability expert, has drawn conclusions from extensive testing using eye tracking, that users habits when browsing bear a resemblance to the letter F.

“Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Users appear to read first across the header part of a site, traditionally the logo and navigational areas of sites. Next the move down and horizontally again followed by vertically down the left hand side of the page.

This implementation of these trends should really be considered when developing websites. Maximising the design of your next site considering these critical areas could be the difference between making a success of your web presence and losing your reader to another site that’s only a click away.