We live in a three-dimensional world, something that designers are trying to recreate in web design every day. The element of depth can add a greater touch of reality to certain design projects.

Creating it can be easier than you think. The key to simulating reality on the 2D screen is by creating depth using images. This can be accomplished in a variety of ways, from the photography itself, to layering of images, manipulation and the use of special effects.

Layering

Layering is a tool that can be intentionally used in the way images and objects are placed in the design process, as a tool to manipulate images or purposefully in the image itself.

We’ve all seen the layout where images are placed on top of each other haphazardly to look like a stack of printed photos. You know the trick. And it works by creating a sense of depth that makes you feel as if you are thumbing through the photographs. This is layering in the design process. Sometimes the effect is more obvious, as in this instance but other times it is more hidden.

Often multiple photos are merged into one to create two distinct parts of an image – a foreground and another background. When done well, the effect should be virtually unseen. Take a look at the Range Rover site above – both the car and the city images are spectacular and when combined they make you feel as if you are standing next to the vehicle looking over the city.

Another effective layering tool is laying a photograph or image over a seemingly flat background. This works fantastically with odd orientations or angled images and backgrounds that have graduated color.

Finally, some images are created with layering in mind. This photography technique is based on the idea of using overlapping lines created by different objects in the image to create depth. Often lines are emphasized by color and contrast in the image to separate objects in the scene from one another. This technique can be difficult for amateur photographers to create.

Photography

One of the most important tools for creating depth is in the images. Framing and composing images with depth in mind can make building for depth a breeze.

But how do you compose photos in this manner? While many opt to hire a professional photographer and just provide instructions for depth, this is not always an option. If you are taking photos yourself for a project think about depth as you shoot with these tips.

Create a visual interest in the foreground. Make sure the photo has a subject and background. Thinking about these as separate parts will help you better frame and create an image.

Change the view. Take a photo from an unexpected angle. This changes the perspective of both the subject and background, adding visual dimension. You can also accomplish this by playing with angles; frame the same image from a comfortable level and with a wider angle.

Take photos in portrait orientation. By changing to a vertical axis, you will frame photos differently.

Think about natural lines and shadows. Sometimes what’s in the photo adds its own sense of depth. Distinct shadows, for example, can make an object come into sharper focus while extending the background.

Image Manipulation

Using photo editing software such as Adobe Photoshop, designers can create added depth in photos with a few simple tricks. This can be a great alternative when working with portraits or other images that were not shot with depth in mind.

The trick is this: With the subject in the foreground, add a blur to the background, while leaving the subject alone. (In Photoshop, a Gaussian blur adjusted to a radius of 5.0 works wonders.)
This simple trick adds focus to the subject in an image while creating a sense of depth by making the background less of a visual priority.

Shadow Effects

Shadows are one of the easiest and most natural ways to create a sense of depth and place for objects and images. Placement, darkness and the shape of shadows can imply very specific meanings. They key for using shadows is for them to look natural.

The best shadows are subtle and follow patterns of light. Make sure shadows mirror the feel of images they accompany. If the first thing a user sees is the shadow, then it probably does not work.

Rounded shadows that rest below objects can create a floating, 3D-style effect. This is a common technique for buttons and smaller user interface elements. Shape-specific shadows in front of objects can make a flat item look like it is standing up, such as those on the Guest’d site. (Did you even notice the shadow before they were mentioned?) Warped shadows – those that do not mirror the shape of the image they relate to – can make an item appear to have another shape, or lift off a background image.

Shadows can also add a touch of realism to an object or item. A shadow behind a person can help lift him off the background, bringing the subject to the forefront of the image. This is a common technique but it is very important that shadows fall opposite of light sources in the image so that the end result appears natural and unforced.

Illustrations and Other Images

The same concept and manipulations that work on photographs also work for illustrations and other images used in design projects. The difference is that you often have to create these effects yourself.

The dramatic shadow used above is a great example of this. The light and dark parts of the background relate specifically to the image, making it “move forward” from the rest of the site.

Conclusion

Depth is a great tool for creating a sense of realism in design projects. It can connect users to what they are viewing on the screen, making them feel like more of a part of the scene.

Even images, from photographs to vector-based user interface elements, that lack true depth can be manipulated to add a sense of having a third dimension. Layering, object orientation and shadows are some of the best tools for creating extra depth.

As a designer, this is one of the most exciting parts of a new year. Here we are, trying to figure out what’s going to be big for design trends in 2013. It absolutely makes sense. Web designers have to really be up on all the new trends to be relevant and abreast of what’s next after that trend.

It’s really what makes design fun. But too many experts have called for trends that aren’t even really trends or ones that don’t shock the world. Of course responsive design is going to be big this year — it was big last year! And of course we’re going to continue designing with grids. That’s basic design!

