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.

 

-BPD

Advertisements

Let’s Go Rally!

After combing the web for some intriguing websites, I found that A LOT of them were boring with interesting content. More exploration landed me in the midst of a nifty website that fascinates me: http://rallyinteractive.com/

Screenshot 2013-10-07 at 10.35.00 PM

This website, called Let’s Go Rally, has a user interface that blows my mind. The main focus of this site was its fluid shape movements; it uses mainly triangles to display its content (which I’m still not sure is exactly).

Screenshot 2013-10-07 at 10.35.55 PM

When scrolling over these triangles, they move and display text saying “explore tid bits..”

Screenshot 2013-10-07 at 10.36.08 PM

..and upon clicking, shape-shifts into a circle displaying how many views, likes, and feedback this particular post has received. It also includes a link that leads to said post.

Screenshot 2013-10-07 at 10.35.42 PM

The navigation of this site could not be any more user friendly. I always know where I am because there are only four different pages, that are clearly labeled and highlighted when inside: the home page, about page, a page showing clients, and a contact page.

So you click up at the top of the browser to switch pages:

at the tippy top,                    Screenshot 2013-10-07 at 10.40.25 PM

or on one of these arrowsScreenshot 2013-10-07 at 10.40.33 PM

Screenshot 2013-10-07 at 10.44.58 PM

The top clearly has “About” highlighted.

Screenshot 2013-10-07 at 10.44.14 PM

I really like this minimalistic approach at navigation, as well as the simplistic colors of black and white, aside from the color in the triangles. This smooth sliding design creates a site that gives the viewer something interesting to see (their product) and information they are lusting for (the side pages) all navigational in a pretty appealing way. Moving pictures and links are ALWAYS something that makes me look at all of the links. I also really enjoy the way that the designers places their product at the bottom of every page, always available to the consumer.

Screenshot 2013-10-07 at 10.53.16 PM

Screenshot 2013-10-07 at 10.52.57 PM

Screenshot 2013-10-07 at 10.52.45 PM

This site, through its particular typography and text, is trying to relate to its customers, consumers, and viewers on a personal level. In the “About Us” section, they talk about being three normal guys just trying to signal boost their clients. In their client section, their header looks like this:

Screenshot 2013-10-07 at 10.56.23 PM

I would really love to capture this elegant fluidity that Let’s Go Rally exhibits. I don’t want my viewers to get lost or overwhelmed; therefore, I need to have something stimulating like the moving pictures, that remain ambiguous until clicked. I also really like the huge black font on a white background. It’s clear, crisp and sleek. Although animation like on this site would be extremely desirable, even just being creative with the changing pictures as links would be a great addition to a simple web design. Not that my site is going to be simple (no promises).

-Cody

Love at first click.

I browsed through A TON of websites. But seriously. I found blacknegative.com on page 87 of www.bestdesigns.com. See for yourself: www.thebestdesigns.com/page/87

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:

 Image

And then you are instructed to click and drag to find out more about what blacknegative.com 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)

 Image

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.

Image

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. 

SG

Satorisan, It Means Understanding

Image

Satorisan.com is an online shoe store with a cutting edge website that embodies and displays their philosophy and their product with synergy.  The home page is colorful and eye catching, it invites the viewer to explore what the website has to offer. Navigation is simple. The page does not scroll down neither on the home page or any page after.  Instead, each page scrolls side to side. There are a simple six tabs located at the top of the screen that lead the viewer to all of the pages. Each of the different pages has large clear pictures or videos that give the viewer a very close look at their product. These photographs are the dominating rhetorical device. Text is limited which provides more emphasis on the product itself. Additionally, the choice the designer made in colors helps to guide the viewer’s eye to the shoes. Clickable links are also emphasized by the use of a bright green text box or underline.

What “works” for me about this website is its overall simplicity and emphasis on visual detail over text. The website tells the message of the Satorisan brand visually. Much like a photo essay, the text is there to support the visual story, not to tell it. The purpose of this website is to sell its product so, it makes a lot of sense that the visual emphasis is on just that. The quality and style of the photos and videos used reveal the details of the product and function in selling that product to the viewer.

Image

While I will not be selling a product, I really like the lack of vertical layout in this particular site. I also really like the large, high quality photographs and the “show don’t tell” philosophy. I have found this site to be very inspiring and am now imagining my final site as something closely related.

Analysis of Built By Buffalo

I love four things in a website—something that’s crisp, easy to navigate, multidimensional, and pretty. At least, those are the four things that stuck out to me as amazing on the website I decided to analyze for blog post #8. I found a website to write about (builtbybuffalo.com) through googling web design galleries per Dr. Campbell’s advice. The page is for a company of web designers, so it makes sense that their website showcases their best work. Everything about it, from the color scheme to the graphics and menu options is cohesive and aesthetically pleasing. I felt the designers also artfully crafted the website, mindfully keeping their company ethos in mind, so clients and other visitors to their site instantly get a feel for their staff and services.

Image

