All posts tagged “Purpose”

Interview: Designer Hugo Passos: Discussing the importance of functionality and purpose in furniture creation

Interview: Designer Hugo Passos

By Adam Coghlan

At 32, Hugo Passos is one of London’s most exciting young designers. With a refreshing purity of purpose, he exists slightly outside creative London’s esoteric clique.

“When I was growing up, Portugal was a traditional place……

Continue Reading…


Cool Hunting

Wintervacht Revives Decades-Old Blankets as Wool Coats: Two Amsterdam designers find beauty in materials that have lost their original purpose

Wintervacht Revives Decades-Old Blankets as Wool Coats

Upon a first look at Wintervacht’s brightly hued wool coats—from plum purple and canary yellow to curious patterns that evoke lava lamps or colorful chess boards—it’s almost impossible to believe that in their past life, these coats were old blankets……

Continue Reading…


Cool Hunting

Wintervacht Revives Decades-Old Blankets as Wool Coats: Two Amsterdam designers find beauty in materials that have lost their original purpose

Wintervacht Revives Decades-Old Blankets as Wool Coats


Upon a first look at Wintervacht’s brightly hued wool coats—from plum purple and canary yellow to curious patterns that evoke lava lamps or colorful chess boards—it’s almost impossible to believe that in their past life, these…

Continue Reading…


Cool Hunting

Water Repellent Furoshiki: Traditional Japanese wrapping squares find a new purpose as the flexible alternative to the plastic bag

Water Repellent Furoshiki

They’ve been around for thousands of years, but Furoshiki are making a fresh, practical comeback thanks in part to Japan Store. Once cherished as the precious carrier of royal and holy robes, the Japanese cloth squares were also used as bathmats centuries ago but today, they can be used…

Continue Reading…


Cool Hunting

Building Animated User Interfaces with a Purpose

Direct animations and motion are a big part of the user experience. Not every website will include dynamic animations, but these tend to draw in a crowd of interested users. Stunning visuals can also cross a line and turn into annoying distractions from your content. Building purposeful websites is all about finding a balance between the dynamic elements and static elements in your layout, and how these ultimately affect the user experience.

For this article I’d like to delve into some of the more common trends related to animations in web design. I want to share some ideas for what presents clever, intuitive design skills vs annoyances to the average user. Perspective is everything and you have to cater each project for the largest demographic.

Building animation also doesn’t require lots of complex codes or backend scripts. Many open source JavaScript and even CSS libraries exist for this very reason. As the developer it is up to you to forage around the Internet and see what you can find. I will present a few live examples and strategies you may follow to achieve extraordinary results.

Menus with Flair

Navigation menu designs are a bit more complicated to pair with animation. But when done properly these nav menus provide an exceptional detail onto a website’s interface. You will want to ensure that the speed is quick enough to keep your visitors’ attention, but not so quick as to appear distracting. The links should also be easy to access and provide plenty of space for clicking. All this attention to detail leaves developers focusing more on basic UI than motion effects.

design sensory animated hidden navigation preview

However I will point out one nice example on Design Sensory which uses a top-level menu along with submenu links. As you hover over each top link the new submenu options will appear below. This allows for quick access to all the menu links, and there is plenty of space for clicking. The only problem might be users who have poor vision and must struggle to read the smaller font sizes. But this functionality can obviously be adapted to suit other layouts with larger typography.

cabedge design studio website layout dropdown animation

The Cabedge web design studio has a dropdown animation effect which fits brilliantly into the layout style. In the top ribbon you may hover over any of the links and generate a nice background hover effect. If you stay over the link for 1-2 seconds then a sub-menu will begin to animate and drop downwards. It’s a surprising effect when you are not expecting it! Both pleasing to the eye and useful for displaying extra content to visitors.

Parallax Background Scrolling

Parallax motion is very popular and much different from other styles in web design. Parallax sites often have changing background images to offer the appearance of 3-D motion. Meanwhile the static page elements rarely change and can even stay fixed to follow the user down while scrolling the page.

atlantis world fair parallax website scrolling preview screenshot

One infamous example is the Atlantis World’s Fair website design. As you move down the screen you will notice the main elevator shaft continues along with you. Then content appears to waver in and out of the various page segments. It is a nice use of faux motion because of how the layout is structured. Not every webpage is built for this type of parallax scrolling, but it does add a very nifty design feature.

ios ipad app website layout landing page billiardapps fingerbilliards

One other great example can be found on the iPad app website for the game Fingerbilliards. The background was designed so that it appears like some of the balls are fixed on the screen. And then as you scroll up and down the page, elements come into view like a static layout. I particularly enjoy their design because the motion effects are parodied in the game itself! This works great for marketing because users who find this page will also make the connection and possibly make a purchase for the mobile app.

