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

11 Common Web Design Mistakes (Blunders) There are tons of website on the Internet, and hundreds or probably thousands are created by day. Here’s a very interesting thing to ponder – What are the elements of a good website? Image Credit: tveskov Building a website can be daunting but the real challenge lies in making it usable. In this article, we would like to highlight 11 web design blunders that web developers and designers make and some suggestions how these mistakes can be easily avoided. 1. The web is like an archive of information. Suggestions:Google Custom Search is a neat, simple and effective way to get started. Here’s a simple form code to display Google’s search engine on your site too. More: Designing The Holy Search Box: Examples And Best Practice- This article details guidelines for designing the search box. 2. This is a crucial element of web design. Suggestions:Fortunately, there are simple ways that you can do to improve the users’ reading experience on your website. 3. 4. Suggestions: 5. 6. 7. 8. 9. 10. 11.

7 Key Design Tips for High-Converting Landing Pages [+ Free Templates] Here's some food for thought: Companies see a 55% increase in leads when increasing their number of landing pages from just 10 to 15 , according to our 2012 Marketing Benchmarks Report . Here's some more food for thought: According to MarketingSherpa's Landing Page Optimization Benchmarks Report , layout is a major factor in website performance. Landing pages are a fundamental -- and undeniable -- part of a sucessful inbound marketing strategy. They are the hub of your lead generation efforts, and that's why every campaign you run and offer you create should be tied to a custom landing page -- as opposed to an ambigious homepage where visitors have to guess what to do next. Well, we want to make that a little bit easier on you, since we know how challenging great design can be -- particularly if you're not a designer , per say. How to Design a Landing Page That Converts 7 Design Best Practices for High-Converting Landing Pages 1) Get to the point. 2) Use contrasting colors.

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

Moluv - The World's Best Web Design - Today's Best Looking Web Sites Guiding Principles for UX Designers Editor's Note: This is a republication of a very popular article Whitney Hess (@whitneyhess) originally wrote on her blog, Pleasure & Pain, back in November. We usually avoid duplicating popular content, but this is such valuable information that we wanted to make sure as many people saw it as possible. Five months ago I wrote a post titled, "So you wanna be a user experience designer," in which I gathered all of the resources in my UX arsenal: publications and blogs, books, local events, organizations, mailing lists, webinars, workshops, conferences, and schooling. My intent was to give aspiring user experience designers, or even those on the hunt for additional inspiration, a launching pad for getting started. The response has been pretty remarkable—the link continues to be sent around the Twitterverse and referenced in the blogosphere. I'm really pleased that so many people have found it to be a useful aid in their exploration of User Experience. Don't hurt anyone Have empathy

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