Principles of Layout Design
Once upon a time, Robin received a tree identifying book where you could match a tree up with its name by looking at its picture. Robin decided to go out and identify the trees in the neighborhood. Before she went out, she read through part of the book.The first tree in the book was the Joshua tree because it only took two clues to identify it.
Now the Joshua tree is a really weird-looking tree and she looked at that picture and said to herself “Oh, we don’t have that kind of tree in Northern California. That is a weird-looking tree. I would know if I saw that tree, and I’ve never seen one before.
So she took the book and went outside. Her parents lived in a cul-de-sac of six homes. Four of those homes had Joshua trees in the front yard. She had lived in that house for thirteen years, and she had never seen a Joshua tree.
She took a walk around the block – at least 80 percent of the homes had Joshua trees in the front yards. And she had sworn she had never seen one before!
The moral of the story? Once Robin was conscious of the tree, once she could name it, she saw could see it everywhere. Which is exactly my point. Once you can name something, you’re conscious of it. You have power over it. You own it. You’re in control.
Cool Example of C.R.A.P.
has a pretty cool layout of the four principles
Contrast – use separation for unlike elements
– Bold, Whiting, Line Thickness, Sizes
- control where a reader’s eye goes
- select primary and secondary focal points
- contrast in color should be reassuring and attractive, not jarring
– Use contrast to help make your focal point stand out
Repetition– repeating aspects of design
– Titles (36 pt), underlining, hyperlink (blue), shapes
- repetition of color, fonts, images, within a page and from page-to-page
- the combination of repetition and variation creates sophistication without confusion
- use consistent labeling styles throughout
– Also called the principle of consistency
Alignment– justifying to emphasize key points
– Left, right, center, top, bottom, flush (text to picture)
- choose one alignment and stick to it
- avoid centering
- move elements away from the edges
– Gives a clean, sophisticated, fresh look
Proximity– limit and separate unlike elements
– Separate elements with white space, lines colors
- consider the relationships of elements
- don’t spread elements around to “fill” the page; “white space is okay
– Helps organize information and reduce clutter
When looking at these four key terms, I envision my blog entries. I Contrast the key terms by bolding them, along with bolding this title. I use a different set of colors for each important entry, as in (green, for key terms, orange, for their definition, purple (or whatever this is), for the points about the key terms, pink for my opinion on the terms, and my summary of the what C.R.A.P. is, and who know what color I’m going to use next for a possible discussion question. There is repetition, as I have consistently repeated each key term the same way, and made sure that all the colors line up. My alignment has stayed away from the center, and is all on the left side, with the bullets showing indentation and are in bulleted format to illustrate sequence. I have also kept my elements (which currently only consist of words, but will soon consist of a picture or two) away from being all over the place and looking cluttered, thus providing good proximity for the reader.
My summary of these articles, videos, and power points, is they are used to illustrate how these four principles can help make anything you are designing better. You must be meticulous in everything you do with your website to try and avoid any errors, and to make sure your reader understands what your point is, and where you are going. These four principles seem designed to help ensure that no errors occur, and that your audience remains engaged and interested throughout their reading/viewing of whatever it is you have designed.
What other tools, if any, can help make what you are designing more appealing to the viewer?
I found two websites that show someone new to designing the tools necessary to get them started.