We’ve finally been given the chance to separate away from the .NET skins file and build on MVC which allows me – as the front-end developer, to work and build nicely semantic code.  In the past we had to carefully dodge and tip toe around controllers, fearful of our jQuery not working.  But now… awesomeness prevails.  I’m able to separate my global styles from my process styles.  So what does this really mean?

Well, we now have site wide elements (H1,H2,H3,paragraphs, list elements and more), we have site wide classes which can have minor and useful aids for developers who are not native to the DOM in this manner (.hide, .relative, .float-r, .sliding-doors-button, .corners, .blue – etc).  While you may think some of these usages are extreme, they really useful for enabling a developer to learn through the DOM if an object is floating or positioned absolute.

Also having the global stylesheet away from the process/area specific stylesheet means that the code reviews can enable us to share our knowledge with one another on whether something should go into the global stylesheet.

I just wanted to share one last bit… we had a discussion around this about our elements now being in caps in the stylesheet.  While some purists may argue that it confuses the lowercase standard in the document, in the stylesheet this aids the speed of which you can read it.

DIV#container.corners.red.one-third

rather than:

div#container.corners.red.one-third

…A minor thing, but something I’m growing to love.  It’s the same goes with indenting HTML and seperating out your CSS codes.  When you become good enough, it shouldn’t matter that you break some rules if they aid you in different ways.

That’s it for now!

Then, having read a 24Ways Article by Meagan Fisher who insisted that Photoshop was evil and you can build your site fully in markup… I gave it a go and the current blog (not in the image below) was the output.

I’m not saying she was totally wrong… I’m just saying she’s either really gifted not to need the use of pencil + paper to write down her ideas super quickly.  It’s sadly not a gift I acquired.

Sure, if you’ve got a nice basis to work from which is really clean and concise then why not design in your markup.  However, I’ve found that my markup is best to ask Information hierarchy questions while the visual and graphic design side best done on paper or Photoshop.  How do you build a site?  Do you use just paper prototypes, mockingbird, photoshop or go straight into the final output using markup and CSS?  Should it be different for personal projects…?

What I did get out of Meagan’s post, was a really awesome app called Slammer – which enables you to use grids with suggestions such as the Fibancee sequance, the golden rule, uniformed grid and a few others.  Extremely useful and inspiring!  Go give it a try.

Speaking of which, it’s been fantastic to finally get back into the flow of using the Pho of GUI editing suites.  Having a break from it for a while was useful… but now I really feel like I’m back to full speed, adding in shortcut keys for all those annoying and monotonous clicks.  Oh it’s great to feel like an action per minute ninja.

Right.  Enough!

The build involved photography, jQuery, PHP, HTML, CSS, Google Analytics on top of a install WordPress in rather short turn over time during the Christmas break.  I got the chance to work alongside acclaimed ‘SheSays Golden Stiletto Winner‘ award winning copywriter, Yasmin Quemard of Iris, Dare and AKQA fame.

Suki has still been working hard on those pine leaves that my little Christmas tree left as a parting gift.  They are pine leaves right?

To cap off a great week, I thought I’d just share my thoughts on a book designers should pick up if they haven’t already.  It’s an oldish book, but still a brilliant one by New York based Ellen Lupton of Pentagram who I’ve just started following on Twitter.  I’m lucky to have had the chance in the past to meet one of the co-founders/partners of Pentagram and have the chance to discuss the JustGiving brand with them, so I know just how they cherish graphic design like no other agency.

One of the best parts of the book is how it shares creativity with the reader.  Explaining how to break the mold while working within it, as well as pointing out type crime (user experience problems with typography). Which has fascinated me since my time at PartyGaming, when our Creative director strongly pushed for people to avoid using center aligning of content willy nilly (see below for comic sans, poor grammar, typos and awful center aligned example).

