Archive for the ‘Web Design’ Category

The Evolution of the International Typographic Style: From Print to Web

Tuesday, July 1st, 2008

The popularity of generated content and social media is transforming the web. No longer does a site need a flashy intro or exciting graphics to entice a user to dig deeper, search engines and smart architecture bring the user right to what they are seeking, and when they find that… they want to appreciate it for what it is. Usability, readability and find-ability are in style, while hefty load times, blinking graphics, and cluttered pages are out. The best example is the decline of users flocking to MySpace, seeking structure, order and clarity they are now looking to make less visually complex social media hubs their home.

grammo-grafik, Gottlieb Soland,1957

This focus on content is similar to the shift in design that happened after World War II known as the International Typographic Style (or Swiss Style) Movement. The Swiss movement grew out of the Bauhaus and New Typography Movements, which were grounded in functional typography, clear communication, and geometric designs. The Chief characteristics of the international typographic style are designs that include minimal graphics and a focus on typography, sans-serif Typefaces, black and white photography, and grid based layouts. Pioneers of the Swiss style were Max Huber, Emil Ruder, Josef Müller-Brockman, and Armin Hofman. What really helped facilitate the success of this movement was the Swiss governments support of it, adopting it as the look and feel for Switzerland.

Over time the Swiss Style has been used in publications, on posters, and in signage, but I have noticed it is beginning to evolve and become popular online. This evolution has been happening for some time now in the design community but is quickly being spread to social media sites, and the Online News Industry. What has spawned this Swiss revival? I am sure there are lots of factors, but I personally think it may be in part to the renewed interest in typography that has happened since the release of the film Helvetica by Gary Hustwit. Helvetica was one of the premiere typefaces created during the Swiss movement (along with Akzidenz-Grotesk); it’s name is derived from Confoederatio Helvetica the latin name for Switzerland. The film traces the history of the typeface and interviews famous designers who all can relate to Helvetica. It helps to trace the origins of todays design back to the International Typographic Style, and makes typography cool.

While very few sites stay strict to all of the defining qualities of The international typographic style, many are heavily influenced by the overall look, and stay true to many of the features. I put together some comparisons and examples and were amazed by the similarities.

Minimal Graphics and Focus on Typography
Neue Graphik
Neue Grafik Magazine published 1958-1965
IA Japan
IA Japan is a “Strategic Design Agency” based in Japan.



Sans-serif Typefaces
Müller-Brockman
One in a series of posters Josef Müller-Brockman designed for the Zurich Opera House. He was interested in the patterns in typography mimicking the rhythm in music.
5thirtyone
5ThirtyOne is a blog by Derek Punsalan is a Designer in Seattle.

Black and White Photography
Ulm1Publication from the Hochschule für Gestaltung Ulm
Design by Anthony Froshaug
(photo courtesy of Mason Wells)
Jon Tan
Jon Tan is a Designer in Bristol, UK


Grid Layout
Knoll
Knoll Poster by Muller-Brockman
Evening TweedEvening Tweed is a graphic Design Collective in the UK

There are 3 specific types of sites that are leading the charge in the resurgence of the Swiss style online, however I am going to save that for another post. A topic I am totally fascinated with, I can assure you there is more to come!

Special thanks to Mason Wells and his fantastic Flickr stream.

The Future of the Creative Industry

Sunday, April 13th, 2008

Last Wednesday I visited the graduating Design Students at my alma mater James Madison University in Harrisonburg, Virginia. I really enjoyed my visit, the students were inquisitive and (judging by the work displayed in the hallways) very talented typographers and creative thinkers. The conversation raised many interesting questions and started some engaging conversation.

Since I was in school “Creative Hotlist” has been the destination online when seeking employment opportunities for the overall creative industry (not just the web industry). Their online description is:

Creative Hotlist: Job Searches, Portfolios and Recruiting for Graphic and Web Designers, Writers, Photographers and Illustrators.”

When I do a basic nation-wide search on this site my results include all sorts of different occupation titles. All but a very few of these job descriptions require some knowledge of web or interaction design, and more than half are in the web industry.

While at JMU many of the students asked about “PDFs” as a means of sending their work to employers. I found this very interesting because every place I have worked since graduation has had a minimal requirement of an online “web presence” for consideration of any design position. Other alumni who were present seemed to think that PDFs were a fine practice for sending out work, and having an online portfolio was really more of a “web designer” qualification or an addition to your overall portfolio. This advice concerned me so I asked a designer who worked at a predominantly print studio what they expect prospective hires to send and the response was what I expected. They told me they accepted PDFs, but often did not even look at them or consider them because a web portfolio is more convenient to view when looking through tons of applicants. It also shows that the applicant is versatile. Should we as an industry advise students that the bare minimum is acceptable?

With so many jobs in the creative industry moving towards the web, shouldn’t there be less of a divide between the idea that there are “web designers” and “print designers”? Shouldn’t the basic understanding of interface & interaction design, user experience and information architecture be a requirement for all seeking design jobs and not just those seeking web jobs? Should the industry not try and encourage students to stay ahead of the curve and strive towards the future.. (even if it is a little more work and sometimes really uncomfortable for those old-schoolers)?

Design Equals Design

I’m not writing this post as a way to alienate those who don’t understand those concepts but to inspire them to broaden their horizons and realize design is design no matter what the media. The creative industry runs parallel to advances in technology and in the future there will even be more lines blurred between print and web. So why not get a jump on it?

I sat down on Saturday morning and put together a resource list in response to many of the questions I was asked on my visit to JMU. Basically I went through my feed reader, & books … and typed it up into wordpress until my eyes bled. So there may be some room for improvement, if you take a look at it and have suggestions for additions, feel free to comment or contact me. I hope that the list serves as a helpful starting point for anyone approaching the exciting industry of Web Design.

