Refined Design. Patagonia

For this blogpost I am choosing to speak about the website layout and concept for the retailer – Patagonia. I previously had never visited their site, but upon viewing, was struck by the beauty that lies in the simplistic nature of its layout. I hope to use elements incorporated in their design when I go on to create my own website

Let me explain:

Patagonia is a clothing retailer, which has taken a more minimalistic approach to the design of their website. The background of the main page cycles between 5 photos. When you hover over the photos and click you will be taken to the place where Patagonia sells the clothing being depicted in use in said photo. In terms of the opening 5 images, some are embedded with video links that house pertinent information. Much of their product is geared towards the avid outdoorsman, or woman. As such, the pictures help illustrate some of natures beauty.

Screen Shot 2013-10-08 at 8.37.27 AM

The top left of the site has “Shop Clothing & Gear”, and “Inside Patagonia” tabs. The top right houses a search bar and a space to view your cart, sign in, or sign up. The “Shop Clothing & Gear” tab is of particular interest to me due to its location and content. We read from top to bottom, and from left to right. Since this is the case my eyes draw me to clicking here first. Under this tab you can find all of the different things they sell broken down into highly descriptive categories.

Screen Shot 2013-10-08 at 8.38.06 AM

Under the “Inside Patagonia” tab you can read testimonials, find information about their corporate social responsibility, view their blog, and links to all their social media accounts; among other things.

Screen Shot 2013-10-08 at 8.38.57 AM

The drop down menus are white with black lettering, which is a stark contrast to the images of the natural world being displayed behind them. Navigation through the site is extremely easy, and I feel as though this works for Patagonia and the overall brand message they are trying to convey. Thankfully they do not have an overly complex user interface, because their cliental would likely not appreciate it. The people buying their clothing would much rather be out enjoying the world – Patagonia’s clothing and site help facilitate that enjoyment.

When reflecting on what I want in my website, I can’t help but be torn. A flashy and complex website, while aesthetically pleasing, detracts from my ability to display important information on it. I really enjoy the outdoors, and have recently taken up some ‘extreme’ sports. I hope to use drop down menus to increase the ease of navigation, while also making use of beautiful pictures of the natural world in my design.




Love at first click.

I browsed through A TON of websites. But seriously. I found on page 87 of See for yourself:

It was love at first click.

Black Negative uses its website to show off their work of branding and marketing. They SHOW you what they do at the same time they are TELLING you what they do. I’ll explain more of this a little later.

This page was unique. And I don’t mean regular unique. I mean it’s a uniquely unique page. You start out here:


And then you are instructed to click and drag to find out more about what is. The navigation is so simple, but it stands out so much from your typical up and down scrolling navigation. Another thing that is great about this navigation and layout, is that the viewer is getting a different experience with every click and drag…there is literally no room for boredom or loss of interest. You want to keep looking because you have absolutely no idea what could be next. No worries if you get lost though. If you want to go back to another page, just click the “menu” item at the bottom, and you can scroll through to find your desired page (see picture below)


All that being said, there really isn’t that much cohesiveness to the whole layout. Since every page is different, the viewer is always looking at different fonts, alignments, and so on. What I think is so great about Black Negative is that each slide utilizes different methods of design to draw in the viewer. For example, on the slide that I have pictured below, you aren’t just getting photographs; there is video and music as well. Everything about the page helps you to jump into that individual atmosphere. You get totally sucked in…until you go to the next slide and then you are somewhere else entirely.


I suppose that there is a certain amount of similarity between the slides. The colors are all soft, there is a lot of transparency and layovers. Nothing screams out at you, everything is more like a lullaby. I know this all sounds pretty cheesy, but once you check out the site, you’ll probably understand what I mean. 


Web Analysis: OLÉ SOIREE

I stumbled upon a website called Site Inspire when I was looking for website inspiration and creatively searched “website inspiration” on Google. Site Inspire was the first result, and it contains a multitude of clean and excellently designed websites. I recommend taking a look there! I decided to analyze one of the websites I found on there, OLÉ SOIREE.

Screen shot 2013-10-07 at 11.50.23 AM

After translating the site from German to English, I discovered Olé Soiree was the name of a pop-up dinner party event that would be held in unusual places around a German town called Weisbaden. It sounded like a cute idea! We should have one in Pittsburgh. Anyway, back to the website: the page is a single page design (i.e. clicking on any of the links in the header area will simply move you up or down the page to the area the link describes). The single page design, I think, usually ends up looking nice but isn’t always the most efficient way to share information, as a viewer can easily get lost on the page. However, if we look at/consider each separate “page” the links link to, I found that it is a beautiful website with stunning graphics an bright colors. The information is displayed very clearly in a font that is both uncommon (i.e. not available on Microsoft Word) yet entirely readable. The font, even when white on a colored background, manages to be very clear. The only thing that may not entirely work is that the background have white specks in them that sort of blend into the white text, but I personally had no trouble discerning the difference between text and speck.

Speaking of backgrounds, I really appreciated how the background for each “page” was simply a recoloring of the same background. It added variation yet stuck to a common theme that connected the entire website back together.

One of my favorite parts of this website was that the header with all of the links always stayed at the top of the page, no matter how much you scrolled down. I think this allows for easy navigation for the viewer. I also am in love with the footer: I’m a huge social media user, so I’m planning on making links to my various accounts using bright, colorful graphics like the ones seen here:

Screen shot 2013-10-07 at 12.04.25 PM

I also love the colored footer. It sticks out and forces the viewer to look at it, even though they know it contains boring contact and copyright information.

From this website I am now inspired to work to make:

  • a sticky navigation bar
  • a colored footer with social media graphics
  • (if using a background) a variable yet cohesive background
  • white-on-color graphic style

Mostly, looking at this website has reinforced the fact that I want my website to be clean and brightly colored.