Richard Jones

Carsonified’s designer Mike Kus talked about the importance of graphic design in websites. It seems obvious, and the best thing I took away from the talk was to keep trying to break conventions and not just copy other websites. It’s something I unfortunately do when I have to quickly get inspiration - head straight for a CSS gallery site. I need to stop doing this, I need to embrace design from other things in life, from beer coasters to building architecture. Hopefully this might become apparent in my blog design…when I get around to it.

He also showed a video of him preparing his talk slides. Very cool and excellent soundtrack. Will try and get hold of it.

Mark Boulton - the Typography King - gave a good talk as always. He pretty much outlined the importance of typography on the web and how it is our responsibility as designers to be aware of this importance and to choose our fonts wisely.

One of the ways he illustrated typography’s importance was by stripping the images out of Flickr and youtube and taking the colours out leaving us with a black and white box wireframe. By doing this obviously makes the text on the page stand out more on the page and makes it easier to see the hierarchical structure of the type design.

Whilst this is something I am acutely aware of it is still something I am learning. I am able to implement the important hierarchical design and allow easy eye scanning of headings in level of importance, but my font face choice still needs a bit of work. I think it’s because I’m a bit of a perfectionist…I’m never happy until I know it’s the best and I’ll often never be able to test all the possibilities.

Restrict Choice

I wonder whether one of the reasons why I have not mastered this aspect of design yet is because of Mark’s final points. He said that there is perhaps too much choice when it comes to choosing your web fonts.

Now hang on…hear me out. I have always wanted the @font-face feature in CSS to get moving and be decided on and implemented by web browsers. However, imagine the websites that would appear if inexperienced designers got their hands on this. The ability to use any font ever created on a web page would not be a good thing. Some fonts aren’t designed for use in websites, they are primarily designed for use in print. And some fonts are just damn ugly, but that wouldn’t stop ill-informed people using them.

The @font-face feature would also open up choice to a ridiculous level. I haven’t got time to test all the different versions of Helvetica now available to me to impose on my users. So this near infinite choice of type faces probably wouldn’t be a good thing for my web typography mastering.

Mark divulged some good stories to describe the choice dilemma. One of them was the jam seller who had around 40 types of jam on his stall. He didn’t sell many. Potential purchasers were overwhelmed by the choice and couldn’t make their mind up. When the seller reduced his variety to 6, sales went up 10 fold.

So maybe we need to do that with web fonts. Start with a select number of fonts for headings, then by choosing one out of this small selection, the body text font and other design decisions would be decided automatically due to tried and tested successful past choices.

It is perhaps a bit strict, but I think I am going to look for a set number of typeface combinations and just go with them for a while and see how I get on.

Bad typographical choices

Mark also threw in some bad typo choices that are always fun. The old Comic Sans font used on a police poster. Genius! He also said he had started a campaign in defence of Comic Sans. It didn’t go down too well with designers, but I have to agree with him. He says that Comic Sans is not a bad font (it’s used well in the wireframing app, Balsamiq), it’s just been used out of context so many times that people think it’s a horrible font. However, I recently photoshopped some comic speech bubbles onto a photo and chose Comic Sans as the typeface. And it looked good. It was used in the right context.

Another point he made was that Times New Roman isn’t actually a web safe font. Because it looks crap on web pages. It is a serif font designed for print, but is shipped with Microsoft’s Windows and used as the default font on Office Word 2000. So just because loads of people have it and it will render if called in a website, doesn’t mean it’s web-safe. At small sizes it starts to break down because it’s serif hooks are thin and delicate and don’t bleed out on a screen as it does on paper.

So use Georgia instead. Perhaps a bit cliched these days but it is a font that was designed for the web first, thus given fatter hooks and curls. Oh and Mark doesn’t like sIFR.

Anyway, I’ll hopefully update you with my web typeface combinations when I have…erm…chosen them.

Just check this out.

Brett Welch from GoodBarry talked about the state of web design at the moment, how some “designers” are cheapening the art and why we should follow their path.

I hadn’t heard of 99designs before and it isn’t a good thing. Designers pitch and pimp their services out in bids to a brief in attempt to win the work. The client then chooses who they want to do the work. A stat that was mentioned is that the average price of getting paid for work this way is about $2. Yikes! Perhaps I could prepare a blank canvas for that price.

Anyway, Brett is basically saying not to cheapen the web design profession in this way, not treat design as a commodity and to show and prove your worth when trying to win work and when working with clients. We need a clear strategy when approaching work and need to show that we are experts.

The Strategy

1. Find out about their Business
2. Understand why they want to go online
3. Talk Strategy
4. Set business Targets
5. Action

Doing this will help you produce more effective websites, with less client conflicts. This will lead to repeat business which in turn returns higher profits.

I love Dan Cederholm’s designs and have been influenced by them quite a lot (small, capitalised, extended letter spacing anyone?). However, due to my lack of creative output recently, I’ve realised I haven’t been keeping up to date with SimpleBits work. Or news. So I was surprised their was another member of the team. Anyway Meagan Fisher is her name and she covered a few points in her Designing Effective Mobile Interface talk.

There are three types of mobile interface that you must choose from for your site.

Naked.

Simply your site with no styles. Mmmmmm…raw HTML. This is how some older mobiles will view a website anyway as it strips out all styles automatically. So no cheating with poorly structured headings or the developer favourite method of rendering lists - line breaks. You will be exposed!

The big advantage of doing it this way is it’s easy and quick. The disadvantage is that it can look a bit ugly (unless you are an HTML purest like me) and doesn’t reinforce your brand.

Add some style.

This is pretty much the Naked approach with some small styling of links and headings to continue your brand and remove some of the annoying browser default styles.

The advantage is this is relatively quick and easy to feed the mobile device with specific stylesheet and also add also add your important branding to reassure the user of their location.

The disadvantage, as with the Naked route, is that the content isn’t particularly optimised for the mobile browsing experience, serving up extraneous weight to the page which causes loading delays and frustration. So…

Deck it out.

This is basically creating a separate website optimised for mobile phones. And why not? A mobile phone and your desktop computer are both different in size and screen resolution and most of the time you will be using them in different situations to access different types of content. Therefore the design of your regular website will never really be suited to mobile phone use.

So surely you should develop a different solution for this media? The best answer is yes, however most of the time (at the moment anyway) a mobile interface will be secondary in requirements to a regular website. So do you have enough time, resources and money to produce this separate solution? Possibly not. Therefore route 1 and 2 will usually be chosen.

Whatever interface design you choose, you should alway use the following to improve the user experience:

• Clean, accessible code - This should be done always of course
• Mobilize layout, single column - So much easier to manage than multi-column
• Stay branded - As simple as colouring heading and link colours

After a last minute trip to Argos to pick up an emergency iPhone charging lead (doh!), I arrived after the start of the Future of Web Design, London 2009 to hear some of Jim Coudal (of Coudal Partners) gave the Keynote Address.

He made some interesting points that I picked up on that and one that I can particularly associate with. Briefly, they were:

• The future of web design might be in the past. With browser vendors now starting to go all standards (*cough* IE still crap*) it may soon be possible in the future to design our content before the days of websites. To take more from print design.
• Short attention spans are good - encourage it in your design colleagues. It can help us to find other passions from other media. He then showed us this video which is quite funny.
• One of the reasons why you like design, is when you get that flash of passion and inspiration when solving a design problem or coming up with something cool. That’s the addiction. Nee