Visual design

Konigi Stripped

Am toying with the idea of stripping all graphic elements from konigi.com to speed up load times, simplify navigation, and make screenshots the focus of the page. If you're a registered user to the site, you may login and use the konigi-1-1 theme to test drive it.

Photoshop and Illustrator Templates for Blueprint CSS Framework

blueprint grid illustrator comp

As you may know, several months ago, I created an Adobe Photoshop template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. Today I'm also adding an Illustrator template to my Resources section and I have updated the Photoshop template to include horizontal guides.

Both templates are simply documents with guides based on the 24 units provided by Blueprint. The background image of the grid is also provided with a layer to show unit numbers if you like, and the Illustrator document shows a fake comp to demonstrate positioning on the grid.

You may download the templates here:

I welcome your feedback.

blueprint grid illustrator comp

Last updated: 12 March 2008

I created an Adobe Illustrator template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework.

The Illustrator template is simply a document with guides based on the 24 units provided by Blueprint. A layer is provided to show unit numbers if you like, and 2 layers showing the grid dividing into thirds and quarters (thanks to Phil for that). Additionally there is a page wireframe included to demonstrate the template's use. Enjoy!

Download the Illustrator File

See also the Photoshop Template for Blueprint



Star Wars vs. Saul Bass

If Saul Bass did the titles for Star Wars, it would look like this.


Introducing Konigi

After about a 4 year break from blogging about information architecture on iaslash (my last post there was 11/2003) I've decided to return to blogging on a wider range of user experience topics. The new blog is called Konigi. Here's a snapshot of how it looks today:

konigi

The word Konigi is a bit of a nonsensical riff on the Esperanto, "koni," which means to know. Before I started on this projectj I wanted to find a way to focus on doing some sort of personal knowledge management related to web design, and somehow I ended up doing this site. I can't tell you how happy I am to have finally found a way to combine my interest in KM, Design and UX, and Blogging into one project.

Herw's what you find on the site for now:

  • Interface: A gallery of user interface and interaction examples that are both conventional and accepted solution as well as innovative examples that push the use of medium.
  • Design: A gallery of sites that can be described as influential, innovative, and effective at representing their brand and purpose. Visitors may submit designs for inclusion. The submissions that get the most votes will be included among the featured sites.
  • Notebook: This is the more traditional blog, pointing to UX resources. For now I'm going to keep the writing lean and succinct. This is also the place where I'll be posting the Collages (Command-Shift-5) I play with occassionally and post to Flickr.
  • Function: This is a competitive analysis section that I'm working on and hope to release very soon. Hopefully these pages will start appearing in the Spring.

When I started this project a few months ago, I thought I'd simply be starting a blog or wiki, but somehow it evolved into a more focussed portal of sorts with lots of screenshots. I got my hands on Skitch and started posting screenshots to Flickr. I started a new job last year and found myself taking screenshots a lot more and write a lot less on urlgreyhot. All the little experiments using Skitch on Flickr forced me to organize things and separate these screens from those Ipost to urlgreyhot. This is where Konigi comes in. Hopefully it will keep this stream of screenshots in order so they're findable and reusable by others in the UX community who may be interested in them.

I'd love to hear your feedback.

The Vignellis

Tina pointed to NY Magazine's short article on the architect/designers, Massimo and Lella Vignelli. There's a great quote in there that speaks about how the Vignellis arrive at solutions to design problems, and is certainly appropriate to the work we do while working on user experiences for the web.

It’s a matter of discipline, and it starts by looking at the problem and collecting all the available information about it. If you understand the problem, you have the solution. It’s really more about logic than imagination.

(via swissmiss)

NYC Taxi Logos

I don't care what the chairman of the TLC thinks. I think this is ugly. How this brings the appearance of taxis into the 21st century is beyond me. Unless it is following some purposefully ugly concept where the designer is co-opting the style of some cultural group or phenomenon. That's very trendy. The style feels kind of retro in a bad way to me, as in bad the way fussy ironic hipsterism tries too hard to be bad. The mishmash of the new NYC logo (ugh) and the smushed-in TAXI with the bad kern is painful. The checkers are fussy and weak. Couple this with the loud Garden In Transit flower decals parading around town and we have a truly garish movable feast.

Here's what other designers had to say:
cityroom.blogs.nytimes.com/2007/10/15/reviews-trickle-in-...

I agree with Michael Rock. Bring back the stencil. Or use Richard R's simple design concept here:
cityroom.blogs.nytimes.com/2007/10/22/readers-redesign-th...

Paul Rand Tribute

Art is an idea that has found its perfect form. ... No matter how perfectly you do something, it can still be improved.

Don't try to be original, just try to be good.

-Paul Rand

(Thanks, Swissmiss and Coudal)

Adobe Labs: knowhow

This is pretty excellent. Check out the demo. This is a new flash-based contextual help app. When you click a tool, you see two tabs--one is an Adobe tab that shows related Help topics, the second is a del.icio.us tab that shows helpful links (e.g. Tutorials) from delicious. They're using a single del.icio.us account to feed this tab.

To check this out in Illustrator CS3, go to Window > Adobe Labs > knowhow.

↑ top