Last Blog Post :(

Web Design Feedback | Last Post

If I could go back in time and give myself advice on how to get the most out of the last two classes in web design I would definitely tell myself not to sit by my friends!!! ***I REPEAT PLEASE BELIEVE ME DO NOT SIT IN YOUR FRIENDS ESPECIALLY IN INTRO* I would do all the readings no matter how tired you are and never wait until the last minute to do ANYTHING. Studying and practicing is such a huge part of this class and before advanced web I wished I studied and practiced a lot more in intro. Studying and practicing pays off in such a major way and I highly recommended it. Resources that would definitely help are the links Professor Blake gives you on blackboard and ALL THE READINGS in your book. DON’T SHARE BOOKS BUY YOUR OWN*** I would say to never travel anywhere without your book it comes in handy all the time. The next 32 weeks will definitely be changeling for most but if you work hard, go into office hour’s, study and focus it will all be okay. If you are a technophobe don’t think you know everything just yet. There is always something to work on and improve. I definitely saw a change over time within my skill and style. I HATED ABSOLUTELY HATED WEB in the beginning and dreaded Advance Web but now I LOVE IT! It’s so weird! I still need work and practice but the fact that I worked really hard and didn’t sit by my friends this past semester helped a lot. Also on any group projects don’t work with your friends it helps to really push yourself outside of the box in skill and with other classmates. I am going to continue to better myself in web design and practice even though I am not in the class anymore. It truly is an art and it fascinates me how you are able to design in so many different ways with using code. Making beautiful imagery, symmetry, typography and content can all be done in web. It is not just a bunch of boring codes that does not allow you to create anything beautiful! I was worried about that because I am an artists and I LOVE to paint and draw and web definitely proved me wrong that it is much more than just codes.

This is one of my absolute favorite links for inspiration for web USE IT !

 

Alex Lytle

Javascript Frameworks Research

JQuery is a form of JavaScript. It serves as a library that gives a designer flexibility and simplification when designing. JQuery works with a multitude of browsers and helps the designing of html, animation and other intentions for the design much faster and efficient. The purpose of JQuery if for rapid web development, that is provided through its JavaScript library.

To start off the basic jquery syntax of an html page looks like this…

The jquery.js file in the src element in <script> must point to a copy of jQuery which is in the same directory as the HTML file.

“Onload” function is a code that JavaScript programmers wrap their code in to confirm that it runs after the browser finishes loading a document.

An example of  this syntax looks like this…

This code can only successfully run and work once the images in the documents are done downloading.  A statement called “ready event” is used to run this code when the document is ready to be worked on.

You can also add a click handler to the ready event link.

“it’s important to reference external style sheets or embed style elements before referencing the scripts.” (api.jquery.com)

(COMPLETE EXAMPLE)

Some features JavaScript offers are a callback function. A callback function is an function beneath a parent function that needs to be implemented at a later time after its parent function has performed (This function is also known as an “Argument”). In the meantime the browser is still able to perform other functions.

I recent years JavaScript’s popularity has increased because of its appealing and easily manageable libraries. Even though with all JavaScripts praises it does have its issues.

To begin with CoffeeScript is another programing language with JavaScript. It helps with the writing of JavaScript making it easier, consistent and helps avoid any irregular nature in the JavaScript mark-up.

An example of code writing using the CoffeeScript process is in three steps.

1. Write your code in a .coffee file
2. Compile it into a .js file
3. Include the .js file in your web page/s like you would any other JavaScript file

Two basic rules to remember when writing JavaScript and CoffeeScript together are firstly Whitespace matters. Unlike other syntax, there are no curly braces or statements in CoffeeScript indentations are used. Additionally there are no parentheses.

One aspect of CoffeeScript is the use of the var statement which is used to avoid creating global variable on accident. In JavaScript var is used but not in CoffeeScript.

JQuery has a widespread plugin ecosystem. They help from table sorting, validation, auto completion, etc.  But how do you know if a plugin is good to use?

Look at this example of code…

The code looks seemingly perfect but you don’t have time to look through it all once it’s been run. For example the inline return should be written as…

So even though code works once an event has run, probably you haven’t had time to read through all the code carefully…so double check.

(For more feedback on this code go to signs of poorly written jquery plugins.)

Meerkat is an example of a Jquery plugin. Depending on the decisions that were set in a design the information will slide or fade in from top or bottom of the browser. In the window itself the information will remain fixed while the rest of the page will scroll customarily. There are additional alternatives as well providing a close or don’t show option, which will close the Meerkat option until the browser session has ended, or depending on how much time you have set it for.

Brosho ‘Design in the Browser’ is another Plugin where you can use a build-in element selector and CSS editor to style your markup right in your browser. This plugin creates great opportunities because you wont have to keep switching between your editor, browser and you also can see changes immediately as you progress through your design.

Try this Brosho Demo.

Another helpful plugin is tinyTips 1.0. This plugin allows a designer to add tooltips to any component on a page.

TipTip is a unique plugin that is only 3.5kb minified and a custom tooltip jQuery that uses no images. It is completely customizable in CSS and can identify its surroundings like staying in the window size.

(Example)

Tiptip demo.

JQuery-Notes 1.0.2 is a plugin that lets you add text to images on your website. Almost like a hover state to distinguish what that image is.

All these plugins I feel enhance the user experience by making it easier to navigate through and also make it more informational. Little tweaks and quirks like hovering over an image and letting the viewer know what it is along with keeping the site within its screen range helps a lot.

ESPN is a site that uses Jquery Frameworks. Its design and set-up is clear and easily navigational and s very fluid. There is a ton of content that is compressed thoughtfully but it is not very organized. Its tabs have a ton of other links and surprisingly the color pallet is very minimal. The site overall isn’t very exciting and the only focal point seems to be a video.

Arrow Awry Part I

 

 

Arrow Awry Records Inspiration and Direction

 

-Alex Lytle

Indie pop music is a genre of alternative rock with unique, tranquil and stylish tones in its sound. Most songs are embellished with an eerily nostalgic vibes, melodic, lighthearted sound that are inspired by Frank Sinatra, Marilyn Monroe, surfing, and fashion.

I am pursing this project because Indie pop is one of my favorite genres of music and I appreciate that Indie Pop artists tend to have a seemingly primitive and simplistic approach to music. The trendy, exclusive sounds intrigue me and I would like to challenge myself with visuals from what I feel from listening to this music genre.

My goals for this project are to portray this music through its many aspects and components whether it be the artists, the fashion, the artwork, or just the places and people that inspire this genre to be what it is.

Some adjectives to describe my goal for look and feel of this site and brand are unique, stylish, bold, exclusive, organic, natural, honest, entertaining and original.

My goal in designing this site is to have an earth tone color pallet, a light-hearted organic feel, with whimsical art and photography. My site will be different because I will literally break down the structure of the genre and use trendy, unique visuals and information.

Responsive Web Design

In a multitude of ways, the process and strategizing of web design is similar to an architectural process. Responsive design is a set of different methods and ideas.   Creative and intuitive decisions must be made by process of elimination, refinements, and the building up or down of a page when creating a web design. The world of web design is now geared toward pleasing and designing for many high profile devices and browsers today. The devices can range anywhere from Iphones to games, which is growing exceptionally. With growth comes the adaptation of the designs needed. The reasoning for that, is for a companies illustration to be as updated as possible to its viewers. Can we keep up with the high demands of this growing rate?

When designing a web site, it must be as legible and compliant as possible to navigate through for a viewer. Regardless of ones Internet exploring and researching skills, ones abilities should not be tested when a simple search or learning experience is in the works. Media queries, which is an inspirational strategy for designing a website are used to improve the layout of a responsive web design through the style sheet. For example, a style sheet is used in the iPhones layout design. The media queries are helpful for resolution, widths etc.  Media queries allow you to become familiarized with the data regarding a sites uses and it’s serves in the CSS style sheet. If you were to apply a media queries with a specific width or style to a phone for instance it would look like this….

@media screen and (min-width: 480px) {

.content {

float: left;

}

.social_icons {

display: none;

}

Some larger resolution amounts vary from 320px to 1200px, which are used in media queries.

example of resolution differences

(GNV and Partners is a successful example of a fluid grid layout and design)

example of fluid grid in the works

Responsive web design is the approach of screen size, resolution, orientation and environment the user is in and the behavior they exemplify when viewing the design. Accommodating the user from their computer to iPad for example is essential to their experience and preferences.

Also when designing a website a fluid grid design is necessary as well to properly layout a web design. Flexible images are also a key component to keep the design interesting and easy to design. A responsive web design is when you can make the browser thinner and wider and the layout adjusts itself accordingly and still fits comfortably within each other even on a phone screen.

Also, screen sizes and resolutions are crucial, especially with the various sizes of screens a designer has to work with today (iPhone screen, iPad screen, computer screen). Fluid grids are essential in the design process and with the various screen sizes “liquid layouts” are used to help work with the high number of screen resolutions. A fluid grid is used to design in terms of quantities, which allows all the elements on any size screen resize in relation to one another.

Over all, when designing a successful responsive website questions need to be asked in the process… “What are the key breakpoints? What do major templates look like at each breakpoint? What do the header and footer look like? What content appears on the homepage, various section fronts, and article page? What’s the overall look and feel? (TITO BOTTITTA)

CSS Positioning

There are five different property values starting with the default static, which is when elements are rendered in order. The second value is absolute. Absolute is when the element is positioned from the positioned element before it otherwise known as its ancestor element. Third is the fixed value that is when the element is positioned in relation to the browser window. Next comes relative  and that is when an element is positioned relative to it normal or original position in the document. For instance if you add 10 pixels to the right of the element (right:10) it adds 10 pixels to the elements right position. Lastly is inherit which name kind of speaks for itself, the value of the position in inherited from the other element otherwise known as the “parent element”.

When positioning elements in your html (Hypertext Markup Language) position: static specifies the type of positioning technique used. This method allows you to place an element somewhere else in the design where it would normally not be placed.

(I.e.)

#div-1 {

position: static;

}

Positioning the element with the “relative value” can help position an element in the document with top, right, bottom and left values. For instance, you can navigate an element by adding pixel amount to the top (top: 15px) or adding to left (left: 30px) which would then move the element from its original placement to a direct one of the designers choice. It is also possible to use a negative value.

(I.e.)

#div-2 {

position: relative;

right: 25px;

left: -30px;

}

