As interest mounts in the upcoming launch of Apple’s highly anticipated yet still completely speculative iTablet/iSlate/iNextBigThing, the industrial designers at long-time Apple partner Frog Design, have opened their archives to present some proposals for an early Apple tablet (code-named Bashful).

Concepts for this early pre-touch tablet included one with an attached keyboard and one with a floppy disk drive and convenient handle for maximum portability. An attached stylus helped the user interact with the screen. One Frog/Apple tablet concept also included an attached phone.

Tim Brown has written one of the most comprehensive guides to font embedding with CSS that I’ve ever read. There’s some good information here and all the common stumbling blocks have been addressed.

Kris Sowersby describes the process of designing and developing a typeface and taking it from concept to a commercial product — a process that took around two years to complete.

One thing is certain, typeface design is a long, involved process with many hours of seemingly endless tedium.

In an article on the web-design advent calendar, 24 Ways, Meagan Fisher advocates setting aside Photoshop and building design comps directly in our preferred flavour of HTML.

That’s how I always work anyway. Only once have I ever built a design in Photoshop before writing the code and that was for the front page of this website — it took ages and felt totally un-natural and counter-intuitive to me. I did it because I understood that that’s how all designers work. I wanted to try it out to see if it made the process any easier for me, it didn’t, at all.

Even so, I think Meagan has overlooked a quite important point: not all web-designers are writers of code.

Continue Reading…

I’ve just found out that I’ve won this great poster from Travis Neilson. How cool is that? I’m thrilled.

Are they serious? Have AOL paid good money to have these logos “designed” or were they thrown together by somebody’s kid with MS Paint and a couple of stock photo’s?

Can I stop laughing now?

An online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application. Wireframes, on-the-fly, in the browser. Cool.

The paint has now dried on the redesign of the Urban Mainframe’s home-page. The celebrations have begun to diminish and normality is being restored. As the dust settles, I thought I’d write a little about the thought processes behind the design. I’d also like to document a few of the little tricks I’ve employed (because I’m ever so proud of them).

Despite trying various tweaks and reshuffles of the previous version of the home-page, I was never totally happy with it. Looking back, I think I tried to convey way too much information on that page, which made it look terribly cluttered. It simply didn’t “feel” right to me. The problem was that I had no idea of how to remodel it, no inspiration.

Continue Reading…

When I said users don’t read anything you put on the screen, I was lying. Users do read. But users will only read the absolute minimum amount of text on the screen necessary to complete their task. I can’t quite explain it, but this kind of user myopia is epidemic. It’s the same problem, everywhere I turn.

How do we treat user myopia? How do we reach these users?

More and more, I’m thinking we need to put the [important information] — for new users only — directly in their line of sight. Nothing complicated. But at least then it’d be in the one — and apparently the only one — place myopic users are willing to look. Right in front of their freakin’ faces.

The next time you’re designing a UI, consider user myopia. You might be surprised just how myopic your users can be. Think long and hard about placing things directly in front of them, where they are not just visible, but unavoidable. Otherwise they might not be seen at all.

Let’s face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered “Web safe,” and those ones aren’t exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let’s say, headings? Or pull quotes? What then?

You have a few options. Many people just opt for more elaborate CSS font stacks, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.

Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? These methods are easier than they sound and the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.