Posts Tagged: apple

My custom Yosemite icons

New icons
New app icons for iTerm, Mailbox, nvAlt, Spotify, Sublime Text, and Tweetbot.

Yosemite’s most striking change to Mac OS X are its visuals, a nod to bring the OS more in line with iOS. That’s distilled in its new set of default system app icons. As John Siracusa writes in his Yosemite review:

Apple is trying to discipline the world of OS X icons. While one icon shape has been deemed insufficient, Apple believes three shapes should just about do it: circle, rectangle, and tilted rectangle…Visual simplification is the order of the day, and details that don’t read well at small icon sizes have been excised.

Unfortunately several apps I use heavily haven’t updated their icon and clash with Yosemite’s new look. In a sea of flat minimalism, bold colors, and thinner typography, a few icons that don’t follow trends can really stand out. So I hunted on Dribbble to find suitable replacements. Below I’ve provided a few direct links if you’re interested in grabbing them for yourself.

Old icons
The default app icons.

If you haven’t replaced an app icon yet, it’s an easy process in Yosemite:

  • Right/command click on the app in Finder. Select “Get Info”. A dialog box will open.
  • In another Finder window, find the new replacement .icns file for the app. Click on the icns file and drag it over to the existing app Get Info dialog box. Release the file on top of the existing app icon at the very top of the dialog box.

In terms of my replacements:

  • iTerm isn’t far off the mark but I wanted a more minimal, flatter look that better paired with Apple’s Terminal icon. Jason Long’s take is a better match.

  • Mailbox overall looks great, but the “in construction” thin lines (albeit with good purpose to signify beta status) all over the Mailbox icon were distracting. Chris Jennings made a very clean replacement that goes well with Mailbox’s minimalist aesthetic.

  • nvALT has a clever icon with a small stack of sheets alongside a rocket ship taking off. But it’s busy in the context of Yosemite. So I went ahead and created my own amateur work in Sketch combined with Icon Slate for output. Download it here.

  • Spotify’s default icon already works with color and a circular shape. Yet I wanted something with a more subtle gradient, punchier color and more clearly defined edge to the icon. Sebastian de With’s Muir set was my first choice, but after using it for a few days the white coloring for the icon’s sonic waves felt off from Spotify’s black aesthetic. So I switched to Jean-François Goncalves’s work. It’s very similar, but with black instead of white accents.

  • The great Iconfactory put together Sublime Text’s “big button” style original icon, yet it never resonated with me; it was just a bit too “cute” for my tastes. I’ve used other replacements while on Mac OS 10.9, but for Yosemite I’ve settled on a simple tilted rectangle icon from Rafael Conde. I love the subtle cross hatching on the icon’s background.

  • Tapbots have always had a playful and original bent to their wonderful Tweetbot app; that gives some creative license away from Yosemite’s usual icon layout. But Ilja Miskov put together an option that plays better; it mirrors Tweetbot’s simpler iOS icon cropped to circular form for Yosemite.

The Apple media distortion field

Journalistic site Krautreporter, writing a post on Medium:

Three years after the death of its charismatic founder, Apple is doing all it can to maintain this reality distortion field, mainly by exercising total control about anything that is reported about the company or its products. In contrast to Apple’s design philosophy this strategy does not manifest itself through clarity and elegance, but through a subtle and sometimes questionable toying with our, the reporting journalists’ vanities and dependencies. If you write positively you’ll be wined and dined, if you criticize, no matter how fairly, you’ll be penalized. Admittedly this is common practice with large corporations, but hardly any one of them will go as far as Apple does. And there is no other corporation that the media have allowed to get away with this kind of manipulation for such a long period of time.

As much as we all admire Apple in many ways, it’s interesting to get a much harsher perspective on its treatment of the media. I question if it’s quite as black and white as Krautreporter portrays here, but there’s been many times where I’ve questioned the relationship between the tech press and Apple.

