FAQ Memberlist Usergroups Register Log in
Profile Log in to check your private messages Search

Web Design Critique, please
Goto page 1, 2, 3  Next
 
Post new topic   Reply to topic     Forum Index -> General Discussion
Author Message
Tinalles
Site Admin


Joined: 22 Mar 2008
Posts: 1630
Location: Grand Forks

PostPosted: Wed Jul 23, 2008 1:25 am    Post subject: Web Design Critique, please Reply with quote

I've been working feverishly on a new design for my course web site. It's not completely done yet, but I'd like to get some feedback on the look. I've got a sandbox set up to play with it. Take a look:

http://eve.cwrl.utexas.edu/test/

Note that if you're using Internet Explorer 6, the design is decidedly broken at the moment. I haven't tried IE 7, but it's probably okay. IE 6 compatibility is a low priority in my world. It's what I go fix after everything else is working smoothly.

Questions:

- Can you read the initial caps okay? How about the small-size initial caps? Should the color of the letters be more vivid to make them stand out more?

- What do you think of the red lettering following the initial caps? It's supposed to pick up on the red from the initial cap to make it clear that the letters go together. Does it work? Is the red overwhelming? What would you think of black, or blue? Perhaps a red underline with black text?

- The red text in the body of the document is a very slightly different shade than the one in the header (#CC0000 in the header, #B20000 in the body). Does that make a difference?

- What do you think of the divider in between the posts on the first page? Is it too small? Should I prevent it from appearing after the bottom-most post?

- The page doesn't expand downwards to fill the available space. On very short pages like this one, that means the footer has a large empty space after it. Does that bother you? Should I drive myself insane trying to fix it?

- Is there enough color? Too much? What do you think of the colors used here?

- What do you think of the background? Does it look sufficiently parchment-like? Does it repeat too often?

- Is there anything else you have to say about it?

Thanks, peeps. ^_^
_________________
Keeper of The Remnant Minuon (cognomen Lucy, the Eaten One) and the Emissary Caeli
Back to top
View user's profile Send private message
JackAce



Joined: 01 Jun 2008
Posts: 673
Location: 5304'N 853'E

PostPosted: Wed Jul 23, 2008 6:44 am    Post subject: Re: Web Design Critique, please Reply with quote

Tinalles wrote:
- Can you read the initial caps okay? How about the small-size initial caps? Should the color of the letters be more vivid to make them stand out more?

The big Caps in the title looks great, but the small ones lose a lot of detail and get somewhat hart to read. I think the biggest problenm is the partial loss of the light outline that separates the red letter form the black background. More vivied colors might serve to solve this problem, or they might end up making it worse. I'm not sure which.

Tinalles wrote:
- The page doesn't expand downwards to fill the available space. On very short pages like this one, that means the footer has a large empty space after it. Does that bother you? Should I drive myself insane trying to fix it?

I don't see any "large empty space". The page ends right after the bottom line of the frame...
_________________

Please click on my Eggs and Hatchlings.
Back to top
View user's profile Send private message
Asa



Joined: 10 Apr 2008
Posts: 3532
Location: Grammar Police HQ. Watch your language, I'm armed with the NYTimes Style Book AND Strunk and White!

PostPosted: Wed Jul 23, 2008 9:36 am    Post subject: Reply with quote

1. I like it! I don't have a lot of trouble reading it.

2. There's a bit of squinting because red is hard to read in general, but in relation to the size and shape, there's no problem. I think it's fine.

3. It didn't until you mentioned it, and it's fine - in fact, I think it might be easier to read.

4. Perfect, in my POV. doesn't interrupt the flow of the page, but makes a clear division.

5. The page shortens to accommodate less material, it seems to me.

6. I don't know... is this for college students? It doesn't seem very professional to me - if you're going for a serious, professional look, then there's too much color. If you want it to be more relaxed and fun, then it's perfect.

7. It does look like parchment. ^_^

8. I wish my professors were this much fun...
_________________
Self-styled Forum Grandmother, because I hand out nicknames and hugs whether you want them or not. ^_^

Keeper of the Library and the Gateway to Haven

Nem: "It's the sort of face you just know is getting ready to poke you with something sharp."
BS: "...then insist you eat a brownie."
__________________
If we shadows have offended,
Think but this and all is mended...
Give me your hands if we be friends,
And Robin shall restore amends.
Back to top
View user's profile Send private message Visit poster's website
YatesOfYore
Site Admin


Joined: 27 Dec 2006
Posts: 885

PostPosted: Wed Jul 23, 2008 11:15 am    Post subject: Reply with quote

I like it! The red would be a bit much on top of the beige parchment if you were going for anything other than "illuminated manuscript", which you are, so it's great. Perhaps not entirely relevant to a Web Development Rhetoric course, but they're uni students, so hopefully they'll at least have some inkling of what it's meant to imitate.

The borders look great where they are and don't stress yourself out about making the layout shorter for the other pages (although it does seem to adjust itself so I dunno what you're talking about). People won't keep scrolling when there's no more content to read - and it's really not very long anyhow.