Position Absolute is when you can place it in an exaction location when completely removing it from the document then re-navigating it somewhere else. When removing an element from the document it can then reposition the other elements in neighboring div’s.

(I.e.)

#div-1a {

position: absolute;

top:0;

right:0;

width: 100px;

}

Since relative positioning is placing an element in a specific position in the document when setting it so any other elements within that positioned div would then become relative to that div. For instance, if the “div id” holds 3 div’s within it such as div a, b and c those 3 div’s would change position relative to the values of the parent div, div-1.

Effective Web Design

When you enter a website what do you see? How do you feel? Is the imagery capturing your interest or is the context? What brought you to this particular site? Is it easily accessible? Many questions can be asked and observations taken in when you are introduced to a site for the first time. The design, hierarchy and accessibility are primary things to consider when creating a site. For instance, always make sure there is a solid understanding of information and organization to the context. Give your site a tone or voice to suite individual audiences. Design with clear navigation cues and be personable. Make headings descriptive and use keywords.

Taking these guidelines into consideration goes to a site you visit often and what do you see? Is it easy to navigate through? Is it visually interesting? What is the hierarchy on the page?

Bass Pro is a decent example of an easily navigational and well-designed site. The homepage has its basic navigation across the top, and a banner relating to the Christmas season. At the very bottom there are other links to merchandise they provide.

