One of the things I’ve learned about myself and webdesign, particularly when I have a WYSIWYG editor to play with, is that little alignment tricks appeal to the part of my brain which was imprinted in preschool Montessori education. Making things line up! Yay! Which would be why the paragraph text in the sidebar aligns with the edge of the header image, the lists in the sidebar align with the header text, and the right margin of the content text ends on the same line as the text in the top line of the header. Mildly obsessive, maybe, but also fun.
What I’m having the hardest time figuring out is how, exactly, I want to translate all of this into WordPress. Why WordPress? Because it’s a free, user-friendly CMS and the contributors/editors who will be maintaining content once the site is live are not universally tech-savvy. I might consider something like Drupal if I heard people tell me “Yeah, the user interface is totally intuitive once it’s set up!” but so far I haven’t heard that. (Also, a not insignificant fact is that I’ve been using WP for about 4 years now, and have no experience with Drupal…)
Most of the switch from hand-code to WordPress is straightforward, and some of it will even be easier (News, for instance). What I’m having trouble with is the Mentoring Toolkit. I could easily create a Mentoring Category with child categories which match the divisions I’ve sorted the essays into, and then just re-create all the pdfs as posts. Or I could make a static page with PDFs linked. Or I could do both – archive the old essays in a static page and link the static page to an active category. Any thoughts?
My (draft) final project is live. All of the content is taken from the organization’s site or mailing list. Because it’s been based exclusively on h-net for so long, there were no images or illustrations for me to work with, hence the low number of images in the site.
Also, it’s worth bearing in mind that the final site redesign, to be drafted up in May, will be a WordPress site.
With that said: SAWH site redesign (css and html), take one.
I spent the last four days at a conference, and at this conference there was a poster session. This was my first time ever going to a poster session, and I had no idea what to expect. Still, I had not anticipated wandering around looking at the posters and thinking about them as much in terms of design as content (sometimes more).
I really shouldn’t have been surprised. As this xkcd strip points out, once you learn to see things like kerning, you may never stop seeing them.
Some of the posters had good visuals but were weak on the information included. They lacked a strong Who, What, Why (not to mention Where, When, How). Others had good topics but were information-heavy, with very little white space and no flow. Most were good, but not outstanding, with a working balance of visuals and text.
There was, however, one which I saw and immediately thought “Wow. They really thought this through.” The overall design clearly evoked a particular cultural marker (tourist postcard), the text was readable, and the whole thing communicated their goal and focus. Here is my slightly skewed cameraphone picture of the poster:
It looks like an old postcard, especially in the filter they used to posterize (I think?) the picture of the Smithsonian Castle. The planted borders subtly connect the three text boxes. The eye is drawn from upper left to lower right by the larger font of the project title, History in Bloom, and the postcard greeting. The colors are consistent, the text is readable, and it clearly communicated the overall project in a format which was comfortable to read in the crowded space between tables and posters.
Apparently the project in its final form was sufficiently well-produced to be adopted by the Smithsonian; check out the History in Bloom page on the Smithsonian Gardens site.
For this week’s blog I am reviewing Geoff’s design assignment page, Mapping Civil War Alexandria. This particular page, which looks to be part of a larger envisioned project, is focused on May 1861.
First, some strengths and nice touches:
I like the use of the outer container div as matting, which evokes a manuscript document on a desk (at least for me).
The sidebar color picks up on the color of the water in the header image, which is a very nice touch.
Separation of nav into horizontal for primary and vertical for secondary (I’m assuming that’s that the “Explore the City” is?)
Nothing is so far away from another element that it feels isolated or confusingly floating. I particularly like the consistency of one block (callout or image) for each section of text.
Great captions, very informative.
Use of a primary source quotation for a callout, to flesh out the text, and repeating the matting color for that callout.
Some things which might be tweaked:
Two of your three h3s are in all caps, and one is not. It’s such a bold font that I don’t think all caps is necessary, although it certainly works and doesn’t read as shouting. Either way, they need to be consistent.
The header image is great, but the script font is a little hard to read. Maybe fading out the image more and using one of the layer blending tricks might help it stand out? Also, I’m not sure where the two lines are supposed to have the same emphasis, but if the script is supposed to be more important you might make it bigger.
Body font could be a little bigger to be more readable (I looked at your CSS and noticed odd values for your ems. Maybe one of the fonts is throwing things off?).
Also, the sidebar text is more dominant on the first view than the primary text; it works here because you want people to know it’s an assignment, but in a larger project you might want to de-emphasize sidebar text. Unless, of course, in a larger project you’re only using the sidebar for nav in which case ignore me.
Overall, I find the site to be very visually appealing, not to mention interesting for its content. I love the way all the colors work together, even the pictures of Robert Knox Sneden and the view of Alexandria have similar tones/values. Good work!
I have taken her suggestions into consideration and done some further tweaking to try and reduce the gulf between header and content. A revised version of the page can currently be found with the name design_2.html. Some time in the next week I will switch these urls around, preserving the first draft as design1.html and updating the page linked from my portfolio page.
One of the things I’ve fixed is adding in links in the content. I had left them out initially for two reasons. The first is that the source text, from the current SAWH homepage, is not very link-heavy. The second is that I was trying to think in 1970s terms, drawing from two magazine sources, and magazines in the 1970s did not have hyperlinks. I wasn’t exactly trying to be clever, I just got so wrapped up in trying to imitate my design inspiration that I forget to update it.
Many thanks to Lindsey for her helpful comments! (and I left a comment over on her blog, linked above).
The readings this week were to explore the website The Lost Museum and read an essay which explains some of the ideas and motivations behind the project.
I read the essay first, because I initially visited both via iPad and didn’t want to deal with audio/video in a public place (I’m unable to wear headphones comfortably at the moment). Even if I hadn’t started with the essay, I would have seen the influence of the game Myst on the exhibit. I can understand way the designers might have been drawn to it as a model: it was an immersive experience, award-winning, stunning graphics for the time. However, I think it was a poor choice of model for a historical game, at least one you’re expecting people to come to without any preparation.
Part of our reading this week was to watch two TED talks, each only about 15 minutes long. One was Larry Lessig about laws that restrict us from being a read/write culture to a read only one, and the other was Hans Rosling talking about erroneous assumptions about the third world and the need to get data out where people can see it. These ideas, of the need for freedom to remix and of getting publicly-funded data out where the public can use it, are really important. But they’re not what I’m going to talk about (today).
I spent the presentations paying attention to the content of the visual half. This isn’t to say that I wasn’t listening (because I definitely was), but the two were very different and yet both made good visual impact. And, for the record, I’m one of those people who does much better if I have something to look at in addition to listen to (which is why I don’t do well at symphony concerts). Continue reading “H697 Listening with Your Eyes and Ears”
I was not initially clear about reading Tufte in the same week as accessibility, but now it begins to make sense. Visual representations won’t be of much use to blind site users, but using graphics to communicate information could be really helpful for people who have trouble parsing text.
I was very struck by what Joe Clark bringing up people with learning disabilities. When I’d thought about accessibility, I’d pretty much only thought about screen readers, and the need for captions/transcripts of anything with audio (I have a few friends with hearing aids and it’s made me very aware how few YouTube videos with the CC button actually have CC). But I know so many people with learning disabilities and Processing Disorders. I think that remembering these populations could really challenge us to go beyond simple text-on-screen websites. Continue reading “H697 Accessibility”
I mention this on the page itself, but I don’t seem to be able to do restoration work on old photographs without darkening them considerably. If you look at my last post, where I worked with a photograph of Dora S. Devol, you’ll see what I mean. If anyone has insight into what I’m probably doing wrong, I’d be much obliged. My father has digitized a large number of old family photos and it would be nice to be able to clean some of them up without losing the fine detail that I find so interesting.
My subjects, if we ignore the oak tree, are both women. Well, a woman and a girl.
I enjoyed finding a whole trove of photos of southern suffragettes in the collection of American Memory. My favorite was really Sue S. White, Chairman of the Tennessee National Woman’s Party, who is wearing a jail door pin. However, I could not figure out what was going on with the background discoloration (was it originally the dark or light streak?) and so I gave up on the photo. My North Carolina woman, Virginia Arnold, is wearing a snazzy pinstripe number, and has the added benefit of representing my native state.
The girl whose photograph I colorized is the same person from my last post here: Isadora Dean Scott Devol. She shows up in census records as Dora, but her name really was Isadora, after her mother. She is my great-great grandmother, grew up in New Orleans, and was a very pretty young girl. Now that I have the hang of colorizing, I may bring new hues to some of my other ancestors.
Lest you think my work this past week for H697 has been entirely intellectual, I have been playing around with some old family photos in Photoshop. I did not scan these: my dad has been very conscientious about scanning family pictures and putting them on flickr for the extended family.
So here is one of the photos I messed around with – a picture of my grandfather’s grandmother (I think), Dora Dean Scott Devol. I cropped out most of damaged border, given that it was just border and not vital to the image.
My edited version has lost some of the detail. Somehow the fabric of her dress doesn’t seem to be as clear in the edited version. Moreover, it all got darker, despite my best intentions. Part of the problem was figuring out how to lighten the background without over-exposing the neck and décolletage. I need to go back through the lynda videos to refresh my thinking. Even watching them in half-hour chunks, I get confused about when to use which tool. Oh, for a book with pictures rather than a video with separate transcript.