The Final

After a lengthy and drama-filled quarter for myself… I was finally able to pull off my final and if I do say so myself, I finished it famously.

 

I’m very content with how my product turned out and I am more than happy to share it with you all.

 

I introduce…

 

Tru Den

app-storefinal-mockup-trialfinal-completed-app-teaser

I had a great quarter with all of you and especially you, Bryce! ❤

 

Thanks for the great laughs and the fun projects!

 

  • Jason Ho
Advertisements

Lecture/Project III – Mobile App Product Teaser

After the group project for innovating a drill tool and marketing/branding it to a client (our teacher), we had a mini-project to create a funny meme that could possibly go viral and explain why it would gain popularity.

Mine was:

Viral Photo

The next and final project is to create a mobile app product teaser for a client (once again, our teacher).


The teacher continues to go over the deets of the project:

He provides examples of certain mobile apps that are renowned for their services and why they are popular mobile apps. He then ties it into the requirements needed for the project:

Requirements:

Creative Brief [can be written]
Competitive Analysis [can be written]
Moodboarding/Inspiration [can be written]
Sketches [very important to have done]
Roughs and Wireframes [very important to have done]
Final Mockups [very important to have done]
Hero Slide with jargon/phrase [very important to have done]
2 Supporting Slides [very important to have done]

Week 4 Lecture/ Chapter 7

Alright, so it’s week 4 in this class and the instructor is writing down items we require for our design concept.

In class, we were grouped into a team to create a creative brief for our concepts.

The concept we were provided was to create a design for a drill bit.

The requirements:

The teacher elaborated more on the IDEO method. The teacher began elaborating more on the IDEO method and how it originated.


Chapter 7 discusses the use of font faces, font families and the use of glyphs.

figu7_1.jpg

Before we dive further into the depths of font, let’s educate ourselves about the anatomy of font.

Parts of a Font

Fonts have a complex anatomy, and the names of some font parts are known only to font designers and true type enthusiasts. This diagram illustrates some of the more commonly known parts of fonts.

figu7_16

A Field Guide to Basic Font Categories

Depending on the source you consult, you’ll find many different font categories. We’ll stick to a few of the most common and offer general recommendations for their use.

Old Style & Transitional

Characteristics: Classic and traditional, old style fonts have serifs, little “feet,” at the tips of glyphs. Old style serifs are bracketed: They start thick and taper to thin at an angle, creating little triangles. Old style fonts also contain thick stem strokes and thinner hairline strokes, though the difference between the thick and thin is not extreme. Old style fonts often have diagonal stress, which means that a line intersecting the thinnest parts of O-shaped glyphs is diagonal.

Transitional fonts evolved from old style and share many of the same characteristics. The biggest difference is that the diagonal stress is missing or not as prominent in transitional fonts.

Because they are so similar, throughout this text we refer to both types as simply old style.

figu7_23

Sans Serif

Grotesque Humanist Geometric

Characteristics:Contemporary in style, sans serif (French for “without serif”) fonts have no serifs. Variations of sans serif fonts include Grotesque (strokes have uniform thickness), Humanist (variations in stroke thickness) and Geometric (letterforms have geometric shapes). For simplicity, we refer to all forms as sans serif.


BEST USES:
In print, sans serif fonts are best used for headlines and other quick nuggets of text such as sidebars and cutlines. They work well when reversed. Humanist forms, with their stroke thickness variations, are the most readable of the sans serif fonts.

Onscreen, sans serif fonts rule in the readability department. Among the most readable onscreen fonts are Helvetica, Verdana and Arial. Their larger x-heights and open letterforms add to their online readability. Bigger, bolder versions make excellent headings and subheadings.

figu7a_1

Characteristics: If the type style looks like it belongs on a wedding invitation, it’s most likely a script font. Script fonts tend toward formality and often resemble old-fashioned penmanship. Like cursive writing, the glyphs in script fonts tend to be connected on the downstroke. As a whole, script fonts can be difficult to read, though some are more readable than others.

BEST USES: Because of readability and legibility issues, script fonts are best limited to small amounts of copy in both print and screen applications. Individual characters of script fonts make interesting decorative elements in watermarks and logos. They also make beautiful drop caps.

figu7a_2
Characteristics: The characteristics of decorative fonts widely vary. They can resemble hand lettering, vintage type, grunge type or whimsical lettering. Consider these examples:
figu7_24

BEST USES: For both print and screen applications, limit the use of decorative fonts to headlines, decorative details, ornaments or very small amounts of type. They are not a good choice for reading copy. Reversing depends on the thicknesses of the parts of each glyph, and those with fine detail will not reverse well. Many place Blackface fonts, like Blackmoor above, in their own font category. They were used for body copy in the early days of the printing press. Today we find them difficult to read. Treat them like decorative fonts: Use them sparingly and with care.

figu7a_3

Characteristics: As the name implies, slab serif fonts have uniformly thick, fat serifs. Some slab serif fonts look like a hybrid between an old style font and a sans serif font. The result is sort of a sans serif with fat serifs, if you will.

BEST USES: Slab serif fonts were invented for retail display advertising so they work well in print headlines. Some slab serif fonts can work for body copy, but old style fonts are generally a better choice. Slab serif fonts tend to work a little better in reverse because of their beefier serifs.

Slab serif fonts also work for Web and television but in the same limited way as decorative fonts.

figu7_25