Resources for Students & Job Seekers

How Many Pieces of Work Should you Include in your Web Portfolio?

Monday, April 7th, 2008

Portfolio CaseIt’s hard to decide on how many pieces to showcase in your web portfolio. As a designer I know there are lots of factors that go into choosing the work you decide to display… versatility, creativity, exciting clients, recent challenges, technical capabilities, and experience. While I had been advised in the print world to limit my work to 10-12 pieces it is incredibly common to find web portfolios that feature 25+ projects. As a web designer it is very tempting to add EVERYTHING one may have done, especially when the web provides an interface that makes it so easy show years of experience in just a few clicks. So how many pieces of work should a web designer include in their online portfolio?

I have asked tons of designers, art directors, and creative professionals for answers and had lots of discussions. While the answer is a matter of opinion, the most impressive response was from Greg Johnston the Senior Vice President and Creative Director of Ogilvy PR’s Creative Studio in Washington DC. Greg is an old school Bad Ass (Matthew Carter style). He knows his stuff, has a pony tail, rocks out, and has played a leading creative role on many big-name accounts that make me drool. I asked Greg to sum up his response for this post because it is the best I have heard yet, not only because he has the experience to back it up, but because he provides solid reasoning.

I just saw someone’s portfolio who had brought a lot of stuff to show. I gave them a break because they were from out of town and wanted to make sure they “didn’t forget anything in case they needed to show me more of their work.” That’s usually a sign for me that someone thinks that all their ideas are good ones.

Editing your own work is probably the hardest thing to do. Your work is like your children––you love them all equally. So you have to really remove yourself from all the special circumstances that lead you to create your ideas. Yeah, like I said, it’s tough.

I believe you should showcase 10-12 samples of your BEST work, regardless of how you got there. That’s all I show after 27 years of creating ideas. (And I believe just because you’ve been doing something for 27 years doesn’t mean you’re good at doing it.) My best work. Some of it I did over 20 years ago, because the ideas still hold up. Some of it I just did last month.

Having looked at hundreds of portfolios––online and offline––I usually can tell after 5-6 pieces if someone is good. I judge their work not only on the quality, but their ability to know the difference between really good work and stuff that’s just OK. You don’t need to show everything you’ve done since kindergarden. That’s what Mom’s fridge is for.

Be hard on yourself. Be objective. Act like you know nothing at all about what you had to go through to get to that idea. Now you ready to edit your own work.

Which is what you should be doing every time you create ideas.

I want to thank Greg for the time he took to write all of that down, and I hope that advice helps others struggling with making those decisions. I will be taking all of his points into much closer consideration for the redesign (re-align) of this site… that I am working on right now.

Lets Talk About Web Design

Thursday, February 7th, 2008

Dc Design TalkThere is web stuff happening all over this darn town.
Everywhere I turn there are things going on, happy hours to be had, talks being given… and oh the networking. A few weeks ago it snowed here. If you have ever been in DC when it snows you know its like the world is about to stop. Refresh DC was scheduled to happen that day. If you aren’t familiar Refresh it is:

a community of web designers, developers, and other new media professionals working together to refresh the creative, technical, and professional aspects of their trades in the Washington, DC, area.

The talk that Thursday was on Web Accessibility (a great talk by the way, given by John Croston) and despite the snow and panic, the room was packed. Standing room only. How awesome is that?

The themes of these events are predominantly technical. I like learning about how things work, so I go to a lot of them, but there always seems to be a void on the design end of the spectrum. AIGA and ADCMW hold fantastic events but they are really geared towards print designers. So after a lot of people saying “yeah we should do something for web designers” M. Jackson Wilkinson and Jason Garber did.

On Feb 29 Viget Labs (where I now work… did I mention that they we rock?) is hosting DC Design Talk. It is the first “talk” in a 3 part conference series geared for people who make websites. I am pretty excited about the focus being on design and it is shaping up to be a great event. Already there are a list of speakers that I anticipate learning a lot from.

Vigorous; Thrive, Flourish, Be Active, Be Effective

Thursday, January 24th, 2008

Viget Labs is a web development and consulting firm who can boast a well known web app such as Squidoo in their projects section. They have four “labs”: strategic consulting, application development, online marketing, and interactive design. A few weeks ago I spent a couple of hours in their very impressive Falls Church office, peaking over the shoulders of their designers and kicking back in their “fishbowl” lounge. They have fun. They innovate. They practice web standards. They design Bad-ass websites. They flourish.

These guys have been on my radar for a while now. Last June their Team Viget site caught my eye on CSS Import with their sexy java-script skills. Upon further investigation I realized… “hey these guys are right around the corner from me”. They have since been featured on galleries all over the web including the Web Designer Wall’s Best of CSS Design 2007. Back in August I literally walked into DC Barcamp and met Rob Soulé a member of the Viget Design team, who then went on to co-lead a fantastic presentation on the “Challenges we face as Designers”. Interested in the team’s enthusiasm and community involvement I added the Four Labs Blog to my RSS reader and followed along from afar.

The concept of a company’s brand has really evolved in the last few years. What used to be considered a logo and a tagline has transformed into a full blown experience. Not only does a strong brand transcend the products and services a company provides, but it amplifies the attitudes and personalities of the individuals creating them. When you walk into Viget not only do they have swank offices that just shout “web 2.0″… there is an indescribable vibe amongst their team. A buzz. A feeling of anticipation and excitement. The word “viget” comes from Princeton University’s motto “Dei sub numine viget” and means be strong or vigorous; thrive, flourish, be active, be effective.

I am very excited to say that this Monday will be my first day as a Web Designer at Viget Labs.