Artist Statement/Design Philosophy

My work is inspired by real life experiences. With M & M’s Bakery, my father and I one day had been joking about how if I lived closer him and I should open a bakery together. That experience had inspired this fictional website. In the past, I have worked on websites for restaurants, so I have a bit of experience in this field. That specific website was for a family owned restaurant that was targeted towards a family-oriented dynamic. It was kept within the color scheme of the logo and was kept rather simple so it would be easy to use, as the restaurant had a large population of elderly costumers who likely needed a website that kept usability in mind.

External influences that inspire me and my work include images from the internet (specifically Pinterest and Google Images,) inspiration groups on Facebook, and images friends and family send me. Specifically, I am into pottery by Rae Dunn that is white with black lettering. I believe through my collecting of this item, I have grown to love significant contrast, the very way the black lettering contrasts so greatly against the white pottery. Other pottery that inspires me is MudPie. Compared to the simplicity of Rae Dunn, Mudpie can be rather colorful and animated. I am appreciative of the two being so different, so I can have a range of inspiration.

When creating, I get excited by the perspective of having the opportunity to map out the entirety of the project and create works of art for it. I have a passion for Illustrator and Photoshop, so getting the opportunity to work with either program certainly makes me excited to dive into my work. Ideas and/or processes that I am interested in includes creating wireframes and mockups. Through creating wireframes and mockups, I feel that I am allowed to practice my creativity and spend time figuring out appropriate layouts and design options for my projects. Within my own personal life, I have been working with Photoshop and Illustrator since I was in middle school, so I thoroughly enjoy working with those particular pieces of software.

In my opinion, good design is having good usability and is easily understood. Without good usability and being easily understood, the design falls short and more-likely-than-not does not fulfill its purpose. Effective and meaningful design is design that fulfills its purpose and leaves a positive impression on the user. My work aspires to meet that ideal because I try and make my work be simplistic enough that it is easily usable and understood by users. Also, through testing, I try and make sure my work meets those standards.

I came to acquire these skills at a young age when I wanted to customize the theme of my blog I had at the time. I had little to no idea how to do such a thing, but began investing time into learning. After eventually losing that passion once I abandoned my blog, I had momentarily forgotten about web design and development until a brand new programming course was offered for the first time at my high school. The first semester I could, I took advantage of the opportunity to take the class and my passion reignited immediately. As I reached my junior year of high school, I began to query on what educational route I wanted to take post high school. In elementary school, I would have told you I wanted to be a teacher. In middle school, I would have told you I wanted to be a published author. In high school; however, I could not tell you what I wanted to be because I did not know. I thought back to how much I loved the programming course I had taken and decided I wanted to get a degree that would assist me in becoming a web designer and developer. It is almost four years since my first college visit, where I was as giddy as could be when the head of the Computer Science department talked about the school’s program, and I am nearly a year away from graduating college with my Bachelor’s in Digital Multimedia Design from Pennsylvania State University. Within those four years, I have undergone numerous internships and job opportunities that have granted me irreplaceable professional experience.

Design Summary Prior to Project Completion

Summary for: Lesson 6 Assignment

Submitted by: Rebecca Myers

Title: Exercise: Written Statements

Short Abstract: My final project of the “M & M’s Bakery” website will include a home page, a menu page, a gallery page, an about page, and a page outlining how to contact the business. The general audience of the website will be individuals who are local and individuals who are visiting the area. Noteworthy details about the concept include the fact that the website will be made to feel more professional than geared towards a family-oriented dynamic. The reason behind this is to make the website feel cleaner cut than colorful. Also, the style of the website will be very simplistic and easy to navigate while still being visually pleasing. The overall goal of the project to is portray an example of a well done and professional looking website that contains content for a bakery.

Design Details: In terms of technical accomplishments, further details include that I will be utilizing both Webflow and the PASS server to complete this project. Specifically, I will be utilizing Webflow to create the website and I will upload the code that I created through Webflow to the PASS server. Color choices I am going to include in the website include muted tones such as browns, blacks, and whites. The purpose behind this color scheme is to keep the website feeling more professional. Also, the brown is a shade close to a chocolate brown, hence it makes the audience desire chocolate more because the background color makes it seem more appealing. In terms of typography, I am going to utilize the fonts of Aviano Royale Regular for the header and Filson Pro for the body. The website includes a multitude of media assets, specifically pictures. Through research and a search for inspiration, I created an art board that set the tone for the website.

