Microsoft Strikes Again… With Bad Design

February 19, 2012 § Leave a comment

I am a known Mac-o-phile so perhaps you should take everything I have to say about Windows & Microsoft with a grain of salt. But… this Windows 8 logo is pretty bad.

For a long time I’ve been mildly irritated with the lack of brand consistency across Microsoft Products. Sure, sometimes they use a rainbow colour palette to tie them together, but for the most part you wouldn’t automatically recognize them as Microsoft products without the inclusion of the actual Microsoft logo. Overall I just feel a little more effort is warranted on the part of a multi-billion dollar company. With this Windows 8 logo they seem to have gone in the opposite direction…

I do appreciate their attempt to simplify; most of their logos look utterly tortured with gradients, drop shadows and embossing effects. Yet, this new logo comes across as rather amateur. The most irksome part for me is that the perspective looks off.  If the top and bottom angles were indeed this extreme, the vertical line should lie further to the left and narrower in width. It may seem like a small detail, but it affects the whole appearance of the logo mark.  I am also at a loss for why they would use a monochromatic colour palette when their brand integrity rests on the use of the rainbow.

The new logo is uninspired and frankly quite boring. I have seen this logo over and over again for home decor and building companies. And the audacity of Microsoft to trademark something so generic is really angering.

I think they could have stuck with the silhouette of their last rebrand – but simplified it. Something like this:

What are your thoughts on the new Windows logo – or Microsoft brand design in general?

5 Tips on Creating an Effective (and Appealing) Website

March 28, 2011 § 1 Comment

The following is a list of some of my go-to techniques for creating effective and visually appealing websites. These are my personal opinions on web design and so be prepared that they might differ from yours.

1. Make use of the space.
As computer screens get bigger and bigger and have higher and higher resolutions, it can be very difficult to design a website that looks good on every screen; we are catering to over 40 different screen resolutions after all. Coming from a print design background, I find this particularly frustrating. When you design something for print, you get to control the variables. Web design, on the other hand, has so many variables from browser to browser and user to user that it can feel like an impossible task. My favorite way to combat this is by using a horizontal band layout. In horizontal band layout, the main content is centred and given a size that will fit within all screens. However, we want to create the illusion that the entire space is being utilized. This is done by creating a background image that can be repeated indefinitely on the horizontal axis (usually a band of solid colour, subtle texture or gradient). No matter how big or small the user’s screen, the background will adjust horizontally to fill the space.

Here are some examples of horizontal band layout:
www.choicegoldcorp.com
www.petitepearlevents.com
www.designspectacle.ca

If you’re a web designer, here is an excellent tutorial on executing this web design style.

Another way to make use of the space is a liquid layout where the sizes and proportions automatically adjust for different screen resolutions, based on percentages.

2. Choose a main call to action and make it the most prominent item on the home page.
Most websites have one main purpose. It’s important to define that purpose, and then design your website to guide the user to that action. Examples of call-to-actions include: “buy our product,” “learn about our services,” “contact us,” “subscribe to our newsletter,” “view my portfolio,” “make a reservation.” This simplifies the user experience, and encourages people to use the website in the way it is intended.

Examples:
Currently, Choice Gold’s main purpose is to educate potential investors on the Sugarloaf Peak project. Therefore, we have made Sugarloaf Peak the most prominent and click-able feature on the homepage:
www.choicegoldcorp.com

Apple.com does an excellent job of highlighting/promoting their most recent product right in the centre of the homepage.

3. Position your main menu horizontally across the top of the page.
The most popular place to position your main menu (aka navigation) is horizontally across the top of the page. Users have come to expect websites to follow this layout. Websites that defy the norm, lead to frustrated users. Why reinvent the wheel? In many cases, if something is the most popular, it is also the most effective. Even if it’s not technically more user-friendly, the fact that it is the norm, makes it the most user-friendly option. (*I realize that this blog isn’t the best example since it uses a vertical menu in the left column).

4. Avoid drop down menus if you can.
The advantage of drop down menus is that they hide potentially long lists of links and make the website appear less cluttered, like putting clothes in a closet and shutting the door. Furthermore, you can access any page of content from anywhere in the website with one click. The big disadvantage is that they create a confusing user experience because they are awkward, finicky and hidden from view! And because the idea of a drop menu is that it keeps your page clean and tidy, it leaves no clues or signs as to where we are. A more effective alternative is to have just one page accessible from each main menu item, and the sub menu becomes available upon opening that page. My portfolio provides a good example of this technique: www.designspectacle.ca. When you click on ‘portfolio’ from the main menu it opens to a sub menu: ‘branding’, ‘print design’, ‘web design’. These menu items, it turn, open up to individual portfolio items. Once you’re in the ‘portfolio’ you can access any of the 3 sub pages and the menu won’t disappear on you! What it comes down to: 2 or even 3 simple clicks are better than one challenging click.

I understand that there are websites out there with so much content that drop down menus seem like the only viable option. If you feel that a drop down menu is necessary, consider adding a side bar to each section that repeats the options available in the drop down menu. Choice Gold is one example of this technique; you get all the advantages of the drop down menu, but you don’t need to rely on it to access sub pages of content

