Tuesday, 30 July 2013

What Will We Build on a Foundation of Flat Design? - Vanseo Design

What Will We Build on a Foundation of Flat Design? - Vanseo Design

What Will We Build on a Foundation of Flat Design?

Posted: 29 Jul 2013 05:30 AM PDT

Over the last few years web designers have been returning to fundamentals. Focus has shifted from skeuomorphic details like reflections to the basics of type, layout, and color. Much of this shift can be seen in the recent trend of flat design, which I think signals a new foundation for web designers. The question I want to address today is what will we build on top of that foundation?

Web designers are finally coming to terms with how the web is different from print. We’ve always known the two were different, but we’re better now at understanding those differences and what they mean when designing online. If what we’ve learned from print is serving as the foundation, what we get exclusively from the web will likely sit on top.

Small stones piled to form a structure

Print and the Web

The web isn’t print. We might use both to display similar content and we often treat them the same way, but they’re clearly not the same thing. Each comes with it’s own advantages and disadvantages that suggest how best to design for them.

Print design is fixed, static, and known, while web design is flexible, dynamic, and unknown.

Print is fixed and static and the conditions under which a print design is viewed will generally be known in advance. The web is flexible and dynamic and the conditions under which a web design is viewed will generally be unknown in advance.

Print and the web do share some similarities. For the most part when looking at a print design, we’re looking at text and images on the page. We’re still mostly looking at text and images on the web, though on a screen instead of a page.

It’s because of these similarities that we can learn much from print. Viewers of both designs are essentially the same and we can create designs that make clear the hierarchy of information and control visual flow from most to least important.

Of course, the web allows us to consume additional content like audio and video and it provides a mechanism allowing consumers to interact with the design and even shape it to a degree.

Print design occurs on a 2-dimensional plane. The web adds another plane, the z-index. Print can reference other documents, but the web can directly connect to them. In a sense this is another way in which the web contains more dimensions than print as each connected document forms another layer.

Print tends to be more linear in its narrative. You can employ flashbacks and other non-linear devices, but in print you generally start at the beginning and work your way in a straight line to the end.

The web adds behaviors and allows viewers to interact with and change the content. In return, the design can respond to these interactions and the conditions under which it’s viewed in order to adapt itself. This leads to a less linear narrative or at least an ability to absorb web content in non-linear ways. The viewer has more option as to how the content will be presented and consumed.

This responsive and adaptive behavior on the part of both the design and the viewer leads to more modular thinking in how websites are designed and built.

A design for print is permanent. Once finished the design remains as is. A design for the web can be iterated. Even after a web design is released it can be changed and improved with feedback. What it is at any point in time can be vastly different from what it was when first “finished.”

We’ll probably discover more differences between print design and the web design as technology and the web become more than they are today.

Again the key differences are:

  • Print is fixed, static, known, and permanent
  • The web is flexible, dynamic, unknown, and changeable

If we’re building a foundation based on the influence from print design, it stands to reason we’ll build on top with those things the web offers that print doesn’t. What we build on top of the flat design foundation will take advantage of the strengths of the web.

Building on a New Foundation

We’ve begun to take advantage of the flexibility of the web through responsive design. We’re learning to design mobile first with a minimalist base and then progressively enhancing our designs as we sense more capable devices. In the future we’ll likely have more ways to sense the environment and deliver more refined experiences based on what we sense.

We’re coming to understand that our content should be chunked and modularized. Through whatever sensors we have available we’ll put logic in place to adapt these chunks and modules and deliver the best experience based on the context and conditions.

We’re also beginning to take better advantage of the dynamic nature of the web by adding behaviors, interactions, and animations. CSS gives us the ability to build up simple animations from transitions and transforms. There’s a danger of overdoing these, but I think we’ll see small animations used in ways similar to how we’ve been using drop shadows, gradients, and similar details.

The animations I’m thinking about will be more understated and serve as visual cues to inform our audience. Think of a progress bar that does nothing to change progress, but makes it clear something is happening and can even be designed in a way to make that change feel quicker or slower.

Where we used to change the color and background of navigation items in an instant, we’ll transition these changes. We’ll use movement and timing not to distract but to create rhythm and direct flow. We’ll use these things to delight much the same way we used skeuomorphs to delight the last few years.

I don’t think the flat in flat design will last overly long. Soon enough designers will bring back depth to web design, though I suspect it’ll come about more through layering in the z-axis than through overuse of gradients, shadows, and reflections. I expect the latter three will be used, though in more subtle ways.

The issues we’re facing with images will ultimately lead us to use more vector based images, saving bitmapped imagery for specific cases where photographic realism is necessary.

Earlier in this post I mentioned how print and the web offer different ways to build a narrative. I think this is one area ripe for exploration. Think back to when movies moved from silent films to talkies. The change the industry went through involved more than simply adding sound to the visuals. It required a new narrative and a new way of acting.

Silent film stars needed to communicate through facial expression and so the visuals featured many closeups. Once sound was added this was no longer necessary. Sounds did more than add another sense. It changed how the visuals were recorded. It changed everything about how movies were made.

I don’t think we’ve yet figured out what the narrative on the web should be. For the most part we’re still leaning heavily on the beginning to end linear narrative we’re familiar with. My hunch is the narrative will change to one controlled more by those consuming the content than those creating it.

Closing Thoughts

I think we’re heading toward cleaner and more minimal interfaces based on an objective foundation of universal principles. These will serve as an aid to make our designs more and more usable.