Self-Assessment: To develop this project, I will utilize the tool of Webflow. Webflow will allow me to create the code for and a working protype for the website in numerous different device layouts. I will then take the code from Webflow and upload it onto the PASS server. In terms of creating the website, I will have to adjust the colors on the page, the typography, and make numerous other adjustments to aspects of the page such as spacing and to the margins. I will also have to create all the page from scratch and link them to one another through the menu feature. Features such as the menu will change based on the device layout. For example, the menu will be fully displayed in a desktop layout but on a mobile layout the menu will be featured through the interaction with an icon.

I believe some challenges I will face will be converting all the material into four layouts that are similar but allows for maximum usability on each device. I also believe I may end up struggling to figure out how to include a picture gallery on the gallery page. As for successes I believe I will face, given the fact I am now slightly familiar with Webflow, I believe changing elements such as colors and the typography will be a bit more of a breeze. I also believe adding elements to the page will be a bit easier, as the first time I used Webflow I had to conduct research on how to add elements to the page. I quickly learned that sections and columns can be your best friend. I am excited to see what aspects of the project will surprise me.

Design Summary Post Project Completion

Summary for: Lesson 6 Assignment

Submitted by: Rebecca Myers

Title: Final Website

URL: https://myers-final-website.webflow.io/

Short Abstract: For my final website, I created a professional website for the fictional company, M & M’s Bakery. The content contained within the company is the home page, the menu, a photo gallery, an about page, and contact information and resources. My approach for a general audience was simplicity and usability. Noteworthy details about the concept is this fictional company was inspired by a joking conversation I had with my father about starting a bakery together. The style is based on the color scheme of chocolate, or more specifically, an Andie’s mint. The overall goal of the project was to successfully create a professional website that is interactive and easily usable.

Design Details: Starting with my color choices, I chose the color palette of white, brown, and green. Initially, I chose brown because it resembled a chocolate color. After sticking to a brown and white color palette, I felt there was no color aspect of the page that would grab the user’s attention, so I intentionally added in a mint green color to make the color palette resemble an Andie’s mint. As a designer, I wanted to choose a chocolate that was underrated, yet recognizable to base my small color palette around.

As for technical accomplishments, I was rather pleased how easy it was to create a photo gallery to properly showcase images for the website. Not to mention the design of the slider gallery looks incredibly nice. In terms of typography, I initially chose two fonts from Adobe’s fonts, but had to choose different fonts from Google so they would be compatible with Webflow. I wanted the body font to be plain and easily readable while I wanted the header font to stand out against the body font. The media assets I included in the page are all images of baked goods the bakery offers. After conducting a good amount of research on color palettes, vital content, and inspiration, this website was the final product, made to reflect all my research and my artboard.

Revisions: I made several revisions to my project. The first was likely the biggest revise. Given the limitations of Webflow, I was unable to create five webpages, but rather used one page to contain all five of the page’s content. With this new one-page website layout, I had to make changes accordingly to make the layout work, such as using borders around the titles to make them stand out more distinctly. Also, as mentioned by several my peers, I rotated the images, so they were not rotated in the final product. Also, at the recommendation of my peers, I edited the media within the page, widened the desktop layout of my site, and I added more media. The only peer response I disregarded was to change the color of the phone number because I believe it would look a bit odd if only one piece of text was a different color than the rest. However, as previously mentioned, I did add the mint green color into my color palette.

Self-Assessment: I am very proud of myself for the work I was able to compose. I allotted myself more time than usual to complete this assignment and I truly believe it is reflected in the quality of my work. When creating this site, I wanted to link the pages within the menu to allow the user to easily access whichever part of the website they are looking for. I am generally pleased with the balance I was able to create of white space within the page. I was afraid there was either going to be too much or too little white space on the page, but through multiple adjustments to the margins, I was able to create a better balance. I was also successfully able to create a slider gallery for my media and a forum for users to leave their contact information if they wish to leave a message for the bakery. I believe the biggest hassle for me was having to make adjustments for all the device layouts.