5. Use a Dynamic Text Replacement system.
One thing you might not know about website design, is that there is a very limited number of fonts that are guaranteed to display on every computer. Websites can only display fonts that are already installed on the user’s computer. In the past, if a web designer wanted to use a decorative font, or any font outside of this limited list, he/she would have to create an image of this piece of text and insert it into the website. This creates problems for search engine optimization (SEO), which can only pick up on dynamic text (not images of text). Web designers had to come up with various complicated ways to get around this issue using code. The text-as-image technique also creates problems for updating website content, and makes things very difficult for content management systems like WordPress, where users should be able to edit their own text. This is where Dynamic Text Replacement comes in. Using these systems, you can make any font display on a website on any computer, as if the user had it installed; it can be picked up by search engines and it can be edited in content management systems. Here is a great blog post on some of the Dynamic Text Replacement options out there.

I do recommend sticking to the list of websafe fonts for the body text. Font replacement can slow down the loading of content and therefore is only really suitable for limited use such as headings.

Comment with any other tips on creating effective websites!


Visual Puns Part II

January 31, 2011 § 1 Comment

For your enjoyment (and mine) I have collected some more logos that use visual puns! See my earlier post, Top 20 Logos that Use Visual Puns, for a reference.

Oak Bros

Handy

Kittens & Chickens

Digital Tree

 

Film Group

Love Boots: This is a pretty tricky one, but if you look hard enough, you’ll see that the darker parts of the hearts are the BOTTOMS of a pair of little red boots.

 

Heaven Films. 3 meanings in one: You have the ‘H’s of course, and the stairs (to heaven) and also, a piece of film! Quite divine don’t you think?Elefont – simple and adorably clever.

 

Avenue 88

 

And these are some more of my own visual pun logos:


Vancouver School Board: The lotus flower is also the fluttering pages of an open book.

Pure Photo Group: The lens shutter is also a brightly coloured iris

 

Kelsie Struch Real Estate: The K is also a roof sitting over the S

Starbucks: Stripping Down the Siren

January 13, 2011 § Leave a comment

To mark its 40th anniversary, coffee shop giant, Starbucks, will launch a new logo.

“Here we are today. Our new evolution liberates the Siren from the outer ring, making her the true, welcoming face of Starbucks. For people all over the globe, she is a signal of the world’s finest coffee – and much more. She stands unbound, sharing our stories, inviting all of us in to explore, to find something new and to connect with each other. And as always, she is urging all of us forward to the next thing. After all, who can resist her?

“Not me.”

Quoted from So, Who is the Siren?

HA! This quote is a little over-the-top, but it does provide some insight into the design direction.

The original 1971 version of the Starbucks logo is quite scandalous. It depicts a recognizable siren, at once seductive and foreboding, breasts exposed and tail wide. You cannot blame the brand for steering toward a more wholesome image with their 1987 version and then even more-so with the 1992 iteration, which is the logo we recognize today. This year, Starbucks has taken a page from Nike and Apple’s book, and attempted to create brand recognition using just a symbol. Here’s the problem: I don’t think most of the population has ever looked twice at the mermaid/siren nestled in the centre of the circles. Or if they have, they probably had a hard time making out what it was. Does the siren by itself create recognizable association with the Starbucks brand? It’s hard to say. One advantage that Starbucks has is omnipresence; it is everywhere, every day. Even if people aren’t quick to pick up on the new logo, it’s only a matter of time.

The New York Times goes the “fear of change” route, saying, “Trademarks and logos are so integrally linked to our daily lives that any tinkering with the familiar is suspect — and to be avoided.” Certainly there will be (and already has been) an outpouring of criticisms about the change. But the complaints are relatively docile compared to the backlash of the Gap and Pepsi re-brands; I suspect that in the case of Starbucks, most people are not offended by the new logo itself, but by the audacity of taking away the words ‘Starbucks Coffee,’ and leaving the siren naked (even more-so than she already was).

Some people have made the point that this logo is quite suitable if Starbucks plans to expand into other, non coffee-related markets; perhaps this is true.

What do I think? I like it well enough. It has definitely been simplified, but it still gives me close to the same feeling of brand integrity that I felt for the previous logo (which is hard to do). A unique shape is created by opening up the perimeter and letting the negative space interact with the solid form. It draws more attention of course to the siren. She is sweet looking and inviting. She is both royal (with her crown) and earthy (with her long wavy hair).  I am pleased that they kept the same colour of green. I do wish they would show us an alternative that has some wording, but perhaps that will come later. I also like this version from a Reddit post with a green circle around it:

What do you think?

New Website for Design Spectacle

January 12, 2011 § Leave a comment


Design is very relative. It’s funny how you don’t realize how much something is lacking until you compare it to something better. That’s how I feel about my site redesign. My old site was fine, but it wasn’t great, and it didn’t have the attention to detail that I pride myself in. Now that I’ve replaced it with the new site, the shortcomings of the old have become glaringly obvious. I’ve taken everything I’ve learned in the last year and a half and created a site that is simple and elegant, with a dash of character. I hope you find it to be an improvement! Feel free to leave feedback in the comments or on my facebook page 🙂