This time around, I wanted to look into some trends that seem to be growing. Ones that we’ve played around with, but now we’re going to really get into them this year. So, let’s jump right in.

More White/Negative Space

We’re going super clean. We loved minimalism and the clean look last year. We used it with anything from our logos to our business cards and to our websites. This year I think we’re going to ramp it up a bit by calling for more white space.

Negative space is one of those artistic guidelines that pretty much says every inch of the canvas doesn’t have to be filled with stuff. This negative space in web design is excellent because we are transitioning to an era where we want and desire less fluff. Many times when we visit websites we know exactly what we want, or we want to be able to figure out exactly what’s in front of us without doing much searching.

Tip: Don’t think about how you can design to create space. Create as you normally would and see what you can remove to get the look you’re going for.

Peach and Salmon

We go through a lot of popular colors in web design. One of the most popular is blue. From corporate to recreational sites, a shade of blue will probably get you a nice website. Even for a while (and maybe still), we loved dark themed websites. The point is, for many of the colors, you can reference a point in time.

The color for this year is this fleshy, pinky, salmony color. I’m calling it now. It’s a color that goes well with almost any other color and any other neutral. It’s calming without being too boring and predictable. It’s charming without being too bold and loud. This is a great color that I think many people will (and should) at least experiment with this year.

Tip: Looking for some hex color codes to start? Try #F97743 and #F38268.

Bigger is Better

Right now, we are designing not just with a computer monitor in mind, but with tablets and mobile phones in mind as well. Websites need to be visible in the palm of our hands. Many designers have met this task by upping the size of text and images in web design. But they haven’t been too ridiculous or gone overboard.

Now, is the time to go overboard. We’ve been designing as we normally would, but everything has been a couple of pixels taller and wider. As a matter of fact, we’ve taken many of our ideas from print and implemented them on screen. It’s time to maybe mix the two or get back to the web.

Going super big requires a lot of attention and is in the same vein as going super clean in 2013. If it takes up more space and draws my attention, I’m going to look there first. Perhaps this is another way to rid ourselves of the fluff that we endure daily.

Tip: We already have tried full-size images, so try huge fonts around size 64px and 72px. Use something like FitText so your fonts can scale down for different screen sizes.

Moving Images

Advances in technology are making it easier and easier to add moving images and video to our web designs without taking a ton of space. Because of that, we can look forward to that becoming a stale in websites everywhere. Who doesn’t want to feel like they’re looking at websites from Hogwarts?

It adds a bit of fascination to your typical images or even your typical slider. Movement is eye-catching and now we don’t have to do that solely with static images. We’re able to use dynamic images and that busts the creative playing field wide open. This is one of the trends I’m looking forward to the most. Who’s going to use this the best?

Tip: Check out some tutorials and such that talk about HTML5 video to get started.

No more stock photography

People don’t want the glamour shots any more. They want a more realistic view of what a product portrays or represents. It’s time out for the days of dry stock photos and product photos with bland white backgrounds. People want personality. People want the story.

Websites are made to create and maintain the relationships you have with your audience. The idea is to make things real for your group of consumers and that’s not always a bunch of flavorless photos and glamour shots.

While most web designers don’t have a ton of control over photography, it remains that it’s completely important that the personality of a brand is portrayed online. I’m looking forward to seeing more websites that aren’t afraid to be individualistic by using imagery that’s real to them and creates a story through composition.

Tip: You may invest in a camera or link up with a photographer to get the right imagery for the web design. It makes for quite an up-sale.

Conclusion

Web design is much like fashion design where what’s in one day could be totally played by the end of the week. The beauty is being apart of these trends and trying out new things to help inspire innovation for the future.

It’s very rare that we come across a piece of software that feels alive. Most web sites and apps you use are functional and stoic. If you are lucky you will find something that you think is pretty. But when you find something that has energy and character it becomes special. This achievement comes from a culmination of things, but life in software comes almost entirely from motion and animation.

Classic Examples

Everything about this app feels organic and upbeat. Pay particular attention to the compose button interaction.

For better or for worse, Windows 8 has a lot of energy. They created a new visual style for Microsoft that is a combination of flat minimal visual design and responsive motion design. Take note of all the view transitions.

This one is a little more subtle. As the video scrolls down notice how the new posts animate in. Also, see the pull to refresh. It is something that is fun and playful which echoes Google’s brand.

I love this app. These guys did a great job using animation to demonstrate modality shifts. Pay attention to the pop up windows and pop over menus. The animations draw attention and make it easier for the user to imagine the dimensional model.

This app is a game that uses a lot of little animations to make it feel fun and lightweight. It uses animation for emphasis / call outs and animation for delight (see the end).

