There is something deeply satisfying with coming up with a new modular scale. Left scale is 1:1.125 (major 2nd), font sizes for hierarchy based on the fibonacci sequence. Right scale is 1:1.067 (minor 2nd), font size choices based on increasing distance between choices by n+1. Scales intended for 46em screen width and 60em screen widths respectively (decided to go with the good ol' golden scale for mobile).
almost 3 years ago
Awesome. I've gotta make the calculator a bit more flexible so you don't have to write this all out.
On one hand, the calculator would have made it a whole lot easier; on the other, I don't think I would have thought as hard about coming up with choosing the right scales and determining the hierarchy as clearly if I didn't do it all by hand.
With scales such as the golden ratio, perfect 4th, and perfect 5th, there are huge size differences between each step, so choosing the next size up or down) is easy. But when you have tiny increments like the 2nd and 3rd scales, you end up having to think really hard about how to choose which sizes to use. I think that if you offered more choice in building scales on the calculator (which I love), you'd almost have to also build in a way to also help the uninitiated choose sizes lest they pick randomly due to having way too many options (like you suggested before).
I'm curious to know why you chose the major and minor seconds as the intervals to base your modular scales on. Both those intervals in music are quite dissonant. My own ideas on using musical intervals as a basis for visual design are that more harmonious intervals (e.g. minor and major thirds, perfect fourth and fifth) create similarly harmonious visual design.
Indeed they are. Without context, when looking at major and minor second pages, they tend to feel almost slightly squat.
I decided to use the seconds for a few reasons:
1. It was largely governed by the fact that the first thing on the front page will be a full-width storybook (60em by 32em for 960px screen widths (minor 2nd) and 48em by 30em for 768px screen widths (major 2nd)). The landing page of our blog will also have a same sized storybook.
2. Page ratios larger than 5:6 (the minor 3rd) do not fit well on screens. In fact, even with our masthead/banner (which isn't even 75px tall at 960px screen sizes) too much of the storybook fell below the fold and the print metaphor lost its power.
3. All the copy is about us being different and one-off from everyone else. The rest design supports that by being completely type-based and only image in the template is our word mark (not even a logo), so the typography is really doing all the talking. By using contemporary fonts, dissonant scales, and following our grid religiously the design gives a feeling of being apart-from normal, being in complete harmony with itself, and yet still steeped in the traditions of the International Typographic Style (an added benefit since I work from Milwaukee, while my other half is in Hong Kong).
All of the great jazz musicians used dissonance. If you break down the music each part might sound off or wrong, but if you put the parts together it works as a whole. I see no reason why, in theory, this can't work for grids as well.
Bernard, thanks for explaining your choices. You've obviously thought long and hard about the design that will best set off your content. Interesting to see that height is such an important part of your considerations - very often on the Web, we can't account for it.
Tiffany, yes, of course dissonance has its place, in all forms of music, and I'm sure you're right that this will work in grids as well. It must also be possible to combine music interval ratios creatively so that a design can be imagined to 'play' a chord.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter