In the last video, I talked about a testing site, and I’m gonna let you guys in on it so you can see the site evolve live. Check out stolendatatapes.com to see the new site in progress.

I spent most of my efforts thus far decomposing the theme and figuring out how to adjust it. That in itself is quite an effort, but now that I’ve got the workflow sorted I should be able to make some good sweeping adjustments in short order (after all, I’ve done this before.)

The site layout is pretty much sorted. The header and footers are mostly the way I want ‘em, but the main content is very much in progress. And of course the typography will change a great deal. Having the entire thing in Helvetica makes it look tragically like a template.

What do you think? Colours, layout, use of whitespace? Let me know your thoughts in the comments.

download .mp4 / watch on YouTube

I took a big step in my redesign process — I installed a new WordPress installation with new theme on one of my dormant URLs which I haven’t previously used for anything. This URL, which I will reveal soon, is one of a number of .com domain names which I own, simply because it’s a clever name, or maybe because I concocted some cool future plan which has yet to come to fruition.

The reason for this is mainly to create ease in testing. Allowing me to live-test the new theme will give me the closest simulation of how the new theme will react when I port it over to this site. It will allow me to use the same FTP authoring tools (Coda, Transmit, etc.), and troubleshoot any database and WordPress issues.

So far, I have done some basic work on the template, exploring how the authors built it, and figuring out how I can bend it to my will. This actually takes a bit of care, because there’s logic involved in deciphering how someone else built the theme. I have yet to get deep into the CSS styling, and so I will withhold showing it off for a few more days.

There is an adage that “web design is 90% typography”, so I want to make sure the type looks purposeful, in typeface selection, scale, and colour usage. That’s gonna take a while.

So how’s your site coming? Tweet using hashtag #redesign or interact by leaving a comment.

download .mp4 / watch on YouTube

If you have a site redesign that you’d like feedback on, leave a link in the comments. If you don’t want public commentary, write me a quick email using the form at the bottom of this page, or tweet me @scottperezfox.

How’s your redesign going? Mine, I admit, is a bit behind schedule. I’m going to take the plunge soon and jump right into the new theme. In lieu of installing a testing server and working with an installation on my own hard drive, I’m just going to do a live-install and you’ll be able to watch the site take shape before your eyes. Get ready for trouble.

Say what you will about Facebook, but their Timeline is fairly innovative, if not generally pretty. Facebook has been acquiring design talent for some time now, so go see what these guys have been in up to, especially how the eye is directed and how they determine what’s important.

Google+ may not be as popular as Facebook, but I, for one, think the design is pretty sharp. I especially think the buttons and input fields are very sharp. It’s a good use of rounded corners with a very small radius. Also, take a moment to think about their main column and sidebars, and how they display images within a photo album.

No matter your view on [American] politics, we must all admit that the Obama administration has created the best-looking website of any President to date. If you haven’t seen Whitehouse.gov, go take a good hard look. While you’re at it, check out the Obama campaign website, which does a good job of organising lots of content. (menus, sub-menus, callouts, forms, etc.) so it’s worth an examination.

On the subject of Politics, check out OpenCongress.org, which details everything going on in Congress, including full text of all Bills under consideration. They do a good job with their buttons and other graphical chrome.

How’s your redesign coming along? Don’t forget to tweet using the hashtag #redesign if you’re playing along at home.

What do I mean by research? See what other people are doing, both rightly and wrongly. Investigate below the surface of your industry by examining the long-overlooked personal sites of your followers on Twitter, your forum mates, and folks in the industry. Check out some blogs you like and follow the links they list. Let it be organic.

download .mp4 / watch on YouTube

As a user of the web, you’ll be struck by trends almost subconsciously. See what catches your eye, and make a note of it. Print out the sites you fancy and tack ‘em up. Take screenshots. Start a little scrapbook.

Share you links in the comments below. Let’s take a look at what we find. And remember to use the hashtag #redesign if your tweeting about it.

download .mp4 / watch on YouTube

(Pardon the shakiness of this video, I’m still learning not to bump into my desk as I flail about recording videos.)

A little tool I like to use is The Hourglass Chart. It helps narrow down the attributes/features of the your site, the immediate results of those features, and what your goals are given that new result. Here’s a quick mockup I did in Photoshop:

The key here is to limit what goes into the site. Don’t cram in every widget you can think of. You don’t need a forum, and a Flickr widget, and a photo of your dog. Keep the attributes to 2-4 items, such as a blog, a portfolio, a list of resources, interviews, press/media links, or an in-depth bio/about page. Not all of those!

