According to Wikipedia: Augmented reality (AR) is a live, direct or indirect, view of a physical, real-world environment whose elements are augmented by computer-generated sensory input such as sound, video, graphics or GPS data. It is related to a more general concept called mediated reality, in which a view of reality is modified (possibly even diminished rather than augmented) by a computer. As a result, the technology functions by enhancing one’s current perception of reality. By contrast, virtual reality replaces the real world with a simulated one.

Augmentation is conventionally in real-time and in semantic context with environmental elements, such as sports scores on TV during a match. With the help of advanced AR technology (e.g. adding computer vision and object recognition) the information about the surrounding real world of the user becomes interactive and digitally manipulable. Artificial information about the environment and its objects can be overlaid on the real world. The term augmented reality is believed to have been coined in 1990 by Thomas Caudell, working at Boeing.

Research explores the application of computer-generated imagery in live-video streams as a way to enhance the perception of the real world. AR technology includes head-mounted displays and virtual retinal displays for visualization purposes, and construction of controlled environments containing sensors and actuators.

What are people doing with AR?

There are many examples you can or have seen. Here’s a recent one made by Disney and displayed in Times Square:

Of course, with Pixar tucked neatly into their back pockets, Disney’s AR piece is the top of technology. Appshaker, London did a really impressive AR piece for National Geographic:

There are some demos from smaller companies and individuals that show the capabilities of AR. Check out these cool applications:

Why just buy a product when you can see what it will look like out of the box?

Your face as your business card

Not all of the AR applications are fun and games. Recognition and information are also possible. This video was posted to YouTube two years ago:

In fact, stalking will be a breeze with facial recognition software on smart phones:

When I first ran across Augmented Reality almost nine years ago, it was phone-sized tablets that identified places and directions. This phone app is an example:

The future of business cards

While the QR Code may take you to YouTube or a web site, imagine what it can do for your business card! It’s a bit like Emperor Palpatine popping up to give order 66 (ask a local Star Wars nerd what that means) but why make people read something about you when you can tell them yourself:

Try one for yourself HERE.

While most AR recognition needs a code, very much like the QR Code or, apparently despised Snaptag, this experiment by innovative campaign from Crispin Porter + Bogusky uses a simple dollar bill for a Burger King AR piece:

There are numerous tutorials on how to create AR pieces. Check them out.

Are you ready to jump into Augmented Reality?

So, I’m guessing by now you are saying to yourself, “I’ve got to get into this!” and my family and I are safe from comments on different inappropriate things we can do…unlike my exploration of Snaptags.

AR is not just about learning some new software. There is obviously video, writing, graphic design, and type skills needed but any creative should be able to handle it. I’ve yet to see anyone at any networking event or cross paths with anyone who has an AR business card to date. That seems odd, considering the explosion of the technology. Perhaps the technology hasn’t quite exploded as of yet, so why not be the first kid on the block to have one?

Suggested reading on Augmented Reality

http://www.physorg.com/news/2011-08-sony-augmented-reality-tv-buyers.html

http://mashable.com/2009/12/05/augmented-reality-iphone/

http://technabob.com/blog/2008/12/17/mini-augmented-reality-ads-hit-newstands/

http://boingboing.net/2011/11/21/layar-augmented-reality-for-ma.html

*There are many sources for AR software but I cannot suggest or recommend any in this forum. All of the examples used in this article were solely for the purpose of inspiration and information on AR technology and is not an advertisement for or an endorsement of any of the firms that created the videos included.

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Do you use Augmented Reality for your work? Give us a link to your video or post your AR code for people to print out and try.

Never Ending WordPress Business Bundle – only $14!

You just can’t seem to create anything with enough power or spunk—heck, you may just be staring at your screen or sketchbook for hours straight.

It’s truly no fun at all to feel stuck and helpless, especially when your work seems to keep piling up. You feel like you’re stuck in a box, trying to figure a way out. You may try to do something, like step away for a few then come back, but what if that doesn’t work?

Relax and try not to stress. Take a look at these five simple ways you can help yourself remove the block and create some really amazing work before your deadline passes.

1. Listen to music

If you’re anything like me, music helps your creative process and is absolutely essential. Now, I’m part musician, so I understand and break down music a bit differently than those who are not. However, as a creative, music relays to me different emotions and also different colors and shapes and stuff. If I hear a good song, I can create a whole picture or scene based off the one song. If you have ever listened to a song and thought about an ideal music video for it, then you can relate to what I’m saying. Good music creates good images for you.

When you are at a blockage, new music can really open up the images you see and create. Sometimes we get used to stuff and we need new things to broaden our horizons. We all have our favorites and our classics, but listening to the same music can get boring and pretty much render the same images we see in our heads.

As a musician, I like to listen to things outside of my normal genres because certain ones can get a bit repetitive. If you know you dislike other genre’s, try listening to newer music inside your favorite genre or find old music by your favorite artists. Once you find something, listen to it and let your imagination run wild. Hopefully you’ll have a sketchpad so you can jot down the things you see.

This is my personal go-to when I feel a block even coming on. If you want a place to start discovering new music, I recommend Spotify and 22Tracks.

2. Inspiration is NOT a rubric

Creatives can draw artistic inspiration from almost anywhere, but we typically end up perusing the Internet for inspiration when we get stuck. We like to hop online and see what everyone else is doing. Now don’t get me wrong, this isn’t a bad idea—I mean, how else are we supposed to keep up with what’s modern? The issue is just that after awhile, pretty much everything starts to look and feel the same. If you desire to be a true innovator, you’ve got to see and do things differently.

Perusing through pages of work that is already created is typically helpful, but it seems some designers look at a creative solution and try to attach it on to their own project. For example, if you see a project that uses colored squares and bold text to get the point across, that shouldn’t mean you should do exactly the same. It should, however, signal to you that there is a creative solution in using colored shapes and playing with type weights.

You want to look at inspiration not as a way to design and decorate things, but to understand it as a solution to a problem. This is why I tell folks to frequent inspiration sites that allow you to get a bit of background on the subject. The finished product is nice, but the inspiration is not the design; it’s the solution and the way in which the solution was achieved.

3. Go outside

The answers to your creative block are everywhere, but the greatest place to find solid inspiration is the great outdoors. Mother Nature has put together probably some of the best color schemes and shapes and so much more. Think about what you’re looking for and how it interacts with other elements. The freeness, and depending on your location, the serenity of being outside is just so helpful to the creative process. And Mother Nature doesn’t mind if we borrow a couple of ideas from her.

So, what if you don’t live in a place packed with insects and shrubbery? Man made things are just as interesting. As a matter of fact, I find a lot of people gain inspiration from architecture. Buildings are powerful and are often so consistently themed—they also give you great insight into interaction between different textures as well as interactions between different shapes. Incorporating some of the things you see in the city into your projects can end up being extremely beneficial.

And if you don’t get along with insects or taxi cabs, check out a museum.

4. Forget about it

If your deadline is 24 hours away, then this may not be the best idea, but pushing your project to the back of your mind can really help you come up with some of your greatest ideas. When we think about something too hard we tend to live life around it; we talk about it, we ask questions about it, etc. When you do this, you are forcing something to come out of you that may not be there–this can stress you out and ultimately be unhealthy.

When you’re in a place or situation where you have to deal with the topic, it doesn’t always help. Some of our best ideas are organic and come up through the most casual conversations and actions. I went to school to learn about advertising, and one of my professors would always tell us not to talk about our projects with our partners when conceptualizing. The idea was just to have an organic meeting, click with the individuals and the space and get something out of that.

It sounds absolutely farfetched but some of my greatest ideas came out of just casually talking with someone. Think about it; we react well to things we can relate to, especially when talking about ad campaigns or something that an audience will see. When we force ideas out, they tend to come out just that way–feeling forced and unrelatable. Find a partner, grab a cup of coffee and just talk to someone about something totally unrelated and see what you come up with.

5. The bare minimums

This is a really simple idea that I like to use whether I’m stuck or not because it really helps me create my own style. Whatever your design program of choice, just use the stock plug ins.

We love to look for Photoshop brushes and extra filters, etc., but I think being creative really comes from within and what you are able to create. When we get into the excess things, we start to really rely on them and they become center pieces for our designs. There are some essentials for sure, but using the bare minimums in your design program can really get you to thinking about different techniques and building ideas around them.

