The promise of modern technology has always been: use it and you’ll have more time for the important stuff in your life. As it turned out, it’s quite the opposite. There’re a lot of socioeconomic reasons for this development but, to some degree, it’s caused by the way digital services today are designed from the very beginning. Those services are stealing time by design, tricking us into thinking the stuff we do on there is somehow important.
When asking people about printing there’s one common ground – namely, that it sucks. This sentiment comes from the experience with connecting printers with the devices to print, and the act of printing itself with a plethora of print settings to chose from.
Was one of the people interviewed by Charmaine Li from VentureVillage about relaunching a startup’s website where I talk a bit about ezeep’s relaunch.
In there, Christian Hanke from Edenspiekermann makes a good point. A web site is so much more than just a showcase of products:
In the early stages, entrepreneurs are likely to be more focused on building and refining a product rather than developing a brand identity. But as a startup begins to scale, taking a longer-term brand approach – which involves thinking in broader terms than just the product itself – is an important part of enabling product extensions and expansion to new markets, says Hanke.
I try to repeat that at least 2 times a day:
The problem with Photoshop is that what’s being created is actually a fiction. It somewhat resembles what the final product might look like, but it’s not real. Layout and typography decisions are made that often don’t translate accurately to HTML. We spend hours designing for a medium that’s interactive and responsive, but we start by producing mockups that are static and inflexible. If great design is not only aesthetics but also how it works, then it’s time to make development part of the creative process.
From the AT&T; Archives:
This film was a specific project to define how a particular type of satellite would move through space. Edward E. Zajac made, and narrated, the film, which is considered to be possibly the very first computer graphics film ever. Zajac programmed the calculations in FORTRAN, then used a program written by Zajac’s colleague, Frank Sinden, called ORBIT. The original computations were fed into the computer via punch cards […]
There’s this HTML element meant for marking up keyboard keys named
<kbd>. Obviously it can be styled with CSS so why not use it to make those elements look a bit more like hardware or the iOS and Android software keys.
Windows 8 and Internet Explorer 10 make it possible to pin your site to the Metro start screen as a new tile. The tile then is a bookmark to your site and you can control the icon and background color being used.
Skeuomorphism on mobile devices has come a long way:
Using a second unit, Steve Capps, one of Newton’s creators, showed how you could use it to order a pizza by moving topping icons onto a pie and then sending out a fax. In 1992, that was show-stopping stuff.
But instead of another Newton history article, this one is an interesting “hands-on assessment” of Apple’s first PDA. Almost 20 years after its release, Harry McCracken got himself a fully working MessagePad H1000 over eBay and tested it.
Would be interesting to know if the same could be done with an iPhone 4S or Galaxy Nexus in 2032. I doubt it.
This has been said many times, but it bears repeating:
Files are abstraction layers around content that are necessary for interoperability. Without the notion of a File or other similar shared content abstraction, the ability to use different applications with the same information grinds to a halt, which hampers innovation and user experience.
A good example are all those note taking apps on iOS which usually only require plain text. When using Apple’s iCloud to sync their data, they lock your content into one app without any way to access this from another app. Compare that to apps using Dropbox for note syncing: I can throw as many apps I would like at my notes folder full of .txt files. The note app you’re using has some new quirks after the latest update? Just switch to another app. Apple’s iCloud syncing Notes.app having some new quirks after the latest update? Well, you and your content are doomed.
But the solution can’t be throwing a full file system at the user:
Now, I agree with Steve Jobs saying in 2005 that a full blow filesystem with folders and all the rest might not be necessary, but in every OS there needs to be at least some user-facing notion of a file, some system-wide agreed upon way to package content and send it between applications. Otherwise we’ll just end up with a few monolithic applications that do everything poorly.
Just applying the PC concept of a file system to post-PC devices, like Android and Dropbox did, makes only geeks happy but not the majority of users. While useful it’s still too abstract for most users. That’s why even Android kind of hides the file system, there’s no built in app to browse it directly. But at least Android has Intents, allowing users to send any data between different apps.
Apple already solved the problem of a file system being too abstract for users a long time ago, but without any app lock in. The Newton OS on MessagePads stored everything in object-oriented databases called soups. The “union soup” could be accessed by any app (“packages” to be exactly) on the system. Today, this is happening only rudimentarily on iOS, like when you start typing a recipient in Mail and it gets auto-completed from the Address Book data which obviously is only possible with Apple’s apps.
Soups took away the need of manual file management without cutting access to the content. iCloud needs to be the new soup.
Apart from a nicely responsive admin area, WordPress 3.4 now includes retina assets for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.
Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a great piece putting everything together.
Digitally re-creating real materials and analog objects very quickly becomes aesthetics for aesthetics sake. It’s hard to believe that all but a minute percentage of Apple’s user base has a tan-suede–bound calendar or book of any sort, or anything else that looks remotely similar. Unfortunately, these are the characteristics of skeuomorphism that a vast majority of UI designers employ when they use this approach (see Blackberry’s Playbook). Ultimately, it encourages designers to become less critical and less inventive, which is detrimental to evolving new and improved solutions.
He argues skeuomorphism hinders designers in creating something truly innovative. Also, some good arguments on why Microsoft’s Metro interface isn’t the answer:
Sure, these graphic elements don’t use “superfluous” drop shadows and renderings, but they don’t really use space any more efficiently than many skeuomorphic iPhone apps. It is highly debatable whether they need to be as graphically dominant or whether the aesthetic form is purely driven by function. Metro’s graphic elements are largely abstracted representations of their function, so from a modernist point of view, it is interesting to think of what else could be stripped away to enhance their function.
Chris Coyier on an accessible implementation for icon fonts:
Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best. […]
And our major goals here are:
- As good of semantics as we can get
- As little awkwardness for screen readers as possible
Spoiler: the key is to map the icons to the Private Use Area instead of “real” characters in the font files and injecting them with pseudo elements.
I’m using Font Awesome on this site which comes with icons mapped to PUA, so everything should be good for screen readers. Only concern to me are the quite ineffective CSS selectors like
[class*=" icon-"] but this makes it nicely flexible.
Good overview about the patterns currently being discussed:
Recently, all of the ongoing discussion around responsive images just got real: a solution is currently being discussed with the WHATWG. And we’re in the thick of it now: we’re throwing around references to
img set; […]
The markup pattern that gets selected stands to have a tremendous influence on how developers build websites in the future. Not just responsive or adaptive websites, either. All websites.
Naturally I’m in the
picture camp, this just makes most sense to me.
The creator of Comic Sans, Vincent Connare, revealing the irony of it:
Comic Sans was NOT designed as a typeface but as a solution to a problem with the often overlooked part of a computer program’s interface, the typeface used to communicate the message.
There was no intention to include the font in other applications other than those designed for children when I designed Comic Sans. The inspiration came at the shock of seeing Times New Roman used in an inappropriate way.
He also has this presentation dubbed I hate Comic Sans (pdf)
Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.
Awesome overview about all the currently available techniques.
Great middle ground arguments from Jason Mark in this recent controversy about mobile web experiences:
The truth is when working on mobile you should always look at the site analytics and make smart decisions based on what you find. If you find that your mobile users use the site in a significantly different way than desktop users, check out Nielsen’s guidelines and see which apply to you. And if you find that your mobile users are accessing the same content as desktop users then consider a responsive design.
Tim Kadlec made some valuable tests about what assets get downloaded by which browser when using different media queries.
Remarkable update to Bohemian Coding’s Sketch app. It’s like Photoshop but with only the UI design related features included:
We wanted to provide a real alternative to Adobe’s Photoshop or Fireworks and we believe we have succeeded. It’s an ambitious goal for sure but if you’ve been using Photoshop’s vector capabilities combined with Layer Styles, we think we may have something better.
Funny story from Lou Montulli, who is the credited inventor of the
It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it.
With Instagram for Android there’s once again an app getting ported to Android from iOS which doesn’t follow the platform specific guidelines with a lot of elements. But this time it’s a bit complicated, let me explain.
Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a Wordpress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I’ve provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a Wordpress version. And the non-Coda users can download an html file with all the links included.
Additionally you’ll find a huge list within this article with the separated links in two versions for each site. And finally I’ve put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time.
Time for some Mac Futurama crossover geekiness! In a fun watching process I’ve compiled a list of all the references to Apple’s Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running System 6, System 7 or OS 9 ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
Since my update to Wordpress 2.7 I’m pretty much into all the new comments stuff. As I’ve written before, the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes Gravatar styling and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above.
Sure enough I’ve upgraded immediately when Wordpress 2.7 was released. Among all the other things that changed in this new version the comments functions got a massive overhaul. But the new comment loop with the new function
<?php wp_list_comments(); ?> lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the Wordpress backend.
In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I’ve just released my own coffee cup icon but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X.
Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
For quite some time I use my Ubuntu machine as a file and backup server for all Macs in my network which is perfectly accessible from the Finder in Mac OS X. There are some instructions available in the web for this task but all failed in my case so I wrote my own tutorial with all the steps needed for it to work properly.
Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.
Been so in love with the parallax effect that I have to post another article about it. It’s time for a first showcase of websites using this effect. At the end of this article you’ll find some tutorials for making this effect too.
As you may know there’s a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an earlier post there is already some usage for it around the web while this effect seems to be first used by the guys from Silverback. If you don’t know what this effect is about head over to thinkvitamin to get to know what it is and how you can achieve it.
If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer Anthony Piraino crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie.
They won’t stop with their cutting edge love. After having text-shadow implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it’s not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
Writing right now on a longer article about text-shadow and it’s implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin’ Safari, the blog of the WebKit development team:
After i released my Aperture File Types icon set many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn’t as easy as dropping them in Candybar into a well for image icons cause there isn’t any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.
Cool stuff, like the Inline Dictionary:
Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut.
Nice article over at i love typography about what to have in mind when choosing a typeface for your project, whether it’s for web or print.
Before we get to the nitty-gritty of choosing type, let’s briefly talk about responsibility. Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. Personally, I’m always a little nervous about using a newly acquired typeface. A new typeface is something like a newborn baby (though it doesn’t throw-up on you): don’t drop it, squeeze it too hard, hold it upside-down; in other words, don’t abuse it, treat it respectfully, carefully.
An awesome creative idea for a blog post about Web-Design from Joshua Clanton:
Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.
Nice article on Smashing Magazine by Kate England. It’s the Human Interface Guidelines for icons in a nutshell: Mac OS X Leopard: Designer’s Guide to Icons:
To get really beautiful icons, Apple recommends that you let a professional designer create your icons. Despite all the eye candy and realism that is possible to apply to icons, less is more. Strive for a simple solution using one easily recognisable object. The basic shape or silhouette of your icon can help users to quickly identify it. If you aim for an international market, your symbols need to also be internationally recognizable providing Worldwide Compatibility.
If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
As you may know you can easily password protect your website or parts of it using an htaccess file with special instructions on an Apache-based server. For using this method you just have to put a file named
.htaccess (which includes the instructions for the webserver) and a file named
.htpasswd (which includes the login-accounts) in the directory you want to have password protected. But you have to encrypt the passwords of the login data for yourself, which is a quick task on a Mac.