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.

Without doubt, I believe Don Norman is outright brilliant. In a previous course I was exposed to the video “It’s not you. Bad doors are everywhere.” released by Vox. My initial exposure opened my eyes to the vital role design plays in every day objects and in their functionality as well as how the ability to perceive design affects the usability of an object. Norman exceptionally divulges on the concept of good and bad design. In his book, The Design of Everyday Things, Norman expands on this topic by introducing the principles of: affordance, signifiers, mapping, and feedback. The inclusion and correct implementation of these four “fundamental principles of interaction” are essential to the existence of a good design.

To counteract the discussion of good design, I wish to share an example of bad design I have dealt with time and time again. In all my days, an example of bad design I have encountered numerous times over, without fail, is difficult showers. While I nearly always stay in the comfort of my own residence, there are the few occasions I wander out into the world and stay at a house or hotel where I am unfamiliar with the bathroom. While a toilet and a sink are self-explanatory enough to not fret over, a shower is not necessarily. Not all showers specify which direction produces hot water and which direction produces cold water. Once turning on the water, you are left playing the guessing game as to whether the water is hot/cold or is becoming hotter/colder as you turn the handle(s). It is not always evident how to operate the handle(s), either. In general, showers are not always designed efficiently for effortless use.

Breaking it down, the principle of affordance is a relationship, one between an individual and a physical object (Norman 11). A prime example of affordance is an individual flipping a light switch from “off” to “on” and a light turning on in response. The result of an individual flipping a light switch from “off” to “on” is the flip of the switch closes the electrical circuit, allowing the current to uninterruptedly flow (in simpler terms, the circuit becomes completes and flows continuously,) providing the power to flow to the light bulb, turning it on. Specifically, the affordance is the individual’s ability to interact with the light switch and to obviously flip it from “off” to “on” or vice versa. Another example of affordance is the relationship between an individual and a book. The individual is able to interact with the book through actions such as picking the book up, turning its pages, and holding it open.

“Insulated Double Rocker – White Light Switch Cover Decorative Outlet Cover Wall Plate.” Amazon, www.amazon.com/Questech-Cornice-Insulated-Decorative-Switch/dp/B07641Z93T.

“WILDSOUL 40041AB-2 Modern Farmhouse 1-Light Globe Sconce, Armed Brass Bathroom Sconces Clear Glass Vanity Wall Lighting Fixtures, Oak Wood and Brass Parts, Matte Black and Brass Finish, Pack of 2.” Amazon, www.amazon.com/Wildsoul-40041-AB-Rustic-1-Light-Antique/dp/B07HHZZD3P.

As for signifiers, this principle visualizes/conveys to the individual how they and the physical object should interact (Norman 14). Referring back to the light switch example, the toggle is distinctly present for users to recognize that it is the piece of the light switch that should be interacted with in order to turn the light on/off. The toggle is the piece that opens and closes the electrical circuit (once flipped,) either interrupting (to turn the lights off) or closing (to turn the lights on) the current flow. Specifically, the toggle is a signifier because it is the piece of the object an individual is able to recognize is meant for use in order to interact with the light switch. Another example of a signifier is the handle and tine of a fork. The handle on the fork is a signifer for the user to use the handle to hold the fork and the tine of the fork is a signifer for the user to use the tine to pick up food with.

“A man placing his finger on an on/off electrical wall switch.” Teach Engineering, 30 June 2020, www.teachengineering.org/activities/view/cub_electricity_lesson04_activity2.

Norman explains in the passage that mapping is the “correspondence between the layout of the controls and the devices being controlled (Norman 21).” In the example of the light switch, mapping is the relationship between the flipping of the light switch and the light(s) turning on. Mapping can more simply be thought of as the correspondence between the light switch and the coordinating light(s). This coordination between the light switch and the lights can be attributed to wiring. Another example of mapping is the correspondence between a television remote and the television. When the television remote is used, say the power button is pressed, the television turns on as a result.

“MOES WiFi Smart Ceiling Fan Light Wall Switch, Smart Life/Tuya APP Remote Timer and Counterdown, Compatible with Alexa and Google Home, No Hub Required.” Amazon, www.amazon.com/MOES-Ceiling-Counterdown-Compatible-Required/dp/B07YXJS276.

Lastly, feedback is “communicating the results of an action (Norman 23).” The feedback in this case is presented through the form of the light turning on or off in response to the toggle being utilized by an individual. If an individual flips the toggle to “on” from “off”, then the lights should ideally turn on. If an individual flips to the toggle to “off” from “on”, then the lights should ideally turn off. In both cases, those responses would be the appropriate feedback to the action being presented. However, if a light does not turn on when it is supposed to, that is still feedback, communicating to the user that either a fuse blew, a light bulb is burnt out, or there is another issue occurring. Another example of feedback is a vacuum’s filter meter. On some vacuum cleaners, there is a meter on the that indicates to the user if the filter needs cleaned or does not need cleaned. If the meter is mostly green, that provides feedback to the user that the filter is clean, but if the meter is mostly red, that provides feedback to the user that the filter is dirty and needs cleaned.

“Design House 520320 Kimball Industrial Farmhouse Indoor Wall Light with Metal Shade, 3, Coffee Bronze.” Pinterest, www.pinterest.com/pin/131800726573745195/?autologin=true.

In the case of a digital technology utilizing these four principles, a simple example would be an individual unlocking their iPhone from the lock screen. Affordance, in relation to this example, would be an individual interacting with the screen of their iPhone. The signifer, in this case, would be the bar at the bottom of the lock screen. The bar signals the user to swipe up to unlock their phone. By swiping up on this bar, the iPhone automatically unlocks unless the individual has a password set on their iPhone. If the user enters their password correctly, their iPhone will unlock. The principle of mapping would be that the act of swiping up on the bar brings the user to the home screen of the iPhone. The bar at the bottom of the lock screen has a relationship with the home screen, the same way there is a relationship between a light switch and a light. Finally, if the user correctly unlocks their iPhone from its lock screen, then the appropriate feedback for unlocking the phone would be the home screen appearing.

“iPhone Lock Screen.” Apple, 25 Sept. 2018, discussions.apple.com/thread/8553242.

“iPhone Home Screen.” Apple, support.apple.com/en-us/HT207122.

Work Cited

Norman, Donald A. The Design of Everyday Things. Basic Books, 2013.