Archive for the ‘web design’ Category

Pop-up icons are awful!

2010/07/09

This might seem negative, but I found that I have a visceral reaction against the subject of this post and upon being confronted to explain myself I believe that there are good justifications for my feelings. So let’s hear ’em!

(I’ll even apply this to UI design in Dungeons of Dredmor at the end.)

While redesigning the Gaslamp Games blog, our web dev’r found a plugin for WordPress to give a viewer the ability to share a post on social media sites (which is the cool thing that The Kids do these days, I hear). This plugin is SexyBookmarks. Here it is on the Gaslamp site; my mouse cursor was over the del.icio.us icon:

You get a row of social media icons that pop-up on mouseover. Yes, it’s cute. But I hate it.

The point of an icon is to be a sign for what it represents which is identifiable at a glance. It is the symbol of the thing condensed and simplified as much as possible. This plugin cuts the icon in half, hiding much of the visible space, making it less identifiable. This defeats the purpose of having a full icon.

Is it about saving space? It doesn’t: In the half-hidden mode, the icon is shifted down 10 pixels and upon mouseover the icon is shifted up 10 pixels. These 10 pixels for the icon to move into are left blank anyway, so no space is saved. Why not just use fully visible but slightly smaller icons so that they are more readily identified at a glance, so that they use the full visible area given to them as the designers of the icons intended?

If this is not about saving space then the purpose that remains is using a hidden/unhidden visual cue to designate the mouseover state. Though as said, this conflicts with the design of the icons in the first place because it obscures their quick identification.

In the end it is a gimmick because its outstanding feature interferes with its function. Yes, it’s a cute trick, but it does not make a useful plugin.

… also the web2.0-looking shadow effect doesn’t fit at all with the Gaslamp webpage’s aesthetic.

How does this apply to Dredmor?

A long, long time ago we tooled around with having the quick-slot item bar be hidden slightly behind the UI to give the main game area more viewable space. It would pop-up the item bar to show the full item icons when the mouse go closer to the bottom of the screen, where the items lived. We decided against this design in the end because you couldn’t really tell at a glance what items you had unless you went to mouseover them, which defeats the purpose of having an easily accessible row of icons on the main screen. And it didn’t even save very much space, maybe 16 pixels in all. And it was annoying.

Moral: If you use icons, show the icons. The only information which should be hidden should be information that is not needed at a glance.

Advertisements

Portfolio Website Revisionism

2010/04/14

I’ve re-done my portfolio site a good bit, have a look if you like.

(Or click the picture below, it’s much easier to hit with your mouse-pointer.)

CSS vs. Tables

I’ve purged tables from my site and replaced them with CSS magic. You can all stop cringing.
And I daresay, CSS can really be a delight to use. I intend to completely redo the design of my site (yeah, yeah, when I get around to it), at which point I’ll try to be much craftier with CSS. What I’ve got here is largely an adaptation of old, messy code worked over not to make a new design, but only to make it less painful to look at both in-browser and in-editor.

Page Titles

Previously I had the title of each page typed out at the top of each page in a header tag, but my graphic designer Gee Eff pointed out that the link text in the link bar at the top could function as a page’s title if it were highlighted. This far more elegant solution eliminates unnecessarily repeated information.
Done!

The “About” page

The top bar of links currently has had four entries: “About, Contact, CV/Resume, Gallery”. I’ll face the hard truth and admit that no one really cares about me personally when they look at my portfolio — and it’s a weak entry point to the page (as it is the index of the “portfolio” folder). So I think the best answer would be the combine the “about me” section with the “contact” section and make it as simple as possible with a combined pitch, distinctive photo, and the all-important email link.

This felt like such a good idea that I interrupted writing this post to do up a new combined version of the about/contact page.

Most important of all on there, I threw some random art from personal projects around the periphery. If you’ve made it that far, you need a reason to stick around and click links in my portfolio; Hopefully the surrounding pictures make a compelling argument.

I’ve still got to find a picture of me that doesn’t look like a sparkly emo vampire.

Gaslamp Games Website Design

2010/02/25

Gaslamp Games needs a website and branding redesign. This is the story of that design.

Gaslamp as a brand implies a couple obvious themes: steampunk and Victorian.

A couple days ago I was out at a restaurant; the interior decoration was all black, dark gray, and deep red. They had this particular wallpaper on one wall that was quite exceptional, a slightly lighter black Victorian paisley design on a darker black background. I started with that idea for the background and drew a tentacular paisley-looking sort of pattern:

From there I built a dark layout based on the old Gaslamp website design. The logo I used is a reduced version of the old logo (originally drawn in a fit of inspiration over a year ago). I redid the text banner a few weeks ago using a lovely font made by Jason Creed, and was sure to give the small fakecaps the same font weight as the large G’s. The font is almost art deco, which is a bit out of period, but I think something simpler and modern is preferable to an overly flamboyant Victorian font. The logo definitely needs work, but it’s actually turned out to be somewhat difficult to pull something off that feels as good as the old logo, so it’ll take some more time — Deliver now, revise later!

So this is Gaslamp Dark, going for the brown & black id Software look.

Or as Dan put it, “it looks like a Tool fanpage” and something else about how it belongs in an angsty teenager’s bedroom. I concede that the look is not especially professional if you’re not a dark 90’s independent game developer.

So, let’s try something else. Go light, professional, contemporary. More EA Games than id. Okay.

Invert!

But then it looks a bit boring. Are we really that clean-cut? Plus, the dark logo and text don’t particularly fit with the lighter background. They’d have to be redone, and done a lot lighter; perhaps too much lighter. At this point I sent off the dark version and slept on it.

Dan again came up with a good way of putting things: We’re neither id nor EA, more like we want to be a kinda quirky midground of game design, more like Valve. (I should note here that for someone who generally hates everything, I have a huge soft spot for Valve’s work.) With middle-gray/brown/beige midtones, their site is something subtler. I like it.

I went for a middle sepia tone color range, made the background pattern a bit stronger so it’s visible on more systems (everything is darker on the MacTop). Highlights are brass and gold for that steampunk touch, and there’s just a hint of an aristocratic purple (to act as an accent) in the background of the footer. I switched the position of the logo and text banner so that in scanning the page a viewer’s eyes can read the company name then rest on the icon at the end.

The header is black to let the sepia tone gradient on the text and the Gaslamp logo stand out. The content panel is recessed for depth in contrast with the floating header and footer. Internal content panes may use yet more shades of brown, maybe different borders. As we add content, I’ll do a lot more pixeled steampunky doodads to give some nice flavor and set everything with proper emphasis — spacers, borders, trim, bullets.

There will be cogs.

Click for full size.