Center aligning text is a technique that people apply all too easily, my rule of thumb was if it’s over three words… don’t even think of centering it. Yet, Ellen goes on to say that if used correctly it can “create a formal and classical, bearing rich associations with history and tradition. It invites the designer to break a text for sense and create an organic shape in response to the flow of content.”  Which explains just why French menus use it and apply it so well.  Some of the time… Below you can see an example of great center aligning that falls into the category of having a history and tradition from the use of the crest and the rich colours.

Center alignment in 'Orientierungsplan - Demokratisches Berlin. DDR Hauptstadt. 1964' taken by sludgegulper

She goes on to say how text is important and often in GUI icons get used on their own without text to highlight it’s meaning.  I found this fascinating as the first time I saw this:

It was the most bizzare and random combination of icons I’d ever seen before.  My mind was immersed with numerous colours and different icons and initially it made me think of skull and cross bones on the machine itself.  Yet, if you look away from that green and white monstrosity, and towards the ‘One laptop per child’ site and logo, it’s a totally different story.

Which made me wonder if this was what she was referring to by saying icons alone cannot always work…  The GUI on 1PPC clearly didn’t do Pentagram any justice, yet Ellen’s book and ethos for design really does.

So why should you buy this book, if not because I’ve said so?  Type crime.  Yup, I randomly blurted it out.  The sole reason for you to go out and buy this, is that it explains proof reading and typography no nos without a pointy stick and a waggle of an index finger.

Time and time again, authors write so many things and don’t practice what they preach, yet this book does everything that makes me proud of being a designer.  Ellen.  We salute you.  Okay enough geek talk for me for one night.

If you were to suggest a book to read based on design, typography, layout, inspiration or creativity… what would it be?  My next book of reading is currently Chris Anderson’s – Free, which my wonderful mother purchased for me after reading a Christmas tweet.  Isn’t life awesome?  That was rhetorical in case you were about to answer in the comments box.  What the hell, just reply that life is awesome.

I’m also excited that following up from that is an awesome read my wonderful girlfriend got me when I moved into my flat last year (it’s a huge book okay), by Alan Fletcher – The art of looking sideways.

Fin.

Below is a homepage sketch from Oct. 2008.

Alongside sketching ideas, I often carry out guerrilla user testing sessions with family & friends to learn quickly how people interact with websites, data and information when visualised.

I’m fortunate enough that my colleagues ask of my opinions when user testing in labs and got the chance in March of 2008 to work with the team at Creative Good in America to improve the JustGiving user experience. It was an extremely fascinating to learn cultural differences and ways in which different people work. One great example is how users call charities, ‘Non-profit Organisations’ (obviously with a Z rather than an S) rather than the term charity.

Another example of some of my designs were with giving different types of users the perspective of time remaining. An option that JustGiving pulled out of, yet rival organisation Virgin Money Giving have used.

I’ve also been part of the team to improve user experience from more than just a functional level, but on an emotional and compassionate level.

And then there’s much more kept in my moleskin notepads. Often these ideas get pitched internally and externally to different business members. Sometimes being implemented or put on hold for other projects.

Thanks to the wonderful world of Advertising that I’ve been imersed in since getting into the US hit TV show, ‘Mad Men‘ – I’ve started to think about how I’ll be reinventing myself. It’s a wonderful show and it’s drama and dark characters really have me addicted. Yet it’s not been enough to keep me away from the somber light of my beautiful little Mac.

Yes, it’s time to blog again. 2010 will be the year I get back into this and I promise to bring far better posts than I have before. Kicking off with a bang… perhaps a bit late, but better late than never is my investigation into the world that is HTML5. I’ve been hesitatant in the past to use it for my own site, but if you were to inspect a few elements you’ll notice the markup uses bizzare new HTML such as Header, Footer, Aside and more.

It’s a truely new experience to be without intellisense for HTML5, but I’m sure Panic’s Coda will have a plug in or some update to fix this soon. You could argue I’ve been foolish to jump and try it… however I’d disagree. I’m using if Internet Explorer php comments to pull in a javascript fix which pretty much any decent Front-end developer is also looking to use. If I were really concerned I’d also ping the site and then offer a local version should the caching of this file not be available, but my Google Analytics says that the majority of my audience uses Firefox, Chrome or Safari. So hah, I will have my cake (if I’m on my own personal domain) and eat it!