For future reference, I believe I could have better and more consistent media assets for the pages I create. For this project, I used old images I had of baked goods I have made, but the images varied and made the page seem a bit more amateur and less professional. An aspect of the process that surprised me was how much longer some aspects took me to perfect than I had anticipated, such as adjusting the margins; however, I was more than happy to take as much time as needed until I was happy with how the final result looked. I believe the aspect of the project that was the most interesting to me was playing around with the media assets and seeing how it was most effective to use them within the page. Initially, I had only used one picture within the menu page but added in two more pictures and it certainly made an apparent difference with how the menu looked overall. I also added headers for each category of baked goods being sold. All-in-all, I am very pleased with the result and for the valuable experience. Reflecting on the first website I made for a restaurant, and then looking at this website, I can certainly see how I have grown as a designer and developer.

Website Content

Header

“M & M’s Bakery”

Menu: Home; Menu; Gallery; About Us; Contact Us

Footer

“Open Monday – Thursday 9 -5; Friday & Saturday 8 – 6; Closed on Sunday”

“Address: 123 Hilltop Drive, Appletown, PA”

“Phone Number: (717) 717-7171”

Facebook and Instagram link

“Home”

“M & M’s Bakery offers fresh, homemade baked goods on sight. The bakery also takes requests to make custom made baked goods for holidays, anniversaries, birthdays, and all other special occasions!

We are open Monday through Saturday from 9 a.m. to 5 p.m. and our address is 123 Hilltop Drive, Appletown, PA. If you wish to place an order over the phone, please call (717) 777-7777.”

“Menu”

“Gallery”

A media asset gallery slider is placed here.

“About Us”

“M & M’s Bakery was established in 2020, located at 123 Hilltop Drive, Appletown, PA. The bakery’s name is meant to reflect the owners – the Morrows and Myerses – family names. The Morrow and Myers families have been making homemade baked goods for the better part of thirty years. The bakery strives to offer an array of delicious baked goods that have been perfected over time and made fresh daily with love. The Morrows and Myerses would love for you to stop on by and see what that they and their delectable desserts are all about.”

“Contact Us”

“To contact M & M’s Bakery, give us a call at (717) 777-7777 or leave your name, email address, and message in the designated spots below, and we will get back to you as soon as we can. We look forward to hearing from you!”

One Page Web Design

One page websites are a popular design style in the modern age. The reasoning behind its popularity is that all the site’s content is contained to one page. This layout is especially beneficial for mobile layouts because instead of having to navigate between several pages, it allows the user to easily navigate one page that contains all the site’s content. This also allows the designer to create the one page under a singular unified picture of what they wish to convey to their audience. Listed below are three successful examples of one page design from the websites of Kit Kat, Colourcode, and Pixel Lab.

Kit Kat

Kit Kat’s one page website is meant to give a visual breakdown of what a Kit Kat is, share the history behind Kit Kat, and express some selling points of Kit Kat candy. The audience for the website is for users of all ages, but perhaps more-so adults than children given the mildly advanced vocabulary used. The site’s design approach was to break down the Kit Kat by each layer as new content is introduced. Some key visual elements that establish the style and the mood is the breaking down of the Kit Kat and the color scheme. These aspects establish the style and mood because they follow the Kit Kat color scheme of red and white, staying true to the brand, and by breaking down the layers of a Kit Kat, the user has a better idea of what they are eating. I truly feel that this website is successful, given my previous remarks. One of the only aspects I feel falls short is the navigation links on the right hand side of the page. When you click on the name of the section you wish to jump to, it does not jump you to that part of the website, which I found to be a slight disappointment.

When faced with responsiveness, Kit Kat’s website is almost fully responsive when resizing the browser window. When you narrow the browser window, the images are fully responsive, however, the text is not. If the browser window is made narrow enough, the text gets cut off and is unable to be read, which is an issue. Other genres or art or design this webpage relates to is other candy commercials, such as this Reese’s Take 5 commercial. In the commercial, the candy being pushed up through the different toppings is being “constructed” layer by layer. The designer, as other designers have, likely thought that as they transitioned from layer to layer, this allowed for a smooth way to introduce and define information and sections, notably in a unique manner. I imagine the designer designed the site this way because it is a clever way to transition between information while allowing the user to see the product in its entirety. In my opinion, this is an effective layout method because it flows smoothly and fulfills its purpose. I think content that does well with this layout is food products, or products that can be broken down by layers, so perhaps products such as Legos. Content that would fall short with this layout without be solid products that cannot be broken down.

Colourcode

