Book Review/Giveaway: The Geometry of Design
Update, February 3rd: Early sketches and an inspiration board added to the end of the post.
LAYOUT. My old nemesis. Comp after comp is the same story: sketch the layout, try it in Photoshop, change it, change it, change it, and change it back until something sticks. It's the tyranny of choice - there are just too many possible layouts and never a good way to narrow the options down.
Even after deciding on a basic structure and beginning it in Photoshop, things never feel right. Is the header too tall? Is there too much space below that list? It's easy to pour hours into decisions like these and forget other, more critical areas of the design.
After a few recent collisions with layout, I decided to pick up Geometry of Design and Elements of Graphic Design, and spend some time refocusing on layout construction. I got through Geometry of Design in one evening, and AWESOMELY, I was able to apply it to my work the next day.
Why Geometry?
"The mathematically expressed module can only act to confirm a spontaneous insight. The golden rule merely defines the ideal proportion previously intuited by the artist, it is a means of verifying, not a system."
That's Adolphe Mouron's way of saying "don't use geometry to restrict, use it to enhance." The human brain already perceives certain shapes and relationships as harmonious, and our layouts (unconsciously, often) play to this fact. Elam's book is about doing mathematically what we already do intuitively, but doing it faster and more precisely.
Some (extremely basic) notes from the book:
- The golden rectangle and its divisions (into more golden rectangles) create harmony
- Sizing objects and curves in relation to a single unit creates harmony
- Using the vertices/corners of shapes and their intersections creates harmony
The book covers a number of fascinating geometric relationships, the most prominent being the golden rectangle (a roughly 5:8 rectangle) and its divisions. Along with an eye for proportions, this knowledge alone can punch up the layout of a design or simple mark, as I'll demonstrate next.
Utterly Pointless
Pointless Corp. (site still under construction) is Viget's new app sandbox. We wanted a logo that was fun and memorable, and simple to place in the footers of Pointless Corp. projects. The concept chosen was a bear riding a bicycle (of course), but I got stuck after the sketching phase. After a few failed attempts in Illustrator, I decided it was time to test some ideas from Geometry of Design.
When Sketching Fails
Fig. 1: Three years of drawing classes, down the drain.
It's not much, but here's what I had after sketches and some quick Illustrator tracing. There were a lot of little decisions to make at this point, with the goal of expressing the bear's posture, demeanor, and making him as identifiable as possible - decisions I wasn't quite sure how to make. So, I pulled out a golden rectangle and started reducing decisions by working on the visual harmony.
Simple Shapes
Fig. 2: The basic structure of our bear.
Beginning with an upright golden rectangle, the most visually pleasing of all rectangles (IT'S A FACT), I made a circle for the big wheel that fit into one of the rectangle's divisions. The next two circles were double and half the size of the original. The small one is placed in the bottom right corner of the rectangle, the large centered on one of the golden vertices. (I have to confess that this three-circle approach was a little inspired by Shaun Inman's logo for Mint, but also sprung from my idea of incorporating the Viget logo into the mark [hint, look at the bottom]).
More Circles
Fig. 3: Sort of looks like a bear.
Placing the head and tail just outside the "body" of the rectangle emphasized just how much bigger the bear is than his bicycle. I also wanted him looking ahead, using a second large circle to add some curve to his spine and straighten his posture.
The corner of the rectangle was a perfect spot for the ear circle, and the same unit was reused to make the curve of the chin. The head needed to taper a bit to make it bear-like, but the angles used are actually divisions of the angle across a perfect rectangle (about 32 degrees). Larger circles, radiating from the front wheel, define the shape of the bike and the curve of the bear over it.
Finishing Touches
Fig. 4: Geometry can even be used for free-flowing elements, like the tie.
The same circles are used again and again to place the tail and a jaunty tie, and another forms the hand. Whenever possible, the shapes I use intersect vertices or fit into other shapes. The bear's knees are made of a cross-rectangle line and another line that moves from the center of the bottom to the intersection of the left side and a contained golden rectangle (okay, it's hard to explain). Probably overkill, but once you get into it, it's fun to see everything lining up so smartly.
OK Now We're Done
Fig. 5: The final mark and some related elements.
The final result is a mark that seems elegant and readable, even at small sizes. My logos tend to be sloppier, take longer, and look much less finished than this one, so I'd say the geometric process was a huge help on this project. The next test is to see how it applies to an actual comp.
What's This About A Giveaway?
THAT IS RIGHT. Now that I've finished this excellent book, I'd like you to read it. Leave a comment before February 15th and I'll use some random process to select who to mail my copy to, for free. Note: You get a better chance if your comment is a) insightful or b) flattering.
Update: Some More Background
Fig. 6: Some quick sketches from the logo concepting phase. People voted for lots of different ideas, but the votes for the bear seemed to be the most enthusiastic (a good metric for picking a direction).
Fig. 7: A quick styleboard I threw together using some favorite links and Google Images. This guided a lot of the more unusual browns in the final logo package, and provides some hints for elements on the Pointless Corp design (still in progress).
Doug,
That looks great! I’m aware geometry takes a good part in design, but this example is the best I’ve seen in a while.
Thanks for showing us.
Congratulations in the book!
Great article, and a really nice logo!
I don’t design much anymore, but if I did I’d definitely steal this technique.
This definitely looks like a good read. Your example really helps to quickly visualize the concepts too. Thanks for the great post.
I really enjoy your example illustrating the process of utilizing geometry in design from sketch to final implementation. It is most intriguing how, despite the planned geometric forms, the tie still flaps freely.
I will certainly be keeping an eye on Pointless.
Wow if the book is half as good as the article its gonna be gold!
what a great post :)
Awesome work Doug! This is a great logo and just as important, a good breakdown of how you approached it.
Ever since learning about the rule of thirds in photography, I’ve had the golden ratio in the back of my mind. Unfortunately, I’ve mostly tried to apply any reading and findings with photography and these principles have only passively found their way into my visual design work.
With your process explained, the “Geometry of Design” book, and a couple of tools I’ve found around the internet, I’m hoping to have more an active mindset in integrating the golden rectangle and ratio into visual bits. Thanks for the inspiration.
Here are some of those tools I’ve found handy recently, in case anyone else could use them or has any to share themselves:
- PhiCalculator
- Golden Ratio Grid Script for Adobe Photoshop
- Online Golden Ratio Calculator (and Mac Dashboard Widget)
I might be somewhat biased, but this is my favorite Viget project logo EVER. I’m not even trying to get the book. I just heart the bear.
You had me at a bear on a bicycle.
I’ve never seen so many circles in a logo without seeing them at all. ;) It’s so cool to see how things like these come to be.
Hi,
Would really like to get my hands on this book,
Certainly the geometric approach seems to have given a crispness to your logo but I do think the sketching process led to a fairly well thought out idea, love that bear!
Nice post Doug. Anytime you can inject science, method, and objectivity into design helps encourage an appreciation for and respect of the process. If it’s logical it’s an easier sell in discussions of business value (the holy grail of creative work).
Wow, Doug - this is a great post. I loved the bear from the very start (reminds me of the motorcycle riding bear in The Hotel New Hampshire, one of my favorite books) but seeing your process really makes it clear why he comes together so well as a mark. Great job, as always. I will be adding this book to my wish list!
If I had to rebuild society after a nuclear disaster and could only choose ten people, you definitely would have made the cut. Based soley on this post.
Excellent post. I try to use phi in my design work, but I don’t think I’ve ever seen it nailed as elegantly as this in something as organic (and non-geometric) as a bear on a bike. Fantastic stuff. Thanks too, for the geometric illustrations accompanying the post.
On a more serious note, though, where is he going in such a hurry. Is “pointless” a cover, so as to allay suspicion that he may just have absconded with a pic-a-nic basket? We can’t see his right arm, after all.
Enjoy the mark, it is excellent, and good luck with Pointless Corp., but keep your eye on that bear. I think he’s up to something.
Wow, that’s awesome. This is why I could never be a designer.
Great article. Love the visuals!
I really like the style of the logo and the overall feel of the brand.
What’s the chance of you doing a screencast of the process? That would be really helpful to see.
Excellent article! Both a book review and tutorial in one. I am so excited to see how quickly and intuitively you were able to integrate this into your design process and how obviously great the results were. Kudos!
Cant wait to get my hands on this book. Dont know if I can holdout until Feb 15....
I find it amazing how some of the more elegant logos out there have their basis in a geometrical scheme of some kind. At first glance you don’t know why, but it all just fits. This approach will probably only get even more popular in the way grid design has recently swept the web. Great work, this was an enjoyable and insightful post.
@Trevor Davis: It’s funny, but I felt exactly the opposite after reading this post. I have always been delighted and humbled by the awesome work that really talented graphic designers can do. (Especially the ones here at Viget!) I’m a creative person in general, but a lot of times I feel like I wouldn’t have any idea where to start on a project like this one. When I first saw the Pointless bear, I thought to myself, “Wow, I wish I could have made that!”
It’s encouraging to me, a very analytical and detail-oriented person, that this bear on a bicycle wasn’t conjured solely out of the mysterious recesses of Doug Avery’s mind. This post illustrates (pun mostly intended) the structure, process, and even formulas that can be applied to design work in ways you’d never expect; like Natalie Jost said above, “I’ve never seen so many circles in a logo without seeing them at all.”
Anyway, thanks, Doug, for this excellent Friday inspiration that doesn’t crush my dreams of designing something cool someday. :)
Great article! The process is very interesting and I love the results.
I prefer the versions you post here than the one in the Pointless Corp. site, I think it looks stronger without the strokes in the tie and hat.
Please count me in the book giveaway!
Thanks for the great feedback, everybody.
@Brian - thanks for the great tools, especially the Photoshop script...should be very helpful.
@Simon - I think sketching helped me understand how many subtleties can go into a logo like this. I started with the basic circles and tried tracing them 20 times or so, and each time the bear looked pretty different. That was when I realized I’d need a more ordered approach if I wanted him to look the way I wanted.
@Ian - I’m not sure if logo design would be a skillset to consider when choosing a team to survive nuclear winter with. The branding possibilities in such a scenario are pretty much nil.
@Jeff - Since completing this logo, I’ve tried the approach with mixed results on other designs. Like with grids, it seems like it’ll take practice before I can really use it to guide full layouts. Also, please don’t cast aspersions on our kindly bear, Mortimer. His intentions are beyond reproach.
@Trevor - I’ve slowly learned that design is just a lot of systems, loosely held together with some undeserved confidence. I think the key to growing as a designer is looking at your work and saying “This isn’t as good as it could be because of X. What system could help me improve X?” So, just like with anything else, you build a tool set to apply to different situations.
@Wes - I think a screencast of the process would be seizure-inducing. One thing from it, though: Several times, I couldn’t decide on small details and tried 3-4 different angles. I’d grab someone walking by and say “WHICH HAT LOOKS JAUNTIER”, and they’d point, and I’d move in that direction. With logos, I find you need to check in with fresh eyes a lot or you start to miss things.
@Nelly - Hmm, I think so too. Thanks for pointing that out!
I was a math nerd way before I was a computer nerd and I love the idea of marrying the two. I love the finished logo, especially the small circle containing the bear’s head. Nice work.
A very informative and well-written explanation. I come from a programming background, so everything needs to be logical, rather than inspirational. I like learning the logic behind graphic design.
Question: how did you derive the subdivided rectangle in fig. 2?
Great explanation! It gives this math major hope!
@Steve, Fig. 2 is a golden rectangle, with two smaller rectangles fitted into it (at the top and bottom), and then each of those are divided the same way.
I thought my love of math and logic meant I was forever doomed to coding, standards, and usability...but this is pretty hot.
WOW! i LOVE geometry, never thought of using it in this way. I want your book, so yeah..PICK ME! PICK ME! i promise i’ll make awesome stuff after i read it and give you credit for it! and i’ll tell the world how awesome you are for making my designs look a lot hotter. :D
I know I’m ineligible for the book give away, but I just wanted to give you a virtual standing ovation for this post.
Wow wicked logo! Book = WANT. I love seeing the process compared to the finished product. Coolies :-D
This book sounds like something I really need to read, by just looking at the demo used in that bear logo. I definitely want to start putting more geometric thought into my designing.
AT
My favorite part is the double drop on the lettering - nice touch. And I hear ya when you say your logos don’t look finished. And you look great in those pants - did you lose some weight?
Fantastic writeup, and fantastic end result--I love the jaunty tie.
Great post! I remember using the golden rectangle habitually back in school, but I ... well, forgot about it. That’s how things go I guess. Thanks for the great post!
that’s super nice of you, mailing out a book like that. what a nice idea.
An absolutely fascinating article, thanks for sharing.
I’ve seen the book referenced several times, and also seen Shaun’s logo anatomy images on Flickr. His always amazed me but after reading your article it’s the first time I’ve had an understanding about the term and how it could be used in my own design work.
This is why I read the Viget blog. Great stuff!
This post is something extraordinary and amazing, thanks for sharing
great article! Would love to take a look at the book
Excellent post. Very relevant to my ongoing project.
I’m currently using grid systems created from the golden ratio in order to construct interactive puzzles. I’m still trying to grasp my own concept because I’m a maths dunce, but it’s good fun and I’m learning something which is applicable to all areas of practice. Namely, what a big role geometry plays in creating wonderful visuals.
OK, that’s the insightful part, now for the flattery.
You are a beautiful person. I will shine your shoes. Give me the damn book.
Thanks so much for mentioning my site (the golden ratio calculator). I think a key point is that good design is good in spite of any geometry or maths applied to it, not because of it. That said, using these features is a good starting point or enhancement technique.
Cheers.
Pret-ty amazing. Great to see this process from start to finish! Thanks!
When something isn’t quite working, and I just can’t get it, I always turn to the golden rectangle to figure out why. This post is a perfect example. I love the little bear on his bike. However, I think it loses something with the black outline around his tie and the ribbon on his hat as seen on http://www.pointlesscorp.com/.
That may just be a personal thing though. I was always taught to avoid black outlines.
I love that logo! Well done!
Even if I don’t happen to win this giveaway, this is a book I’ve been meaning to pick up for a while and now after reading this post, I’m getting it without a doubt. I’ve been looking for something like this for quite some time.
Great Post!
Coming back to design after years away and learning the new tools. Just did my first InDesign project with the Golden Mean Gridand was ready for a new angle.
Thanks, the post is inspiring and enlightening.
KiP
this is the first time i heard that Geometry is have relation to design ...
and the example looks great !! and if all examples in your book is in the same i’ll bet it great book
A better idea would be to require who ever won the book to give it away after they read it and so on. That way everyone reads it ;)
Where did you guys get the idea for a bear on a bicycle? It is such an awesome idea, and whimsical.
I would love to hear the though process behind this mark…
What a great write up! I’ve been fascinated by the golden rectangle but it is quite another thing to watch someone use it.
Another book I recommend is The Elements of Typographic Style by Robert Bringhurst. Setting your typography to a baseline grid is a wonderful start to enhance a design, and the book provides a concrete example.
For those that can’t get to a bookstore right away, check out The Elements of Typographic Style Applied to the Web.
I am desperate to read any great design book just to show my father that I am not just a programmer who can’t design. I want to live up to being a great designer by all means necessary.
Definetely looking to put me hand on this book.
Many thanks for this great article with good explantions and photos.
I use the golden ratio a lot but only for text placement.
I’m amazed to see how it can be used to find good proportions of shapes when drawing.
I’ll try it on my next projects but I’m convinced (and maybe you are too) that the discovery sketching phase is mandatory before the geometry shaping phase.
I mean, geometry is only there to adjust positions and sizes from a handull of pixels.
The finalalized bear is just an adjustment of your sketches #2 and #4.
Well I’m just saying what I think and I’m sure you think the same way :)
What I love with geometry and the golden ratio is exactly what you said from the beggining “[...] decisions I wasn’t quite sure how to make. So, I pulled out a golden rectangle and started reducing decisions [...]”
I hate subjective and random decisions when designing.
The most rational I am, the better.
Best regards and follow up the good work ;)
I can’t be insightful, but I may become insightful after reading this book??
Excellant,
This is reinforcing Shaun Inman’s post a while back that I read and was intrigued by.
If I don’t win this book, I’m definitely going to buy it.
Kind Regards
Thanks for sharing this post, very insightful! I use the Golden Rule for page and text layout, but neglect it in other drawings and artwork.
For example, I have found in Illustrator that I tend to pick up the trusty pen tool and start tracing or outlining shapes. But if you use geometric shapes like your bear, you can achieve a much more balanced drawing. So I think next time I will try that out - there is more than one way to skin a cat after all!
Okay, I have to admit. When reading at the beginning, I thought the book would be a total waste. But then to see how you implemented what you learned on your logo, I am so sold and now will put this on my wish list. Thanks for sharing and the logo turned out great!
It is easy to become overwrought trying to be clever. You show us here that sticking to the basics, time and again, provide the results you are looking for – I am now reinvigorated by this post and will print some simple shapes to post in my workspace to help my creative juices serge.
I’m always so mystified by designs that show all the circles and other building blocks (such as the last couple you provide), and I’d love to be able to look at it and actually understand it for once!
Seems like a great book for 2d designers. Thanks for reviewing, I’ll check it on amazon.
@E to the M - Thanks! After finishing the main mark, I spent a little time putting together extra elements that people could use in lots of contexts, which led to a big color palette and a bunch of fun little elements like that. Rather than making future designers cram the main logo and color palette into designs, I’m hoping they find something in the file that they want to us on their work, and can use easily.
@Jarrod - I think you’re right. The outline was there to add a little crispness, but I think cuts too much into that soft, rounded feel the mark has.
@Zinni - I started with quick idea-mapping...picking a bunch of concepts related to “pointlessness”, and elaborating on them visually. Some of them were opposites (tons of points), some of them were about the active removal of points (severing the point), and some were a celebration of pointless activity. I’ve attached a few of the sketches at the end of the post.
@Jay - I’d seen this before but hadn’t really taken a hard look. I’m definitely going to work on incorporating a lot of these into my next buildout.
@Renaud - Agreed, I think you can’t start with geometry, you can only use it as test to make sure your design has the appropriate harmony.
@Rachel - I freehanded in Illustrator for years, and I like the look, but using geometric shapes definitely gives you more control and balance. For future work, I’m going to work geometrically and then expand on the final piece using some freehand techniques.
That bear logo is adorable. Thanks for the great post about a book I’d probably not have checked out otherwise.
Doug,
Great article. It’s making me re-think the way I approach icon and logo development. I’ll definitely check out the book. Thanks for the post and showing your process. Final work is great to show (and your’s is great!), but seeing the process over a number of steps is even better.
Cheers!
I never thought I’d consider using geometry after high school.. guess again..
I love the moodboard/storyboard. It is a clever resource I always forget to use. It also looks pretty fun: you get to mess around on the internet finding pretty images, but you’re actually working! Genius.
I can’t wait to see the final result.
Also, you were going to use a platypus? Aww!
I’ve used the Golden Mean a lot to create grids, but never to create an illustration or a piece of art. I’m going to try that now… thanks for the inspiration.
Also, how does the moodboard thing work? I’ve never seen that before. I’m guessing it’s a Photoshop file with a bunch of inspiring images all thrown together?
@Brad - Yeah, in this case, that’s all it was. Knowing what I wanted to do, I sort of fished around for a few minutes and found some colors/textures/type that I’m referencing later in the design (you can see some of the colors in the mark treatments, and some hints from the train ticket at the Pointless Corp. site).
What a great article! I love the way how you explained your process in developing the logo… great for those of us who never quite “got” using the golden rectangle in our designs.
Bear, bear i hug you once
Bear, bear i hug you twice
Bear, bear i like the way your are shaped by your creator
ps: does this apply to penguin’s as well?
Bro, you just saved me $10k in tuition fees at the local art school.
As of now, I’m a reader-for-life.
Thanks!
Wow! Excellent usage of geometry, learned a lot from this article. Hoping to buy the book ASAP!
Nice read...An interesting look at making use of simple shapes in a constrained environment would be the making of software icons.
Have you seen The Icon book?
Very good examples of abstracting elements to not only their essential shapes, but to be able to be instantly recognizable at small sizes, often in a cluttered interface.
If we look at our everyday world, we designers are constantly seeking to make our imagery easy-to-remember, and reassuring.
Like a good software icon we can rely on, the use of simple powerful shapes can go a long way to build a strong design…
Lovely logo, thanks for sharing the process. Great stuff.
The final result is just… stunning.
My design’s really need more structure, maybe I should consider this book.
Doug,
Your bear is an inspiration to the working man in all of us.
It thrills me to know that you’re using some modicum of the geometry fundamentals that were forced into your pubescent brain in your design career. I can only hope to learn to do the same.
Thanks for the great article! :>
Thanks for commenting, everyone! I lined everyone’s comments up and used random numbers to cut them in half, in half again, and so on until one winner remained. Dave, Alexander, and Victoria were all very close, but in the end, Simon won the book. I’ve contact him about sending it this week.
Thanks again for all your comments and feedback, this has been a really fun to discuss with all of you.
I really enjoyed this article and all the great work seen here. I’ve only recently subscribed as I’ve only recently started using a reader, but I’ve visited in the past and enjoy most everything from the design of the site to the information presented. I’ve actually had my eye on this book in the past. I think it’s amazing you’re giving it away. It’s a very inspiring thing to see, and I hope the person who receives this will be extremely grateful, enough so to possibly pass it on once they’re done as well! Keep up the rad.
Next entry: What Is Your Brand Personality?
Previous entry: Swedish Design Inspiration
Recent Comments
@brad
It makes little difference when using native EE functionality or Structure to add pages, it’s just that if you want to add a sub page, you need to remember to assign a...
- Hambo on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- brad on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- Doug Avery on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
Subscribe to Comments RSS