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.