iBeacon Fun at Panic

With the arrival of iBeacons in iOS 7, Apple was clearly moving into retail and public spaces in a whole new way. [...] With this new technology in-hand, it wasn’t too long before I put together a brand new office In/Out tracker called PunchClock. It uses a combination of a geo-fence and iBeacon tracking, plus a simple Sinatra backend hosted at Heroku.

The guys at Panic have been experimenting with iBeacons and have open-sourced the result, an internal app that tracks who is and isn’t at the office (although, as they put it, “it’s not for the faint of heart”).

There was a great CocoaRadio episode about iBeacons a few weeks ago as well.

Breaking Down Sketch’s Vector Tools

I’m going to teach you some secrets of Sketch power users, including how to customize and combine basic shapes into your own illustrations, letterforms, or icons; how to address technical issues that can be totally bewildering even to professional designers; and how to leverage several tips and best practices for your workflow.

This great guide by Peter Nowell gives a comprehensive explanation of Sketch’s vector tools. It covers both basic and advanced techniques as well as explaining how to work around common problems that you may have come across.

An Introduction to SVG Stroke Attributes and Animation

Using SVG inline provides total access to the graphic for complete customization and control over its output. This is especially handy when creating shapes by hand in the browser, or making edits to an existing graphic.

If you haven’t worked with SVG strokes before, this article by Joni Trythall is a great place to get started. It covers the related attributes and as well as the basics of animating them, all with code examples.

Codrops also published an article a while ago showing off some of the things that can be achieved with SVG strokes.

Better Onboarding for Web Apps

Better introductions for websites and features with a step-by-step guide for your projects.

If you have a web app, intro.js by Afshin Mehrabani looks like a great way to improve your users’ onboarding experience. It has good compatibility with anything above IE8, is fairly lightweight and as an added bonus supports keyboard navigation.

There are a few demos available as well as a far more in-depth look at it’s capabilities on GitHub.

Live Stream Your Photoshop Documents Privately

With LiveShare PS you can now broadcast any Photoshop document to as many people as you want through an instant LiveShare meeting. If you make a change to your Photoshop document, they’ll instantly see your changes in the LiveShare meeting—you don’t even have to hit the save button!

This looks like a great way to share what you’re currently working on, privately, with team members, friends et cetera. Whilst I think it could have done without the mobile mirroring feature (Skala Preview’s the best tool I’ve come across for that), this is still undoubtedly one of the more useful plugins out there.

It has a few more features, all of which are shown in the demo:

How Instagram Onboards New Users

Instagram, now well over 150 million users strong, exploded on the scene as one of the most rapidly-adopted products in the history of the world. How are things looking these days, over two years after it was acquired by Facebook?

If you don’t already read User Onboarding by Samuel Hulick, you’ve been missing out. As usual, in his latest teardown Samuel has highlighted both the good and the bad aspects of—in this case, Instagram’s—onboarding experience and provided some very valid thoughts on what could be improved.

Side Project Advice by Justin Mezzell

This is your chance to do something you actually care about it. Regardless of how impractical it may be. If you’re super into underwater basket weaving, underwater basket weave like everyone is watching. If you do something just because it has mass appeal and other designers will probably like it, that’s a flimsy motivation. Eventually, your preference for other things in life that you actually care about is going to win out.

Justin shares some solid advice in this article. If you want to work on a side project but aren’t sure where to start (or even if you’re already working on one at the moment for that matter), this is definitely worth a read. TL;DR?

Make something worth a damn about something you give a damn about.

Web Technologies Hanging Out Together

As a beginner, understanding how the different languages you learn interact with each other can be confusing. I thought we could pair up a variety of languages to see where they intersect and communicate.

Whether you’re just getting started with web development or want to get into it but are not sure where to start, this article by Chris Coyier is a must-read. He gives a great overview of HTML, CSS, Javascript and PHP, explaining their usage, best-practices and how each of these languages interact with one another.

Stefan Sagmeister on The Great Discontent

Stefan Sagmeister:

I’m completely flabbergasted that almost no one talks about beauty within the world of design. If someone does, it’s often, “Well, this is not what we’re about.” Fuck you! If you made something today that was actually beautiful, you did a lot. I think that’s something to be embraced and be proud of. There is this notion out there of designers being seen as people who only make things pretty as if that’s somehow lesser. Just look at the world right now, be it American strip malls or public housing. How much of it is so extremely ugly and built under the guise of functionality, even though it doesn’t work all that well? You can drive for hours and hours through this country, on highways and byways, without encountering beauty. It’s amazing.

The quality of the content on TGD is always good but this fascinating interview with Stefan Sagmeister is possibly my favourite one to date.

Michael Bierut Talks About Massimo Vignelli, Logos & How Designing Has Changed

Michael Bierut talks about his mentor Massimo Vignelli, how the internet has changed the way we do design work in the 20th century and what makes a logo endure.

This is a great interview with Michael Bierut for The Creative Influence. Michael worked with Massimo for 10 years, starting in 1980 right out of school and leaving in 1990 having become the vice president of graphic design at Vignelli Associates.

He has a fantastic perspective on design and there are a few great quotes in this video; my favourite possibly being:

I learnt specifically from [Massimo] the impact a designer can have in the world and the responsibility that goes along with that impact.

