I refrained from commenting at 12:01am this morning at risk of sounding like a total cock, but I am so pleased to see that someone has actually done this! I had an idea like this last year, but never did anything further to a few layout ratio experiments and color palettes based on different scales/relationships.

So pleasing to see someone writing about it! So, where’s the book?

Wonderful article.

Just noticed that you’re a Multipack man, I’ll have to buy you a pint next time I’m around! It will a cocktail based on harmonic minor..

Beautiful job, Owen.

While I appreciate the connections you draw between ratios and scale tones, you give the impression that the ratios are informed by the tones, when in fact it is the reverse: the tones are where they are because of the ratios involved, ratios that make up the harmonic series. The harmonic series can be found in any study of waves, not just musical acoustics – and there’s nothing difficult about it, it’s simply a description of all ratios that cause resonance.

So, fundamentally what’s more important is the application of harmonic ratios: both music and design can be informed by them. What I find less useful is trying to apply musical terminology to design.

Great food for thought, though, and I liked your discussion about binding content to device aspect ratio.

Very nice article.

I’m interested in this question of spatial relationships and proportions, and the possibility of conveying ideas and feelings through the arrangement of visual elements.

There’s a book by Keith Critchlow called Islamic Patterns that I found to be an interesting read. He describes the geometric understructures of works such as can be found in the Alhambra in Spain. The surfaces upon which the many tiled patterns are constructed are flat, curved, and/or domed. But, even here we have some set boundaries.

When the boundaries are no longer set (as in the case of the Web) then it sounds like it would be a good idea to design from the inside out. This way at least some internal relationships can be established.

The difficulty that I find is that with almost all of the current responsive sites even these carefully composed internal relationships are subject to getting automatically rearranged whenever the site visitor resizes his or her browser window.

I feel that this kind of rearrangement, in turn, destabilizes the integrity (and with that the idea/feeling) of the original composition.

The other approach seems to be to set the website up using a fixed layout, and to then do several different compositions for different screen sizes. However, the latest trends seem do really discourage fixed layouts. I’m not sure why.

Can anyone shed some light on how I might be able find a way out of this dilemma?

Thanks.

WOW!

A lot to take in, but this is a fantastic post. I’m really iterested in the rhythm of a site, I think it’s hugely important for ease of use and allowing people to ‘flow’ through a site.

Fascinating… I’m a musician and a web developer, and I never before considered how strong the ties between the two activities can be.

When you start considering layout in terms of intervals, it becomes, I think, much clearer that certain intervals should be used sparingly, and for specific effects: few people enjoy listing to hours and hours of diminished fifths! Nevertheless, when used appropriately, they can elevate and highlight what’s around them.

I wonder whether further analogies could be drawn with regards to form and content: should we actively be adopting specific forms (rondo, sonata, etc.) when we’re writing the copy and designing the site, so that we know to reintroduce themes and motifs, and thus keep the user engaged and focussed? This is perhaps more relevant to the design than to the copy itself — writing well is, after all, an art in and of itself.

You could get really carried away, and start viewing a website or webapp as a larger work, like an opera, which, whilst being composed of many different pieces, performed by many people, remains a single whole throughout: the librettist and composer work together to produce the work. Perhaps I’m starting to stretch the analogy a bit too thin, though. :)

Wow. I’ve read this once and I’ll need to read it again when I’m more awake to fully grasp the amazings, but wow.

Some of the best ideas seem so simple and yet perfect in hindsight. Perhaps this is one of them. I’ll certainly be giving it a try. I wonder if one were to use the intervals of a seventh chord, you’d get a page layout that feels a bit jazzy…

Will definitely need to re-digest this a few times to get it all in, but the concept is absolutely f’ing brilliant.

Amazing, a fantastic article that like other commenter’s I will have to re-read to properly digest and really look forward in doing so.
Think of designers/developers I know that have moved from a ‘music background’ to web design aids the connection.
I myself (probably like many others) “used to be in a band at college”. I think that creative, rhythmic spark definitely carries over.

Again, another great post this year. So far that’s 9 out of 9 :D

That was inspiring! I have just started to learn the piano and music theory and find it incredibly exciting to think that I can use that to better my own design.

I am truly inspired to go back to an old project and see if this can help improve the design. As well as trying these ratios in future projects. Might have to make a cheat sheet though!

Each year there seems to be 1 post on 24Ways that eclipses the others….

I think this could well be that post!

I’m waiting for the 1st Musical Harmony CSS framework which is bound to be released after this :-)

Paul: I’m glad you like it. Musical rhythm, tempo and pacing are certainly things I think can inform design, particularly interaction design, as users move through forms or a process, like payment or signup.