To this objective foundation we’ll build layers of enhancement that offer additional cues and hopefully delight our audience.

  1. A layer of objective and universal principles will form the foundation
  2. A layer will be used to respond and adapt to different conditions and devices
  3. A layer of detail will use small animations to provide visual cues and delight
  4. A layer of subjective emotional aesthetics will sit on top and help make a connection with viewers

These layers will move from the objective and universal at the bottom to the more subjective and personal at the top. Much of what we build on top of the foundation will take advantage of the strengths of the web. They’ll look to be more flexible and dynamic and they’ll be more modular giving our audiences more control over how they interact with our designs.

The post What Will We Build on a Foundation of Flat Design? appeared first on Vanseo Design.

Friday, 26 July 2013

So, Don’t Do That - Vanseo Design

So, Don’t Do That - Vanseo Design

So, Don’t Do That

Posted: 25 Jul 2013 05:30 AM PDT

Patient (lifting arm): Doctor, it hurts when I do this.
Doctor: So, don’t do that.

Sometimes the answer when a solution isn’t working the way we’d like is to stop using it, think about what problem it was trying to solve, and then find another solution to the problem that does work.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

I was recently reading an interview with Brad Frost about some of his thoughts on responsive design. In answer to a question about whether or not stripped down, mobile first designs are watering down desktop experiences he offered:

You look at something like navigation. I write a lot about responsive Web design navigation patterns. So people will get in touch with me and say, “Well, Brad, this is all well and good, but I have a site with ten layers of navigation.” I say, “Well, don’t have ten layers of navigation.”

It reminded me of the joke above and something I wrote awhile ago about whether or not designers sometimes force solutions instead of solve problems. I wrote the post in regards to not being able to make a certain technique work and wondering if the problem was less the inability to make it work and more about choosing the wrong technique in the first place.

Design Involves Tradeoffs

There’s more than one solution to any design problem. To design is to make a series of decisions within a set of constraints. An easy example is in the world of smart phones. You’d likely agree it would a good thing if our phones were more powerful. I’m sure you’d also agree it would be good for their batteries to last longer. Unfortunately more power typically means less battery life and so designing a smartphone involves a balance in choosing how much power and how much battery life.

Neither is necessarily better or worse, but choosing to maximize one means giving up something of the other. The decision involves a tradeoff and it’s up to the designer to determine which (more power or a longer lasting battery) is more important to the goals of the particular phone.

Another example is the current landscape for responsive image solutions. Some techniques optimize the flexibility of a single image over performance. Others optimize performance, but require a greater effort in the creation of the images. A third technique might optimize the ease of the solution above everything else. Ideally we’d like a technique that offers flexibility, ease, and performance, but it doesn’t yet exist if it ever will. Instead we have to choose which optimization is most important for our particular project.

Getting back to Brad’s quote, responsive navigation patterns are attempts to solve the problem of a lack of space on the screens of smaller devices. They tend to limit the number of navigational items that can be included and how many levels deep they can go before they become unworkable.

If your site currently uses 10 levels of navigation with plenty of links at each level and you want to make the site responsive then you have a choice to make.

Which is more important to you? Responsive navigation or maintaing all the items and levels of the navigation? I’d suggest responsiveness should always win in this case, but if it’s your project you might have different thoughts. It’s not a matter of one being bad because it conflicts with the other. It’s a matter of choosing which is more important for your design under the conditions and constraints of your project.

The above is what’s meant when people say design is compromise. We make decisions when designing and the decision to do or optimize one thing is sometimes also a decision not to do or not to optimize something else. You have to make these choices while designing and any rightness or wrongness to you choice is dependent on the particulars of your project.

Making Decisions

I often see people criticize some technique or decision for not being perfect in all contexts. If you’re one of those people, get over it. Perfection is something to strive for, but it’s not something we’re ever going to reach. There is no perfect technique or design decision.

Every project comes with constraints that keep us from doing everything we might want. Here are two you have to deal with all the time.

  • budget
  • deadline

Your design and your decisions will be different if you’re getting paid $500 as opposed $50,000. Your design and decisions will be different if it’s due next week as opposed to next year.

Beyond these 2 obvious constraints we have others imposed on us by external sources like the client or the client’s customers. We self impose additional constraints from the moment we begin to identify the design problem and develop a concept to solve it. Some constraints lean toward the arbitrary like a personal preference or a choice in one CMS because you’re more familiar working with it.

It’s our job as designers to both choose constraints for a project and work within the constraints given to us. Sometimes those constraints will mean we can’t do something we’d like or that we have to choose one technique over another. When that happens it’s not our job to get mad at the techniques for not doing exactly what we want. We shouldn’t force it to do something it wasn’t meant to do.

It’s our job to choose those things that work for the project and let go of those things that won’t. Sometimes we have to decide between two things we’d like to do and optimize one, possibly at the expense of the other.

If the responsive navigation pattern you’re choosing doesn’t accommodate 10 levels of navigation then don’t have 10 levels of navigation or find another pattern. Find a way to organize the content so you only need 2 or 3 levels of hierarchy. If those 10 levels are vital then don’t use that responsive pattern.

Summary

We sometimes get caught up in thinking one way of doing things is bad, because it doesn’t allow us to do something else we want to do or in the way we want to do it. We get locked into one technique even when it doesn’t lends itself as a workable solution to our problem.

Design is about making tradeoffs. Any decision to optimize in one place in the design usually means the opposite for another place. All design involves compromise, where something is favored at the expense of something else.