There is plenty of negative space on the page for breathing room. The font is legible and at a reasonable size. The navigation through the page is broken down to different activities outside to home and gifts, to shoes and boots, etc. The navigation is not “dumbed” down but makes its approachability to users much more valuable.

The links at the bottom are organized into lists instead of cramming them into drop down tabs, which helps with the user experience.

If you were to click on a tab such as fishing, it will drop down with a series of links that relate to the subject. Everything is approached with simple sentences and keywords to get straight to the point and make it easier. When you enter a page from one of the links it will introduce top seller categories to the items relating to the category beneath. On the left is another form of navigation to help make your user experience more precise. For example, you can narrow down your selection to price, brand, current offers or type.  Overall the navigation stays the same at the top and the bottom of the page.The Basspro website as a whole doesn’t overwhelm the user and keeps it simple for users. Text is not overwhelming and headlines are used to help guide the user. Keywords are used throughout the page such as Fishing, Hunting, Shooting, Boating, etc. to keep to the point. Keep the hierarchy of the page in mind and give the site pleasant tone. Don’t overwhelm with imagery or text and remember negative space is not an enemy.

Now try it yourself. Go to a website your familiar with. Dissect it and see if it is easily accessible and meets the needs of a first time or regular user.

For help and other guidelines visit 10 Principles Of Effective Web Design.

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.

