| Thots and observations about design 2011 By Jim Watson How to make The New York Times crossword app even better The Times has established itself as a leader and authority in crossword puzzles. Its app for the iPad provides archives of puzzles and a user-friendly navigation on the puzzle page. However, the menu pages are not as well thought out. There are at least 6 pages of menus on the existing site: ![]() ![]() ![]() ![]() ![]() ![]() Notice how much space is wasted on several of those pages. The photo of the skyline is unnecessary as the Times is basically a national paper and the puzzle app is sold world-wide. The banner The New York Times doesn't need to be quite so large - the user already tapped the app and saw the loading screen. The user must also tap to other pages to get info. Improved app layout Those 6 pages shown above could be combined into just one. Here are two layout options: ![]() ![]() On the left is the app in a newspaper style layout with columns, photos, and text. The example on the right includes a column of menu items on the left. App users soon learn item and menu placement and procedures. They scan the menu to find what they are seeking. The single menu column makes that quite easy and comfortable. On the right side of the page are the puzzle calendar and a window for info from the various links: ![]() ![]() ![]() Putting all the links on one page minimizes links to other pages. Some of the menus can be combined to also reduce the number of links. While both options are an improvement over the existing app, the one on the right better exploits the medium of apps. It doesn't include gimmicky references to a newspaper: grey background and selvaged edges. Lessons: Embrace the new medium and design apps that reflect the technology. Avoid simply transferring the design principles from other media to the app medium. Side by side comparisons ![]() ![]() A thoughtful idea ![]() ![]() From Reuters: Ever wanted to meet and greet your loved ones at the airport to be sure they don't miss you in the crowds? Then try Amsterdam's Schiphol airport, which now has the world's first vending machine capable of printing out personalized giant canvas banners in just a few minutes. You can pick your message, whether that is "Missed you Mummy," "I love you," "Will you marry me?," or anything else that makes you stand out from the crowd, choose the font and background design, pay between$6 and $20 depending on the length of the banner, and hit the button. "We came up with the idea because when we were at the airport we'd see all these people welcoming their friends and family with their own banners made of bed sheets and we thought what a hassle using sheets, wouldn't it just be easier to make the banner at the airport," said BannerXpress's co-founder Thibaud Bruna. If the waterproof banners prove popular, he hopes to install the vending machines in other locations. "We hope have them in other airports, but also in stadiums for sporting and music events," Bruna said. Lesson: Be observant of everyday situations around you. There is almost always room for improvement. Another great idea ![]() ![]() A useful gadget to ease the chore of painting - a brush rest and a can opener. Well thought out. Lesson: When addressing 1 problem, explore the total experience to see if other weaknesses can be addressed. A better layout for ![]() ![]() Google introduced a new news reader app. There are lists of stories in a variety of categories. On the iPad page, there is a given amount of 'live area' - the screen space that can be used to display information, as shown on the left. On Google's site, a large amount of space at the top is devoted to a collage of often-meaningless photos. Some photos repeat, some are just filler, and almost none have value to any of the stories. Taking up that much live area requires the user to scroll more to run down the list of articles. On the right I built a layout without the photos to allow the page to list 8 stories instead of 4. I hope in a future update, they provide a setting to allow the user to turn off the photo band at the top. Better layouts for The Weather Channel app ![]() ![]() The High/Low temperature timeline. The format to display temps in the app is a left-to-right sequence of time. However, the low temperatures don't adhere to this theme. The low temps are directly below the high temps (which is impossible - to have 2 different temperatures at the same time). Often, the low temp is in the early morning hours of the next day. Thoughtful: The Weather Channel color codes the temps - yellow for day/high/warmer and blue for night/low/cooler. But, to better convey the sequence passing, the low temps should be between the Highs, as in the doctored example on the right. The example below conveys the temps more clearly and accurately. ![]() ![]() ![]() Use space wisely. On TWC site, when you tap a date, it expands to show the hourly temps and precip. But it only shows 3 hours worth. Notice how much space is wasted and used for useless information, primarily the inaccurate photo in the background at the top. Reducing that space and some at the bottom allows 7 hours to be displayed at once - over twice the number. This allows less scrolling by the user. Tip: Layout web/mobile sites to require minimal scrolling. Lesson: Critique your use of live area to see if its being used efficiently. Just too many options My new dog, Brooklyn, is recovering from surgery which means I have to keep her indoors. Despite several bathroom walks during the day and night, she still pees in the house. Nature's Miracle is a great product for removing the odors and stains from dog pee. But, look how many options there are now: Nature's Miracle Nature's Miracle Advanced Formula Nature's Miracle OXY Formula Nature's Miracle 3in1 Odor Destroyer Nature's Miracle Urine Destroyer What is the difference between Advanced Formula, and Urine Destroyer? Each product claims to destroy urine effectively. So, I asked the clerk at Petco. He had no clue what any differences were. A better way to display museum hours The confusion Like many people, I check a museum's website to confirm their operating hours. The web makes it easy to get such info. But, often, the info listed is not a clear, easy-to-comprehend format. The hours listed on different websites are inconsistent formats and the museums are closed on different days. Here are three examples ![]() ![]() ![]() There's gotta be a better way. Considering the increase of information clutter and the desire to find answers quickly and easily, the principles of information graphics might work well here - providing the information in a visual, easy-to-understand format. Sketches ![]() ![]() ![]() I explored a vertical format, but realized that familiar calendars have the days of the week in a horizontal line with the sequence moving from left to right. But, many people are seeking the hours for just one day - "When do they close on Friday?" The hours ought to be within each day's column. Yes, that makes more sense and is easier to understand. Introducing the hours chart ![]() The concept is simply a visual graph that clearly denotes days and hours. Objectives • Easy to understand, familiar layout of days. • Adaptable to variety of formats. • Easy to recognize on both webpages and print brochures. • Use minimal amount of space. • Visually convey those days that have late hours. • Legible and easy to read typography • Ability to customize the graphics identity of institution and medium. Features • Don't need am and pm - its quite clear that a museum opens in the morning and closes in the afternoon. • The days are grouped into logical sets - weekdays are grouped together and the weekend is grouped together. That respects the way we live our lives. • Easy to pick out of a busy webpage or brochure. • Easy to understand - familiar images and layout. • Takes up little room. • Adaptable to variety of media, uses, formats. Lesson: Visual images are more appealing, intriguing, and memorable than text. Tip: When feasible, consider using charts, graphs, and other visual images in lieu of text prose. Samples, Existing webpage and proposed ![]() ![]() ![]() ![]() ![]() ![]() A correct example of including the day with the date. ![]() ![]() This was shot at SuperTarget, 2011. More info about days with dates. New mark formed by the color intersection in my JRW logo ![]() ![]() ![]() ![]() It highlights the single point in the mark where all 6 colors touch and the cutoff angle in the upper right provides a connection to the complete mark, says to break the rules (of a complete square box), and adds a bit of curious interest. I don't know where I'll use the mark - now, its my new profile picture on my Facebook profile. I'm not sure yet if the mark should include the black outlines. Complete essay on the logo. This week's pet peeve: cars that honk when the doors are being locked ![]() ![]() ![]() Please program your car key fob so that the horn doesn't honk when you lock your car. Most cars have this option - check the Owners Manual for the instructions. Its quite simple to reprogram the key fob. Think how much nicer it will be without those needless honks. The sound of the locks clicking still provides an aural confirmation that your car is locked. The extra horn sound is unnecessary, rude, selfish, and obnoxious. Okay, it may not be quite that bad, but it will still be nicer without the honks. Many car key fobs allow you to double click the button to sound the horn in case you need to find your car in the lot. Better solution: car manufacturers should program the no-honk as the default on the fob. People who feel they need the honk can program the fob to do so. But, for all the people who don't think about it or don't care, the horn option would be turned off. Muddled focus ![]() Take a look at this ad from the New York/New Jersey area. It conveys the notion that the Instant Games in the lottery can come at any time - so be ready. In the ad, we see a guy on the train platform with a bunch of commuters. But, he's ready to go scuba diving on vacation in case he wins an Instant Game. But, this concept relies on the dichotomy between bored commuters and the guy going to take a vacation. For the concept to work - there must be a clear distinction between the two. The snorkel and swim mask are the clues, but notice how easy they are to overlook (you likely did when you first saw the ad). If the viewer misses them, the concept is lost. It just becomes a photo of commuters on a platform. There is too much interference between the concept and the viewer's understanding. Lesson: While concepts can invite participation from the viewer, they shouldn't be so obscure as to be easily overlooked. Tip: Increase the dichotomy between the scuba commuter and the others - position the snorkel to be more obvious. Minimize the graphic crap around the frame so the viewer can focus on the scuba commuter. Please, include days of the week with dates ![]() This mailer tells us there's a big event on the 25th. But what day is that? No clue here. Lesson: To ask the reader to consult another source just to determine a day is rude, inconsiderate, and thoughtless. Its quite easy for designers to respect their readers by providing the day of the week. Remember, we often plan our schedules based on the day, not dates: Bridge on Tuesday nights, classes on MWF, weekly meetings on Monday mornings. Using just the date requires the reader to figure out the day so they can schedule it. Be more considerate and more clear - save the reader some trouble and just give them the day. More info about days with dates. This piece has some other issues that provide lessons in design: ![]() 1. The image behind the text on the left has nothing to do with the Steakhouse, the Jazz Lab, or anything else associated with this event. Worse, it resembles another venue in the area. Lesson: Pieces of graphic design should be concept-driven. Every element in the piece should support the big idea. Most elements in the piece shown above (typography is an element) are just decoration. 2. Keep in mind that folding paper breaks the fibers and exposes the color of the paper. This piece could have been designed so that at least one fold coincided with the edge of the black box, instead of it slicing through the text copy. Tip: Once you consider folds in a piece, add guidelines to denote about where those folds will be so you can lay out the piece to respect those fold lines. One thing that separates the great designers from the good designers is thorough attention to detail. ![]() ![]() 3. One component of design is proximity. Elements that relate to each other in content should relate in visual depiction. The line 'September 25th' belongs in proximity with '5:30, Evening', rather than with 'Live & Silent Auction with Dave Cathey', as shown on the left. The revised version on the right places the fatter line above September 25. Lesson: addressing proximity encourages visually grouping related information. 4. Dave Cathey's name follows the reference to an auction. But, no clue is given as to who Dave Cathey is. Not everyone receiving this piece would know that he is the food columnist for the Oklahoma City daily newspaper. Could easily have stated, Dave Cathey, the Food Dude for The Oklahoman (that's what he calls himself). Lesson: One advantage to a print piece of this size is that there is plenty of room to clarify information. Mailers have a captive audience. The content will be read if it has value. Remember to see the piece through the eyes of the reader. Update: I contacted both the design firm and the Boulevard Steakhouse several days before posting this blog. The Steakhouse replied almost immediately: "Thank you very much, those are very good points." I have yet to hear from the design firm. I'm not so sure. ![]() ![]() Do you want to trust your car to be repaired by this company? ![]() Thoughtless design ![]() ![]() ![]() ![]() A USB plug that doesn't give the user a clear clue which side is up is inexcusable in this era of 'smart design'. if a product needs a catchy line like, "Doesn't fit, flip it" then there is something wrong with the product design. Well-designed products don't need ad slogans help them do their job. I suppose that the USB logo on one side is an attempt to differentiate the two otherwise-identical sides. But, its not enough - many times, its just embossed in the plastic and difficult to see. One tacky solution I have marked the plugs. I once used a multiple plug but it impacted the strength of the signals to the devices so, for now, I'm using this system with duct taped plugs. ![]() Weak rationale for a mediocre logo ![]() ![]() Above is a page from the logo section of the 2011 Design Annual issue of Communication Arts magazine. Notice the logo for a law firm, Hewitt Wolensky. It is nothing great - tired and trite use of initials to represent a firm that no one on the planet will ever refer to by its initials. But, what stands out as weak is the 'rationale' given for the logo: ![]() "classically combines" - just what does that mean? What is classical here? "strong vertical pillars"? If one does see pillars (doubtful), they are open-ended, thin, and fragile with unstable rounded bases. "network of paths in the white space" - there are two paths that aren't even connected, so, not a network. And why emphasise the white paths - they don't help convey the H or the W and they don't seem to fit the attributes of a law firm: trust, professionalism, expertise, or success. "clean, contemporary mark" - clean? the letterforms are gradated and . Contemporary? what does that even mean? "a mark symbolic of this new law firm" - how is it symbolic of a law firm, new or old? "establishing a new paradigm in its field." - what? Paradigm is one of those words (like clean and contemporary) that people use when they don't know what to say but feel they've got to say something. From the HW website: "Hewitt Wolensky builds long-term client relationships based on honesty, integrity and excellence." A shame their design firm doesn't share that mission. What concerns me most is this: the profession of graphic design is still striving to establish itself as a respected profession - there are people who think 'anyone can do it', and there is an abundance of poor work all around us. Bullshit rationale only serves to reinforce the notion that much design is done by amateurs. Tip: Rationale is very important for designers to provide to clients. But the reasons behind design decisions should be honest and true. Lesson1: Most people can see right through weak bullshit posing as design rationale. Lesson2: Just because a piece is accepted into a Communication Arts annual doesn't mean its good design. A store sign above the awning ![]() ![]() This scene in Queens, New York, shows some new storefronts with their shiny signs mounted above the awning - out of sight of the pedestrians. Did I mention this was NYC, where most people get around by walking? This is yet one more example of the designer looking at a rendering of the store and admiring the sign above the door. But, if more designers would see their work through the eyes of the target audience (in this case, walkers on the sidewalk), they might spot these poor design decisions. There can still be signs above awnings for drivers or people across the street, but these need to be supplemented by signs that project from the facade, perpendicular to the building - facing the pedestrian as he/she looks down the block. One of the stores in the foto does have a colorless logomark projecting, but its not quite enough to capture the attention of those unfamiliar with this area. Great idea Somebody was thinking on this one. A device that hangs in a closet while you load it up with clothes. Then, you set it in your suitcase and collapse the sides to take up little space. At your destination hotel, lift out the hangers and hang the entire unit in the closet. Instant unpacking of most clothes. Excuse me, but what is this? ![]() This is the recently introduced identity for a copy and print shop, right across Second Street from the University of Central Oklahoma. ![]() ![]() This store has been in business for about 10 years. People knew it as 'Advanced' or 'Advanced Printing' (left foto). What is the new name? Is it Apmok? APM OK? Wonder why the name change? To a weird acronym? And, what are those 3 balls for? They are not copies of each other. Beach balls? Weird Pepsi logos? ![]() ![]() ![]() This place even offers 'design' services. But, their new logo represents much of what is wrong with design today - amateurs thinking they are designers and producing thoughtless work. Visual art, not design. If you are proposing a new unusual name, avoid adding unnecessary confusing graphic elements. Lesson: an identity should convey the essence of the entity, in a clear, easy-to-understand manner. It should be appropriate, memorable, and effective. What can we learn from this piece of art? ![]() There is almost nothing that is well-designed in the piece. Here are some design elements to address: • Alignment of elements help create order and continuity. • Consistency of line, color, serif, stroke weight add to the cohesiveness of a mark. • A single strong concept for the viewer to focus on aids understanding and memorability. • Each element in a piece should be supportive of the concept - they should not fight for attention - the hierarchy should be easy to follow. • The level of craftsmanship should be of high quality to convey professionalism, trust, and integrity. • Do we really need all these items: the Star of Bethlehem, smoke coming from the chimney, a chimney, a black peak forming half of the letter X, serifs on half the X, a black line connecting the strokes of the L, a red line under the word 'roofing', or an extra stroke extending off the E? Simple way to improve student parking on campus When I chaired a parking advisory committee and when I discussed the parking issue at the University of Central Oklahoma with students in class, I learned that there really isn't a parking problem - there is only a perception of a problem. ![]() ![]() ![]() When school began in fall 2011, some signs were posted to guide students to lots on the north side (foto on left). They stated 'Overflow Parking' but those words only serve to reinforce a negative parking image. "The lots are full, I had to park out there in overflow." "Yeah, I'm way out in the overflow lot." These could be typical statements. We often believe that overflow lots are used only when regular lots fill up and often overflow parking is in fields, out away from our destination. This isn't true at Central, but that is what the signs convey. Suggestion: Replace them with signs that say 'More Parking' (foto in middle). More parking is a positive statement - "Wow, there's even more parking." Signs around campus stating that there is more parking will create a better perception of parking at UCO. Better: Design the signs to complement the graphics standards used on campus (foto on right). ![]() ![]() Reminder: logos are identities, they do not need to include the legal name of the company. Inc. and LLC are types of corporations and need to be clearly communicated in legal documents, but not in identities for the public. Often, the public doesn't care and it just then adds unnecessary information. In addition to adding the task of having to deal with some awkward punctuation. Excluding legal info may entail a discussion with the client on how to best convey a clear identity to the target audience. Lessons Designers often have to educate clients about communication design. Develop design solutions primarily for the reader/user/audience, not the client. How would you pronounce the name of this company: Aegis Roofing ? ![]() I'm not sure, but the historical pronunciation is ee*jus. If true here, then the A probly shouldn't be emphasized. It leads the reader to think that the A would be pronounced. The word, aesthetic, is pronounced with an es sound, but that doesn't work here. When faced with new information, we often strive to understand it by relating it to something we already know, something that is familiar to us, Oh, that is just like, or That reminds me of, etc. But, here, I can't find familiar words to help me say this one. So, I asked someone nearby. He pronounced it uh•gee•us, but, he admitted that he was not at all sure. Lesson: select a name that is easy to pronounce. That when we say it, we feel certain we are saying it correctly. Origin of the word: • The protection, backing, or support of a particular person or organization: "negotiations were conducted under the aegis of the UN." • In classical art and mythology, an attribute of Zeus and Athena (or their Roman counterparts Jupiter and Minerva) usually represented as a goatskin shield. Early 17th cent. (denoting armor or a shield, esp. that of a god): via Latin from Greek aigis 'shield of Zeus.' The new Myriad Gardens in downtown Oklahoma City is spectacular. It is very well-designed - an appropriate mix of natural and man-made components, fountains, walkways, terraces, ponds, rocks, and seating. There are areas for socializing, picnicking, a great children's playground, a dog park, amphitheater, restaurant, theater, and more; creating a delightful escape from the urban environment. Which logo came first - Motel 6 or Channel 6? ![]() ![]() KOTV Channel 6 in Tulsa introduced their new logo on October 24, 2010. The new logo for Motel 6 was designed by its in-house creative and marketing agency and introduced on January 26, 2009. Is it okay? Yes and no. If its plagiarism - a direct rip-off, claiming ownership; then that is wrong - taking credit and making money from someone else's work. But what if some other mark or type treatment is perfect for the job you are working on? If it meets the project objectives very efficiently. Should one not use it just because someone else created it? Question: Where is that line of ethics? Answer: Who the hell knows! This topic has been debated, probly since some petroglyph artist stole a glance at that other rock, liked what the guy carved, and carved the same thing. Yeah, probly that old. And it will likely be debated until the coming Second American Revolution (not that far away). One reason it is so hard to agree on a clear answer is that there are too many factors involved: geographic location, target audience, media, client, design firm, and the subjective nature of advertising and design. Lesson: Be cautious about the fine differences among inspiration, influence, and plagiarism. We are all inspired by work that we see and some of that influences us directly. But, if the solution is geared so perfectly to the design problem, it is likely that the work will have enough original elements to it, that you'll be okay. In the example above, Channel 6 is not deriving much, if any, value from the Motel 6 logo to warrant a charge of copyright infringement. Motel 6 does not 'own' the graphic elements of rounded corners, typographic elements breaking out of implied boundaries, or thick n thin serif fonts. But, I could be wrong. The advertising enticement of Free shipping "We offer Free Shipping!" How does your company get FedEx, UPS, or the postal service to donate their shipping services? "They don't. We have to pay those shippers." Then your company pays for the shipping out of your profits? "Yes." Where do you get your profits? "From selling our products." So, am I paying for the shipping when I buy your product? "Yes." So, if I'm paying for it, its clearly not 'Free Shipping'! Wouldn't it be more accurate and honest to say 'Shipping included in price'? Tips on growing as a designer How can designers stay motivated, creative, and satisfied in their careers and in their lives? Author Catharine Fishel explored this question through interviews with more than 40 leading designers; below are a few excerpts (more tips here.) • Allow events to change you. You have to be willing to grow. Growth is different from something that happens to you. You produce it. You live it. The prerequisites for growth: the openness to experience events and the willingness to be changed by them. • Forget about good. Good is a known quantity. Good is what we all agree on. Growth is not necessarily good. Growth is an exploration of unlit recesses that may or may not yield to our research. As long as you stick to just good you'll never have real growth. • Go deep. The deeper you go the more likely you will discover something of value. • Capture accidents. The wrong answer is the right answer in search of a different question. Collect wrong answers as part of the process. Ask different questions. • Begin anywhere. John Cage tells us that not knowing where to begin is a common form of paralysis. His advice: Begin anywhere. • Don't strive to be cool. Cool is conservative fear dressed in black. Free yourself from limits of this sort. • Ask stupid questions. Growth is fueled by desire and innocence. Assess the answer, not the question. Imagine learning throughout your life at the rate of an infant. • Work the metaphor. Every object has the capacity to stand for something other than what is apparent. Work on what it stands for. A book very much worth reading ![]() ![]() Tom Peters lectures and writes on efficiency and communication in business. Several years ago, he explored the role of design in business and he became an advocate for investing in design. He discovered that design is everywhere and influences and impacts just about every facet of business and culture. His website. ![]() This book, Re-imagine! is a challenge to rethink how we conduct business and even see the world. He addresses the huge role women play in making purchase decisions, how important a strong brand is and how to strengthen it, and how to communicate a message more efficiently and more effectively. Buy it on Amazon for a few dollars. ![]() ![]() Tom Peters has also pulled sections from the book and put them into these smaller, very easy to read pocket books (also available at Amazon). Typically, great designers are doers and participants in culture: they read, attend the theater, eat at the newest restaurants, are social, and read or view magazines and newspapers other than CA, Print, and design journals and websites. These books are a great way to get an intelligent insight into a dynamic business leader's impressions of the value of design. Tip: reading any of these books by Tom Peters will have a positive impact on your work, education, and attitude. This week's lesson In this absolute order, design and critique works of design for: 1. target audience 2. client 3. yourself Good clients will agree that your solutions are for their customers, not for themselves. Bad clients will often interject their own biases, ignoring the characteristics of their users. Unfortunately, there are many (probly too many) of these clients. Bad design often happens when designers don't adhere to the correct order. It is imperative to fully understand the audience: its wants, needs, and attitudes. Think of IKEA and Apple - innovators there designed for the user first. Once, I was a Guest Juror and charged with critiquing senior portfolios of design majors. I would ask a student who the target market was. I too often got the answer, "I don't know." or "Students." or something similar. They hadn't put much thought into who the end user/reader/viewer of the piece would be or their target was just too broad. I would stop the critique and move on - telling them, How can we discuss the effectiveness of a piece if you, the designer, do not even know who the user is? Lesson: The better you understand the audience, the easier the process of creating an effective solution will be. Thoughtless July 4th sparkler ![]() ![]() ![]() ![]() You may have seen this thoughtless icon if you watched the Macy's Fireworks show on NBC last Monday nite. The Live icon in the corner had an animated sparkler displayed during the entire broadcast of the fireworks. Sparklers draw our attention - we can't help be intrigued by the flames and watching the wick burn down to an explosion. You just can't ignore a sparkler in the upper right corner. This was a poor decision. As is often the case, the designer and director were not seeing their work through the eyes of the viewer. The viewer wants to watch the spectacle, not a 'clever' gimmick graphic. I'm not sure the viewer even cares to be reminded constantly that the broadcast is live. We just want to watch fireworks. Lesson: Finalize design decisions from the user's POV, not your own. Don't take the "caution" tape too seriously. ![]() ![]() There is a fun website that showcases "stupid" uses of quotation marks. Here is an example I saw at the World Financial Center in Battery Park City in New York. June 2011 Driving from NYC to Oklahoma, much of my attention is on the graphics along the Interstate - billboards, hotel signs, personalized license plates, etc. Here are 3 examples of logos on trucks. ![]() This is a decent mark - simple, clear, with a bit of cleverness (the 3 crowns forming the letter I). But what might keep it from being great is the placement of the word Services. The concept in this mark is those 3 crowns that serve as visual images and also form enough of the letter I that we read the word Triple. All elements in a logo should enhance the concept. But here, that word Services fights the concept by pulling our attention away from that main element. Here is a reworked draft: • The lower case word Services under the straight baseline of the wn captures some awkward spaces in between. Setting Services in all caps solves that irregular outline and better respects and relates to the straight baseline underneath the Tri. • Moving Services helps it relate to the Triple Crown by aligning it beneath the T and butting it up to the P. The new loction helps emphasize the 3 crowns by providing a foundation base. • Aligned the bottom of the lowest crown with the baseline of Triple Crown. • Decreased the gaps between the 3 crowns - this relates them better as a unit - the crowns are an element that has to do double duty: be read as crowns and be read as the letter 'i'. • Tightened the word spacing between Triple & Crown. Note: the font, size, and spacing of the word Services has not been tweaked - it is shown here just as an example of the concept. Lessons: Figure out what's working in the piece - exploit that and minimize the rest. Good logos often have a single focal dominant element that is memorable. Enhance that primary element and minimize the others. ![]() ![]() ![]() This could have worked. Its a bit of an overused cliche - jutting a star into angles of letters in a word, but it can still do its job here. However, in this case, the relationships among all the angles need attention. The integration of the strokes of the star and the strokes of the letterforms is so clumsy and awkward that its jarringly uncomfortable. Just too much inconsistency: the angle of the slash between the S & the T, the gaps between the A and the T & R, and line weight in the letters and the star. The designer needed to pay greater attention to detail to resolve these relationships. Relating a point of the star to the letter A is a natural - they have built-in commonalities, but maybe its too common - the star and the R might work, if it is resolved better than shown above. ![]() ![]() ![]() ![]() ![]() ![]() Nice job on the M & V, but that's about it. A shame the T isn't better integrated. Probly would be tough to have it follow the format and style of the MV, but I would think there is a better option than what they ended up with. The Oklahoma Aquarium opened in 2003 in Jenks, just across the Arkansas River from Tulsa. It is a great facility and a welcome addition to other world-class museums in the Tulsa area. Well worth a visit. ![]() ![]() But why do people go to an aquarium (or a zoo)? To see life. Activity. Motion. Color. To see creatures that we don't normally come across. To have new experiences. To see fascinating life forms. But look at the logo below. It works well as a professional image, but, as with almost all logos, it could be better: ![]() ![]() It doesn't quite convey what an aquarium represents. It is condensed, straight, centered, primarily black; solid, static, and boring. It doesn't have quite enough life and movement. Even the image is that of a shell - an empty house for a sea creature - not a creature or animal. The website for the http://www.okaquarium.org/ includes animation of fish swimming - motion and life. The identifier should also. Lesson: an identifying logo should represent the positive aspects of the experience. Tip: List descriptors for the entity (in this case: life, action, motion, color) and design a mark that clearly conveys those. ![]() ![]() Bonus: In this brochure on the right, there is pretty neat image of a shark, about to swim right off the page. But with the static logo placed right on top of it, the dynamic shark image is ruined. Lesson: Photographs can add depth and dimension to a 2-D piece. Avoid limiting that depth by putting text over an image. ![]() ![]() Shot these fotos at an Ihop in Edmond, Oklahoma. Sidebar: I am so Apple-conditioned that I want to type iHop as if its another member of the iPad/iPhone/iMac family. Three items from The New York Times Magazine ![]() ![]() Lesson: Make design decisions from the POV of the reader, not yourself. ![]() Lesson: If you want the image to be seen, don't put text over it. If you want the text to be read, don't put an image behind it. Tip: Be careful selecting/specifying Garamond if there will be an Italic 'h' in the copy. App idea I try to take a 30 minute walk each morning. I'd love to have an iPhone app that gives me random directions (straight, left, right) to vary the route of my walk. A random generator like the old Magic 8-Ball. • Purpose: break a routine, provide options for discovery • Objectives: Easy to use Convenient Intuitive Fast • Target audiences: Those seeking a new route and willing to accept random directions: Fitness walkers (timed, goal, pace) Recreational walkers (fun, enjoy) • Features: Shake to get new direction Hit button to get new direction Other functions: timer, randomizer, pedometer, calories burned • Options: ![]() Why you should be careful setting type in a vertical format: ![]() ![]() ![]() As I approached the side of the awning (as most people will do, coming up the sidewalk), the name of this Bar Cafe Restaurant was very tough to read. Lesson: When working with non-English or uncommon words, consider type specs (font, point size, color, format, weight) that will enhance clarity, not decrease it. Images from the International Contemporary Furniture Fair ![]() ![]() From the Germany booth - a prototype for a new Volkswagen. Notice the iPad or tablet holder. ![]() ![]() ![]() The new ideas and furniture were very inspirational, but I was most amazed at how many companies and booths used iPads to show images, videos, and title blocks. ![]() ![]() ![]() Who would have thought that someone would deem the Thunder logo worthy of copying? The logo on the right, NHU, is used on t-shirts sold on a third-party website for the National Hispanic University in San Jose, California. It is clearly a blatant rip-off. I saw the image in New York on a t-shirt worn by someone who works with NHU and bought it in San Jose. I tracked it down to a MySpace page: Smashed Inc Clothing. Because it can be applied to just about any entity, cause, or business suggests that the Thunder OKC logo is not very appropriate nor effective. Lesson: a great logo should be so content specific that it wouldn't work well for different content. May 14 2011 Inconsistent store name and signage ![]() ![]() ![]() Lessons • A consistent business name helps build strong store recognition. • Consistency of logo images builds brand awareness. The renewal Spa & Salon or renewal salon & spa or RENEWAL SALON ![]() Repeat lessons • A consistent business name helps build strong store recognition. • Consistency of logo images builds brand awareness. ![]() ![]() ![]() ![]() ![]() Additional tips: • Avoid mounting signs where they will be hidden by parked cars. • Replace signs once they no longer present a good image for your business or client. ![]() ![]() ![]() Poor typography design decision The outlined serif hours listed on the door on the left are illegible - even from up close. The sans serif hours on the right are much easier to read. Below, notice how much harder it is to read the store names set in outline fonts, while the solid fonts, Tao Cafe and Sweet & Sassy are easier to read. ![]() ![]() ![]() ![]() ![]() The great creamer battle between the Women with Flowing Hair. ![]() ![]() Which is the better cream container? On the left is an intuitive stopper on the cream canister - the handle jutting out says 'press me'. On the right, the screw cap might say 'turn me' but how far? Is it already open? If I turn it will the cap come off and spill the contents? Which way do I turn it? Okay, that is just too many questions. And I probly shouldn't ask them out loud while standing at the fixins stand. One can operate the one on the left with one hand while the one on the right requires two - one to hold the canister and the other to turn the cap. Also notice the labels on the canisters. One is designed to enhance the graphics and decor of the restaurant, the other looks like tape from a labelmaker. Photos were shot at Starbucks and Panera Bread. March 17 2011
Update: Some Barnes & Noble Starbucks in New York City are using these creamers with the handle and lever - much better. Now, Starbucks needs to invest in some custom-made vinyl stickers that convey the contents and fit the new design motif of their stores. May 15 2011 ![]() ![]() A quick lesson in the value of contrast. Notice the text on the right. The words set in white on the purple background (addresses) are easier to read than the words set in light purple on purple (phone number and hours). Just not enough contrast for comfortable readability. The reader shouldn't have to spend much time deciphering pertinent information. March 17 2011 Weak ad on the back cover of The New York Times Magazine March 6, 2010 ![]() ![]() The concept of the ad is apparently that this new terminal at New York's JFK Airport has been designed for a world class experience while traveling. The target market is those who spend more time in airports than the casual traveler. But, traveling has become more of a hassle. American Airlines, according to this full page ad is not countering that hassle. Look at the photograph: cold, long walkways, no moving sidewalk, no courtesy carts, no gate destination in view. Not a single seated person. We don't even see many inviting seating areas. Each traveler is pulling or carrying luggage, on a polished hard floor. There is just nothing appealing in this photo that would appeal to a world traveler. In fact, it supports the notion that traveling is now a chore and not as much fun as it used to be. The copy reads, "Experience a terminal like no other." Thank God. Hopefully, other terminals are better than the one depicted in this ad. Lesson: all elements in a design piece should support and enhance its basic concept. Those elements include typography, layout composition, color, photographs, logos. The photograph in the AA ad does not enhance the concept of world class design for world travelers. Assuming the photo was appropriate and did enhance the concept, there is another lesson here: Align elements to provide greater integration and order within a composition. Notice how the flush-left headline below aligns with elements above it in the photograph, but the smaller flush-right text copy does not. The example below on the right has been altered so that the text copy also aligns with photographic elements. March 17 2011 ![]() ![]() Another ad from American Airlines: ![]() ![]() We assume the concept here is to contrast the experience while in an airport lounge to that of the airplane itself. This ad should contrast the experience of sitting in rows on an airplane to the freedom of sitting in a comfortable lounge. The photo, however, shows rigid, monotonous rows, just like on an airplane. Better: shoot the photograph from an angle that diminishes the alignment of the rows and enhances the openness of the lounge. Maybe more warm colors (like those shown in the background) and less view of an airplane. March 17 2011 Ad with lack of clear information ![]() ![]() ![]() Once buyers are persuaded to buy a product, they then seek more specific info: Where do I get this? When are they open? Great design (clear communication of a message) respects the reader enough to make it easy. Notice, at the bottom of the enlargements below, the Hours - the hours for M-Th are the same as those for F-Sa. At a glance, the ad suggests that there are different hours on the weekend. All days with the same hours should be grouped together, M-Sa, as in the example on the right below. ![]() ![]() Now look at the address - this ad requires the reader to use some other device to discover where Hudiburg Circle is. Maybe call the phone number or check a map on the computer. But, isn't it rude and inconsiderate to require the reader to do all that? Since the client wants the reader to spend money at their store, make it easy. This would be a great place for a simple but appropriate map of the area, including freeway exits. Great design impacts our lives by allowing us to make decisions more efficiently - easier and quicker. Great designers consider the reader/viewer/user's point of view. Tip: Think like the target audience, not the client. March 6 2011 ARCHIVED DESIGN BLOG POSTS 2006 2007 2008 2009 2010 Home • Email Jim Watson • Filename to share: http://www.jamesrobertwatson.com/blogdesign2011.html |