Eventually you can create your own textures and vectors and so forth, but having all the excess removed gets you into experimenting with different tools and filters. Perhaps you can find something you like and enjoy and roll with it.

Relaxation is Key

When your projects deadline is coming at you full speed and you have nothing, it’s so easy to tense up and stress out. If you’re feeling designer’s block coming or you feel the stress about to flood in, the answer is simple: just relax.

Designer’s block is totally natural and often bound to happen. Relax, get loose and pick up your sketch book. Figure out something that works for you to get your creative juices flowing and begin to execute.

Kendra Gaines is a freelance designer from Virginia, USA. Connect with her.

How do you like to get over your creative block?

Never Ending WordPress Business Bundle – only $14!

A designer at heart, design was at the core of Steve’s life and that translated to revolutionary and yes we can also say ‘magical’ products. But he says it better: “Design is not just what it looks like and feels like. Design is how it works.”

And we can only imagine how many lives have been influenced by his vision and how deep he reached into all the corners of the world…

In this post, we’ve collected some rare photos of Steve as well as some famous quotes that depict his visions and personality.

Comments are open for you to share how he impacted your career as a designer and as a person, we sure know that he has deeply influenced us! What did you learn from him and how has his legacy impacted you? Where will YOU take his legacy next? Please share your candid thoughts below…

“Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.”

“In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains and the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.”

“Innovation has nothing to do with how many R&D dollars you have. When Apple came up with the Mac, IBM was spending at least 100 times more on R&D. It’s not about money. It’s about the people you have, how you’re led, and how much you get it.”

“We’ve gone through the operating system and looked at everything and asked how can we simplify this and make it more powerful at the same time.”

“It comes from saying no to 1,000 things to make sure we don’t get on the wrong track or try to do too much.”

“It’s better to be a pirate than to join the Navy.”

“Being the richest man in the cemetery doesn’t matter to me … Going to bed at night saying we’ve done something wonderful… that’s what matters to me.”

“Be a yardstick of quality. Some people aren’t used to an environment where excellence is expected.”

“It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them.”

“The only problem with Microsoft is they just have no taste. They have absolutely no taste. And I don’t mean that in a small way, I mean that in a big way, in the sense that they don’t think of original ideas, and they don’t bring much culture into their products.”

“People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully.”

“My job is to not be easy on people. My job is to make them better.”

“Innovation distinguishes between a leader and a follower.”

“Look at the design of a lot of consumer products — they’re really complicated surfaces. We tried to make something much more holistic and simple. When you first start off trying to solve a problem, the first solutions you come up with are very complex, and most people stop there. But if you keep going, and live with the problem and peel more layers of the onion off, you can often times arrive at some very elegant and simple solutions. Most people just don’t put in the time or energy to get there. We believe that customers are smart, and want objects which are well thought through.”

And one more thing…

Never Ending WordPress Business Bundle – only $14!

More and more, as the scope and lucrativeness of the Internet increase, web designers are becoming highly sought after. As the design profession gains in demand, its practitioners are put in an interesting position.

The opportunities for growth appear to be limitless, so it is up to each designer to determine their own life path.

It is a very good place to be, although it might feel challenging and overwhelming.

As a web designer, you have to ask yourself, “Where do I want to take my life? What do I want to achieve?”

Why did you decide to become a web designer?

Being the richest man in the cemetery doesn’t matter to me… Going to bed at night saying we’ve done something wonderful… that’s what matters to me.

– Steve Jobs

To answer this question, look back at how you got into the design profession. Go back as far as you wish, into your childhood even, when you first put pen to paper and designed the layout of your bedroom.

What feelings, qualities or desires compelled you to become a web designer? Did you fall into the profession by accident? Did you plan for it immediately following high school? Do you plan to continue as a web designer in the future, or is this just a stepping stone to success in another field?

Whether you did it for the money, the creative opportunities, the work-from-home lifestyle, or your dream of designing bigger, better and more famous websites, you’ll find that different aspects of web design hold different futures. All of these futures are guaranteed to be lucrative, but some more so than others. If you bear in mind the spark that made you want to become a designer in the first place, you stand a better chance of being happy with your career path.

The following four tend to be the motivations for web designers continuing along the path:

• Creative outlet;
• Self-determined hours;
• Enjoy coding for visual or experiential design, a mix of left and right brain work;
• The sector is growing, with huge opportunities for profit and advancement.

Web designers might be attracted to the field for all of these reasons, but one or two motivations are generally the strongest for each individual.

To plan your career trajectory, brainstorm a list of things that get you excited about your job. On the other side of the paper or in another document, brainstorm a list of things that you wish you could change about your job.

After, write a short personal narrative about the time when you knew you would be a web designer. The narrative might span several moments of clarity, but in general, with a calling, there is a particular moment when we know exactly what to do with our lives. Again, you may just be designing as a foothold to a more creative pursuit, or you may not know where to go with the job.

Perhaps your dream lies entirely beyond the typical paths of employment. With hundreds of new job descriptions being written every year, you could very well invent your own career. But you have to figure out what you want before you can get there.

Where do you want to go as a web designer?

The difference between a job and a career is the difference between forty and sixty hours a week.

– Robert Frost

Now that we’ve covered the four main reasons why people go into the web design field, listed below are some pathways you might consider. Design is a broadening field, and the diverse skill sets involved can be exploited in a variety of ways and environments, depending on your temperament, character and dreams.

Creativity

Those attracted to the creative aspect of web design might consider trying to become the creative director of a firm or a web-related business. You might thrive on the autonomy, creative control and greater resources to satisfy your every whim. Creative individuals tend to do well when in charge of a focused area of work, but they might not make the best managers or businesspeople. If this sounds like you, consider working towards the role of creative director.

Creative types might want to strike out on their own and become artists, although that profession is notoriously difficult to break into. You might have to do your own creative work on the side before switching over permanently.

Flexibility

If you were most attracted to the profession because of its flexible hours, then congratulations! Chances are, you’re already living the dream. Many web designers are independent contractors who work with businesses and organizations to develop their presence on the Internet. Consider expanding your business by hiring other employees or starting your own firm. You can gradually retreat from the long hours as your business begins to function on its own, bringing in dollars for you.

Coding and design

If you like the coding aspect of the job, then you might be an excellent candidate for a firm or a group to develop groundbreaking web applications and functionality. Google and Facebook are two of the biggest names in web innovation, but plenty of start-ups are looking to break into the business.

Money

If you’ve joined the ranks of web designers simply because that’s where the money is, then there is no limit to what you might accomplish. You could go about it in any number of ways: join a firm, start your own business, become a director, or simply keep doing what you’re doing. Join the executive staff of a promising start-up, and cash in big on its IPO. Practically every new company needs a web professional, and if you have the skills, it could be you.

What can you ultimately achieve as a web designer?

What is the recipe for successful achievement? To my mind there are just four essential ingredients: Choose a career you love. Give it the best there is in you. Seize your opportunities. And be a member of the team.

– Benjamin F. Fairless

Of course, the question of where you want to go as a web designer ultimately takes a back seat to the legacy that you want to leave behind. It is never too early to plan your legacy, and as designers become more and more influential in the world of business, politics and charity, the question of how you want to be remembered is an important one.

Do you want to provide for your family and achieve the optimal work-life balance so that you can truly enjoy your life? Do you want to provide free services to needy individuals or to struggling businesses? Do you want to donate to charities, cultivate humanity or start a non-profit to do good works in the world? Do you want to create a design that lasts forever and inspires the world?

You could do many things for the world as a designer. Facebook founder and CEO Mark Zuckerberg recently made a huge donation to the New Jersey public school system, and Google’s founders have become noted philanthropists.

Blogger Arianna Huffington has written on how to maintain one’s health in a fast-paced digital environment, while others who are not as well known simply use their development work to provide for their family. All of these are “acceptable” legacies to leave behind. The only question is, what do you want to do with your future?

A few questions to take with you

Keep away from those who try to belittle your ambitions. Small people always do that, but the really great make you believe that you too can become great.

– Mark Twain

As you consider your options as a web designer, the questions below, in addition to the many posed above, should guide you in the right direction. Sometimes all it takes to get clarity and direction is a certain level of soul-searching and inner examination.

Use your answers to these questions to sketch out your ideal career as a web designer: where you are now, where you want to be later, and what you want to leave behind.

