Design Sheffield | Graphic Design Blog

A media query too far: Smashing Magazine

admin — Sun, 12 Feb 2012 14:24:11 +0000

It looks like Smashing Magazine has gone a bit mad with the media queries with their recent web re-design. I’m all for responsive, adaptive websites but this is a step too far.

The full screen layout works well, but the right-hand advertising feels like it dominates the site.

As the browser windows gets thinner, the menu layout changes…

Another menu layout comes into play when we go thinner still and those ads are still taking the limelight away from the content.

As we get into tablet/smart phone territory we lose the ads and are given another menu layout. This ad-less version would be my preferred layout if it wasn’t for the unnecessarily huge search bar.

Thinner still and the menu setup changes again, taking up way too much real estate.

The final version of the site has a far better navigation setup, which would work on the previous layout.

There will be some justification for the amount of layouts, but there are far too many variations for my liking. Smashing Magazine is one of my “go-to” websites but it feels like they’ve tried a bit too hard here.

Windows Store UX Design

admin — Mon, 23 Jan 2012 22:25:35 +0000

Unlike the majority of Mac lovin’ designers out there, I don’t have a problem with Windows. The thing is, Microsoft just isn’t as cool and as slick as Apple in terms of operating systems. The smooth OS X has always had the edge over the disjointed Windows in terms of UX design.

However with the introduction Windows’ Metro style “design language”, Microsoft are fighting back and looking at the Windows Store it could have the edge on it’s fruity counterpart for the first time in a long time. I think it looks rather nice.

The flat, blocky layout of Metro is a great change of direction for the Windows platform after years of trying to copy, but not copy, Mac OS X. It certainly serves a worthy competitor to the over-confident, glossy sheen of the App Store.

It all depends whether the new look Windows OS works as good as it looks.

What do you think? Tweet me your opinions to @designsheffield

New year, new you: AA gets a facelift

admin — Fri, 20 Jan 2012 22:11:11 +0000

2012 is here and so is the latest version of my portfolio site. The previous version was always going to be a stop-gap and it was online for far longer than I imagined, the iPad/iPhone splash image has become very cliched and very tired.

The newly updated site is a more rounded and complete WordPress theme that is geared toward content management and showcasing my portfolio pieces rather than blogging.

Check it out people: www.abbasarezoo.co.uk

How to re-brand your global company

admin — Mon, 12 Dec 2011 22:49:03 +0000

Moving Brands consistently produce amazing work for huge, global clients. MB’s re-branding of HP, the world’s leading PC manufacturer, cements their reputation as one of the top branding agencies of our time.

The reaction to the work on Twitter has had people in the trade showing their love for the direction MB have taken. However, I don’t think those outside of the of the design industry will be too blown away with the new look. It may be a little too clever and the move to ultimate simplicity in 2021 is way too far – the potential 2011 upgrade is abstract enough as it is.

All minor criticisms aside, the application of the new brand across what seem like infinite platforms is very impressive.

Head over to Moving Brands for the full, in-depth process. I’ll look forward to see the new brand is fully implemented.

Update:

It seems that the huge interest in this project as alerted the legal bods at HP who have moved quickly to confirm this re-brand will not be implemented. The case study has currently been removed from the Moving Brands website.

All images are taken from the Moving Brands website.

Official Charts Company branding

admin — Sun, 20 Nov 2011 14:10:39 +0000

The Official Charts Company have officially got a great re-brand courtesy of Give Up Art.

The number 1 created from the overlapping arrows is a real touch of intuitive class.

AmassBlog: Alternative Design Inspiration

admin — Mon, 07 Nov 2011 21:49:33 +0000

Although it doesn’t get updated very often, AMASSBLOG, put together by James Phillips Williams, is a great collection of anything and everything.

I wish I could write like this.

Circles are the best.

I highly recommend bookmarking this site and trawling through the archives. You’ll find some real design treasures and a bucket load of alternative inspiration. amassblog.com

Tips for using MailChimp and building HTML emails