Characteristics: Modern fonts have extremely thin serifs, and their stress lies on the vertical, unlike old style’s diagonal stress.

BEST USES: Modern fonts work well for headlines, decorative details or ornaments. They are not a good choice for reading copy, and reversing them is not a good idea because of their ultra-thin serifs. Likewise, they are not a good choice for screen applications.

Now that we are a little familiar about font, let’s think over the process for choosing font for a design.

When deciding a font, consider these factoids for choosing a font:

  • Choose one font for your body – Readability is key.
  • Choose a second contrasting font for headlines – Choose a phone that goes with everything (sans serif fonts are rather neutral and go well with most other fonts)
  • Consider applying additional font styling for aesthetics (size, bold/italics, caps, and spacing)

When it comes to the concept of spacing in your font, consider the concept broader:

Leading (leh-ding) is another, more fancy term for line spacing.

What’s it Called?

Leading/line spacing is the space between lines. Decrease it when you are creating large multi-line headlines. See the difference?

Big headlines

need adjusting

Big headlines

need adjusting

Tracking refers to adjusting the spacing between characters across a string of characters. It can be increased or decreased for copyfitting or for effect.

Tracking  increased

Tracking decreased

Kerning refers to adjusting the space between individual glyphs. We applied a kerning adjustment of -78 to the pair on the right.

W e We

The concept of line spacing refers to “fine tuning” your type.

When it comes to fine-tuning your type, knowledge of kerning and tracking is very important.

Basically, when a designer wants to manually adjust the negative space between two characters is kerning.

When a designer wants to adjust letter spacing across a strong of characters, like a sentence or a paragraph, that, my friend, is tracking.

“Adjust tracking with care. It’s easy to go overboard and end up with squished text. Try to limit tracking adjustments to “-10” or less.”

When it comes to the web, the above concept applies accordingly:

You can apply leading (referred to as line spacing in the context of websites), tracking and kerning to Web type, too. In the case of line spacing and tracking, Web designers write specifications (lines of coded visual instructions for Web browsers) in Cascading Style Sheets (CSS) to control how much space appears between glyphs or between lines of copy.

Kerning on the Web requires a bit more effort, specifically, a little programming/scripting. But it is possible.

Before you get excited about creating widely-tracked headlines on your website, a word of warning: The CSS specifications exist, but they are not universally supported on all browsers. Typesetting that looks great on your computer screen may not appear at all on your best friend’s computer. Don’t let this stop you from experimenting. Just remember to test, test, test.

The rest of the chapter reads as a guide for Microsoft Word.

Basically, keep your type uniformed, visually flowing, and closed professionally.
(Just think college essays).

Initial and Drop Caps!

Initial caps sit on the baseline and rise upward well above the line.
Drop caps drop down into several lines of the paragraph.

drop-caps-initials-3

Both are excellent ways to create a dynamic eye entry point for your lead. You can set their color and size (in points or numbers of characters deep/tall). You might even set the font to something that contrasts with your body font.

Alright, let’s punctuate like a professional typesetter:

figu7_11

The last portion is the icing on the cake.

Ligatures and swash alternates.

A Liga-What?

Confused about the difference between swash alternates and ligatures? Let us explain.

figu7_13

Swash alternates are different versions of individual glyphs in a typeface. The first letter in the pairing is the standard italic glyph. The second is the swash alternate.

figu7_14

Ligatures are decorative replacements for common glyph pairs. They address troublesome pairings like “f” and “i” in which the terminal of the “f” bumps into the dot on the “i.” Some classic ligatures are shown here. Note the solution to the “f” and “i” collision.

Here’s some important information:

On your program platforms, there are such icons as OpenType and TrueType.
I’m sure everyone has seen these icons:

opentype_flavors

For TrueType font, there are the standard 265 characters but the OpenType fonts go well beyond the standard 265 characters:

[OpenType fonts are] designed to be functional across platforms to work on both Macs and PCs, these fonts may have as many as 65,000 characters. In addition to all the traditional punctuation marks and accent marks, OpenType fonts offer some or all of the following type options:

Ligatures. Ligatures are specially designed letter pairs—a single glyph meant to take the place of two traditional letters. Ligatures were created for certain letter pairs that join awkwardly because of the position of the dot of the “i” or hook of the “f,” for example.

Swash alternates. These are just what they sound like: decorative alternatives to traditional italic letterforms. While swash alternates don’t work well for body copy, they can be beautiful when used in large decorative headlines, as initial caps or in pull quotes.

Old style figures. Ever notice that normal numbers often look too big and clunky when typed in with the normal flow of text? That’s because the height of regular numerals is the same as uppercase letters. Regular numerals have the visual feel of all caps. An alternative is to use old style figures. Old style figures have varying x-heights, ascenders and descenders just like the rest of the letters in a font. Visually, they blend in much better with text.

Dingbats. If you’ve ever seen a decorative ornament to indicate that you’ve reached the end of the narrative, you’ve seen a dingbat. They look like little tiny pictures, but they really are font characters. Many fonts have a few as part of the 265-character set. Typically, OpenType fonts have more of them. Then there are fonts made up of nothing but dingbats.

figu7_15

Because they are technically font characters, you can style dingbats as you would fonts. You can change their size, color and orientation. They also can function as bullets, although, as always, use some discipline. Not all dingbats make good bullets.

Paired with letterforms, dingbats can be logos. Strings of them can become section breaks or borders. Or they can stand alone as artwork.

