big dark media » design

Return of the Son of the CS3 Icons

Scott — Fri, 25 May 2007 17:40:46 +0000

Reactions to the Adobe CS3 ‘periodic table’ product icons were mixed, with some strong negative opinions flying about. However, some folks not only got on well with the design system, but took it to the next level- check out this completely CS3-ized dock – links/reference courtesy of the Unofficial Apple Weblog.

Now I didn’t mind the CS3 icons after an initial adjustment period, but this may be taking it a bit too far… I can’t even guess at most of those applications in there.

Veerle on CSS-Based Tabs

Scott — Tue, 08 May 2007 15:43:37 +0000

Veerle Pieters has posted a great walkthrough on how she and Roger Johansson created a beautifully-degradable tab interface for a list element in a recent real estate site redesign. This is a brilliant bit of insight into styling well-structured, semantic markup – at it’s core just a standard unordered list with some contained markup in each list element – that looks beautiful (vertically ‘expanding’ it’s image backgrounds to handle different amounts of content within), and degrades beautifully when CSS is turned off.

ALA 2007 Web Design Survey

Scott — Tue, 24 Apr 2007 15:14:05 +0000

I often ponder, as I look out upon the crowds at conferences I attend, just how much the topology of web designers (and developers) as a market has changed in the 12 or so years I’ve been involved with it. But my colloquial opinion is just one view onto a rather large community. So I’m pleased to see that A List Apart is starting an annual survey of the web design market to get more aggregate data on the topic. I’m really looking forward to reading the results – and if you’ve already read this far, I’d strongly recommend taking the survey and representing your own experience and views.

Participate in ALA’s 2007 Web Design Survey here, and if you’re so inclined, discuss the survey and it’s questions here to help shape the process in the future. A great idea who’s time has certainly come.

panic coda – a first look

Scott — Mon, 23 Apr 2007 22:16:56 +0000

There’s a new player in town for web editing apps, name of Coda. Coda is made by those wonderful guys at Panic who make the most excellent FTP application for Mac OS X – Transmit. If you’re a Transmit user, one of the first impressions you probably got was that the Panic folks did a very good job of focusing on a specific problem and solving it very well. Coda takes that ethic and pitches straight for Mac OS X-based hand-coder web developers who currently use a lightweight text editor and Transmit to wrangle their source files. Let’s take a peek.

First up when launching Coda (well, after you’ve defined a few sites to begin with), you’re greeted with a rather elegant looking list of sites to choose from. In the shot below, I’ve just two- this one and another ‘test’ site I had on hand.

Coda in Site Chooser View

After selecting one of your sites, you’re dropped into what I consider the main workspace, your file, a list of all the files in your site alongst the left of the screen (which yes- can flip between local and remote views) that allows transfer of files using a streamlined version of the lickety-split-quick Transmit engine, and nothing else. As so:

Coda in Code View

The code editor is nice- largely as it’s built on the SubEthaEdit engine, which is already a well-proven editing core on Macs. SubEtha also provides a cool collaboration feature by way of the codebase- you can share editing of the document with anyone else available using Coda (and perhaps SubEthaEdit?) accessible to you online. There’s a great grep-esque visual search and replace feature that actually lets you specify variables visually- nice touch.

You can preview your page easily via the built-in WebKit rendering engine, and with a slightly added touch- by turning on the DOM inspector you can visually select elements on your page and see their exact cascading location in the DOM. Makes it very easy to see the elements of your page in context, and understand how their ancestors may or may not be affecting them. In the screenshot below – which is admittedly teeny – the DOM elements are listed underneath the preview, with the selected element in blue at the far right.

Coda in Preview/DOM Inspection Mode

CSS styles are no second-class citizen in Coda – you can inspect the CSS files directly with a visual editing mode (think Dreamweaver’s CSS Rules editors broken out to a single-pane interface with a ‘menu’ of sorts on it’s left) as well:

Coda in CSS Edit Mode

All in all, makes for a very compelling 1.0 product. Kudos to the Panic team for doing some great work on a very focused, Mac-savvy application. I don’t see it replacing Dreamweaver CS3 for me anytime soon, but Panic’s definitely got a nice application on their hands here. It’s also just plain cool to see such elegant innovation from a Mac-specific development house, cause you know I loves me some Macintosh.

Check out Coda at the Panic website, and make sure to read Steven’s blog post about the app itself (with far more detail than I’ve hacked together here, by all means).

35 Designers x 5 Questions

Scott — Fri, 20 Apr 2007 21:43:43 +0000

This has to be the most awesome web design article I’ve read in a while. Smashing Magazine interviews 35 designers with 5 questions, resulting in 175 awesome tips and tricks from leading voices in the web design community. Great source of inspiration, advice and know-how, strongly recommended.

Check out the article.

(Thanks to Don Crowley for the twitter-nod and link.)