All posts / JS / CSS / Design / Data / Motion

Wake

Read more

Bakken & Bæck, announcing Wake:

We couldn’t find anything that would allow us to quickly share visual work as a team, and we needed a better tool to keep us all in sync. Our design process was fragmented across different tools and channels. We were storing files in Dropbox, and giving feedback on email, Skype or Slack.

These tools are great for text-based communication, but they were not designed for the type of visual work we do. We needed a solution to keep everyone in the loop built specifically for designers.

Together with Chris we started building a prototype for a tool that would improve our own design workflow.

Wake is a new tool by Bakken & Bæck for collaborating around design, that let’s you “explain your thinking and get feedback”. It looks gorgeous.

Origami Live

Read more

Brandon Walkin, on Facebook’s engineering blog:

Today, we’re excited to release Origami Live for iOS, along with a major new version of Origami for Mac. Origami Live is a new app that lets you use your Origami prototypes on your iPhone or iPad. Alongside it, we’re releasing Origami 2.0, which has a lot of new features, including code exporting, powerful gesture support, Sketch integration, presentation mode, and more.

They also launched a new site with tutorials and documentation to get started with Origami.

Poole, the Jekyll butler

Read more

Mark Otto:

Poole is the Jekyll butler. It’s a fully furnished Jekyll setup, designed to be a consistent and flexible starting point for Jekyll projects.

I wish I would’ve had Poole when I made the transition to GitHub Pages and Jekyll. Out of the box, it offers layouts, a custom 404 page, RSS feeds, posts, and an example page.

Along with Poole, Mark released two excellent Jekyll themes today: Hyde 2 and Lanyon.

Master Your Typographic Adventures

Read more

Benedikt Lehnert:

Typography is the craft of arranging type with the goal to make language visible. We’re arranging type multiple times throughout the day; whether it be writing essays, summarizing meeting minutes or creating slides for a presentation. What usually happens is, we end up thinking more about what we write than how we write it.

The guide is beautifully illustrated. If you want to contribute, it’s available on GitHub.

Golden Ratio Typography Calculator

Read more

Although a year old, I just discovered the great Golden Ratio Typography Calculator by Chris Pearson. With a few clicks, it helps you create perfectly balanced typography from a set of parameters. He also posted a detailed write-up on the process and research behind it.

Convert Websites to PSDs

Read more

Page Layers

Page Layers:

Page Layers is a website screenshot app for Mac OS X. It converts web pages to Photoshop files with separate layers for all page elements. It enables you to open web pages in Photoshop and saves you lots of time when re-designing or improving existing web page designs.

Brilliant. It will not try to emulate CSS styles with blending options—all layers are flattened—but nevertheless a huge time saver.

Pixel Perfect Precision 1.1

Read more

The Pixel Perfect Precision Handbook by ustwo is an immensely useful little guide that every designer working in Photoshop should read. They just released an updated version of the book, which is available as an iBook and a PDF, that is updated for Photoshop CS6 and adds a whole bunch of essential tips and tricks.

freethroww: dribbble freebies

Read more

Great collection of the most popular dribbble freebies.

freethroww

Quick iPhone Prototypes with POP

Read more

POP (prototyping on paper) by woomoo is a new, free, app to quickly create rough iPhone prototypes. You sketch out a couple of screens on paper, take pictures of them with POP, and link them together by defining tap areas for each screen.

pop1

You have a limited amount of projects (two to start with, but you get an additional seven after confirming your mail) and by the looks of it you will be able to unlock more projects through in-app purchase soon. Projects can be shared from within the app as well as from the web—you’ll get a unique URL for each project that can be used to preview it.

The idea behind POP is great, but the implementation is lacking. The problem is that’s it a bit too quick and dirty. The only available transition is a fade, and the web preview has no transitions at all—as you click on something you get linked to a new, static, page. Especially since rough UI sketches tend to be difficult to parse, this is a major drawback. Without anything that resembles the native iOS slide animations you easily lose track of how the screens related to each other—which is, after all, the purpose of a prototype. It’s such a major drawback, in fact, that I wouldn’t recommend using the app in its current state. Hopefully this is something the woomoo guys will fix in a future update, but for now, FieldTest remains the best way to create iPhone prototypes from images.

Stanford's Entrepreneurship Corner

Read more

Stanford’s Entrepreneurship Corner is not new, but it’s one of the most inspiring resources online for someone who’s into product development. You’ll find talks by Jack Dorsey (Twitter & Square), Mark Zuckerberg, Phil Libin (Evernote), Drew Houston (Dropbox) and many more, and they publish a new talk every week.

WWDC 2012 Videos for Designers

Read more