The colors are very simple—blue orange and gray. They are used tastefully and sparingly throughout the website. They also put a lot of white space on their site to keep it looking modern and clutter-free. The white space helped keep me from feeling overwhelmed by all the information contained throughout their site.

Their home page draws beautifully on our website literacy and familiarity with logos and image/text relationships to convey a lot with very few words. At the top the site says “Built by” and then a picture of a buffalo—the company logo. I instantly recognized this to mean the website was a company website called something along the lines of “Built by Buffalo”. Drawing on the buffalo analogy, a simple black headline reads “A Higher Plain”, metaphorically alluding to their superior talent and work. From the front page, I don’t know exactly what the company does, but I can see they are professional, modern, clever, and talented. I also do not feel frustrated by not knowing exactly what they do because a simple navigation menu at the top of the homepage makes it very easily for me to visit their “About”, “Work”, and “Contact” pages.

The navigation tools of the website really made it great for me. Instead of using cheap looking “next” navigation links, they use colorful circles, buttons that light up when you scroll over them, and disappearing text that reveals photos beneath to guide visitors through the site.

The site uses simple fonts and no chintzy stylization tricks (such as italics or bolding) to grab reader attention. They allow their stellar graphics and photos to do the communicating. This is what makes their website great—they allow its many elements to cohesively collide, so that none of them are overwhelming to us. They use a balanced mix of photos, text, and graphics to convey their messages.

The main message I took away from analyzing this website is that you cannot convince a visitor to your site how great your site or company is simply through words. A simple and artistic presentation of the contents of your website are the best way to convey your professionalism and credibility as a website creator. This also in turn makes your website easy to navigate and makes visitors want to continue clicking through your links. Before writing my code, I will decide on a simple color palette to use throughout my site. I also feel very motivated to create some graphics for my site in Photoshop after seeing the awesome graphics on Built by Buffalo. They bring such a creative and unique element to a website, that sets it apart. Their website also has a distinct persona, with writing of one single voice throughout the site. This is also something I will definitely keep in mind when making my website, making sure to use a voice that will appeal to my audience.

ao

The Power of a Link

The website I chose to analyze is http://www.urbotip.com/#!/city/257/pittsburgh. I was really impressed by the entire composition of the website for many reasons. I think the main thing that appealed to be is the uniformity of sites yet the way the scene seems to change as you scroll. I plan on analyzing the home page in three different sections for this review.

Screen Shot 2013-10-07 at 7.30.04 PM

Initially, the background and scheme of the web is very basic. The pink brings different aspects of the site together, and all of them are interactive. This makes the navigation easy to find. The bottom left corner looks like a page turning, which is a neat idea.

Screen Shot 2013-10-07 at 7.30.17 PM

The second section has links to different sub-pages. I really enjoy the rounded font and the way it flows with the circular links. When you drag the mouse over the circles, they raise up, which adds to its appeal. The designer did a great job ordering the links in chronological order and providing visual similarities between every aspect.

Screen Shot 2013-10-07 at 7.30.31 PM

The last part resembles the tab of a folder. It, too, has the circular links with intriguing pictures. I like the darker grey of the background, because it contrasts well with the white lettering.

Overall, I think the consistency of the site is what makes it so appealing. It is meant to be a fun design aimed at an informal audience. Its purpose is to provide as much information in possible in an organized manner. The extensive use of links helps achieve this goal. One suggestion I have for this site would be to not have so much scrolling because there is a good chance the viewer wouldn’t scroll all the way down. From this site I plan on using the high level of interaction and the neutral main colors with some bright colors incorporated to help the organization of the site.

– TS

Movement Without Movement

http://www.kevinlucius.com/#_

Image

 

So I found this site by Google-ing “personal web design inspiration” and it turned out to be really similar to what I want my site to be. I know literally nothing about this guy except for the fact that he’s apparently tall and has a cool website. At first, the color scheme and typography caught my eye. I really like the neutral tones he uses, starting with the wood paneling at the top. It’s different and natural and easy to look at. If you look a little more closely at the lower background, it’s a roughed up checkered pattern, which I really like. Again, it’s easy to look at. You could ignore it or stare at it and it doesn’t take away from the overall effect of the website, which I would say is to make the viewer comfortable.

You can’t tell from the picture, but if you follow the link at the top, you’ll be able to see that whenever you click on a picture or a link, it doesn’t completely switch pages, just simply opens up on the same page. I can’t remember exactly what this is called, but Professor Campbell mentioned it on Thursday and it’s exactly what I want to do. Not only aesthetically, but also rhetorically, because I really feel that this device forces the viewer to stay on the same page, flowing from one idea to the next. You move through the website without actually moving (that’s the best way I can think of to describe this technique, sorry). There’s also movement when you click on the different tabs right under the wooden design.

He also has his social media links at the very top, sort of separate from the rest of the site. I’m not entirely sure why this is so separate. Maybe a common reason for finding someone’s website is to follow them on Twitter on contact them or something. That’s not my own personal reason to seeking out people’s websites, I just like to see how they want to present themselves to the world. I’m usually either completely disappointed or completely inspired by design choices.

 

SJM