Skip to content

Analyzing a Website’s Design Choices

www.urbanoutfitters.com

***I want to note that I wrote this reflection before I read the other posts that were published before mine!

I chose to look into the clothing store/brand Urban Outfitter's website for this activity. The design of the website emphasizes elements like trendy clothing, accessories, a millennial-aged consumer, sales, and other chic products. The organization of the website features new/in-season products at the top, with other categories of clothing and trends following underneath. Additionally, some of the graphics shift pictures after a couple seconds so viewers can see multiple images without clicking anything. The designer chose this order to entice consumers to buy the newest, most exciting apparel instead of heading straight to the sale section of the website. Also, the images feature attractive models wearing UO clothing, so it makes their product that much more desirable.

There is black/white contrast. Most of the products and categories features darker colors, while the white space throughout the website provide a gap so everything does not blend together. This contrast emphasizes where consumers can click on various links/images to continue an easy, pleasurable shopping experience. Also, the color palette used on the UO website is extremely calming and gives off a "cool, calm, and collected" vibe. In terms of layout, everything lines up perfectly. All of the banners/images flow nicely and are pleasant to look at, while the links at the top of the homepage that lead to various categories of product are properly centered. The alignment helps you navigate the page because it clearly states where everything is located on the site and how to find what you are looking for. My eye definitely travels first to the fresh-faced models wearing clothes I wish I owned-- which tells why the designed formatted the website like this (to draw in buyers who are attracted to the brand).

Each element on the page is in close proximity to one another, put is separated by the white space as a way to differentiate between different apparel, categories, or sales going on at that time. The entire vibe of the homepage is trendy meets young hipster meets expensive, and every single thing shown, whether it is separated from another object or attached, is extremely attractive to the eye.

Using my browser's developer tools to view the html and css of www.urbanoutfitters.com, I noticed that the chunks of content are organized "behind the scenes" using a lot of color, the margin-border-layered rectangle thing you showed us in class (I apologize for not knowing the proper name of this tool), a lot of different fonts, and other inspection effects I am not 100% sure of.

css.php