In recent weeks web designers have been buzzing about the term “long shadow design” and wondering if it’s the new UI/UX design trend that will catch fire. What is long shadow design? Is it an evolution of flat design? We spoke with Bates Creative’s UI Designer & Front-End Developer, Ozgur Coruhlu to uncover the details.
In 2004, Web 2.0 was the trend, with a rise in richer user experience by using gradients, rounded corners and 3D buttons that virtually said “click me.” After a couple of years here we are saying so-long to Web 2.0 (2003-2010). If your site is still covered with reflections, glossy buttons and floating marques, it’s probably time to think about a redesign.
Apple has shown off its Web 2.0 inspired, classic skeuomorphic interface design on most of its operating system interfaces for a while. Some of the design elements include hand-stitched edges, leather textures and mirror-effects. This brought realism to cyberspace by borrowing from everyday life and making the design more intuitive.
The Flat Design Evolution
Many designers felt they needed to respond to the design flaws and functionality issues that skeuomorphism presents. It was right about time to jump to the next big design trend that we all know now as “flat design.”
Flat design has become the UI design trend loved by many and is being used by almost every leading tech company. One of the first times the world saw flat design was in 2007, with Microsoft’s Zune and its typographic based interface. As Abduzeedo put it, “Despite the failure of the product, that UI was improved and applied to the Windows Phone and Windows 8 interface design.”
The flat design trend began to pave its way as Microsoft fought to compete with skeuomorphism-focused Apple to attract a younger audience. You can see flat design inspired directions on Microsoft’s updated logo and the interfaces of Xbox, Windows 8, and Surface. What started as a design decision made by Microsoft to stay competitive has evolved into a major interface design trend and has been adopted by companies like: Google, Facebook and newly designed MySpace.
When asked how flat design can be explained, Ozgur described it as a “More sophisticated and versatile cousin of minimalist design, using no gradients, gloss effects or textures. It is also uniquely adaptable to usability considerations. Flat design uses bright and dazzling colors, shapes, patterns and a typographic approach to create a simplified interface design with more breathing room.”
Ozgur went on to say, “With the take over of “Responsive Web” a couple years back, scalable graphics (svg, webfonts, iconfonts, etc.), simplicity and good typography were the foundation of the flat design.”
An excellent example of flat design is our very own website which was recently responsively redesigned. As you can see, all the icons used throughout the site are custom icon fonts, including our logo. Additionally, the site utilizes most of the UI elements with a focus on typography, a simplified interface and a rich color scheme without losing any of the functionality.
Urge to Predict the Next Trend
With the growing trend of flat design, web designers began to wonder, “What’s next?” What will be the next trend that goes beyond flat design? These questions turned into burning questions when Apple announced it would be unveiling iOS 7. Designers wanted to become a part of what Apple was doing. They wanted to predict what Apple would reveal because surely it would be something different from Microsoft. It would have to be the next step beyond flat design, right?
While web designers waited for iOS 7, they began to make predictions of the new interface design. This led to the birth of the long shadow design trend.
Long Shadow Design
The term “long shadow” comes from photography. It is a technique used to dramatize a photo using light and shadows. Borrowing this technique, designers began to implement long shadows – evolving flat design so that it stands out and is more of a differentiator.
Long shadow design uses a 45-degree or 120-degree angled shadow on the design. In some instances it might be a hard-edged shadow that goes to the edge of a border or contained graphic, and in other instances the shadow might slowly fade out.
Photos by dribbble.com
iOS 7 Reveals “Flatter Design”
As it turns out, the unveiling of Apple’s iOS 7 didn’t reveal long shadow design. The interface design of iOS 7 isn’t exactly flat design either. It’s just “flatter.” Apple is still using some gradients and shading in the design, but did ditch the skeuomorphic look that was characteristic of the brand since 2007.
Ozgur explained that while long shadow design is an exciting next step in the flat design evolution, he doesn’t think it will work for all aspects of interface design. “Long shadow design is an evolution that can be applied to certain UI elements, which gives a sense of depth, yet still maintains the look of the flat design trend. It shouldn’t be over-used or used in the wrong places.”
Will Long Shadow Design Stick?
Is long shadow design here to stay? Only time will tell, but for now it’s a way for web designers to push boundaries, show what they can create and what’s possible with UI/UX design.
What do you think of the long shadow design trend? Do you hope it catches fire?