“3 Forward, 2 Back – The Proper Way to Fail” plus 1 more - Speckyboy Design Magazine Feed

3 Forward, 2 Back – The Proper Way to Fail

Posted: 11 May 2012 01:10 AM PDT

We all go through it at one time or another. You're working on a project and no matter how hard you try, you just can't seem to get it to “work.” The colors are wrong, the type is inappropriate, the composition is hideous – it's just a mess and you eventually write it off as a failure. Sometimes you have the luxury of hiding the whole thing in a folder in the very back of your hard drive, where no human eyes will ever come upon it. But what happens when you have a project that's due in to your client at 8AM, and it's currently 3AM and you've got absolutely nothing decent to present? Do you curl up into a ball and declare yourself a failed designer for all time? Or is there another way to approach this inevitable feeling which will leave you, if not satisfied, at least able to continue on with your life and your career with confidence? Let's explore, shall we?

Prepare To Fail

Image Source

You've probably heard it said that failure is a necessary part of success. That's fine to say and all, but in my scenario above, when it's 3 in the morning and you're sobbing uncontrollably, chances are you're not going to simply repeat that adage to yourself and snap out of it. The key to really believing that failure is a necessary part of your process is conditioning yourself beforehand, so that it doesn't come as a complete shock to you when you're actually in the trenches. Keeping your mind sharp with creative exercises every day, that are unrelated to your work, will gradually introduce you to the idea of failure, because trust me – you're going to fail at many of those exercises.

Force yourself to keep to a schedule for your personal projects just like you schedule your paid work. There's no worse feeling than failing to complete a project when you have yourself as the client. It's much worse, in my experience, than bombing on a paid assignment. At least you're not expected to hold yourself accountable. But once you experience this unique form of torture often enough, you'll find that it will actually help you start working faster and more efficiently. You'll become used to the idea that you'll have to give it a few extra tries before you get it right, and by the time your next freelance assignment comes along, you'll be ready to fail with gusto. Well. Maybe not gusto. But at least with some kind of dignity.

Through the Valley of Insight

Image Source

In the book Switch by Chip and Dan Heath, there's an exercise from Tim Brown, the CEO of design consultancy firm IDEO which I think is especially useful to designers “learning” how to fail. In the book, Brown is said to provide his employees with what he calls a “project mood chart,” which informs people how they will feel at various stages during any given project. The chart itself is shaped like a V – at the left point of the V, there's a label that reads “hope.” This signifies the rush of excitement you feel when you first start on a project. You're relaxed and focused, everything is going swimmingly and you're absolutely sure you'll get everything in to the client on time.

The label on the other end of the V reads “confidence.” This represents the way you feel after you've finished a project successfully. You're high on positive energy; you've kicked ass and your client wants to marry you. Sweet. This is how every designer wants to feel after it's all over – proud and accomplished. The trick is getting there.

The third label in the V-shaped diagram reads “insight.” This is the point between “A” and “B,” and it's where all the failure and depression and late-night drinking binges lie. Everyone has to cross this valley and gain the insight they need to get to the confidence of a successful job well done. It's like crossing a desert – many never make it. You can almost imagine dry skeletons of your fallen design comrades as they gave up and got stuck in the valley forever. Some gave up on creative work altogether and became secretaries or accountants. You don't want to be one of those people. You chose a creative field for a reason, and the sooner you develop the mental toughness to cross the unpleasant valley, the more prepared you'll be for when you have to do it all over again next time.

Isn't being a designer fun?

It's Not Really Failure

Image Source

Here's something about failure that you might find interesting. Most of what we normally refer to as “failure” isn't actually failure at all. If you're stuck in the middle of a project that's going nowhere fast, you can feel like there's nowhere to go but down and write the whole thing off as a lost cause. But if you learn to develop persistence, you'll eventually realize that, despite things not going so smoothly at first, your momentum will eventually start to pick up and you'll inexplicably find the energy to begin scaling the side of the mountain to victory. Your confidence will grow the more more ground you cover, and eventually, it will overcome your sense of doom and the “failure” will show its true nature as a mere pothole in the road.

Conclusion

Everyone goes through periods where they feel like nothing is working right. And, no matter how much experience you gain as a designer, crossing that valley from hope to confidence is going to be unpleasant. Even with my years of experience as a writer and designer, there are still times when I need to go back and read or look at something encouraging – a quote, a sketch of my eventual project, or even an article like this one, to give myself a boost to keep on going. Giving yourself encouragement when you need it is essential to learning how to fail “properly.”