OS X 10.10 Yosemite: the Ars Technica review

Another OS release, another great review by John Siracusa. Some might find John’s depth maddening (the review’s word count is probably larger than most other OS reviews online combined), but I think that’s exactly why it’s so essential. Treat it like a small novella: have a drink, sit on the couch and parse through the whole thing for a few hours on a low key night. If you love tech, it’s great entertainment.

Apple goes responsive

New home page
The new home page

With the keynote announcement of the new iPhone and Apple Watch this month, select parts of have undergone a significant redesign. Curious to see how Apple stacked up against its competition, I researched the front end tech behind their new home page, iPhone 6 and Watch product pages. With only the web inspector as a guide, it’s an imperfect look, yet overall I’m impressed with how far Apple has come since their last major redesign.

CSS and JavaScript best practices: A-

Like most large companies with a big e-commerce presence, Apple has historically done well with CSS and JavaScript performance basics. They use global CDNs for their image assets and minify all CSS and JS references, ensuring their page weight is minimized.

Much more was added with the September refresh. For the first time I spotted a Modernizr-like detection script that runs in the header. It illustrated Apple moving away from device specific styles and functionality (e.g. checking the browser user agent string to adjust content for iPad or iPhone) toward universal feature checks that adapt to whatever the browser supports. In addition, for both the iPhone 6 and Watch product pages, Apple delays select imagery from loading (Figure A) by a few seconds. This “lazy load” effect reduces page weight and increases page speed.

iPhone 6 lazy loaded images
Figure A: images further down the iPhone 6 page load later to maximize page speed

There’s also smarter use of animation as the user scrolls down each product page. Apple added CSS3 animations all over the iPhone 5S product page a year ago, but their usage has expanded significantly since then. Animations are smartly limited to opacity and 3d transforms that stay fast by leveraging the computer’s GPU.

My only disappointment was the lack of sprites for some imagery, most notably the sub “explore” menu on the product pages. Arguably combining eight or more images into a single request won’t make a large difference, but it still feels like a missed opportunity.

Responsive web design: B

For the first time Apple relies heavily on media queries for a legit first class responsive web experience. Apple has used media queries in the past, but mostly for small tweaks like moving a product image from landscape to portrait orientation. Now there’s a major breakpoint to radically alter the site navigation and most imagery has fluid sizing to take full advantage of mobile device viewports. There’s also a custom responsive grid for aligning select elements. SVGs comprise the top navigation, a subtle nod that the usual 1x and 2x raster images won’t cut it for super HDPI devices like the iPhone 6 Plus.

The responsive design motif is a big step forward yet feels mildly safe: I wanted to see Apple exploit native responsive imagery (the picture element or srcset attribute of the img element), especially considering iOS8’s Safari supports srcset. Apple also uses device-width and device-height heavily in their major break points which seems unnecessary: if I navigate to with a slightly narrow browser on my laptop, it feels odd to just cut off content and add scrollbars when there’s a better optimized view available.

Typography: B

Unlike past designs that relied on occasional text images or web safe fonts, Apple has transitioned mostly to modern, custom web typography. Myriad Pro is deployed at several weights throughout the site and it’s a manageable (albeit a bit higher than I’d like) download at a bit over 300k.

Nevertheless, I wasn’t crazy about several paragraphs of product detail that use the thin Myriad Pro Light against a low contrast background (Figure B). It looks great on HDPI devices (e.g. Macbook Pros with Retina Displays, modern mobile devices) but can be a bit hard to read on lower resolution displays.

Small Myriad text
Figure B: Myriad looks great but can be harder to read on select product descriptions

Design and layout: A