It is crucial to find a balance between dynamic effects and useful interface functionality. Designing a website with purpose is what adds more credibility to your animations. Parallax scrolling is just one example to define how an entire website layout may be created around motion.

Webpage Transitions

Animated transition effects between content on your page is another purposeful use of dynamic motion. These effects may follow content blocks or sliding panels, but also tooltips or highlight effects switching between elements. This design trend is often used in website tours where you are guiding the user between different page elements.

mustache portfolio website layout custom animation motion designs

This very same type of example may be found on Mustache which uses similar page transitions when moving between content. This is a nice Ajax styled effect and does not require refreshing the whole webpage. Of course, users without JavaScript will be out of luck but any basic fallback method should work in its place.

think motto website studio layout animated page transition

A different type of page transition may be seen on Think Moto which is a German digital design agency. Clicking between links in the menu will slide the entire page out of view to focus on a new set of data. This is important to understand because the navigation will stay fixed as you scroll. This allows users to move between entire page designs without losing access to other links in the menu.

Dynamic Input Forms

Another popular aspect of motion design can be found in webpage forms. More specifically signup forms and contact pages often use motion to signify advanced jQuery Ajax calls. This allows developers to pass frontend information into the backend code without refreshing the page. Consider the MediaFire registration page as one simple example.

MediaFire plans signup form motion interface

But animation effects can also be used on the form elements themselves. Newer CSS3 properties such as box shadows and transitions allow developers to create frontend animation effects right within the browser. This also allows for hidden notification badges or basic form validation – such as e-mail addresses or matching passwords. The goal is to offer a sleek and helpful user interface without interrupting the user’s signup process.

One other really cool input animation effect can be seen in the WordPress Twenty Eleven theme demo. In the top right corner you’ll notice the search bar is much smaller than usual. However once you click the menu will expand open and update the background color to a darker shade of grey. Very purposeful to save space when not needed but also allows users to interact with the search bar dynamically.

Final Thoughts

I don’t want to encourage web designers to push for motion effects in every project. There are some design niches which simply do not require a whole lot of animation. But this isn’t to say that you shouldn’t try out new ideas, test the waters and see how your users respond. The beauty of web design is learning from common mistakes or finding happy coincidences by them.

I hope this article may provide some ideas for developers and user experience designers interested in website motion. Animated elements are quick to draw a user’s attention and may often provide some type of functionality into the layout. We have covered a lot of great ideas which should get you started on the right track. But if we have missed any topics or resources feel free to share with us in the post discussion area.


Speckyboy Design Magazine

Breaking Design Principles on Purpose

screenshot

Rules. They keep our designs clean, consistent, aligned, and focused. The core principles upon which good design is built are absolutely essential to the education of any designer.

The great thing about design rules though is that they can and should be broken, granted that you know what you’re doing. Read on to see some examples of effectively breaking design principles in order to improve a project.

Know the Rules Before You Break Them

Like many other professions and industries, the world of web professionals subscribe to a set of fundamental requirements that all members of the community should have a solid grasp on. We tend to refer to these fundamentals as the principles of design and any design worth its salt will display a certain level of aptitude in these principles.

Some designers acquire their grasp on design principles through formal training or education while others achieve the same level of competency through practice and general understanding. Neither method is right or wrong but if you are a high level designer in any function, you exercise solid principles of design, whether you know it or not.

There are a lot of aspects to web design and having control over these fundamentals isn’t the only requirement to finding success in the field. However, without them we are certainly taking the hard road to success. But, like any good set of rules, the principles of web design are on occasion better off when bent or broken entirely.

What are Good Design Principles?

So just what are the principles of design? Well, this is a topic that has been covered quite a bit and any amount of research (google searching) will reveal that there is no single correct answer.

Different agencies, companies and professionals may all construct lists of their personal design principles. While a lot of these individual sets of principles may contain variations, there is a significant and noticeable overlap. Jeremy Keith has done us the favor of putting together a great collection of design principles to browse through.

A quick look through these resources will reveal quite a bit of consistency between different perspectives. Any reasonable set of these principles will include points about proper spacing or use of white space, focusing on the users, enforcing consistency, keeping your design as simple as possible, making it useful, and avoiding redundancy, among others. All of these are good things. They have been defined as crucial to the design process because they are effective tools for building a successful product or service online.

If a solid set of design principles is so crucial to our designer toolbox, then why would I suggest that breaking them might be a good idea? Well, for a few reasons really.

First off, exploring outside the boundaries of good design is a great exercise in exploring the boundaries of right and wrong, leading to a better understanding of what makes one choice better than another. But the reason we are really interested in is that there are use cases for breaking the rules that improve the experience for the user.

Breaking the Rules for Benefit

