Posts tagged 'Design'

Firebug Gets A Little Buggy

Firebug is the web developer equivalent of a hammer to a carpenter. In other words without this valuable tool hundreds of thousands would not be able to do their job and make the web what it is today. So even small changes to the interface are going to ruffle some feathers.

I spent a good half day trying to figure out why my precious Firebug wasn’t behaving like its usual self. For one thing, it wasn’t showing JavaScript errors in the status bar icon like it usually does. It also displayed a message saying “Reload to activate window console” whenever I would bring it up. This makes debugging impossible if I have to keep refreshing the page everytime.

It turns out the Firebug developers made a teeny, tiny tweak to the interface. The screenshot on top is the newer Firebug, version 1.4. The bottom half of the screenshot is from an earlier version. See the difference?

Screenshot of Firebug 1.4 vs the older 1.3 interface.

The ‘X’ used to hide the Firebug window in older versions has been replaced with an Off button. Unfortunately the Firebug developers changed the behavior as well. The Off button deactivates Firebug for that website which explains why JavaScript errors disabled in the status icon. The button that I have come to accustomed to for minimizing the Firebug panel is that circular down-ward arrow about 50 pixels away.

This is a usability nightmare!

  1. The hide Firebug functionality isn’t where the user expects it, especially for long-time users who have developed a muscle memory
  2. The Off button is ambiguous to what the action does (a better word would be deactivate, though that doesn’t quite fit)
  3. The Off buttons breaks away from the rest of the paradigm of the interface (icons are for actions like inspect, and pause while words are for different tabs)
  4. and the Off button is a much larger than the minimize button even though the minimize button is used far more frequently than the off button

Firebug 1.4 interface paradigm

I now have to focus in order to minimize Firebug taking mental energy away from my task. If I’m not paying attention I can turn-off Firebug for the site I’m working on and then I would have to reload the page to get it working again. These sound like little things but compounded one hundred times and it can drive you batty.

So while the latest Firebug update is not technically broken, a poor interface decision sure makes it feel like a buggy mess.

Timelapse Of iPhone Interface Design

87 snapshots taken during the design process for the iPhone app Beats. It’s interesting to see something like this come together.

(via bobthecow)

Newsweek.com Redesign: Your Dam For The Flood

Newsweek.com Redesign

The folks at Newsweek unveiled a new redesign for their website today, nearly one and a half years since their last one. From a post about the new changes, the redesign aims to help visitors sift through the “flood of information on news and events every minute of every day” by “continuously filter[ing] it to find the most important stories and concepts for our audience” while “embrace[ing] the best work of other journalists around the Web and the most thoughtful questions and comments of our readers” in order to “create a forum for a continuous – and continuously worthwhile – conversation about key events and issues”. If only their writing was as simple as their new header.

Newsweek Header: New vs Old

The new Newsweek header (top) is much cleaner with a softer tone and less emphasis on the bold red associated with the magazine. Simple, clean headers seem to be a rising trend on news sites these days as usability and user experience become more of a focus. The old header (bottom) had a sense of authority while this new header design is toned down, as if to convey a lack of confidence in their place in the world. I am not a fan of the rotating headline ticker which clutters up the otherwise clean navigation.

The content on the homepage is also a cluttered eye sore. There is no clear structure to the information and the auto-rotating carousel of feature stories is distracting. I dig the effort to link out to external sources. This is what the web is all about but it does come off as Newsweek giving up on its quest to be a news leader. This could have been executed better to complement their own content rather than outshine it.

My biggest problem is it is impossible to scan the homepage. The content appears to be laid out in a random order like an amateur scrap book. There is no central focal point except for that ginormous 336×850 ad on the right. Come on Newsweek, don’t you know about the F shaped reading pattern on the web? Why would the headlines be aligned along the right side of the page?

It still appears Newsweek is a print-focused organization with the attitude of “if you put it on the page, readers will read it”. Looking over at the old design, it seems this redesign is a step-back. In it’s efforts to be a guiding hand in filtering the flood of news, Newsweek has become nothing more than a dam clogging the flow of information. My advice: turn Newsweek.com into a repository of articles from the magazine and focus on that. The world doesn’t need an old media publication half-ass its web offerings.

Other Points of View:

The New York Times Is Preparing For The Future

With all of the turmoil about the future of journalism, the New York Times is taking a proactive role in staking out it’s future in what might be a newspaper-less world. Today the company released a downloadable Adobe Air application that brings together the immediacy of the online world with the serendipity and browsing of the physical world. See a video demo of the application in action.

Times Reader 2.0 Front Page

The Times Reader 2.0 is a slick product with an advertising and freemium business model. The tool offers some sections for free, like the front page, while charging $14.95 a month for access to others. John Biggs from Techcrunch is thinking about making the switch to all digital from paper delivery which is costing him $40 a month in Brooklyn. I’m curious as to how many people will put up with a seperate app dedicated to news sitting next to their web browser and e-mail client. And how many will be willing to shell out $15 a month for the same content that is already available for free on their website.

I think this is the first step to the New York Times setting up a pay wall like the Wall Street Journal. Unlike the Wall Street Journal, The New York Times looks to be pushing a monthly fee over a micro-payment business model which will ultimately fail.

