I've spent half the day working on my site, but can't quite get satisfied with how it looks. I keep coming back to Meadows' four factors that affect functionality of graphic design (legibility, contrast, color and movement) and asking myself if I am using them appropriately. I've never had much of a eye for design, and I struggle with the smallest of decisions: How much contrast in font size between the main head and the secondary? Should my menu bar bleed off the screen or should I leave white space around it? Does reversed out text add impact, or just make it hard to read? Does the movement I'm using actually direct the viewer's eye or just drive him/her batty? And all this before I even tackle the technical hurdle of actually publishing the site. Help!
What you see above is the home page after all the buttons have dropped into place (they fall in from the, sequentially left to right), but before they have been rolled over. Below is a screen grab of what happens when a button is rolled over. I want it to be clean, but I'm afraid I may have crossed over from clean into boring.
Nor am I exactly happy with my interior pages. Below is a shot of the one I have most fully built out. Each of the thumbnails in the colored bar is clickable; the content below the colored bar changes accordingly, and the three thumbnails below the text all pop up to larger views when rolled over. In designing these interior pages, I am trying to think in terms of telescoping levels of information -- that is, the toggling between macroscopic and microscopic views that Meadows discusses.
My thought is that the images in the blue bar offer one subdivision of information (in this case, more information about a specific web-course); once the viewer has selected a course from that bar, he or she then gets another subdivision in the form of the additional thumbnails along the bottom, specific to the course under examination. But I feel like the bottom part of the screen and the the top half are discordant rather than cohesive. Maybe I need some sort of visual element to tie the course-specific information (bottom half) to the color-blocked navigation bars (top half). Or maybe I need to have the course-specific information appear in a popup window rather than in the main screen, since the main screen starts to get SO busy.
So much to think about!
Shawna, I think this is an attractive site so far. I like that the colored blocks go off the right side on the front page because it seemingly anchors what would other be these elements floating in a sea of white. I also think the amount of white space balances well with the rest of the content. Contrast between the two type elements at the top work well and the reversed out type are well controlled - more reversed out type might be difficult to read, but your use is not. I also really like how the colored boxes drop down as you demonstrate in the second screen shot. I can't say for sure how the third page works - does the blue secondary bar change colors to match the appropriate color of the block from which it links? From what I've seen so far, Shawna, this looks like a really nice start to your webpage.
ReplyDeleteWow, Shawna! You have been working! Impressive work!
ReplyDeleteI don't have the "design eye" either. Give me a book to edit, and I'm in my element, but ask me to use alignment, color, contrast, etc., and I flounder. So your questions made me stop, look at your page, and spend some time to evaluate my initial response. Here are my answers to some of your questions....
"How much contrast in font size between the main head and the secondary?" I like the sizes of your H1 and H2. The contrast in size is sharp. What I think isn't working is the gray--the first item I see is the row of colored squares rather than information that would link the page to you. I wonder if black text would provide more contrast. I also wonder if decreasing the height of the colored blocks would allow the reader to first see your name and then see the rainbow bar.
"Should my menu bar bleed off the screen or should I leave white space around it?" I like the white space on either side of the menu bar. When a menu bleeds off the screen, the user may think that's poor design rather than a bleed.
"Does reversed out text add impact, or just make it hard to read?" The reversed out text creates contrast. I did have to strain to read the text, but the page is small....
"Does the movement I'm using actually direct the viewer's eye or just drive him/her batty?" I think I'd have to see the webpage live to respond to the movement.
"And all this before I even tackle the technical hurdle of actually publishing the site." That's what's getting to me.... I cannot get any technical support and so am confused by the language of FTP, SSH, and so many other things. Just give me an address, give me a portal, tell me how to enter, and let me upload! I've not had such luck! I hope you have an easier time!
I would agree with your word "discordant." I wonder if choosing a thumbnail shouldn't bring up another window with the third-level information and images. I don't know how you could create harmony between the thumbnails and the third-level information.
One thing that distracts me is alignment. Robin Williams (not the actor but the author), suggests that we use consistency, alignment, repetition, and proximity to establish strong design. Your page has several "margins," which can distract.
I suspect that some of our classmates--many of whom seem to have the gift of design--may have some other comments. Congratulations, though, Shawna: I think you have more of a designer's eye than you would admit, and you have a great start on your website!
Shawna,
ReplyDeleteI like that you're using a lot of color, and that even though your color elements are very bright and eye-catching, they are well-balanced by the use of white space.
Your front page looks like it could use a few more elements, although I'm not quite sure what. It just seems a little unbalanced when looking at the interior page, which is very full. I actually think the interior page looks great - very interesting and informative, and the eye moves easily from one element to another.
You're doing great, keep it up!