background preloader

Flat Pixels: The Battle Between Flat Design And Skeuomorphism

Flat Pixels: The Battle Between Flat Design And Skeuomorphism
Get the Kindle version: If you're paying attention to what's going on in the design world, you've probably noticed the ongoing debate around skeuomorphism vs flat design. So here's a quick test. Which of these two calculators feature a skeuomorphic design? Which of these two apps is skeuomorphic? If you answered "skeuowhat?" But if you answered "the app on the right, of course!" The correct answer is that both apps are skeuomorphs. Defining Skeuomorphism This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Or, as Wikipedia tells us [1]: A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques. While Wikipedia only mentions "physical ornaments", the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls. Notes Related:  UI & graphical design

Why Your Links Should Never Say “Click Here” by anthony on 06/20/12 at 10:39 pm Have you ever wanted your users to click your links, but didn’t know how to get them to act? When some designers run into this problem they’re tempted to use the words “click here” on their links. Before you give in to the temptation, you should know that using these words on a link can affect how users experience your interface. “Click” Puts Too Much Focus on Mouse Mechanics Using the word “click” on your links takes the user’s attention away from your interface and on to their mouse. “view” relates to the users task, while “click” puts the focus on mouse mechanics Instead of using the word “click”, look for a different verb you can use that relates to the user’s task. “Here” Conceals What Users are Clicking Some links don’t use the word “click”, but instead they use the word “here”. when your link doesn’t just say “here”, users can skip the verbose text and go right to the link when each link is labeled, they’re a lot easier for the user to distinguish

The Design Battle Behind Apple's iOS 7 | Wired Design Jony Ive.Photo: Alex Washburn/Wired Photo: Alex Washburn/Wired Photo: Alex Washburn/Wired Photo: Alex Washburn/Wired The new iOS 7 is radically simplified, incredibly flat, colorful, and multi-layered. It is, according to Apple CEO Tim Cook, “the biggest change to iOS since iPhone.” And it may be one of the best things yet designed by Jony Ive, who announced iOS 7 in a short video at Apple’s World Wide Developer conference. Ive didn’t offer a blow-by-blow account of details; he remained seated in the audience next to Laurene Jobs. Among the many features and UI ideas, the main design points were: –A revamped icon system, based on a grid that harmonizes the many tiles of the UI –Redesigned typography –A new color palette –Distinct functional layers for apps and navigation screens –Abundant use of translucency that creates hierarchy among layers –Animations that add depth and live information –A swipe-up control center for commonly used functions iO6’s fake wood, leather, and felt are dead.

Design trends – from Skeuomorphism to material design in the digital world « Reality on Web Flat and material design are two popular trends in the digital world today. Gone the time of flashy illustration, animation and ornamental elements for the content to wow the user. Today if people see the site in skeuomorphism design, says “It’s an old design” though it was very popular till 2012. Design trends in the digital world are changing very fast. Skeuomorphism design – 2010 to 2012 This is really inventive name given to a design. Design cues are taken from physical world. Steve Jobs bridged between the average user and geeky technology by giving a familiar look and feel with skeuomorphism design. Flat design – 2012 to now Digital interface are common now. Simple rectangles, circles, triangles and other shapes are used with the absence of other design elements like, gradient, shadow and stroke. Five principles of flat design Material Design – 2014 to now Google introduces material design in Android Lollipop. Google’s material design brought back the z-axis. Conclusion Some references

Why cards are the future of the web Cards are fast becoming the best design pattern for mobile devices. We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content. Content being broken down into individual components and re-aggregated is the result of the rise of mobile technologies, billions of screens of all shapes and sizes, and unprecedented access to data from all kinds of sources through APIs and SDKs. This is driving the web away from many pages of content linked together, towards individual pieces of content aggregated together into one experience. The aggregation depends on: The person consuming the content and their interests, preferences, behaviour.Their location and environmental context.Their friends’ interests, preferences and behaviour.The targeting advertising eco-system. Twitter is moving to cards Google is moving to cards Everyone is moving to cards The list goes on. Notes

