Teaching and doing digital history.

Design Assignment Progress

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.

Comments

  1. Awesome! I still love the blood spatter. And since I keep looking at it, I noticed something odd. There appears to be some kind of line between the background and the container – there’s part of a splotch, a sharp line, and then a much smaller splotch under the text. Is it 2 different spatter images?

  2. erinbush says:

    Hey, yeah, I noticed that too. It’s two separate images and when I widened the site, the line appeared. I’ll have to make some adjustments.

  3. Looks GREAT. I’m with Zayna – -I love the blood splotches. and the dark bathroom looks great. You have such a fun project. Gorey but fun.

  4. Okay so I’m just throwing this out there as a thought that occurred to me. I know we’ve said in class that red is a color that should be used sparingly if at all. I think you might be the only website that can ignore this rule. But, I wonder if maybe there is just a bit too much red? I’m just musing out loud. But your header font, your nav links and a lot of the accents throughout the site are all red and there are some awesome colors in your header image to pull from. I was just wondering if you had thought at all about adding some different accent colors? If not that’s okay cause like I said,…think you are the exception to the rule.

    LOVE the spatter!

  5. Way to go on the image map! It’s looking really great – I’m glad everything worked out. I also love the pop-up explanations you’ve created for the Dark Bathroom. I think the way you’ve designed them creates a great interactive that’s also informing. I wonder, though, if it would be possible to darken the pop-up boarder. It seems a little jarring against the colorful background.

Trackbacks

  1. […] week I’ve commented on Erin’s, Laura’s, and Kellie’s posts. Mostly about color and spacing and such. It may not seem […]

  2. […] commented on Laura’s post, “Brave New World,” and Erin’s post, “Design Assignment Progress.” This entry was posted in Comments on other blogs. […]

Speak Your Mind

*