Design: Practice Makes Perfect

Zephyrus's picture

As a professional web designer, I've learned that design matters for a lot of reasons. Many of them were stressed in the instructor blog this week including: design as product interface, design is invisible, design is persuasive, design guides the eye, design utilizes white space effectively, and design requires careful attention.

The last point stressed about paying careful attention to the design is probably the single most important for a person learning how to effectively utilize design. When I began creating simple HTML webpages, after a page was done I would put myself in the shoes of a user and analyze how the page was laid out, and checked if it met the other requirements of design. Then I would make changes one at a time to see if I could improve on the design any. This boils down to practice, and was talked about in the alistapart.com article on typography. Much like video games or sports, good design simply takes practice. Eventually good design becomes more natural as you will enforce the rules of alignment, proximity, repetition, and contrast automatically on your first iteration of the design. Improvements to the design after this step then become bending some of these rules to better fit your situation.

Another often overlooked aspect of design is typography, and was thankfully covered in the white space article on alistapart.com. Typography is definitely one of the aspects of the page that is judged almost instantaneously and mostly subconsciously, but has a profound impact on the overall design of a document. Good designers will make use of the CSS property line-height on every font family or type face used. Line-height controls the leading, or the micro white space between individual lines of text. This property really makes the difference between readable and elegant, and cramped and poor text content. This property is also used to make certain text on the page more visible, and is really as important as making certain items bold. The extra white space guides the eye to the important text, and then bold makes sure the reader understands its important. It's sort of like using a subconscious technique to get the reader's eyes to the content, and then using a conscious technique to make sure they understand its important!

White Space

dbasso's picture

Yeah I never really thought that white space would direct the eye to the important text but it makes sense. It is definitely important in website design that you were discussing. In all of the situations the consumer and money usually comes into the picture. If a customer does not prefer a design, than it could be a bad thing for a lot of people. Even though we are covering the key elements of design in a technical document it seems to all pertain to websites. A good website usually has good alignment, proximity, repetition, and contrast just like a good instruction manual.

More on White Space

Kristin's picture

Ditto on the importance of white space. Even in print, white space can be just as critically important as it is on the web. One thing to consider for a technical manual, in addition to your leading, is how wide your margins are. I had a teacher who called the margins "thumb space" ... not only do you need a constant edge around the page, but you need a place to hold the pages. It might be something to consider especially in writing instructions, because people might need to hold the book while looking at whatever you are instructing them about, too.

Kristin

Thumb

jonesae's picture

I like what you said about "thumb-space". I hadn't thought of margins like that. It would be pretty inconvenient to a user to have little to no margins and then gunk up part of the instructions and not be able to read them. It reminds of recipe cards when cooking. They tend to be quite small but at the same time have little "thumb-space". While you usually don't hold the card the entire time that you are cooking, it is difficult to hold the card closer to read it and then not be able to read the whole thing because you've gunked it up or some of the instructions are under your thumb.

Andy

The Small Stuff

Nathaniel's picture

Zephyrus also draws our attention to an important aspect of successful design: attention to detail. Successful designers, as Zephyrus indicates, really focus on those small detail that will nevertheless play an important role in the user's ability to assess the text, whether online or in print.

design based!

ck86's picture

I never thought of instructions as being more design based, I just though of them as being more of technical writing. I now know that it a mix of both technical writing and design. I am not artistic so the design part will be the hardest part for me. I will be able to write the instructions with ease but will have to spend the majority of my time working on the image creation, the text and the separation of the text. I also need to think the color of the text as well as the size and not only what is appealing to me but that is an easy read for others.