Tech quibbles aside, Apple nailed their new design aesthetic for the home and product pages. They’ve done their homework in what’s common to modern design: generous white space, grid ratios, lots of vertical scrolling, “flat” layout that lacks depth and shadows, along with “full bleed” imagery that covers the entire browser viewport. Even carousels, controversial web elements that arguably lack engagement, are used well to highlight the Apple Watch. All carousel panes point to the same link and highlight the same product to avoid engagement issues. At the same time, the carousel’s huge imagery and slow transitions evoke a high-end, luxury vibe to match the aspirations of the Apple Watch itself.

Apple’s new design isn’t just a nod to modern web trends either; Apple sets off in its own direction with a few small flourishes (Figure C). First there’s Apple’s spin on the now ubiquitous “hamburger” menu icon for narrow width browsers: Apple uses two lines, not three. Also when users open the mobile navigation, the pages display a lightweight, scrollable navigation menu. It’s a big deviation from the expected “off canvas” listing where navigation covers the viewport or slides the existing content off to one side. I didn’t care much for the menu design at first, but it’s growing on me and does succeed in setting Apple’s design apart. I also really liked the “explore” on the iPhone and Watch product pages. It’s functionally a mega menu but the extra imagery and large hit targets give a more breathing room and a high-end feel. design touches
Figure C: Apple sets off in its own direction with a few small design touches

Overall: B+

Apple has come a long way since their last major refresh a year ago. Some issues with their responsive design decisions aside, they’ve finally caught up with most modern web practices. There’s even a few of their own “Apple-like” touches in their design to keep things fresh. Hopefully Apple will extend this design soon to other parts of the site, especially their support and e-commerce pages which are in serious need of a refresh.

iOS 8 changed how I work on my iPhone and iPad

MacStories’ Federico Viticci:

There are hundreds of new features in iOS 8 and the ecosystem surrounding it that signal a far-reaching reimagination of what iOS apps should be capable of, the extent of user customization on an iPhone and iPad, or the amount of usage data that app developers can collect to craft better software.

Seven years into iOS, a new beginning is afoot for Apple’s mobile OS, and, months from now, there will still be plenty to discuss. But, today, I want to elaborate on my experience with iOS 8 in a story that can be summed up with:

iOS 8 has completely changed how I work on my iPhone and iPad.

I’d consider Federico a much more hard core power user than most, but his argument is pretty sound. For years I’ve been extremely envious of Android users and their custom widgets, keyboards, and third-party sharing capabilities. No more.

The hidden structure of the Apple keynote

In light of today’s annual big Apple media event, Quartz’s Dan Frommer crunched the numbers of how these events historically play out. Frommer examines average presentation time, video style, Steve Jobs’ stage time versus Tim Cook’s and other material. Very interesting.

Padbury clock

I have a habit of installing quirky screensavers on my Macs as a throwback to an earlier era. But with my latest Macbook Air I fell in line with the default settings sans screensaver, dissatisfied with what was out there. That all changed when I saw this screensaver by designer Robert Padbury, developed by Steve Streza. It’s a twist on the iOS7 lock screen with options for white on black or black on white typography. It’s minimal and extremely elegant.

My must-have iPhone apps, 2013 edition

Federico Viticci over at MacStories knows his iOS apps very well. The guy oversees and has written hundreds of posts for MacStories, so we shouldn’t be surprised given the high quality of writing over there that he’s very well qualified in his opinions.

If you’re looking for some fresh apps to start the new year I can’t think of a better list to start from.

App Santa

If you’re an iOS user there’s a lot of app sales going on for the holidays. But there’s no better single sales grouping than over at App Santa. Very respected iOS dev teams with some excellent apps. I use Tweetbot, Clear+, One Password, and Launch Center Pro daily. I only use Scanner Pro every so often, but it’s essential for keeping track of receipts, especially on business trips.

Nintendo is doing just fine and doesn’t need to make games for mobile, thank you very much

Kris Naudus, writing for gdgt:

Granted, if Nintendo started making games for mobile it’d still be making games, which isn’t a huge momentous change. But it does mean giving up on their commitment to hardware. And that leads us to the other reason it doesn’t make the switch: