Crystal's Adventures in Webdev Land » design

Resume – Paul Lathrop

Crys — Wed, 05 May 2010 19:28:11 +0000

Visit Site: Paul’s Resume

Protected: design

Crys — Thu, 24 Dec 2009 00:02:39 +0000

No related posts.

Aurhia Wallpaper

Crys — Sat, 11 Jul 2009 05:54:51 +0000

Concept to final product – system message icons

Crys — Fri, 19 Jun 2009 01:49:42 +0000

Two things that all transactional sites have: success messages and error messages. Ideally, these messages will be at the top of the page and be set off in some way through color or other visual cues. Using green and red respectively is the obvious choice, but this poses a problem: people who are color blind will not be able to tell the difference.

Icons are one solution to this problem. If you preface your system messages with distinctive icons, this can serve as a quick visual cue to experienced users as well as distinguishing between types of message for people who are color blind or who use screenreaders (the reader will read off the alt text of the icon, so you can use this to convey a message to screenreaders only).

Icons can be tricky. They have to be small enough not to get in the way but large enough to be recognizable. Making graphics at that size requires pixel perfection and any iconmaker’s path is littered with failed icons. My favorite, lost to the annals of server upgrades, was one particular trash can I was trying to make that when saved at the right side turned into… Cthulhu!

The demands of making your icons small but recognizable mean you have to go into them with a clear concept. I like to pull out my colored pens and brainstorm around the basic shapes that symbolize whatever you’re trying to make an icon for. Picking a symbol can be the most difficult part of the process. For an error, what do you use? The yellow “caution” triangle? An exclamation point? The red “prohibited” bar and circle?

For my current project, I chose a combination of the exclamation point and the caution triangle. A green checkmark was my immediate first choice for the success message. Out come the pens. It’s important not to censor what you’re drawing, just to let the shapes suggest themselves to you the way they want to be drawn. I usually have about five or six different iterations before I sit back and pick a style and form.

My final, chosen drawings ended up like this:

From here, I usually move into Photoshop. Some people use Illustrator, but I find Photoshop a lot more intuitive. The key to making your icon recognizable is starting big and going bold. Any line that you want to be visible in the smaller icon has to be several pixels thick in the large version, or it will scale to less than a pixel and disappear. You can get an immediate preview of your work by reducing the magnification until the icon is close to its final size. After a bit of consideration for how to get the borders on the triangle and circle, these were my “full size” icons:

Note the thicker border on the symbols themselves. This will help them stand out from the background, especially after they’ve been shrunk to:

Work in Progress

Crys — Fri, 29 May 2009 05:28:42 +0000

No related posts.

Form Usability and Design

Crys — Tue, 26 May 2009 19:41:42 +0000

Most of the work I do right now, I can’t post here because it’s proprietary and client-facing only. However, there’s one application, Mortgage Loan App, that’s fairly new and is what we call a “consumer facing” (meaning our clients’ customers) application that I would like to use as an example to discuss usability in forms and other aspects of form design. I’ll be referring back to it quite a bit in the next couple weeks. This copy is our production environment test copy; clients can customize the application with their own logo, colors and contact information.

A few forms topics (will link each when the post is finished, so feel free to bookmark this page to make it easy to find them in the blog):

Label Placement
Row Highlighting
User Flow
1. Tabbed Interfaces meet the Wizard
2. Back/Next Navigation
3. Button Placement
4. buttons vs input=button vs input=submit
5. Information breakdown, what’s on which page and why
Why I use unordered lists in fieldsets for my forms
Progressive Enhancement and Usability:
1. dynamically hiding extra fields when they aren’t needed
2. Making your form usable even when js and css are turned off by the user
Making it Pretty
1. CSS file design for multiple templates/themes
2. Nifty 3d buttons without resorting to graphics
3. Disabled Submit Buttons in IE and Firefox
4. IE and empty divs

Early concept for this site

Crys — Sat, 16 May 2009 05:01:04 +0000

This was one of my initial brainstorming ideas for this site. Ultimately, I decided to go for a more streamlined design, but I liked this one and I’ll probably implement this as an alternate style sometime in the future. The logo, however, is the direct ancestor of the one I did end up going with.

Laughing Buddha Acupuncture

Crys — Fri, 15 May 2009 02:12:53 +0000

My friend Aly Condon has opened her own acupuncture clinic. If you’re considering it, I definitely recommend her!

Visit site: Laughing Buddha Acupuncture – Acupuncture and East Asian Medicine clinic in Oakland, California

Laughing Buddha Acupuncture

And here’s a link to the illustrator who did her logo:
Jake Mix: Illustrator for Hire

Keyclothes

Crys — Wed, 13 May 2009 03:29:19 +0000

This is a design I did a couple years ago but couldn’t post because there’d been a delay in the site itself. Now it looks like they’ve finally got the site up and running, though some of the design implementation is different (notably in the left navigation treatment).

However, 99% of the design elements are retained and I’m really happy with how it turned out. I also did the two main logos; I did not do the banner ads on this site, unlike most of the other sites I’ve posted/will post.

Keyclothes.com by Workhorse Outfitters — Outerwear for Work or Sport

Here’s a screenshot I took of my prototype:

Keepers of Stromgarde

Crys — Fri, 22 Aug 2008 00:11:18 +0000

This one is dear to my heart. I designed and maintain the website for my World of Warcraft guild:

the Keepers of Stromgarde

It’s gone through two iterations of design now, marked mainly by the difference in the tools that were available to me for personal use. The old one was done entirely with gimp, the new after I bought my own copy of Photoshop.

Old Keepers of Stromgarde site

New Keepers of Stromgarde Site as of July 2009