• Do you want to design for yourself or for other people?
• Do you want to work with others, hire others or be a lone wolf?
• What kinds of websites do you want to design?
• Do you prefer the code or the visual aspects of web design?
• Do you want your impact to be visible and permanent, or do you prefer working behind the scenes?
• Do you want to write about web design or actually do web design?
• Do new technologies excite you, or are you more of a “keep it simple, stupid” kind of guy or gal?

Conclusion

Being a web designer is hard work, and at many times during the process the slate in front of you will feel perpetually blank. Designers are keenly familiar with blank slates and endless possibilities.

So, take some of that brilliance that helps you transform nothing into something and use it to build your own life design. Like a website, a life needs to be an enjoyable, enriching, interesting experience. When you’re planning your future, you are designing a website inhabited by one person: you.

You know your challenges, desires and strengths better than anyone else, and this makes you uniquely qualified to chart your career path. The profession of web designer will become more and more prestigious as time goes on, so knowing where you’re going and how you plan to get there is imperative.

Success is in your future: you just have to make sure it’s the kind of success you desire.

Written exclusively for Webdesigner Depot by Aidan Huang, a freelance developer, designer and ingenious blogger. He is one of the editors-in-chief at Onextrapixel. Follow him on Twitter @AidanOXP

Do you think you made the right choice? We would love to hear your thoughts and opinion.

Never Ending WordPress Business Bundle – only $14!

This technique involves fixing some element in the browser while the rest of the page scrolls. Most often we find this done on header elements including the main navigation for a site. This is also a popular approach on single page sites where the in page navigation needs to be ever present. We also find various elements of web pages locked in place using such techniques.

There are many situations we can find where fixing an element in the page is a good thing, but it all comes back to a single purpose. In almost all of these situations the fixed element keeps a critical part of the page in front of users at all times.

The importance of these elements varies, but to some degree the fundamental goal is to keep some part of the page perpetually in the view port.

As you consider using this technique I highly recommend you carefully consider why and how you do so. Keep in mind that whatever part of your page doesn’t move will automatically draw lots of attention. So be sure you are putting it to work. Let’s dive in!

Fixed headers

Fixed headers are by far the most common fixed position element, so much so in fact I had to start adding to this collection in order to avoid too many samples. Most often the header is fixed in place to ensure that the sites navigation is ever present. As I mentioned before, this is especially true when dealing with a single page web site.

There are many subtle variations in how you can handle fixed headers so we will review some samples for various ideas on this approach.

Freckles & Handsome

This is what I would consider a classic example of this technique. The header is fixed in place as you scroll through the site. This includes the logo and main navigational elements. Additionally, it is a single page web site. Clicking on the main navigation scrolls you to the appropriate part of the page.

In such a case as this the sticky header makes browsing the single page site straight forward. It also avoids one of the more annoying aspects of many single page sites: when the navigation is only at the top of the page, but it scrolls on for ages. As such, the fixed header not only looks nice and keeps the site’s main branding front and center, but also ensures the site is easy to use.

Mapalong

This example uses a fixed header, but with its own minor twist. This site is also a single page layout, but lacks any in page navigation. In this case the fixed header contains the main logo and a sign in button, both very important elements. But, even better than this, when you scroll down the page the main call to action moves to the header as it rolls out of view. As a result, the primary conversion point for the site is always visible. And yet, even better than that, the act of the call to action fading into view calls the user’s attention to it, further emphasizing the conversion point in the design! In my opinion a brilliant use of the approach.

Kisko Labs

Another clever approach to the fixed position header is a technique I call slide and stick. On the Kisko Labs site only part of the header sticks. As you scroll down the page the main navigation scrolls as well. That is until it hits the top of the screen, then it sticks there. Thus, the navigation slides (or scrolls) as normal, then sticks to the top.

An extra detail that is really nice here is how the navigation highlights the part of the page that you are currently viewing. Since this is a single page design it is helpful to have the current part of the page identified as you would with the normal “current page” status of any navigation.

Raise the Roof

A common extension of this style is to incorporate some level of transparency into the sticky layer. In many of the examples you will find here this is done by simply having an uneven edge to the sticky element. Sometimes this is done by having an element protrude from the fixed bar, other times with a jagged edge. On the Raise the Roof site it has been accomplished with a very organic and nearly random border.

In this sample we find an interesting visual result. Through the use of overlapping elements the site creates visual depth as the contents scroll behind the header. This is further emphasized by the moon in the background that is also fixed. The end result is three visual layers. Such depth adds a great level of visual interest and can create a visually striking design.

Welcome to the Water

The Welcome to the Water site is a rather unusual creation. Very little about this site fits the norms of web layout and design. Of particular interest for the topic of this article is the fixed header. On this site that fixed element serves as a navigational tool to the site. But in many ways it has more of a toolbar feel to it.

Additional samples of fixed headers

Here are some additional examples of fixed headers. You will find a wide range of styles and subtle variations here.

Tam Cai

Marlon Messam

Big Eye Creative

Balencic Creative Group

Ivo Mynttinen

Krista Ganelon

Creattica

Ian James Cox

Make Better Apps

Matthew Carleton

Shweplantis

TruQua

Rodolphe Celestin

Holcomb Guitars

Trussystem

Fixed Footers

Perhaps the most obvious opposite to the fixed header would be the fixed footer. In such cases the footer of the page is stuck to the bottom of the screen. As the user scrolls, the element stays in place.

Much like any other fixed element, creating a focal point is still the primary goal. Interestingly though with footers such as these it is most often about a secondary function that is still a primary goal.

Unleaded Group

The Unleaded Group site is a prime example of this. Here the fixed footer contains elements that are action oriented and strike at the core purpose of the site. First note that all of the items in this bar are things a user can do: promote them on social media, place a phone call, or email them. Secondly, they are the primary action items the agency most likely wants you to take. They either want you to promote them, or contact them. These are the primary reasons to have a site such as this. So it makes good sense to fix them in place I a footer where they will get lots of attention.

Envato

The Envato site also has a fixed footer. Here the bar contains the site’s primary logo, which has interestingly been moved here from the typical top left. Frankly, for a brand like Envato this is not an issue. Also, you will find a series of drop down menus that launch you onto their various web properties. This simple function is their real goal. In fact you might say that this business profile page is not really where they want people to end up. As such, the focus on driving you back to their content sites is prominent and unavoidable.

Kiyuco

For many sites such as this one their email marketing programs are of critical importance. As such, having a fixed placed footer that prominently highlights the sign up form can go a long way to grow such mailing lists. Can email marketing help you promote your site over a longer period of time and more effectively pursue clients? If so, perhaps a fixed footer such as this one would be a great tool.

Fixed position sidebars

Locking elements of a web page into place is not something limited to headers and footers, though they might be the most popular. It would seem that a fixed position sidebar is a close second.

Fixed place sidebars often contain very similar information to what you would find in a header. This includes things like logos, navigation and social media tools. Here are some samples to consider if you want to use this approach.

Jorge Rigabert

This gorgeous site is a perfect example of the style at work. Here the side bar contains the sites primary branding and navigational options. This sidebar type of approach is great because it keeps the navigation in view as the page scrolls, but also because it doesn’t intersect with the content as it moves. Though this might be a subtle distinction, it makes for an incredibly smooth interface. Sites such as this display an elegance that appears simple, but is incredibly difficult to put together.

More Hazards More Heroes

I really love the way this site works. The fixed elements in the sidebar are the core functions the site owners want you to take. More than anything they want you to hear the music! As such, the prominent and permanently on screen “play” feature is ready and waiting. I can’t imagine a more critical element to the site, and to have it so prominently displayed just makes good sense. And you have to love that it hasn’t been presented in an obnoxious way; it doesn’t even auto play. Kudos to the designer that controlled that temptation.

Yowza

Sometimes it is desirable to create a single sticky element that promotes a particular function. We have seen this with various feedback and support services that you can plug into your site. In this case, a Facebook like button has been affixed to the side of the site. It stays in place as you scroll the page. This, of course, draws the user’s attention to the element and encourages them to use it. I would say this shows the power and importance of social referrals in a web-based business such as this.

As a side note, I love the site’s twist on the 10px top border that has become so popular. Here the element simply scrolls by. Not a dramatic animation, but something about it is fun and adds a layer of interest and life to the site.