admin — Fri, 28 Oct 2011 17:38:25 +0000

Building, testing and sending HTML emails can be an absolute nightmare, there’s no doubt about it. Salvation can be found and if you’re using MailChimp it’s even easier. Here’s a few tips I’ve picked up for HTML email success, some apply even if you’re not using MailChimp. The number one thing you must do is to test, test and test again.

Give all of your tables, cells and images an exact width and height.

If your building an HTML email, you’ll be using tables, so you’ll need a keen eye to make sure they behave themselves. Setting exact dimensions is a thankless task but this way you’ll know none of those pesky email clients such as Hotmail, Gmail and Yahoo! will be able to set their own dimensions and distort your hard work. It makes sense to do the same with the images too – for piece of mind if anything else.

If you’re making the email editable in MailChimp, use
tags, but only within cells

After taking a detailed look at MailChimp’s templates I noticed they use

tags throughout and style them using embedded CSS in the rather than using inline styles. MailChimp will do hard graft and convert your lovely embedded CSS into dirty inline styles for you, similar to Premailer. This is ideal if you’re going to be dropping MailChimp’s editing tags into your code to make it easy for your clients to edit them. However, you will still need to lay your email out using tables, but you can drop

tags into table cells, it works, i’ve tested it.

Use display:block for all of your images

If you’re using MailChimp, you can set a base style for all of your tags in the within your embedded CSS rather than setting inline styles, otherwise you need to locate all of your images and set each inline style individually. There is an white spacing issue in Firefox and modern versions of Internet Explorer that ruins all designs that rely on embedded images. Adding display:block solves this issue and keeps your email looking how it should across all browsers. That saying, keeping your use of images to a minimum is good practice.

Style your fonts cell by cell

It makes sense to set an inline font style for the whole table, but I came across an issue in Microsoft Entourage on the Mac where it ignores the ‘master’ table font style. Styling each table cell that contains text will solve this issue. This also applies using MailChimp as any font style in your embedded CSS is ignored also.

Don’t assume

If the code previews perfect within a browser such as Firefox or Chrome do not assume this will be the case when you come to emailing it out. Avoid any issues by sending a test email out to some of the more popular email clients such as Hotmail, Gmail and Yahoo! – and if you know anybody who uses Outlook and Entourage send one to them too. Litmus is available within MailChimp and is free to monthly subscribers.

Finally, download MailChimp’s templates and learn from the experts

It makes a lot of sense to download MailChimp’s own email templates and study their code, that’s what I did. You can extract handy snippets of code that work without the need for MailChimp in some cases. You can simply bolt them onto your own email . Learn from the best. You can get MailChimp’s templates here.

If you have any more tips please tweet them to me @DesignSheffield.

Bookmarked

admin — Mon, 17 Oct 2011 20:23:17 +0000

Here’s a few interesting blog posts and websites I’ve been checking out recently…

How to wear a lab coat… for those of you who fancy yourselves as mad scientists. Brought to you by @gray.

Some quality, albeit very designer friendly, work from Colorado based design studio, Berger & Föhr.

I scored a very lame 82/100 on Kern Type, the kerning game. I should’ve done a lot better. You can do a lot better.

Carlsberg don’t do very nice lager, but they do very good commercials.

And finally, for you budding designers out there, a great post on what employers look for over on David Airey’s blog. I don’t agree with everything in this piece but some great points nonetheless.

Summer Camp

admin — Wed, 05 Oct 2011 19:19:43 +0000

6 Music champs Summer Camp have a new album coming out soon. To celebrate, I’ve put together a compilation of the few music videos they have released so far.

You’ll notice an ever so slight retro theme. You can follow Summer Camp on Twitter by clicking HERE – and tell them I sent you.

Illegal Burger Branding

admin — Sun, 25 Sep 2011 12:40:26 +0000

I’d much rather go to Oslo’s “newest and finest burger joint” than McDonald’s any day. If only to make off with some of the packaging… after I’ve paid for it… obviously. Branding by The Metric System, illustrations by Frode Skaren.