Infographic: The Web Design Trends Of 2013 Click image to view entire infographic Click image to view entire infographic Put together by the team at Enfuzed, this is an infographic that entails some of this year’s web design trends. However, this infographic is not merely a list but also explains the rationale for certain design choices. For example, taking a minimalist approach is all about keeping things simple, while a fixed header enables people to navigate through websites easily. What do you think—are some of these trends here to stay? View the rest of the infographic below. [via Enfuzed] Receive interesting stories like this one in your inbox
Review: iOS 7 Gives Us Insight Into the Future of Mobility As team lead in user experience for SAP’s Mobile Design Center, I recently spent time familiarizing myself with Apple’s latest release of iOS 7 in order to gain better insight into how this new mobile operating system will affect users. iOS 7 is being touted as the first major update to the look and feel of Apple products since the passing of Steve Jobs, who was known for his love of “skeuemorphic” design, in which user interface elements are designed to mimic real life. Think of the cheap pine bookcase background in the iBooks library, the stitching on the edge of the calendar app, the notes app that looks like an old-fashioned legal pad, or the green felt background of the Game Center app. All of these design elements speak to the user in a language distinctly Apple, telling them that this is not only a genuine Apple experience but a reflection of the imagination, care, and meticulous attention to detail in design that the company is so famous for.
A Look at Flat Design and Why It's Significant There has been a growing tidal wave of flat designs on the web, and recent trend reports have confirmed that they're only increasing in popularity. Of course it's easy to dismiss flat design as yet another fleeting aesthetic trend. But further investigation into this new philosophy reveals that flat design is a lot more than "just for looks." What is Flat Design? Flat design can be seen as the more sophisticated and versatile cousin of minimalism. Embracing the limits of the screen and working within those parameters rather than trying to disguise them.Using this newfound simplicity as a starting point for streamlining designs, and making websites faster and more functional. Flat design doesn't necessarily mean that anything hinting at dimensionality is out of place. Flat Design as a Response to the Problems of Skeumorphism For every action, there is a reaction. What is Skeuomorphism? The Problems with Skeuomorphism The Solution Found in Flat Design Example #1: Example #2: Conclusion
iPad Application Design I held a 6-hour workshop at NSConference in both the UK and USA recently, focusing on software design and user experience. Predictably, an extremely popular topic was the iPad, and how to approach the design of iPad applications. I gave a 90-minute presentation on the subject to start each workshop, and I want to share some of my observations here. Please note: this is about the user interface conventions and considerations which apply to creating software for the iPad platform (and touch-screen tablet devices in general). As I watched the iPad introduction keynote, there was one thing above all which struck me: That’s iWork (Keynote, Pages and Numbers) for iPad. It’s not just a big iPhone The iPad may be a larger version of the iPhone in terms of the hardware and operating system, but treating it as the same device would be foolish. When Steve Jobs introduced the iPad, he did so in a very specific way: The iPad is in the middle, between the iPhone and the Mac. The Missing Link Two Hands
5 Things to Know When Designing for iOS Based on our experience creating great iOS apps, we’ve come up with a list of 5 things we believe designers should keep in mind while conceptualizing interfaces for iOS. While the focus of this article is only on iOS apps, much of the advice here translates directly to other mobile platforms. 1. Understand Your Medium This seems obvious, but designing apps instead of websites actually represents a huge shift in mindsets. Apps have a completely different user interaction model from websites: taps vs. clicks, views vs. pages, buttons vs. links, etc. In addition to a different interaction model, apps should have different modalities. How users get around in apps vs. on websites is another area of contrast to consider. Navigation is very different on iOS – there is no browser chrome or Back button. Finally, remember that iOS apps run on iOS devices. Wikipedia has a comprehensive breakdown of all iOS devices, but we thought we’d distill that down to a short list of devices running iOS 6. 2.
10 things designers need to know about iOS 7 | Apple Apple has long been criticised for the slightly haphazard approach it's taken to the user interface design of its apps, and the iOS platform in general. Some apps have featured heavily skeuomorphic design, while others have been purely functional with little or no design flourish. Yesterday, though, that all changed. At its annual developers conference, WWDC, Apple introduced an all-new design language for iOS 7, eschewing the pseudo-3D patent-leather, wood and felt in favour of a clean approach that’s typography-led and heavily (although not exclusively) influenced by flat design. This shift in approach is a game changer to designers responsible for crafting iOS app interfaces. We’ve scoured Apple’s Transition Guide and picked out the 10 most important considerations for designers. Read all our app design-related articles here 01. One of the most important changes in iOS 7 for interface designers is the introduction of transparency and translucency. 02. 03. 04. 05. 06. 07. 08. 09. 10.
Apple Publishes iOS 7 Transition Guide To Help Developers Adopt Flat Design As expected, Apple is introducing a completely new design language for iOS 7. For developers, this means they will have to adapt their apps to match the rest of the operating system if they don’t want them to look antiquated. Thankfully, Apple today also published a pretty extensive guide to designing for iOS 7 and transitioning apps to the new version that helps developers understand how they should use new UI elements like borderless buttons, translucent bars and full-screen layouts for their apps. As Apple notes, iOS 7 provides “a rare opportunity to revisit the way apps communicate their core purpose and functionality to users.” Here are Apple’s three main themes for developing for iOS 7: Deference. One new feature Apple especially stresses in its documentation is Dynamic Type, which now automates many of the text layout functions in iOS. Here is Apple’s full list of the things it believes an app developer should do to get ready for the next version of iOS 7:
Sizes of iPhone UI Elements How to detect the current device size and kind Other dimensions common to all screen sizes: Points vs. Pixels Apple introduced retina displays starting with the iPhone 4. iOS supports high resolution displays via the scale property on UIScreen, UIView, UIImage, and CALayer classes. To refer to an image in your code (or in Interface Builder), use the filename of the standard sized image. iOS will automatically detect and use the @2x version if the device supports it: imageView.image = [UIImage imageNamed:@"button.png"]; Adjusting Sizes Click here to see how to adjust View Frames and Bounds. Additional References Apple Documentation: Points vs.