As stated in the prompt, the grid is a long-standing design technique for presenting all sorts of content. The grid technique is relatively standard to witness in websites, whereas coming across a website that breaks the grid is rather rare. To highlight the use of the grid, I found examples that showcases good grid design, success in “breaking the grid”, and a layout that I personally do not care for. The website that showcases good grid design is American Eagle, a United States based clothing company. The website that showcases successfully “breaking the grid” is Abel, a company that sells one hundred percent natural perfume. Finally, the website I do not personally care for its layout is Arngren, a website in which I cannot truthfully tell you its purpose from the site alone.

American Eagle’s website is an embodiment of good grid design because if a twelve-column grid was applied to the webpage, the site would have all its content evenly divided and placed among the twelve columns. Specifically, on the homepage, images are used to visually appeal to the audience, making the brand’s clothes seem more desirable. In the included picture below, half of the page is taken up by one image while the other half is divided into six images. None of the six images overlap or cross their respective column, but rather they take up an equal amount of space and stay within their respective column. Even the text and buttons included on the homepage follow this same rule, that they stay within their column.

As for the colors and text included on the page, all the images effortlessly seem to fit in with the others and the text is incredibly legible. Not only is the text legible, but the buttons pictures on the left side of the page are easily able to seen by the user. From a designer’s prospective, I believe these choices were made to allow the user a more visual experience, one that allows them to see the see the clothes on numerous occasions throughout their visit on the website. I also believe through its images the website intends to make customers feel included on account of the models being used. By utilizing the entire homepage to place these images in a pleasing manner, the website is successfully being a good example for grid design and perhaps a good example of design in general.

With the website Abel, it is a phenomenal example of “breaking the grid” because if a twelve-column grid was applied to the webpage, all the content contained within the site would not stay within the designated columns. Rather, the user may notice that content overlaps. A specific example I noticed was the pictures on the homepage. I believe this is a phenomenal example because the images are used to visualize the perfume in a pleasing manner. In the case of the green cedar perfume that is advertised, three green images are displayed to give the viewer a visual of green, hence making the perfume seem more appealing as the designer relates the perfume to other green objects the user may be fond of. From a designer’s perspective, I believe this choice was made to make the perfume seem more high end and desirable than ordinary perfumes.

As for the effectiveness of the color and text on the page, the plain, simple white background makes the three images pop on the page. The font is easy to read, making the text legible, and the text follows the color suit of the perfume it is representing, allowing the text fall into the color scheme the images are meant to make up. All the details that come together, such as the color schemes and effective use of “breaking the grid” truly make this website unique and successful. The webpage also has an effective navigation. The menu on this page is in the upper left hand corner and is able to be easily seen by the user, but also does not overpower the rest of the webpage.

Lastly, as for the website Arngren (which again I do not know the purpose of because the website is so terribly confusing), there is no better way to describe it than simply it is a hot mess. There are little-to-no aspects of this website that I can even tolerate, let-alone mention that I like. This website overlaps content in a displeasing manner; it does not follow a grid layout; and is far too cluttered. All these factors do not allow for effortless use on the user’s behalf and all the wording is also too small to be useful to the user. The text is even hard to read, in my opinion, as it is small, is close together, and appears in countless different colors. Not to mention the background behind different pictures appear as either white or yellow, not necessarily following any pattern with rhyme or reason as to why the background is either one color or the other.

Looking from the perspective of a designer, I believe this website was designed to be laid out like this so it could fit the maximum amount of content within one page. I also believe the designer may have believed in some sense this layout made the website seem aesthetically pleasing. I personally feel as if this page would have benefited from having a grid layout. At least with a grid layout the page would have been slightly easier to follow. Truly, I feel this website is anything but successful, given all the reasons listed above. The website is downright confusing and does not contain any consistency. Even if I wanted to, I do not think I would be able to pin-point any patterns in the page. The only aspect of the page that remotely makes any sense is the navigation bar to the left hand side. Given the title of the navigation bar is “index” I do not have the slightest clue of the navigation bar, but it is the only part of the page that makes any sense to me.