Good design is about making the best decisions in regards to these tradeoffs and in the context of the goals of the projects. A more powerful smartphone is good. So is one with more battery life. If you can’t do both you have to choose one over the other. The phrase design is compromise doesn’t mean watering down everything so everything gets along. It means having to choose one thing over another at times, which is what design is all about.

The post So, Don’t Do That appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 23 July 2013

Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design - Vanseo Design

Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design - Vanseo Design

Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design

Posted: 22 Jul 2013 05:30 AM PDT

The last few weeks I’ve been looking at the industry shift to a flatter design aesthetic. First was a look at skeuomorphism and the reasons it exists before falling out of favor. Next was flat design starting with how it’s done wrong followed up with thoughts about why it’s creating a new foundation for design on the web.

A few times throughout this series I mentioned that flat design takes much of its influence from Swiss or the International Style of Design and I thought it would make sense to take a quick look at Swiss design and the principles that guide it.

beethoven-josef-muller-brockmann.jpg
Josef Müller-Brockmann: Concert Poster for the Zurich Town Hall (1951)

The Origins of Swiss Design

Swiss Design got its start in post World War II Switzerland, though historians prefer the name International Style of Design. It was hardly limited to Switzerland and even found some of it’s greatest success in the development of logos and visual branding for U.S. corporations.

The Swiss/International Style of Design emerged from earlier design styles like De Stijl, Constructivism, Bauhaus, and The New Typography, though without the political and historical contexts of those movements. In some respects it can also be seen as a reaction to Nazi Germany which suppressed geometric abstraction, something which features prominently in Swiss designs.

The Swiss style wasn’t limited to graphic design. Architects such as Le Corbusier and Phillip Johnson are among those considered part of the International Design movement and the style spread to the more general world of art.

Designers in the International Style saw design as part of industrial production. They sought simplicity and believed aesthetic beauty arose out of the purpose of the thing being designed. Aesthetic beauty wasn’t itself the purpose. In other words they believed form follows function.

They saw designers as communicators, not artists, and believed that design should be grounded in rational universal principles discovered through a scientific approach. Their ideal of design was to achieve clarity and order and they saw no room for eccentricity or personal expression. They also saw design as something socially worthwhile and a serious profession to pursue. Their attitude toward design was to make it socially useful, universal, and scientific.

Perhaps the most well known of the Swiss Designers was Josef Müller-Brockmann who was a designer, teacher, and writer. He was also founder and co-editor of “Neue Grafik” which probably goes a long way toward why he’s most well known. Brockmann sought an absolute and universal language of graphic expression through objective presentation.

Müller-Brockmann is one or the more well known names, but he’s hardly the only one. You can read more about a few of the influential designers of the Swiss Style on the other side of the links below.

The primary influential works of Swiss Designers were typically posters, which were seen at the time as the most effective means of communication.

Critics of the movement considered the style cold and impersonal and thought the focus on objective principles led to formulaic solutions that generally looked the same. Advocates suggested the pure legibility of the style led to a timeless perfection of form that delivered an understated message without the exaggerated claims typical of advertising.

der-film.jpg
Josef Müller-Brockmann: Poster for a Theater Production (1960)

Principles of Swiss Design

Communication through objective simplicity was a guiding principle of Swiss Design. The goal was clarity, order, and a universally understood visual language. Swiss designs were clean and free from ornamentation. They attempted to remove all that was unnecessary and emphasize only the necessary. It’s a style of design that favors minimalism.

The International style sought an extreme abstraction based on simple geometric shapes. A bit of irony is that the shapes could at times become so abstract as to lose meaning and ultimately be little more than ornamental.

The goal for visual order and organization naturally calls for a heavy use of typographic grids, which offer a systemized way to present a clear message. Another reason why Josef Müller-Brockmann is front and center when talking about Swiss design is his work with grids.

The type preference of Swiss style was sans-serif, flush left with a ragged right edge. The most preferred typeface was Akzidenz Grotesk which they saw as functional without being stylized as well as carrying no political baggage. As you might be aware Akzidenz Grotesk served as a model for Neue Haas Grotesk, later renamed Helvetica.

Swiss designers varied the size of type to generate a greater visual impact and also to hint at the hierarchy of information. They used a scale of size in their type to control flow through their design and create rhythm within it.

Layouts tended to be asymmetrically organized on a mathematically constructed grid. The asymmetry gives greater emphasis to whitespace as does the general minimal aesthetic. Swiss designers were after an asymmetrical balance between the positive and negative elements in a design.

While asymmetrically organized, the underlying grid would help create a visual unity throughout. Unity was also maintained through a heavy use of repetition in color and shapes and further emphasized through transformation of the shapes.

Even though the emphasis was on abstract geometric shapes, photography played a large role in Swiss designs. Objective photography was seen as an excellent way to communicate.

automibil-club.jpg
Josef Müller-Brockmann: Poster for the Auto Club in Switzerland (1955)

Swiss Design and the Trend Toward Flat Design

Reading the above it should be easy to see the influence on the current design trends. The removal of ornamentation and a return to fundamental design principles is a guiding force behind the move from skeuomorphism to flat design.

As I’ve said a number of times these last few posts, I wish some could get past the literal interpretation of flat design. Swiss design wasn’t entirely flat. The poster above clearly shows perspective. Depth is a fundamental principle of design. It’s ornamentation that was removed, not depth, though often removing the former leads to the latter being used in less obvious and realistic ways.

It’s also interesting to note that Swiss design was sometimes criticized as being formulaic and boring given the same things are also said about designs today that remove ornamentation to focus on working out issues with responsiveness, layout, and performance.