Font is the core tool to communicate and it is pretty important to consider carefully which fonts you will utilize.

Chapter 6

Oh my lanta, 30 more minutes until class!

Chapter 6, here we go.


This chapter is all about layouts.

What to put and where to put it.

First and foremost, creating and using a grid.

Really, it’s all about the aspect ratio.

Different varieties of ratios are width to height ratios for different media (tv, computer screen, smart devices).

figu6_2.jpg

Here are the standard aspect ratios:

Tablets and Smartphones 1.78:1 or 1.33:1

U.S. Standard TV and Computer Monitor 1.33:1

U.S. Widescreen TV and Computer Monitor 1.78:1

U.S. Cinema 1.85:1 or 2.35:1

Most 35 mm Film and Digital Still Photography 1.5:1

Remember what I posted before about boundaries?

Here is where they make their transition to a recurring character:

Remember to draw your sketch in proportion to your design’s final format.

For Web wireframes, create your sketch in proportion to the initial screen viewing area, generally 1024 × 768 pixels (basically a horizontal rectangle).

Proportion is essential.

You can’t fit a square peg in a round hole, and you can’t fit a horizontal ad in a narrow vertical magazine column.
In the world of screens, the concept of proportionality is known as aspect ratio.
To keep your sketches in proportion, we recommend the use of graph paper.

It helps.

Hate to be that blogger that copies and paste but trust, this is important:

The Ingredients of the Grid: Mix and Match to Make Your Own Layout Framework

figu6_3.jpg

Format. The outer edges of your page or screen are effectively your base gridlines. To set your layout width and height, you’ll need to do a little research to see if there is a standard size for your layout. For instance, a common video clip size is 640 x 480 pixels. In any case, format dictates the type and placement of the other gridlines you’ll need for your layout.

Margins. Margins are the bands of space at top, bottom, right and left of your layout. When a print layout includes a spread— two pages side-by-side—the side margins become inner and outer margins. Some layout types have standard margins, so again, a little research is required. Printed magazines, for example, may require larger inner margins to account for binding. Depending on your layout type, it can be a good practice to make your margins correspond with live area.

Live Area/Safe Area. Live area or safe area is like a safety fence inside the boundaries of your paper or screen respectively. Any content falling outside of the “fence” may be cut off or disappear from view. It is especially important to respect safe area if you are designing for television. Different television screen aspect ratios make cropped content a real possibility. If you set up margins to correspond with live/safe area, you can keep your content intact and viewable by placing it inside your margins.

Trim and Bleed. Trim is a commercial printing term referring to the physical dimensions of the flat page. Trim size often corresponds directly with format size.

The effect of running material— background color, visuals, type—right off the layout is called a bleed. To create such layouts, designers extend bleed content just beyond the trim size. Commercial printers take the slightly extended design, print it to a larger sheet of paper and trim the edges to achieve the desired finished size. This is where the term trim size comes from, by the way.

Print content may bleed or not. Screen content, however, always bleeds. Even when the content of Web pages, video or commercials stops shy of the viewing device boundaries, something—typically a solid color—fills the rest of the screen. Make a point of choosing that something to fill this space, preferably a something that complements the rest of your design.

Columns, Alley & Gutter. Columns are the quintessential unit of the grid. In fact, we often refer to a grid as a two- or three-column grid. Columns provide a useful framework for determining size and position of layout components. And, as an added bonus, when text is set in the correct size column, it’s easier to read.

figu6_4.jpg

An alley is the negative space between a layout’s columns. A gutter is the oversized margin between two facing pages, such as a newspaper’s fold or a magazine’s binding. Alleys and gutters provide essential white space that keeps elements separate and text readable.

 Remember in a previous post about columns and margins and buffers?

Yeah, this is where it gets hot and heavy.

So, in a layout, there are columns for the content, correct?

Alright, take a look at this example that I took from the textbook:

figu6_5.jpg

On the left here, there are two columns. The second image on the right, we have three columns. The left version is ideal because it makes reading easier versus the 3 columns that you have to try to keep in focus with. 

Sometimes more isn’t better.”

I bet you’re asking yourself, “When do I know how many columns to use in a layout?”
Alright, so here’s what was advised in the textbook:

When determining how many columns you comfortably should use, balance aesthetic preferences with readability. For maximum readability, column widths should fall within the range of 2–5 inches or 144–360 pixels.

With a little bit of math and pixie dust…

From the width of your page, subtract the left and right margins plus a little more for your column alleys, and then divide by two (two inches for print) or by 144 (144 pixels for Web pages). This should give you a number that’s close to the maximum number of columns you can use on your page.

For those who are more kinesthetic learners:

“Let your specific content needs dictate the width and number of your columns.”


Let’s say that you have all the necessary items and contents needed to create your design, here’s what happens step-by-step:

  1. Establish a focal point
  2. Add type
  3. Strategically place your visuals, if multiple consider balance, uniformity and size.
  4. Consider the negative (white) spaces.
  5. Hierarchy! Visual hierarchy is key.

If the layout has more than one topic on the same page or screen:

  • Consider the modular page design

figu6_13.jpg

A Sidebar On Designing Sidebars

Sidebars are a good option for:

»   Breaking up text in the absence of good photography

»   Highlighting key information lifted from your text

»   Providing additional information related to your adjacent copy

