An Exploration of Flavour
I came across a screenshot the other day that had a list of projects that I had built over 10 years ago. There was a Flickr app, a Twitter app, a job site, an ad platform. I had forgotten how prolific I was at one time. I definitely fell into a rut there. Lately, though, I’ve been getting back into exploring design and flexing my design and front-end skills on some personal projects. Last ye...
The Codification of Design
There’s often a disconnect between the design comp and what the developers want to build. Designs feature elements that differ slightly (or grossly) from previous elements that have been designed. When this happens, developers have a conundrum. Do they (A) develop a pixel-perfect implementation of the design or (B) use existing patterns that differ from the design in front of them? ...
Steve Jobs on Prototypes
I spent some time watching Steve Jobs talk about NeXT from 1992. He touched on a number of things, including his passion for a crazy new idea called object-oriented programming. It’s interesting to take a look at his insights. One thing that jumped out for me—and it’s right near the very end of the one hour and twelve minute video—is his view on prototypes. “We haven’...
Design Doubt
As a developer, rarely has my approach been put into question. If it works, it ships. The definition of “works” is usually well defined. Does it look like the design composition? When people click on the button, does it send the data where it needs to go? As a designer, rarely has my approach not been questioned. I can’t even count how many times I’ve heard “have you tested this with...
Truncat...
“If there’s more than 200 characters, we’ll put an ellipsis and add a Read More link.” And then you click on that Read More link and, well, you’re underwhelmed that it only showed three more words. If there were only three more words, why not just show them! As a developer, it’s really easy to see a spec like “no more than 2 lines” and do something like this: if ( conten...
Meet Jack
Meet Jack the Lumberjack. He's the new mascot for Scalable and Modular Architecture for CSS. When working on the e-book, I wanted to have something that could provide an identity for the book and for the project. The idea of it being a lumberjack quickly came to mind. I liked the idea of a lumberjack for a number of reasons. For those that aren't aware, I live in Ottawa, Ontario, Canada....
Minimal
I need to document all the stuff that went into this design but for now, I'm happy just to have it launched. Why did I redesign so quickly after the last one? Because I wanted to! Inspiration struck and I ran with it. In the end, I'm much happier with this iteration over the last one and I'll be happy to keep this around for awhile. Like the last version, I used HTML5 sparingly. Simple doctype,...
Behind the Process: Snitter Icon
I built this desktop application a while back called Snitter. It's a desktop Twitter client that runs on Adobe AIR. Alas, it fell by the wayside during my freelance tenure. Recently, I've had the inclination to start working on it again and bringing forth to reality ideas that I've had for over a year now. One of the things that always bothered me was the rather rushed icon. A rather boring S. I ...
Screencast: Playing with Light in Design
I took a few minutes today to talk about something I've been doing with my design work as of late: playing with light to add depth and texture to a design. In this 7 minute and 19 second screencast, I look at layering elements using gradients and the use of white or black as a way to add light or shadow to a design within Adobe Fireworks. I start with a base colour and then start adding el...
Blick Blocky Retro
After a wild couple days, it's live. Well, live-ish. Blick Blocky Retro, the ninth iteration of this veritable site, has made its debut. Why? I've been working on this redesign for close to a year now. It has simmered, occasionally come to a boil, only for me to turn off the heat and step away from it. However, recent troubles with Dreamhost have finally made me flip my lid. The site performance...
Slicing in Photoshop and Fireworks
Last night, I put together a really quick screencast on exporting slices from Photoshop but decided this morning to put something together that I thought might be even more interesting: exporting slices from Photoshop and Fireworks. Over the years, I've been a fan of Fireworks and export any of my own work right from Fireworks but I've aso had to work with designers who use Photoshop. In order to...
Design Inspiration
There's the old saying, "Good artists copy, great artists steal." I still don't know what the difference is but I steal ideas all the time. More and more, I've been looking to architecture for inspiration. Buildings, skyscrapers in particular, share characteristics with the common web page. They're built and designed for a vertical space. As a result, many of the design elements that g...
V8: Supercharger
Version 8 is launched. Oh crap. Well, I've decided to have some fun and call this "Supercharger". It's been months in the making. Seriously. It's gone through iteration after iteration but I finally think it was good enough to launch. It's been tweaked and prodded all the way to the finish line. And this isn't even done yet (as is probably obvious in a few places). This isn't even a l...
Reworked.
Everybody kept saying that my logo looked like a Macromedia product so I thought I'd have my hand at reworking the logo and make it a little more bulletproof. I've tried to keep the familiar S but work within a framework that gave me more flexibility and seemed to speak to the kind of stuff that I do. I also integrated more green into the logo to really emphasize the brand. I'm confident that I've...
Making a Good Favicon
If ever there was a pet peeve of mine, missing or crappy favicons probably ranks pretty high (undoubtedly, higher than it should). "A favicon (short for "favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. " ~ Wikipedia Tied into my usual rants about personal branding, having a favicon is yet another way to establis...
How I Design
In many ways, I don't consider myself a designer. I don't have any formal training. I don't have a strong grasp of colour theory. However, I do tend to look at design in a very structured and methodical way that I believe lends itself well to web design. Focus on what is important My approach is actually quite simple: focus on what is important. That may seem like a 'duh' statement and in many...
The Banner: Unleashed
Ever notice how you buy a new car and then suddenly it seems like everybody else on the road drives the same car. I'm feeling the same way about my little flag tips. First, at Andy Laub's site and now at Indelebile. If I thought I had any originality, I'd think I'm starting a trend....
Fall '06 Redesign
The redesign is pretty much done now. I think this will be my last for awhile although I had fun with this. Similar to the May Reboot, I tool a slow-and-steady approach never spending more than an hour at a time on the site. I tweaked and I tinkered. I added, I took away. It won't make the rounds at the CSS galleries but many of those sites are too focused on the eye candy. How much does it pop...
Top of Page
I spent years working on government web sites; a side effect of working in a government town. And if there's one thing the government has it's information. Lots of it. They like to post it to the web in bucketfuls. Of course, with that you'll find long documents. Inevitably, I'd get asked to pop "Top of Page" links liberally throughout the page. Space them out just far enough that you hoped you...
Screencast: Cross Faded Images in Fireworks
Okay, I have to admit, I was a little jealous of Dustin and his recent screencast efforts. So, I thought I'd take a few moments and throw together my own screencast. Since no-one really talks about the cool things you can do in Fireworks, I thought I'd talk about how to do fades on an image. It can be a little difficult to demonstrate these things in a series of images in a blog post so a screenc...
Handy Image Utility: PNGOUT
I heard about PNGOUT awhile ago but never really bothered to look into it. Sure, it can compress my PNG's but Fireworks does a decent job of that already. But in the comments of my last post, Which Image Format is Best, somebody again made mention of it. The original utility is a command line tool but the guy who made it, Ken Silverman, also started up a company to produce a commercial version of...
Which Image Format is Best
This was originally posted on YourTotalSite on June 10, 2005 When developing a web site you may not think much about what image format you use but you could end up saving yourself or your organization a chunk of change in bandwidth costs by making your choice more wisely. On the web today there are three main image format types to choose from and all have their advantages and disadvanta...
How to Pixelize in Fireworks
I figured I'd share this little tidbit in the hopes it's not painfully obvious like, "here's why the sky is blue" but ever wanted a quick way to create those pixellated graphics? Here's how I do it. In this example, I took the 9rules logo and pixelized it. To do so, I take the original image and size it down nice and small. The smaller you go, the more pixellated it'll look when it's resize...
Incremental Design Update
There had been a few things that were bothering me about the site since the launch of the redesign. The main one was the fact that the Fixed Comments™ were hidden until you scrolled. To eliminate this problem, I've moved the "On Topic" sidebar into the content area and removed the related links. I'd still like to give the article metadata a little extra attention but I'll leave that until s...
Gush
Rarely do I find the need to gush over a design but I'm impressed enough to do so now. Back in the reboot, probably my favourite design was James Mathias' leihu. I like the injection of buddhist elements which I felt gave me a greater reflection of James' true character. It helped personalize the site in a way that very few do. So, I was doubly impressed today when he unveiled his "dark side". Li...
Design Analysis: Comments
If there’s ever been a great way to design something, it’s through iteration from experience. In other words, the more you use something, the more you discover ways to improve upon them. In this, the first (and hopefully not only) instalment of Design Analysis, I wanted to cover the elements of a blog comment and what (in my opinion) makes a good one. The Elements Whenever I do des...
Reboot: Light vs. Dark
Obviously, one of the common themes that came out of the Reboot was that dark is in. One of the first sites that I drew inspiration from was Ordered List. It had seemed to take the light on top and dark on bottom look from the previous Niggle design (Flickr) and made it dark on dark. Of course, being grey and green, I felt obligated to like it. Then, Veerle's infamous redesign pushed me into a ful...
Rebooted
That's right, I've finally launched the redesign. No more teasers, this is the real thing. There are some minor things that I still need to change over and add, like error pages. I'm hoping to get them done before the actual reboot deadline on Monday. In the meantime, feel free to explore and be sure to point out anything that doesn't seem to be working just right. I'm sure to some of you, this w...
Failed Redesign
Only 10 days left until the design reboot (unless I get antsy and launch early) and I thought I'd share some previous iterations of the design. You can get a sense of the direction I went in with the new design. I can't tell you how much I've been stressing over this redesign. The First Iteration I started this back in March and even showed a few people the first version while at SXSW. People...
Playing With Fire
Redesigning one's site can be a tricky endeavour. Before any decent readership (read, the majority of the lifetime of this blog), I'd redesign frequently. Every few months (um, weeks) I'd try something new. Then I got to the design you see here. This came about back in May of 2005. I had come up with the fixed comments idea and the whole design was really centered around it. I really wanted t...
Gray is the New White
Firstly, before you do anything else, check out Veerle's newly redesigned site. All beefed up on Expression Engine, this site has so many nice touches, I'm flabbergasted. Maybe more so because I wasn't a big fan of her old design. One of the things that I love about it is the typography. The font choice is superb and is used effectively on the site. My concern is that Expression Engine or her s...
Working with Shapes in Fireworks
A number of people who saw the Prototype Dissected pictures seemed awed. "It must have taken forever to put them together." As the case happened to be, my time was really spent on working my way through the JavaScript. Here's some Fireworks tricks that I used on the cheat sheets and that I use on a regular basis. The Assets Panel For the longest time, I never used the assets panel. It seemed fi...
Poor Form Design
Here I am in an airport in Detroit looking to sign up for wireless. A two and a half hour layover meant my time would be more enjoyable if spent online. But the sign up form certainly had some deficiencies. Here's a screenshot of a portion of it. The designer probably felt that it just looked nicer if the label appeared under the field. I tabbed through the form (because using the touchpad on a...
The Value of Graphic Design
Gerry McGovern writes of how graphic design plays a minor role on the web. Whether we choose to believe it or not, design is extremely important when it comes to web design. It communicates and it facilitates. “Nobody would ever be allowed design road sign navigation that moved. However, when you design moving web navigation you win design awards. Why are so many graphic design experts sti...
The YourTotalSite Redesign that never was
In helping out with YourTotalSite, Garrett had asked all of us to put together a design for a site. Alas, with the demise of the site, the redesign never saw the light of day. However, I'd like to take the time to show the designs that I was working with and some of the thought process behind it. View Comp One The first layout was a standard two column blog layout. Some key design elements inclu...