HTML5 will certainly improve semantics and make people think more about what they’re doing with their mark up. However, I wonder whether the NAV element should be like a UL or OL (un-ordered or ordered list) and contain LI. Most of all I’d really love to see canvas needs to be linked to a vector styled WYSIWYG editor.

My major gripe with using HTML 5 online, is that my Firefox plug in doesn’t support the new elements and the w3c validator (god I hate that word) is kinda lame saying that it’s all fine bar the fact that HTML5 is experimental.

So… will you be trying it out too?

• Tidied up the JavaScript on the page with jsLint.  Applied arrays rather than repeatedly changing a var on the fly

• Forced a width on the content ready for fluid layout on the upcoming right hand side navigation

• Added google analytics

• Tidied up my folder structure and moved my install from the subdomain.

• Removed my own if thisPage and used wordpress’s own implementation of this.

• Added chatcatcher.

• Tidied up a bit of the copy.

• Set up the 404 and initialised some basic suggestive redirects for the user to click.

• And that’s pretty much it.  In my next post I’ll talk about how I’ve applied the css. And how I’m striving to create an object orientated site around it.

I’ve still more to go as well as update more portfolio section.  I’m going to be looking at improving the microformats,  the design, more features (tag cloud, categories and more).

White space on the homepage – I didn’t really like the homepage at first… especially when viewing it on Windows.  However I’ve given it a bit more space and I’ll continue to play and invoke a little bit more emotion and dynamic information here, whilst keeping it neat and simple.

Dark black ink featured on the top right of each page) took lots of the inspiration from various comics and visits to the V&A.   I really love Japanese style and so I’ve attempted to use similar simple design with really strikingly sharp edges or elegant curves.

Ideally the implementation for this would have used percentages so that as your resolution increased, you saw more of the image hidden in the distance.  Similar to Vimeo.

However if you look at the vimeo site and resize the width, you’ll notice all these elements are in the background… however this wouldn’t quite work with the red borders and my black ink.  So instead, I’ve compromised on this for the time being so that what you see is constant regardless of the width of your browser, but the element can sit on top of others.

Patterns on pages with posts – Currently the single pages work great.  However the repetition of the speech bubbles starts to become too predictable and looses what makes it so memorable (see fig. 3).  However if you see the user comments (in fig. 2), it works a little bit better but loses some of that unique personality the huge borders and sharp cut off speech bubble created.

I’m going to be looking at a few other methods to combine what makes each of these work from the above (no literally!) so that posts have a decent pattern to go by which isn’t so extremely different.

Which brings me on to a final point: theft… or innovation/inspiration.  A few days after uploading the site and getting it out.  One of my colleagues pointed out that it reminded him of the HSBC adverts he’d seen.  My imediate reaction was one of shock.  Great, first EA Sports and now a bloody bank.  Whatever next?

Yet it was really useful to see their adverts going down some similar design solutions to my own and in some cases (see left: Marilyn Monroe advert ) ones that I am keen to… *ahem* learn from.

Yet, there’s still more design improvements to come than the above, yet I am pretty chuffed with the kind comments about the site given the amount of time I’ve spent on it.

The follow up to this post will cover what in simple terms went into the building this site.  From concepts to UX wire-framing to the implementation.  If only it was all that simple!  But I’ll try make it sound it in the next post.

Aiding the design team with UX solutions, graphic designs and UI patterns for the GivingGroup (UK and USA). Moving towards rapid prototyping and learning to develop great user experiences.

Working the the development team on simplifying the site’s front-end using object orientated CSS and working in ASP.NET MVC.

During conferences, I tend to findnotes through sketching is a great way to listen to speakers.  I’m not alone believing this method has a place in the work place, as others also find this technique very useful for keeping focus.

One of my hobbies at university was to use my wacom tablet to draw and render 2d illustrations. More of these can be found on my flickr site.