#design

Stealing Time: How Technology Can Hurt or Harm Our Inner State

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.

Continue Reading

Enterprise Software Sucks

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.

Continue Reading

Create, differentiate, iterate – 10 pro tips on relaunching your startup website

venturevillage.eu

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.

Designing with Code

www.teehanlax.com

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.

First computer generated graphics film from 1963

techchannel.att.com

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 […]

Using <kbd> for fun and profit

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.

Continue Reading

Newton, Reconsidered

techland.time.com

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.

Why Files exist

blog.filepicker.io

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.

Can We Please Move Past Apple's Silly, Faux-Real UIs?

www.fastcodesign.com

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.

HTML for Icon Font Usage

css-tricks.com

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:

  1. As good of semantics as we can get
  2. 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.

Responsive Images and Web Standards at the Turning Point

www.alistapart.com

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 picture and 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.

Why Comic Sans?

www.connare.com

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)

WordPress Admin Icons Template

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.

Continue Reading

Nielsen vs Clark – they're both wrong

netmagazine.com

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.

Announcing Sketch 2.0

www.bohemiancoding.com

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.

The origins of the <blink> tag

www.montulli.org

Funny story from Lou Montulli, who is the credited inventor of the tag. As suspected of generations of web designers, it involved a bar and much alcohol:

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.

Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else

Coda Clips Teaser 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.

Continue Reading

The Mac in Futurama

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).

Continue Reading

HowTo: Styling Author Comments With Wordpress 2.7+

Wordpress Logo by kremalicious 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.

Continue Reading

HowTo: Set A Custom Gravatar Image In Wordpress 2.7+

Wordpress Logo by kremalicious 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.

Continue Reading

Wordpress 2.5+: Get Rid of That Sluggish Dashboard

Wordpress Logo by kremalicious 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.

Continue Reading

Awesome parallax optical illusion: Make a horse move

Parallax 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.

Continue Reading

WebKit team introduces CSS-based gradients

WebKit

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:

Continue Reading

HowTo: Changing the image icons in Mac OS X Leopard

Aperture File Types

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.

Continue Reading

9 Lesser Known Safari Features

www.danielmiessler.com

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.

First principles for choosing the right typeface

ilovetypography.com

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.

On choosing type - First principles:

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.

6 Web Design Tips from Leonardo da Vinci

designpepper.com

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.

Mac OS X Leopard: Designer’s Guide to Icons

www.smashingmagazine.com

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.

For reference you can browse the Human Interface Guidelines (HIG) from Apple online or download it as a big pdf-file.

Love the parallax

parallax 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?

Continue Reading

How to quickly generate encrypted .htpasswd passwords

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.

Continue Reading