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!”