Web Design 101 Research: May 2013

Tuesday, May 7, 2013

Homepage Research: King's College

King's College:

-----------------------------------------------------------------------

Critique: I don't like much about this homepage. The yellow and red combo hurts my eyes and the font style on the navigation is too big and blocky. The hover color doesn't look good as white. Pretty much the only part I like is the background of the header. The texture gradient fading to black looks very nice, especially with the contrasting solid gradient box of the header placed over it.

Homepage Research: Penn State

Penn State:

-----------------------------------------------------------------------

Critique: The footer is huge. It's pretty much one half of the whole page, and definitely needs to be condensed. The faded effect on the header is a nice touch, the color alone being very appealing. I think the font choice on the navigation needs to be changed, though, to something sans-serif and a little smaller. The site is more interactive than most with how every bit of text has its own simple hover effect. They do this without making it distracting or obnoxious, and it's a nice touch. The information in the body is laid out very well as it lead my eye from one block to the next. Overall, I really like this site, especially for it's color scheme and organization.

Homepage Research: McDaniel

McDaniel:

-----------------------------------------------------------------------

Critique: There isn't too much to say about the page since there isn't much going on. The mass of images in the body are laid out pretty well, but they don't lead your eye in any direction, and they aren't present in a way that makes the viewer interested in looking through them. The text gets lost in a handful of the images, and there's no consistency in the copy style. If they incorporated the same green opaque banner that's in the "Got Spring?" image in other images, it might help tie things together. It would also help to get rid of some photos and just replace them with text over a solid black background. I think that would help separate some of the info a little better. I do really like the secondary navigation as a drop-down. It helps keep what little space they have left open. While footer is aligned with the navigation bar, I think it should be moved over and center aligned, instead. There's too much empty space in the footer that could be used for quicklinks or social media links.

Monday, May 6, 2013

Homepage Research: Temple

Temple:

-----------------------------------------------------------------------

Critique: Temple's maroon theme color is very appealing, but can be overwhelming. They avoid this by using it sparingly throughout the site. The very subtle grey gradient in the background halfway down the page helps the first three columns in the body area pop. The drop-down menus seem slow to show the information when you mouse over, and the text within the drop-downs is too small and cramped. Instead of having the links underlined when hovered over, the background behind each link should change to the aforementioned subtle grey. The main navigation type seems too blocky at a glance and should be smoothed. My favorite element of this homepage is how everything in the body area is aligned from top to bottom. It's adds diversity and keeps the simple organization from becoming redundant. The footer is kept simple by including little informtion, and the social media links stand out without feeling out of place.

Homepage Research: Pheonix University

Pheonix University:

-----------------------------------------------------------------------

Critique: I think there's too much white overall. The lack of color variation makes the site boring to look at and leaves and unfinished feeling. With that considered, it is a nice touch that the header isn't a segregated box, which ads an interesting flow. The black bar at the very top gives a bit of definition, so if this element was pulled down and used on the navigation, it might help make the site look more complete. Having a thick border on the drop-down menus isn't very attractive and should be thinned out a little if they plan to keep it. Also, the pale blue color of the links should be used more throughout the site so the links don't feel so out of place. There's a little too much information in the footer that should be condensed. If there was a background color and variations of body area colors for each category of information, the site's good organization would stand out more.

Homepage Research: Towson University

Towson:

-----------------------------------------------------------------------

Critique: The contrasting navigations are eye catching and clean while doing well to utilize such a small space. The secondary navigation doesn't distract from the main navigation since white text on a black background stands out more than black text on yellow. Plus, the yellow hover color on the main navigation is a nice touch. They do a good job with spreading out the two theme colors and using them to organize the whole site. The three body area columns organize a mass amount of information really well, and is an overall good design with how they're spaced apart from each other. Overlapping the columns on the headline image box also adds a nice dynamic to the page. I'm not sure what's going on with the green clouds background, though. It's really out of place. Even just changing the green to a light gray would fix this. The footer takes up more space than most footers seem too, but it balances out with the weight of the header. Again, the color of the quick links on the footer ought to be changed on this site, as well.

Homepage Research: Carroll Community

Carroll Community:

-----------------------------------------------------------------------

Critique: The Carroll site isn't awful, but it could use a lot of work. Having an actual background would do wonders for the site, rather than having the four color bars stretch out from side to side. If they're sticking with these four colors, the links should be changed from blue to a shade of dark gray. The header is also a bit empty. Adding social links or an image would be an easy fix to this. They could also take all the quick links and move them into the header as a secondary navigation, which would free up that first section of the body for a larger image and maybe one headline pertaining to the image. All the image links, like "Make a Gift" and "College Calendar" need to go. If they want those on the homepage, they'd be better placed in the footer. The footer itself should be divided from the rest of the page, and should be stretched across the three columns in it's own div tag, rather than being placed in the middle column of the body. Again, the site need a lot of work, but at least they made a decent font choice.

Homepage Research: MICA

MICA:

-----------------------------------------------------------------------

