webvrrocks icon indicating copy to clipboard operation
webvrrocks copied to clipboard

Create separate columns for iOS and macOS

Open jcarpenter opened this issue 8 years ago • 4 comments

We should display support status for both iOS and macOS, using recognizable icons for each. Latest identities are visible at:

http://www.apple.com/ios/ios-10/ http://www.apple.com/macos/sierra/

Rationale here being 1) both operating systems are important to web devs, and 2) current Apple-icon-for-iOS is visually ambiguous. I thought it meant macOS at first.

jcarpenter avatar Feb 01 '17 01:02 jcarpenter

Great call here - thanks! 👍 Will definitely add text labels regardless (icon-only labels are never ideal). Make the icons 100% grayscale; the colours are quite noisy.

Re: macOS vs. iOS: do you have a pointer to suggested branding guidelines? I was going to, but forgot, to use the iOS (the old Myriad Pro wordmark) instead of that "iOS App Store" curved black box. TBH, I didn't catch the new iOS 10 logo. I'll use t hat instead.

Thanks! :)

cvan avatar Feb 01 '17 03:02 cvan

Wordmarks are the way to go, IMO, even though they're unwieldy. You could truncate macOS to "Mac", to at least get both into three letters.

jcarpenter avatar Feb 01 '17 16:02 jcarpenter

San Francisco is probably safe font to use, but worth double checking. Myriad is on it's way out, but may still used for logos.

jcarpenter avatar Feb 01 '17 16:02 jcarpenter

I'm going to probably use a similar icon to borrow the iOS icon from here (I know I've highlighted macOS):

image

<!-- iOS icon -->
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-mobile fa-w-10" data-icon="mobile" data-prefix="fas" viewBox="0 0 320 512">
  <path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>
</svg>

cvan avatar Apr 03 '18 04:04 cvan