Apple published the WWDC 2012 session videos—all 103 of them—last week. If you design for Mac OS X or iOS, watching just a few sessions is enough to get a grasp of all the new possibilities in Mountain Lion and iOS6 that you can take advantage of in your apps.

Note: you have to sign up as a developer (it’s free) to get access to the session videos.

iOS

What’s New in Cocoa Touch - An introduction to the most interesting news in iOS6. If you’re just going to watch one video about iOS, make it this one.

Introducing Collection Views - Remember how your developer partner used to pull his hair in frustration when you designed a grid view? Yeah, those days are over. And that’s just the beginning.

Advanced Appearance Customization in iOS - When iOS5 launched last year it introduced loads of new possibilities to skin and customize your apps. iOS6 introduces even more, and if you missed the corresponding session last year, this session includes a great recap of what’s already possible and how to cut your graphics.

Introducing Passbook, Part 1 - Get a sense of how Passbook works and how to design passes.

iOS User Interface Design - This talk is actually aimed at designers. Or at developers that try to design. Or something in between. It’s somewhat basic, but it’s a short, great and concise talk, and even an experienced designer can learn a thing or two.

iPhoto for iOS: UI Progression and Animation Design - Although nothing new is presented here, it’s an unusual and rewarding behind the scenes look at how Apple designed iPhoto for iOS. It’s an interesting clash of great problem solving and bad prioritization.

Game Technologies Kickoff - Overview of all the news in iOS6 for Game developers.

Mac OS X

What’s New in Cocoa - A quick introduction to the most interesting news in Mountain Lion.

Introducing Scene Kit - Apple apparently thought it was too much of a hassle implementing skeuomorphic designs, so they built an entirely new framework to fix that. Seriously though, this new framework looks amazing, and it will make implementing 3D elements in your app a breeze.

What’s New with Gestures - How you use and interact with gestures will change slightly in Mountain Lion, and there’s a brand new class that will help you bring Safari History-style swipes to your apps.

CSS Hat

Read more

CSS Hat is a new Photoshop plugin that converts layer styles to CSS; just click on a layer within Photoshop, and CSS Hat displays the CSS for that layer.

csshat

It supports drop shadows, inner shadows, inner glows, outer glows, gradient overlays, color overlays and strokes. So no Bevel and Emboss, but you’re hopefully not going anywhere near that anyway.

You can grab it for $19 .99 through gumroad.

Coda 2

Read more

Coda is a great editor. It was released in 2007, won an Apple Design Award, but sadly hasn’t gotten much love since. I’ve been using it for several years, but recently switched to Espresso by MacRabbit.

coda

Panic just announced Coda 2. If you’re an old Coda user, you won’t recognize much from Coda 1. Panic seems to have tweaked and improved almost every single feature, and added a ton of new ones; autocompletion of custom variables and functions looks amazing. They are also bringing much of the Coda magic to iPad—they’re calling it Diet Coda, and it looks like the best editor for iPad yet.

Coda 2 and Diet Coda will be released on May 24th, and you’ll get 50% off if you buy them within the first 24 hours.

Update: Andy Soell has been beta testing the app and posted a great write up on his blog.

MGTileMenu

Read more

Clever, open-sourced, iOS component from Matt Gemmel:

It’s designed for iOS 5, and uses ARC. It supports Retina and non-Retina devices, and works with VoiceOver. MGTileMenu is designed for use on iPad, but it will also work on iPhone and iPod touch.
</embed>

Instantly Get iOS Screenshots On Your Mac

Read more

John Marstall discovered a great way to instantly get screenshots taken on your iOS devices to show up on your Mac:

No, you won’t need to have iPhoto running for this to work. Take some screenshots on your iOS devices and they’ll automatically start showing up in this folder.

The basics: make sure your devices have Photo Stream turned on, search for PNGs in Library > Application Support > iLifeAssetManagement > assets > sub, save that search and add it to the Dock.

Serving Retina Images to the New iPad

Read more

Some great digging by Duncan Davidson and Steve Streza: turns out you have to save your JPEGs (that are over 2 megapixels) as progressive for them to be rendered correctly on the new iPad. Davidson:

After reverse engineering the limits and then later being pointed to the documentation about the limits, somebody suggested using a progressive JPEG file based on the observation that the large iPad hero image Apple uses is a progressive JPEG. I’ve not used progressive JPEGs in years, but following that suggestion, I gave it a shot. Lo and behold, it’s indeed the ticket to large JPEG joy on the iPad Retina display.

Interestingly though, Davidson isn’t convinced we should start saving all our JPEGs as progressive.

Startups, This is How Design Works

Read more

A well designed site by Wells Riley, explaining what design means and why it’s important:

Companies like Apple are making design impossible for startups to ignore. Startups like Path, Airbnb, Square, and Massive Health have design at the core of their business, and they're doing phenomenal work. But what is ‘design’ actually? Is it a logo? A Wordpress theme? An innovative UI?

Read it, share it.

Slicy from MacRabbit

Read more

The always great MacRabbit just released a beautiful tool for exporting PSDs into images. You name all your layers or layer groups with the filenames you want them exported as, e.g. “homeButton.png”. Slicy supposedly does the rest.

I always find it hard to get these automation tools to fit with my workflow, but Slicy looks promising. Worst case, I guess, I will name all my layers.

Slicy is 30% off for a limited time on the Mac App Store.

Keynote UI Library

Read more

For those interested in using Keynote as a design tool, Keynotopia has a huge Keynote interface library for sale (iPad, iPhone, Android, Windows Phone, the list goes on).

[Via DF]

Minify CSS and Javascript with Minicode

Read more

Minicode lets you minify your CSS and Javascript files in a simple and fast way from your OS X Dashboard. Drop any CSS or JS file on Minicode and you’ll get a minified version saved to the same directory as the original file, with “.min” appended before the file extension.

Minicode uses the awesome YUI Compressor. As you drop a file in the dropzone, the shutter goes down, your file shrinks, the shutter goes up and your file is saved. It’s as easy as that — no setup, just drag and drop any file.

Minicode runs as a OS X Dashboard widget and joins Loremify as another free handy little tool for designers and developers.

Download Minicode (1 mb)

If you have any feedback or ideas for improvement, ping me on twitter.

Minicode uses the YUI Compressor and thus requires Java. As of OS X 10.7, Java is no longer shipped with OS X, but it is very easy to install. If you try to minify a file without Java installed, Software Update will prompt you to install Java, and it will handle the setup for you.

Don't compress your PNGs for iOS

Read more

Bjango in “PNG compression and iOS apps“ on their blog:

[…] if you’re spending any effort compressing or optimising your PNG images for iOS app development, you’re wasting your time.

And then later:

In an effort to dramatically increase drawing performance of iOS apps, Xcode re-compresses PNG files as it builds. It premultiplies the alpha channel and byte swaps the red, green and blue channels to be sequenced blue, green and red. The result is optimised for iOS’s purpose, but as a side effect, ImageOptim’s work gets undone […]

I use ImageOptim all the time (it’s a great app), but I had no idea it’s meaningless when working with iOS.

Loremify 1.4: New UI & Keyboard Support

Read more

Note: An updated version of Loremify is available here.

An updated UI, new keyboard shortcuts and bug fixes bring Loremify to version 1.4.

Loremify?

Loremify is the fastest way to copy Lorem Ipsum. It lets you wrap in html, specify the amount of text, and copy it to your clipboard—all in one click. It runs as a Dashboard Widget in Mac OS X, and is completely free.

Download Loremify 1.4 (290kb)

New UI

OS X Lion introduced a dark gray Dashboard background, and since Loremify was also dark gray, it wasn’t the most exciting color match. Loremify is now brighter to contrast the background, and has a style more similar to Lion and iOS5.

Keyboard shortcuts

You can now control the entire widget through keyboard shortcuts. Press P, H or A to select Parapgraph, Header or Article respectively, type in the number of words or paragraphs you want, and press enter to copy.

Bug fixes

Loremify 1.3 wouldn’t copy anything to the clipboard for some users on OS X Lion. This should now be fixed.

Feedback

If you have questions, feedback or suggestions – ping me on twitter.

Loremify 1.2 Brings Improved Output

Read more

Note: An updated version of Loremify is available here.

I’m happy to say that Loremify 1.2 is here with an improved Header output and totally redesigned backplate. Let’s take a look at the output:

Loremify1.2 features an improved header output

Whereas a typical old Header output would be “Morbi malesuada nulla ner purus.”, Loremify 1.2 capitalizes the first letter in every word, and leaves out the dot in the end. I saw many users who copied a header and then went through the effort to do this themselves—Loremify now does this for you. I’m aware headers aren’t written like this in all languages out there—they aren’t in Swedish—but I hope this change reflects the typical use of the Header button.

Loremify 1.2 also boasts a new backplate, to remind you about those oh-so-awesome keyboard shortcuts. This is how it looks:

Loremify1.2 boasts a totally redesigned backplate

Updating is super easy; after downloading the new version and launching it, Mac OS X will let you replace any old version with the new one. I hope you’ll enjoy it.

Download Loremify 1.3 (209kb)

Say hi.

hello@
tobiasahlin.com

I love to design and make things. I used to make things at Spotify and Minecraft, and am currently a design engineer at GitHub. Say hi!

Tobias Ahlin Bjerrome
Stockholm, Sweden