Blog 4: USABILITY

 

http://www.alistapart.com/articles/whereami/

“Where Am I?” by Derek Powazek is an article about the meaning and importance of navigation in a web page. In a website navigation represents more than just links, it is the essentials of a web sites success. It also determines the relationship and understanding of the user. According to Derek Powazek navigation has three parts to help communicate the site to the user. First is “Where am I?” which represents the present. Second is “Where can I go?” representing future and three “Where have I been?” which represents past. If an individual was to visit a site and successfully answer all of these questions on a deeper page in the site, not the homepage and not rely on any visuals that would be a successful site, but in today’s age according to Derek Powazek most sites fail. Navigation is important because it builds trust between that company’s site and the user. How is the content presented and is it easily to navigate through? “NEVER, EVER LINK TO THE PAGE YOURE ON”, (Powazek). Navigation tells a story and if there is a link that does not take them to a new place like they expected that is a bad experience for the user and they could become doubtful and uncertain about the trust of that site. Another key guideline is to “SHOW WHERE YOU ARE”. Just like a GPS the user needs to know where they are on a site so they don’t have a panic attack like they would get lost on a road somewhere. Another guideline is “THINK BEFORE YOU LINK”. Is this link or whatever absolutely vital to this site and what you can do here? Thinking about the global navigation and describing the site, the question a designer should ask himself or herself is the story getting across? How many global elements are there? How many drop down menus? Should tabs be used? In the end, for successful navigation to a site it’s all process of elimination, testing, testing, testing and the visual language is consistent.

 

http://www.billabonggirls-usa.com/#/home/

Billabong.com has a great navigational structure and site design. The navigation bar is a series of tabs with drop down menus and the Billabong logo at the top left beside them. There is a flash player beneath the tabs for visual interest to the user as well. There are a few images below to click on for blogs and clothes but all the important information is at the top drop down menus.

The navigation to this page is very visual but easily usable. The navigational elements visually stand apart from one another on the page from the rest of the elements to decide what to look at first. The use of a plain white background helps determine between the visuals, and reminds me of how magazine make their layouts. The breadcrumbs in this layout are successful because if you click on blog for instance once you get to that page you have the tab menu still at the top to return to the previous page or another page.

There are not many text links throughout this page besides to read more, post a comment, or see this shirt. On this site there is a navigational tool for searches products and narrowing down your search to certain clothing or even surfboards. The navigation is very intuitive in this site because of how successfully the designers have condensed so much information into a usable and trustworthy site. The fact that there is shopping, blogging, videos, teams, events, store locator, online retailers, and much more all on one site and it is not overwhelming and still visually interesting, to me is a great accomplishment by the design team who created the Billabong site. Honestly I would not change anything about this site I think it is overall very well put together. If I absolutely had to choose something, I would say maybe to condense down the shop options a little for better navigational purposes.

Overall I feel the usability of the Billabong site is engaging, visually interesting, practical, and reasonable.

Blog 3: Guy Harvey vs. Salt Life

 

Two competing brands such as Guy Harvey and Salt Life rely on many things for growth but mainly with web promotion. Each website can determine whether a viewer stays interested in a brand by its format, structure, accessibility, hierarchal scale, theme and over all feel. I will illustrate and define both Guy Harvey and Salt Life’s website and determine whether they are visually interesting, organized, useable and easily relatable.

