What I did with my summer

 code  Comments Off on What I did with my summer
Oct 042011

University tomorrow. Yikes. Here’s what I’ve done with my summer.

Responsive design

I’ve finally got the hang of this, and it’s completely changed the way I think about web design. It’s pretty straight forward. Start with one of the extremes. If your project’s mobile focused start with hand-held devices; if it’s desktop focused start with a standard or widescreen monitor. Build your website, and then scale it up or down as you come across your breakpoints. Add some media queries, and do it again. You might need lots of media queries, or you might only need one or two. Continue reading »

The trick navigation of Mark Boulton

 code, Shoulders of giants  Comments Off on The trick navigation of Mark Boulton
Apr 042011

I was reading an article on Mark Boulton’s website, the first time I’ve visited it since the redesign. The article, A Richer Canvas, was interesting but that’s not what this blog post is about.

The website is very minimal, with typography the focus. The navigation is in a sidebar on the right and just simple, grey text. Until you mouse over the sidebar. When you do, all the links turn from grey to green. It’s a really effective technique and quite eye-catching. It’s simple, but elegant, and not something I’ve seen before.

Now all I need to do is work out how he did it and then steal the idea.

*** Update ***

I gave it a go, and it’s very easy. Took me 15 minutes to find out how he did it and then code my own (very rough) example: Trick navigation example.

All you need to do is apply a hover pseudo-class to a div, and target each anchor within that div (see code in comment below). That way the anchor changes when you hover over the div, not the anchor. Use some CSS3 transitions to add a little easing and that’s it.

Vitruvian analysis of cognate / non-cognate websites

 code, Coursework, music, Thesis Project, Uncategorized, Web Design  Comments Off on Vitruvian analysis of cognate / non-cognate websites
Feb 232011

The sites I am looking at are:

  • nin.com –  the Nine Inch Nails industrial rock band website and brainchild of founder, Trent Reznor
  • indabamusic.com  – a cloud music collaboration service and social network
  • Subtraction.com – a blog run by a New York designer

Continue reading »

Baseline grid

 code  Comments Off on Baseline grid
Oct 232010

A few of us were having a discussion about using a baseline grid during the break on Wednesday afternoon, and I said I’d post a link to an example with the grid showing. So, here it is:


It’s based on Richard Rutter’s article Compose to a Vertical Rhythm which was published on 24 Ways several years ago. Continue reading »

Week 2 Coursework

 code, Coursework, Design, Web Design, xhtml  Comments Off on Week 2 Coursework
Oct 102010

The web version of my design object blog is up for any one who wants to check out the code.

It’s not pretty, but it does what it’s supposed to do.

The design looks a little odd at the moment, but will begin to make sense once the styling is in place. The idea is that the page links will be a left hand column, the heading and it’s subheading will form a header bar. The page content then sits in the main column. The header bar also serves as a home page link.

The advantage of this design is scalability – should I want to continue to add pages to the site, the list becomes longer, but each new page remains the same in design terms.