The other interesting idea involved the Research and Development group at the newspaper. First off, the fact that a large media company has a R&D group boggles my mind but it totally makes sense to tackle the new technology that will be shaping their business in the coming years head on. Second, the New York Times is very interested in making their content work on the slew of portable media devices that are popping up everywhere like netbooks, the Kindle, and mobile phones. The video below taken by the Nieman Journalism Lab shows how they’re experimenting with e-ink readers and figuring out how their content will work on devices that aren’t even invented yet.

The future of media is not a single medium with one or two supporting business models, but one with many outlets tailored to different devices with just as many different ways to monetize it. The New York Times is building the infrastructure to handle this, it’s the smaller news outlets that are going to have a tough time adopting to this new, fragmented world.

Mozilla Needs Your Feedback For Their Redesign

What does an open-source company do when they need to re-design their site? Open up the decisions to their community. Mozilla has reached out to Happy Cog Studios, noted for their WordPress interface revamp, to give Mozilla.org a makeover. Round 1 of the project is up at RedesignMozilla.org with three mock-ups ready for a critique from anyone who can fill in a comment form.

None of the designs really jump out at me. The 2nd concept tickles my fancy the most but the header is too big and lacks the focus on Mozilla’s projects which is what the Mozilla Foundation is all about. I guess what I like the most about concept2 is the colors. Concept3 seems a little too gimicky/amateur and concept1 is too bland.

Blue and orange grunge concept for Mozilla.org redesign.

Open-source is all about sharing and listening to feedback. When it comes to a redesign, the more feedback you can get the better. I wish we could do a community-involved redesign at work. I wonder what people would come up with?

(via Daniel Mall)

Turn Your Fridge Into Photoshop Using Magnets

Have you ever waned to turn your fridge into a graphic designers computer screen? These $25 magnet kits from meninos.us will transform any plain, metallic surface into an industry-standard graphics app. There’s a kit with Adobe Photoshop panels and a kit with Adobe Illustrator panels so no graphic designer will feel left out. Because if you spend most of your day in front of the interface, getting up for a quick snack might seem a little confusing without the familiar screen.

Adobe Photoshop Magnet Kit

This reminds me of my first, and only, drawing class in college. I’m not much of a physical media guy so when I made a mistake on my sketch pad I immediately made a gesture to undo. It took me a second to realize I wasn’t in front of Photoshop. I suppose these magnets wouldn’t help, but that’s besides the point.

(via s2999.com)

Veer’s Top 10 Typefaces For 2008

I got an e-mail from Veer.com, distributes of fine fonts, today celebrating their picks for the top 10 typefaces of 2008. I really like their first pick, Calgary Script, with it’s curvy strokes that create a retro feel that is so popular today.

Sample of Calgary Script typeface

The 5th typeface, Memoir, has the feel of Papyrus (which is a bad thing) due it’s rough edges. I kind of like it as a regular script typeface.

Sample of the Memoir Typeface

Guedel Script is kind of freaky. It reminds me of a Halloween dance.

A sample of the Guedel Script typeface

You can see the entire list on Veer’s blog.

Multifarious Design Links

I’ve been doing a lot of reading and not a lot of blog-idea-generating lately. So here are some of the best stories I’ve stumbled across during the last couple of days.

ESPN to De-Clutter With New Redesign – “Instead of inundating visitors with its intense coverage of every major sport from the get-go — something that the company now believes can drive away certain fans — ESPN.com is moving in a less-is-more direction, at least on the home page.”

ESPN is simplifying it's homepage in an effort to grow it's brand.

Consumer Reports identifies the Top 5 Smartphones – The Black Jack II came out on top, followed by the T-Mobile Wing, Motorola Q9C, T-Mobile Shadow, and BlackBerry Pearl Flip. The iPhone 3G and T-Mobile G1 tied. Verizon was ranked the best carrier followed by T-Mobile. Sprint was last in most markets. T-Mobile still doesn’t have any 3G phones worth getting excited about.

Rated best smartphone by Consumer Reports.

Last week was Web Design Week at PSDTuts.com – Two of my favorite articles were Five Looks, One Layout and How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds. Both cover how to transform the message of a single layout using different colors and styles. This is a great step by step resource for the design impaired like myself.

Web Design Week

Speaking of the design impaired…
Smashing Magazine has put together the Ultimate Collection of Custom Photoshop Shapes – If you can’t draw, custom Photoshop shapes become invaluable.

Custom Photoshop Brushes

The Amazing Shitbox

TheBrownCorporation.com Header

I have no idea if these portable cardboard toilets are serious products or some sick joke but I got a kick out of the page design. Featured in Smashing Magazine’s Texture and Patterns Design Showcase, TheBrownCorporation.com lured me in with their simple, to-the-point layout and Little Jack, the quirky mascot.

At any rate, working at The Brown Corporation must be the shit!

Mozilla Shows Off Firefox Mobile Interface

I stumbled across this Mobile Firefox Interface Concept video today over at Aza Raskin’s blog. Taking a cue from Apple’s iPhone, the Mozilla team envisions a browser controlled by finger gestures. But rather than just being able to zoom and “throw the page around” the mobile Firefox guys built an interface around simple actions. For instance, if you flick your finger slightly to the left a navigation sidebar appears revealing the back, forward, bookmark, and page info buttons.

The beauty of this design is it maximizes every pixel available on a tiny mobile screen for the content itself. The interface only appears when you need it and neatly tucks away when you don’t. Here is the full video to show these ideas in action:

I really like where this is going and wait in anticipation for the official release of Firefox mobile in the next year or two. For now though you can play around with the limited web demo.