Nice Job Tinman, simple but effective Wink
_________________
Keeper of Nanashi's Vambraces and the Amethyst Trees.
Back to top
View user's profile Send private message
Tinalles
Site Admin


Joined: 22 Mar 2008
Posts: 1630
Location: Grand Forks

PostPosted: Wed Jul 23, 2008 4:23 pm    Post subject: Reply with quote

Okay, I've tweaked the design now.

1) I kept the header section as it was.

2) I made the red in the small caps much brighter. Easier to read the letter now?

3) I changed the color of the text following the small caps to dark blue with a red hover, same as all the other links. More readable? Color less overwhelming?


The design automagically generates the codes to make the initial caps appear when I post something. No hand coding! You can see the complete selection of caps here:

http://eve.cwrl.utexas.edu/test/initials

It's a font called "Celtic Eels" which I downloaded from dafont.com and colored in.

I've got a lovely spiral thing from the Book of Durrow, but I'm not sure whether there's any place I can reasonably use it. Here 'tis:

http://eve.cwrl.utexas.edu/test/durrow

I've got a vector version, so I can regenerate the image at any size without loss of quality. I was thinking about maybe making a giant copy in light gray and anchoring it at the bottom right of the content area. Alternatively, I'm thinking of going and finding a celtic-style cat and mouse and having the cat chase the mouse across the top of the footer.

I'm okay with a fun-and-relaxed feel for the course. And as for strong relevance to the course topic -- well, it's an example of design. You should see last year's design.
_________________
Keeper of The Remnant Minuon (cognomen Lucy, the Eaten One) and the Emissary Caeli
Back to top
View user's profile Send private message
theBSDude



Joined: 09 Jul 2008
Posts: 1800
Location: The boring part of Washington

PostPosted: Wed Jul 23, 2008 4:29 pm    Post subject: Reply with quote

I think the smaller initials are easier to read than the big ones. The 'w' is kind of distracting.
_________________
...In accordance with the prophesy.

TheBSDude, dubbed 'BS' by Asa and nicknamed 'Thebes.'
Keeper of the Tristam, The Amazing Non-Emo Vampire!(tm) and a Massive List of Webcomics.

"I'm like a ninja with no hopes or dreams." --Wally of Dilbert
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Tinalles
Site Admin


Joined: 22 Mar 2008
Posts: 1630
Location: Grand Forks

PostPosted: Wed Jul 23, 2008 5:57 pm    Post subject: Reply with quote

Err, I just realized that I didn't mention that this site is my WORK sandbox. So if you look at it and it's NOT a medieval theme, that's because I'm working on some other theme at the moment.
_________________
Keeper of The Remnant Minuon (cognomen Lucy, the Eaten One) and the Emissary Caeli
Back to top
View user's profile Send private message
Asa



Joined: 10 Apr 2008
Posts: 3532
Location: Grammar Police HQ. Watch your language, I'm armed with the NYTimes Style Book AND Strunk and White!

PostPosted: Wed Jul 23, 2008 6:09 pm    Post subject: Reply with quote

I think the issue for me is when you add the green - it's just too many colors clashing at once. When it's just blue and gold (and red letters), it's much easier to read.
_________________
Self-styled Forum Grandmother, because I hand out nicknames and hugs whether you want them or not. ^_^

Keeper of the Library and the Gateway to Haven

Nem: "It's the sort of face you just know is getting ready to poke you with something sharp."
BS: "...then insist you eat a brownie."
__________________
If we shadows have offended,
Think but this and all is mended...
Give me your hands if we be friends,
And Robin shall restore amends.
Back to top
View user's profile Send private message Visit poster's website
Tinalles
Site Admin


Joined: 22 Mar 2008
Posts: 1630
Location: Grand Forks

PostPosted: Wed Jul 23, 2008 6:24 pm    Post subject: Reply with quote

Hmm. I used green when there were TWO eels rather than one. Most of the letters of the alphabet had just one eel.
_________________
Keeper of The Remnant Minuon (cognomen Lucy, the Eaten One) and the Emissary Caeli
Back to top
View user's profile Send private message
theBSDude



Joined: 09 Jul 2008
Posts: 1800
Location: The boring part of Washington

PostPosted: Wed Jul 23, 2008 6:33 pm    Post subject: Reply with quote

Exactly; the two-eel letters are more visually confusing than the one-eel letters.
_________________
...In accordance with the prophesy.

TheBSDude, dubbed 'BS' by Asa and nicknamed 'Thebes.'
Keeper of the Tristam, The Amazing Non-Emo Vampire!(tm) and a Massive List of Webcomics.

"I'm like a ninja with no hopes or dreams." --Wally of Dilbert
Back to top
View user's profile Send private message Send e-mail Visit poster's website
JackAce



Joined: 01 Jun 2008
Posts: 673
Location: 5304'N 853'E

