The ten most popular web fonts of 2014 →
Avenir and Proxima Nova still rank incredibly well.
Posts Tagged: design
Designing with Framer →
As part of Stripe’s “Speaker Series”, the founders behind the popular prototyping tool Framer talk about their product. There is a standard introduction here you can find elsewhere online, but I especially appreciated Bok’s and van Dijk’s breakdown of how Framer fits into the increasingly crowded prototyping market.
I find many designers tend to place a tool like Framer as an either or proposition for prototyping (e.g. “I use Framer instead of Invision”). Yet it depends heavily on both the product and what kind of interaction you’re looking to test. And in the case of Framer, there’s also the importance of basic JavaScript code familiarity. That learning curve can scare some away, while attracting others like me with a more formalized development background.
Tethr →
Normally I don’t post about yet another Photoshop and Sketch friendly iOS UI set. But this is different; it’s made by the UI8 team, which already has a reputation and history around well done icons, wireframes, and general UI work (I own two paid web wireframe sets from them – the quality holds up.) Most importantly, it’s completely free as long as you provide an email address; it runs normally $78 on UI8’s own web site.
A brief history of web design for designers →
The Froont blog strikes again with a wonderful set of animated gifs that explain where web design started way back in the early 90s and where it’s going. The responsive web design animation is especially gorgeous.
11 tips for prototyping with Sketch →
I found these tips on the InVision blog a bit more centered around general productivity apps with Sketch more than centered to just prototyping. But the recommendations are all useful, especially those centered on duplicating and measurement (a.k.a. the option key is your best friend.)
Typographer’s typefaces →
Type Worship’s Jamie Clarke:
Over four years and across eight issues we interviewed 64 world-renowned designers1, including; Erik Spiekermann, Jessica Hische, Michael Bierut, Nina Stössinger, Mark Simonson & Seb Lester, plus owners of respected type foundries such as, Font Smith, Type Together and Process Type.
We’ve counted the number of times each typeface was selected and found consensus with the top 25.
FontShop glossary →
The next time you’re in a discussion about typography, for a design or other context, have this handy resource by FontShop handy. It’s a nice refresher on a lot of basic terminology, from ascenders to x-height.
My custom Yosemite icons
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.
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.
Product design teardown of the “Destiny” video game →
From the moment I first saw the Destiny beta, from the UI to the art direction and even the main ‘feel’ of the game, I knew there was something distinctly different about its game design. So props to the design blog Betterment for laying out some of the biggest hooks Bungie’s epic first person shooter/MMO have to offer. As many reviewers have noted, even with a severe lack of content and repetitive mission nature, there’s something supremely addictive about its gameplay. To quote Betterment author Jason Amunwa:
Destiny uses multiple systems to tease our brain’s pleasure center with anticipation of a reward, combined with activating our nucleus accumbens by making the reward variable at every level. It’s essentially commandeering players’ anticipation – whether it’s getting loot, exchanging Engrams, or what-have-you – and using it as an itch to motivate just one more play.
Our feeble brains’ pleasure centers never stood a chance.
7 rules for creating gorgeous UI (part 1) →
I’ve bounced between web design and development for years. As someone who has never had a formal instruction in visual design, Erik Kennedy’s primer on this Medium post isn’t a bad start for those new. I especially like his thought processes behind rule three: double your white space. Might be a bit overkill compared to what’s absolutely necessary, but it’s one of the first mistakes I see from design newbies, especially developers starting to dabble in design work.