Fat-Man Collective

This site follows all of the patterns we have found in our previous samples. But it stands out in a huge way due to a simple animation. As you scroll down the page the character in the side bar animates and walks. This element single-handedly elevates the site into a unique and memorable category. How is it that something so trivial can have such an impact. It takes this simple site and pumps it full of awesomeness. It shows that the agency behind it loves polishing their work with the types of finishing touches any client is going to die for.

More fixed sidebar elements

Here are some additional examples of fixed sidebars at work.

Silly Poems

Colin McKinney

Informant

This is Marcela

Janette D. Council

Logo only

An approach that we don’t find all that often is a fixed position logo. In this example the logo has been locked into place even as the page scrolls. This atypical approach keeps the site’s name front and center. Designs such as this can be interesting to consider. It is really hard to guess why they might have done this, but one can only assume that the main branding is of critical importance. Perhaps they have lots of similar competition? Perhaps they just want to make sure you remember their name? Regardless, it is an interesting technique worth keeping in mind if it applies to your project.

“Back to top”

When it comes to really long pages a nice feature to add is a link that takes you to the top of the page. And with sticky elements you can create such a link that stays in the same place as you scroll the page. This is exactly what the samples provided here have done.

Most frequently such an element is placed just outside the layout. This way it doesn’t interfere with anything else in the design as it traverses the page. You will also notice how these elements frequently have an arrow pointing up—perhaps an obvious element to include, but very important to keep in mind as it informs users quickly as to it’s purpose.

This approach somewhat contrasts the notion of a sticky header. In this case the navigation is most often only at the top of the page. So returning there is important as it allows people to quickly bounce around sites contents. In the case of single page sites though this can be a bit of an annoying extra step.

Overlapps

This sample demonstrates a nice extra touch in that it doesn’t show the return to top element unless you’re not actually at the top of the page. Perhaps an obvious detail to include, but as you will find it isn’t always the case. Part of the power in this approach is that the very act of it appearing draws attention to it to ensure a user is aware of it.

Two more samples

The two following examples both have return to top buttons, though they are visible all of the time. It is interesting to me that this element is most frequently placed in the bottom right corner of the screen. It is not the most prominent part of the design, so perhaps it’s secondary nature is good for such a less important element. You will notice of course though that the element is still highlighted by breaking the borders and with bold colors. I suppose the morale of the story is to consider its importance to the use of your design. If it makes all the difference, make sure it is visible.

Wildcard Thinking

Dusanka & David

Multiple fixed elements

In this final example we will take a look at a site that has many fixed elements in the page. In many ways this site breaks with most of the norms of web design and layout. Except for the logo in the top left corner, almost nothing is in its usual place.

We do find some elements we are familiar with based on this article though, such as the fixed side bar. However, you will notice that two others are far from typical. For example, the fixed footer that contains some site wide links. Things like privacy policies and terms & conditions seldom warrant such prominent position in a page. Yet here you find them affixed to the page with some other rather important navigational links.

I do really like how they have tacked the user account links to the top right corner. This is where they are frequently placed, though are seldom fixed there regardless of scrolling as in this case. I like this because it ensures you can always quickly gain access to the member’s features of the site; something that perhaps some other apps and web sites could benefit from.

All in all this site is far from normal, but something about it works incredibly well and is easy to love. Its unusual layout doesn’t make it hard to use and the end result is a distinct and pleasurable experience.

Resources

Finally, with this round up I would like to include some handy jQuery plugins that address the need of fixing elements to a specific location in a page. They offer different features that will fit various needs you might have, so be sure to explore them all to find the right fit.

The great thing is that they are all jQuery plugins and they are super simple to implement. If you do want to produce this style, these will at least make it an easy job.

Meerkat

Meerkat is one of my favorite tools for this particular job. It’s ability to be hidden makes it a great tool for displaying promotional content or important features such as email sign up forms.

Stickyscroll

Stickyscroll is a plugin that allows you to create elements that scroll with the page until they hit the top, and then they stick in place. This plugin also helps ensure elements don’t scroll into a footer region by giving it a bottom boundary; a nice extra feature for sure.

Waypoints

Waypoints allows you to trigger jQuery events when a user scrolls to specific points in a page. This is handy if you would like to highlight or change the navigation to match the user’s location in the page. But the fun doesn’t end there as there are countless things you could do to a page or design as a user scrolls and interacts with it.

Conclusion

Fixed elements are now a common element designers can put to work. Tools to accomplish such features and full browser support are no longer an issue.

As such, it is a great technique to keep in your tool belt and draw out when the time is right. Such approaches are, of course, not the type of thing you use every day, but can be incredibly powerful when used effectively.

Patrick McNeil is a freelance writer, developer and designer. In particular he loves to write about web design, train people on web development and build web sites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Never Ending WordPress Business Bundle – only $14!

Since the video was posted, it’s been viewed more than 20 million times — far exceeding her expectations. This has led to both baby and family receiving the proverbial “five minutes of fame” in both Canada and the U.S.

If you haven’t seen it yet, you’re really missing out. View the video below, and read on. I’d like to point out some things about this video that I feel enhance its side-splitting hilarity, and that can influence designers to continue to look for inspiration in things that have almost nothing to do with design.

Why is the video effective?

First and foremost, this video is almost unrealistically hilarious. The kid is cute, and he reacts to the nose blowing in an almost cartoon-like fashion. I’ve watched the video literally dozens of times, and it never gets old. It always makes me chuckle.

So the main reason the video is effective and popular is because it’s just plain funny.

But there are a few other things that I feel enhance the experience of watching this kid nearly crap his pants while his mom extricates some mucus from her shnozz.

An appropriate color palette

Study the first frame, before the video is even played. The colors surrounding Emerson are eye-catching, and prepare the viewer for what’s to come.

When discussing the topic of “aesthetic consistency”, the book Universal Principles of Design says: “Aesthetic consistency enhances recognition, communicates membership, and sets emotional expectations.” The colors that appear in the baby Emerson video contribute to the aesthetic consistency of the candid piece.

Here are some of the colors that are prominent in the video:

Baby Emerson’s eye-catching color palette

Do you think you would use those colors on your next web project? Well, likely not — it would depend on the details of that particular project.

But in the case of the video of baby Emerson, the color palette is entirely appropriate. The colors are eye-catching, they’re befitting of the context and content of the video, and they contribute to the viewer’s emotional expectations. The colors also complement each other nicely, solidifying the aesthetic.

Of course, the colors work for a video like this because they’re part of his toys — which are designed to be appealing to young children. This type of appropriate use of color really inspires me to give greater thought to colors that I choose when going through the initial steps of any design.

What else can baby Emerson teach us?

Use of saturated colors

Further on the same topic, the colors in the video are eye-pleasing because they have high saturation levels. Think of the dozens of other funny baby videos or other candid moments made famous on YouTube. Unless they’re staged or over-produced, most of them are pretty drab looking.

By contrast, the baby Emerson video has significant color saturation. Universal Principles of Design says: “Use saturated colors (pure hues) when attracting attention is the priority. Use desaturated colors when performance and efficiency are the priority.”

In this case, attracting attention is the priority, and it just so happens that the colors around baby Emerson are doubly effective because of their high saturation levels.

Yes, the video would probably still have many millions of views regardless of the colors present in the imagery, but in this case they serve to enhance an already appealing visual.

Great storytelling

Again, according to Universal Principles of Design, the elements of a good story include characters, plot, and movement.

The character (baby Emerson) is undeniably attractive and interesting. The plot (will baby Emerson overcome his fear?) is rollickingly gripping. And the aforementioned story moves swiftly forward, as his mom repeatedly tests his tolerance to the nose blowing.

It’s a simple story, but an effective one. Can you imagine someone watching ten seconds of this video, then closing the window out of boredom? The suspense created right from the outset by the look on baby Emerson’s face ensures that everyone that views the video watches every second until the end, to see if he will overcome his unreasonable fear.

Will baby Emerson overcome his fear?

On the topic of storytelling, Universal Principles further adds: “Use storytelling to engage an audience in a design,” and to “evoke a specific emotional response.” The Baby Emerson video does that quite nicely and we should all endeavor to see where storytelling can fit into our own designs, where appropriate.

Baby-face bias

The baby-face bias can be analyzed in a number of situations, and is particularly significant when applied to adults. But in this case, it’s relevant even in the context of babies.

