Web Design 101 Research: 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.

Wednesday, April 24, 2013

Homepage Research: Los Angeles

Los Angeles:

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

Critique: The copy feels positive and welcoming, but the colors in my opinion are boring. I'm guessing it's taking on a beach theme, but it feels bland. The weather updates in the top right is a cool idea, and helps decorate the search bar a little. My favorite design element is the footer, where they have a simple mountain, city, and beach laid out. If an even simpler version of this was used for the header with the same colors, it could help with the site's appeal. I also really like the picture info box that slides out when you click on the camera of each image. On the navigation, I'd take out the small text above each link, and use a different color than orange for the hover. I'd also take out the three floating menus that hang out on the bottom of the page.

Tuesday, April 16, 2013

Homepage Research: St. Louis

St. Louis:

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

Critique: I really enjoy the simplicity of this site. The panoramic photo is kept thin and neat, with the background playing well against it. The white space separating the photo from the background and navigation is also visually appealing. I really don't like that they didn't change the color of the links, though. The blue detracts greatly from the professionalism the rest of the site offers. It'd also be a nice change if they didn't have the navigation links become underlined with hovering over them; the change in background color is good enough, and is a nice touch. I also noticed the body links turn red when hovered over, which really needs to be changed. The footer is decent, but I don't like how bulky it is, and the only social media link is tiny and tucked away under the city address.

Homepage Research: Baltimore

Baltimore:

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

Critique: Overall, it isn't a terrible site. It's downfall is how chaotic everything appears; for the way it's laid out, your eyes scatter all over the page from one random topic to another. There isn't much info that doesn't belong on the front page, there just isn't much flow. Aside from that, they used a multitude of different backgrounds (from gradient to opaque to solid) in a way that separated one category of info from the next, and I found that to be a good idea. The background doesn't distract too much from the central info, but it doesn't help with how chaotic everything appears. I think the 'Stay Connected' box in the footer needs to go, as does the random pdf download int the box above it, and the pinboard. The background's light to dark blues are visually appealing, and the social media links to the mayor weren't a bad idea either.

Friday, March 15, 2013

Homepage Research: Meshuggah

Meshuggah:

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

Site by Din Studio.

Critique: Everything about the background is pretty cool, but that's all there is to the homepage. Checking out the navigation, you have to click from the drop down menu to get to a page with some context; clicking the link on the navigation itself will just lead to you to a page with nothing on it. Some obvious fixes would be to include some information on the homepage in a way that the type didn't disappear into the complicated background. It'd also be helpful to link the 'Meshuggah' part of the background to the index, and change the '-' on the navigation to 'home', since that's where it leads. The faded effect on the footer is kind of cool and its color goes well with the background, but the words are still difficult to read.

Homepage Research: Massive Attack

Massive Attack:

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

Created by Kwame Corp, a digital advertising agency.

Critique: The large album image isn't bad, as it's always a nice touch to have on a band site, but it might be made better by adding a gradient to the bottom edge so that it disappears into the background a little more. They did a really nice job on the color scheme, especially swapping the color of the category backgrounds; when on a lighter background, they're darker, then they're lighter on a darker background. This meshes with the main background gradient very well, and I like how they applied the same light on dark/dark on light concept with the navigation and the footer. It would help their page a little, though, if they had their playlist set up, and if there wasn't so much random information. Placing a limit onto how many blog posts appear on the homepage would help, as well as having some sort of information under their live performance category, even if it just says something like, 'coming soon'.

Monday, March 11, 2013

Homepage Research: Mütter Museum Store

Mütter Museum Store:

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

Critique: The header is attractive and I really like the font used throughout the page because it's so simple and clean. The sign-in link stashed above the side navigation is a little awkward, though. One major change that might help the homepage's appearance would be to center the wrapper so everything isn't hugging the left edge, and to create drop down menus in the top navigation to get rid of the side navigation.

Homepage Research: H.R. Giger Museum

H.R. Giger Museum:

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

No creator's info or copyright given.

Critique: The layout's kind of cool with how they have his latest work presented first and you can flip through the art right on the homepage, but the design as a whole isn't very interesting. The copy on the navigation is pretty cool, but it could be pulled off better by having them aligned horizontally so that the lines on each word could connect as one long navigation bar. I'm also not a fan of how the image and type are just floating in the center. An easy fix could be giving the body in the center it's own black box like the side panels.