When looking at all of these it is important to notice that not very much is happening! There aren’t a lot of elements flying across your screen like an arcade game. The animations are subtle, complex, and natural. The right combination of these can make a UI feel responsive and alive. Animation is a tool best used subtly. Think of it as a new color that can’t be used conventionally. This new color is the loudest and brightest color ever made. Let’s learn how and when to use it.

Break it down

Like all design you have to learn how be able to look at animations and understand what elements make them up. With animation you have to consider direction, timing, and easing. Let’s look at Currently as an example. The animation when Currently loads is pretty complex. There are six things moving, three different animations, three different directions, and each day of the week is slightly more delayed than the previous one.

Direction

There is a classic design principle called focal point. It is the convergence of energy in the piece; the loudest point. This is most easily abused with animation. When things are flying around your screen it is pretty easy to overwhelm the user. When picking animation directions you have to retain a focal point. Where do you want people to look? With Currently, watch the two rows. The time is moving down towards the center, and the weather is moving up. The direction of these animations create focus and energy in the center of the screen, where the user is meant to look.

Timing

When you press a physical button on your computer or in your car, the button is depressed at the same rate that you pressed it. In software, this isn’t something we can recreate. However, we can fake it. The timing on a button is important because you don’t want the button to suddenly look different, but you also don’t want it to be so slow that it feels unrealistic. There is a magic number somewhere between 80ms and 200ms here. With other types of animation it really depends on the context and the distance. If you have no idea where to start, try 200ms. It is a pretty magical number.

Easing

Without opening a calculus book, easing is basically how fast your element is moving at any time during its journey from point A to point B. Here is a great list of easing function graphs. When trying to design life into your web site or app you have to remember how life works. When you are driving a car and you want to go from 0 to 60, you start at 0 and accelerate all the way up 60, getting faster and faster over time. It is the same when slowing down. You don’t instantly go from 0 to 60. So, when picking your easing function you want one that has clear acceleration and deceleration. This creates a natural feeling. On the chart, look at Ease-In-Out functions to start.

Start Building

Let’s make something. A great way to play with animations is to use CSS animations for a web site. They are very simple to understand, easy to customize, and they perform pretty well in modern browsers, especially if you enable hardware acceleration. I put together a jsFiddle using Dan Eden’s Animate.css, and jQuery.

Here is an example of an animation that happens on load. Click on the little play button to run the animation. It can be found at the top right of the embedded jsFiddle.

Here is an interactive example.

Animation is hard

Adding life to code is not easy. It is far from the territory of logical UX design and closer to the door step of art. Like anything it requires practice, adoration, and consumption. Look for movement and rhythm in movies, art (dance), and hopefully other websites and apps. Add animations to your website, then remove 90% of them. You have to be an expert in reduction and focus. Remember, animation is the loudest and brightest color you can possibly use. Use it strategically for emphasis or delight, and use it sparingly.

Read this great Quora discussion on the tools that designers can use.

Final Inspiration

Here is an awesome video of some non-functional UI design. It is the UI in Iron Man’s suit in the movie The Avengers. Notice all the complex motion and floating elements and see how they still seem collected and actionable. Have fun.

You see them almost every day – websites that make you say “I wish I had thought of that!” Designers are doing a great job coming up with and putting together a variety of highly-designed websites that feel fresh and original while maintaining usability.

Odd shapes, color combinations and new navigation tools can make some of the most interesting and engaging websites.

They can also be quite difficult to imagine and execute.

But you never know what might start a new trend, generate a ton of clicks or just “work” in a way you could not imagine. For designers and developers, the most important thing to remember is that web design must be usable to be effective, no matter how great it looks. By combining creative thought in the design process and careful analysis of key features, great and new site concepts are going live every day.

Think Outside the Box

The first question is why?

Why do we always draw rectangular boxes when sketching out websites? Why is the type “always” a certain color or font? Why are photos of the same perfect 4×6 aspect ratio?

The next question is how can we do it differently?

More and more websites are answering that second question with interesting and creative layout choices, from using rounded shapes, to dramatic photography, to colors that might not seem obvious to new ways to navigate and scroll.

Basic Concepts

What’s key when developing new concepts that really break the mold is to remember the basics. No matter how cool a site looks it must be readable and usable. Otherwise people won’t move through the site and interact with content.

When designing, always remember to think about your audience and how they think … and use the web. If your audience is super-tech savvy, navigation or scroll features that work a little unconventionally may impress. But if your audience is made of computer novices, you should probably stick to common navigational tools.

Your visitors came to your site for a reason. That reason needs to be apparent when they get to the site. Make sure your design communicates what your site is supposed to be used for – information, fun, e-commerce, etc.

