Wel, okay. I'm Owen Gregory. Many of you know me here already at the MultiPak. I I grown online cried a bit and I am so pleased.
One of the other things I do aside from web stuff is I'm a musician. I play Ovo ny kor anglais in various orchestras around Birmingham and the Midlands
Dwi'n cael iawn o gefn Crimea o gyda cais wneud y cysylltiadau yma a'i gwneudio Nurungoh.
ADIettwch hour seconds!
Mi'n pob m schematic i fyffyrdd.
Yngyrch deddeignwyd o gyf больше, maethwch yn wneud rwy'r canref y twadun y sig.
Cendergwyd N comprehensive gann!
On wedi allwch denu cuwys?
Fawr, rebach.
Uprhywัr y ddidd
gylched yn anon nh
y ddwylai ni.....
Reim rapefennol i wneud
Gruf Applause
Yn oed y gweddawg, rhai, compareng void ac y ddweud
ac mae'r defnyddio i gyrfa falfi
ynmateb amemi rhoi
ac yn defnyddio eu dae bob draws
i wefaintrineddot ac yn ôl
i gefnogi'r ll Googiam
bod yna efallai wiwr arweinydd
neu yn wonio.
Roedd hyn yn chwarae y cyfnod i wych chi, cymp metres unensioned arun o'r unolion o twn sylw exiting newydd mentol nhw.
Roedden ni'n gweithio bod yn holll iawn o maent ardraeth na hoor Medd thickness morbhe11a hisiwm yn fagel â'r edrych nid Yndd MOD練
Ac rhaid barnw utwmo sefydleto'r pwysiadau'r �aw wedi byw gweled i fwysiadau i wavesudau g compact didd Buzzion
Ac wrth ei darias ychydig o'r grobl SMD ei g тутthysg.
ac taeth chi isiwn i bobl y bydd y fl lys
...
Obviously for visual design but also conceptually.
Now the meaning refer to quite different things of course in music and design.
But they are related and both of the concepts rhythm and harmony are fundamental to both music and visual design.
So let's start with rhythm.
Now as any rock drummer will tell you, without rhythm there is no music man.
And that's true because even when there's no regular beat any tune follows a rhythm.
However irregular it might be simply because changing the note is a point of change in the music.
And obviously any on-screen visual design immediately sets up a spatial rhythm within the ordering of the various elements.
That's a very simple vertical rhythm down the page.
Here's a simple horizontal rhythm or quite regular.
Here's something slightly more complex but still quite regular.
How many people went to the New Adventures Conference recently?
I mean this relates to something Andy Clarke was talking about in terms of pacing.
He used kind of comics in the panels in comics but it's a similar kind of idea.
And obviously we can get more complex still but a rhythm is set up visually.
Now that's all quite short forward. I'm not going to enter any more detail on that.
But as well as spatial rhythms another idea about rhythm that web designers are aware of is the vertical rhythm in typography.
There's been a lot of articles and talks about this kind of thing.
There are lines of text on the page through a baseline grid and in different sections where maybe you have different font sizes
you can use what's called incremental leading which helps re-establish the pulse as we move down the page.
And musically we might call that a cross rhythm in this case two against three.
Now there are almost certainly other aspects of musical rhythm that can be easily brought to bear in visual design.
But there's not much time so I'm going to move on.
It's a harmony.
A harmony is much more I think much more rewarding and much more fruitful and concept to talk about in terms of design.
And with harmony harmony is sometimes called the vertical aspect of music.
And to illuminate that if you think of melody as the horizontal aspect of music as it were a tune you can kind of follow a tune.
You can feel it moving through time in a linear kind of fashion.
And harmony obviously sits under the tune vertically.
And now I've set up that horizontal vertical thing so you're all thinking spatially now and actually I'm not going to draw that connection at all.
But that's because thinking of harmony and melody in those terms actually does harmony disservice because harmony is simultaneously horizontal and vertical.
If you think of any simple melodic line as it's played it can be said to imply various sets of harmonies on which that melody is grounded.
Whether or not those harmonies are actually played.
So harmony doesn't just sit vertically beneath the melody it moves horizontally as well through harmonic progression from one chord to the next.
And that you know that when you listen to music uses that great feeling and music will start off where it creates tension as the harmonies change and then it resolves back to the original key.
And it's that that makes harmony fundamental to music.
Now in non-screen design you could argue that melody is the content so the layout and arrangement of the content is the harmony.
Now we sometimes say a design is harmonious when the interplay of different elements of a design is pleasing or balanced or it's in proportion.
And the content, the melody is set off or conveyed well by that design.
And we seem to know instinctively whether a layout is harmonious or not.
But what is it that makes one design harmonious and another discordant?
And I think that's not just about whether things line up though that's obviously a good start.
I think there's much deeper aesthetic forces at work, forces that we can use and tap into in our on-screen designs.
Now I don't want to get into a very difficult discussion about aesthetics because there's no time for that.
But for our purpose all you need to know is that aesthetics is that bit of philosophy which is basically that studies the nature of beauty and how we can create and perceive beauty.
And among the key components in the perception of beauty are harmony and proportion.
And that's been part of traditional western aesthetics since the time of Plato so that's about 2,500 years.
So we already know that music is, sorry, harmony is a fundamental part of music.
And one of the ways we appreciate the beauty of music is through the harmonic intervals that we hear.
A music interval, if anyone who doesn't know, it's a combination of two notes and the interval describes the distance between the two pitches.
For example, the distance between C if we're in key of C and a G is called a perfect fifth but don't worry about terminology so much.
But just to get scientific for a moment, each musical interval can be expressed as a ratio of the wavelength frequencies of the two notes.
And of course what is a ratio if not a proportion of one thing to another.
So a very simple musical harmony affords us a set of proportions which we can express as ratios.
So you may be beginning to think where I'm going with this.
And where better can we apply ideas of harmony and proportion from music than in grid systems?
Now of course the ratio we're always hearing about in visual design is the golden ratio.
That's always talked about and always held up as being an extremely important thing.
But I think the golden ratio is for the weak.
Which is not to say of course that it isn't useful.
Obviously it's very important and it touches on these aesthetic principles that we've briefly covered.
But I think that the ratios that we'll get in music and we're coming onto that very soon,
the ratios it gives us are at least as powerful as the golden ratio.
And because there are several of them, they're more interesting, more flexible, we can use them in different ways.
So this is where the sound comes in.
I'm going to quickly take a look and a listen to some of these ratios and pray that the technology is with me.
So let's see.
Beautiful.
OK, well the first one we're looking at really isn't an interval at all.
It's where the two notes are exactly the same.
So it's called unison.
So our ratio of course is just one to one.
Beautiful.
Now as we progress up the scale and that's what we're going to do,
you'll notice some intervals are more harmonious than others.
Particularly towards the middle of the scale, further apart you get the more,
well, the less harmonious those intervals are, but it's not quite as simple as that.
You can see how the ratios are changing.
And again, the names of the intervals, you don't need to worry about them so much.
But let's keep going.
Now things are beginning to become slightly more harmonious.
That's pretty harmonious there, major third.
Perfect fourth.
Now that's a very interesting interval, the augmented fourth or diminished fifth.
That used to be called the devil's chord.
And it was avoided in a lot of medieval and renaissance music.
Partly because it's a chord that can actually resolve in two directions.
It sets up a tension, you don't know which way it's going to go.
And interestingly enough as well, that ratio, you may know this,
is actually the ratio of proportions of the A series of paper, which is interesting.
So when you've got a piece of A4 paper, that's what you're hearing.
Now perfect fifth.
Perfect fifth, we'll look at this in a bit more detail actually.
This is usually considered the most consonant of the intervals,
simple intervals anyway.
Obviously the ratio of two to three fits the rule of thirds,
which is very commonly used in visual design.
It also appears in both major and minor triads.
The fifth will be there and present.
Now we're coming to minor sixth, major sixth, is that right?
These are interesting intervals, they're still quite harmonious.
They're used a lot in jazz music.
And it's actually between those two that you'll find the golden ratio.
And I think it's very curious that the golden ratio isn't present
in this kind of natural series of musical intervals.
Minor seventh is used a lot in blues music, rock music.
So there's some tension there, but it's still relatively harmonious to our ears
because of our music traditions.
Now we'll begin to get very unharmonic again.
I'm finding the full octave, one to two.
Now all those ratios may well be familiar to anyone who knows Robert Brinhurst's book,
The Elements of Typographic Style, because he sets them out
and uses them in terms of page layout for printed work.
But what he doesn't do is actually tell you what they mean,
or what they sound like, or whether one's more harmonious than another.
So hopefully that's filled in some of that information for you.
And he doesn't tell you which ones are more suitable for page layout or not.
He just presents them to you.
Now let's very quickly, and it's going to have to be quickly, I imagine.
Okay, here's that layout that we looked at earlier,
and it uses the perfect fifth, this two to three, in pretty obvious ways.
We have the viewport and the container there with the proportions of two to three.
And the container and that major section.
This particular image, shall we say, has those proportions,
and itself is in that proportion to its container.
That section matches the same width, we've got two to three at the top.
The logo width is two to three.
And again in this top section, that navigation button, they appear centred in that third.
So we've used it in several different places to come up with a harmonious design,
using that perfect fifth, one of the most harmonious intervals.
And what you can't make out there, and it's not a very great example,
but what I tried to do is you can use it for line height and font size as well.
Again, it can be relation two to three.
So, moving very swiftly on.
What haven't we covered, obviously?
I've just touched on a few things here.
I've got looked at those other intervals, which I think are going to be more interesting,
particularly the less harmonious ones.
I'm also thinking, is it possible to combine those intervals in some way
and actually get, as it were, a website to play a chord?
Don't know, maybe.
There are obviously loads of other musical concepts about form,
like anatoform and strophic form, verse, chorus, verse, chorus, that kind of thing.
Can those be used somehow in visual design?
And obviously, this is Western musical tradition.
There are plenty of other music traditions which are just as varied and rich as our own,
but which don't follow the rules which we feel are natural.
So that's it, I think.
Thanks very much for listening. I hope that was edifying.
Thank you.
