The Web Design Critique Thread

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread

Skiant: Mar 10, 2013

OtherworldlyInvader posted:

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:

- I'm not overly fond of the super-obvious texture for your background but it's not that big of a deal and you've got way more obvious problems to start with.
- I'd switch the text color to white in active menu items because the grey is not going well with the red you've picked
- Align page titles with the body text. As a rule, try not to get overly fancy with padding/margins on text elements like titles and paragraphs. Something between 1em / 1.5em margin-bottom is enough for most of these.
- There's a big difference of treatment between the "MTLE Basic Skills Resources" title and the menu/page blocks with their rounded corners and shadows, which makes the said title to be merged in the background while the other elements are floating on top of it.
- Your HTML markup is seriously hosed up, the menu for instance is a huge mess and you're basically shooting yourself in the foot by making it extremely difficult to maintain.
You're using title markup (<h2>) to define font-size instead of relying on CSS. The text link is outside of the link. You're over-using IDs and completely miss the point of classes.

Basically your page structure should looks like this :

code:

<body>
	<header>
		<img src="logo.png" alt="St Cloud State University">
		<h1>MTLE Basic Skills Resources</h1>
	</header>
	<nav id="main-menu">
		<ul>
			<li class="menu-item active"><a href="index.html">Home</a></li>
			<li class="menu-item"><a href="help.html">Help</a></li>
			<li class="menu-item"><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	<div class="page-content">
		<h1>Main title of the page</h1>
		<p>Content in here</p>
	</div>
</body>

# ¿ Mar 19, 2014 08:31

Adbot: ADBOT LOVES YOU

# ¿ May 17, 2024 01:54

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread