Free People | Blog Post 7 | Dissecting a Website

Free People are a major fashion company that is known throughout the world. There website has a great navigation, rhythm, proportion, “grooming to the font” and intriguing imagery.

This site is introduced with the header “Free People” at the top in a cool script textured font and a few simple graphics around it such as snowflakes to relate to the season.  On the far right of the header is a conversion option to USD dollars, blog, my account, search and shopping basket.

Beneath the header is the navigation floating across the center of the page. I am a big fan of this style because I feel it makes the layout balanced and easier to navigate through the site.  Beneath the main navigation is a secondary navigation that lists the options of free shipping, wish lists and signing up for emails.

Next in line beneath the navigation is the banner with an image of a model in their fall line with a flash player of snowflakes falling. Inside the image is a brief description of the seasons line and an option to shop the boutiques. The typeface style is attractive and intriguing like the header. The “Holiday Boutiques” has a thicker stroke and is a script font. The body has an organic san-serif style and a decorative rop cap.

Beneath the banner is a series of four tabs floating across the center of the page as well linking to other things that Free People offers besides clothing. For instance the first link is to their Pet Project. It has the link at the top then an image beneath it. The second is a link to the November catalog, the limited edition clothing line and win your wish list. I think this is a great example of incorporating text and image for outside links.

Beneath the four outside links are options to get ahold of customer service, about the company and explore more about Free People. On the very bottom of this page are even more options to subscribe, shop and to follow on Twitter, Facebook etc.

The color scheme to this page is light pastels of a cool color palate. Everything about this site main page design invites the reader in. The hierarchical elements to this page are organized well with navigation first, image second and more information beneath. The use of incorporating text and image to outside links is a good way to keep the viewer interested. The energy from this site is very calming and relaxing. Everything is evenly spaced out, imagery and text is not overwhelming or competing with one another. All the text is ragged right and is in either a black, grey, soft pink or blue color. The structure to this site seems to be composed of 24 columns. The imagery is very strong and brings great contrast to the page.

Navigating through this page is very easy and understandable. When I click on a link like “Pet Project” for instance it brings me to a similar layout to the index a page. It introduces itself with the same header and navigations. There is a third navigation floating right on this page in a slim column. It addresses accessories, and other merchandise for pets to help navigate through the page.  Beneath that are shop exclusives and brands we love, trends and sign up for emails.

Back in the center of the page beneath the main navigation is a banner image of two dogs of different size on some of the dog merchandise Free People offers. Beneath that are the categories of merchandise starting with beds. Each category has a thumbnail image of the pet and merchandise interacting with one another.

 

 

 

 

At the very bottom of the page after all the lists of merchandise is a back to top option. There is great spacing to this page with the use of negative space. The imagery is bright and bold.

When you click on one of the merchandise options such as “Printed Cat Teepee” is has the image and thumbnails below of alternative views. There is an overall rating, description, share this item, reviews and fitting and other collections. The layout of this page is very interactive and great navigation for the consumer. It is very informative and easily readable.

Overall the layout of this site is easily navigational and has great legibility. The interaction of type and image works well together and brings harmony to the site. This site does reach to a certain age group but nevertheless is still a beautiful site.

The CSS of this website starts with a series of eight different @font-face family’s and is the only thing that shows in fire bug. The html is composed of a series of scripts, ids, and links. There is a lot of Java script but overall it is very confusing for me since I haven’t seen most of these codes before.

Hulkamania and Design with Dan Mall (Extra Credit)

Hulkamania and Design event by Dan Mall was very informative and educational as well as being a great enjoyment. The title of this event and how he coordinated it with the six different design rules was very interesting. I learned many new things from which he discuss throughout and also began to look at ways I approach the art of design in new ways. One great rule that stood out was to take one project at a time,never overwhelming yourself with so many projects to the point you begin to loss focus and the quality of each one. When he described that list was all of hulks enemies throughout his career, he correlated to us designers that in order to greatly succeed was to take each project one on one just like the hulk. Another great topics or rules of his was how we should keep things simple and keep things fun between the designers and the Clients in order to gain the most potential out of the website we are designing. Having great communication is always the key but having a great relationship with the client is even better, since mall described the client should be like a coworker or partner to you in the job. This event did open my eyes to understanding the world of design in a different aspect and that the information I learned has giving me a boost in becoming a great designer in the future ahead.

Bon Iver

The  “Fish Marketing” web design I felt utilized the single page concept well. The design of the site is very intriguing with the fish as the banner and the way the content is broken up into 4 horizontal columns and two vertical at the bottom. Navigating around this page is very easy and its visuals are not overwhelming, one aspect I think is very ingenious is the use of a book to hold the thumbnail imagery and link to more information.

It is a great use of interaction between the viewer and the site. The warm color pallet works well and is very minimalistic. One thing I think would improve this page is to have a “back to top” option at the bottom in-case the viewer got tired of scrolling up and down.

The “Think Green” is another web page I felt worked very well but unfortunately all the moving around when you go to a new tab makes me very dizzy. The color scheme relates to their topic and not overwhelming with visuals. They focus on typography rather than images and the overall composition of the page is clear and easily readable.

 

 

The design that least exemplifies the single page concept is the “Visual Box Site”. It is visually overpowering and all the images are competing with one another. There is no information telling about the site, barely any navigation, it has a very dark and dim color scheme, the loading is bizarre with its orange bar, the amount of visuals and lack of information is very frustrating.

 

“Made By Sofa” design has little information, lack of color and is very bland. There isn’t much navigation and definitely turns me off with the lack of creativity for a “design interaction” company.  The plus is when you click on a tab such as products… Kaleidoscope brings you to another site that they created and that site itself is very intriguing, colorful, and informational.

I feel if they were trying to draw in consumers to buy their products or collaborate, I would suggest reevaluating their homepage by using more color, information and telling about what they do an who they are.

The band/artist I am creating a single page site for is Bon Iver. The main page is introduced with a flash player video as well as pretty much all of the pages in the site. His site is very cool with crazy images and short videos of random things but it slows down the site a lot.

The navigation is placed at the top of the page in simple black and white color. The navigation remains the same throughout the browsing through this site, which I think is smart because it is easy to get back and forth.

There are a lot of videos, too much because it definitely slows the site down. The one tab that does not keep the navigation the same is the store tab it goes to a completely different page for his merchandise but has a tab to go back to the main site in its navigation. I like the merchandise page the best because it incorporates his art from his cover in the back and only has a few thumbnails of shirts so its not overpowering.

There is not much of a color scheme to the main page because all the color is coming from the videos.

How he could benefit from a one-page site is it would be condensing a lot of information down. The site would be easier to load and straight to the point. The imagery would be visually interesting and relateable to his style.