PostPosted: Wed Jul 23, 2008 7:03 pm    Post subject: Reply with quote

Here's an idea which might work:

Turn the green eels blue, and turn the black background dark green instead.

That way you reduce the contrast between the blue eels, the yellow bands and the background, while keeping a strong contrast between the background and the red letters.
_________________

Please click on my Eggs and Hatchlings.
Back to top
View user's profile Send private message
Squeeself



Joined: 23 Mar 2008
Posts: 258

PostPosted: Wed Jul 23, 2008 7:30 pm    Post subject: Reply with quote

In all honesty...Squee would suggest dropping the initial drop caps entirely. Makes it far too difficult to read. If you don't wanna drop em, Squee would at least simplify them. Right now, they don't look like part of the words, but more of an icon to go with the article, so Squee's initial read was "ollege Freshman Puts Off Essay." Either make them better match the font (which involves simplifying them, dropping off the black background, etc.) or drop them entirely. They just muck up the readability too much, especially as an example for a course on web development Wink

The rest of the design is nice. Section separators are a bit fancy for Squee's taste, but they fit. Very clean overall. Drop caps just stand out way too much.


Last edited by Squeeself on Wed Jul 23, 2008 7:31 pm; edited 1 time in total
Back to top
View user's profile Send private message
Tinalles
Site Admin


Joined: 22 Mar 2008
Posts: 1630
Location: Grand Forks

PostPosted: Wed Jul 23, 2008 7:30 pm    Post subject: Reply with quote

Hmm. That's an interesting suggestion, JackAce. I may give it a shot.

And regarding the height issue -- here's a screenshot from my uber-tall monitor:

http://eve.cwrl.utexas.edu/screenshot.png

Note that GIANT BLANK SPOT OF DOOM beneath the footer. It bugs me. It would make more sense to me if the footer were flush with the bottom of the page. But making it do that is fiendishly difficult with a pure CSS layout (which this is). The bottom of the footer would need to be flush with the bottom of the window. In and of itself, that's entirely doable. The problem is making it aligned flush with the bottom of the window ONLY if the content isn't tall enough to push it down naturally. My solution in past has been to ignore that. But it's harder to ignore when my monitor is as tall as it is. >.<;

Squeeself wrote:
In all honesty...Squee would suggest dropping the initial drop caps entirely. ... muck up the readability too muchDrop caps just stand out way too much.


The problem is that they're the only spots of color in the design. Without the caps, it's a solid black-and-beige wall. The shapes are pretty and all, but there needs to be some color variation as well.

Edit: Maybe a different caps font? Like maybe Eileen Caps. The designs are somewhat less complex (floral rather than eel, only one type of background coil). I could make the letters bright yellow (or "gold") and the leaves a dark green on the black background. I want to avoid a straight red-and-green, partly because it's too christmasy, but also because it's likely to cause problems people with certain types of color blindness.

Of course that means that I need to color a whole new set of initial caps. X_X

Edit 2 (or 3?): Some samples of Eileen Caps colored in:


_________________
Keeper of The Remnant Minuon (cognomen Lucy, the Eaten One) and the Emissary Caeli
Back to top
View user's profile Send private message
JackAce



Joined: 01 Jun 2008
Posts: 673
Location: 5304'N 853'E

PostPosted: Wed Jul 23, 2008 8:30 pm    Post subject: Reply with quote

Tinalles wrote:

Can you make the backgroung on those letters transparent?

Since these don't have an outlined border, I don't think they should be set on acolored field like that. If the background was transparent, the letters should look like they were actually drawn directly onto the parchment. For a "real" illustrated tome look, I suggest either blue letters with red flourish or red letters with gold flourish.
_________________

Please click on my Eggs and Hatchlings.
Back to top
View user's profile Send private message
Tinalles
Site Admin


Joined: 22 Mar 2008
Posts: 1630
Location: Grand Forks

PostPosted: Wed Jul 23, 2008 9:40 pm    Post subject: Reply with quote

JackAce wrote:
Can you make the background on those letters transparent?




JackAce wrote:
For a "real" illustrated tome look, I suggest either blue letters with red flourish or red letters with gold flourish.


It's true that red and blue were more common colors for decorated initials. I was trying for a "gold leaf" look, but of course it's hard to get "shiny and reflective" in a digital image.

Edit: So far I've colored (and cropped, and resized) SIX distinct sets of letters. Not to mention writing the Drupal preprocess functions to automatically insert the requisite code. The finger I use to hit the control key aches. XD
_________________
Keeper of The Remnant Minuon (cognomen Lucy, the Eaten One) and the Emissary Caeli
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic     Forum Index -> General Discussion All times are GMT - 4 Hours
Goto page 1, 2, 3  Next
Page 1 of 3

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum



Elveron phpBB theme/template by Ulf Frisk and Michael Schaeffer
Copyright Ulf Frisk, Michael Schaeffer 2004


Powered by phpBB © 2001, 2002 phpBB Group