HACKINTOSH.ORG | Macintosh discussion forums

OS X Yosemite design language: Explained

<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><a href='http://www.imore.com/what-os-x-yosemites-design-language-means-future' title="OS X Yosemite design language: Explained"><img src='http://www.imore.com/sites/imore.com/files/styles/large_wm_blw/public/field/image/2014/10/yosemite_design_mac_pro_hero.jpg?itok=93tOBS64' />[/url]</p> <p>Back in October of 2012, senior vice president of industrial design, Jony Ive (http://www.imore.com/jony-ive), became the person in charge of all design at Apple, both hardware and software. As a result, iOS 7 got a down-to-the-pixel interface update that set the iPhone and iPad up for the future, but left years of "back to the Mac" consistency behind. Apple simply didn't have the resources last year to redesign OS X at the same time. This year they do. This year OS X Yosemite (http://www.imore.com/os-x-yosemite) not only gets onto Apple's new design language, but gets to take it even further into the future...</p> <h2>Like water from candy</h2> <div class="video_iframe"><iframe src="http://www.youtube.com/embed/pmz30G9TVQw?rel=0&amp;autoplay=0&amp;wmode=opaque&amp;controls=2&amp;autohide=1&amp;showinfo=0" width="627" height="353" class="video-filter video-youtube vf-pmz30g9tvqw" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div> <p>The original OS X interface was called "aqua" and featured buttons that looked like beautifully rendered gum drops, windows that like emerged like genii from the bottle, and elements that were, at the time, referred to as "lick-able". Also, early on, pin-stripes.</p> <p>Some awkward years followed as well, including forays into brushed metal, stitched leather, and linen. Yet it had good years as well. Sane years. Snow Leopard and Mavericks years that matured the interface, and made it more consistent, even if at the expense of some color.</p> <p>Yosemite isn't the evolution of either Snow Leopard or Mavericks, nor is it the revolution of iOS 7. There's plenty new here, but there's also a a remarkable restraint. Yosemite isn't built on a physics or particle engine. There's nothing bouncing or colliding. But it is flatter, cleaner, and more coherent than what's come before. It's also darker...</p> <h2>Flat, with shadows</h2> <div class="video_iframe"><iframe src="http://www.youtube.com/embed/NQ7kqwbqeiI?rel=0&amp;autoplay=0&amp;wmode=opaque&amp;controls=2&amp;autohide=1&amp;showinfo=0" width="627" height="353" class="video-filter video-youtube vf-nq7kqwbqeii" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div> <p>Flatness, or the eschewing of rich textures for solid colors, is the prevailing trend in modern interface design. Some believe it to be more authentic to the nature of the machines. Others as a sign that we, as a collective, have matured beyond the need for skeuomorphic cues and affordances. Still others as massive misstep when it comes to both design and usability.</p> <p>Where ever you fall on the spectrum, Apple is falling just short of totally flat. Gone are the gum-drop style buttons, and the last of the green felt has been left by curb.</p> <p>Instead we have solid colors, but subtle gradients. We have clean windows that still drop shadows. We have clear sidebars that blur the background behind them, and streamlined tool bars that blurs the content beneath them. Combined, they minimize distraction but still provide a sense of placement and personalization.</p> <p>The colors from your wallpaper show through. The photos and icons and documents from your files show through. As much as it breaks up the window and seems odd at first, it can also tie everything from the desktop to the folder grid together.</p> <p>Because OS X is a multi-window environment, that shadows remain helps visually separate and stack different apps. It's one of the ways Yosemite is less extreme and better balanced than iOS 7 or iOS 8. It embraces the new without jettisoning what worked so well in the old.</p> <p>Perhaps nowhere is that better exemplified that the dock. Where it once went from blessed 2D to faux 3D, it's now not only returned to past glory, it's done so in a newly translucent form. It really is the best of the past and the present, and hopefully a sign of what's to come from both of Apple's platforms in the future.</p> <h2>Icons newly iconic</h2> <p><a href='http://www.imore.com/what-os-x-yosemites-design-language-means-future' title="OS X Yosemite design language: Explained"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/yosemite_design_icons.jpg?itok=W7r2K-20' />[/url]</p> <p>Yosemite doesn't just give windows and interface elements a makeover, it goes all the way down to the icons. Apple has standardized on three shapes — the rounded square, the circle, and the tilted rounded rectangle. Oh, and a new, shiny, translucent trash can.</p> <p>The rounded square is used for system-related apps. That includes not only the new, happier, even slightly more embossed Finder, but the new System Preferences as well.</p> <p>The circle is used for content-focused apps, like iBooks, the App Store, Safari and the new, red, iOS-Music-app-matching iTunes.</p> <p>The tilted round rectangle is used for traditional apps, especially productivity apps, like Mail, Calendar, TextEdit, and Preview, often with a smaller icon at the bottom left to better hint and functionality, like a stamp for Mail, a pen for TextEdit, and a magnifier for Preview. It's no longer in perspective, but it does have depth.</p> <p>There are a ton of exceptions, of course. Time Machine is round and Maps is tilted, to name but two. In general, however, the new look makes for a new feeling — a more ordered and organized one.</p> <p>Still, Apple designers are Apple designers, and that means the icons are still filled with great colors, amazing details, and even small touches like a subtle reflection effect on the metallic icons, blues and oranges as though they were situated in the environment of Yosemite itself.</p> <h2>Going dark</h2> <p><a href='http://www.imore.com/what-os-x-yosemites-design-language-means-future' title="OS X Yosemite design language: Explained"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/yosemite_design_dark_mode.jpg?itok=yGCU-MY6' />[/url]</p> <p>For those who want to keep focus on active windows and tasks at hand, Apple is also minimizing the potential distractions of menu bars and menus by introducing a "dark mode".</p> <p>As you'd expect, dark mode changes the menu bar and drop down menus themselves to a deep, translucent, charcoal gray reminiscent of some of Apple's pro-apps past.</p> <p>Dark mode looks good enough that even people who don't care about distractions might want to try it out.</p> <h2>Straight to Helvetica</h2> <p><a href='http://www.imore.com/what-os-x-yosemites-design-language-means-future' title="OS X Yosemite design language: Explained"><img src='http://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2014/10/yosemite_design_windows.jpg?itok=CoLeStOH' />[/url]</p> <p>Lucida Grande has been the OS X system font for as long as there's been a system a font. It was perfect for an era of lower resolution displays and subpixel antialiasing. Yet now we live in the era of Retina.</p> <p>With iOS 7, Apple switched not to their own, custom font for iPhone and iPad, but to Helvetica Neue. With OS X they're doing the same for the Mac.</p> <p>It doesn't have the personality of Lucida Grande, or of a custom Apple font, but it looks great on high density displays, and it even looks fine on older Macs with standard displays.</p> <p>More importantly, it looks consistent with iPhones and iPads, which means anyone considering a Mac as their next computer will feel even more at home with OS X. And that's a feature.</p> <h2>The bottom line</h2> <p>With Yosemite Apple has achieved an even better balance than iOS. They've brought the Mac interface fully into the modern age without leaving behind everything that worked well in the past.</p> <p>Apple has flattened out the textures and gone solid, but instead of losing the visual differentiation between apps, they've deferred to apps' own content, made it more prominent, and hence made the app itself more recognizable.</p> <p>They've added transparency to let the desktop shine threw and integrate the overall look, but kept the drop shadows so the layers are better separated visually and the depth is even greater.</p> <p>And the dock, the icons, the new system font, and everything else ties Yosemite together in a way no other version of OS X has been tied together before, at least not since it first launched.</p> <p>OS X Yosemite's new design language isn't perfect, but it's lightyears ahead of where it was, and arguably iOS could learn a lesson or two from where it is now.</p> <p>Overall it accomplishes two critical tasks — it once again makes the Mac consistent and comfortable for iPhone and iPad owners, and it breathes bold, clean new life into OS X.</p> </div></div></div><div id="comment-wrapper-nid-27474"></div><img width='1' height='1' src='http://tipb.com.feedsportal.com/c/33998/f/616881/s/3f36bbf9/sc/4/mf.gif' border='0'/><br clear='all'/>

<a href="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/rc/1/rc.htm" rel="nofollow"><img src="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/rc/1/rc.img" border="0"/>[/url]
<a href="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/rc/2/rc.htm" rel="nofollow"><img src="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/rc/2/rc.img" border="0"/>[/url]
<a href="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/rc/3/rc.htm" rel="nofollow"><img src="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/rc/3/rc.img" border="0"/>[/url]

<img src="http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/a2.img" border="0"/> (http://da.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/a2.htm)<img width="1" height="1" src="http://pi.feedsportal.com/r/208961604375/u/49/f/616881/c/33998/s/3f36bbf9/sc/4/a2t.img" border="0"/><img src="http://feeds.feedburner.com/~r/TheIphoneBlog/~4/2Jf_M3O2fTo" height="1" width="1"/>

Source: OS X Yosemite design language: Explained (http://feedproxy.google.com/~r/TheIphoneBlog/~3/2Jf_M3O2fTo/story01.htm)