Colourcode’s purpose is to randomly generate color palettes for users. The audience of the webpage is individuals seeking to find inspiration for color palettes or hoping to randomly generate color palettes. The design approach taken is utilizing a majority of the webpage to display the colors in the color palette. On the left hand side there are options for selecting different types of color palettes and downloading the created color palettes. Key visual elements that establish the style and mood the website are the color blocks and the menu bar. There are small details that contribute to the visual elements, such as how the color wheels beside the title of each color scheme consists of only colors within the defined color scheme. I found this website to be entirely successfully. It allows users to add more or less colors to their palette, it is simple and able to quickly be picked up by first time users, and offers a variety of color palette options. In terms of its design, I believe it is successful because there is not too much going on within the page and the colors used in the menu bar on the left hand side do not get overpowered by the changing colors in the color palette.

Colourcode’s website is completely responsive. When the browser window size is reduced, the information is condensed, but fully visible. The text adjusts to the size of the window as well as the color shade boxes. Other genres or art design it relates to other color palette generating websites. Specifically, the website it reminds me is coolors.co. It is a bit ironic because I have actually had to use this website for a class before, so I am rather familiar with the format and design of the website. I imagine the designer was going for a simplistic design that was intended to be user friendly and easy to use. They likely designed the site to be such and to serve its sole purpose of creating color palettes. Overall, I believe this website has an extremely effective layout. The flow of the website is notable, its usability is admirable, and I did not find anything that would lead to me to say it was ineffective. I believe the content that worked the best was the menu bar on the left hand side of the page and the color palette boxes. If I were to say anything need to improve on the website, it would be the size of the menu bar adjusting when the size of the browser window is changed.

Pixel Lab

The purpose of the Pixel Lab’s website is to give a background on the company, showcase featured work, and allow for user and business interaction. The interaction between the two parties is conducted by the user leaving their name, email, and a message for the company in their Contact section. The audience of the website appears to be individuals interested in web design and development and the design approach is to transition between sections with distinction that capture different content so that it appeals to users. All these sections can be found in the menu bar at the top and they scroll you down the page to section of your choosing when clicked upon. Some key visual elements that establish the style and mood are the visuals, the color scheme, and the transitioning of background colors between sections. The visuals showcased on the webpage are more significant than other webpage’s images because this company conducts web design, so if the user is pleased with the visuals incorporated and the overall design of the site, then the user is more likely to be confident and interested in working with the company. Given that notion, I find this to be yet another successful website. The reason I attribute success to this website is it effectively appeals to its audience, it has considerably good usability, and maintains a well designed layout.

As for responsiveness, this website is easily the most thoughtful in terms of resizing. Out of all the three examples mentioned, I truly appreciate Pixel Lab’s approach to responsiveness because of its thoughtfulness and usability. Instead of making the only changes to images and text size, Pixel Lab actually changes the design of the page as needed when the browser is smaller or larger. Other genres or art or design this website reminds me of is the color scheme and imagery in this blog post. In my opinion, when creating this website, the designer made it a point to not include excessive information, to showcase the company’s abilities in respect to the services they offer, and to maintain good usability on the user’s behalf. They designed the site this way to maximize the user experience. Overall, I found this to be an effective layout method. Referencing an earlier discussion in relation to this website, I believe the effective layout plays into the successfulness of the website. Aspects of the website that showcase the content very well are the menu and the transition between sections. If I had to recommended one aspect of the layout to be improved, it would be the way the title begins to get more and more lost in the opening image as you scroll down.

Thoughts about One Page Design

One-page sites might evolve in the future as web design and our devices change because the demand of how to be responsive will change. As new devices emerge, the way webpages are set up will have to be adjusted accordingly. Currently, when creating a website, it is important to adjust the website for a desktop layout, a tablet layout, and a landscape and portrait mobile layout. These sites work on phones because of responsiveness. A simple example of a difference between a desktop layout and a portrait mobile layout may be how the menu is displayed. In a desktop layout, the menu can be laid out on the webpage in full versus on a portrait mobile layout the menu may be presented in an accordion style. Through the difference of these layouts, a user can learn how broader trends different between each layout. An example of this is how the content may be presented more vertically or more horizontally depending on the layout being used. Also, border and padding, text size, image size, etc. differs depending on the layout being used. Several broader topics can be better understood as to how they differ between layouts through the observation of and research on different device layouts.

Rae Dunn is a collectible brand of pottery sold primarily at TJ Maxx, Marshall’s, and HomeGoods. Rae Dunn pieces are distinctive because of the lettering featured on the pieces and how they have words or phrases etched in them. The pieces are well known for being plain white with black lettering, and some of the most popular pieces are mugs. In “Collecting Rae Dunn: Everything You Need to Know” by Lauren Hofer, she outlines what the Rae Dunn craze is; provides some background on the artist; explains where to find the pottery pieces; and discusses getting involved in the Rae Dunn community.

This photograph showcases Rae Dunn pottery being displayed in the dining room of a collector’s home. Photographed by Rebecca Myers

There are, however, pieces that do not match the description provided above. Some of the pieces are different colors, contain different fonts (such as script or typewriter,) and display various patterns/images. With the exception of ghost stamped pieces, all Rae Dunn pottery pieces are marked with a stamp on the bottom. However, there are several different stamps Rae Dunn pieces have. The pieces are either marked with a Rae Dunn, Rae Dunn by Magenta, Magenta, Magenta Exclusive, or M Studio stamp. In Rae Dunn’s article, “RAE DUNN vs. RAE DUNN BY MAGENTA.” she outlines the difference between the Rae Dunn and Rae Dunn by Magenta stamps. As for the Magenta, Magenta Exclusive, and M Studio stamps, Magenta is the company that produces Rae Dunn pieces, so the pieces were marked with their stamps before her work became popular enough to have its own. So, even though the stamp does not say Rae Dunn on it, it does not mean the piece is not Rae Dunn pottery.

4 Places to Find Secondhand Rae Dunn Pottery

While new Rae Dunn pottery is be found at retail shops, secondhand pieces can be found at secondhand venues. These stores include thrift stores; flea markets; antique malls; and yard, estate, and garage sales. By shopping at secondhand venues, collectors are also able to avoid the crowds that retail stores house and collectors can find pieces outside the ones in circulation at the retail stores. At these secondhand stores, vintage pieces can be found as well as pieces sold for under retail.

In Cecilia’s blog post, “Rae Dunn Cookie Jar: Friday’s Find #246,” she shares how she found a Rae Dunn cookie jar at the thrift store. She goes on to share how she decided to use the cookie jar for decoration. As she notes in her post, even if you are not a Rae Dunn collector, it is still exciting to find Rae Dunn pieces at the thrift store.

Avoid the Crowds While Finding Pieces Outside the Circulation

One of the main benefits to hunting for Rae Dunn pottery secondhand is not having to track items and figure out when they will be hitting the shelves; to attend store openings and revisit the store multiple times a day to see if the shelves have been stocked; and to avoid the crowds and collectors at the store. The following video, “Why Rae Dunn Pottery is Causing a Frenzy,” explains what the Rae Dunn pottery craze is and how collectors hunt for pieces at the retail store HomeGoods. This video outlines how collectors spend countless hours in the store in order to ensure they get items they are looking for. While it is not guaranteed pieces will be found while secondhand shopping, there is not as high as a demand for secondhand Dunn as brand new Dunn, so there is a greater possibility of finding a piece secondhand against other collectors who shop secondhand opposed to finding a new piece against collectors who stop at the retail stores.

Another notable benefit to secondhand shopping for Rae Dunn is that collectors find pieces that are out of circulation. At retail stores, there are only certain items that circulate and can be found in stores at a time, while at secondhand stores older pieces can be found at any time, ones that are unable to be found in store. For instance, a collector may go to the thrift store and find a Magenta stamped piece. Pieces in retail stores only have the Rae Dunn by Magenta stamp on them. To note, some collectors care about the stamp while others don’t. The stamp gives the collector a general idea of the year the piece was released.

Inexpensive and Vintage Rae Dunn Pottery Pieces

One of the main reasons collectors hunt for Rae Dunn pottery at secondhand stores is to find vintage and rare pieces. Pieces that were released years ago and were never re-released are popular among collectors but are hard to find. These type of pieces are being found at secondhand stores by collectors and the pieces are highly sought after. The Facebook group, Rae Dunn thrift store finds!, is a group where members share their thrift store finds among one another. In the group, members are constantly finding and sharing vintage and inexpensive pieces they found secondhand. Among the group, vintage pieces tend to be the most popular and interacted with.

When encountering pieces at secondhand stores, they are likely marked below retail. Most of the time, sellers do not know the value of pieces and will mark their prices under retail value; however, some pieces may be priced above retail. At some secondhand stores the seller may know the piece being sold is harder to find or worth more, so they mark its price higher. In My Crafty Den’s video, “Thrifted Thursday…I scored a Rae Dunn Easter Jackpot,” she shares how she found five mugs at two dollars a piece and two sets of four melamine plates at five dollars a set. The mugs averagely retail for six dollars and the plates retail for $25, so all the pieces My Crafty Den bought retail at $80. She only spent $20 on all her pieces at the thrift store, so she saved a total of $60 by buying her pieces secondhand.

