I took advantage of the torrential rain yesterday and made some great progress on my design assignment. All of my assignments to date have been designed in such a way to allow me to play with my final project design, so I tried to take all the neat things that I liked from my past style sheets and incorporate that into my design for this week. I’m working my way toward the final design of my project and since it’s very much a work in progress, I appreciate any feedback you all have.

I have 3 pages to my design assignment for this week:
Home (top nav)
Nutshell Studies (top nav)
Dark Bathroom (linked from Image map on Nutshell page)

The visual design is a hodgepodge of my text and image assignments with some significant changes added in.

• I widened the site to a huge 940px to accommodate my big images. The images are the focus and I think it’s insane to shrink them to fit a very narrow column. I also increased the size of my text to fit.
• I expanded the navigation and added some visual elements, like top and bottom borders. I also added some breathing room to the nav bar by adding some space between the buttons. Since Dreamweaver’s spacing with embedded fonts is a bit of a crap shoot, this required a lot of trial and error.
• Speaking of embedded fonts, I originally used a very nice sans-serif font, Droid Sans. Given the new design and the time period the Nutshells depict (mostly the 1940s), Droid seemed a bit too modern. I found a nice slab-serif font, Copse. Since “Copse” is reminiscent of “corpse” and I figured that meant it was a keeper. (I’m kidding.. I think it looks nice alongside my typewriter font.)
• I played with some of the details, including my little curly quotation images. I positioned them relative to my pullquote box so that they hang off the top left corner and bottom right corner. I set the opacity to 30% and finally got my red to mute enough so that they’re not totally distracting. Please tell me if they’re still too much.

Now on to the big stuff.

I finally got my Dark Bathroom page to render correctly and do what I wanted it to do with the images. I’m very pleased with how this turned out. I ended up using definition lists, so that I could pin the “definition” to the specific spot on the image.

I fully recognize that I have images that can’t be described in alt text in less than 50 characters, so I’ll be creating long description pages for all of my Nutshell images to meet accessibility requirements. Dreamweaver makes this pretty easy and I like this solution. I feel that it’ll let me describe the images and still preserve the aesthetic of the detail pages, which is really important to me.

Finally, between Carrie’s help and the NoobCube tutorial, I also made an image map to use for the links to my four Nutshell details, which you can see on my Nutshell page.

I’m still working on the actual written content, so forgive my Latin and gibberish.

Carrie and I had a discussion about her fabulously yellow design project and her image map on her blog. I also commented on Alexa’s plea for kick-ass and innovative history sites. I also commented on Kellie’s thoughts on interactivity and 3-D.

I’ve accomplished 3 minor victories, and now, the weekend is over, which means my ever-growing project to-do list is going to have to wait until Wednesday. Still, I am very pleased with myself. Not everything is how I’d like it and I can’t for the life of me figure out pop-up positioning, but I’ll get to that in due time. (If any of you have figured out how to position a popup over a specific point, let me know. Laura, I think you were wrestling with popup footnotes, yes?)

Anyway, here are my victories, minor though they may seem:

1. Blood Spatter: Lest you think you cannot download special Photoshop brushes specifically to create blood spatter prints, I assure you, you can. You can, and I did. I tried every combination and shade of red that I could think of, but I finally have some blood spatter that is enough to hint at crime and yet not so much that you worry you’ve made your way to a horror site (at least that is my hope.)
2. Dissolving Header Into Background: I tried to make my header fade into the background. And I tried. And I tried. I learned 10 interesting and new effects, like making ragged edges using a layer mask, and eating away at the image so that it looks like critters chewed on it. No, really. But alas, none were really the effect I was looking for. Finally, I figured out how to fade an image into a transparent background and my header now does this.
3. Image Maps/Popup Image Details: And last, but certainly not least, I turned a wide shot of a Nutshell into an image map and created 5 hotspots that pop a detail image and some text. It’s very much work in progress as there are no indicator points to tell the user where to hover to see the detail; the hotspot is pretty far away from where I actually want it; and there’s no explanatory text anywhere, but it works.

All of the above can be seen here. Please remember, this is my sandbox. I’m not quite done building out my castle.

I feel like I just climbed Everest.

