The teacher discusses the layouts that “Works-Every-Time”.
One layout would be on that reads from left-to-right and diagonal from top-left down to bottom-right.
Another layout is the “F-Format” layout.
The instructor further elaborates on the format of layouts and different various forms that can be constructed for wireframes.
He further explains the UI’s flow of reading and “call-to-action” buttons for great functionality and ease.
Not my notebook material (taken from Google Images: search: UI wireframe flow)
The teacher briefly discussed grids with wireframes:
“It’s basically something used to keep things in order.”
I finally saw that the instructor is lecturing based off the textbook.
Here’s what’s up:
The instructor opens with the “Parts of the Works-Every-Time Layout” section of Chapter 3 in our textbook.
There are 7 parts of this layout:
1. Margins. Lay in generous margins on all four sides.
2. Columns. Establish column guides. The number of columns depends on the size and type of your layout.
3. Visual. Position the visual at the top of the layout.
4. Cutline. Snuggle the cutline, if necessary, under the visual.
5. Headline. Position the headline under the cutline.
6. Copy. Position the body copy into columns under the headline.
7. Tags. If applicable, place logo and taglines in the corner: lower right for most print projects and upper left for Web pages.
Whenever starting out a wireframe, always lay down a generous margin to work with on all four sides. Specifically, half-inch margins for a small ad or a flyer.
Generally, the size of the margin does grow larger as the layout is larger (posters, big banners, etc.)
Next, the columns. Inside the margins, always divide you layout into vertical columns.
“Designing with columns not only helps you arrange items neatly on the layout but also makes your copy more inviting to read.”
Remember: the bigger the layout, the more the columns, the better the results.
When adding texts to your columns, “threading” the text from one column to the next like newspaper columns is best. When working with web pages:
“Keep your copy in one column and use the other columns in your grid for navigation, banner ads or other content.”
Bottom line, unless your layout is very narrow, don’t make your copy span the width of your layout.
Next up, visuals!
The visual is the proverbial “eye-candy”. It’s what attracts viewers and audiences. When it comes to utilizing the works-every-time layout:
The visual goes at the top of the layout because people tend to look at pictures first. The visual becomes the eye entry point into your layout and is the starting point of a viewing flow that takes the audience from top to bottom. Make your visual the welcome sign for your layout. Hang your visual from the top margin, top of your Web page or top of your story.
A 5 × 7-inch ad with a ½-inch margin on all four sides. Black lines indicate the document boundary. Pink and purple lines indicate margin lines.
Purple column guides delineate the columns for your copy and the alley between the columns.
The next section goes to…Cutlines!
Cutlines are usually used to describe your visuals and in most cases, industries that utilizes these are print publications: magazines, newspapers…anything news-y.
If you do need a cutline, run it flush left and ragged right directly underneath the visual. While you’re at it, make the width of your cutline the same as the width of your visual, assuming, of course, your cutline is long enough to do this.
Let’s say that we have text in place, we have to set a font type.
“For a cutline, use the same font you choose for either your headline or your body copy.”
Ideal font sizes for cutlines: 9 and 11 points.
Not-So-Ideal font sizes: 8 points (hard to read) and 12 points (too big).
After setting up some visuals, we head down the headlines path.
In print projects, place the header under the visual, not over it, because print readers look at the picture first and then they scan the headline.
People are naturally lazy readers, we, as readers, love visuals and if the visual works with the headlines…it’s magical.
“Make your headline count.”
When utilizing visuals alongside headlines, make sure the visual has weight, which generally means “make it big”.
Although, there are times that layouts won’t even have visuals. In cases such as that:
The headline becomes the eye entry point into the layout.
In any event, make your headline way bigger than 11 points.
When it comes to web:
The reader’s eye may search for navigation and headline before it goes to the visual. So it’s especially important to make Web headlines big and bold. Pairing the headline with a visual can create a one-two attention-grabbing punch.
Working with type for layouts, it’s very important to understand that the “Works-Every-Time layout” can only utilize two fonts. Any more different fonts will throw the layout out of whack and can damage the aesthetics and the flow.
Final caution for headlines:
If you can’t get the whole headline onto one line, then let the copy tell you where to break the line. Read the copy. It will guide you toward the least painful place to break up the headline into two or more lines of type. The ends of thoughts, clauses and phrases are the best places to break a line. Never allow hyphenated words to break headlines into two lines. Never strand a single word all by itself in an additional line of a headline, either.
Tip: If the layout represents quality journalism meriting a byline or the author’s name, then put it under the headline. But don’t make it nearly as big as the headline.
When utilizing other content other than your own, simply treat it with respect and give credit to that person.
» Keep the headline and the lead together. A lead is the first paragraph of body copy. Never let anything except a byline come between a headline and its lead. That means don’t let anything physically separate the headline and lead. The eye should finish scanning the headline and flow directly into the lead.
» Put your copy into nice inviting columns that say, “Read me.” If your copy is too short to fill every column, then fill a column with negative space. It’s okay to leave a column empty. White space is not your enemy.
» Short paragraphs, by the way, also say, “This won’t take long.” As do short legs of type in print. A column of copy is called a “leg” so two columns is two legs. You can entice people to read several short legs of copy when they will skip reading exactly the same thing in one very long leg. Don’t go too short, however. Columns that are too short make for choppy reading. Aim for legs somewhere between 2 and 10 inches long.
» Set your copy in a transparent font. Transparent fonts are easy to read (not see-through). The eye can focus on reading for content without being distracted with thoughts such as, “Hey, this is an interesting font,” or “Wow, this font is giving me a headache.” Times New Roman (print) and Helvetica (Web) are today’s ubiquitous transparent fonts. For that very reason, we’re not endorsing them. But do choose a readable font for your body copy, even if that seems boring. Also make sure your body copy font doesn’t fight with your headline font. Let your headline font be the showoff. For print, start with a font size of 9–11 points. For Web, size varies. Start with 1em and adjust accordingly.
» Shoot for an average of six to 12 words per line. First, don’t justify your text. Flush left, ragged right is your best bet. Next, the width of your column and the size of your type will determine how many words fit on one line. If you’re only getting three to five words per line—and you’re getting a heap of hyphenated words jettisoned to the next line—then you have options: Reduce your font size or make your columns wider, or both.
» Some advice on paragraph and column breaks: Regarding paragraphs, don’t indent the lead under a headline. Beyond the lead, if you plan to use indents to mark paragraph breaks, then size your automatic indents at roughly the equivalent of four to five letter spaces of your body copy’s font size. A ½-inch tab, for example, is probably too much. If you plan to use extra spacing between paragraphs as your breaks, don’t indent at all. This approach, by the way, is best for Web.
» Regarding columns, make sure that the top and bottom of each leg looks elegant. Really. Look at them. Do the bottoms of your legs break sentences or paragraphs awkwardly? Do the tops of your legs begin with the last word of the previous sentence? In both cases, try not to. Does each leg of type have to be the same length? Nope.
Only use tags when it’s necessary.
Overtly using tags will disrupt flow and aesthetics.