»   Adding interactivity when presented in the form of quizzes or lists

»   Giving your page a little pop of color

When Designing Sidebars:

»   Make them contrast with your regular copy by using a different font

»   Give them a little color with colored bullets, headings, a border or a background box

»   If you use a border or background box, make sure your text doesn’t crowd the box. Give yourself ample margin, inside and out

Multiple-Page Layouts!

A multiple page layout is a website. A website that would require web script proficiency.

When it comes to websites, visual unity is key.

Consider audiences or viewers, web-based attention spans are cut shorter and would take great lengths of aesthetics and graphics to draw their attention and the use of aesthetics and graphics requires great sense of scale, balance and uniformity.

One key component is navigation.

Once a you’ve established flow and function in your site, navigating the site will come easily to the viewer/audience.

figu6_16.jpg

Remember, good layout works for, not against, your visual communication objectives: capture attention, control flow, convey information and evoke emotion.

Begin the layout with a grid and an irresistible focal point. Use the focal point to point to, not from, your layout. The Gestalt of proximity, similarity, continuity and closure can help with arranging the layout’s flow. Creating a visual hierarchy also aids flow.

For multiple layouts on the same screen or page, modular design is your new best friend. For laying out multiple pages, similarity is the key to visual unity.

Chapter 5

Hey y’all.

Let’s jump into this section as I have class in an hour haha.

In this chapter, we went over seven elements of design:

1.  Space

2.  Line

3.  Shape/Form

4.  Size/Scale

5.  Color

6.  Texture

7.  Value

Six principles or rules of good design:

1.  Focal Point/Emphasis

2.  Contrast

3.  Balance

4.  Movement

5.  Rhythm/Pattern

6.  Unity

Finally, we also covered the four laws of Gestalt theory:

1.  Proximity

2.  Similarity

3.  Continuity

4.  Closure


Let’s break it down, yeah?

Elements of Design

#1 Space – Come on, really? All we’ve done was talk about spaces (positive and negative space, white or black spaces)

#2 Line – Really, this is all you need to know about line for now.

Lines may be straight, angular or curvy. They may be thick or thin, continuous or interrupted. The edges of a page or screen represent lines. Negative space can form lines, such as the lines of margins.

#3 Shape/Form – Shape or form, both the same meaning. Form comes in two different types: organic and inorganic.
Organic shape are shapes found in nature, organically forms; leaves, apples, water splashes, etc.
Inorganic shapes are man-made; squares, triangles, rhombuses, hexagons, etc.

#4 Size/Scale – Example: 125 × 125 pixels or 11-point type

#5 Color – Too broad of a subject. Mm, think of aesthetics.

“This looks good like this.”

                    “It’d be better if it was this.”

                                                             “Maybe in this hue.”

                                                                                            “Let’s make it more saturated.”

                                                                                                                             I think you get the picture.

#6 Texture – Depth and dimension, 3D.

#7 Value – Tones, light and dark.


Principles or Rules of Good Design

#1 Focal Point/Emphasis – Have a focal point, it gives emphasis. How? Follow this:

images

The golden proportion. The golden proportion is a ratio: 1:1.618. When applied to a golden rectangle, it becomes a kind of compositional grid suggesting asymmetrical placement of items on the layout.

The golden proportion. The golden proportion is really just a ratio: 1:1.618. Mathematicians and scientists are as enamored with the golden proportion as artists and designers of all kinds are—and have been for centuries. Sometimes called the divine proportion or the golden ratio, it has been invested with divine, even magical, properties.

What makes this proportion special is its mathematical principle: the ratio of a to b is the same as the ratio of b to [a + b]. For our purposes, it looks like this: Draw a perfect square. If you increase the perfect square’s width by multiplying it by 1.618, you create what is called a golden rectangle. You’ll find golden rectangles everywhere in art, architecture and design.

images

The rule of thirds. The layout for this save-the-date postcard uses the rule of thirds. Key information sits at one intersection of the grid. The hummingbird, which is the focal point graphic, sits at another.

Leaving the math aside, artists and designers like the golden proportion because when applied to shapes like rectangles, triangles and even spirals, it seems to produce a universal visual aesthetic appeal.

The golden proportion applied to a golden rectangle becomes a kind of compositional grid suggesting asymmetrical placement of items on the layout. In fact, a golden grid uses the golden ratio to establish an irregular 3 × 3 grid on the golden rectangle. And that leads us to the rule of thirds.

The rule of thirds. For the mathematically challenged or uninterested, the rule of thirds will seem wonderfully simple compared to the golden proportion. Like the golden proportion grid, the rule of thirds is merely a 3 × 3 grid that suggests layout placement in order to create visually interesting asymmetrical designs.

The rule of thirds simply divides the layout—whatever its format—into an evenly spaced 3 × 3 grid. Then the focal point goes on one of the four gridline intersections. Voilà, pleasing asymmetry guaranteed.

Another way to think about the rule of thirds has to do with symmetrical and asymmetrical balance. If we associate symmetrical balance with the number two, as in two symmetrical sides of a bisected layout, then the quickest route to asymmetry is to work with the number three, as in a 3 × 3 grid.

#2 Contrast – Why do we contrast in design? Emphasis, right? Right.

#3 Balance – Oh, holy hannah. Balance is everything. Even if a design looks imbalanced, it most likely was designed to look that way but if you look carefully, there’s an order in that chaos.