MIT's Gmail Visualization Tool: How It Works Ever wonder how the endless emails in your inbox are all interconnected? Or your most frequent email contact? Or how your inbox has been affected over the years by the new people in your life? Last week, the Massachusetts Institute of Technology's (MIT) Media Lab announced a new tool that uses your Gmail metadata to build a visual map of the web you've created with others. The tool, called Immersion, has clearly resonated with people. And due to the influx of traffic, the site even crashed the site temporarily. The team behind Immersion is billing it as a way to dive into the history of your email life. "If you look at the big picture, Immersion is a visual representation of the webs that you have woven with other people through email conversations," Immersion co-creator Deepak Jagdish told Mashable via email. Here's how it works: Upon visiting it, the Immersion website prompts you to securely connect your Gmail address to the service. Image via MIT's Media Lab, Immersion

Motion: The New Skeuomorphism : The Brolik Blog The transition from skeuomorphic design to flat design is old news. Gone are the days of emulating real life in a digital form… or are they? As a web design trend, skeuomorphism went from “woah… that looks amazing!” Basically, all designers hate skeuomorphism now. However, there’s a new form of skeuomorphism emerging. Skeuomorphism is Bad With a flat design mentality, textures are bad. Responsive design was a huge driver of the flat design movement. It’s not just image-based texture that weighs code down on small screens, though. Luckily, incorporating realistic motion into a website or application using CSS is more justified, because it adds usability for a small performance cost. This type of skeuomorphic touch is anything but superfluous. Skeuomorphic Motion is Great Not only are transitions and movement relevant and generally helpful, they’re actually quite necessary to help human brains understand what’s really happening (and why) in a digital world. ContextCause and EffectWeight Weight

How to increase signups by 50% using “popup forms” Posted in A/B Split Testing, Case Studies on March 15th, 2011 We recently did an A/B test on Visual Website Optimizer homepage with an aim to increase signups for our free 30 day trial account. As you can see, our signup form is short (with just a couple of fields), has good social proof (testimonials on the right) and we have a direct link to the signup page in the website header. Homepage as a sweet-spot for optimizing signups We could have tweaked our signup page in this A/B test. Note that above the page fold, we had a Watch Video call to action. Change the Watch Video button to Start Now button The first change we wanted to test was the most obvious one. This increased signups somewhat but the real game-changer was the following change. Introducing “Popup Forms”: 50% increase in signups As mentioned earlier in the post, our signup form is fairly short (with only a couple of fields). What this did was amazing! What’s next? Paras Chopra Know all that you need to get started: 230inShare Tags

Rockmelt Will animation be the big UI trend of 2015? Animation has become an increasingly important part of the UI design experience across many different applications. There are core considerations of great UX, visual design and functionality, but animation and the way things move is now a key pillar of any mobile, web or software app. One of the effects of this rise of animation in 2015 will be the availability of more tools that improve UI production workflow and performance in browsers and on devices. Don't miss this Why animation? Animation in interaction design is not new, yet it'll become way more prevalent this year as more creatives become aware of the role it can play in communicating UI behaviour. Well-considered motion in interface design can help guide, provide context and delight users. Equally, too much animation or jarring transitions can break up and distract from an otherwise good digital experience. The guiding principals of animation "Perceiving an object's tangible form helps us understand how to manipulate it. Like this?

Design Is About Intent | Rampant Innovation The most admired companies of each age are often associated with a certain core competency. Ford popularized assembly line manufacturing in the 1910s. Toyota kicked off the lean revolution with its Toyota Production System in the postwar years. Apple is unquestionably the most admired company in the world today. Lest there be any doubt, they told us last summer: Apple is about design. Design as the New Management Tool Largely due to Apple’s unprecedented success, design has recently become extremely fashionable in the broader business imagination: A selection of recent headlines Business gurus like Roger Martin, institutes like Stanford’s, and consultancies like IDEO have all helped spread the gospel. We saw this pattern with the Lean and Quality movements too - both generated extensive, organized, and widely adopted disciplines (think of Six Sigma’s DMAIC methodology and hierarchy of belt colors). What Design Is Really About Overarching intent is easy. The Three Design Evasions

See the ebb and flow of Citi Bikes in New York City After two months on the street, New York's first bike-sharing program Citi Bike is starting to yield some interesting data about how riders are actually using the service. Citi Bike has made this kind of data surprisingly transparent — it's simple to see real-time information on where bikes are available – but the New Yorker went one step further, measuring usage at fifteen-minute intervals from June 8th through July 8th and plotting it on an interactive map. On the surface it might just look like a bunch of pulsating bubbles, but upon looking further you can see the city come alive: a herd of commuters traveling south to the Financial District, or meandering weekend journeys, or a westward trek just before the July 4th fireworks on the Hudson river.