According to the baby-face bias, “things with baby-faced features” are seen as “more naive, helpless, and honest” than things with mature features (Universal Principles of Design). Baby-face features include “round features, large eyes, small noses, high foreheads, shorter chins, and relatively lighter skin and hair.”

Baby Emerson has most, if not all, of those features. Thus, when viewers catch a glimpse of him, we can’t help but feel for him, and the scene thus draws us in visually and emotionally.

Baby Emerson has virtually all the facial features that suggest naiveté, helplessness, and honesty.

This is an important lesson for designers using characters and personalities in their projects. While baby-face features are helpful and preferred in the case of babies, the opposite might be true in the case of adult characters.

First, babies that do not have prominent baby-face characteristics are often viewed as less attractive, less likable, and as a result receive less positive attention from adults. In some cases, this might be a good thing, and might actually assist a baby in learning independence and self-sufficiency.

But in the case of adults, if a baby-faced adult tries to make an authoritative statement, he is viewed as less authoritative than an adult that does not have baby-face features. For example, a baby-faced actor posing as a doctor in a television commercial would be taken less seriously than an actor with more mature features.

So the lesson learned is: Choose your character’s facial features wisely, and make sure the character’s features match the message being communicated.

Conclusion

In conclusion, I just wanted to make it clear that in no way am I implying that the success of this video has anything to do with the principles discussed here. The baby’s reaction to the situation is easily the most important reason for the video’s success.

But in this case, the video has some visually relevant and memorable features that serve as excellent reminders of some design principles that have stood the test of time.

And if nothing else, this article should serve as a reminder that inspiration can be gleaned from almost anything — even from candid and unrehearsed situations, and not just settings that are contrived or planned.

This post was written exclusively for Webdesigner Depot by Louis Lazaris, an author, freelance writer, and web developer. Louis is the co-author of HTML5 & CSS3 for the Real World, published by SitePoint, and he writes about front-end web design technologies on Impressive Webs. You can follow Louis on Twitter or contact him through his website.

Do you see design principles at work in unexpected settings? Share your thoughts below.

Never Ending WordPress Business Bundle – only $14!

I reconnected with a former art school teacher the other day. I’ve tried to keep in touch with all of my old teachers, at least the ones still living.

They were my mentors, and they cared about teaching students to enter the field as professionals and to succeed.

He was at the top of the field then, an art director for a hugely famous magazine, and I took his class so that I could get closer to him as a connection and possible employer.

He was creative, kind and caring. At the end of the semester, he signed a magazine for me, “It’s been a real pleasure having you in my class and watching you totally miss the message.”

I laughed at the time and thought it was a joke. But he was serious and he was right. When I connected with him recently, I reminded him of what he wrote and thanked him for trying to give me a swift kick to wake me up.

“It didn’t sink in for many years,” I wrote, “but when it did, I realized the lesson you were trying to teach me, and it’s one of the reasons I have had a successful career.”

This was a repeat of a similar incident I had with another teacher a few years back. As with the first teacher, this person who tried to mentor me into adulthood and professionalism was humble about my apology and confession and said that it meant a lot to him that he was able to get through to me… albeit many years later!

It was Mark Twain who said, “When I was 18, I thought my father was the stupidest man in the world. When I turned 21, I was amazed to see how much the man had learned in 3 years.”

There is no sadder sight than a young pessimist.

– Mark Twain

An editor once wrote of me, “Extreme, aggressive and opinionated.” And he was being complimentary! An interviewer wrote of me, “He lives on the edge of madness and seems perfectly comfortable there.”

I admit to these being true, but I also admit that I was a hundred times worse in my younger days. Yes, I said worse, if you can imagine an out-of-control maniac running amok in the ad agencies and magazine publishers of New York City. I gave the term “Mad Men” a whole different meaning. My “fight first and ask questions later” attitude got me into a lot of trouble. I deeply regret those days and feel distressed by my actions. Some put up with it, some ran from it and some encouraged it. The people who encouraged it used my anger at the world and know-it-all attitude for their own purposes. I was young, foolish and blinded by the apparent admiration for my special talent for pissing people off.

As a young professional, I joined the Graphic Artists Guild and was soon on the board of directors, mostly as a result of being the Forrest Gump of the design field (being in the wrong place at the right time). People got to know my temperament and would call to ask me to “back them up on a vote” or something of the sort. They called me “The Hitman.” There were other names, but they can’t be printed here.

As years went by, I realized that I was hurting the people who could help me and was being used by those who didn’t deserve the time or attention I gave them. I excuse myself only due to my age and inexperience then.

To their credit, once again, there were those, like my teachers, many of whom did hire me after graduation, who forgave my “passion,” as one of them so kindly put it. They were older and mature, and they were mentors. I’ve learned over the years to be more like them. I hope one day to be just like them.

I’m not young enough to know everything!

– Oscar Wilde

A while back, a young lady, just out of college, was commenting on a LinkedIn group to which we both belonged. It wasn’t so much her opinion on the subject being discussed that bothered me, but rather her assertion that everyone else was wrong and that she had the key of knowledge. I should have let it go, but I didn’t. In my mind, I was being logical with her and was reminding her that she was just out of college and wasn’t familiar enough with the subject. She heard me calling her a moron and saying that she didn’t matter. I realized later that she was no different than I was at her age.

Naturally, she got upset. She wrote on her blog about what an idiot I was and complained to the group moderator, and I was deleted from the group. Frankly, I deserved it. I should have ignored her, as everyone else did. I felt I was teaching her a valuable lesson. As with me in my younger days, she didn’t want a lesson because she “was right.” I shuddered at the realization of how alike we were.

In youth we learn; in age we understand.

– Marie Ebner von Eschenbach

A famous designer once chatted with me at a design event. I asked why young designers were so nasty but those who really made it were so nice. He smiled and replied, “Because there’s all the room at the top and precious little room at the bottom!”

That’s when my outlook changed. If I can somehow pay back that sage advice, it would be with the article I wrote on career development. Many designers, young and old, have told me it changed their life. That feels more rewarding than verbally crushing my enemies or innocent parties who get in the way.

I care about our young people, and I wish them great success, because they are our hope for the future, and some day, when my generation retires, they will have to pay us trillions of dollars in social security.

– Dave Barry

The industry has changed, more so in its economy. “Young and cheap” has become the way to hire. When I was young and entering the field, my peers and I were told that we couldn’t be hired because we had no experience. Of course, the catch-22 was that we couldn’t get experience because no one would hire us. That frustration caused bad blood and stress.

I meet many young creatives now who have hit a great period, when their youth has become an advantage. When I speak at art schools, I point out that they have a chance to pursue career paths much earlier than graduates from just five years ago, but the pressure has also increased, to the point where burnout is a dangerous side effect. Salaries are lower, titles are more important and the pressure to perform upon entering the field has increased — from what I hear and see, it has increased to unfair levels.

In nature, the young are mentored, taught and cared for by the parent. The child grows, matures, learns and eventually leaves the nest and becomes self-sufficient. The mentor ages and retires… or is brutally fired by the very person they trained and resigns themselves to watching Matlock reruns. It’s the cycle of life, the natural order. Back then, business was no different. One needed enough experience to join the company, ushered in as a child and nurtured into adulthood.

Nothing can be so amusingly arrogant as a young man who has just discovered an old idea and thinks it is his own.

– Sidney J. Harris

The young intern or assistant learned from their boss or mentor and grew with experience, guided by the mentors around them. The mix of youthful verve and aged experience was a successful combination, with each learning from the other, each motivating the other. It was this mix that made companies run. The balance has been disturbed, and that is one of the problems with our floundering economy. Moreover, it forces youth, who should be enjoying simpler times, making mistakes and learning easier lessons from life’s bumps and grinds, to grow old and responsible too quickly.

The dead might as well try to speak to the living as the old to the young.

– Willa Cather

Will young designers understand my points here or learn from my experience? I doubt it. Nor would I expect it! What do I know? I know years of experience filled with painful twists and turns and falling flat on my face. Like a father to his children, my hope is that my mentoring words will raise an eyebrow or spark an introspective thought on the part of young professionals. Your actions will not only affect your own career, but steer the future of the industry. Mistakes made today will have a butterfly effect on the future.

