For my design assignment, I found myself entering a brave new world: one of map scripting. And if you heard a strange scream coming from the general direction of Alexandria this weekend, that was me.
At Alex and Dr. Petrik’s suggestion, I purchased Adam Duvander’s Map Scripting 101. I took a course during my senior year in college (fall of 2001) on web design for humanities majors, in which we learned HTML (structured in tables) and some basic JavaScript. So, encountering this latter language in Duvander’s book was not all that scary. I’d seen it before. Yet, little did I know that I would find mistakes in the code. Yup…little old me. (He fails to define his variables, something my college professor harped on so much, that a decade later, I still remember to do so.) So, knowing that others far wiser and more experienced than me also must have discovered these mistakes, I checked out Duvander’s website to see if he had any updates to the code. He does supply examples and an instructional PDF, which is essentially a short version of his book. But these two examples were also structured differently. At this point I had three different versions of the same code. (Ahhh!)
It took some tooling around, but I managed to merge bits of all three examples to get this page in my design assignment. Think of it as a rough draft. My goal is to get to interactive versions of these screenshots for my final project:
-
- D.C. Residences for the 51st Congress (1889-1891)
-
- D.C. Residences for the 43rd Congress (1873-1875)
As for general comments on the design assignment, I am stubbornly sticking with CloisterBlack as one of my headline fonts. It just screams Congress to me. I made it bigger than when I used it in my text assignment, so hopefully it looks better. I also apologize for the cheesy “Coming Soon” markers. I wanted you all to know what pages I completed for the design assignment and what I plan to complete for the final project. Needless to say, those will disappear in the final draft. (Addendum: I decided to go with a different strategy instead. See for yourself!)
For now, I am taking a break from JavaScript for the rest of the day!
Laura! congrats on the mapscripting. I would love to try it for another project I’m thinking about, but I’m not brave enough to venture it this go-round. I really like the interactivity of what you’ve done and I can’t wait to see what it will look like with the historic map overlay.
Your fonts are fun but still evoke the time and subject that you want, I think. Maybe just a tad smaller, tho, so as not to look quite so crowded? Or maybe it’s just me and my browser. Nice treatment of your homepage image, too.
This is great! I love the map – but then, I’m obsessed with maps. The only suggestion I have is to put a border around it. Everything else has softer edges, so the sharpness of the map edge is a bit jarring.
I like the headline fonts but I agree with Lisa – it’s a bit crowded. Is there a way to separate “Where They” from the rest of the title a little bit? Just give it a bit more space below “Legislating”? Not necessarily a smaller size, just a smidge more room.
And one final question – is the dark gray in the header showing up on an upcoming page? I see you used the lighter gray at the bottom for “George Mason University” and also for your visited links, but only the one instance of the darker gray. I think what’s throwing me off is that GMU is in the lighter color but the same font as the darker color, and I’m expecting to see color and font match. Did that make sense?
[...] week I’ve commented on Erin’s, Laura’s, and Kellie’s posts. Mostly about color and spacing and such. It may not seem like much, but [...]
Thanks for the feedback.
As for the headline, I was going for good “proximity” in “C.R.A.P.” But, perhaps I overdid it a little. I was aiming for a bit of stylistic overlap, but I’ll revisit that headline tomorrow. Do others agree it’s too crowded?
Zayna, the map’s hard edges are a bit jarring. I was lucky enough to get it in on this round and might attempt at a bit of “styling” later on. I’m not sure if I will be able to soften the edges, so perhaps adding a border to the containing box? I’ll play with that. As well, your color feedback is interesting. The “George Mason University” at the bottom is the same green as the sub-header (“African-American Members of Congress in Washington”). I did not use that gray in “Where They,” elsewhere originally, but just updated the page to use it on my rules.
However, you’ve got me thinking about how the colors might look on a different screen, rather than the pristine resolution on my Mac…. I will have to check it out at work later today (I’m up early…can’t sleep) to see how it looks there.
Hi Laura –
Congrats on all the work! I love the map. Makes we want to do a walking tour of that part of DC. I love the font choices that you’ve made. Re the different shades of gray to so to speak in your footer — I think its the font, and not the actual color. If you look closely, the italics in George Mason University is thinner and oddly darker than in other places, and i think that’s just the nature of narrowness of the font.
Enh. the Header is a wee bit crowded. But I do like it.
anyway, my six cents.
Laura:
Love the site! It looks really sophisticated. I like what you’re trying to do with the map. It’s a good idea, especially given your topic.
I also thought I’d mention that I like the banner image you have used; it reminds me of Thomas Eakins’,”The Swimming Hole”. It’s a good image. Eye catching and interesting, and the action/movement doesn’t hurt.
Once again, I feel like your site is one by which to set my bar…
Thanks!
Your maps look great! I’m very impressed. It’s very clear that you’ve put a lot of time and thought into creating them. I’m looking forward to seeing how they end up.
I almost wonder if it would make sense to flip the links and the opening paragraph so that the paragraph is on the left. This may close up some of the ‘white space’ trapped between the left alignment of the links and the alignment of the paragraph. Just a thought.
[...] commented on Laura’s post, “Brave New World,” and Erin’s post, “Design Assignment Progress.” [...]