Examples and Resources

I’ve presented a few examples of the work of Josef Müller-Brockmann in this post as well as an image from Neue Grafik, the magazine he founded (below). If you go to your favorite image search engine and type swiss or international style of design it’s easy to find more examples, including recent work in the Swiss style.

Below are some additional sites and pages with examples and information about Swiss or International Style. After seeing a few images it should be relatively easy to get a feel for the style if your unfamiliar with it.

You might also want to head back to an image search engine and type flat design to note the similarities between the two. They clearly aren’t the exact same style, but it’s easy to see how flat design is influenced by Swiss design.

neue-grafik-1958.jpg
An issue of Neue Grafik, published by Josef Müller-Brockmann

Summary

As something of a recap let me pull out some of the words I’ve used throughout this post to describe the principles behind the International Style of Design.

  • simplicity, minimalism
  • order, clarity, grids
  • geometric, abstraction
  • typography, legibility
  • rational, objective
  • universal, unity

Much of what we consider the fundamental principles of design arose from Swiss design and the movements that influenced it. While aesthetic styles have certainly come and gone, the guiding principles of Swiss design have never left us and have served as the foundation for graphic design ever since.

Next week I want to continue with a look toward the future. As I mentioned last week, flat design is a new foundation, but what are we going to add on top of the foundation? I want to think about how the web differs from print and what those differences suggest for what we’ll build on the new foundation of flat design.

The post Swiss (International) Style Of Design: The Guiding Principles That Influence Flat Design appeared first on Vanseo Design.

Friday, 19 July 2013

Learning To Solve Design Problems When They Have No Absolute Solution - Vanseo Design

Learning To Solve Design Problems When They Have No Absolute Solution - Vanseo Design

Learning To Solve Design Problems When They Have No Absolute Solution

Posted: 18 Jul 2013 05:30 AM PDT

When I first started learning about design I had a lot of questions. While I didn’t know the answers, I did hold expectations about what they would be like. For example, if I didn’t know how many columns a grid should have, I assumed my confusion arose from not knowing the right grid formula to apply. I was looking for the exact solution where no exact solution existed.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

Last night I was replying to an email with several design related questions and I realized the person asking held those same expectations. It helped me realize that many people who ask questions about design seem to be seeking that same absolutely right answer that I used to look for.

Design doesn’t work like that. Unlike 2 + 2 = 4, design problems don’t have such an absolute right answer. In design 2 + 2 might equal 4. It might also equal 3 or 5 or 17. In fact part of what we have to do in forming a design solution is deciding which of these many answers is the best one to apply.

The Science of Design

When I began my design education I approached it entirely as science. If given a certain set of conditions I expected there to be a single right path to a solution. I thought the way to increase my understanding of design was to know more of its rules. If I knew the rules, I could apply them to a problem and they would inevitably lead me to the right answer.

For example if a design problem called for an aesthetic that was elegant and sophisticated, all I’d have to do is find the rule for choosing an elegant and sophisticated typeface along with a color scheme and layout that were also both elegant and sophisticated.

In some respects that is what you do. You look for a typeface, color scheme, and layout that communicates elegance and sophistication. However, there isn’t a single typeface, color scheme, or layout that will work. There are a variety of each that communicate elegance and sophistication in nuanced ways, particularly when used in combination with each other.

My approach to learning at that time came more from a math and engineering background. If the problem in front of you is to add 2 and 2, you would consult the rules for adding numbers, which would lead you to the single answer of 4. The problem 2 + 2 always results in the answer 4 and no other answer is correct. Where design was concerned I was looking for similar formulas. I wanted to know what typeface = elegant + sophisticated.

You need to see past the context of a single right answer in order to become a better designer. There’s more art involved in design. How you recognize and determine the problem is often something of an art. If you see the problem as having a single correct solution that you must find, you’re approaching design in a way that won’t lead you down the best path.

The Art of Design

It’s taken me considerable time to realize that design doesn’t come with that absolutely correct answer to the problem that rules will automatically guide us to. Every design problem comes with a set of conditions and constraints and can have many solutions that are workable. While it includes aspects of both science and art, design leans more toward the art.

Much of our work involves defining the problem in order to whittle away the many possible solutions down to a manageable few. We make choices and add constraints to further reduce the possibilities and lead us down a path to a solution. We follow design principles to help us make these decisions.

We won’t know for certain if the path we walk down will end at the best or even a workable solution, but we continue to make decisions based on the knowledge we’ve gained and the experience we’ve acquired and have faith they’ll eventually lead us where we want to go.

Ideally the large decisions we make early on will lead us down a successful path that will help make the smaller decisions along the way easier and more obvious. However, ultimately we have to travel a path to a solution without being able to tell if we’ve chosen a best path until we’ve walked the whole thing.

Hopefully we can recognize if we’ve chosen a good path well before the end, but often we can’t. Sometimes we have to hold faith we’ve chosen well, while accepting when we find out it may mean starting over down a new path.

We also have to accept that even when we’ve walked down a path to a workable solution, it might not be the best solution. Another path we can’t see might also have worked better. The only way to know is to walk down that other path or see the results of another designer’s walk down it. We might at times get a clear vision of that other path, but only by walking down it can we know.

The lack of a clear and single solution means there’s more creativity to what we do and also more unknown along the way. We want to find the best solution when there is no single best solution and we can’t really explore every possibility. It can be maddening when you think about it.

Closing Thoughts