Check out the full interview:

Banksy’s Artwork in LEGO

This is a fantastic series by photographer Jeff Friesen who, with his daughter, has recreated some of Banksy’s most iconic work in LEGO.

Banksy Balloon Girl Banksy bouquet thrower Hanging Man

Check out the rest of the “Bricksy” gallery here.

All the RGB Colours in One Image

But in every coder’s life there comes a problem that would take real amounts of time to solve in a “fast” language, and using Python would be out of the question. That problem for me was filling in every RGB colour in one image.

The result of this experiment by Max Golden is a series of 4096px x 4096px PNGs containing 16,777,216 unique colours. I like that he took it a step further and filled each pixel based on nearby colours to make the images little more visually appealing. His article explains the algorithm used but he’s also included full-size PNGs at the bottom of the post (as well as the the source code on GitHub). Whilst maybe not pretty, the results are definitely interesting:

1

2

Generate ICNS Files in Sketch

Sketch.app plugin for generating an Apple Icon Image .icns from a sequence of artboards OR automatically from a single layer. Includes standard OS X icon sizes and @2x versions for high-density displays.

This is a useful Sketch plugin by Nathan Rutzky that allows you to generate an ICNS file from your artboards (or from a single layer but please don’t do that) without having to go through the terminal. It uses the recommended “iconutil” command to convert them so your ICNS file will be compressed and ready to go.

If you want to know how to do this manually, I wrote an article explaining the process a while ago.

Are Hollow Icons Really Harder to Recognize Than Solid Icons?

By studying the data from more than a thousand test participants, I found that hollow icons are not necessarily less usable than their solid counterparts. However, the results are actually a bit more complicated.

This is a good article by Curt Arledge, finally putting some solid research behind the hollow vs solid icon debate. As it turns out, Aubrey Johnson’s original article on the matter was technically correct but once you dig down a little further, there is actually very little difference between the two styles.

Curt’s results are based on 20 icons, tested by 1260 people over a 10-day period. Of these 20 icons, the hollow versions were selected about 0.1 seconds slower on average than the solid ones, however, of those 20 icons 3 were selected faster when hollow and 9 were selected in exactly the same amount of time whether hollow or solid.

The full article is well worth a read but I think the difference between the two is so minimal that it doesn’t really make any difference as long as you draw clean, simple and recognisable icons.

Eyes on the Road

Volkswagen:

Mobile use is now the leading cause of death behind the wheel. A reminder to keep your eyes on the road.

Volkswagen are renowned for their clever ads but this public service announcement is one of the most effective pieces of media I have ever seen from the company.

Adobe Creative SDK

The Creative SDK is a rich set of iOS components creating a new era of connected creativity and a seamless workflow between your mobile applications and Adobe Tools and Creative Cloud services, reaching millions of new users.

Adobe announced a lot of stuff at their event yesterday but I found this particularly interesting. Whilst it’s currently only available to a select few, it will eventually allow any 3rd party developers to work with Adobe’s Creative Cloud (which currently has 2.3 million members) to extend the capabilities of their apps. This includes things like pulling layers and groups directly from Photoshop files into your app and access to photo editing tools on any device as well as the ability to work with Adobe’s new hardware. I’m really looking forward to seeing what people do with this!

The Origin of Apple’s Icons

Susan Kare walks us through some key points regarding the design of icons and symbols. Kare is an artist and designer and pioneer of pixel art; she created many of the graphical interface elements for the original Apple Macintosh in the 1980s as a key member of the Mac software design team, and continued to work as Creative Director at NeXT for Steve Jobs.

A fascinating look into the stories behind some of the most recognisable computer icons ever created. The story behind Apple’s command icon (⌘) is particularly interesting,  originating as the icon used to mark “places of interest” on Swedish campsite sign posts. This talk by legendary icon artist Susan Kare at E.G. Conference is well worth the 20 minutes it takes to watch it.

The World’s Ball

Early soccer balls were hand-sewn and made of leather. They were never perfectly round, and inflating them required some skill. The laces had to be undone before an interior air bladder was filled and tied with a thread; then the laces were retied.

In the spirit of the World Cup currently going on in Brazil, the New York Times have published this interesting (interactive) look at the evolution of the design and construction of the balls used since the first tournament in Uruguay in 1930. Whilst maybe not the most comfortable to play with, the balls used up until 1954 definitely looked best.

The Future is Already Here

Watching the WWDC sessions, there’s lots of subtle hints at where iOS is going: talk of responsive simulators suggest that we’ll see some variation from the existing iPhone (or iPad) screensizes. But today, I want to talk not just about bigger iOS devices but smaller ones. See, all this talk of wearable technology (and rumours of an Apple TV) has made us wonder how iOS might adapt to being on these different devices – and how the technologies announced at WWDC might help with this.

To say that we’re excited about iOS 8 would be a major understatement! Nik has written up some of the things we’ve been thinking about at Realmac HQ.

Brad Frost at TEDx

Brad Frost:

Work hard.

Don’t be an asshole.

Share what you know.

I love that quote. In this talk at TEDxGrandviewAve, Brad manages to get across an important message in an entertaining fashion. This is easily one of the best videos from TED I’ve watched in a while.

Also, Chris Coyier’s license for CSS Tricks is brilliant.

Visit the Archive for more posts