From a motion design perspective, Facebook.com is phenomenally static. It’s purposefully dumbed down for the broadest levels of compatibility and user comfort. Facebook’s iOS apps, on the other hand, are fluid. They prioritize the design of motion; they feel like living, breathing apps.
This article serves to demonstrate that this dichotomy does not need to exist; websites can benefit from the same level of interactive and performant motion design found on mobile apps.
Before diving into examples, let’s first address why motion design is so beneficial:
Improved feedback loops
As a UI and UX designer, you should use patterns as much as possible since users will be subconsciously looking for them. Responsive motion patterns, in particular, are the key to pleasurable interactions: When a button has been clicked, do you feel that it has reacted to the pressure of your mouse? When a file has been saved, do you get the strong sense that your data has truly been transferred and stored?
Seamless content transitions
Motion design allows you to avoid contextual breaks; modals fading in and out (as opposed to switching pages entirely) are a popular example of this.
Filled dead spots
When users are performing an unengaging task on your page, you can raise their level of arousal through sound, colors, and movement. Diverting a user’s attention is a great way to make a pot boil faster.
Aesthetic flourishes
For the same aesthetic reasons that UI designers spend hours perfecting their pages’ color and font combinations, motion designers perfect their animations’ transition and easing combinations: Refined products simply feel superior.
In the examples below, we’ll be using Velocity.js1 — a popular animation engine that drastically improves the speed of UI animation. (Velocity.js behaves identically to jQuery’s $.animate() function, while outperforming both jQuery animation and CSS animation libraries.) In particular, this article focuses on Velocity.js’ UI pack2, which allows you to quickly inject motion design into your pages. You may optionally watch this article’s accompanying codecast3 (5 minutes) for a preview of what we’ll cover.
UI Pack Overview
After including the UI pack (only 1.8 KB ZIP’ed) on your page, you’ll gain access to UI effects that are organized into two categories:
Callouts
Callouts are effects that call attention to an element in order to heighten user experience, such as shaking an element to indicate an input error, flashing an element to indicate that something has changed on the page, or bouncing an element to indicate that a message awaits the user.
Transitions are effects that cause an element to appear in or out of view. Every transition is associated with either an “in” or “out” direction. The value of transitions is in revealing and hiding content in a way that’s visually richer than merely animating an element’s opacity. Here’s slideUpIn, a transition that incorporates a subtle slide effect:
If you’ve paid attention to the evolution of iOS’ UI motion design, you’ll have noticed that over a dozen transition effects help make iOS’ interface pleasurable to interact with. This diversity of transitions is what Velocity.js’ UI pack brings to everyday websites.
Note that, thanks to Velocity.js’ performance, as well as the optimizations afforded by the UI pack, all of the pack’s effects are 100% ready for large-scale production use.
Let’s dive into some simple code examples.
Using The UI Pack
Callouts and transitions are referenced via Velocity’s first parameter: Pass in an effect’s name instead of passing in a standard property map. For comparison, here’s the syntax of a normal Velocity.js call, which behaves identically to jQuery’s $.animate():
$elements.velocity({ opacity: 0.5 });
In contrast, below are Velocity.js calls using effects from the UI pack:
/* Shake an element. */
$elements.velocity("callout.shake");
/* Transition an element into view using slideUp. */
$elements.velocity("transition.slideUpIn");
Just as with normal Velocity.js calls, UI effects may be chained onto each other and may take options:
/* Call the shake effect with a 2000ms duration, then slide the elements out of view. */
$elements
.velocity("callout.shake", 2000)
.velocity("transition.slideDownOut");
Effects from the UI pack optionally take three unique options: stagger, drag and backwards.
Stagger
Specify stagger in milliseconds to successively delay the animation of each element in a set by the specified amount. (Setting a stagger value prevents elements from animating in parallel, which tends to lack elegance.)
/* Animate elements into view with intermittent delays of 250ms. */
$divs.velocity("transition.slideLeftIn", { stagger: 250 });
Set drag to true to successively increase the animation duration of each element in a set. The last element will animate with a duration equal to the animation’s original value, whereas the elements prior to the last will have their duration values gradually approach the original value.
The result is a cross-element easing effect. (If you’ve ever been wowed by motion typography demos made with After Effects, drag is a key yet subtle component behind their visual richness.)
Set backwards to true to animate starting with the last element in a set. This option is ideal for an effect that transitions elements out of view, because the backwards option mirrors the behavior of elements transitioning into view (which, by default, animate in a forward direction, from the first element to the last).
Together, these three options bring the power of motion design suites to the Web. When used sparingly, the results are beautiful — so long as you design with user experience in mind:
Designing For UX
Spicing up a page with motion design can escalate quickly19. Here are a few considerations to keep in mind:
Make them finish quickly
When applying transitions, developers often make the mistake of letting them run too long, causing users to wait needlessly. Never let UI flourishes slow down the apparent speed of your page. If you have a lot of content fading in, keep the animation’s total duration short.
Use an appropriate effect
For example, don’t use a playful bounce effect on a page that features formal content.
Use them sparingly
Having transitions in every corner of your page is overkill.
Avoid extreme repetition
Avoid transitions of medium-to-long duration in places where they’ll be repeatedly triggered.
Experiment
Find the right duration, stagger, drag and backwards combinations that will produce the right fit for each of your individual animations.
Benefits Of JavaScript-Based Animation
Let’s step back and contextualize why powering these types of UI transitions through JavaScript is a good idea in the first place. After all, up until now, these effects have been most commonly applied using pre-made CSS classes from libraries such as Animate.css20:
Because the UI pack’s effects behave identically to standard animation calls in Velocity.js, they can be chained and take options. (Doing this with raw CSS can be cumbersome.)
The effects have all been optimized for performance (minimal DOM interaction).
Elements animated via the UI pack automatically switch to display: none after transitioning out, and back to display: block or inline before transitioning in. (Doing this via CSS requires multiple calls and messy code.)
Velocity.js doesn’t leave your text blurry. If you’ve applied transition effects via CSS before, then you’ll know that text can look fuzzy when you’re done animating and haven’t removed the associated class. This doesn’t happen in Velocity.js because its underlying engine completely clears unneeded transformation effects upon completion of an animation.
The effects work everywhere but Internet Explorer 8, where they gracefully fall back to simply fading in and out.
With all of these benefits, including the effects’ great performance across all browsers and devices (including older mobile devices), you have no excuse to not start experimenting with motion design on your sites. Enjoy!
The following collection is dedicated to the talented, digital artists who are able to transform Photoshop into a canvas and a brush. These people are able to create masterpieces of art from nothing but their own fantasy. You’ll find brave warriors, bulky monsters, starships, robots and mixes of all of that. It’s not untypical that some of these artworks show a slight sense of humour, while others delve into the dark regions of anyone’s souls. There are only two things, these pieces all have in common. They were created in Photoshop and they will surely inspire you.
How do you balance the creative control you give to the users, the usability of the product they make with your tool and the flexibility of that tool?
We designers have always had a problem of handing over creative control to the general population — the basic users. There are two reasons for this. The first is obvious: We are the ones who are supposed to know the principles of design and usability. Some of us were born with this feeling of what feels and looks right, while other designers have learned it — at least good designers eventually have.
The second reason is that, unlike users, we see the world in another way. We see what can be done to improve the things we use every day. For example, we might remember a restaurant not by its name or location, but by its poorly chosen typeface for the logo, as Tobias Frere-Jones recalls in the movie Helvetica.
In simple words, designers should be the ones who know what’s right and should know how to fix it when it’s not.
But other people also have a gift of aesthetic feeling, a gift to recognize beauty. It turns out that we’ve had it for a long time1, and we need it in our daily lives. We believe that products that look good also work better, taste better and are more trustworthy. Zoltán Gócza has gathered quite a few points to demonstrate that aesthetics are important to people2.
Ordinary users, then, just like designers, recognize beauty and know what’s right and not right. This is not where the problem of handing over creative control arises. The problem is that they don’t know the principles that designers do. There’s nothing to guide them to create something both functional and beautiful. Most of the time, they just put together a bunch of stuff that they think looks cool and end up with something like this:
This is an extreme example, but you get the point. I wonder how many poorly designed PowerPoint presentations you have seen during your college years (if you studied at a non-design college). I know I’ve seen way too many poorly chosen typefaces and colors combined with unsuitable backgrounds and animations.
5 A poorly designed PowerPoint presentation. (Image: PCWorld6)
Unlike designers, ordinary users know what’s right but don’t know how to fix what’s not right or how to create something that looks and works right from scratch.
The truth lies somewhere in between. Users want a lot of features, even though they won’t use most of them. Adding features makes a product more complex, which can lead to misuse and frustration.
We keep adding features until our products and tools become very complex. We do it to build flexible tools, because that’s what users want, right? But we forget in the process that users don’t know the basic principles of design that would guide them to create a usable, good-looking product. They also don’t have the time or simply don’t want to read our instructions on how to use the tool. This means that they’re using our flexible and complex tool to create a product that is neither usable nor good looking.
But there is a way. We can guide users simply by limiting their creative control, which also makes for a simpler tool.
User’s Creative Control In Digital Publishing
Where I work, Wondermags is a digital publishing platform that empowers even basic users to create beautiful magazines with little effort. We’ve been thinking of how much creative control should be given to our users. We want our magazines not only to look nice, but to be readable and enable an enjoyable experience throughout the process — from creation to consumption. That’s why we thought that guiding the user — by limiting their creative control — would be a good way to achieve this. Other tools simply offer too much control to basic users, who don’t know what to do with it.
The Basic User
But who is this basic user that I keep mentioning? We see them as young to middle aged, with basic to average computer skills and average or even above average creativity. They made one of those bad PowerPoint presentations you saw but were very happy with it. They probably saw some very nice presentations at one time and really liked them; but when they had to create one by themselves, they had no principles to guide them.
PowerPoint provides a lot of options and is very flexible; a lot of magical stuff can be done with it. But the furthest that our basic user would go to create a better presentation is to find a template online, modify it a little and then add their content. And PowerPoint’s flexibility makes a slideshow quite easy to mess up — even from a good-looking template.
In his book Simple and Usable: Web, Mobile and Interaction Design9, Giles Colborne calls basic users “mainstreamers.” He says they use technology not for its own sake, but to get the job done. They learn only a few key features and just want to feel in control.
The User’s Control
For a long time, creative control was completely in the hands of the designer. Graphic designers were the ones who designed books and magazines. But since the rise of personal computers and the Internet, more and more people have gained the ability to create, write and publish.
The majority of computer software is complex and flexible. Even the applications in Microsoft Office, which the general population uses every day, are very complex. They are professional applications and offer practically unlimited control, and a user needs some knowledge and has to follow some principles in order to create a usable product with them. Let’s look at a chart.
10 Linear relationship between the tool’s flexibility and the user’s control. (View large version11)
The relationship between the tool’s flexibility and the user’s control is linear. The more flexible the tool, the more control the user has.
Low flexibility
In this case, the tool is specialized for one task, and the user is very limited by it. So, low flexibility means low control for the user. The tool would be great for the general population — basic users — but it could also feel too limited.
Medium flexibility
This would be either an intermediate tool meant for one task or a basic tool meant for numerous tasks. A medium level of flexibility also means a medium level of control. The tool would be intended for intermediate users.
High flexibility
This tool would be very advanced, with a high level of flexibility and control. It would be specialized for one or more tasks and would be made for professionals.
However, for a tool to be more flexible, it also has to be more complex.
And the more complex the tool, the more knowledge a person requires to properly use it. That knowledge, along with the principles, is what will guide them to creating a usable product.
The sweet spot between a tool’s flexibility and complexity and control for basics users lies somewhere between points 1 and 2. Let’s look at an example.
Tool Usability: Instagram and Photoshop
Everyone loves beautiful photos. And for a long time, the only way to get beautiful, professional photos was to hire a professional photographer. Photographers are advanced users. They take photos and edit them in various advanced applications — usually Photoshop, which is highly flexible and complex and offers a high level of control.
Instagram, on the other hand, is a simple and basic applications. It enables users to take photos and add photo effects to them. The result is a nice-looking photo. Instagram is very low on flexibility and offers little control to the user. But from the user’s point of view, the result is of high (or higher) quality and is achieved with little effort.
Users don’t know what they want. They don’t really want numerous features. Instead, they want quality. They want simple products that are easy to use and that don’t make them feel stupid.
As we’ve seen, Instagram, with its limited control, enables the user to create a product that is perceived to be of higher quality. Even though the tool is basic, it delivers an enjoyable experience. It offers just enough control for the user to feel in control.
Photoshop is meant for professionals and advanced users. It is highly complex and sophisticated and offers almost unlimited control to the user. But the user needs to know how to properly use it be familiar with principles of photo editing. The result depends heavily on it. A tool this complex offers a low level of usability to basic users.
Users want to feel in control and be guided at the same time. When someone is forced to use a tool (for whatever reason) but doesn’t really know where to start, they’ll get frustrated. We’ve all been there, but designers will take the time to learn how to use it. We make money by using these tools. Others don’t really have the time or interest to learn it. And if they do take the time, they will often feel like it’s wasted, as John Maeda explains on his blog The Laws of Simplicity16.
Having said that the sweet spot for basic users lies between points 1 and 2, let’s see what this looks like on a graph:
In this case, the tool would be focused solely on basic users.
Simple and inflexible
The tool affords limited usability to the user.
Moderately complex but more flexible
Usability at this point starts to fall. The tool is more appropriate to intermediate users.
Highly complex and flexible
The tool is so complex that a basic user wouldn’t even know where to start, affording them little or almost no usability.
The problem is that finding that sweet spot, where the person is able to use the tool and feel in control, is very hard. Let’s see what designers can do about it. We can guide the users in two ways.
Guiding The User
As Giles Colborne puts it in this book Simple and Usable: Web, Mobile, and Interaction Design, “Mainstreamers don’t want to build it from scratch.” That’s why a complex tool wouldn’t suit basic (or “mainstream”) users. They wouldn’t even know where to start. It’s up to us, designers, to somehow guide them.
Teaching the User
Good design is as little design as possible — this is one of the 10 principles of good design laid down by Dieter Rams19. The product you’re designing should be as simple as possible and not be burdened by non-essentials. The best product is one that doesn’t need a manual of instructions. The likelihood that a user would read a manual is low for one of two reasons:
either the product is common and the user has already operated something similar (say, a washing machine);
or the product is complex and unusual and the user doesn’t have the interest or time to learn it (say, Photoshop).
Limiting User’s Control
Instead of making the tool flexible and complex, requiring pages of instructions, the designer could simply limit the user’s control. How much to limit the user will depend on the target audience. If the product is meant for basic users, then users should be somewhat limited. They won’t need a professional tool, but rather a simple tool that feels natural to use without (or with few) instructions.
Limiting control entails cutting features. But you don’t have to leave out all of your best ideas. If a feature would make the product more useful without complicating it, then keep it. You could follow Giles Colborne’s strategies for simple and usable design by removing, re-organizing, hiding or displacing features.
In seeking the balance between simplicity and complexity, John Maeda came up with 10 laws of his own. The simplest way to achieve simplicity, he says, is through thoughtful reduction. He breaks this principle down into three methods: shrink, hide and embody. Advanced users are more likely to seek out hidden features, so the product could still be interesting even to them.
A Combination of Both?
Both of these approaches are quite radical. Stripping a product down to its core, without any instructions, might prove confusing. The user might launch the application and have no idea of what is possible. Short instructions that guide the user are quite common in smartphone applications.
20 These simple apps include instructions for first-time users. Keep the instructions as simple and short as possible. (View large version21)
Google follows a good method with its products. It lists new features in a pop-up dialogue, which usually is unobtrusive. The user will usually have the option to open a tour that presents more details about the new features.
So, if you don’t want your users to create something that resembles an old MySpace page or a painful PowerPoint presentation, then consider limiting their control and guiding them with short instructions.
Finding that sweet spot between control and usability is difficult. Start with something simple and upgrade it later, rather than start with something complex and remove features that fail. Also, a simple tool is much easier to modify than a complex one.
Ways of Limiting Control
There are many ways to limit the user’s control. One is to simply remove features that aren’t necessary or give too much control. For example, justifying the alignment of text in any Web-based tool is a bad idea. It just doesn’t work on the Web, so why add it to your tool?
Medium’s text editor is limited, but the experience it delivers is enjoyable.
Medium’s editor25 is simple and limited but enjoyable to use. It has no text-alignment settings or typeface options, and it has only two levels of headings. This way, authors on Medium can be sure that their articles will look amazing.
Another faux pas is aligning paragraphs to the right, which goes against readability rules (except in languages that are meant to be read that way). So, in a Web-based text editor, we could prevent the user from setting this for paragraphs, keeping it for headings, quotations and the like.
Tumblr removes features, too. Aligning text in its editor is impossible because alignment is dictated entirely by the styles.
Tumblr doesn’t allow text alignment at all.
Another way to limit control is by hiding or displacing features. As we’ve learned, intermediate and expert users are likely to explore features. They will scour all of the menus and options to see what’s available, finding all of the hidden gems. The Tumblr example above demonstrates this for an advanced feature: editing the HTML. WordPress goes even further and hides a dozen features behind a submenu that has to be activated by clicking an icon.
Hidden features in WordPress’ editor.
A popular way to limit users is by predefining themes and plugins. A basic user doesn’t want to start from scratch, so guiding them with predefined themes is a good approach. We see this on all major publishing platforms.
The idea is that the designer is the one who creates the theme (or at least sets the typography and general styles). The user simply has to add their content, thus increasing usability.
Another method is place different limits on different users. Basic users could have access to a free version that has basic features. It would feel natural and easy to use. The user would be limited in what they can create — for example, selecting from predefined themes or color palettes or making minor changes. But the tool would satisfy their needs.
Users who aren’t happy with those limits could upgrade to a version that is more flexible and complex. That tool would have advanced settings that make it more useful for intermediate and experts users — for example, creating a custom theme or choosing any colors.
Twitter affords minimal control. In its case, all users embraced the limit, which has made Twitter what it is today: a simple and quick way to share of short messages and ideas. In the beginning, users could merely publish messages with a maximum length of 140 characters. Later, hash tags, replies, and image and video attachments were added. Twitter has been redesigned recently to look more like Facebook and Google+. Nevertheless, Twitter’s core remains simple and limited, which is why users love it.
Medium is a publishing platform that focuses on high-quality content. The platform itself is limited. But authors achieve what they want within these limits. Medium’s developers want people to write high-quality content in a beautiful, non-distracting environment. Once again, users embraced the limits, and their articles look amazing and are easy to read. It’s a win–win for both sides.
I’ve always thought of Tumblr as a much simpler version of WordPress. For that reason, I’ve never really used it. Tumblr comes with predefined themes and plugins. It’s a very good platform for basic and intermediate bloggers. And authors can create custom themes, so it’s also suitable for advanced users.
WordPress also started simply but quickly grew into a powerful blogging platform. It’s now available in two versions for different target groups: WordPress.com for basic users, and self-hosted WordPress for advanced users. We’ll take a closer look at WordPress later.
Notepad or TextEdit (depending on your operating system) are probably the simplest text-editing tools. They’re very basic but can be used to do a lot. They can be used to create a document for any language of code — I started coding websites with them. But they’re too basic to really be used for serious coding.
Google Docs is my preferred tool for creating and editing documents because of its balance of features and simplicity. Its features are very similar to those of Microsoft Word and Apple’s Pages, but its interface is much cleaner, so it’s simpler to use. Compare Google Docs to Microsoft Word:
Microsoft Office is, in my opinion, one of the most misused tools. And that misuse leads to frustration. I’ve seen many users who don’t know how to do basic things in Word — such as create a table of contents or set heading levels. Many people still do these things manually.
Presentation Applications
Slid.es is a Web-based tool for creating presentations. The interface is much simpler and cleaner than Microsoft PowerPoint’s. But it’s not as simple as it looks at first sight. Many advanced features are hidden or displaced. The tool is flexible, but its developers have managed to keep the interface simple. For example, a user could end up creating something like this:
It’s readable and the background photo is nice, but the slide is awful. You don’t want users coming up with that.
PowerPoint is another tool in Microsoft Office that I find too complicated and misused. It’s even more flexible than Slid.es and gives the user almost total control. That’s why so many bad PowerPoint presentations are out there. It’s meant for professionals, but (like Word) is mostly used by people who don’t know how to use it properly. Most users don’t know the principles by which they can create effective presentations.
The question that remains unanswered is how much to limit the user. There’s no right answer. The only way to answer it is to find that sweet spot for yourself. But here are some ways to go about that.
Research and Start Simply
Before doing anything else, research thoroughly. Find out what competing tools are already out there. What do people use them for mostly? What problems do they have with them? Find out by researching the support forums for the products.
Also, define your target users. While designing for intermediate and expert users is easier, most users are at a basic level.
Start with a simple idea and create a prototype. In doing so, cut features that aren’t necessary, especially ones that complicate your product without adding much value.
Test With Target Users
The next step is to test with basic users. Test early and test often to see whether you’re missing your goals. A/B testing is perfect for this. Send a simple version of your product to one group of users and another more flexible version to another group. The feedback you get will be priceless. You might find that the product should fall somewhere between the two versions.
Remove What’s Unnecessary, Add What’s Needed
If you find that some features distract users or are not deemed useful, remove them. If most users want a particular feature, consider adding it. But remember that users don’t always know what they want. Also, add features that you think users would find useful or that would solve a problem for them (if prototype testing has proved it).
Allow Intermediate and Advanced Users to Customize
Once basic users are happy, consider adapting the tool into a professional version. This is a cool way to get advanced users on board.
What About Advanced Users?
“Experts are rarely insulted by something that is clear enough for beginners. Everybody appreciates clarity.”
– Steve Krug
We mentioned that advanced users are more likely to seek out features. Steve Krug believes that advanced users appreciate simple products, too. If you include advanced features in the pro version of your product, or as a customization, you could convince advanced users to try it out.
Allow Customization
Advanced users could grow frustrated with your limits. To satisfy their needs, consider allowing for customization.
I consider myself an advanced user, and I found WordPress.com too limiting. So, I went for the ultimate in customization by downloading the WordPress software and setting up a self-hosted website.
That’s what advanced users like. They will take the time to explore features, customizing an application to its core. They want to be able to change it. The basic version of the product simply won’t do it for them. Allow them to break the limits set for basic users.
Ideally, we would offer three levels of customization. WordPress is a good example again:
Select color palette, make minor theme customizations
Users on WordPress.com may select a color palette for their website and change the image for their header section, logo, etc.
Select themes and plugins
On WordPress.com and self-hosted WordPress websites, users may install themes that completely change the look of their website. They may also install plugins that add features to the website.
Create themes, customize core features, add features
The most advanced users get the highest level of customization. They may download WordPress, manually install it on their own server and customize it however they want. They may also create their own themes, develop their own plugins and even change WordPress’ core files.
WordPress shows that satisfying the needs of all three types of users is possible. It started as a simple publishing platform but has evolved into much more. Its high level of customization make it very suitable as a content management system, but only for advanced users. The version served to different user groups can and should vary.
But My Client Wants Features!
Every designer has been there: working on a project for an enthusiastic client who has a lot of crazy ideas for features. It’s a tough position to be in. Perhaps this client will take your career to a new level. If so, do you have to do whatever they say? How do you convince them that starting simply is best, that fewer choices is better than many?
Cultivate a relationship based on respect and your authority as the designer.
They are paying you for your knowledge and experience, so let yourself be heard. The designer’s job is not to say yes to every crazy idea. If you’re not afraid to say no, then they won’t see you as their puppet. Tell them that you’re a designer, not a pixel pusher. Believe me, it works.
Back up your arguments and advice with examples.
Show them examples of simple products that people love. Explain to them why they work and why people love them so much. The products don’t have to be related to theirs — you just have to prove your point.
Remind them that simpler is less expensive.
Explain to them that starting with a simple product means lower costs and a more flexible foundation on which to build. If they realize later that they’ve completely failed to define their product, then restarting will be easier — and more cost-efficient, too.
Our Limits
“Enabling everyone to automatically earn money with their knowledge,? skills and stories.”
Wondermags’ vision statement
We decided to start with a simple and limited product. We’ll eventually have testing sessions and a closed beta version. The goal is to see whether our tool is simple enough for basic users and to see what kinds of products those users come up with. Based on the results, we’ll make adjustments.
Once we decide who our basic users are, we’ll guide them with instructions (as few as possible) and by limiting their control. Here are a few ways we plan to provide an enjoyable experience.
Removing Features
We decided to allow users to choose a color palette for the background, text and text background, rather than pick any color. The idea is to prevent them from coming up with something like we saw in the Slid.es example above. The colors, borders, buttons and so on will be completely predefined by styles.
The other limitation is popular with digital publishing platforms. The user selects from a range of predefined styles, which then apply a color palette, typefaces, margins and borders to the content.
Selecting a cover from a range of predefined styles.
Predefined Plugins
The magazines on our platform will be put together with blocks of predefined plugins. The user will put their magazine together piece by piece, filling in the content very simply.
Multi-columned blocks
Different Limits for Different Users
Features will be added in future releases, and the platform will be available in basic and pro versions. The pro version will provide more control for advanced users.
Customization
Finally, we allow advanced users to create their own styles, similar to WordPress, Tumblr and other publishing platforms.
Simple Tools As Extensions Of Ourselves
In this article, we’ve covered the following:
Users want to create beautiful and useful products but usually don’t know how.
The designer’s job is to find the balance between providing flexibility, usability and guidance to the user.
Providing instructions and limiting control are two ways to guide the user.
In the end, it all depends on what you’re building and for whom. The general population finds simple tools more useful and easier to use. Overloading a complex product with instructions that people won’t have time to go through is a very bad idea. People are being forced to use software at work that frustrates them, but they try to cope. Do we really want our users to cope with the tools we design for them?
“The more complexity there is in the market, the more that something simpler stands out. And because technology will only continue to grow in complexity, there is a clear economic benefit to adopting a strategy of simplicity that will help set your product apart.”
– John Maeda
Designers have to find that sweet spot between flexibility and control. Users should get an enjoyable experience and be able to create a useful product with the tool. Our tools should be an extension of people’s lives, not the other way around.
It’s that time of year again: graduation, when students transition away from the classroom to what will hopefully be a long and successful career in their chosen industry. I recently said goodbye to some of my own website design and development students. Instead of teaching lessons in design principles or responsive websites, I spent our final evening together answering their questions. One of those questions was, “What is the best career advice you’ve ever received?”
At the time, I didn’t have an answer. I could think of many instances when someone helped me solve a particularly complex design challenge or a complex CSS issue or helped me navigate a delicate client situation, but I wouldn’t consider those “best career advice” moments. After thinking about it for a week or so, I came up with four pieces of advice that I received early in my career and that were invaluable to me as I was getting started in this industry but that are just as relevant and useful to me today.
Learn To Solve Problems
Whether you consider yourself more of a designer or a developer, your real job is to solve your clients’ problems. Yes, a visually rich design with great typography, powerful imagery and a user experience that works great on a wide range of screen sizes is very important. So is clean code that scales to future needs and conforms to best practices. Still, great design and well-written code are not the reasons clients hire you; they expect those things as part of the package.
1The reason clients will hire you is for you to help solve their problems. (Image credit2)
Every project you work on will require you to make a number of decisions along the way. Those decisions need to be based on how to improve the client’s business and help them meet their goals for the website. You need to become a problem-solver. Doing so not only will improve the effectiveness of your work, but will do wonders for how your clients respond to your suggestions.
As with anyone new to a job, your lack of experience will sometimes be held against you, rightly or wrongly. One of the best ways to ensure that your ideas are taken seriously is to tie them to actual business solutions. A suggestion for a particular approach, like responsive design, or an explanation for why you’ve made certain design choices will be better received if you show how they will solve specific problems.
One of the best pieces of advice I’ve ever received as a web professional is that an amazing design that doesn’t solve any problems is not as valuable as an adequate design that addresses the company’s problems and improves their business.
Be Open To Change And Look For Opportunities
When I began working in this industry, my passion was design. That is what I loved to do, and I firmly believed that design would always be at the forefront of my workday. If you had told me then that 15 years later design work would make up the smallest part of my job and that most of my time would be spent leading projects, writing, speaking and teaching, I would have said you’re crazy. Still, that’s where my career has brought me — and I am thrilled that it has!
The web industry is not a single road. You can take many different routes, and those routes are often opportunities to grow. But they also likely entail change for you. Don’t allow fear of change or uncertainty about new responsibilities to keep you from growing. Had I been determined to always focus on design, I never would have discovered how much I enjoy the aspects of my job today, nor would I have achieved the success I have now.
Learn to recognize that some paths you encounter are detours and not right for you, while others are opportunities to be seized upon. Be mindful of these opportunities, be open to change, and be willing to challenge yourself. Which brings us to the next piece of advice.
Challenge Yourself
Focusing on what you do best is tempting. If you are a good designer, then continually honing your design skills is an easy road to take. This might be good early in your career, allowing you to build on your strength as you get some experience under your belt. After a while, though, it will limit you.
Actor and comedian Charlie Day, of “It’s Always Sunny in Philadelphia” fame, recently gave a commencement speech3 at Merrimack College. While the entire 20-minute speech is funny and worth listening to, one part really resonated with me:
“I don’t think you should just do what makes you happy. Do what makes you great. Do what’s uncomfortable and scary and hard but pays off in the long run. Be willing to fail.”
This advice is valuable and very relevant here. If you are unwilling to fail, then you will always take the safe path and not push yourself to learn new skills and accept new challenges.
4As your career unfolds, be open to change. (Image credit5)
I remember a conversation that I had a number of years ago with my supervisor. It was during my annual review, and he asked me what I was planning for the coming year, professionally. Everything I rattled off were extensions of what I was already doing or good at. When I had finished, he gave me very honest feedback, saying that I was becoming complacent and not challenging myself. Shortly after that meeting, I began writing — which I had been hesitant to try for fear of negative feedback.
Challenged by my supervisor, I worked to overcome those fears. I began writing on my personal blog, then later for other websites and magazines. My writing helped me to better convey my ideas and to become more comfortable sharing them with others. A year or so later, I took a job at an area university and began teaching website design and development. None of those opportunities, from the writing assignments to the teaching position, would have been possible had I not challenged myself and gotten out of my comfort zone.
Work With Good People
From the company you join to the clients you work with, surround yourself with good people. There are many things you cannot control in this profession, but if you work with good people, then overcoming challenges will be much easier (and rest assured, you will face plenty of challenges).
I know that many people will argue that you cannot choose whom you work with, whether colleagues or clients, especially early on in your career, when your options are limited. Still, don’t accept a bad situation simply because you think you have no other choice. You will learn a lot from the people whom you surround yourself with, so do not compromise. If you want to be the best you can be, work with the best people you can find.
Ironically, the person who advised me to work with good people is someone whom I very much disliked working with. Still, the advice was sound. I quit that job a few months later, and I have held myself — and the people I work alongside — to a higher standard since then. That my success and satisfaction are as high as they have ever been is no coincidence. That comes from working with good people.
In Summary
Throughout my career, I have received plenty of advice, but the four points covered here have really stuck with me over the years and have made a significant impact on my career. To recap, here is the best career advice I have ever received:
Be a problem-solver, and make design or development choices that help to solve your clients’ actual problems.
Do not allow fear of change to limit your career choices.
Look for opportunities to grow your skills and to focus on things that you do not do well.
Don’t be afraid to fail when trying something new.
Surround yourself with good people from whom you can learn from.
Don’t accept a bad situation, either with colleagues or clients, simply because you think you have no other choice.
Additional Advice
The idea of offering advice to new web designers and developers has been on my mind recently after reading Cennydd Bowles’ “Letter to a Junior Designer6” and Andy Clarke’s follow-up, “A Different Letter to a Junior Designer7.” These two articles offer competing suggestions, but each contains valuable advice and I encourage you to give them both a read.
On behalf of the entire SmashingMag team, we wish all graduates the best of luck going forward in their careers! Believe in yourselves, in your talents and skills, and always keep learning, growing, and realizing the best in yourselves! Cheers!
How About You?
In addition to the CSS tricks and technical lessons you have learned along the way, what career advice has been particularly helpful to you?
Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts1, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working order can be a delicate balance.
Because z-index is contextual2, once you start using it, it can be easy for other elements to start requiring it as well. Finding z-index: 99999 rules scattered throughout a website is not uncommon, but the infamous99999was simply born of frustration. It is often misused as an easy way to force an element above everything else, but z-indexes are not always so straightforward. It is also not entirely scalable: What if you need to add something on top of that?
Another common strategy is to increment z-index values3 by double digits, so that you have room to insert other elements later, but that doesn’t solve the problem of keeping track of them all, and it doesn’t scale well when you want to add ones in between.
Every z-index instance raises a number of questions:
Why does this element have this z-index value? What does it mean in the context of every other element?
Where does it fit in the order and context of other z-index values? If I increase this one, which others are affected?
If I add an element to the stacking order, which z-index values do I have to increase accordingly?
Using Sass To Maintain Order
With Sass, controlling all of the factors above is easy using lists. Let’s use Behance4‘s home page as an example:
5Controlling all of the factors above is easy using lists. (View large version6)
We need to maintain the stacking order of the project covers, filter bar, location search modal, custom drop-down above the modal, and website navigation, in that order, from bottom to top. We can set up a Sass list, like so:
This list represents the order in which we want our elements to appear, from lowest to highest, with each index, or position, in the array representing the z-index of that element. We can use the Sass index function7 to assign a z-index value to each element.
This is because project-cover is the first element in the list, at index 1, and the lowest element in our z-index stacking order. Let’s write the Sass for the rest of the items in our list:
Now you can apply the class to your elements accordingly. But what if we want to add an element to the existing stacking order? Suppose we wanted to add a tooltip that appears when the visitor hovers over a username, above the project covers but below everything else.
8With Sass, we just have to update our list with the new element. (View large version9)
With vanilla CSS, this change would mean having to update the z-index values of the sorting bar, modal and navigation. With Sass, we just have to update the list with our new element:
Because the z-index values of the sorting bar, modals and navigation have changed in the list (they had values of 2, 3 and 4 but now are 3, 4 and 5), our compiled CSS will automatically adjust their z-index values using their new positions. Let’s add this new line of Sass:
Suppose our layout is even more complex, with multiple stacking contexts and stacking orders. (Remember that in order for an element’s z-index value to have an effect, its position must not be static. This is what creates a new stacking context, giving any children of the element a stacking order specific to its parent.) In this case, one linear list might not be sufficient. Instead, we can create as many lists as we need, each of which would be considered one context.
10Create as many lists as you need, each of which would be considered one context. (View large version11)
The most important requirement of this technique is sticking to it. Any rogue hard-coded z-index values could compromise the integrity of those derived from your list. Because of this, you might find that you need to maintain the z-index order across several pages of a website. The simplest solution is to create a partial containing your site-wide lists, which you can then include anywhere you need it. (You might already have a partial that you include everywhere that stores variables for your website’s colors, font sizes, etc. — this is the same idea.)
Combining or modifying global lists per individual page is also possible. You can import your partial and then use Sass’ list functions12 (or other advanced ones13) to modify as needed. For example:
This Sass would add a “Close” button to the end of the modal stacking order and insert birds into the main stacking order of the page it’s included on, all without affecting other pages that use the _zindex.scss partial.
Error-Reporting
Always check for errors in your code to avoid mistakes. For example, if you tried to get the z-index value of an item not in your list, you might find an unexpected output:
Because false isn’t a valid value for z-index, we don’t want it in our compiled code. We can stop this from happening by making a custom function that acts as a proxy to the call to list and that uses Sass’ @warn to tell us whether something has gone wrong.
@function z($list, $element) {
$z-index: index($list, $element);
@if $z-index {
@return $z-index;
}
@warn 'There is no item "#{$element}" in this list; choose one of: #{$list}';
@return null;
}
This function takes the same arguments as index, but before it returns the value, it checks that we are requesting something that exists in the list. If the value exists, then it returns the result of the index call, just like before. If the value does not exist, then two things happen:
A warning is printed telling you that the item you’re requesting is not in the list, and the values of the list are printed so that you can see what to choose from.
The value returned is null, which tells Sass not to print out the rule at all.
So, instead of the following invalid CSS…
.objects {
z-index: false;
}
… the z-index would not get printed at all. As a bonus, if it was the only rule in your rule set, then Sass would not even print the selector, thereby minimizing unnecessary output.
Conclusion
Keeping track of stacking contexts and orders in CSS is hard, but variables in preprocessors make it much easier. There are many ways14 to handle it, but the approach we’ve looked at here is intended to be the most straightforward and require the least amount of maintenance, by using simple lists of items in the order they should appear. And because Sass lists and functions are so powerful, you have endless possibilities for expanding this technique to be as comprehensive as you need!