eye-test-screen-print-reduced-300x300

#4 Movement – Action, speed, blurriness. If the concept involves action or movement, all that matters is if the design has a flow for ease. Be strategic about it.

#5 Rhythm/Pattern – Just like movement, rhythm and pattern in a design can actually give a sense of movement at how your eyes travel across a design based on the rhythm and/or pattern you used in your design.

#6 Unity – Does the design work together? Does every piece plays its part in the design? Yes?

Good, you have unity.


Gestalt Theory

Gestalt – shape/form. This concept was a psychological study regarding how human beings perceive objects.

What was discovered:

The brain automatically and unconsciously simplifies, arranges and orders objects the eyes see. Specific patterns of perception emerged from the research, which became the Gestalt Laws. Four of these laws are of particular interest to designers.

Proximity – Distance

images

As discussed before, clustering instead of cluttering, right?

Right.

Similarity – Just like clustering. We group things based on likeness.

Continuity – Movement or implied lines.

images

On the left, our minds see a single cross shape instead of four shorter converging lines. On the right, our eyes follow the direction of the A’s swoop and continue on to the star.

 

Closure – Just like continuity, our minds fill in gaps or follow movement to understand.

Gestalt in Action:

images

Applied Gestalt

Proximity. This Web page includes a visual, navigation text, a headline, some body copy and three different lists. That equals seven different things viewers have to scan. But using proximity to group the visual with the headline and the navigation and then clumping the three lists together reduces the number of areas to scan from seven to just three: a clump in the header, the body copy and a clump of lists.

Similarity. Similarity dictates that every navigation item be typeset in the same font and color as every other navigation item. That similarity among navigation items signals readers that each item is part of the same cluster of navigation options. Similarity also produces unity through making the three lists look alike.

Continuity. The “J” in “Join us” points to the lead of the body copy. Our eyes also follow the invisible gridlines tying screen elements together both vertically and horizontally. The top of the body copy lines up with the top of the boxes listing classes. This draws the viewer from one element to the next.

Closure. The headline “Center for the Arts” is not composed of letters. The words actually are letter-shaped holes punched out of the visual image. Our brains mentally close the gaps and allow us to read those shapes as words.

Week 3 Lecture / Chapter 4

Continuing onto Chapter 4 during lecture.

In this chapter and lecture we basically overview the do’s and don’t’s regarding layouts…

Or, as the chapter titles it: “Layout Sins: 13 amateur errors”

Here are the 13 sins:

1. Centering Everything

2. Warped or Naked Photos

3. Too Many Fonts

4. Bulky Borders & Boxes

5. Cheated or Missing Margins

6. Stairstepping

7. 4 Corners & Clutter

8. Trapped Negative Space

9. Busy Backgrounds

10. Tacky Type Emphasis: Reversing, Stroking, Using All Caps & Underlining

11. Bad Bullets

12. Widows & Orphans

13. Justified Rivers

Let’s go down the list in detail…

Centering Everything!

ds-basic-alignment-3

I admit to this sin.
As you can see in my previous entries, I favor center alignment.

However, I like to think that I use it in a stylized manner. 🙂

Although centered content can communicate efficiently but it can come off traditional and conservative.

In other words…snooze-fest.

My attention averted elsewhere.

pokemon-go-field-test-starts-today

Do’s for centered alignment content:

Left or right aligned layouts give the viewer’s eye a nice straight vertical line on the right or the left to follow top to bottom. Centered layouts have no such line. The eye bounces around in search of the next eye entry point.
Centering is a composition issue, meaning how you compose or arrange items on the layout.

Warped or Naked Photos!

A warped photo is a photo that you tried to fit into a layout by stretching or squeezing in the content to fit it well.

images

Without a border, the sky blends into the background. The photo needs a hairline border.

Naked photos are photos that require a border, however, not all photos require a border. A photo requires a border when the photo blends with the color of the screen or page to mark its edges.

Although, if one photo does require a border, then every photo or illustration will also require a border to maintain consistency and upkeep visual flow.

When a photo border is necessary, use a hairline rule (as thin as a strand of hair). Or change the background color outside the photo to contrast with the edge of the photo. The idea is subtly to mark the photo’s edges without distracting from the photo. You want the viewer to think, “Cool photo,” not, “Whoa, check out that bulky border.”

Too Many Fonts!

One of the core tools for communication are words, specifically, fonts.

“The right fonts bring character, color, texture and pattern to layouts. Which means they must be chosen carefully and with purpose. It also means you don’t want to put too many in the same layout.”

Be scarce about font choices when creating a design.

Too many decorative and loud fonts on a design will result in “visual overload and clutter”.

5 Steps to Visual Success

Avoiding the sins results in a very different look. This is how to make a layout work:

1.Establish a clear focal point. A properly proportioned photo and large contrasting headline provide a clear eye entry point into this design’s layout.

2.Minimize the number of groupings the eye must scan. Cluster like with like, and make negative space work for not against flow. Instead of “4 corners & clutter” all over the page, this layout clusters everything into four key groupings: photo and headline, bullet list, body copy and tags.

3.Guide the eye with visual sightlines. Strong verticals from left-aligned copy blocks and tags give the eye a clear visual path to follow.

4.Set type properly. This design limits all caps to a large one-word headline. Choosing a single font family for type readability creates visual unity through similarity. Other typesetting details such as proper bullets are spot on. No tacky type here.

