There are some amazing replacement iTunes 10 icons on Dribbble following the backlash against the new icon unveiling.

What does this mean?

• The general look and feel has come to feel quite clunky and over simple, I’d like to make it a bit more delicate and thought out, but still retain the same general feel
• I’m not counting on using my site to find freelance work via cold enquiries, so less of a ‘salesy’ tone to the copy
• I’m not posting to my blog as often as I could be, due to some decisions made in the last design. I’d like to go much more down the Tumblr route and make the blog less about articles and more about bookmarking and sharing.
• I’m using Twitter more and more so I’ll put that as a higher priority on the site
• If I can, I’ll do it all on one page.

I’ll do my best to post my progress as I go, as I did with this version.

Sources & Essential Reading:

• http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
• http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography
• http://www.adobe.com/education/pdf/type_primer.pdf
• http://www.webtypography.net/toc/
• http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
• http://www.alistapart.com/articles/on-web-typography/
• http://www.alistapart.com/articles/settingtypeontheweb/
• http://www.smashingmagazine.com/2008/08/11/top-ten-web-typography-sins/
• http://24ways.org/2006/compose-to-a-vertical-rhythm

Line-length (Measure)

A general good rule of thumb is 2–3 alphabets in length, or 52–78 characters (including spaces). A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line.

Why? Long lines of text require longer periods of attention before the eye moves lines, short lines of text require moving lines too often, which can break rhythm, an optimum measure means creating a comfortable balance.

Line-height (Leading)

Optimum line-height is 1.5 x text size (1.5em), this should be lowered for large headings (1.2-1.4em).

Why? Too much leading causes the eye to jump from line to line and can be disruptive to reading, too little leading creates a dense ‘typographic color’ which looks less appealing, and can create the illusion of ‘more’ text.

Measure and leading are related, when increasing your measure, ensure you adjust your leading, longer measure requires greater leading and vice-versa. These rules can change depending on choice of font, for example, a font with a larger x-height (literally the height of the x character) such as Verdana, may require more leading.

Letter-spacing

In most cases letter spacing should remain default, as fonts are designed to work best at this setting, in special cases, such as all uppercase or small caps increase letter-spacing by a small amount (~1px).

Why? Uppercase characters are tighter and will require extra spacing to improve readability.

Vertical Rhythm

Ensure that the spacing between elements is equal to, or multiples of, your line-height (Measure) e.g.

body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}

Why? The baseline grid is the skeleton of your typographic layout and provides consistency. Conforming to your baseline ensure flow and improves readability. A continuous rhythm in the vertical space keeps all the text on a consistent grid so that proportion and balance are retained throughout the page, no matter the type size, leading or measure.

Hanging Punctuation

Quotation marks and bullets should always be set ‘outside’ in the gutter outside of your body text, so that the text remains consistently aligned.

Why? Maintaining left alignment means that the text is scannable and rhythm is uninterrupted. The eye looks for straight lines everywhere, when type is indented in this way, it maintains the flow of text.

Got any of your own to add? Let me know in the comments.

Saving for a wedding means I’ve been checking my various internet banking accounts quite often, and although yours is one of the better ones, there’s something that’s been bothering me. You see, when I get to your homepage, I have to click through to log-in on a separate page. How about shortening my journey slightly?

Before

HSBC's homepage before

After

HSBC's homepage after

It may not seem like much, but one thing I’ve learnt is when it comes to customer experience is that it’s all in the details. Your customer’s time is valuable and you should make every effort to streamline your processes.

Just a thought

Its a 48 column, 950px wide template with 3, 4, 6 and 8 columns layouts built in. Feel free to download, modify and redistribute to your heart’s content.

950px_grid_layout

Designing in the browser

Ever since reading about designing in the browser in Andy Clarke‘s ‘Walls come tumbling down’ slides I’ve wanted to push Photoshop out of my workflow and jump straight into the browser.

The first thing that strikes me is how fast it allows me to work, going from one paper sketch to a working wireframe prototype within a few hours, and I’m able to see what works very early on in the process, something that doesn’t usually become clear until after Photoshop. Iterations and revisions are much easier, meaning that what would usually be major, structural changes take a fraction of the time and effort to complete.

I know skipping Photoshop isn’t for everyone, but my first experience has been so positive, adding an element of freedom I haven’t had in a long time and I can’t wait to work like this again.

CSS 3

Although we have been dabbling with CSS 3 at work for a while now, I often feel tied down by our commitment to legacy browsers and always have to tread carefully when implementing some more ambitious ideas. I’ve designed the majority of this site with CSS 3 in mind; the letterpress effect on the headings, differing levels of transparency and rounded corners are all pure CSS 3 and although not every browser will get the same visual experience, the progressive enhancement built into CSS 3 (pictured) ensures I don’t spend time making sure that the basics are in place universally.

Progressive enhancement in CSS 3. Left to right: Safari 4, Firefox 3.6, IE8 in Windows 7

IE6 and friends

I decided to forget IE6 during development completely, save for a glance on launch day, just to see what would happen. After all the CSS 3 and reckless behaviour on my part I was expecting to launch IE6 on a test machine and see a complete mess, although surprisingly, apart from two minor bugs (the background of the content areas isn’t showing, and the accommodation entries don’t line up) it’s completely intact. Maybe all those years of coding defensively have hardwired my brain to avoid IE6 bugs.

Still to come

I’ve still got plenty of things I’d like to build into the site later; I’ve got a pretty neat idea for a countdown timer which I will attempt in-between my client work and when we send out our invitations I’m going to implement an AJAX RSVP form.

Overall this has been a really fun personal project that has given me a chance to try out some new things and work in a way I’ve never worked before, I’m really happy with the final result and would love to hear what you think, so love it or hate it, drop me a comment.

Research is a diverse activity and can range from reading industry blogs and magazines and interviewing clients to looking at the competition and the wider industry. It can be used to predict customer needs, support or inform your decision making and as a catalyst for change.

Research is not wasted time, and past research should always be kept handy. You never know when you’re going to encounter the same problem again, or find another use for some prototype code or wireframe. Having a good repository of research means you have something to refer back to, although managing this research repository can be large task in itself, there are plenty of tools around around to help.

We should not be afraid of approaching new challenges or doing things we have never done before, if we use research it can help the unknown become known, it can turn guesses into more concrete, realistic estimates and most of all it can help us broaden our knowledge and experience.

I think too often in the design community we like to jump right into the design stage of a project, relying on inspiration or chance to help us, but taking a moment to research can lead to better decisions, better designs and most importantly better websites.

There are still some things that need my attention until I can relax, including the measure in blog posts (feel a bit short to anyone else?), IE6 testing and finally I need to build the portfolio section (and get rid of the ‘coming soon…’ placeholders). I’m holding off on the latter until I get a few jobs under my belt.

In the meantime please take a look around, feel free to critique and report bugs to your heart’s content