Sunday, March 10, 2013

Homepage Research: MoMA Store

MoMA Store:

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

Critique: The MoMA store site is a branch off of the museum site itself, so including the link back to the original page near the footer was a good idea. Keeping the links and font like the MoMA logo in the header was a good idea, too, as it keeps the page minimal and uncluttered. My favorite part is how the change the header and footer color schemes to match the them of the ads, and this time they used black to contrast with the large rainbow ad. Everything's in it's place and organized well, like the two navigations being of different sizes and colors. Lastly, I admire the way they extended the different color header and footer bars from side to side and kept the content in the body center; it feels as if there's no wasted space and keeps everything divided.

Saturday, March 9, 2013

Homepage Research: GAP

GAP:

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

Critique: The mass information seems chaotic at first, but after taking a moment to look over it all, it's grouped together well. The typical searches, like store locations, are placed in boxes right under the search bar, and all the information related to making a purchase is gathered above the shopping cart link. I'm not sure if I like how the logos of each brand are included in the topmost navigation; I feel it might be adding to the cluttered feel. A good fix might be making all the ads the color of the current page's logo. This might work, especially since they all have distinctive colors. The rest of the page is clean and simple, including the mass of information near the footer. Using bold lines to separate it all down below makes it much easier to look through.

Homepage Research: Hugo Boss

Hugo Boss:

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

Critique: First of all, the ad catches my eye right away. Its color's are vivid without clashing with everything else; the black and gray gradients are a good idea in that they keep this effect universal with any ad. The entire top bar is well organized, considered all that's up there. I admire how the two navigations are kept separate, and the 'My Account' link is well placed and aligned above the shopping cart link and search bar. The homepage is well put together and includes everything any other site presents without looking cluttered. The style of the homepage suits the company.

Thursday, February 28, 2013

Homepage Research: Makeup Forever

Makeup Forever:

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

Critique: My favorite part of this homepage is that the ads center around one featured product. For a cosmetic company that only distributes their own products, I think this is a good strategy. I also like the ad backgrounds matching the grey and black theme. I am a little disappointed in the rest of the site, though. It's laid out well, everything being easily accessible and neat, but that's easy when there's not much to the site. It seems boring because there's a lot of unused space, and the thick gray border takes away from any sleek appeal the ads are offering.

Monday, February 25, 2013

Homepage Research: Ulta

Ulta:

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

Critique: The muted gray and orange colors aren't bad, but it'd be better if they were carried throughout the site a little better, like having the ads match that color scheme instead of being pink. Also, like most cosmetic websites, this one has no background. Backgrounds can help keep a theme flowing throughout a page, as well as help identify one company's site from another, so I don't agree with most cosmetics sites having blank backgrounds. One last thing that kind of annoys me is the navigation The boxes don't change size according to how long the word is, so the links look a little disorganized/cluttered. Aside from the, the page is very well organized. The mass number of product ads is kept manageable with various sizes and presentations, from a fading ad to a three category page viewer at the bottom. And despite the ads following a different color scheme from the rest of the site, they at least match each other, which helps keep it all together,

Sunday, February 17, 2013

Homepage Research: Coastal Scents

Coastal Scents:

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

No site creator provided, just copyrighted by the company itself.

Critique: I've used this site on occasion, and the products I've received have been pretty decent. However, I'm hesitant to continue being a consumer because the site itself still makes me question the quality of its products. The colors are bland, the font used for the company banner isn't very attractive, and the product ads are presented all in the same size, going straight down the page. The layout of each ad is cluttered, and I look passed them entirely just to find what I'm looking for, so they cause no desire to browse. The sidebar isn't a bad idea, but they don't pull it off; there's no flow to it. The first couple are alright, all being relate to shipping and what you're about to purchase, but then it goes to a randomly placed Pinterest link, Google link, and a testimonial bit. If they wanted to include the rest of that stuff, it'd be better to present them separately, rather than shoved at the bottom. I could go on, from the boring fonts used to the disorganization of the banner - the list would go on. There doesn't seem to be much thought put into this site at all.