5.Use simplicity and restraint. Need we say more?

images

This design utilizes the 5 Steps to Visual Success

 

Bulky Borders and Boxes!

Try not to use too many borders and boxes in a design. Some designs looks best without borders and boxes, it can even be aesthetically appealing without borders and boxes (minimalism).

Screen Shot 2016-07-25 at 7.58.39 PM

The problem here is clutter choking all the negative space. The fat border clutters the overall layout while the lack of margins inside the border strangles the content.

If you need to border or box, think “barely there.” Think lingerie straps. Even better, think twice before using a border or box at all. Negative space can do the same separating job only without the showboating and claustrophobic effect.

Try to avoid using borders or boxes unless it is absolutely necessary.

Cheated or Missing Margins!

When absolutely necessary to use borders or boxes in a layout, it is necessary to start all over again “with margins inside the border or box.”

Margins. Margins. Margins.

When it comes to collateral and news designs, they utilize boxes for related sidebars, breakouts and pull quotes.

Web pages utilizes grids of boxes. Every box requires a set of margins.

When a text box has margins, they’re called “inset”.

Don’t be stingy with your margins—wherever they appear. Train your eyes to spot areas where margins of negative space have been cheated. Remember, white space is not your enemy.

Stairstepping!

A lot of designers fear of leaving white space or negative space. It’s not entirely bad or good to leave white space, sometimes we can use that space to provide emphasis to the content.

One of the things that designers tend to make a “whoopsie” on is picking and choosing where to place images or text to fill in the white spaces or the “negative” spaces.

The reason it is bad to fill in blank spaces with extra content is to avoid a busy site or page. It’s over-stimulating and a lot of viewers or the audience would find that to be cluttered and would lose interest real fast.

There are few things that kill readability and flow more than stairstepping. Align your elements vertically or horizontally, and let the remaining white space do what it does best: Frame and highlight your important content.

4 Corners and Clutter!

This no-no goes hand-in-hand with Stairstepping. The reason newbie designers would feel compelled to fit or stretch things to fit the four corners of any site or page is to avoid white spaces. Just like stairstepping, it would leave your content with a sense of overwhelming or anxiety and leave things cluttered and make your site or page looking uninteresting.

Avoid this, please.

Instead of cluttering content, try clustering them together. Clustering is when you group pertinent information together to convey a sense of order and organization and can actually display a sense of professionalism in your work!

ClusterSampling

Trapped Negative Space!

Trapped spaces.

No one likes to feel trapped and suffocated, right?

What’s even worse is seeing something trapped, especially in design.

A trapped negative space is, “a puddle of negative space landlocked inside the layout.”

It’s like a bubble that can’t escape.

Trapped negative spaces are attention-grabbers. The viewer can’t help but to go right where that white puddle has been left.

Let’s avoid doing this, yes?

images

Busy Backgrounds!

Busy backgrounds goes right with stairstepping and cluttering to avoid white spaces. A busy background is a background that has too much going on that it takes attention away from the core content.

images

Tacky Type Emphasis: Reversing, Stroking, Using All Caps and Underlining! (phew)

As the section title states it, it is tacky to reverse black and white in a design, to over-use glyphs and over-use stylized strokes to convey class and sophistication, and, of course, the overtly used ALL-CAPS and underlining any text to over-emphasize anything.

964454b2be15ffea0b6540fdc1d0ed0f661083a2fbff81e5eb50e535f01e8085

Bad Bullets!

Oh, lordy-lord.

Bullets.

You know, those dots that makes content look like a grocery list…

powerpoint-dos-and-donts-9-638

Honestly, y’all…

Widows and Orphans!

These terms though…

Widow – a few lonely words or a hyphenated word stranded at the bottom of a column or leg of type.

Orphan – a few lonely words stranded at the top of a leg.

widows-orphans

And, finally…Justified Rivers!

river_5550

See those long vertical flow-y white spaces? Yeah, justified rivers. In this case, it’s okay.

Unless you’re a professional writer or an editor for a newspaper, you can pull this off, however, a newbie designer such as us, let’s avoid this unless informed otherwise OR you feel confident enough to utilize this method in your work.

A way to “drain” justified rivers of white spaces:

1.  Increasing the width of your column, thus the length of your line of type.

2.  Reducing the font size.

3.  Or both.

“That covers all 13 offenses. Now go forth and sin no more. Don’t forget to take the checklist with you.”

Week 3 Lecture / Chapter 3

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.

binary-128725-54544

28-user-flow-wireframes.jpg

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.”

456718

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.

Why?

“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.

images

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.

images

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).

Headlines!

After setting up some visuals, we head down the headlines path.

Daily-News-headline-newspapers.jpg

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.

Copying!

When utilizing other content other than your own, simply treat it with respect and give credit to that person.

Textbook tips:

»  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.

Tags!

Only use tags when it’s necessary.

Overtly using tags will disrupt flow and aesthetics.

images

Chapter 2

In the previous entry, we discussed Chapter 1 and also briefly talked about the process of planning.

In this chapter, we’re going to elaborate on the planning process of designing.

One of the key part of planning a design is the research and brainstorming process.

Let me provide a brief overview of what will happen in this chapter:

Graphic design research: information gathering and critical thinking about the project at hand. Next comes brainstorming: tapping into creativity and putting pencil to paper. So we’re going to have to ask you to step away from your computer.