Those will lead to a result. Maybe your work will get spread around the web, maybe you’ll become an authority on a subject, maybe you’ll solidify your dedication to a certain craft. Those are all great, but again, you have to limit yourself.

Finally, write down the goals you want to achieve with this website and your newfound results. These are what you have to keep in mind even after the re-design is complete.

Write your comments and tell us what you’re including in your site. Broad strokes. What are your goals? Let’s make this thing a community. And if you’re tweeting, make sure to use the hashtag #redesign to bring others into the effort.

Oh, and pardon that gratuitous shot of my ass in that video. I have revealed my dirty secret: Yes, I work in sweat pants. But only because my yoga pants are in the laundry.

Inspired by NaNoWriMo, I’m redesigning my site this month, and I’ll be recording videos and writing blog posts as I progress. If you needed an excuse to redesign your site, here it is. Let’s start a trend.

download .mp4 / watch on YouTube

Day 1 should be your backup day. Download all the existing files associated with your website. The images, HTML files, CSS styles, PHP databased, etc. etc. etc. This will help you get organised for your redesign, and also will serve as a last resort in case something goes horribly wrong along the way.

I’ll record more videos from tomorrow, and we’ll plan our redesigns. The whole thing is very informal, but I want to hear your progress! Comment and record videos of your own.

download .mp4 / watch on YouTube

I recorded a little video to pose the question of whether designers should be able to use templates and themes on their own sites, or whether they must build it from the ground up. It’s a debated issue. On the one hand, why waste your time reinventing the wheel if websites aren’t your core focus. On the other hand, if you’re in the biz, you should know your own skills and showcase exactly what you can and can’t do.

As someone who has always taught himself via his own website, I’m a little torn. I’m finally at a point where I can admit that I don’t know everything about web design, and that the folks who specialise in templates and themes are really fucking good. The time required to get that last 5% of compatibility and seamlessness is far out of proportion in terms of effort in and results.

Currently on this website, I designed the theme, but it’s not perfect. There’s no IE-specific version. There’re no mobile versions. It uses HTML5 features, but isn’t exactly valid and super-compliant. If I went to a well-designed theme as template, would anyone notice? Would anyone care?

Here’s a video I made which describes my reactions and illustrates points where Google can improve their interface design.

download 1920×1200 hi-res .mov / watch on YouTube

I want to hear your thoughts on the new Google Reader, and for that matter, on Gmail’s new design. Do you agree that much more thought and effort went into Gmail? Do you use Reader and find it more difficult to use? Am I completely off my rocker and blowing things out of proportion?

If you ask me, this smells like another Tropicana, albeit on a much smaller scale. It’s not just about the type and graphics, it’s about the way it works and how people interact. This shit matters, people!

UPDATE: 20111105.0044

It seems my message is getting through, somewhat. Google has updated their Reader theme so that the links are now blue. I cannot tell you what a huge difference this makes. I already feel more productive and faster in my movements. Here’s a screenshot clip, but log into your own account to see what I mean.

Since I downloaded and installed the latest version of Mac OS X, nicknamed Lion, I’ve been working at a feverish rate to re-claim certain aspects of the OS which the overlords at Apple had deemed worthy of change, refresh, or removal. My desire to customize my computing experience isn’t new by any means — I remember tweaking the colour scheme on my first Windows 3.1 laptop back in 1993 — but as I grow, these changes are more to do with productivity than simple aesthetics. Lion broke my workflow.

There are several apps and areas which needed some attention. Finder, especially with its new Launchpad and Mission Control as well as numerous interface quirks, Safari, iCal and Address Book, and iTunes.

Sidebar icons in Lion are greyscale. But why?

In Finder, one of the first things I noticed was how the icons along the sidebar now appear in monochrome only. I could write for quite a while about frustrating this is, but a quick glance at the Apple Discussion Forums will reveal that plenty has been said already. In short, I like coloured icons — they help me find what I need faster, at a glance. Apple’s new icons are tough to differentiate because they’re not only greyscale, but they’re similar shapes. But unfortunately, all the nerds of the Internet haven’t yet been able to re-claim these icons. We’ve discovered where the icons are hidden within the system, but strangely, the sidebar has a new behaviour which desaturates any icons placed there. So even if you alter the icons, they’ll be greyed out again by the system. We’ll have to wait for Apple to fix this.

Luckily, the same is not the case for iTunes! In the latest version update, many iTunes users complained that they lost their coloured icons. A tutorial was released last Fall, but it’s already out of date. I did manage a workaround, though. Here’s the long and short of it:

comparison of iTunes icons

coloured icons restored

Download this file: itunes_scottperezfox.rsrc and replace your existing iTunes.rsrc file. Be sure to backup and rename, obviously. If you have no idea what I’m talking about, read the following paragraph.

Many, if not all the graphics for the application live within the iTunes.rsrc. So I had to dig in there and change what I wanted changed. The problem is that I had no idea what the hell a .rsrc file is, or how to edit it. Internet research revealed that a number of people had become expert at editing these, but apparently no discussion of it has taken place since 2007. All the systems and iTunes versions are well out of date, and I’m essentially looking into the past for a solution. It seemed the best hope for unlocking these .rsrc files lay with a program called ThemePark. (which was at some point a Google property?) ThemePark doesn’t seem to be supported anymore, and now that Lion no longer runs PowerPC-based applications, I had to employ my old G4 Powerbook to run it.

screenshot of ThemePark, messing with icons (click for larger view)

I downloaded version 3.1 and used it to open iTunes.rsrc. Within that .rsrc file are a series of PNGs which make up the system graphics. I found the one containing all the icons, and was able to drag it to my desktop. From there, it was a matter of going into Photoshop and replacing the grey ones with now-legacy coloured icons. If you’re interested in doing this yourself, here are the files I used:

1. itunes_colour.rsrc - the vintage coloured icons
2. itunes_default_10.4.rsrc - the default greyscale icons from v10.4 (for safe-keeping)
3. itunes_scottperezfox.rsrc - my resulting alteration, coloured.
4. itunes_scottperezfox.psd - the layered Photoshop file, so you can make/alter the icons to your liking.

And then of course when your finished, do the same process in reverse. From Photoshop, save as PNG, and then drag it back into ThemePark. Save the .rsrc and drop that back into iTunes. Where, exactly? Well, in the iTunes Resources folder. To access that, right-click on the iTunes application and select “Show Package Contents”. Then check out Contents and Resources folder within that. Like this:

/Applications/iTunes.app/Contents/Resources/iTunes.rsrc

Similarly, this is how you’d go about replacing the icon for iTunes if you, like others, don’t fancy the new iTunes icon. Here are two I’ve used. In this case, do the same thing, drop them in the Resources folder and rename as iTunes.icns

iTunes_alt1.icns

iTunes_alt2.icns

Right, so let’s get back to the Finder.

Launchpad is a mess in this first release. For me, apps can’t be removed from groups. Certain groups can’t be renamed, not ever app gets an X in jiggle mode, and there’s no way to adjust the icon size. Also, every new app goes to a second screen, when there’s more than enough room on the first one. A mess. There’s a little program that seeks to tame LaunchPad a little called LaunchPad-Control. In short, it’s a small little add-on that lives in System Preferences, and let’s your easily check on and off which apps you’d like to appear in LaunchPad. Unfortunately, this can’t fix the aforementioned behaviour problems, but it’s a start. Check out the write-up on Techland.

In Finder, as well as apps like TextEdit and Safari, you may have noticed the animation whenever a new window is opened. (Hit cmd+N a few times and see if it annoys you). Here’s how to fix that. Launch Terminal and type the following:

defaults write NSGlobalDomain NSAutomaticWindowAnimationsEnabled -bool NO

iCal and Address Book have been given silly interface redesigns to make them look more like their 20th century analog equivalents, I guess. If you don’t like the leather-and-paper look of iCal, check out this tutorial on how to restore the aluminum look of Aqua courtesy of OS X Daily:

As of yet, I’ve been unable to find a fix for Address Book where I can revert to the “classic” look, where three columns (and no “pages”) were visible. Fucking ridiculous.

Quickly, about Safari. Most of the new features are easily turned off, such as Reading List and Resume, but the new Tabs behaviour requires a third-party extension called LinkThing. This lets you control how the Tabs work, allowing them to open along the Tab bar in the classic fashion. If you have no idea what I’m talking about, then nevermind. But if you know what I mean, you’re probably punching the air in joy/relief right about now.

Wow, this is a lot. In only a week we’ve seen the community come out in force to take back the stupid decisions made by Apple regarding the interface and functionality of many popular apps. If you’re looking for something specific, the best bet is to first search on Google, of course, but then check out the forums on Macnn.com, MacRumors.com, and MacThemes.net . Power to the people.

Found any workarounds, hacks, or hidden customisation options in Lion? Share in the comments.