Welcome to episode five. Today’s podcast is from Jason Beaird, a User Experience designer at Mailchimp, and author of the Sitepoint book, The Principles of Beautiful Web Design.
In this episode, Jason talks about the fundamental principles of design.
[vimeo 24553018]
DesignFestival Podcast Episode #5 – Video – Universal Appeal from SitePoint on Vimeo.
Download this Episode
You can download this episode as a standalone MP4 file:
- DesignFestival Podcast #5: Universal Appeal (MP4, 43:10, 137 MB)
You can subscribe to the Design Festival Podcast either directly or via iTunes — add the Design Festival Podcast to iTunes.
Episode Summary
- The ground-rules: basic design principles
- Layout: structure, grid, rules, gathering elements
- Color: monochromatic, analogous, complimentary,
- Texture
- Typography:
- Imagery
- “Pissing on the principles” — breaking the rules
- ‘Design thinking’
Audio Transcript
Hello, my name is Jason Beaird. And today, I’m going to talk to you about the fleeting myth of universal appeal. So, this podcast that I’ve recorded for DesignFestival.com is based on a talk I gave last month in Atlanta at a conference called LessConf.
For those of you who don’t know who I am, I’m a user experience designer at a company called MailChimp. It does email marketing. It’s an email service provider. And I also wrote a book called the Principles of Beautiful Web Design, which if you’re coming from DesignFestival, you may have seen SitePoint advertising that. The original for that book came out in 2007. The second edition came out just in November. So, it’s all updated for 2011.
And the reason I start off with that is that most of the talks that I give, they center around the contents of this book. And this time, with the fleeting myth of universal appeal, I strayed from that quite a bit. It was a fun talk to hear from me because I’ve always talked about those basic design principles that are really, really important.
But this is some advice that I think all new designers need to hear eventually and even great designers need to be reminded of from time to time.
So, now that you know what I do and something that I’ve done, let me tell you what I want to do. My number one goal in life, what I aspire to is to create things that most people think are okay. Of course not! I want to create things that at least some people (more than just my wife or my mom) think are freaking awesome. I want people to love and tweet about the stuff that I make. So, that is one of the most exciting things about working for MailChimp.
There are so many people out there that love the brand so much that they not only wear our hats and silly shirts, but they take a few pictures of themselves wearing them and tweet about it. Our goofy style in the website, and sense of humor, it doesn’t appeal to everybody. And we call those people party poopers. But the people that do love MailChimp really love MailChimp.
So, before my life as a user experience dude at MailChimp, I worked for several small to medium web agencies doing design and front end development. I worked on a lot of sites like this one, the South Carolina Bank and Trust. This is a site that I worked on at a company I worked for before MailChimp. And if you’re doing design work for a bank or an insurance company or an attorney or a student loan company, it has to look good. It doesn’t have to be fun or exciting, but it’s got to look professional and corporate or people won’t really trust it especially if the website is the first point of contact for the customers. Otherwise, people might think it’s some sort of phishing attempt by some shady guys like this. I like the site. I’m going to leave it up here for a moment.
I don’t know whether you’re a designer or a developer or a project manager or a user experience professional. No matter what your job title is, you probably want to create things that people love. I know I do. And I’m sure you all also have to start off, from time to time, on the defensive proving your product or service that it’s trustworthy. So, design helps a lot with that. It’s the face. It’s the impression of your product or service. If we want people to love what we make, the first impression needs to be great.
So on that note, I mentioned LessConf. Before I spoke this year, I attended last year’s conference, the 2010 conference. And Cameron Moll was one of the speakers there. He’s a designer that I’ve admired for a long time, but never got to hear speak.
Cameron Moll’s talk at LessConf 2010 was about good versus great design. And so, the key points of his talk were that great design solicits a strong emotional response. You can love it or you can hate it, but great design can’t be ignored. It’s one of the hallmarks of it.
Another point about great design is that it justifies its creation. Every decision that’s made in a great design is made for a reason and everything is intentional.
Finally, great design inspires other designers. I think this is one of the keys to the popularity of sites like Dribbble. We want to show our work to other designers. We want to show our work to our peers. They are our toughest critics. And if you can inspire them aside from getting feedback from them, we’ve done all the better.
So, how do we do that? How do we accomplish truly great design, and how can we leverage design that stand out among our competitors and make our customers love us?
Well, a lot of people, if you ask designers, will say, “You need to think outside the box.” Duh, right? You hear it all the time. And it’s such an overused cliché. I hate the term ‘think outside the box’. But everybody knows that it means to take a creative approach to problem solving. But with design, the problem is that most people don’t really know what the standard approach is. So, before we can understand what it means to think ‘outside of the box’ as far as design goes, we have to know what that box is.
And that’s really what my book is about. The Principles of Beautiful Web Design breaks the subject down into five chapters – layout, color, texture, type and imagery. So, why would I want to teach you to think inside the box in a book about design? Well, it’s because the design principles, they have universal appeal. They’re widely accepted. And they’re a great foundation for design.
So, here’s the quick, quick version of basic design principles just to give you an idea of what it means to think inside the box.
Number one, when it comes to layout, we want to try to achieve balance. And there’s two different ways that we do that. We can go with a symmetrical balance feel and asymmetrical balance. Symmetrical is pretty obvious. Can you divide it down the middle and have both sides of equal weight in the composition?
Asymmetrical is a little hard to understand. In this poster, around the right, we have this huge flamingo. And then, we’ve got this pop sucks bubble on and there’s other little text bubbles and these tiny flamingos at the bottom. But this poster is a great example of asymmetrical balance. To understand what it really means, all you really have to do is kind of put your finger underneath the bottom of that poster right in the center and tell me whether or not you think it’s going to fall off your finger to the left or to the right. If it does, if you do that little test with your website and it feels like it’s going to fall off one side of the screen than the other, then it’s not really balanced. It’s a weird topic to talk about, things having weight and all that, but it’s important for websites. A lot of times when a design doesn’t look good, it’s because it’s off-balance.
Another key subject of layout is the concept of unity, which can also be achieved in two ways. We can achieve unity through proximity. Things that are close together feel like a cohesive, single unit. The same are true for things that are placed close together or they have the same color or they’re repeated in some way.
These, I know, are just little paint splotches, but unity is very important especially for things that we want people to see as a cohesive unit. List items, that’s the reason why we use bullets. Navigation structures, that’s the reason why we give the same look and feel. We want all the pieces of the same nav to be the same size, to have the same background so that people see them as a single entity. So, that’s the concept of unity.
The most important thing about layout is the concept of emphasis. And there’s a lot of different ways that we can create emphasis – through the placement of an element on a page, through contrast (differences between elements), isolation (taking something and pushing it away from other elements on the page), continuance (it’s when we see a line, our eyes tend to follow that line to the next point) and the concept of proportion (the play on the differences on size, another contrast issue).
So, taking those things into consideration, where in this picture that you see here, which chair does your eye lead up to? I shouldn’t have said chair. Where does your eye immediately jump to in this picture? For me and probably for the rest of you, my eye immediately goes to that bottom-right chair. And the reason for that is that our brains are really good at picking out really tiny differences between visual elements. We immediately spot anomalies. I call these ‘glitches in the matrix’.
If you’re designing a site, you control those glitches and therefore, you have mind control. You can actually guide the user’s eye around the page. And that is our primary role as designers. We want to tell a story. We want to show people where to look first, where to look second. We’re in control of the narrative that way.
Also, we have business goals. We need people to click our call-to-action or we’re not going to get approval from our boss. So emphasis, like I said, is probably the most important concept for layout.
So, another of those examples that I showed have anything to do with sites or apps. So, how does this apply to web design? Well, design principles like proximity, continuance and unity, they talk about relationships about visual objects. This is why it’s important to get all the content and components and do some IA work upfront. Now, once you have all these cards out on the table, it’s time to establish some structure.
So, it helps to use a rule of thirds or typographic or a simple column-based template (like the one here) to help with that. And in the last five years since I started to write the first edition, grid-based design on the web has really become the norm. You can thank people like Khoi Vinh, Mark Fulton and Richard Rutter for helping us to make that transition.
There are a lot of tips and tricks to designing on a grid, like knowing that dividing content to thirds (i.e. one-third, two-third ratios) has universal appeal, which is why most column-based grid systems are divisible by three.
The one you see here is a simple 12-column grid based on Nathan Smith’s 960.gs site. Grids had been really essential to print design for years. Books like Josef Muller-Brockmann’s Grid Systems in Graphic Design to Timothy Samara’s Making & Breaking the Grid had been popular for a long time. But just last year, Khoi Vinh published a really great book called Ordering in Disorder, which is the first book that I know of that specifically tackles using grids on the web.
So, most developers get design up to this point, up to the end of chapter one. Developers like structures, frameworks, rules, formulas and principles – and so do I. That’s how my brain operates, as well.
But then, we get to the concept of color. And a lot of people are really intimidated by the concept of choosing colors. But there’s a lot of formulae and proven methods for choosing great color combinations; most of that starts with the good old regular color wheel that we all learnt about in primary school.
You can see here that there are three main types of color schemes. The first is the monochromatic color scheme. That’s where you take a single color from anywhere on the color wheel and combine it with tints or shades of that color to create a color scheme.
The next type of color scheme is the analogous color scheme. And that’s where we take a one-third slice of the color wheel as if it were a pie. You can take up to one-third of that pie. You use that slice to pick out the colors for your site design.
Now, the third type of color scheme is complementary. These are usually the most difficult to tame because complementary colors are opposite of one another on the color wheel. And therefore, they’re basically the most different colors we choose from one another. It’s a little hard to work with. But then, it provides really nice results. And there’s a lot of different variations of complementary color schemes. There’s split complementary, triadic and tetriadiccolor schemes.
But sticking to these color schemes is a great way to stay inside the box and come up with some colors that actually work together for websites rather than choosing them at random, which a lot of people that aren’t designers do and that’s a fail point.
The next chapter is texture. And for me, texture is a very important part about designing for the web because default HTML is flat. It’s linear. It’s based on a bunch of rectangles. And our world is not. It’s 3D. It’s non-linear. It contains all sorts of interesting shapes and lines and texture.
So, you can use texture to create depth, to suggest movement and evoke feelings in your design. It’s often overlooked, but it’s very important.
How important? Well, when you’re sitting on a toilet, would you rather find a roll of bathroom tissue or sandpaper hanging on the wall? The difference to your nether regions is the effect that the texture has.
So recently, a friend of mine, Morgan who runs a decorating blog asked for advice for a redesign. She knows how to design and she was going to redesign the site herself, but she didn’t really know where she wanted to go with the direction. She didn’t know what she wanted. She had some examples of some sites that she liked and so, she sent me an email and she explained, “These are some sites that I really find inspiring and I want to include aspects of that in my redesign.”
So, this first one is a blog called Young House Love (which incidentally, my wife loves this blog, too). It’s a blog by a couple of do-it-yourselfers. It’s a basic blog design, a kind of nice-looking template. The next site she sent me was this one, Decor8Blog.com. Okay, a little bit girly, kind of scrapbook-y. And then, the third one was DesignSpongeOnline.com, another great design blog.
And as I was looking through all three of these (I’ll go through one more time here for you), Young House Love, Decorate Blog and Design Sponge Online, as I look at all three of these, they all have their big feature images. They have tons of texture and they have elements that look like they were glued on the page. It’s a very crafty, do-it-yourself scrapbook-y look. Rather than using those websites individually as inspiration, I encouraged her to go to a craft store. Pick up some scrapbook supplies and start from there.
That’s sort of the foundation, the inspiration obviously for the texture of all three of these sites. And if you start with that, if you start with the inspiration behind the sites that you love, you’re bound to come up with something that is at least a little unique.
Moving on from texture, the next chapter of the book is typography (chapter 4). Typography, like the concept of layout, it’s another deep subject that you can really dive into. And if design is the face, as I’ve said before, then typography, it’s really the voice of your brand. So, there’s a lot to learn. There’s a lot of mistakes to be made, and there’s a lot of potential to be had as well, using typography for your design.
So, the key thing to know is there’s all the different families of type, i.e. serif, sans serif, fixed width, handwritten and novelty fonts. You also need to know that you want to limit the number of fonts used in your websites. You don’t want to use more than two or three font families in a design. You want to avoid kitschy novelty fonts whenever you can. But that’s about as deep as I want to get into typography
Moving on, the last chapter of the book is about imagery. And essentially, you need to know that you want to choose images that really support your content and you want to get them from legitimate sources. If you can take your own photos or create your own illustrations, great. If not, you can find lots of resources in stock photography. You could usually find stock illustrations and things like that to use in your design. The key is to find images and illustrations that really support your content. You’re not just adding them for flair.
And if you follow the design principles, color theory, make some solid typography choices up to this point, you can really expect to come up with something that’s at least this good. This is just a WordPress theme. It could be any WordPress theme. The point is it is a very universally appealing design. It’s basic. It looks okay. Most people will see it and go, “That’s pretty good.” A lot of people will probably download this theme and use it for their site design. But if it has universal appeal, it probably doesn’t have a lot of real love behind it, as well.
Let me move on and tell you a little story while I’ve got your attention. How many of you out there enjoy cooking? I do. I have always used a recipe when I cook. I found that if I started getting creative in the kitchen and making substitution, things rarely turn out well.
I need the cooking equivalent to design principles. My left-brain wife on the other hand (you’re seeing here with her mom. That’s where she gets most of her cooking chops from), she just finished her PhD in chemical engineering. So, she’s about as right brained as they come. And she can cook things that she’s only tasted before. Last week, she looked at what we had in the fridge and decided she was going to make scallop potatoes. No recipe. She’s never made them before. She just whipped them up. And they were great! It was like the best scallop potatoes I’ve ever had.
So, back to me and recipes, Amy and I use a lot of recipe sites. We use a site called AllRecipes.com because their library is so huge and they have user ratings, so it helps you eliminate bad ones. The highest rated recipes on AllRecipes.com, they’re usually are pretty safe bets. And the fact that they’ve been voted up or down means they have fairly universal appeal, like that WordPress theme I just showed you. But there’s a negative side.
Oh, my goodness! They have done it! Someone has created the world’s best lasagna. That’s five stars and 5,389 reviews. I made this recipe once. It was for Amy for a special dinner one night. I followed the recipe to the letter. It wasn’t the worst lasagna we’ve ever had, but it was really just lasagna. It was better than Stoffer’s frozen lasagna you get at the grocery store, but it was definitely pretty “meh”.
In fact, most of the highly reviewed five star recipes that we found are like that. They’re simple, basic and they’re sure not to offend anybody. They’re not too spicy, not too gamey, not too anything. Design is the same way. Following the principles will help you create something that has universal appeal, but universal appeal is like bland lasagna.
So, how do we fix that? By pissing the principles. If we apply individuality, inspiration, expression, creativity, reaction, artistic value, if those are our goals, then we’ve got to break some rules.
This urinal that you see here is Marcel DuChamp’s fountain. Marcel Duchamp was an artist. He was part of the cubist movement. And he created this work of art that really is just a urinal turned on its side with a signature and a date on the side. He created this work of art to shift the focus of art from physical craft to intellectual interpretation. And a lot of people, they see this, “Oh, wow! They just took a urinal and put it an art gallery and called it art.”
A lot of people say DuChamp is a chump. He’s not a real artist. He’s a hack. But if you look at his other works, you’ll see that he really does know about art and color theory and painting and the art movements of his days. He likes breaking the rules though. This is his new descending staircase from 1912.
What does it look like when we break the rules of the web? Well, maybe it looks something a little bit like this. This is a site called Generator X. And to me, it’s unsettlingly beautiful. It’s definitely not everybody’s cup of tea and that color scheme is pretty bright. But it’s kind of cool because the background changes every time you reload the site. That’s kind of interesting because it’s a site about a software-modulated design.
This design was pretty crazy and rule-breaking, it’s an interesting design. This site comes from a book called Fresher Styles for Web Designers by Curt Cloninger. I really highly recommend the book. It has lots of examples of sites that really break the rules.
But breaking the rules doesn’t have to be that extreme. He’s another example of a site that breaks some of the rules of what we have for web design. Where is the navigation of the site? You don’t really see it. You don’t really know what’s going on here. You see there’s a scrollbar. And you see that question mark at the bottom of the page. And knowing what I know about the concept of continuance, my eye immediately goes down to that question mark. I think yours probably does, too. So, if you scroll the page, you get this – a pretty interesting behavior for a website.
A lot of people have done a lot of really fun outside the box experiments in designs like this. It’s just about using what we know about layout and color and texture and bending the rules a little bit; taking some of them and breaking them.
This next example is the Beer Camp website for South by Southwest 2011. It’s created by the folks at Include in Washington, D.C. And they’ve created interest by using proportion and continuance. If you’ve noticed if you look there in the center, things tend to get smaller and smaller. And so, when you start to scroll the page, you actually scroll into that little tiny square. And I’m not even going to give it away completely, but if you keep scrolling and scrolling, there’s a nice little surprise at the end. There’s a theme to it. So, it’s just a really interesting design. It doesn’t fit in the box of a good color scheme. It is a great example of monochromatic design, but it does break some of the rules of what we think of as a typical website that would work for any other company or event.
So, like my wife and her scallop potatoes, these three examples, they’re designers who tasted something or heard something. They saw something and they got inspired. They’re designs that are not based on a recipe, but a knowledge of design is evident in all three of them.
Design is about taking the standard and twisting it just enough to create something unique. So, the famous graphic designer, Tibor Kalman – that’s him above there with some of his controversial artwork – he once said, “I’m always trying to get people to unlearn what they learn in school.”
So, if we’re going to become better designers, if we have to unlearn what we’ve learnt, why would we even learn the rules to begin with? Well, the answer to that is all around you. Without knowing or starting from basic principles, it’s possible for things to go very, very wrong.
I’m going to show you a few examples of designers that also break rules. And I’m going to breeze through these three examples really quick because I don’t really want you to go and look them up or anything.
This first example has changed now. The site is not a whole lot better. I was working on a website for a company that sells parts for food service equipment about a year ago when I found this. I had taken a screenshot of this. It’s just so hideous. And what I see when I look at this is just a complete ignorance of design principles. The proportion is all off. There’s no real sense of balance here. There’s lots of different fonts going on and it just doesn’t tell me at all what the company is or who they are. I just see this globe floating in like that of oil. And that’s actually a flash animation, by the way. And then, if you use the word ‘site navigation’ on your website as an image, you know you’re doing it wrong! So, I know all those aren’t really breaking design principles per se, but just breaking in the box examples of what web design should be.
This next example. The color scheme is all wrong. Fonts, there’s a lot of different fonts going on there. There’s some issues with contrast on the page. And really, it just boils down to color scheme, gradients and lens flare and soft edges and a lot of other things.
But this one is a site that a friend of a friend had a technical issue about. And this is literally what they asked – what add-on they needed to incorporate payments to their page online. So, this was the website that they were trying to have an add-on incorporated on the page. Would you really trust this site with your credit card going back to the concept of a bank website or an ecommerce website? Would you trust this site to be able to trust them? In all seriousness, I wouldn’t like if there was an option to buy something. And that’s the problem.
So, this site (the next site) is a little more trustworthy. It’s somewhat professional-looking. The other one, I’m sure you’re like, “Ewww…” This is a site that I actually worked on. It was a hosting plan for one of the first companies I worked for after college. We didn’t design the site. Somebody else did. And we had to do maintenance. Funny enough, we had to add ecommerce to the website back in 2004. And I thought it was horrible then, just the combination of reds and purples that are just not quite complementary colors. And again, fonts here all over the place. This is a table-based website made way back in the day of 2004. And this site is still alive in all its blinding glory.
It’s obvious to me that the people who designed like this, they don’t have the principles. They’re not starting from a foundation. So, if we plotted these designs on a bell curve, then they’d be way over here on the painful side. You don’t want to be there.
So, learning design principles is important because that gets you into the happy medium. If you follow design principles, you get that safe middle area. But when you start breaking the rules once you know about design, you start being able to create things that are uniquely awesome. All really bad and really great designs break rules, but great designs do it intentionally.
Sometimes though, there are some rules that we can’t bend. We have company colors or maybe there’s a specific type face we have to work with. That can be a good thing. A famous furniture designer and architect, Charles Eames said that design depends largely on constraints’. And it really is true. As a designer, constraints really help the design process, not hinder it. It takes away a lot of your decision-making process.
I’m a huge fan of mid-century design and architecture. And one of the biggest icons of mid-century furniture is Eames Chair. It was designed by this designer Charles Eames back in 1956 by Herman Miller. And over 50 years later, it’s still a very popular selling chair by Herman Miller. It’s unique, but it beats all the constraints of what a chair should be. And around the same time, the early ‘50s, there were a lot of designers who were coming out with chairs that really look very different from what you expect a chair to be. And these were also icons of design, but you don’t see those in houses anymore because they faded away. They didn’t really fit the constraint of what a chair should be. They either weren’t comfortable, or weren’t practical. So, sometimes constraint is a good thing.
Another famous architect was Le Corbusier. He was a designer, an architect. And he is famous for his standardization and machine aesthetics. Corbusier established the five points of modern architecture. You can see over here that he believes that all buildings should be built on pilings above the ground. He was very specific with his rules. He believed that all buildings should have a rooftop terrace, a green space to replace the green space that was taken up by the building. He believed that the pilings that he required gave the building the ability to have a free façade. To have as many windows as possible and have open floor plans.
And so, most of the work you see by this architect adheres to those principles, those guidelines. But even Corbusier knew when it was time to bend some principles, even his own rules. He abandoned every single one of his principles you here with this, the Ronchamp Chapel. It was built in 1954 in France.
A lot of corporate design work has so many constraints that it’s hard to be creative. It’s hard to bust out and break the rules. Corporate companies, they don’t really trust their designers to color within the lines and establish extensive brand documents detailing all the design decisions associated with any print, web or video piece that has to do with the company. Sometimes, it’s good, even for a company, to break them all down. Usually with most brand standards documents, the logo is pretty high specified with what you can and can’t do with that.
In MailChimp, we have a design lab of talented artists and illustrators. And all the time, they do really crazy things with Freddie von Chimp. That’s our mascot. It was originally drawn by John Hicks. And these are some of the permutations of Freddie from some of the various log in screens and t-shirts the design labs came up with. And this is the company logo, the company branding the design lab plays with all the time. I have a ton of admiration and respect for those guys, but what they’re doing really is just breaking the rules and changing things up a bit. The design lab keeps track of these things. And they always get lots of love on Twitter when they change the log-in screen.
Up until a few weeks ago, May 4th, the most popular log-in screen of all time was this one, the World Cup log-in that we did. So, we don’t just do that with the logo, with the mascot, Freddie. We also did that recently with the entire website itself. Design lab was in-charge of the product site, MailChimp.com; the user experience team (where I work on) is in charge of the application itself.
The website recently went through a full redesign. It went from this classic, safe, complementary color scheme that worked well for MailChimp for a long time to this. It’s very different. The colors are amped up. There’s a lot more emphasis on illustration. The text, we’ve reduced. We’ve have removed all of the fonts but Helvetica. So, it’s a completely different direction, a completely different look.
Once they’d come up with this redesign for the product site, they passed the design bottle over to the user experience team to apply the same to the application. So again, this is the application for it. Again, very beige neutral. It definitely has universal appeal. Nobody was going to be offended by this app design. And then, this was after. A similar structure and a lot of things are the same, but it’s a totally new look.
We had several complaints from people saying that the colors were too bold. One person even said that it gave him a headache, which is something, if you’re designing things, you don’t want to hear that. You want people to love the things you do. But with those few negative reactions, we had a lot of “wow” feedback. We had a lot of people that really, really love the redesign.
And the cool thing about this process of redesign is that those colors we had before, the beiges and what-not, they were so ingrained in the CSS that if you wanted to change a color, you had to change it in 50 million places. But as we redesigned, we also standardized a lot of our styles in a way that allowed us to change things with one line here and there. And that allowed us to add another feature that people had been asking for a long time, which is co-branding. So, we were able to allow people to change the header background and the colors of buttons and a lot of things in the site. This is one of the predefined themes in MailChimp.
And so, for those few people that really hated the color scheme that we created, or maybe it just didn’t work for them and they wanted it to match their company colors, we’re able to let them do that. So, whether they’re party poopers or not, they could create something like this.
Going back to those principles that I’ve talked about before, they’re not really as much principles as they are constraints. So, following them, just like following any constraints for a project, will allow you to create designs with appeal. But bad design unintentionally breaks the rule while a great design breaks at least a few intentionally.
So, you’ve got to break rules in at least one of these categories. You’ve got to be break either layout, color, texture, type or imagery rules. But remember that design is problem-solving. All these logos that you see here are iconic logos by Saul Bass. He’s one of the most prolific icon designers of our time. In fact, you probably know every single mark here without ever seeing any logo text. We’ve got Bell, we’ve got AT&T, United Airlines, Avery, Continental Airlines, United Way, Minolta and Girl Scouts.
So, he’s learning how to get his message across visually and creatively without using words. So, that’s really what we want to do.
Another example I think Freddie von Chimp and I appreciate is this wall of bananas. And this was designed by Stefan Sagmeister, who is famous for getting his short proverb-esque messages away in innovative ways. This one on the wall has a hidden message. He hung them all up like these when they were all green. And as they ripened, they revealed the message.
There are two different ages of bananas that he used when he did this wall and it was very intentional. He said that self-confidence produces fine results.
My wife told me the other day about design. She was working on something. The most frustrating thing about design is that there is no right answer. I think that’s what I really love about design. No matter what you’re designing, you really can’t be afraid of taking some risks. You have to know the rules so you don’t end up making mistakes like those few examples I showed before, but you need to also have some confidence and do some crazy things every now and then.
The same guy who designed that also said that ‘you can have an art experience in front of a Rembrandt … or in front a piece of graphic design’. The most important thing to remember is that we’re delivering a visual experience to our visitors and our users whether we mean to or not. It can be a formal one or one that’s focused on principles and intended to appeal to the masses, or one that goes above and beyond those principles. The choice really is yours.
So, I’m going to end this talk with one more quote. It’s not from a designer or from an architect or anyone like that. It’s actually from Willy Wonka, of all places. In the first Willy Wonka movie, Gene Wilder says that, ‘we are the music-makers and we are the dreamers of the dreams’.
Having the opportunity to push pixels around that millions of people see is an amazing power. It’s a gift. If we’re designing things that have universal appeal that people think are just okay, we’re really doing ourselves a disservice. We’re missing the opportunity to do much greater things. So, I encourage you all to learn the design principles. Learn the rules. And then, figure out how you can break them, how you can come up with some innovative and unique ideas.
Thanks for watching.
Simon Pascal KleinPascal is a standardista graphic, web and front-end designer, and a rampant typophile. Born in Mainz, Germany—the birthplace of Gutenberg—he now works in Canberra as a contract designer and studies at the Australian National University. He's been actively engaged in the Open Source community and local web industry, notably as one of the unorganisers to first bring BarCamp to Canberra. He enjoys drinking in as much good type as he can get and has been happily bending beziers since 2004.