Don’t try to do too much. Pick an interesting concept and go with it, but don’t try too many things at once. Remember, users won’t stick around if there are too many things happening on your site. Find one fun and unique way to interact with them.

5 Sites Putting it All Together

So what makes it all work together? A great combination of creativity, readability and usability. We look at a few sites doing things that are new, unexpected and quite brilliant.

Lowdi does a great job creating visual interest with shapes that are outside of the norm. Not only does each box have some type of rounded corners (or inversely rounded corners) the colored frames resemble the shape of the product the company is selling. Even when you are not looking at the Lowdi box on the screen, you are reminded of it. With a scroll, the box (which is a speaker system) “talks” to you using a series of pop-up thought bubbles. The concept is fun, fresh and super-engaging.

Steve Vorass is taking advantage of the “hidden navigation” trend with a site that showcases a variety of his projects. The portfolio site uses a simple Work, Profile, Contact navigation at the top of the screen but the images are also nav tools. Each different type of image takes you to a different project. What’s more important is that each image tells you where a click will take you when you hover over it. The overall site design has a simple look and the unexpected animations mirror that as well.

Caava Design is both striking in image selection and with interesting shapes but what’s more creative is the scroll. The entire site is built in the form of a timeline. Each image “bubble” takes you to another level of information. What makes it special is you don’t even have to see the timeline to navigate and understand the site. It is perfectly organized and functional.

Joint labels itself as a creative design business. And its site exemplifies that. Each page give you clickable choices to navigate. The scheme is simple, using just grays and whites (except for the blogroll which includes color photos) but the hover effects and readability are fantastic. It makes you want to keep clicking as you choose how to look at the site.

Ballantyne uses a combination of great photography, interesting shapes and cool scroll effects to keep you engaged. The fashion retailer’s site showcases a great selection of products while providing interesting company facts and information. Each scroll works by moving the three photo panels up and down to show new images. The scroll lasts for quite a few screens and you can’t help keep looking at what comes next. Plus, the cool slanted-edge shapes make the flow even more seamless and interesting.

Conclusion

For years, I have heard designers say “there are no more original ideas.” That is just crazy. Every day, new technology and new devices are changing the way we think about web design and the design process. Brainstorm to get outside your comfort zone and then bring your concept back to reality by making sure it contains all the features that will make it usable.

And remember, some “crazy” concepts might fail. That’s OK too. Analyze, learn and move on to the next great idea.

The web development community has come up with endless solutions, best practices, and tools for coding a responsive design with ease. While the vast majority of websites can be made responsive now, it’s time to push the envelope further. It’s easy to pay attention to great coding best practices, but sometimes the best design practices for various screen sizes get pushed aside.

Many resources on responsive design cover the basics — make use of excess space on desktop, make things simpler on mobile. Yet, many don’t go beyond this basic knowledge. With various screen sizes coming out each day, and even the big players like Apple switching things up with the new iPad mini, we need to evolve the way we think about design and the user experience as well.

Desktop

We see most of the attention for user interface principles when it comes to desktop websites. With extra space on-screen and the likelihood that a user is using a keyboard and mouse/touchpad, there are far more design possibilities while still maintaining a positive user experience. Yet, we must still abide by some guidelines, and if planning for a responsive design in the future, we can make sure that design can flow seamlessly between different screen sizes.

Points to Consider

With the possibilities of desktop design, we can get away with, and take advantage of:

• Extensive grid-like layouts, which allow the user to easily scan for content they may be interested in or tying to find.
• Horizontal navigation, sub-menus, mega-dropdowns, and more, all for easy-to-filter content.
• More pages for a more interactive and extensive experience on a desktop site.
• Places for advertisements, side content, additional blurbs, or call to action elements.
• Clickable areas that can help guide the user, like breadcrumbs, which would not otherwise be usable on smaller touchscreens.
• Access to more technology, including those that could influence design and the user experience.
• Fat footers, asides, and much more.

Websites should take advantage of the extra capabilities of a desktop site to give the users more options. Users should be tempted to come to a desktop version of a site after checking it out on mobile or a tablet, giving the user more possibilities to interact and gain from the website.

From a user experience perspective, be sure to still create desktop designs that are flexible, and down to a particular size, are still easily usable with keyboards and traditional desktop usage. Netbooks, while not as common as they used to be, are still around, and users will try to interact with a website just as they would with a typical computer – keyboard, mouse, touchscreen-less, and all – only smaller.

Tablets

Tablets are becoming more popular everyday, and as prices go down and more brands come about, there is a strong possibility that their popularity will only continue to grow. Many do not believe this is a short-lived trend, but a new permanent way of interacting with the web. Because of this, we must learn to not treat websites optimized for tablets as “second best” to their desktop counterparts, but instead, as a separate and equally important web experience for users.