Learning to design better is like learning to communicate better in any language. The words and grammar of a language can’t ever tell you what’s the right thing to say. They can only offer guidelines for how to say it in the moment.

If you’re like me and approach learning design as an effort to find the right choice, you need to rethink your approach. Design isn’t about learning the single and inevitable correct solution. It’s about learning the different tools you have to communicate and how you might use those tools in the moment.

Learning design is learning about communication tools and guidelines for how to work with them. The more possibilities we see the more options we have for finding a solution in the moment. Ironically the better we get at design the more difficult we make it to design, because we’ve given ourselves so many more options to choose from when we need to choose.

However, as we learn our tools and add to our toolbox we get better at knowing which tool to choose under a given set of conditions and constraints. Ultimately every design problem needs to be solved by making a series of decisions through knowledge of what’s come before, our own experience, trial and error, and some faith in yourself that you’ll choose well or recognize quickly when you haven’t.

The post Learning To Solve Design Problems When They Have No Absolute Solution appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 16 July 2013

Flat Design As A New Foundation For The Web - Vanseo Design

Flat Design As A New Foundation For The Web - Vanseo Design

Flat Design As A New Foundation For The Web

Posted: 15 Jul 2013 05:30 AM PDT

The last couple of weeks I’ve been looking at the industry’s move from skeuomorphic detail to a flatter design aesthetic. I started by considering the useful, albeit temporary, metaphors skeuomorphism brings along with the inevitable reaction against it.

Next I looked at the current reaction that is flat design, mostly to think through why I haven’t always cared for it, despite it taking influence from the same things that influence me.

At the end of last’s week’s post I mentioned that when you get past the name, there really is a lot to like about the new flatter design aesthetic and I think in many respects it signals some positive things about and for our industry.

flat cartoon like drawing showing foundation of house and skyscraper
The shallow foundation of a house seen next to the deep foundation of a skyscraper

A Return to Fundamentals

I think I’m fairly typical of many web designers in the sense that I have no formal training in graphic design. Like many, I learned html and css while acquiring a smattering of skills in a variety of other technologies. Next thing I knew I was charging people to design and develop websites.

My lack of skills in the fundamentals of graphic design meant I turned to tricks and trendy techniques to hide what I couldn’t yet do. I learned how to add a gradient here, a drop shadow there, and a reflection in just the right place. Ornamentation can sometimes be used to cover up poor design. These tricks served no useful purpose though, other than to impress enough people to hire me.

A flat design works when fundamentals are done well and it doesn’t work when they aren’t.

Fortunately I was aware I was doing this and from the outset began a course of study for myself on the fundamentals of visual communication. I no longer need those tricks and I guess when I think about it, I’ve been designing flatter for the last couple of years. Not entirely flat, but flatter.

Now the industry as a whole is going to have to do the same, as the new flatter aesthetic strips away all the ornamentation that’s been in use the last few years. It’s removing many of the cover up tricks, which is a good thing. Remove the ornamentation and you’re left with the basics. You’re left having to work with design fundamentals like:

The move to flat design is going to force those designers who want to do well to learn these fundamentals, because that’s all there is after the ornamentation is gone. A flat design works when the fundamentals are done well and it doesn’t work when they aren’t.

Once again ornamentation can be used to cover up a poor design and for years many in the industry have relied on it to hide what’s been a shaky foundation. Flat design is stripping away the everything that was covering the foundation , which will force us to rebuild on solid fundamentals.

Why Now?

Flat design is only one reason for this change. A number of things beyond giving up skeuomorphism are leading us back to the foundation and the fundamentals.

  • A reaction to skeuomorphism
  • An ability to use more typefaces
  • A return to grids
  • Responsive and mobile design

It’s only the last couple of years where we’ve been able to realistically expand our type palettes. As type foundries have worked out how to deliver fonts online we’ve been given more options. More type choices in the toolbox means more ability to design with type.

Similarly, grids are only recently on the radar of web designers. It’s only been a few years since those who worked with them in print carried them over to the web and began teaching the rest of us.

Responsive design also takes us back to basics. There are still issues to sort out in how we handle images and media responsively and many are still simply trying to wrap their heads around this new approach to design. The things we can do well responsively revolve around the fundamentals.

The greater emphasis on mobile devices has us paying more attention to performance as well so less bitmapped images in favor of scaler vector graphics and icon fonts.

All of these things are coming together at a similar time, enabling us to design with less, but better at the very moment we want to do both.

A Solid Present for a Solid Future

If you look back over the short history of design on the web it’s gone through a variety of changes. It’s pushed against the technology. It’s looked to the past for advice and inspiration. It’s jumped around quite a bit, especially as the barrier for entry into the profession is minimal. Perhaps because of the low barrier, what’s mostly been missing is a strong foundation in design fundamentals.

That’s where we are now. A number of changes are forcing us to look at our foundation and improve it. Flat design strips away the ornament and everything else on top of the foundation. More type choices and a greater awareness of grids removes the need for stylistic tricks. Responsive design is emphasizing minimalism and performance over aesthetic ornament.

In time we’ll build on the foundation again. We’ll push the envelope more and explore the medium. However, we’ll do so with greater support at the base and this greater support will allow us to reach and push further than we could on the shaky foundation we’ve had.

Some will never realize any of the above. They’ll focus only on the flat in flat design. They’ll continue to copy the popular as they always have. Fortunately enough designers will get what’s going on and see beyond the flat surface down to the foundation below. They’ll understand the emphasis will be squarely placed on design fundamentals before the envelope can be pushed again.

