|
Context of the project: I work in a small office on campus which helps students pass standardized tests required for teacher licencing in the state. The biggest hurdle we face is getting students through the Basic Skills Tests, which cover a wide variety of content, aren't actually aligned with any of the classes they're taking here and now, and are lacking in study/prep materials. We've assembled a pretty sizable list of resources to help students pass them, but we still don't have a great way to communicate them to students in a useful manner. Our existing website fails to do this (a lot of it is just restating stuff from the testing company's, uh... terrific web-site), and our ability to update it is pretty much non-existent. I have a basic familiarity with HTML and CSS, so of course I volunteered to put together a web-site.  Design criteria: 1. Simple for users to use, and simple for me to make. 2. Concisely point students to study and practice resources. 3. Look reasonably professional. 4. Answer basic questions about taking the test as long as that doesn't get in the way of #2. Things about the visual design I'm concerned with: I'm not so good with color theory. School colors are Red, Black, and White. I've substituted black with a dark slightly-off-grey. I'm not very happy with the red on the navigation bar, but can't identify why or what I should do about it (if anything). I originally planned to have the University logo above the navigation bar, and have the navigation bar stay at the top of the page as you scrolled down. While I managed to google my way through an implementation of this, I decided aping my way through javascript violated criteria #1. I instead fixed the navbar to the top, and moved the university logo under it, but I'm not sure if that looks goofy or not. I have no training in typography and little understanding how typefaces work on the web these days. I don't want to be that Papyrus guy, please help! I think I want a basic sans-serif title with serifed body, but I'm not really sure what would be an appropriate pairing. Site so far: http://web.stcloudstate.edu/mtle/ Screenshot: 
|
#
¿
Feb 26, 2014 04:10
|
|
|
|
| # ¿ May 17, 2024 19:50 |
|
|
Thank you for the responses! First off, I've looked into WordPress. I think you're right in that this is the superior way to go, unfortunately the campus IT department does not allow PHP and MySQL on the office web-space they're providing. Is there any way WordPress can work within those restrictions, or alternative services that can? In the meantime, I'll continue working on my existing site for now (even if it ends up being just for my own education). I'm working on addressing the issues raised, but still have more to do before I post an update.
|
|
#
¿
Feb 28, 2014 00:53
|
|
|
I've been busy with other things at work, so this has taken longer than I thought (big surprise!). However, I've gone through a few revisions of the site, taking into account the feedback you guys posted and the design trends I've been seeing on those site inspiration links. Things I've done: 1. The Grey background is sort of changed 2. I've attempted to make the navigation more obvious. 3. Content now has maximum and minimum widths based on text size. 4. Logo sized reduced, placement moved, and switched to a color version. 5. Copy size increased, from approx 14 to 18 pixels on most monitors. 6. Switched to a single sans-serif typeface (Arimo on Google Fonts) 7. Site should be view-able at pretty much any window or text size. 8. Taken out the fixed nav bar. 9. Broken up the site into individual HTML docs for each page, instead of going with anchor links within the page. Things I'm still concerned about : 1. The paragraph text might still be too dense, I forgot to try increasing the line spacing. 2. I'm not happy with the typeface for the title ("MTLE Basic Skills Resources"), but haven't been able to come up with something better. 3. Few minor issues to work out with text/window sizes and the navigation links on old versions of IE. Current Version: http://web.stcloudstate.edu/mtle/test/1.3/index.html Screenshot: 
|
|
#
¿
Mar 19, 2014 01:38
|
|
|
I wasn't expecting anyone would spend the time to wade through the jumbled mess of HTML and CSS I have there! Its pretty much the result of a combination of my inexperience, changing my design a bunch of times, experimenting with new ideas as I think of them, big gaps between working on it, and not having spent any time cleaning up. I expect I'll have to re-write everything from scratch to fix it, but I figured it would be best to get the visual aspects of the design figured out first. I'll work on implementing those suggestions next time I'm at work.
|
|
#
¿
Mar 19, 2014 10:42
|
|
|
Its been a while, but I've updated my site again based off the feedback from here. 1. I've re-written the markup based off the structure Skiant posted, with a few deviations. I ran into some sort of issue (which I think involves specificity) with the class tags on <nav> and <li> which I haven't figured out yet. But I'd like to get feedback over the weekend so I have them all on <a> for now (just noticed I missed one  ). I also used <section> instead of a <div>, since as near as I can tell from the vague definition that's the semantic tag most appropriate for the content I have in it.2. I've waffled back and forth between keeping the background texture and going with a solid dark grey background. I'm not really very happy with either, but haven't been able to come up with something I like better. 3. Contrast issue on nav bar background/text resolved. 4. Paragraph and Header text now on the same margins 5. Title now has the same treatment as the rest of the page 6. When rebuilding the site I tried to follow Lumpy's advice and get the basic layout and functionality with minimal markup. Result was this: http://web.stcloudstate.edu/mtle/basic Adding a few more style properties gets me to a revision of my previous design: http://web.stcloudstate.edu/mtle/ 
|
|
#
¿
May 2, 2014 21:44
|
|