Barry: It is a fascinating subject. It’s difficult to know what intervals will work, but I’m sure they can be used for effect as well as underlying a design as a whole. Musical form would involve much more complex thinking to apply to web design, I believe. What does a sonata look like?

Ben: You’re not alone in thinking the article will require re-reading – its length alone might make that necessary! Jazz could offer some interesting ideas to explore, beyond blues-based chords, such as the notion of improvisation.

Scott: Very happy that you enjoyed it.

Stuart: You’re right.

Tom: Hope the project revisit goes well. As for cheat sheets, you won’t believe the number of times I have to refer back to those tables!

Dave: Many thanks. I look forward to seeing anyone take these ideas and develop them in ways that can benefit more of us. I feel that I’ve just scratched the surface in this article.

Original approach and inspiring article!

Great to see these thoughts in article form, Owen!

For more of Owen on a similar theme, this video from Multipack Presents is worth your time.

Wow! web + music + responsive design… Never thought I would see something like this. Great post.

Very good article, much information and so I’ll have to reread to better digest all.
Thanks!

Theo: Thank you.

Matt: Oh, you had to link to that! ;) It’s taken since then (February 2011) to bring some coherence to my ideas.

Tim: Thank you. Your work was certainly an inspiration.

Of course, you might be wrong.

What a refreshing addition to the 24Ways library! Design and music are so interwoven in our daily lives that it’s great to see an attempt to more formally unite the two. After an initial reading, I am not sure that I understand everything Owen wrote, but I certainly plan to re-read and study this post over the weekend.

I’m very pleased to see that the editors of 24Ways have published such an out of the main stream post. Well done!

Now, if I could only learn to plan an instrument …

Beautiful article.

Wonderful. You could go even further — how about cadences between different layout ratios? Ratios of colour?

Thanks for changing the way I think a little bit.

TL;DR? To that I say Just the Beginning; Must Read.

Brilliant. There are so many areas to explore based on this beginning, I wish I could take a few months off for unfettered experiments.

Collectively I hope we’ll do that. I’m very excited to see where our creative community takes this.

This is fantastic and fascinating. Like many have said, I will spend some time re-reading this and experiment with the ideas.

There’s just one thing I take exception to

“And what would Christmas be without music?”

A whole lot more bearable?

Tom: Of course. Care to say which parts of the article you mean? Whether the harmony of a particular combination of ratios translates from musical to visual is speculative on my part; I don’t make any definitive claims of that sort. It’s really just an approach that might help fulfil the third tenet of Boulton’s new canon, binding the content to a particular web device.

Phil: Thanks, but cocktails don’t appeal. A pint of London Porter will do just fine ;)

Liam: I’d be very pleased if you thought the article worthy of a second read. It’s long, and some of the details will be new to web people. I felt obliged to explain at some length so that readers would understand what I’m getting at.

Katie: You’re very kind.

Barnaby: Absolutely. There’s huge potential in the exploration of connections between music and design. Cadences are a great idea, either in the movement from one part of a page to another, or from page to page.

David: Glad you liked it.

Ron: I’d be very interested to see if the web community can use anything of what I’ve touched on and show whether any of it can stand up to scrutiny.

Tom: Come on, now. Christmas without music? No carols? No cheesy hits?

Stephen: That’s an insightful point. Could you direct us to any online resources about the harmonic series and where it’s found and used? My background is in music, rather than science, so that’s how I approached them. That’s why I’ve used musical terminology, though I believe music has a lot more than harmony to offer web design. I agree that it’s the application of the harmonic ratios that counts.

Thanks. Fascinating, and got better as it went along, moving from the more philosophical to the more concrete.

It may have been somewhat tongue-in-cheek, but I’m LOVING the suggestion of a Musical Harmony CSS framework (per Dave, above).

There’s also no reason a page built in one key couldn’t use jQuery to modulate to another… <rushes off to start building something>

Great article.

Anyway, this is ust a newbie’s simple question: what does R in rem actually stand for: relative (as you suggest) or root (as jonathan snook points out in his web http://snook.ca/archives/html_and_css/font-size-with-rem).

Thank you..

Thank you for reaching into my brainspace, grabbing my mindfruits, and making beautiful jam and marmalade with them; this excites me to no end and there is so much more to discover here!

Think about it: What Website Would Beethoven Build?
There could be a whole new way to talk about web design—that website is positively Schoenbergian!

LΦVE FREE OR DIE!

Outside the box thinking like this is what causes innovation. Kudos on a well written piece that sparks imagination and new ideas :)