One of the biggest features of tablets that we must accommodate for is that fact that they are touchscreen. This requires a whole new approach to the way we design, because it is an entire to approach to how users interact with websites. When tablets first came about, many users only went to view websites in a static way, and sacrificed the same amount of interaction they could get with a desktop. While it still may make more sense to provide full interaction only on desktop sites, we now have a responsibility to design user experiences where a user can interact with websites on tablets more easily, because that’s what they’ll be expecting.

Points to Consider

So how to we accomplish this goal? A new trend for responsive design that’s coming about is making responsive designs more app-like in interface, design, as well as functionality. When designing for tablets, take interface design inspiration from native tablet applications. Many of the features include:

• Larger touch areas, especially for navigation. Without the precision of a mouse or touchpad, larger areas that one can touch with a finger are essential.
• Tabs, accordions, and more can be particularly helpful in touchscreen design, and to save space on the smaller screen area. Don’t just think of how one would use these features on a desktop, such as in a sidebar area, but rather for interaction with the entire website. For example, allow users to move between entire sections of the website with the ease of tabs, much like they would on an app.
• Tablet design used to mean simply taking the same, or very similar layout of the desktop site, and squishing it together so it fits on the screen. This isn’t the way to go though. While you can easily do this and still make a website look presentable, you could be sacrificing far too much in usability.
• Use buttons or button-like design for simple actions, main links, etc.
• Additional button-like navigation, such as back and forward buttons can be useful for those navigating with a touchscreen, and especially with a device that may have a less than user-friendly browser. (Don’t assume your user has the exact same brand of tablet you have.)
• Designs should be optimized for retina display. While it’s only iPads that have retina display for tablets at this point, we can expect to see the technology grow. Nonetheless, with the majority of tablet users being iPad users, this should be taken into consideration anyway.

Smartphones, Mobile

Saving space is the most important thing to consider here, as well as creating a user experience that isn’t sacrificed because of that lack of space. When designing for mobile, like with any user experience planning, it’s important to know why people visit websites on the devices they do. While a desktop user may be going to a website for a more extensive search and interactivity, a mobile user tends to just want content, or do very simple actions — and quickly too.

Points to Consider

Along with the same touchscreen considerations as tablets (think larger touchable buttons/icons, app-like design), mobile can benefit from some other useful design patterns:

• Keep interaction in its simplest form. Cut out any extra capabilities, and allow the user to focus on the most important actions.
• For website with excessive content, make it easy to sort through and filter. Users don’t always like typing in search items on mobile, and while a search form can be helpful, also offer useful categories or a search filter sort of navigation.
• Use minimal design, enough to brand the website but not take over the usability of the website.
• Bigger fonts and better type display. Don’t force the average user to zoom in!
• Add text summaries to bigger pieces of content to save space, allowing the user to easily ignore content they don’t want.
• Get creative with tabs, accordions, navigation, and other forms of space saving methods.
• Make sure popups, notifications, ads, and more are either non-existent on mobile, or user-friendly to deal with if they are absolutely needed.
• If possible, make sure there are a minimal number of pages on a mobile site. This is not always possible depending on the type of website, but if it is, use javascript to swap out content (e.x. tabs) to avoid lengthy page loads.

Showcase

Conclusion

It is estimated that tablet and mobile use will outweigh desktop use by as early as 2015. Considering this, we need to not only learn the best practices for coding responsive design, but also designing for them. It can be helpful to treat each experience as a separate design concept, while still maintaining unity in design among the three different stages: desktop, tablet, and mobile. Always remember to keep images retina-friendly, in particular for mobile and tablet use, touch-friendly, and content display appropriate where needed. The biggest problem to tackle among various screen sizes, though, will be organizing content and it’s relative navigation for the best user experience possible.

Do you have any more tips when designing the differences for each of these scenarios? How does your design easily transfer between various screen sizes, while still maintaining best practices for each?

Credits: Printable iPhone 5 Template used in main image by Matthew Stephens.

Empty states are places in apps that have no content or data. They are empty. A blank page. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data. It’s common for empty states to be dealt with by developers as they are often caused by exceptions (such as no internet connection). They often write the copy and as a result it can be a little difficult to understand or it is left with the basic styles. Not the best combination. It should be logged as something that needs designing but that doesn’t always happen.

There are three mains types of empty states. First use, User cleared and Errors (e.g. no internet connection)

1. First use

First impressions are vital. From meeting new people to learning how to use an app, they help users predict what that person (or in this case applications) will be like by comparing them to an existing mental model. Something they do have experience with. Sometimes there is no basis for comparison and users are a blank canvas, waiting to be impressed or disappointed. A bad first impression is very difficult to overcome.