Homepage Research: Smashbox

The second homepage entails anything commercial. Makeup is most available to me, and I've spend a lot of time researching makeup, so it seemed to be the best choice. The problem I've discovered in this research is that most home pages for cosmetics and beauty are laid out in a nearly identical format; Company over navigation, large ad, three smaller ads underneath, all aligned in the center. So, I was happy to find a site that was a little different.

Smashbox:

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

Website creator unknown, probably produced by the company itself.

Critique: Like it's name, Shashbox's homepage is bold, and maybe a little intense. The white on black makes everything come at you as an expression, and the all caps, bold and stretched out type pronounces this more. People like their makeup strong, so I guess this could be a good marketing strategy. I do like the organization with the images; how the series of ads on one panel are all of one category of cosmetics, and how it's presented as a flip book. The navigation does well in standing out with the contrasted black text on white, but the font on it, while matching the rest of the page, isn't easy on the eyes.

Tuesday, February 12, 2013

Homepage Research: Bonobo

Bonobo:

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

Website provided by CrowdSurge Services.

http://www.crowdsurge.com/services/?menu=services

Company that provides digital advocacy and ticket distribution for artists, musicians, and such.

Critique: They used a zoomed-in image of their most recent album cover as the banner background, which I find to be a very good idea. This frames the video of a new song, which is neatly aligned alongside the full album cover and a link. To me, this the perfect presentation for a music artist's website; their newest release front and center, with a sample and a link to purchase it. The text underneath incorporates the album's green color, against a white gradient background. This counters nicely to the light text on dark background that the banner above has going on. The information presented continues to be important enough for the front page, being tour dates and news and such. With organization like this, the site fits the simplicity of the band's music, which is the most important; it probably attracts the type of crowd the music is for.

Thursday, February 7, 2013

Homepage Research: Dream Theater

Dream Theater:

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

Site provided by Reccenter

http://www.reccenter.com/

Agency that provides social media advertising to clientele.

Critique: The banner is the best part of the webpage, simply because of how the tight rope divides it from the background. The background itself is an image of the sky, which plays well to the banner. The last detail I like about this page is that the menu floats as an underline against the band name using the same font and design as the band name itself. Other than that, I only see negatives. The social media links at the top look as much out of place as the obligatory ad underneath the banner, and the information just runs down the page in a white block. Nothing else in the homepage is incorporated with the theme, and I quickly lose interest.

Homepage Research: Muse

Muse:

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

Website origins unknown

Critique: Muse's site is organized really well, and I like the subtle lines above each category to help separate them. The lines might also be there to tie in with the band logo. Though I like large and graphic banners, their moderately sized and simple band name logo stands out just enough; it's offset from the rest of the page simply because of its slightly bigger size and bold lines. The navigation isn't bad, either, and I like that it remains uncrowded by the mass of info underneath. Overall, Muse's site carries its theme of bold simplicity very well. I don't the background, though. It ruins the organization by making the page look busy. I feel like it's suppose to create an optical illusions towards the center, but that just might be from staring at it for too long.

Wednesday, February 6, 2013

Homepage Research: A7X

Currently in class, we're studying the design of homepages. The first of the three categories is music related, so I've decided to make a site based on my friend's metal band and research various band sites that seem relevant to my friend's music style, as well as those I find interesting.

Avenged Sevenfold:

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

Website by TWENTYFOURCORE PRODUCTIONS

http://www.twentyfourcore.com/

Production service that provides publicity and digital advertising to bands like A7X, Disturbed, and Staind.

Critique: I like how the band name is bold and center with a metallic gradient. It has a presence that relates to the band's style of music, which can be considered metal, and stands apart from the rest of the page without clashing. The image behind it is placed well, as it frames the name with the band's death bat mascot. The menu above having similar copy style as the band name creates a nice flow and is easy to find against the rest of the page. I really like urban grunge styles, and this site carries that theme all throughout the page without being too busy. I would change the side borders, though. Having two different designs for each side of the page does ruin the flow a little. Instead, I'd probably prefer to have the clouded background of the band name banner stretch to fill the page, rather than cutting off abruptly into the center black background.