Critique: The layout of MICA's homepage is very non-typical. The header being placed slightly further down is a unique touch, and it works well as a divider. The fact that it stretches across the width of the screen really draws the eye, and its colors change to match the featured artwork, which keeps it from being too distracting. The navigation is kept neat within the header, and is kept uncluttered by only including the more important links. Despite the various images being so different from one another, the page is still easy to navigate. It probably helps that all the images vary in size and are organized around the text, which is consistent in copy style without blending. The one thing I'd like to change are the link colors in the navigation. Purple on orange is difficult to read, and the hover color isn't very attractive against the orange, either. You can tell right away that this site belongs to an art college, which means it does it's job in representing the college.

Homepage Research: Boston

Boston:

-----------------------------------------------------------------------

Critique: The navigation and header are very neat and simple, and I like how the photo in the header changes for nighttime and daytime. Everything throughout the site is neatly aligned, like with how the "City of Boston.gov" box is square above the "Service requests" box. The service requests box is in the same spot and changes according to the page it's on, which helps keep the site very organized. I'm not a fan of having the social media logos placed on the same page so close to each other: Just having the bar that's aligned along the right side is good enough, and is one of my favorite designs of this site. It's unique. I'd like to see a little color variation, because all the blue seems a little monotonous, but it isn't terrible. The site as a whole is very simple, clean cut, and efficient.

Homepage Research: New Orleans

New Orleans:

-----------------------------------------------------------------------

Critique: The site looks very professional, mainly due to the header. Not having a background on the header really helps the white logo and type stand out; it's uniform with the rest of the page. The drop-shadow on the navigation is a nice touch, as is the slight color change on the navigation's hover. The info on the rest of the page is organized pretty well, but the colors and lack of separation makes it all feel cramped and blended. Adding a line between the two columns in the body could help a lot with this, or having a slight difference in background color - one a light gray while the other could remain white. On the footer I notice that the blue box behind the links is really off-center. I'd also change the color of the links in the footer to white instead of the sort of cyan blue the have right now. Overall, the site's pretty appealing, especially because of the deep blue background.

Saturday, May 4, 2013

Homepage Research: New York City, NY

New York City:

-----------------------------------------------------------------------

Critique: The New York site is kind of disappointing. It's just weird that the wrapper is aligned to the left, and the header photo looks like something from instagram, plus it clashes with the color scheme of the rest of the site. The color scheme itself is really bland, and makes me think of a forum. A more interesting background might perk up the site a bit. The side navigation and its content is redundant and needs to go, a link to the index page should be added to the top navigation, and there's just way too much information for an homepage. They have a good start with the three column layout and how the information is organized, but overall, it ought to be redone entirely.

Homepage Research: Annapolis, MD

Annapolis:

-----------------------------------------------------------------------

N/A

Critique: I really like the Annapolis site. Everything is laid out really well, information is easy to find, and the variations of blue balance it out well. I can only nit pick at a few things, like how the welcome images aren't clickable. I'd also change how the navigation links blink when you scroll over them.The dropdowns are nice and quick, and I especially like how the two navigation drop-downs are alternate colors - one is blue, and the other is white. There seems to be too much empty space above and below the main navigation, though. I'd position that navigation lower and maybe place a simple line/design element above. Maybe social media links since there aren't any on the main page.

Homepage Research: Pheonix, Arizona

Pheonix:

-----------------------------------------------------------------------

Critique: The overall site isn't bad. It's organized pretty well, but there's nothing directing your eyes. The main purple and gray colors of the site are scarce and spread out too much, so the all photos make everything too chaotic. If they made room for a background color and added solid backgrounds to the header and body, the welcome photo would feel more included. I'd also get rid of the photo links on the right side of the body area and just replace those with text links. I'm a fan of the simplicity of the header and footer, and it would make a world of difference of the 'eServices' block to the left of the welcome image matched up to a color in the welcome image. And the featured video area has too much white space.

Homepage Research: London

London:

-----------------------------------------------------------------------

Critique: The site as a whole is well-designed. My favorite part is the color-coded drop down menu, however, I'd change the colors on it to match the site better. The red and grey scheme is very attractive, and rainbow doesn't really tie in well. The same goes for the blue and such bars underlining the categories of information. The text in places like "Most Popular" and in the logo is a little blocky, so smoothing them out would help. Aside from that, I love how the split navigation is set up, and the large image is very beautiful against the rest of the site as they use the theme colors in the shirts. It's an easy way to change up the site colors and add variety for when they decide to change the photo.

Thursday, May 2, 2013

Homepage Research: Westminster, MD

Westminster, MD:

-----------------------------------------------------------------------

Critique: A huge flaw is that nobody has updated this site for the spring, so there's still snowy landscape pictures and Christmas trees on the main page. I feel like there's too much blank space in the header image, and the white house on the end of it feels random. An opaque image of some neighborhood landscape covering the background of the header might help with this. It also feels like there's too much blue. Changing the background to gray could help with this. The blue underlined links need to be fixed, the footer links could use better organization, and the blocks above the footer ought to go. Instead of the blocks, they could have those same links, and possibly the same images, being presented in their flip-book in the middle of the page. The current pictures that are there have broken links, and the space could be used for the more important images of Westminster, like the Arts Center.