Just the other day, a young man of 39 was bemoaning that he had been laid off from his job of 17 years and that he was unable to find anything else. “I can’t believe my career is over at age 39,” he wrote.

I can understand we older designers being passed over for employment, because we represent higher salaries and health insurance costs. But when I considered that 39 is the end of the line, like a sick version of Logan’s Run, I thought of how little time there was to experience all that a working career offers. Workers are starting younger but being put out to pasture earlier. You may laugh at me as being a silly old man, but you will be here one day — apparently sooner than later. Because of this, grab all you can while you can, and that includes mentoring. Gain it, give it and hold on to it.

It is a pity that, as one gradually gains experience, one loses one’s youth.

– Vincent van Gogh

Keep in mind that Van Gogh was insane. Talented, but insane. It is possible to grow up but not old. One can listen, learn and grow. They are the ones who will continue to evolve, long past the age of 29.

When the corporate world has decided you are no longer viable as a worker, a wonderful, creative world of freelancing awaits you. That world, however, requires experience, knowledge and… maturity.

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Did you have the same trouble taking advice in your youth? Please share your experiences below…

Never Ending WordPress Business Bundle – only $14!

Here, I’ll continue the theme, but focusing on modern design movements (mainly 20th century) that have lessons to teach us and inspiration to offer.

The challenge with modern design is that there are dozens of movements, and they all overlap each other in a tangled mess.

Things are no longer as simple as a century-long Renaissance or Baroque period. To keep it manageable, I have selected a few movements to review here.

Arts and Crafts movement

We’ll begin our journey with the Arts and Crafts movement, which began around 1860 and flourished until about 1910. The movement emphasized craftsmanship and simplicity and was sensitive to the actual materials used to create the work.

Fundamentally, the movement was a direct response to the modern machine age, and it challenged it in its style and decoration. With a focus on simplicity, functionality and craftsmanship, the Arts and Crafts movement offers many things that the modern designer can draw on.

Granted, drawing principles from a movement that was fundamentally opposed to modern machinery and applying them to web development presents an obvious problem. But let’s see what we come up with.

Preoccupied with purpose and technological simplicity, designers of the period relied heavily on ornament and patterns, while still attending to overall quality and style. These elements were so fundamental that a book from this period was devoted to them, The Grammar of Ornament.

Ornament, patterns and refinement

This page from The Nature of Gothic, as printed by Kelmscott Press, shows painstaking craft and an aesthetic that is fundamentally opposed to mass production. How can we apply this to web design? The leap is rather difficult, but I think we have a winner here:

Despite the fact that a website, at its most basic level, represents an embrace of technology, this particular website is a fantastic bridge between the Arts and Crafts style and the web.

For starters, it has a remarkably handcrafted feel to it. The background most likely was handcrafted, before being converted to digital vector format. The website clearly reflects the subject matter (i.e. letterpress), which itself has a direct connection to craftsmanship. Most of all, the lack of graphics or decoration, in addition to its refinement, truly makes this fit the style.

Another interesting, though very different, example is Zaarly, which packs a distinct visual punch. The website combines modern functionality with a craft-oriented style. The hand-rendered illustration and natural color palette connect this design to tangible handicrafts. In many ways, the designer distances this design from the cold, sterile technologies used to create it, going instead for a personal, natural feel.

The website certainly doesn’t abstain from modern tools, though, with its Facebook, Twitter and Google Maps integration. In fact, the beautiful design would be useless without its modern application and relevance.

Let’s consider the impact of this style. One might assume that it was randomly decided on. I would propose that it was carefully calculated. It represents a radically different approach than that of Craigslist, a competitor of Zaarly’s. By making the website personal and less “digital,” the designers have attempted to appeal to people on a totally different level. The design serves a very definite purpose with the product, which is totally in line with the ideals of the Arts and Crafts movement.

Art Nouveau

The Art Nouveau movement was popular right around 1900 and is most frequently recognized for its impact on architecture of the time. The style captured floral and plant elements, with stylized flowing lines. This combination of elements makes art from this period relatively easy to identify.

The beautiful poster Maude Adams as Joan of Arc by Alfons Mucha embodies all of the core principles of Art Nouveau. Clearly visible are the floral patterns and flowing lines. The style of the painting is highlighted by the technique used to create it, without distracting from the absolutely beautiful result. It’s like a combination of the realistic and decorative elements of other more stylized movements (Impressionism, for example).

I couldn’t have stumbled on a better example of Art Nouveau elements in modern design than idesign’s website. The flowing elements at the top are the most obvious reference to this period. Throw in the other elements, including the rooster, bicycle and hand, and you have a very clear homage to the early 1900s.

While the connection to Art Nouveau is clear, the modern touches are what make the website truly outstanding. Foremost are the simple animations at the top of the page. Little elements like these go a long way to bringing the page to life.

Bauhaus

Bauhaus was a German school that ran from about 1919 to 1933. It had a tremendous influence on modern design and almost all forms of art that followed, especially the commercial arts.

As most movements do, the Bauhaus style contrasted starkly with its predecessors. Absent are the ornamentation and decoration of the Arts and Crafts and Art Nouveau styles. In its place is the merging of design and function, which was in many ways the birth of true minimalism. The attempt to harmonize function and design is remarkably similar to the user experience efforts of the web design community today.

The Barcelona Chair above was designed by Mies van der Rohe, one of the directors of Bauhaus. The simple chair perfectly captures the aesthetic. It is streamlined and incredibly stylish and yet totally designed to perform its function, which are the reasons it is still being used today, 80 years on.

Finding minimalist websites is remarkably easy, but finding ones that also embrace the Bauhaus style is a tad more difficult. Identity Designed does it effectively. The website clearly embraces minimalism but goes deeper.

Function and design

In keeping with the Bauhaus style, Identity Designed has a minimalist website and has ensured that it functions extremely well. The header of the page shows simple branding, “ID.” From there, we have a simple clear menu bar; the user instantly knows how to navigate the website. It follows conventions while functioning beautifully.

Another feature of Bauhaus is its use of sans-serif typefaces. After all, a typeface can perform its function perfectly well without all of those extra serifs, ears and arms! Not to mention, sans-serif fonts can be remarkably beautiful in their own right.

Finally, notice how carefully color is used. In the Bauhaus style, stark color combinations are almost non-existent. Identity Design uses color to distinguish links, but otherwise, color is used for only the subtlest of decoration.

International Typographic Style

Also known as the Swiss Style, the International Typographic Style originated in Switzerland in the 1950s. On the surface, it embodies the functional and minimal style of Bauhaus. As you dig deeper, you’ll find a focus on typography, geometric design and grid systems.

Some of the biggest names in graphic design emerged from this movement: Paul Rand, Max Miedinger. Miedinger and Eduard Hoffmann created the Helvetica typeface, which some of you may have heard of.

(Image: Joe Kral)

The sample above from Neue Grafik magazine exemplifies the International Typographic Style. Notice the almost complete reliance on typography, the strong adherence to a grid and the left-justified text.

Focus Lab’s website is not 100% in the International style, but in a way this makes it an even better example. After all, such comparisons are meant to demonstrate how these ideas from modern art can be adapted to current needs and aesthetics.

Clearly visible on Focus Lab’s website is refined typography as a stylistic element. The type doesn’t just communicate information: it is the primary design element on the page (even if it’s not quite Helvetica).

Also, the grid is critical to the effectiveness of the page. And while perhaps a subtler detail, all of the text is left-justified, very much in keeping with the style. The website is a stunning example of modern web design and proves that we can leverage any style to suit our needs.

Pop Art

Pop Art also came out of the 1950s. It originated in Britain and found its way to the US. Andy Warhol is perhaps its best known proponent.

Once again, we see an art movement challenging tradition. Pop Art incorporates everyday items like comic books, celebrity photographs, household objects and even advertising.

One of the earliest examples of Pop Art is this collage by Richard Hamilton, titled Just what is it that makes today’s homes so different, so appealing? This amalgamation of disparate elements of 1950s life was a striking, perhaps shocking, demonstration of this style.

Finding websites that leverage the Pop Art style is hard, but they do exist. One is Mixbits.com:

Perhaps the biggest difference between this and the Pop Art style is that Mixbits.com is actually meant to be used, not just viewed. However, the interface does carry elements of the style. What does Pop Art aim to achieve other than to change our perspective on what art is? Mixbits.com’s interface challenges our expectations of what a web app should look like. And it works brilliantly.

We do not know the inspiration behind the Pelican Hotel’s website, but the visuals here do seem to evoke Richard Hamilton’s collage. Commercial considerations keep the designer from pasting together everyday items the way Hamilton did, but there is something collage-like about the way this page is put together.

Punk

Not everyone would consider the 1970s punk rock scene a milestone in modern art and design. But its influence is far-reaching and rather persistent. Not to mention, it forms a nice contrast to the minimalism of Bauhaus.

Some of its principal features are collage, gritty visuals, shocking content, and intense bright colors like fluorescent pink and yellow. One of the most memorable products is this album cover for the Sex Pistols’ single God Save the Queen:

This album art perfectly embodies the punk rock era: shocking graphics, collage and low production value. Let’s consider a couple of website designs to see how this style lives on.

Fortunately, many of the designers who adopt this aesthetic do not abandon principles of usability in the process. Take the two examples shown above, Serge Seidlitz’s website and the more commercial approach of Puma Talk. Granted, neither of these websites is literally “punk rock.” Neither is offensive in the least, and neither has a lo-fi feel. Still, the websites are rooted in the style, even while being heavily modernized.

Rancid is truer to the punk rock spirit. The website for this current semi-punk band lacks the offensiveness, but it certainly has the lo-fi hacked-together feel. And it suits the band well.

If you’re thinking of adopting this style, consider its effect on your audience. Puma Talk, for example, leverages a pseudo-punk style to connect with a young audience, even though users wouldn’t be old enough to have experienced the punk movement firsthand. Don’t let the style dictate the project. Instead, leverage modern techniques and approaches, and ensure that your website is relevant to current audiences.

Conclusion

Trying to unravel the countless art movements that have occurred in the last 100 years would be mind-boggling. With the globalization of communication, the styles have intertwined to the point of being overwhelming. But this is not a lesson in art history. Rather, my goal was to shed light on the origins of some of the styles we employ on the web today.

Today’s web designers leverage ideas that are decades, if not centuries, old. The true innovators of any period are able to leverage the ideas of the past, adapt to modern needs, and create fresh approaches that shape future generations of designers.

I hope this brief introduction to various art movements demonstrates the power of looking to the past. Creativity is never inhibited by considering what others have done. On the contrary: understanding the lessons others have learned helps us adapt their ideas to new styles.

Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Do you see any other 20th-century styles represented prominently on today’s websites?

Never Ending WordPress Business Bundle – only $14!

People in every trade do this, including those in photography, painting, sculpture and architecture. Why should web designers be any different?

Of course, we look to the very recent past through our countless web design showcases. But we can go much further back for inspiration, to the masters of old.

Let’s review some key art movements and the fundamental design principles they embraced. Based on these, we can review current web designs for elements to apply to our own work.

We’ll focus on Western art before the 20th century, and we will highlight only a few movements from among the many that took place.

The Renaissance

We’ll begin our journey in the mid-15th century, with one of the most well-known eras: the Renaissance. The height of this period saw some of the most notable artists of all time: Michelangelo, da Vinci, Raphael. One of the reasons this period was so critical, and our reason for starting here, is that it marked the transition from the medieval period to the modern era.

While many things shaped this period of art history, a few fundamental principles stand out: the use of perspective, the attempt at stability and balance in compositions, and the relentless push towards realism. To illustrate these ideas, I have selected da Vinci’s The Last Supper:

Perspective

The use of perspective was brand new to the Renaissance. The Last Supper shows an entire scene created using single-point perspective. The focal point is directly on Christ’s head, drawing the viewer’s gaze. Perspective not only increases the realism but directs the viewer’s attention to the most important area.

At first glance, the Skittles website does not scream Renaissance. But that period’s ideas can be leveraged in creative ways. Note the use of perspective on the title text, “Experience the rainbow.” It might seem purely decorative at first, but the trailing rainbow guides us down to the arrow below. It’s a more blatant use of perspective, directing the user down the page, fulfilling its purpose. The use is entirely appropriate in this case: the page scrolls infinitely, and content continues to loads the further down you go.

Stability and balance

Another key principle of the Renaissance is balance and stability in composition. The Last Supper has a sense of overall stability, enabled by the long table at the bottom of the scene. This grounds the painting and keeps it from feeling lopsided.

Also, notice the symmetry across the entire piece: six people on each side and a mirror image background, all revolving around the central figure.

And notice how Christ is shaped like a triangle, with his head at the peak. This was not accidental. This sort of balance and stability is a hallmark of Renaissance art.

Again, not much about Site Stitcher connects it to the Renaissance. However, we do see stability and balance effectively at work. First, the page has a basic triangular structure. At the top is the logo and branding; below is a summary and illustration of the company’s work; and all of this sits on top of the most critical information and action items. This not only creates structure, but leads viewers down an important series of steps. Consider your design and how you could leverage stability and balance to control the user experience and create a positive environment for your product.

Baroque

The Baroque period followed the Renaissance and peaked around the 17th century. In stark contrast to the Renaissance, it was marked by dynamic, active and highly dramatic images. Many paintings from this period appear to capture an active moment and feel very much alive, as if they could move at any second. The Baroque period continued the realism that began in the Renaissance, but it brought a drama and sense of motion that had not been done.

Some of the most important artists among the countless during this period are Caravaggio, Rubens and Bernini. Many of the most dramatic icons of certain European cities were created in this era. For example, the Trevi Fountain in Rome was designed by Bernini and is a prime example of Baroque sculpture.

We can relate the three most common characteristics of art from this period to modern design: drama, rich color, and intense dark and light contrast. Let’s look at Caravaggio’s Calling of St. Matthew:

Stark contrast

The characteristic Baroque quality of intense contrast between light and dark is clearly visible here. This fundamental principle of design is taught in our introductory design classes, so the topic certainly isn’t new to anyone. Still, let’s consider its role in this painting.

Most of all, it highlights the most critical elements. The individuals’ faces stand out boldly against the shadowy background, effectively focusing the viewer on the subject matter and minimizing the distraction of the environment. The technique is a way to ensure that the story in the painting is easily understood.

These are all qualities we want on the web. We want our designs to be easy to understand and, by extension, easy to use. We also want the critical elements — what we might call action items — to stand out. I’ve found a website that exhibits just these qualities:

On Cleatskins, we find many design elements that recall the Baroque period: the sharp contrast of black on white, the bold color palette of the products, and the action items. All of these focus you on the product itself, making for a website that is easy to use, easy to understand and highly effective.

Notice also that the images of the products have a sense of action to them. The photographic style captures a moment in time, and you feel as though movement is in progress, which is different from the style found in Renaissance art.

Drama

For a sense of drama, we turn to Golden Gopher. Everything about this design screams drama: the highly active main photograph, the rich colors and strong contrast, even the diagonal lines that add texture and motion. All of these add up to a sense of major performance, which is very much like football itself. This design embraces ideals in Baroque art and perfectly suits the topic at hand.

Rococo

The Rococo period followed the Baroque in the 18th century. During this period, artists shifted to lighter topics, focusing on things like aristocratic life and romance.

Art from this time is characterized by elaborate ornamentation and light graceful imagery. Some of the most influential artists of this period were Jean-Honore Fragonard, Watteau and Boucher. One of the most notable landmarks from this period is the Gardens of Versailles.

The ceiling painting and architecture of Wies Church, shown above, is a fantastic specimen of this period. Let’s see how the principles it embodies can be applied to modern design.

Ornamentation

To say that the ceiling is ornamental would be an understatement. It pushes the very limit of ornamentation. This is a signature of Rococo art. Ornamentation was used in unprecedented ways, adding flair and elegance like never before.

Let’s turn to the portfolio of Nathan Love. The ornamentation here defines the website, much as it would in a work from the 18th century. Of course, it has a modern flair, too, and incorporates some early-1900s elements, but the style is dominated by the aesthetic of the Rococo period.

Nathan has created a distinctive portfolio that represents his work beautifully. I particularly love the little illustrations dispersed throughout the website that give us a sense of his personality, but without interfering with the usability. The navigation and interaction are clear, despite the unusual approach.

Playful scene

The subject of many paintings from this period form an interesting contrast to the regality of the ornamentation. For example, The Swing by Jean-Honore Fragonard presents a lighthearted and trivial scene. But combined with the extreme ornamentation, it creates some internal tension.