OLD SITE:

How to Make a Paper Snowflake

December 2, 2010 § 4 Comments

Back to Home

Templates:

Download Classic_Snowflake template (see step-by-step process below)
Download Reddit_Snowflake_Hexagonal template
Download Reddit_CoatofArms_Snowflake template

Design Spectacle

 

Reddit Coat of Arms

Original Reddit Snowflake


When I was living in residence at SFU, I came up with a creative way to procrastinate during December exam period: paper snowflakes! In the early days, I did them all freehand with kitchen scissors: Christmas trees, Santa, Santa’s toy sack, candy canes, ornaments, holly, wreaths, baby Jesus (complete with stable and sheep etc – see below). Eventually I learned I could be a lot more elaborate if I drew the initial shapes with pencil and used the aid of an x-acto knife where necessary. I started with a boy and girl kissing under the mistletoe and escalated to a silhouette of the Grinch dressed as Santa stealing Christmas with his reindeer dog. One year I made a Buffalo Sabers snowflake for my brother-in-law.

Baby Jesus, the stable and sheep


Buffalo Sabers Snowflake

Recently I made the alien/arrow snowflake near the top of this post for the Reddit Community, which I’ve become very fond of as of late (see my earlier post if you don’t know what Reddit is). It received a very warm response and a few people requested that I provide a do-it-yourself template.

Download original template here: Reddit_Snowflake or the proper Reddit_Snowflake_Hexagonal (not pictured)

I’ve also provided a step-by-step process to create a paper snowflake. You can apply the process to any of the templates!

Creating a Classic Snowflake

What you’ll need:

Template Classic_Snowflake, scissors (for the finer, more complicated snowflakes, an x-acto knife is a necessity)

STEP 1: Cut out the large circle

STEP 2: Fold in half along the dotted line so that the wedge with the image is on the leftmost side.

STEP 3: Flip over and fold back the image wedge along the dotted line.

STEP 4: Flip over again, and fold back the right wedge so that it lines up with the others. At this point, your piece of paper should look like the below image.

*Make sure that you have made your folds accordion-style:

STEP 5: Cut out the smallest gray parts first

STEP 6: Cut out the remaining gray areas

STEP 7: Unfold


Voila!

Down with Papyrus

November 26, 2010 § 3 Comments

Back to home

I have a confession to make. In my very first publishing class (back at SFU), I used the font Papyrus for a project. Okay it was two projects. The horror! This is a difficult admission for a graphic designer to make.

You might be asking, ‘What’s so bad about Papyrus?’ Innately, there is little ‘wrong’ with the typeface. It is elegant, legible, versatile and communicative. When it was first released in 1983 by type designer, Chris Costello, it was well received by the graphic design community. ITC, the current owner of the typeface, describes it as an “unusual roman typeface [that] effectively merges the elegance of a traditional roman letterform with the hand-crafted look of highly skilled calligraphy.”

So the problem is not with the letterforms themselves. Much like other things that were once good, the issue is that society has saturated Papyrus to a breaking point. This began when Apple started including the typeface stock on their personal computers. Suddenly people saw an alternative to the ‘boring’ typefaces of yore. Here was a font that made you feel something!

I don’t know about you, but Papyrus doesn’t make me ‘feel‘ anything anymore except bored. Its over-use is now so prevalent that using it at all detracts from the intended message.

People seem to choose Papyrus (over and over and over again) because it is ‘unique’ and has a distinctive earthy/ancient quality. I would agree that Papyrus is unique from other typefaces, and yet for me, no font could be more cliche or expected. Particularly in the spa/wellness industry. I would not even bat an eyelash if I read a statistic that said half of the spas in Canada use Papyrus in their logos; it is everywhere. Still, spas are not the worst offenders. At least Papyrus suits that industry to an extent. To my immense frustration, Papyrus is used in everything from resumes, to ads for Hip Hop concerts, to shoe stores, to menus and on and on. If you’re ever in Victoria BC, drive or walk down View Street, between Blanshard & Douglas. There is a shoe store called “the Cobbler” and a day spa called “Sapphire” right next door to each other. Both logos are set in Papyrus – almost identical! There is also a stationary store in Sidney called Papyrus – guess which font they chose for the logo.

Another example of an over-saturated, painfully misused typeface is Comic Sans. Comic Sans was originally designed for use in comic books (no surprise there) and for graphic design geared toward children. I find the rampant use of this typeface to be even more baffling than Papyrus. There is nothing elegant or versatile about it; it is sloppy, juvenile, shallow and silly. I can’t even bring myself to appreciate it for its intended use. Yet, somehow it has found its way into mainstream design. Not without criticism to be sure; Comic Sans has actually become the target of an online hate campaign and even inspired its own hate site, Ban Comic Sans. I quite enjoy the website’s tagline: Putting the Sans in Comic Sans.

I hope this post has opened your eyes to some cliches in typography or perhaps reinforced some existing feelings.

Credit for comic: XKCD.com

What is your LEAST favorite typeface/font?