Archives.gov Redesign

I also have a couple of comments - the news ticker on the homepage looks like a really big search box. I like it's design, but it's misleading in it's purpose.

Social icons could use some chunking - split that group of 8 into smaller chunks. 8 is hard to visually parse.

I agree about the background texture - "archives" inherently sounds like something that should portray age, perhaps?

Overall good use of color, white space, and typography. On the content heavy pages I might suggest increasing the line hight and the white space around sections just a little bit (spacing around headline items and paragraphs, too). Hope this helps.

Niki and Aurimas, thank you for the excellent, detailed feedback! I have a few follow-up responses.

You wrote:"Consider using the font that is in the logo (Trajan) more throughout the site, for H1 headers, navigation and graphics etc. This could be done through image replacement, Cufon, Sifr or @font-face implementation. This would help strengthen the branding, message and tone of the site. Definitely won’t work."

Response: But, I thought that Trajan was a print font that doesn’t reproduce well online—too many subtle hinting details. I assumed that it required display at the scale I’m using in the logo to look good and I'm hesitant to rely on a browser’s ability to render it well as an embedded face. Part of why Folio Light does work as an embedded face is because it’s geometric and doesn’t have a lot of subtle line gradations or serifs.

You wrote: "Perhaps the background gradient color could change and correspond with the colors associated with the different sections of the site?"

Reponse: That's a neat idea, but I think that colors would be overpowering and out of character for the Archives. For what it’s worth, blue is a nice “federal” color and seems appropriate. I also think carrying the color coding that far might be a little heavy-handed. We'd like to have a neutral, subtle gradient for the page background, but the client prefers the blue gradient.

You wrote: "Consider adding a light gray border around the edges of the left, right, and bottom of the site. The blue gradient gets a bit light towards the top and is a little to close in color to the white. The border should help in differentiating this a bit more."

Response: We did that and it was a great improvement. Thanks!

You wrote: "I would nix the web 2.0 gloss on the buttons as it does not seem to fit stylistically with the tone of this site."

Response: Done. What a good suggestion!

You wrote: "Keep italic text use [referring to text in boxes on Research Our Records] sparse. Italics are for emphasis, not setting entire lines of text. Italics are much more difficult for users to read."

Response: That's a fair point though the legibility issues seems to concern large blocks of text, not a sentence or two.

We're weighing your other good suggestions. :-)

Hi Niki,

I have a follow-up question for you!

You wrote that the rounded boxes on the interior pages clash with the square boxes on the home page and squared lower page corners. The client does not want the home page boxes or lower page corners. rounded And, the following is the designer's thoughts on why the interior boxes should be rounded instead of square like the boxes on www.dell.com.

• The client has not expressed dissatisfaction with the rounded corners • He feels that they soften the overall design and keep it from feeling too boxy • He feels that they complement, rather than clash with the rectilinear nature of the rest of the site (they’re very subtle and not strongly delineated) • Because the shadow extends equally on all four sides of the box, there’s not a coding efficiency that’s achieved using square boxes.

Niki, please let me know your thoughts on this. Thanks!

Rachel

Hi Viderity,

1) Rounded corners on boxes and shadows

• in terms of coding and cross browser issues I tend to avoid these types of things unless the client is ok with different browsers serving up different experiences. (modern browsers that can handle css3 box-shadow & border-radius etc. )

• As far as visually, I think its just a slight difference of design opinion. They don't look horribly out of place and they do soften the design, but I was just speaking in terms of consistency.

2 ) Use of web fonts for branding

• The suggestion to use Trajan for headings would further reinforce the branding. The current headline font isn't bad, but its a subtle detail that would make things a bit nicer. Trajan was designed as a print font, but unless we start to use these fonts in our web designs and push web typography further these fonts won't be updated for web use.

3) Color coding sections of the site

• Now that I think about it, the different gradient background colors may be a bit much. They could be subtle softer colors that are faded, but if the client likes the blue then blue it is! I would also add some sort of texture as I mentioned previously in the review.

Let me know if you have any other questions! I'd love the see the updated designs. Glad to help you out!

Niki,

Thanks so much for your responses! I really appreciate the time and thought you've given to our humble little design. :-)

• I think you're absolutely right about the rounded corners and drop shadows IF we were planning on using CSS3 to render them (it's great that CSS3 supports both rounded corners and drop shadows!) However, as you rightly point out, CSS3 support is still spotty and given the broad range of browser support Archives.gov will require, we’re not in a position to implement any CSS3-specific effects. The intention is to use background images tied to the div and the div’s first child element to create fixed-width, variable height boxes. We’ll be able to get consistent presentation of the boxes across browsers while keeping the HTML coding straightforward. It will require a few tricks in the stylesheets but this is something we’ve anticipated from the beginning.

• I’m not sure it’s our job to forward the cause of web typography with this site. That being said, print fonts—ones designed to be viewed at 300dpi—do not always reproduce well at screen resolution. This isn’t true with all fonts, but Trajan is definitely one. It’s too finely detailed to render well at low DPIs. Just look at the last “S” in “Archives” in the header and you’ll see what I mean. See how the anti-aliasing cuts off the fine detail on the right edge of the “S”? We’ve tried many different techniques to fix this but the fact is that Trajan is just not designed for screen resolution!

• Glad you agree on the colored gradients. We added a subtle outline to the pages per your advice and it really helped a lot to punch the design out from the background. And on longer pages, where the gradient isn’t even visible until you start scrolling, the page still renders quite cleanly!

Thanks again for your excellent feedback! Rachel Everett