If you haven’t yet taken the time to understand the basic elements of design, now would be a good time.

The post Flat Design As A New Foundation For The Web appeared first on Vanseo Design.

Friday, 12 July 2013

Why A Sense Of Purpose Motivates Better Work - Vanseo Design

Why A Sense Of Purpose Motivates Better Work - Vanseo Design

Why A Sense Of Purpose Motivates Better Work

Posted: 11 Jul 2013 05:30 AM PDT

Which contributes more to a fulfilled work life, money or a sense of purpose in what you do? Which motivates you to do better? While money is certainly important, feeling some kind of purpose in your work generally leads to a happier working environment and often a more profitable one as well.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

A couple of articles I recently came across reminded me of this. Both mention the greater success that follows from working with a sense of purpose.

The first suggests that when employees feel like they’re working for something greater than profit, the company tends to make more money. The second offers advice to a young entrepreneur and it mentions that a strong sense of purpose leads to being more fulfilled in your work.

I’ve always agreed that a strong sense of purpose is important to success and happiness. The topic also reminded me again of Maslow’s Hierarchy of Needs, which you may be familiar with.

Abraham Maslow's Hierarchy of Needs

Maslow’s Hierarchy of Needs

You’ve probably come across Maslow’s hierarchy of needs before. If not, the gist is that while looking to understand what motivates people, Abraham Maslow theorized that people move through five basic layers of motivation that map to psychological growth.

Maslow’s hierarchy is often shown in pyramid form, as in the image above, and the five basic levels beginning at the bottom of the pyramid are:

  • physiological
  • safety/security
  • love/belonging/social
  • esteem (cognitive and aesthetic)
  • self-actualization

Before you can be motivated by a need higher up the pyramid you first need to have the needs below it fulfilled. In other words once someone’s physiological needs are met, they move up the pyramid and are motivated by safety needs. Once those needs are met, the motivations are more social and so on.

The lower levels of the pyramid are clearly important, but those at the top are better motivators once we reach them. You might even think of the lowest level as the minimum viable need.

If you’re working at one level of the pyramid and the needs of one of the lower levels is no longer being met, the lower level gains importance and your motivation drops back to that level.

There’s been valid criticism of Maslow over the years. For instance there are many examples of people being motivated by one level in the hierarchy even as needs from lower levels haven’t been met. Still the general idea of the hierarchy seems to hold true enough and at the very least it’s interesting to talk about.

Money as Motivator

Money falls into the lower part of the pyramid. It fits best into the safety/security level. We’ve all done things we didn’t want to do for money. I’m not talking about bank robbing sort of things, but I’m sure at one point or another you worked all day at a job you didn’t like or you’ve taken on projects for clients when you had a strong feeling the project would be a nightmare. I know I’ve done both.

We all have bills to pay and banks and utility companies aren’t likely to let you slide if you tell them that you would have paid, but you didn’t feel comfortable taking on a specific client. Like it or not we sometimes do work we’d prefer not to do, because we have responsibilities and bills to pay. Welcome to the world.

The question I’d ask is how motivated were you when working on those projects? Did you do your best work? If you’re like me, you did what you had to do to get through the project, but most of the time your main thought was to get it over with so you could move on to something you liked better.

Money is usually not the greatest motivator for doing your best work. It’s often enough to get us to do the minimum (or hopefully something more than the minimum) that needs to get done, but it doesn’t inspire us to do our best work.

A Sense of Purpose

Where money sits lower in Maslow’s hierarchy, a sense of purpose sits at the very top as part of self actualization. It has a greater ability to motivate us to do our best, especially when our needs at the lower levels are already being met.

Once security needs at the lower level are met there’s a good chance you’ll turn down some of those jobs you didn’t like doing. Most freelancers have said at one point or another that they look forward to the day when they can be more selective about which projects they take on. It’s Maslow in action. It’s turning down those projects that don’t motivate us for those that do and the latter come about more from things higher up in the pyramid.

Fulfilling needs at the top of the pyramid is harder. A sense of purpose is not easy to find and it’s more difficult to complete. However, the reward for success is much greater and the journey itself more enjoyable and both increase the likelihood of you doing better work.

Some people (and I include myself here) reach for the top of the pyramid even when our needs lower on the pyramid aren’t entirely met. I think many creative people fall into this group. We see what the top of the hierarchy has to offer and understand its larger significance and we’re impatient to get there.

It’s why I’ve sometimes talked about design beyond the nuts and bolts and asked if it’s noble or if the industry has a common conceptual core. I think if more of us reach for the top of Maslow’s pyramid, we’ll ultimately produce better work because it gives us more motivation to do better. I have a hunch doing better work at the top will also lead to needs at the bottom being fulfilled.

I think everyone who’s ever felt a sense of purpose or at least a desire to have one will find it difficult to again feel the same motivation toward lower level needs. It’s difficult to move back down the pyramid, even if it’s sometimes necessary.

Summary

For me it’s never been all about the money. Financial security is certainly important to me, but it doesn’t rank as the #1 motivator for why I do the things that I do. I can easily list a few other things that are of higher priority to me.

At the same time whenever my financial needs aren’t met, money quickly moves higher up on my list of priorities until some financial security is back in place. Regardless of the criticism it receives, Maslow’s hierarchy seem to generally describe what motivates me.

I think most people are similar. Some always seem focused on the money alone, but nearly all of us when feeling a sense of purpose find it’s a much stronger motivator and I think that helps us achieve better work. My guess is you’ve experienced this at some point and I hope this post can be a reminder to reach for something more.