The researching portion is to identify and see who your clientele are and what they like and aspire to obtain in a design.

Some key questions to ask yourself in the researching process:

What is the objective?

Who is the audience?

Is it accessible?

Does the design need to coordinate with other design work?

Who are the competitors, and what does their visual communication say?

How will the final product be delivered or distributed?

Once you’ve worked out the answers to those questions, that’s when the party begins.


As a designer, it is really important to make sure that your designs always look appealing or aesthetically pleasant.

                                                         (Remember from before, form and function)

The premise to design for an organization or a client is to help them with their visual identity – what makes them recognizable.

A little quick tip from our textbook when working for a client or organization:

Get vector copies of the organization’s logos. Vector images use geometry and math to produce and preserve the proportions and quality of line-art illustrations. You also need to know the organization’s rules and regulations for using said logos.
Ditto on official colors.
Know the approved colors, along with the rules for producing and using them. You can’t plan your whole design around shades of lilac if the organization’s look and feel require fire-engine red.

“Don’t be shy to ask questions.”

When working a gig, it’s really great for designers to check out the competition and to see what works they have and what styles they would portray in their design.

In any instances resulting with competition, it’s probably best to check them out and see what they got, right?

Right.

Finally, when all is said and done, the finale to your design is the delivery and distribution of your work.

This, right here, is the most important.

Nothing is more important in determining the physical size of a design project than format, i.e., the intended channel, medium or vehicle.
Print or digital?
What kind of print?
What kind of digital?

“For ads—print or digital—you need the proper dimensions or technical specs (specifications). Size is not always about column inches or fractions of pages, either. Web banner ads measure in pixels.”

“For Web graphics, file size—the amount of memory a file takes up—is as important as the pixel-by-pixel dimensions. For video and multimedia, add duration—lengths of time in seconds or minutes—to the specifications list.”

After the work, production, delivery and distribution has been settled, then comes the awkward part about finances.

For beginner designers, it’s best to figure out the industry standards in payments to get the golden check for your hard work.
This way, you can avoid the awkward hum and hods regarding your paid dues for your designs.

No-brainer here, budget impacts design, including how many hours the boss or client is willing to pay you to work on it. Budget also determines what kinds of visuals you can afford, along with such things as the number of ink colors you can use for a printed piece, the type and number of widgets you can add to a website or the complexity of an animated info-graphic.

After all the research has been completed, it is now time to brainstorm.

BRAINSTORM!

brainstorm

When it comes to brainstorming, try this three process:

Dump: Begin with a mind dump. Download everything you know about it—whatever “it” is. Spit it all out on paper. Make diagrams and draw connections. Free associate guilt free. No holds barred. Quantity rocks. The longest list wins.

Percolate: Then go do something else. Split focus is when you work on two things at once. Ideas simmer while you and your brain tend to chores and other tasks. Those other tasks can be inspiring, too. Exercising and napping are equally productive. Or force yourself out of your comfort zone by trying something new. Have an adventure.

Morph: Now back to work. Change it. Turn it into something else. Or stretch (or reduce) it (or some part of it) to the point of absurdity. Or do the opposite—just to be contrary. Marry it to the random, the incongruous or the formerly incompatible. Think oxymoron. Reject the obvious, as well as your favorites and first choices.

Return to step 1 and repeat the process as necessary. But don’t go it alone if you don’t have to. Brainstorming works best playing with others.

creative-brief

I hate to be a Copy-and-Paste McGee but here’s an example that the textbook provided that I believe to be a great excerpt to read:

I Need a Great Idea… I Need a Great Idea…

The wrong way to come up with a great idea is to try to come up with the great idea. Nothing puckers up the creative juices like pressuring yourself to think of one superior idea.

It’s more fruitful and fun to come up with many ideas. Good, bad, so-so. Let ‘em rip. No criticism. Just scores of ideas. That gets the creativity flowing.

In fact, it’s called “flow” when you’re so focused and productive during the creative process that you lose track of time. And somewhere in that big list you generated, you’ll find a big idea.

Brainstorming Techniques to Stimulate Creativity

Credit for inventing brainstorming as a technique for creative idea generation goes to the late Alex Osborn, the “O” in the legendary ad agency BBDO. Today we recognize that everyone has creative potential just waiting to be exercised.

Try these brainstorming exercises:

I. Fluent Thinking

In the late 1960s and early ’70s, Frank Williams and Bob Eberle, a couple of educators interested in stimulating creativity in schoolchildren, described “fluent thinking” as a way to generate many ideas quickly. The goal is quantity without being self-conscious about quality. Try it:

Write down two-dozen ways to…(insert your project).

II. Scamper

Eberle also came up with the SCAMPER method:

S—substitute it

C—combine it

A—adapt it

M—magnify or modify it

P—put it to other uses

E—eliminate it

R—rearrange or reverse it

III. Cubing

Cubing, from writing guru Elizabeth Cowan-Neeld, refers to the six sides of a cube, as in think outside the box:

1. Describe it

2. Analyze it

3. Compare it

4. Associate it

5. Apply it

6. Argue for or against it

Brainstorming   8iAj9Xbia great ideas

As stated in the previous entry, sketches are important to creating a great design for a job. Always have myriads of thumbnails, roughs and sketch ideas for a job.

The textbook described for web designers the name of sketches as “wireframes”.

YouTube

Wireframes or thumbnails focus on screen order, organization and function, not aesthetic choices.