When someone signs up for an app, the chances are high that they know what it does. It may not be clear to them *how* it does it though. When you sign up or log in for the first time, there is no data. It is the perfect opportunity to provide some careful hand holding to help users get the best possible experience. If the lack of data is out of their control then tell them; put them at ease and show that your app has some personality. Have a look at the way Buffer,  Timehop and Dropbox do this. Buffer uses the same technique on their desktop site showing that it doesn’t matter what platform or screen size you’re on.

2. User Cleared

Consider the inbox. Love it or hate it, most of the time it’s full. Some people have hundreds of unread emails. Some people have only a handful. Either way everyone is on the quest for ‘Inbox Zero’ whether they know it or not. This can be quite a monumental task and as such should be rewarded with more than just your relief.

Take a look at how Sparrow, Gmail and the default iOS Mail app handle the empty inbox.

Sparrow shows an icon representing a traditional inbox and the phrase ‘Inbox Zero’. From an experience point of view this is quite nice. It’s clean, minimal and in keeping with the rest of the app. After all, everyone wants to achieve inbox zero.

Gmail goes a step further by injecting some character into the app with the smiling sun. By anthropomorphising the app, users can imbue the app with human emotions and connect with it on a deeper level as a result. The distinction makes it clear whether something is good, bad, wrong or right with the way they use the app. By looking at Sparrow, can you tell that getting to inbox zero is a good thing?

Mail has no feedback of any kind leading users to wonder whether they have mail and there is a connection issue or other error preventing them from seeing their mail. The fact that users may question that adds to the cognitive load, to the detriment of their experience.

3. Errors

Sometimes the people will experience an empty state as part of an error. Most commonly due to lack of an internet connection. This is another opportunity to make people aware that you know this can happen by having something more than just some ugly error text. It puts them at ease knowing that it’s probably not something they’ve done as you had spent time designing something for that specific case.

Look at the way Chrome and Opera Mini handle this compared to Safari.

Chrome has a huge amount of text that only tech-minded people will understand let alone bother to read. Opera Mini has something that resembles a modal window and nothing else. The language is more succinct than Chrome but nowhere near as easy to understand as Safari.

Safari on the other hand has an almost beautiful page explaining the issue in few words but making it even a much more pleasant experience. Which do you think puts people at ease when they get a connection error? One is calming, putting people at ease and one looks broken. While the connection is broken, there’s no need to scare people.

It still matters just as much even if your app isn’t a browser; another GMail example shows how the app handles a connection issue – again showing emotions. You know the app is sad but it doesn’t make you feel like you are responsible for it. Compare that with Instagram and YouTube’s connection-less state. A little underwhelming now that you know what’s possible. The Twitter app doesn’t even tell you that there is a connection error.

Conclusion

It still matters just as much even if your app doesn’t require an internet connection or isn’t an iOS or Android app. The fundamentals are still the same. Pay attention to when users will see nothing, and give them something.

Some companies are starting to pay specific attention to empty states; either as part of UX guidelines or a styleguide. Nokia draws specific attention to designing for empty states and — even though they don’t do a particularly great job, at least it makes it into their guidelines. Baby steps.

The important thing to remember is to make sure you add a layer of delight to your apps. Even the boring ones.

1. Guide people on how to add data when there is none. A good idea is to break out of the conventional layout.
2. Think about the goals people have when using your app. Will they clear data a lot or will it be a rarity? Design a nice surprise accordingly. If it is often, consider having a few designs and randomise them for an extra level of delight.
3. Don’t scare users with errors. Do they make sense to someone who doesn’t know what they’re doing? Make them less daunting and more fun.

Above all, think about who is going to use the app and why. The details are what makes any app great. Delight your users and they will be much more forgiving if you make a mistake later on.

Contribute

If you have any examples of good (or bad) empty states please submit them to http://emptystates.tumblr.com which is serving as an ongoing collection. You can also follow Empty States on Twitter. Here are some good resources for empty states as well as some anti-patterns to avoid:

• Empty States
• Patternify
• Screenshots of Dispair

Everyone wants to create a page that is active and engaging and one of the best tools to achieve those goals is through motion.

With a few great ideas and handy tips, a designer can create a great feel and sense of motion without any video or animation. This type of creative display can be just as active and engaging as video or animated design concepts.
That’s not to say that video and animation aren’t great tools. They are. But they are also not the only tools available to you.

Designers and developers often like still frames because they can load faster, are quick to look at and can be put together without sometimes expensive software or training.

Creating motion will add life to a project and can be as simple as composition, placement of frames, color or editing and effects.

Types of Motion

Direction: Motion can be implied by direction. Arrows, a person looking a certain way or an image that showcases movement, all imply direction and can make a user feel the appropriate action.

