Design

An Exploration of Flavour

26 Jun 2020

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...

Read it all »

The Codification of Design

28 Sep 2018

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? ...

Read it all »

Steve Jobs on Prototypes

02 Jul 2018

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’...

Read it all »

Design Doubt

07 Feb 2016

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...

Read it all »

Truncat...

14 Aug 2015

“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...

Read it all »

Meet Jack

28 Nov 2011

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....

Read it all »

Minimal

28 Sep 2009

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,...

Read it all »

Behind the Process: Snitter Icon

22 May 2009

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 ...

Read it all »

Screencast: Playing with Light in Design

31 Jan 2009

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...

Read it all »

Blick Blocky Retro

16 Jan 2009

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...

Read it all »

Slicing in Photoshop and Fireworks

19 Dec 2008

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...

Read it all »

Design Inspiration

23 Nov 2007

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...

Read it all »

V8: Supercharger

06 May 2007

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...

Read it all »

Reworked.

01 Apr 2007

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...

Read it all »

Making a Good Favicon

01 Feb 2007

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...

Read it all »

How I Design

11 Dec 2006

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...

Read it all »

The Banner: Unleashed

16 Nov 2006

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....

Read it all »

Fall '06 Redesign

27 Oct 2006

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...

Read it all »

Top of Page

15 Oct 2006

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...

Read it all »

Screencast: Cross Faded Images in Fireworks

05 Sep 2006

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...

Read it all »

Handy Image Utility: PNGOUT

31 Aug 2006

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...

Read it all »

Which Image Format is Best

29 Aug 2006

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...

Read it all »

How to Pixelize in Fireworks

05 Aug 2006

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...

Read it all »

Incremental Design Update

26 Jul 2006

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...

Read it all »

Gush

02 Jul 2006

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...

Read it all »

Design Analysis: Comments

15 Jun 2006

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...

Read it all »

Reboot: Light vs. Dark

03 May 2006

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...

Read it all »

Rebooted

29 Apr 2006

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...

Read it all »

Failed Redesign

20 Apr 2006

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...

Read it all »

Playing With Fire

02 Apr 2006

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...

Read it all »

Gray is the New White

01 Mar 2006

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...

Read it all »

Working with Shapes in Fireworks

28 Feb 2006

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...

Read it all »

Poor Form Design

22 Jan 2006

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...

Read it all »

The Value of Graphic Design

03 Jan 2006

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...

Read it all »

The YourTotalSite Redesign that never was

05 Dec 2005

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...

Read it all »