The post Why A Sense Of Purpose Motivates Better Work appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 9 July 2013

Flat Design Done Wrong - Vanseo Design

Flat Design Done Wrong - Vanseo Design

Flat Design Done Wrong

Posted: 08 Jul 2013 05:30 AM PDT

Flat design is something I should like. It takes its influence from many of the same sources that influence my design philosophy. It’s a move toward minimalism with an emphasis on design fundamentals which I endorse and talk about often.

Yet so many of the flat designs I’ve seen have left me less than inspired, which seems something of a disconnect. It’s taken me some time to understand why and in gaining that understanding I’ve picked up some ideas of what this flatter aesthetic is really about or should be about.

I’d like to spend the next couple of posts talking about flat design. Today I’ll focus more on where it goes wrong and next week share more about how much it gets right once you get past the name.

Windows 8 Metro

Flat Design: The Reaction Against Skeuomorphism

Last week I said that skeuomorphism used metaphors to help people familiar working in one medium understand how to work in a new one. At the end of the post I mentioned that we’re familiar enough with the new digital medium that we no longer need these metaphors.

I also suggested that as designers one upped each other on the realism, it had grown tacky. What had been meaningful aesthetic became false ornamentation.

It shouldn’t be surprising that designers reacted and it shouldn’t be surprising that the reaction has been close to 180 degrees in the opposite direction stripping away all signs of skeuomorphic detail.

This flatness gave the new aesthetic its name, though it was hardly the only change or even the most meaningful one.

Swiss design wasn’t slavishly flat and neither should be the new aesthetic

While they didn’t start the trend, Microsoft certainly brought it to the forefront with Windows 8 Metro (or whatever it’s now being called). Whether or not they were specifically trying to move away from skeuomorphism or just trying to be different than Apple doesn’t really matter. Lots of people saw a new flatter aesthetic and it made skeuomorphic realism seem out of place and a thing of the past.

Suddenly everyone was copying what they thought this new aesthetic was supposed to be and talking about it based more on the name than the underlying reasons for the change.

Flat Design Sometimes Leaves Me Flat

When flat designs started appearing I had mixed reactions. Sometimes I liked what I saw, but many times I didn’t care for the flat designs I encountered. Other than the handful of cases of truly poor design, I didn’t understand why some of this flatter aesthetic didn’t resonate with me when it seems to agree with much of my own philosophy about design. I’m finally beginning to understand.

For one it’s an awful name based on a surface detail of what’s going on. And because it’s been given a name it’s ripe to become a fad. The name implies the new aesthetic is based solely on it being flat and I don’t think this literal interpretation is the reason for this new aesthetic.

You might have noticed so far in this post I’ve sometimes referred to flat design and sometimes to a flatter design aesthetic. I think the latter is more in line with the goal and the former is the fad created by lazy designers who just want to push the latest popular thing.

To understand my sometimes disdain I spent a little time looking at designs considered flat that I found in the usual example sites featuring the latest trendy. I noticed a few things about the designs I didn’t care for

  • They were entirely flat as if nothing else mattered
  • There were few if any curves and had mostly boxy designs
  • There was lack of a cohesive color scheme
  • There was minimal consideration given to typography
  • The organization of elements seemed an afterthought
  • The layout itself seemed an afterthought

In other words the flat designs I didn’t care for paid little attention to design fundamentals. The thing is when you strip away the skeuomorphic ornamentation and realism, what you’re left with is the fundamentals. Unfortunately too many flat designs focused solely on the flat and skipped the part about fundamental design principles.

This isn’t true of every design considered flat. Many sites do get these things right and consequently make a favorable impression on me, but there are enough that adhere only to the flatness to lead to my negative feelings.

The flatter aesthetic is, or should be, based on rational design decisions. It’s not meant to be based solely on flatness. Flatter is not flat. The latter copies and perpetuates a surface style while ignoring the underlying problem being solved.

Granted this is just my opinion, but I think too many flat designs have trouble seeing past the name and take flat literally as if the slightest depth cue must be avoided at all costs. The thing is sometimes depth and texture can be the right solution to the problem, for example to make clear that some elements are clickable.

Dimension, depth, and detail are not bad things. What’s bad is relying on them too much and to the point where they’re used purely for ornamentation. We don’t need to eliminate them. We need to minimize them and more carefully consider when to use them.

The Web isn’t Print

It’s funny how we sometimes understand that the web is different from print and sometimes we don’t. Just as we’re realizing that the web doesn’t come with the fixed dimension of print, we’re forgetting that it can offer more than a flat piece of paper.

The web has depth. Treating it as though it’s a single flat dimension is just as dishonest as making digital objects look like real world physical ones.

We can place elements behind each other and not just pretend they’re behind each other. There’s a z-index running through our screens. Depth is not a bad thing. It was overused, but that wasn’t the essential problem with skeuomorphism. Pull back on the depth, but don’t slavishly avoid it at all costs.

Interesting to note is that Swiss design, which is the major influence of flat design, wasn’t always flat. It was flatter, but there are plenty of examples from the Swiss or International Style of design that contain shadow, occlusion, and transparency. Swiss Design wasn’t slavishly flat and neither should be the new aesthetic.

Closing Thoughts

Given the above you might think I’m still feeling very negative toward flat design. Outside of the name and designs that take it too literally that isn’t so. There’s actually a lot to like that I wasn’t originally seeing. Whether it’s because I happened on the wrong examples at first or because I was reacting to what I consider an awful name I’m not sure. Probably a little of both.

