The Drafting Table http://draftingtable.zilifone.net Our collection of other designer's work we like, along with our little tidbits and opinions. posterous.com Fri, 09 Jul 2010 15:30:40 -0700 Does it work in IE? http://draftingtable.zilifone.net/does-it-work-in-ie http://draftingtable.zilifone.net/does-it-work-in-ie Have you ever opened your email inbox finding an email saying the site you were just working on has an issue? While this happens all of the time for designers and developers for the web, and will for years to come, developers have just gone into Internet Explorer to find the problem which didn't exist in today's standards-compliant browsers (Safari/Chrome, Firefox, Opera, etc...). For a developer on the Mac or Linux platforms, opening IE is not as much of an ease as if you had a Windows computer right next to you.

Seeing before believing
So, you have that email saying you overlooked a design flaw or operability issue on your site. What's next? The hardest thing for me as a developer is trying to fix an issue I can't see. While screenshots from clients can sometimes cut the mustard when finding the issue, it still doesn't solve the issue nor does it help in your many attempts at making that bug fix. 

The question becomes, how do you test your site in browsers you don't have? One solution is load your computer with every version of every browser you can, from the nightly builds to the old versions you keep in the archive.
Screen_shot_2010-07-09_at_4
For example, in my applications folder on my Mac, I have 6 versions of Mozilla's Firefox ready for duty, each of them only usable when the other versions are not running, you have to reset all of the settings and check for updates (which you don't want). When it comes to other browsers such as Apple's Safari, you can't downgrade to a lower version as the browser is tangled into the operating system.

While having a locally running copy of each browser configuration at hand would be the solution to this, you can get similar results with browser screenshot websites:

Browser Shots (http://browsershots.org/)
The daddy of the screenshot sites is Browser Shots. It offers on-demand screenshots of your site in any of a number of browsers on a number of platforms (not just windows/linux/mac/etc...). The site is free (advertisement based) and can take hours for some of the more popular browsers to load but it allows you to get pretty much any screenshot. Run the batch, come back in 29 minutes to find a few of them done, extend your screenshot request (it is only open for 30 minutes by default) and keep going.

Netrenderer provides the 4 most requested screenshots you probably will need (assuming you are not on a PC), the Internet Explorer versions of 5.5, 6, 7, and 9 (with IE9 beta once it is released). The bonus of the netrenderer is it is instant, no waiting, no queues, no hassle, just the screenshot you want when you want it. The problem here is the limit of only IE, so you need to try another site for those specialty browsers in linux.

Alkaline (aka Litmus) (http://litmusapp.com/alkaline/)
If you want to pay for a convenient way to test windows browsers on your mac without the waiting, the folks at Salted Services created Alkaline (used to be called Litmus, now a email compatibility app). It offers the iPhone app and a downloadable app for your mac to test on those 17 Windows browsers they say are most relevant.

Now part of the CS5 suite, the once free online beta allowed users to fireup the resource heavy flash site which would process IE screenshots but the site now allows more features and ties right into Dreamweaver if it is your choice of development platform.

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Thu, 08 Jul 2010 14:58:00 -0700 A Smattering of 20th century Design http://draftingtable.zilifone.net/a-smattering-of-20th-century-design http://draftingtable.zilifone.net/a-smattering-of-20th-century-design
I have been loving the general design of the last century lately and one of my favorite ways to evaluate design of a time is through posters. Over the last few weeks, I have gathered a few posters and would like to share them with you.  To begin, poster design is cool in the way that it is limited. A poster has a certain size, is usually inanimate, and is intended to grab your attention and send a quick and short message. In the world of propaganda, we see many excellent examples of poster design that was efficient in delivering a message, whether or not the message is good or bad, the posters still got the job done.

Propaganda in Wartime
The design style in the early 20th century set the stage for poster design as a device to deliver pride, fear, information, etc to people and the styles stayed with the public after World War 2 was over.

Propaganda in Peacetime
As propaganda continued to be present in the lives of many people in the world, especially on the fronts of the cold war, designs matured, the message was delivered in new ways, and the image almost portrayed the entire message, without the need of a description or title. Below are images from the Soviet Union in reference to peace and the United States. 

Continuing the Style
Designers have always has a soft spot for the classic designs of our decade and spoofs are one of the finest forms of flattery (as they say). One of my favorite sets of posters includes the following ones by designer Cliff Chiang (http://www.cliffchiang.com/) taking the classics and adding that little Star Wars kick to them.

The Style on Other Fronts
Although the propaganda style of the 20th century has always mad the "propaganda" feel, you can find the style all over in many places. Disney/Pixar designer/doodler Eric Tan (http://www.erictanart.blogspot.com/) has been making a series of posters for all of our favorite Pixar films for the last few years, giving fans another, yet clever, way to enjoy the films.

The last little bit of this design style I wanted to mention is on the topic of FlightControl, the little iPhone/IPodTouch game that has wasted sooo many or our precious hours on landing little planes. The design of this game of of the utmost perfection and I play it sometimes just to see the design and layout.

On that note, I was going to call it good but I came across a website, The Art of the Title Sequence (http://www.artofthetitle.com/), which offers a salute to those designers who are responsible for excellent title sequences. On their site I found the sequence for Catch Me if You Can (http://www.artofthetitle.com/2008/03/29/catch-me-if-you-can/) and Pixar's The Incredibles (http://www.artofthetitle.com/2008/03/19/the-incredibles/)

See the Incredibles videos at website, find the links above.

Ciao for now,
Sean

 

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Sun, 23 May 2010 15:21:00 -0700 New Belgium Brewery http://draftingtable.zilifone.net/new-belgium-brewery http://draftingtable.zilifone.net/new-belgium-brewery

Nb_skinny_dip_10_stco

New Belgium Brewery is a hometown local brewery in Fort Collins, Colorado that has been growing as if the economy hadn't had any problems at all. While the beer is the true reason for their success, the brand that has developed over the years hasn't been to shabby.
Beers_bp

I have always been a fan of New Belgium's Fat Tire and Sunshine Wheat beers but the brand that they have been developing in our hometown is pretty nifty, we are fans :)

 

 

Beers_ab_gc Hoptober_prodshot_0 Beers_1554 Beers_ft_0_0 Beers_mw_0 Beers_sw_0 Beers_ab_1 Beers_sd_1 Beers_2b Beers_ma Beers_ra Beers_tr_0
See the full gallery on Posterous

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Sat, 20 Feb 2010 04:45:39 -0800 Zing http://draftingtable.zilifone.net/zing-21 http://draftingtable.zilifone.net/zing-21
Screen_shot_2010-02-20_at_1

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Fri, 12 Feb 2010 05:20:00 -0800 Photography and Design: Barcelona http://draftingtable.zilifone.net/photography-and-design-barcelona http://draftingtable.zilifone.net/photography-and-design-barcelona

Hola,

It has been a while but we have been busy. The Zilifone team is now global, with a few of us in Barcelona, Aix en Provence in France, and Sydney. While we have been trying to finish up our current projects, we are still looking for more so don't hesitate to contact us. 
We have been enjoying Spain, especially in the first month or so that we have been here. We've been traveling, touring, taking pictures and doing a little design work here and there. Check it out.
Screen_shot_2010-02-12_at_2

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Thu, 05 Nov 2009 22:46:58 -0800 Redesigning the Diagram: Part 2 http://draftingtable.zilifone.net/redesigning-the-diagram-part-2 http://draftingtable.zilifone.net/redesigning-the-diagram-part-2 For the second part of this series, it's time to focus on the word diagram. For some, it is a pretty design by some person who has the talent, such as Ritwik Dey in our first post on the topic, but the meaning of the word is really so much more. In the early 17th century, the term originated as the greek word diagramma which meant to "mark out with lines." As Oxford puts it, a diagram is a simplified drawing showing the appearance, structure, or workings of something; a schematic representation or a figure composed of lines that is used to illustrate a definition or statement or to aid in the proof of a proposition.

It can even be put more simply as a representation in graphic form.

So, if a diagram is more then just a way to graphically display information as Dey did, then what else would constitute as a diagram? Blueprints and plans? Maps? What about logos?

Meet Paul Rand, the master designer who truly redesigned the logo as well as the diagram. Paul Rand's work is all over, and it sparked a style that is ubiquitous to most of us. He was educated at Pratt and hung out in the eastern US until his death in 1996.

He is best known for his logos for ABC, IBM, and UPS (among many others below) but lets focus on one of these, NeXT.

Paul_rand_logos

NeXT was the result of Steve Jobs being fired from his own company (Apple) in the 80's. He started a new company that would focus on education, innovation, and the future (of computing). Steve Jobs chose Paul Rand and the result was more then just a graphic but a true diagram.

Paul Rand once wrote an article on the logo and simply pointed out that, "If, in the business of communications, 'image is king,' the essence of this image, the logo, is a jewel in its crown." He continues to talk about flags, how some are aesthetically pleasing while others are not, and what it really is. A flag is more then aesthetics though, "In battle, a flag can be a friend or foe. The ugliest flag is beautiful if it happens to be on your side. “Beauty,” they say, “is in the eye of the beholder,” in peace or in war, in flags or in logos. We all believe our flag the most beautiful; this tells us something about logos."

Rand defined the traits of a successful logo with 7 points: distinctiveness, visibility, usability, memorability, universality, durability, timelessness; and saw a logo as something more, a brand which can become a culture. After designing the logo for NeXT, Rand designed a book to accompany the new logo.

Presnext02 Presnext03 Presnext05 Presnext06 Presnext07 Presnext08 Presnext09 Presnext10 Presnext11 Presnext12 Presnext13 Presnext16
See the full gallery on Posterous

The booklet tells the story of process, starting with typography, then working through the design iterations and the phenomenology of each detail. From the slightly angled presentation to the lower case e that not only prevents the confusion of EXIT with NEXT, but "creates visual contrast from the other letters," all of which are composed of straight lines. The "e" is also chosen because of the meaning of the "e," or at least the possibilities: "education, excellence, expertise, exceptional. excitement, e=mc2, etc..." He ends with a page that may have began the success of the logo, and eventually the success of Apple's brand (Steve Jobs came back to Apple in the mid '90s and merged NeXT into Apple, eventually redesigning the Mac and MacOS, basing it off the products from NeXT). He writes that the logo could also become a device through which endless possibilities can be used for the promotion of NeXT.

Screen_shot_2009-11-05_at_11

Rand also wrote in an article about what a logo is, "a flag, a signature." How it "doesn’t sell, but identifies." How it is "rarely a description of a business," "deriving its meaning from the quality of the thing it symbolizes, not the other way around." Being "less important than the product it signifies; what it means is more important than what it looks like."

To end, the diagram can have meaning, more then the basic layer of color, pictures, and information. What about the answers to the why? Paul Rand left more then some logos, but a style that defined the american corporate logo of the 19th century, and a theory that has proven true even to this day. Next time you look at a logo, whether or not it is aesthetic, or it represents the culture or company's products, or if it is just plain cool, think about what the logo really is. Is the yellow double arch, the red bottle contour or apple just a graphic or is it the cognitive icon / brand that reminds you of the worlds of McDonalds, Coca Cola and Apple?

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Wed, 04 Nov 2009 01:26:33 -0800 Influencing the Government through Design http://draftingtable.zilifone.net/influencing-the-government-through-design http://draftingtable.zilifone.net/influencing-the-government-through-design Although the constitution does include that part about all of us, US citizens, needing to actively participate in the government, it may be a stretch to say that applies to a college's student government. But utilizing design as a method to reach an audience does work, and at many scales too (remember the White House website and Obama's campaign?).

As a member of the student government for CU-Boulder's College of Architecture and Planning, I have made a few small but neat designs that reached the student body. With the fall semester starting, the air was filled with the election fever of voting and the candidates posted their attempts at convincing a design school's student body why they were the right one. My favorite (designed by me for the elected Is Chaker):

Even in polychrome for that bit of cognitive incentive to get the message across...

Is Is Is Is
See the full gallery on Posterous

As the student government, or APSG as we are known as, we get the chance to put on events, spend hard earned student fees, and even design stuff. The school is going through changes and the new logo was done in-house, along with the new APSG logo:

Caplogo Apsglogo
See the full gallery on Posterous

As the semester goes on, we will continue to provide some cool work, hopefully to look back to a good year of work, change (the new buzz word connected to gov't). Just be sure to keep an eye open for the new college of architecture and planning shirts (designed by student J. Walbridge) coming out for students (with a special edition for APSG members):

Apsg-shirt Tshirtdesigndetail
See the full gallery on Posterous

Bye for now, will be back with the part 2 of diagramming design soon.

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Tue, 27 Oct 2009 12:11:15 -0700 Sweet Project: Steve Jobs http://draftingtable.zilifone.net/sweet-project-steve-jobs http://draftingtable.zilifone.net/sweet-project-steve-jobs Designer Dylan Rosco (http://gorosco.com) made one of the most elaborate and amazing "text art" designs I have ever seen. While stumbling around some design agency websites I eventually found myself looking at a huge image of Steve Jobs face.

Roscostevejobs

Yea, I know, pretty cool eh? Well I looked into the design a little more and this is a true work of are. The entire composition is from the famous "Think Different" ad campaing from the 1990's for Apple. The campaign, which you can learn more about (http://en.wikipedia.org/wiki/Think_Different) was designed by Chiat/Day and featured a piece of text, coined "the Crazy Ones" which is a tribute to those who think differently (http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/).

This design's text is all from the "crazy ones" campaign using the fonts Apple has used over it's lifetime. Sweet eh? Check out a zoomed up and close pic:

Roscostevejobsdetail

We found this on Rosco's website (full image, a 66MB TIFF http://gorosco.com/files/Steven_Paul_Jobs_11x17.tif) and on his DeviantArt page (http://dylanroscover.deviantart.com/art/Steven-Paul-Jobs-113968783).

As big fans of typography, If you think this is cool, check out Erik Spiekermann's book on typography, Made with FontFont (http://www.fontshop.com/products/books/made_with_fontfont/), which is a collaboration between Spiekermann's firm and many excellent font designers who make up the FontFont Foundry (http://www.fontfont.com/).>

Mwff_sample

The images featured on this post are work done by designers independent to, while being an inspiration to Zilifone. Please check them out, their work is truly awesome.

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Sat, 24 Oct 2009 01:25:22 -0700 Windows 7 http://draftingtable.zilifone.net/windows-7-728 http://draftingtable.zilifone.net/windows-7-728 Yours and my favorite package of software from the Redmond giant, Microsoft, has been launched and it's been a blast checking out what the world had to say as a response. A small sampling of these responses are listed below.

To start off, we have Microsoft's own marketing video, which is very helpful, Hosting your Windows 7 Party!

Of course, it wouldn't be any fun if Apple didn't play along...
http://movies.apple.com/media/us/mac/getamac/2009/apple-mvp-pc_news-us-200910...

The you have product promotions utilizing the big event (this one is real too)

Windows7whopper-lg_270x381

To cap the post, you are left with the cream of the crop when it comes to an "oops" - Microsoft's CEO Steve Ballmer showing Windows 7 with a MacBook Pro in the background:

Mbp2 Mbp1
See the full gallery on Posterous

P.S. - It's not the first time Steve Ballmer had been known to use a Mac

Msfail

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Sat, 24 Oct 2009 00:49:05 -0700 Redesigning the Diagram: Part 1 http://draftingtable.zilifone.net/redesigning-the-diagram-part-1 http://draftingtable.zilifone.net/redesigning-the-diagram-part-1 Ritwik Dey (http://www.ritwikdey.com/) is the first of a group of designers that understand design and the diagram/info graphic. In visually conveying a message / information, a designer works to provide as much information as possible while still obeying a list of 4 guidelines: informative, clear, sexy/pretty, and original.

426048360_1eb048d72a_o 426186677_d290956d92_o
See the full gallery on Posterous

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Fri, 23 Oct 2009 17:31:24 -0700 Should I use Comic Sans? http://draftingtable.zilifone.net/should-i-use-comic-sans http://draftingtable.zilifone.net/should-i-use-comic-sans The social cloud has been active on the typographic subject of whether using Comic Sans or not. Since the advent of personal computing when it comes to fonts, a select few have been included on most systems. Of these fonts, the general public has ruined one of these...

Shouldiusecomicsans

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Fri, 23 Oct 2009 14:08:55 -0700 Diagramming with typography... http://draftingtable.zilifone.net/diagramming-with-typography http://draftingtable.zilifone.net/diagramming-with-typography
18_inanolcerdatatable002 18_inandatatable001
See the full gallery on Posterous

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer Thu, 22 Oct 2009 20:42:15 -0700 Sweet Diagram of Bankruptcies #GOOD http://draftingtable.zilifone.net/sweet-diagram-of-bankruptcies-good http://draftingtable.zilifone.net/sweet-diagram-of-bankruptcies-good
Trans0609largestbankruptcies

Permalink | Leave a comment  »

]]> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/36ENoKf89jVL Sean Wittmeyer seanwittmeyer Sean Wittmeyer