What Do You Think?

How do you deal with failure? Is there a system you have for conquering your feelings of despair?

The main components of Responsive Design

That's where Responsive Web Design comes in, content and/or layout that automatically adapts to the size of the screen on which it's viewed. At its most basic, the three primary elements of Responsive Design are a flexible grid, flexible images, and Media Queries, the latter introduced as a part of CSS3s. More on those in a moment.

Flexible grids

Flexible grids are basically themes and templates in which design elements are set in percentages rather than pixels. With percentages as the unit of measurement, that means that an element that's designed at 50% will always take up half of the screen, no matter how big or small the screen is.

Flexible images

At their most basic, flexible images couldn't be easier to create by writing a simple rule that states:

  img {       max-width: 100%;  }

Essentially this means that if an element is larger than its container, the rule forces it to match the width of that container. And since modern browsers resize images proportionally, the image aspect ratio is preserved as well. What's more, the 100% rule can also be used for almost all other elements as well, like embedded videos.

The Media Query

Since the introduction of Media Types in CSS 2.1, style sheets have been much more inclusive of mobile and other devices. Media Types essentially allow styling to target specific classes of web devices, with those types including handheld, screen, and tv. But with little standardization between devices and little support from device manufacturers, Media Types never lived up to their potential.

Media Queries live up to that potential and then some. But rather than being concerned with the type of device the way Media Types do, Media Queries look at the device's capabilities instead.

A simple Media Query might look like this:

  <link rel="stylesheet" type="text/css"    media="screen and"    href="generic.css" />

The two components of the query are the media type, set as screen, and then the actual query – (max-device-width: 480px) – which is essentially asking if the device's width is 480px or less. If that's the case, the device loads generic.css. If not, the link is ignored, as are others until the correct resolution is identified and the appropriate style sheet is loaded.

More than just resolution

But resolution is by no means the only design element that can be controlled through the use of Media Queries. Width and height of the browser window, landscape and portrait orientation, even layout, are some of the other parameters that can be set.

For instance, if a Media Query detects that a device is a smartphone, a design that may load showing three columns with a text area and two vertical sidebars on a computer screen might load on the smartphone screen as a full-width text area with the two sidebars as horizontal elements underneath.

A flexible mindset

Of course, a key requirement for flexible design is designers with a flexible design mindset. Unfortunately most web pages still aren't all that friendly on mobile devices, mainly because most designers still typically design just for the desktop with smartphones and tablets as an afterthought. Few designers approach design with multiple platforms in mind.

While there's is a learning curve in incorporating Media Queries into style sheets, it's the transition from designing with pixels to designing with percentages that stops some web designers. In reality, though, there's really not much difference in designing with percentages and it is easier as well.

Consider, for instance, the difference between assigning widths of 100 percent and 100 pixels to two identical elements. In one, you can be assured that the element will fill the screen, whether it's the screen of a desktop, laptop or iPhone. But an element that's 100 pixels wide would be large on a 480-pixel iPhone screen, but comparatively tiny on a desktop screen with 1600×900 resolution.

Responsive Design means business

For businesses, the main reason to implement responsive design is obvious. The easier it is for potential customers to navigate and find what they're looking for, the higher the conversion rate. But for many designers, responsive design for a business website has typically meant just shrinking the size of the content to fit a smaller screen. Anyone who's spent any time scrolling around and zooming in and out to find information they're looking for knows that a miniature version of a website isn't the answer.

Another way businesses and designers have dealt with the issue of designing for a mobile device has been to create a separate site for different devices with auto redirects according to the device. This allows the best interface to be provided as well as avoiding slow loading caused by javascripts and large images.

But there are a number of drawbacks to this approach, certainly one of them being the expense of creating and maintaining multiple sites and coordinating content across those sites. And, of course, when a new device comes out, there's yet another new site to be built. Fortunately, Responsive Design, if done correctly, can address almost all issues in designing for mobile devices.

You might also like…

The Challenge of Responsive Images →
15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →
15 Responsive CSS Frameworks Worth Considering →
WordPress Plugins to Help Make Your Site Responsive →

Design fricks news

Freitag, 11. Mai 2012