In this article you will start to learn how to design an application for the Apple Watch with basic theory and principles to get started in design for wearables.
There are three parts to an Apple Watch app: the WatchKit App, a Glance screen, and Notifications. Each has different purposes and their own design challenges.
From the Smashing Magazine email newsletter.
There is still a common misconception that Flexbox isn’t yet widely supported and can’t be used in real projects. Well, it isn’t true. Flexbox is a standardized specification, it’s well-supported (with Opera Mini supporting it since last Monday) with many ready-to-use solutions and in fact, we can use it today on UI components if we treat Flexbox as progressive enhancement. In fact, we can make boxes automatically grow to fill space, lay out boxes in any direction easily, align boxes on any side and place boxes out of order from HTML without duplicate markup.
We can’t build layouts with Flexbox-first approach, but browsers not supporting Flexbox will ignore Flexbox properties, so i.e. we could use
display: inline-blocktogether withdisplay: flex— with Flexbox-properties listed after the fallback properties. There are many resources on Flexbox and if you’d like to understand how to apply Flexbox in actual projects, Zoe M. Gillenwater’s Flexbox talk (47 min) and recent presentation could be very helpful. So, there is no reason not to use Flexbox today! (vf)
Free Adobe iPad app for creating comps. Video at the link.
Built on the Adobe Creative SDK, Comp CC couples intuitive iPad gestures, fonts from Typekit, and the personal assets stored in Creative Cloud Libraries to provide designers with the perfect mobile brainstorming and layout work surface. Then, with a single click, comps can be sent to Adobe InDesign CC, Adobe Illustrator CC, or Adobe Photoshop CC (where CC Libraries assets and fonts from Typekit are also synced) to fine-tune and finish the work. It’s this powerful connection back to the desktop, where designers do so much of their work, that makes Comp CC, and all of our mobile apps, so valuable.
Free download from design+code. Requires the San Francisco font, available from the Apple Watch Design Resources link on the WatchKit page (iOS Developer Certificate required).
100% vector including devices, icons and clocks. Every element, including the Apple Watch devices, icons and clocks have been vectorized in Sketch. You can resize, export and [use] them at any resolution.
αℓℓ тнє ƒυη υηι¢σ∂є мαρριηgѕ ιη σηє ρℓα¢є
คll tђє Ŧยภ ยภเς๏๔є ๓คקקเภﻮร เภ ๏ภє קlคςє
Λᄂᄂ ƬΉΣ FЦП ЦПIᄃӨDΣ MΛPPIПGƧ IП ӨПΣ PᄂΛᄃΣ
ⓐⓛⓛ ⓣⓗⓔ ⓕⓤⓝ ⓤⓝⓘ©ⓞⓓⓔ ⓜⓐⓟⓟⓘⓝⓖⓢ ⓘⓝ ⓞⓝⓔ ⓟⓛⓐ©ⓔ
ǝuo uʍop ǝpısdn ǝɥʇ ƃuıpnlɔuı
Good article on icon design process.
I’m sharing with you our work process: researching, drafting, refining, optimizing… You will learn how to design an icon collection on a large scale. We’ve already created 800 icons, and we plan for at least 1500 icons.
Download the first 100 icons from the EGO collection here [Free].
Used for NYC Agency Quick Comp, with some modifications – larger color cube, changed picker frame colors.
JSColor is a simple & user-friendly color picker for your HTML forms. It extends all desired <input> fields of a color selection dialog. You can pickerize your input fields in two easy steps.
Excellent article – covers FOUTs and font loading, ligatures, hyphenation & justification, more
Typography has a long and rich history, but much has been lost in the transition to the web. While browser support for typography has advanced a lot in the last couple years, we still have a long way to go. Features print designers take for granted are either nonexistent on the web or have insufficient browser support in order to be useful. Challenges unique to web browsers such as responsive design and web font loading could use some improvement as well. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.
Test foreground & background color combinations for WCAG (Web Content Accessibility Guidelines) compliance.
- Percentage widths
- Math in width/height boxes
- Suffixes in width/height boxes
- Symbols + opacity, blending, shadow
- Document color presets
The days of detaching a symbol just to indicate an inactive or some other kinda state are over! With the new update, you can change the opacity, blending mode, or shadows of a Symbol and not muck up the original instance. Huge!
Also, bonus note, there was a visual change in how the symbol groups are displayed. When you’ve got one selected, you get a bright purple active color in the Layers List.