Here is my challenge and if anyone has ideas on a solution, your next latte is on me. I placed my image, carefully measured out where the hotspots should be and coded them accordingly in my CSS (with coordinates on the x-y- axes). Furthermore, I used Dreamweaver’s handy little drag and drop placing function and put them Exactly. Where. I. Want. Them. And yet when I upload, they are still out of place. I have a feeling that I need to reset something to zero so that the browser doesn’t override my settings, but I can’t figure it out. Any help you might have would be greatly appreciated.

Additionally, I’d like to use bigger images, but then I run the risk of expanding my site beyond the 14-16-words-per-line sweet spot to which we must all strive. What do you think? Should I go bigger and run the risk of having longer sentences?

I commented on Zayna’s post with some well-timed (?) Alice in Wonderland references and on Lisa’s post about how awesome Ted.com is.

I’m finding that as the weeks go on, I’m thinking more and more about how I want my final project to look. So this week’s readings on usability were slightly overwhelming, if not perfectly timed.

It’s as if every week, with each additional reading, we get one more thing to think about or take into consideration as we’re designing our projects. Then the panic sets in.

This week I read, had my usual panic attack and then took a step back to breathe. After I thought about it, Sasha is right , we’ve seen this before. We’re just getting a bit more detail about what it is we already sorta know about web design. Further more, these readings bring home to me an argument I’ve been having for years in my work life. Specifically, where to put things. Let me explain.

In re: the readings on Rule of Three. At work, we use a term called the “Golden Triangle,” which reflects how users expect to find information when they visit your site. These expectations are based on users’ experiences with Google’s Search Results layout, which love it or hate it, is the dominant way users navigate the web now. The concept of the Golden Triangle was/is based largely on a 2005 eye tracking study done by some fancy web marketing research firm to understand how search was really taking over the world wide web AND changing how users navigate it.

(In another lesson in how blogs typically can stand the test of time, while web sites rarely do, you can get to the blog entry discussing said study, but you can no longer get to the full study – big bummer. You can see the heat map below and the triangle is pretty clear.)

Let me be clear, I have never designed a site before this class, nor have I ever hand-coded a site by myself. My job in the working world has always been, solely, to represent to the web development and design teams the business requirements for content and advertising on major,high-traffic commercial sites. ie, “I need the content box to appear here and it needs to be at least 5 lines of text with six possible hyperlinks and an image at least ‘this big.'” “The ad needs to be above the fold and adhere to the Internet Ad Bureau’s standards on size and expansions,” blah blah blah.

And then the fight over the Golden Triangle would ensue:

Highly skilled design and usability folks: “No, it can’t go here because you are trying to dominate critical space in the Golden Triangle with your stupid content.”
Me: “Well, I know, but if I can’t recirculate traffic to our internal pages where the big ads are, then the user can’t see the ad, and then we can’t sell the ad and then none of us get paid.” And so on and so forth.

They were all in good fun and we were all representing the camps we were hired to represent. The war between good design and profitability hasn’t subsided, we just have many years of analytics to use in our arguments now.

Which brings me to another web usability study, this one done back in 2006, which addressed where users expected to see common site navigation elements: the home button, search box, internal links, ads, and about us links. It’s an interesting and short read and the visuals make it pretty clear where users expect these elements to go.

I realize that 2006 seems like a long time ago in web ages, but not much has changed. Actually, that’s not true. Years of web experiences and analytics have proven these standards over time and now we no longer really fight about this stuff.

It’s commonly accepted now that your home button should be in the upper left hand corner, your links should be underlined, you cannot hide your search box and that you should point the users’ eyes to the most important elements using the Rule of Three or the “Golden Triangle”, whichever term you use.

Reading the foundations of these “rules” reminds me that I need to not take them for granted and really think through how I apply them. So to my current and former design colleagues: I appreciate you – I’m walking a mile in your shoes now, and I get it. I really get how hard it is!!

Hooray and thanks to Laura who provided us with a link to WAVE, a very useful website to help us “test” our sites for accessibility. (As I, like most of you, couldn’t get the screen reader simulator to work on my browser.)

There were a couple of best practices types comments, which I will heed on my final project. I once had someone tell me that accessibility was “all about the alt text.” I know there is so much more to it than that, but I admit that I am happy to be a bit of a stickler for alt text.