Dummies. In the world of print newspapers, magazines and newsletters, the thumbnail sketch is called a dummy. Like other types of sketches, a dummy is drawn on paper, smaller than actual size but always to scale. Whether very simple or highly complex, the dummy diagrams each page, showing the position of every advertisement, story, photo and other page component. While every publication has its own unique shorthand for creating them, dummies traditionally include wavy lines to indicate text flow and boxes to represent photo and illustration position. For headlines, numerical notations indicate font size, number of columns wide and number of lines deep.

Roughs & comps. The next step in the design process varies designer to designer. For some, the next step is to turn the best couple or few thumbnails into roughs, meaning slightly more detailed, polished sketches. Other designers skip the rough and produce a first draft of a design on the computer.

Beyond that, the next step is a comp, short for comprehensive. The comp is a fully detailed final draft suitable for showing the boss or client. A complex print piece, such as a media kit tucked inside a custom pocket folder, might need a physical mockup the bosses or clients can get their hands on, thus wrap their brains around.

Mockups & beta sites. In the Web world, comps are a two-step process starting with the creation of a mockup and finishing with the construction of a beta site. A mockup is a rendered image of the overall site design, including selected fonts, colors and images. While the mockup doesn’t demonstrate the site’s moving parts, such as slideshows or dropdown navigation, it does illustrate the overall site look and feel. A client-approved mockup is used to create many of a website’s assets, such as banner images and background patterns or gradients.

Once the client or boss approves the mockup, designers proceed to building the beta site. A beta site is a working version of a website that the public can’t yet access. The beta site lets the boss or client experience the interactive components and lets the designer and developer work out any kinks before the site goes live.

If we step back to review the overall process for any kind of design, we find that traditionally the designer’s workflow has been sketch, rough and comp. But computers changed the game. Today, workflow varies for each artist. Some share thumbnail sketches with their bosses or clients to get early feedback. Others go right from sketch to full-fledged comp, skipping the rough stage altogether.

images

“The workflow for many designers is sketch, comp, final.”

Some execute an additional set of sketches called “roughs” between the sketch and comp stages.

The chapter does conclude with a nice bidding farewell for the time-being:

Assuming you’ve done your research legwork and your brainstorming homework, then Brava. You have our blessing to turn on your computer.

Chapter 1

The class was assigned to go over two chapters and to summarize what the chapter discusses each chapter per blog.

1:1

As I read through the chapters, I started to see what the chapter was talking about…

 

The first chapter introduces the idea of visual culture and that the culture “…is a language”.

For example: the wheelchair symbol is a universal symbol for “handicapped” or “disabled”.
handicap-sign

or the crossing sign:
3670134
(I jest with the T-Rex but you get the idea)
The diamond yellow sign is a universal sign for “yield” or “watch out”.

As the chapter progresses, we were introduced with the concept of “form” and function – mass production capitalism.

In the textbook, the definition of “form” is material artistry – “what something looks like.” The concept of function, from the textbook, explains the function or “reason” for material artistry. To me, the function of visual culture is to make it appealing to make some money.

The next section in the chapter discusses the concept of design and timelessness. The idea that a “good eye” can catch any era through the design makes the design a good one.

We_Can_Do_It!

As for this, beautiful piece, this can be categorized timeless or “classic” or “retro”…or “old-school” (old skool, idk…)

As the section progresses through explaining the concept of time and design, we transition swiftly to the planning process as a graphic designer.

“Graphic design is planned.”

As designers, we really need to master the technique, “planning”. Time moderations and adjustments is key as a designer. An organized designer is a successful designer.

That may seem pointed but it makes sense. Every designer is different and we have our own flow in life but as long as their is an order in our chaos, success is in our future.
– Jason Ho, CEO of Bad-Ass, Inc.

THUMBNAILS!

Yes, a designer’s tool are small sketches:

Small sketches, called “thumbnail sketches,” help the designer establish attention-grabbing focal points and determine placement of the remaining elements for logical and effective order. Readability, usability and visual appeal are critical. A poorly designed, poorly organized layout fails to communicate and costs both the designer and the organization time and money.

layout

The use of design, for the most part, is to communicate. Whether it be to an audience, employer, or client… The premise is to communicate visually.
The textbook explains it as, “media literacy“.

In short, if the design is not-so-attractive, it’ll be “media illiterate”. The design will not communicate properly and your audience will be lost and lose interest.

bad-logo-designs-awkward

As we transition from the good and bad designs and the reason why we have the do’s and do not’s of design the book elaborates with this example:

Good Graphic Design Does Four Things:

It captures attention.

It controls the eye’s movement across the page or screen.

It conveys information.

It evokes emotion.

In reference to the 4 tiers of design, the book furthers the concept of good design by providing three building blocks of design:

  1. visuals
  2. typography
  3. space

The visuals are self-explanatory, as the book describes. Any visuals that stimulates your brain is a good tool to utilize for your design.

The typography conveys the message and can set the tone to your design.

Space, space, space.

Space is key in your design. Once you have your content, you can utilize positive and negative space to stylize your design.

With all of these key components, you have a decent design that covers the building blocks and utilizes the 4 tiers of design successfully.

Ta-da!

Don’t break the rules of design out of ignorance. Learn the rules. Then break the rules if you have a reason to. Hey, if it works, it works. Just keep reminding yourself that you have a job to do. It’s called visual communication.