I think it’s important to state that I have never found a case where creating a site against all principles of good design has turned out to be a remotely good idea. The purpose of this article, and the examples contained within it, is to demonstrate how flipping the switch on one or two standard principles can result in a benefit to your users. Understanding just where you want to step over the line and how will depend on the project at hand but I am hopeful that a few examples will get the ball rolling and help you think about ways this can be helpful to you.

Double-check Popups

Let’s start this party off with a little design faux pas that we should all be pretty familiar with. I’m talking about the eye-roll inducing “Are you sure…” popup message. We see this pattern in all kinds of contexts, from web sites, to games and all kinds of software interfaces. We run into this so often I’m starting to expect my front door to ask me if I’m sure I really want to close it.

Double Check Popup

I’m tossing you a softball here. We know this design pattern exists to keep us from accidently closing that file that we forgot we made changes to or perhaps didn’t save. Even if we click “no” 99% of the time that 1% could be a reminder to save a file you spent hours working on or avoid making a decision that was initiated on accident. We’ve grown quite used to this behavior so it might be hard to consider it an exercise in breaking the principles of design but if we stop and think about it, it becomes quite clear that this is an example of breaking the rules for the benefit of users.  

Having a message popup on the screen after a user takes an action is a redundant system that generates extra clicks and prevents the user from accomplishing a task in the quickest and most simple way. Indeed, all of these things are in direct violation of good principles of design, yet the pattern remains and remains effective. Until the humans that use our designs prove to be flawless, breaking the rules in this way will remain a good idea.

Not So Simple

How about something less clear cut and common than the first example? Let’s dig into simplicity. No shortage of design documents point out simplicity as a core component of a good design and a primary task for a designer. Indeed, we spend a lot of time and effort figuring out how to take complex behaviors and design them in a way that visitors can consume them in a simple manner. There are plenty of examples of simplicity in action but finding effective examples of the simplicity rule reversed doesn’t prove to be much of a challenge either.

Pinterest
HootSuite

You don’t have to look past some of your favorite apps or websites to see a high level of complexity put into play as a design strategy. What makes complexity the preference for a particular design? Well our two examples have some commonalities and some differences.

First, both designs strive to present the user with as much information as possible. Second, in both instances the experience is designed to lack a pre-determined focus. Instead of delivering primary or secondary content to the user everything is presented on an even scale and the user can scan the information and key in on the content that naturally draws the most interest.

This actually works quite well for sites like Pinterest or Twitter feed applications because it removes manual interactions. Instead of clicking buttons to filter the information in a finite number of ways the user can rely on their own brain to pick out the information most important to them at the time. This allows the experience to be infinitely personal and self-driven.

If the Shoe Fitts’

Well what about something like Fitt’s Law? Certainly breaking a law will always lead to a negative outcome! Fitt’s law argues that reducing space between actions as a part of our design improves usability. But is it so hard to imagine a scenario where two different actions, both an equally probable choice for our user, would lead to two completely different behaviors?

Take, for example, the experience of checking out on your favorite online store. Often times, when we add an item to our shopping cart or hit a checkout button we are taken to a screen that reviews the items we would like to purchase and gives us several options, allowing us to choose how to proceed from here. Some popular options include proceeding with the purchase, continuing the shopping spree, or clearing out or editing your choices. All of these actions relate to the behavior of you shopping so it makes sense they would populate a common area.

Dolce and Gabbana

Dolce and Gabbana’s checkout process follows Fitt’s Law. Our users might want to go back to shopping or go proceed with their order, placing the options together as they have assures that either decision can be made equally quickly. The problem with this pattern is similar to our first example. If the user clicks the wrong button one time out of a hundred you’ve cost more time and caused more frustration than you did with the 99 quick correct clicks.

Godiva

On the Godiva checkout screen, we can see the buttons more clearly defined. It’s going to take you a little bit longer to get to one depending on where your mouse (or finger) is but that’s just the point. There are times when we want to break our users out of that “Don’t make me think” mindset that we work so hard to establish. On occasion we need them to think about their decision, and the process of finding and getting to the button that you want to click will force the user to recognize just what that button is going to do.

Moderation is Key

Perhaps closing with a website devoted to chocolate was more than coincidence. The key to operating effectively outside the lines of good design principles is to use moderation. While it might make sense to separate some buttons it likely won’t make sense to hide one of them citing a need to make your users think a little bit. Along the same lines you’ll most certainly find that this approach of breaking the rules is incorrect in most situations.

It is only in our pursuit of a deep understanding of design that we seek out these scenarios that live in the minority. If you are comfortable with your level of expertise with the principles of design this is a great exercise. On the other hand if you are on the beginning end of being a designer this game of devil’s advocate can be a wonderful learning tool.

Either way, it’s in our best interest to understand design principles as rules rather than dogmas. When the content drives the design and the user comes first we shouldn’t let rules get in the way of delivering the best design. Have you had the opportunity to break some design principles for the betterment of a project? If so what were the results?

Design Shack