Gravity: Use the planet’s natural pull to create vertical motion. Visuals with distinct vertical elements or direction can make you feel like the movement is going up and down. Think about how a person’s hair looks when they jump or how stars can “feel” weightless.

Balance: Objects, groups of frames or images that lack balance can feel like they are falling, creating a very specific type of motion.

Depth: Create “lift” and depth by adding shadows, lighting and other effects to elements. This depth can imply simple actions such as peeling a sticker, lifting a spoon or zipping a jacket.

Composition

The easiest way to create motion in a still image is to take a photo of something moving.

Create motion with directional cues – objects weighted to one part of the image, items with strong directional flow or pointing can accomplish this.

But photos are not the only images that can imply movement.

Art, graphics and even simple shapes can as well. These are actually the most common tools for creating a feeling of movement. Arrows or other elements that point are used in a variety of ways – from navigational elements to functional pieces of the design. The pencil pointing down on Lorenzo Verzini’s landing page is a great example; it is part of the image and encourages you to scroll. (That pencil is used to create a host of directional tips throughout the site.)

Color and shading can also affect how active something appears. Shading and tints can show motion, such as wind in the Aspect Photography photo. Varying between black and white and color images can also contribute to a feeling of movement.

Placement of Frames or Objects

You don’t need a photo to imply movement of direction. Stacking frames, objects or shapes can create motion as well. Typically these elements are placed in such as way as to create balance and harmony, but when grouped without balance, elements can feel loose, chaotic and like they might fall. This disturbing motion can also be accomplished by tilting objects or placing them in an order that is seemingly random.

Imbalance can further be created with varying sizes of frames, off-kilter alignments, or with harsh or dramatic color combinations.

Try combining a series of smaller shapes or objects with a larger one to create an almost elliptical effect, where the smaller objects seem to circle and frame the larger one.

Editing

Sometimes the most important element in creating motion happens in the editing process.

Dramatic cropping, such as unusual shapes, can contribute to a feeling of motion.

Using the rule of thirds to frame photos can also add more flow to an image. By placing the subject of an image in the far left or far right third of a photo, the eye is forced to move across the image to fully understand it. This incurred movement can make the image feel like it contains movement of its own.

Editing images can help you bring out certain parts of an image as well. In the Fatum image, the trail of water behind the surfer is emphasized (maybe more than the surfer himself) to show how fast and forceful the sport can be. By framing the objects in a photo in different ways, the designer can control where the user looks next. Are the subjects all looking in one direction? Either left or right? It is very likely that users will follow that same eye pattern.

When thinking about scrolling images and slideshows, consider how each image pairs with the one before and after it. Where is the action in the frame? Moving that action to different places in each image can create motion as well.

Effects

Three simple effects can really help add movement to more “flat” objects. Shadows, blur and depth immediate add a sense of direction.

Often these effects are used in combination with other “action” tools.

Shadows can look natural, such as long shadows to signify a fading sun, or small almost unnoticeable shadows that help lift an object off the background. The key to using shadows is to look natural. Shadows that are too dark or pronounced can create an almost unnerving effect.

A slightly blurred image can also look more active. Think of capturing someone running in a photo or video. Items should be recognizable through the blur and any action and blur should have the same directional pull to be most effective.

Finally you want to create depth. Action does not happen in the one-dimensional sphere. Objects should appear to be moving toward or away from you to have the most impact. Think about angels when creating objects or frames and remember to add shadows as necessary.

Text

One of the easiest ways to imply motion is to state it.

Pair images and words that carry the same action. Write copy that contains plenty of active verbs that create a sense of motion and action that users can relate to.

Using a combination of showing (with an image) and telling (with related words), you can create a distinct feeling or activity or call to action.

Conclusion

There are a variety of ways to create a sense and feel of motion in projects. Many of the most successful combine a variety of these tools.

Using motion and action will help you create a link between your project and the user. Just as people like to see other people, they also like to see life and action.

Make your projects come alive using techniques that imply and showcase motion, even if nothing on your site actually moves.

What better way to showcase your products than by giving them the stage?

This is the concept behind a growing trend in e-commerce web design – going minimal.

In the past many online stores took the opposite approach to design. Sites were often cluttered with information, fonts and colors were overwhelming, and sites were quite simply “over-designed”.

Now, many sites are ditching models, crazy colors and fonts, and fancy photography for the simplistic style of just showcasing their products. It’s a trend that is taking over much of the web (not just e-commerce) with the emergence of responsive design models. More designers are embracing the trend that simpler can be better, while focusing on readability and usability.

The result is a better experience for online shoppers, with cleaner interfaces, text that is easier to read and interfaces that are simpler, faster and more user-friendly. This trend is about more than just design, it creates a better overall experience.