When you take away the name or when designers can get past taking the name literally, there’s a lot to like about flat design or rather this new flatter aesthetic.

Next week I’d like to talk about what there is to like. I want to focus on the good, the almost flat as opposed to the entirely flat. There is a lot to like and I think the move to this new aesthetic signals a deeper shift in where design on the web is heading and I happen to like where I think it’s going.

The post Flat Design Done Wrong appeared first on Vanseo Design.

Thursday, 4 July 2013

Why You Shouldn’t Evaluate Your Design Skills Through Comparison With Others - Vanseo Design

Why You Shouldn’t Evaluate Your Design Skills Through Comparison With Others - Vanseo Design

Why You Shouldn’t Evaluate Your Design Skills Through Comparison With Others

Posted: 03 Jul 2013 05:30 AM PDT

It’s natural to compare your skills and abilities to others who do the same kind of work as you. How helpful is it, though? Do you feel like a better designer after the comparison? Did the comparison help you learn something?


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

A few weeks ago I was listening to an episode of The Gently Mad podcast (another good design focused podcast by the way). Adam’s guest was Jason Santa Maria and Adam commented how sometimes you see people who are really good and it makes you feel inadequate because you think you aren’t as good as they are.

He mentioned Jason as being one of those really talented people and I can empathize since I greatly admire Jason’s work myself. It’s pretty easy to feel inadequate after seeing some of the work he’s done.

While I think good can come from observing another’s work in relation to your own, it’s generally not a good way to evaluate your design skills. The only fair comparison is a comparison with yourself.

Comparing Yourself to Others isn’t Fair to You

When you try to compare yourself to others to gauge your abilities you almost always set yourself up for failure.

Odds are you’ll choose someone you admire and think does good work. You’re choosing to compare yourself to someone who you likely think better than you to begin with. How can you possibly come out on the good side of that comparison?

Every designer has strengths and weaknesses. You’re more likely to see the strengths of the designers you admire and you’re more likely to see the weaknesses in yourself. Not only are you trying to compare yourself to someone you think better than you, but you’re trying to compare the best of that person with the worst of yourself. Again how can you possibly come out on the good side of that comparison when you’re not looking looking at the work and skills of both of you objectively.

On the off chance you’re choosing to compare you work to someone who you don’t think is particularly talented, you’ll maybe feel good about your ability for a little while. Then you’ll remember that you just decided you’re better than someone who you don’t think has talent. It’s not really a confidence booster and if anything you might feel angry wondering why that other person is attracting business when you’re struggling.

Compare to Others to Learn From Them

It’s ultimately a losing game to assess your skills based on the work of others. Where you can look to others for comparisons is to learn from them. You need to be as objective as possible and drop any notion about comparing abilities.

Look at their work with a critical eye. Think about what they do well to make you like their work. Study it. Learn from them. Don’t be satisfied to know what you like in the work, ask your why you like it. What can you take away from it and make your own? Use your observations to motivate and direct your improvement.

Also look at what the designers you admire don’t do well. Trust me as good as they are, they aren’t perfect. They’d be the first to tell you that. See where their designs might not work and think how you might improve them. This will help you understand how to make your own work better.

It will also make you feel a little better about yourself knowing that like you, your design idols aren’t perfect. And you just figured out to make their work better, so you must be pretty good yourself. Now that’s a confidence boost.

Compare Yourself to Yourself to Evaluate Your Skills

If you want to see how your abilities hold up the only person you should compare yourself to is yourself. You compare yourself to yourself over time.

Are you better today than you were yesterday? Six months ago? Two years ago? Do you make better design decisions? As long as you’ve put time in working to get better you will be better today than you were in the past and you will be better tomorrow than you are today. It’s the only reasonable comparison you can make to judge where you are as a designer.

You probably aren’t going to notice improvements from day to day. You need some distance to notice changes. Allow a reasonable amount of time to pass when comparing your work now to your work before. I find six months is usually enough distance, but it’s really up to you.

Don’t let too much time pass either. A year is probably as long as you want to let pass. Unlike comparing yourself to others, comparing yourself to yourself in the past is beneficial to see how you’re progressing and to help identify what you do well and where you need to focus to get better.

Take stock of your skills and where you currently are as a designer. Be as objective as you possibly can with both the good and bad. Your goal for tomorrow and the coming months is to improve those skills in some way.

It doesn’t matter if today or a year from now you aren’t as good as someone like Jason Santa Maria or whoever you admire. It only matters that you’re a better designer than you are now. If you can take some of your good and do it better or learn to minimize something of the bad, you’ve done well. Don’t try to be better than someone else. Be better tomorrow than you are right now.

Who knows. In time someone else might come across your work compare themselves to you and get that inadequate feeling you’ve learned to leave behind.

Summary

It’s natural to try to compare our abilities to designers and designs we admire, but it only sets us up for disappointment. We won’t ever choose fairly to make the comparison. It’s comparing your first play to Shakespeare and being depressed because yours isn’t as good.

If you can be objective and learn to train a critical eye on the aspects of someone else’s work, you can learn from them and improve your own work, but don’t compare in order to take away the subjective who’s better.

The only fair comparison you can make to assess your skills is a comparison with yourself. Don’t worry if you aren’t as good as someone else. Only worry about being better in the future than you were in the past. Train that critical eye on yourself and use it to objectively improve your own work. If you’re better next year than you are today, you win.

The post Why You Shouldn’t Evaluate Your Design Skills Through Comparison With Others appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Subscribe to: Posts (Atom)