Turning again to Nathan’s website, it has a rather serious style, and yet it is infused with some rather playful elements. The small animated figures, silly videos and lightheartedness of the content form a counterpoint to the overall seriousness of the aesthetic. These show the human behind the website, someone with personality and humor but who understands how to make a product look fabulous and serve its function.

This combination is exactly what a business owner wants when hiring a designer. As such, his website is a fantastic example of how Rococo principles can be adapted with clear intent. Of course, Nathan probably wasn’t thinking of the Rococo style when he was creating his website, but we see how it applies nonetheless.

Neoclassical

As usually happens in art, one generation rejects the previous and goes in the completely opposite direction. In the Neoclassical period, artists rejected the trends of the Rococo period, regarding them as over the top and trivial. They reverted to classical approaches, including those of the Renaissance and Classical Greek and Roman art.

The Neoclassicists embraced what they viewed as ideal standards to produce optimal results. This meant embracing the most notable artists, works of art and methods of these ideal periods.

The movement covered the mid-18th and early-19th centuries, giving us such artists as Jacques-Louis David, Rembrandt Peale and Antonio Canova, to name but a few. These artists adopted styles and subject matter from earlier eras. It’s easy for us to overlook that a painting such as Jacques Louis-David’s period-defining Oath of the Horatii would have been considered “classical” at the time.

Some of the defining characteristics of this period are simplicity, order, stability and classical subject matter. Let’s see how these could be applied to modern design, using David’s piece from this period.

Historical

David’s painting is above all a historical reference. It depicts a scene from a work of Classical Roman historian Livy. David was in effect recalling an era long past.

At first glance, you would be hard pressed to relate the Thread’s Not Dead website to this period in art history. But consider the design’s semi-retro style. The worn look adds age to the website, making it feel like the product of a bygone age. And yet it fits the modern web just fine. Thematically, it looks to the past, but topically, it is very relevant.

This could just as well describe Oath of the Horatii. The subject matter is historical, but it evokes the modern age (the soldiers on the left) embracing the past (the forefather on the right). This is exactly what artists were doing.

The Thread’s Not Dead website conveys quality and experience through its connection to the past, a kind of “been there, done that” mentality. And guess what? The author has been there and done that. The theme fits the subject matter brilliantly.

Romanticism

The Romantic period in art history began in the middle of the 18th century and was strongest in Europe.

Despite its name, it wasn’t concerned with what you would consider typical Romantic matter. Instead, artists sought to imbue their works with strong emotion, including shock, fear, uncertainty and, of course, love. Some of the most prominent artists of the time were Francisco Goya, Eugene Delacroix and Thomas Cole.

The objective of generating an emotional response from a design is almost a given. Most often, the intention of a website is to elicit a physical response from the user: getting them to click on something, buy something, read something or the like. Playing on emotion can be a powerful way to accomplish this.

Emotion

A painting such as this wears its emotions on its sleeve. One need not understand its particular historical reference to fully appreciate it. The painting oozes with emotion, and the subject matter is clear when you know the title, The Voyage of Life, and especially considering it as one of the four paintings in a series. A painting like this is meant to be thought-provoking, to generate an emotional response, to awaken the viewer.

One need not look far to find a website design that elicits an emotional response. In the world of advertising, this seems to be the number one approach. On the Charleston Family Fun website, we see a clear attempt to generate such a response. The nostalgic photograph crosses barriers and presents us with a timeless sense of peace. The kids are getting along, sipping on Cokes, munching on peanuts, evoking an age gone by, as if in a parental dream. Everything here is an attempt to make parents want to go to Charleston.

While the website certainly doesn’t look like a painting from the Romantic period, it does make a strong emotional response its primary goal. There are many ways to sell a product, and appealing to raw emotion is one of the most powerful.

It is not hard to imagine how these principles could be applied to modern design; after all, we are already doing it. Still, as with most things, exploring the roots of the approach is worthwhile. When you dig into a technique like this one, you often find very practical reasons for why it came to be and, therefore, a greater understanding of how it can be leveraged.

Apparently I am not the first to observe this. Aaron Walter is writing a book titled Designing for Emotion, due to be released this summer. I doubt he will connect his theory to the Romantic period, but my point stands nonetheless.

Conclusion

The notion of looking to the past for inspiration and understanding is not new. It is the reason every creative-related educational program includes a load of art history courses. As a former student of such courses, I can attest that they often bore and frustrate many students. But with an open mind, we can find timeless ideas that apply to our daily work.

Of course, this article merely skims the surface of these periods in art history. But I hope the dots are starting to connect for you. Embrace our rich history, and draw inspiration and techniques from it. You will be amazed by what you can learn and use in your own work.

This brings us up to the beginning of the 20th century, which I will cover in another article.

Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Do you see any other elements in these periods of art history that we can apply to modern websites?

Never Ending WordPress Business Bundle – only $14!

There is also asymmetrical design, where the two halves are balanced but do not mirror each other perfectly. The majority of websites have an asymmetrical layout.

Most often we find the logo in the top left, balanced by some navigational elements on the right. In the body, the side columns are usually balanced by either the main content or other columns.

While perfect symmetry is certainly not new to the web, it is gaining momentum. Expanding screen sizes and the proliferation of platforms and viewing options are making it a more attractive option. By mirroring the halves of a design, you not only get a greater sense of balance, but also improve the flow from top to bottom.

Icora

Icora is a perfect example of how symmetry contributes to the vertical flow of a website. I love how a story is being told here. Instead of throwing a bunch of stuff on the page and letting the user choose where to go, the designer encourages the user to scroll through the content. The designer takes you on a set journey in what is essentially a carefully planned sales pitch.

Pixel Bleed

Pixel Bleed is the type of website that often totally perplexes me. Nothing about it fits the norm. The logo and navigation are at the bottom, which just feels wrong… and yet it works! The symmetry lends an interesting balance to the design. And with the visually heaviest elements at the bottom of the page, the layout feels grounded.

Duuel

Symmetry can occasionally play into the subject of the website. In the case of Duuel, the idea of two designers dueling makes sense. The designers are evenly skilled and evenly equipped, and the symmetry subtly reinforces this idea.

Clocks

Symmetry is also great when you simply don’t have much to say. The makers of Clocks don’t need much to explain their product. One word does the job. In fact, saying more would almost defeat the point. Of course, a clock is symmetrical anyway and so is ideal for a layout like this.

Ryan M. Stryker

One powerful aspect of symmetry is its ability to direct the user’s focus. With everything balanced on the vertical axis, attention naturally goes there. Ryan M. Stryker’s name here is in this pivotal location, ensuring you don’t miss it. The website functions almost like an elevator pitch, starting with the name and flowing into a summary of the designer’s work. Critical information is carefully controlled and powerfully conveyed. The design doesn’t have to be overbearing either; the symmetry does most of the work.

Questionable Characters

Symmetry also allows you to communicate two equally important sets of information. Perhaps your product has two target audiences. Or perhaps two products are the lifeblood of your company. As we see with Questionable Characters, symmetry can ensure equal air time for two halves of a whole.

Foodily

Symmetry is also useful for keeping clutter out of a design. While this is not reason alone to use it, Foodily does make a strong case for it, with its clean and elegant layout. While most recipe websites overflow with content, this one is remarkably simple. Consider your own content and what you would remove if you had to make the layout symmetrical.

Thread’s Not Dead

Thread’s Not Dead combines a few of the principles we’ve seen above, but with some twists. I’m intrigued that the top-most item in this symmetrical layout is a product testimonial. No doubt, testimonials are useful for online marketing, and here one occupies the most prominent part of the page. Nevertheless, the area directly below carries the most visual weight and contains all of the critical information and calls to action. The result is perfectly balanced content that cuts right to the chase. Sometimes, leaving out the heavy extras and getting straight to the point is the best approach.

13 more symmetrical websites

The principles explored above also apply to the designs below. Consider how symmetry helps to control the user experience on these websites.

Conclusion

Symmetry is a basic feature of design and yet is easy to lose sight of. I love thinking about how the basic elements of design apply to the real world. It is often these most basic elements that reveal powerful ways to communicate information.

Patrick is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Have you had an abiding love for symmetrical design? Do you think this style has its limits?

Never Ending WordPress Business Bundle – only $14!