Think about the success of Apple and its online store. Simple and direct can equal sales. Here, we take a look at the trend, companies that are doing it well and tips for making it work for you.

The Trend

More and more companies are ditching lots of color, models and movement on their websites in favor of more minimal design schemes.

Background patterns are more subtle — or have been ditched completely in favor of a simple black or white background — typography is simple and direct and photography of products is emphasized. But why?

Using a simple design scheme allows a brand to show off its products. There is no guessing what is being sold because everything is clearly defined. This counteracts the movement of the past where brands pushed a certain type of lifestyle or feel over the actual products.

This type of scheme can be less costly. There are no models to pay and with a simple background less pre-design work. A little studio lighting and good photography is all you need to get started.

Focusing less on super-complicated design can give companies more time to focus on the user experience. The top concern for an e-commerce site after all is sales. A site must function well, load quickly and make it easy for customers to find what they want and make a purchase.

E-commerce Design Tips

Aim for dynamic display. Don’t just copy another site. What makes your product unique and special? Play it up in the display.
Your site needs to be readable. Typefaces should be simple and clear. Item numbers, sizes, colors and prices need to be clearly stated and visible. And don’t forget notations for sales or checking out – labeling should be a top priority.

Photography should be direct for product images. Don’t use odd angles or unusual lighting. Shoppers want to see items as clearly as possible. Make sure your photography reflects that. Every photo should be a perfectly accurate representation of the actual item.

Make sure your site is easy to move around and navigate. If it is slow to load or too complicated, shoppers will back away. Include sales and information about your company. Let shoppers know why you are special, unique and deserving of their money.

Every element should be sharp and planned. If an image is subpar or blurry, don’t use it. If a design element works against your product, opt for another technique.

Make shopping easy and fun. The surprise of a site might bring shoppers in but you have to keep them there so if you use a fun gimmick, make subsequent pages easy to navigate and use.

8 Sites Doing it Well

Le Coq Sportif: With a focus on the catalog, you can see a variety of products without having to click a lot. This is great for undecided shoppers and those impulse buyers.

Visual Supply: Super simple format is striking with each product clearly labeled. The red outline around each product as you hover is a nice touch.

Ditto: Glasses made interesting. Because of the simple nature of the product (and site design) it almost feels as if you are comparing items side-by-side.

Neve/Hawk: Simple does not have to be boring. This company uses a great neutral color scheme and simple photography to showcase each item. (They have a pretty dynamic landing page as well.)

Narwhal Co.: The images grab you immediately. They are sharp and colorful. A good, strong image will draw you in every time.

Callaway Golf: Great mood photography sets the tone for each product line, but then products are allowed to stand alone. Images are framed in the same manner from product to product for easy comparison.

MANKINDdog: Great images steal the show. Every product looks spectacular, making the story feel very unique.

Incase: This company does a great job of promotion options without the site feeling cluttered or bulky. Simple photography with buttons that show shoppers what else might be available.

Conclusion

This is a trend that needs to stick around.

Clean design is a great thing. It is even better that companies are really using the concept to showcase what they have to offer.

Putting products against simple backgrounds works well for a number of reasons, but it simply gives the product room to speak for itself and for the consumer to really get a good feel for an item before making a purchase.

2012 was clearly an interesting year design-wise. The responsive boom in web design gave birth to brilliant redesigns; clever layouts emerged with a focus on clear typography and impactful, contrasty colors. Large background images with a mood-setting character and sharp edges on unusual shapes were combined with interesting, yet intuitive interaction. Elegance meets down-to-earthness, that would be the motto I’d pick for a wonderful and exciting year of web design.

We want to share some of our favorite web designs from 2012. It is by no means a complete collection, but just a slice of some of the most impressive designs that stood out. Take a look and get inspired. Maybe it will get you excited about what the next year will bring and give you some ideas on how web design will evolve.

Supereight Studio

Crafting Type

Build 2012

Daniel Hopwood

Philip House

Like There Is No Tomorrow

Hipstamatic

Gin Lane Media

Manos

Buffalo

The Mealings

Elliot Jay Stocks

Fine Thought

Nick Jones

Drexel University

Joint

Sound Creatures Pictoplasma

Nudge

Bad Racket

Banger’s

Formfett

Squarespace

Muriel Labro

Circles

nanozoom

Wicked Palate

Lotta Nieminen

Fear the Grizzly

Pure Pleasure Design

Impero

Rockaway Relief

Startup Giraffe

Matthew Carleton

Mosaic

Andrew Lucas

Offscreen

Flywheel

Anonymous

Cue

We hope you enjoyed this little list and became inspired!

What’s your favorite web design of 2012?