Guy Harvey is a world-renowned painter, biologist and conservationist. He paints mainly marine life among other animals and plants. When entering the Guy Harvey homepage there is a beautiful painting at the top of a Swordfish and squid, which is visually interesting and intriguing. The whole page is composed of shades of blues and white text.  On the left side of the homepage is a picture of Dr. Harvey and his signature on top.  In hierarchical order from top to bottom is a reminder about Guy Harvey Ocean Foundation fundraiser in white text, kind of out of place in my opinion. Below is a series of tabs beginning with home, shop, video, and news, about Guy Harvey, Ocean Foundation, partners and friends. I think that a lot of those tabs could be compressed down into categories within a few of the tabs to save space and overwhelming the viewer with too many options. Below the tabs is the Swordfish and squid painting then a Guy Harvey video touching on facts about the ocean, his donations to research, etc. On the side of the main video are six other videos. Once again very overwhelming and busy. I think one video with maybe 2 on the side would have sufficed rather than six. On the far right is an ad promoting Guy Harvey clothing, license plates, and other merchandise. Below that are three other ads categorized in “News and Events” recounting safari photos, Guy Harvey magazine and Cayman Islands trip. I feel that the placement of this was a poor decision. It is very small, cannot be seen easily and has more importance over other things on the page. Back to the middle of the page at the very bottom are more links to view Guy Harvey related travel destinations and merchandise. On the far left underneath his self portrait there are even more links such as appearance schedule and mobile express. There are quick links to his artwork and books as well. Another aspect of this page I find beneficial is the Eco-Links such as Facebook, twitter, flicker etc.

Overall the message that Guy Harvey is trying to get across is not reaching its viewer. Everything else is distracting the viewer from the real purpose of this site, which is save our oceans, help the seas, donate to marine research and support by buying our products. This layout is clashing, hierarchal order is not correct based on what’s more important than others, way too many tabs and unfortunately this page seems more like an ad page. If they were to limit links and tabs and condense a lot down I feel that this page would be more successful.

When I click on a link such as news I am brought to a more organized and simplified page. At the very top is another painting serving a decorative purpose that is successful. Below are a few tabs home, about, and join the Guy Harvey Ocean Society. Underneath the tabs begins the immense lists of news article after news article. It’s organized by most recent but then goes on forever, which can be a little irritating to the viewer. This page has a very cleanliness feel and works besides the crazy amount of articles not being organized into tabs or folders.

In general, the Guy Harvey web designer needs to take into consideration all types of viewers knowledge of website navigation, limiting the tabs, the links and work on hierarchal order.

Salt Life’s web page is very inviting with flash player imagery and vibrant colors. Just like Guy Harvey this webpage relates more ad page then web page. At the top there are tabs such as shop, fish, dive, surf, beach, team and salt life girls. Below are flash player imagery of posed beach shots, surfing, islands and basically very coastal pictures. Below are 3 ads starting with Facebook information and shout outs to fans. Next is another promo for the brand and deal of the week on merchandise. Below those three ads continues a series of ten ads relating to merchandise, food, salt life girls, surf, dive etc. I don’t think it was necessary to make all those ads when they are listed at the top in tabs. At the very bottom of the page are promo codes, sign up to get special updates and offer and join.  Overall this page is very picture orientated with vivacious colors. The structure of this page is very box like, big, and bulky.

When I clicked on a tab such as beach it brings me to the same tabs at the top then a picture of the ocean and a girl standing in it. Below is once again the Facebook and fan shout out then on the side a flash player. On the far right are a series of clothing merchandise. Back to the middle of the page there is a blog spot, then a box on where Salt Life began. At the bottom of the page there are two ads promoting their stickers and YouTube link.

Over all I think that yes this site is visually interesting based on all the images and vibrant colors but would not be easily readable or relatable to all age groups. The structure and organization is better than Guy Harvey’s but generally still very similar.

In complete, the colors that were chosen for these sites (especially Guy Harvey) I think depends on the brand but could have used revising. I know that in chapter 1 of Above the Fold choosing such a dominant color could be based on either poor design or for brand guidelines and research. The headers on both were visually interesting but just worked as decorative purposes. The navigation for Salt Life was simpler to work around than the Guy Harvey site because of less tabs and overwhelming information. The placement of navigation on both worked well. The feature area for Guy Harvey’s imagery and content was not in hierarchal order but Salt Life is. There is no distinct focal point in Guy Harvey’s page but in Salt Life’s there is the constant imagery. As for body and content there is an overwhelming amount in Guy Harvey’s page and not efficiently organized. In Salt Life there is not that much information, its more of a visual page rather than informational. There really wasn’t much of an anything other than visuals for the footer. The background on Guy Harvey is solid blue and Salt Life a beachy grass almost.

In conclusion despite minor fixes to their sites I love and appreciate both companies messages towards oceanic life and there overall depiction through art and photography.

Grid Studys

http://guyharvey.com/

http://www.saltlife.com/