CSS Color Properties

In CSS, there are countless uses of color. In this post, I will be specifically covering background-color and color. The background-color property specifies the color of an element, specifically it usually specifies the color of a background element. The color property specifies the color of the text element. These properties can be specified through several different means, including: color names, hex code, RGB, and HSL. An example of a color name is white; an example of hex code is #ffffff; an example of RGB is rgb(255, 255, 255); and an example of HSL is hsl(0, 100%, 100%). Each of these colors are white, but each are represented in different ways.

Hex values (more formally known as hexadecimal colors) are specified by red, green, and blue integers. An easy way to visualize this is: #RRGGBB. The r’s make up the red integers, g’s makes up the green integers, and b’s makes up the blue integers. Zeros (0) represent the lowest value while F represents the highest. An example would be: #FF0000. This color would be purely red because the green and the blue integers are set to 0, which is the lowest value, while the red integers are set to F, which is the highest value. There are also color names that can be used (such as black, white, etc.) that are based on hex colors. A full list of acceptable universal color names can be found here.

RGB values are specified once again by the colors red, green, and blue. Much like the way Hex values are, RGB values are based on red, green, and blue integers. This concept can be visualized through the follow example: rgb(red, green, blue). The value placed in each spot can range from 0 to 255. 0 is the lowest value while 255 is the highest value. Given the example rgb(255, 0, 0) the color would be red because in the red integer the value is 255, which is the highest value, while both green and blue are 0, which is the lowest value.

As for HSL values, they are not universally supported compared to color names, Hex values, and RGB values. HSL stands for hue, saturation, and lightness. In terms of hue, hue is a degree on the color wheel. These numbers range from 0 to 360. 0/360 is red, 120 is green, and 240 is blue. Saturation is a percentage value representing shade. 0% is for a grey shading while 100% is for full color. Lastly, lightness is also a percentage, one determining the amount of light the color receives. 0% is black while 100% is white. Red in HSL is hsl(0, 100%, 50%). The hue is set to red at 0, the saturation is set at 100% to allow for full color, and lightness is set to 50% to lighten or darken the color.

A real life example of the background-color and color properties is pictured in the picture above. In the line that is highlighted blue at the top of the page on the right hand corner, the background-color and color properties are listed. These two elements are for the background color and text color of the header at the top of the page. background-color:#22a4f3 is the blue color of the background of the header while color:#ffffff is the white color of the text. These colors are represented through hex code.

This property can affect user experience because the colors on a webpage can play a large part in user experience on a website. When an individual thinks of a standard website, they likely think of a page with a white background and black text. The black text significantly stands out against the white background. However, if an individual went to use a page that had a white background and the text on the page was a light gray, the text may be difficult to read. Assuring there is a great contrast between colors used on a webpage is important for user experience. If a webpage fails to do so, the content on the page might be difficult to read and/or decipher.

Below is an embedded CodePen. The CodePen highlights the standard black text placed on a white background. Granted, this is the default setting for the background and the text, but I still programmed it into the CSS code regardless. These two elements can be seen under the CSS tab. background: #ffffff; makes up the white background and color: #000000; makes up the black text.

Rehashing user experience, given the CodePen below, the text is difficult to read against the background it is placed against. It is important to ensure the colors being used for the text contrasts against the background. Both of the colors featured are both variations of light blue, so they clash against one another. Ideally, either the color element should be set as a darker color or the background element should be set as a darker color to create contrast between the two. Currently the background element is set to #8ebbc2 and the color element is set to #abcedf. An example of creating contrast would be setting the color element to #924B71, a shade of purple. A dark shade of purple would greatly stand out against a light blue.

In this last CodePen example, color name, HEX code, RGB, and HSL are all utilized in the CSS. Under body and header 1, color name is used to specify the color. Under header 2, HEX code is used. Under header 3, HSL is used. Lastly, under paragraph, RGB is used. Even though all these colors are defined differently, they all specify the color black, expect for the color element under body. The color element under body is a variation of blue. This example mimics the explanation at the beginning of the post that outlines how the four ways to specify color each specified the color white. In this case, they each specify the color black.

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.