Throughout the years, website design has changed and upgraded as technology advances and the internet advances along with them. For this blog post, I decided to create a short timeline of changes on one website (McDonald’s) to illustrate the passing and current and predicting future trends.

The McDonald’s Website from 1996 is very indicative of the past trends in website design.

Each page has a different background while the body font of the website is Times New Roman. There is a page where the background looks like outer space: black with little white stars. The navigation bar is shaped like the menu if you walked into a McDonald’s in the 90s and there are a ton of hyperlinks interspersed in the content itself. Some of the buttons have specific shapes like a family or Ronald McDonald instead of being a uniform shape or color with phrases like “Help!” or “Entrance.”

Back when the internet was gaining popularity, there was a uniformity in websites where there were only so many fonts one could choose as the body text and there wasn’t much content–like photographs or graphics–as there are now. It was often a plain page where you could change the colors of the words because the field of HTML was simpler. A lot of a page’s originality came from what kind of images were used as the background or what shapes the buttons were. 

This is the current website for McDonald’s in 2023. 

There are already a number of differences between the website from that from 1996. The usage of HTML (and subsequently, CSS) has gotten more sophisticated. The font is now Speedee instead of Times New Roman, which is not the default font, but is very close to it. The sans-serif font is more streamlined than the serif font and it looks more modern. 

At the furthermost left of the navigation bar, there is the McDonald’s logo–which at this point is so recognizable that they don’t even have to spell out its company name–and it is much easier to find links to the menu, the app, the rewards program and locations of the restaurant chain amongst other things. The content on the page has banners that advertise specific toys or promotions with their descriptions and links for any interested users. 

This website shows the trend towards minimalism as an intentional design rather than the simplicity of older websites. There is a specific yet minimal color scheme and instead of having many, many shorter pages, this website has fewer pages that are longer, with more content and are more scrollable.

Based on the current trends of websites and how websites have changed throughout the years, I’m expecting more innovative ways of placing texts and images together. I’ve seen a lot of website designs with massive text or interesting ways of integrating graphics and text. I’m assuming that there might be some rearranging of the text (something like placing the text sideways as a strong design choice) or the implementation of more three-dimensional images for a new 

Additionally, due to the nature of technology, there has always been this sense that websites and their designs should veer more towards the futuristic and elements that capture a sense of the future (bright colors, metallic elements on black or white, round fonts and shapes, the usage of pixels as a design choice, etc.). In the future, there might be more websites that try to capture a vintage aesthetic or design, as the trends of design–especially in clothing–are going towards that direction: something like a reimagined look of the past rather than focusing on the future. I think we’ll see more color schemes with pastels and warmer colors as seen with the examples of Ok Micah. There might be more of an integration of designs that look like paper crafts (i.e., scrapbooks, menus or posters) to further go with the vintage theme.

Due to technical difficulties, I did most of this assignment on my phone and because of that, the one page website was very accessible to me.  As long as the entire page loaded, I was able to access all of the information on the page. It also allows the user to not have to constantly flip back and forth between pages to find specific information. However, I cannot confirm what the desktop webpages look like at this time, so this is based on the mobile sites.

The first of the websites chosen was for the YLabs’ annual report for 2022 where they conducted research about what young people find valuable. The audience are primarily activists, both young and old, who are interested in the issues of the younger generations and who would like to help them. 

The color scheme consists of shades of blue, purple, pink, yellow and orange, and there are a lot of geometric patterns and shapes and the background images used are reminiscent of dyed, crinkled or textured paper or cloth. Both of these elements lend to the brand’s goal to merge vivid colors that are representative of young people and organic textures to create a website that is approachable and visually interesting. 

Each section denoting anything from sexual education to air pollution has a particular color coding for the background and font color that is cohesive with the overall brand’s color scheme. As you continue scrolling down the page, you know exactly where you were if you don’t remember exactly what topic you left off on.

Another hallmark of the website is how they incorporate photos of people. Each photograph of a person has the background completely removed from their bodies and faces. The large group photo is a collage of pictures rather than one photo where every person sat in a room together. 

Together, these elements create the effect of a digital scrapbook.

One of the fonts used as an accent is zhgl. The usage of zhgl helps direct readers to different kinds of information on the page; it is used primarily in graphics and to summarize important information—often in a sentence or two—that YLabs wants to share even if the reader passes over the rest of the body text in a given section.

The next site is Pimpinella, a website advertising a one-day pasta making workshop where customers make pasta after foraging herbs and plants to go in their pastas. The primary audience are people who are into cooking, foraging or are looking for a fun activity in Italy.  Continue reading →

MAC Cosmetics is a makeup brand that has been along for a long time, and they’re known for the mostly black and white minimalistic packaging that makes up a majority of their projects. However, as many brands do, they’ve recently decided to switch up the colors and materials of their packaging as shown in the webpage by the varying colors of their new plumping gloss stick. It is also Pride month and as such, they are promoting their Pride merch which usually includes rainbows, a departure from their usual design. They are trying to meet the demand for more colorful, unique packaging—a trend that has been steadily rising as shown with the recent popularity of brands like Flower Knows—while still keeping the original sleekness that has been their trademark and their website is reflecting that.

While there aren’t “true” columns in much of the webpage, because of the fact that the website uses rows of various sizes, there is still a grid being used. Instead of concrete columns where each column has a different item in it, the entire row spans the entire grid. The pictures themselves, however, are using grids. The center of each row has the buttons and information on the products and promotions and on either side of that are images showing them off. Although the colors are currently bright, the design itself is quite simple and is a good representation of how they are trying to merge their older image with their hope for the future.

The picture frame is made of one large rectangle split into smaller squares and rectangles to hold pictures of various sizes. The picture frame is made of a dark brown colored wood so dark, it’s almost black. The largest rectangle is the “grid” that the rest of the smaller shapes are on; there are rows and columns in the frame’s shape. There are eight smaller rectangles and squares of various sizes, most of them being around each other with one specifically overlapping another at the corner. The overall frame is quite large, but the smaller shapes allow the owner to put in multiple photos of multiple different sizes. The frame is quite modern in design, mixing functionality and style in a way that is aesthetically pleasing and useful.

The poster in question is a newspaper ad for the 1972 movie musical, Cabaret. The rectangular newspaper ad is very busy with words, a photo of Liza Minelli next to the slogan of the musical, the logo of Cabaret, a Capri trademark, a rounded rectangle advertising the last nights of the movie, a movie review, show dates and times, and a description of the renovations of the Capri theatre in a paper that looks like it’s been rolled up.

There is no grid in sight. Everything is almost cluttered and there seems to be no real rhyme or reason to the spacing. If anything, everything seems a little cramped in an attempt to get all of the information on a single ad. There is also a distinctly “vintage” feel to the ad because the show takes place in 1939 Germany. However, it does not feel messy. It’s almost like a visual representation of someone being unable to hold back their words out of excitement. Because of the style the ad is trying to replicate, the cramped spacing is quite charming. If I had not known the movie was released in 1972, I would believe this ad was from the 1930s and because of that, the design is successful regardless of its lack of grid.

Here is my wireframe of the MAC Cosmetics landing page.

Don Norman’s The Design of Everyday Things discusses many terms relating to Human-Centered Design and even briefly mentions other types of design. Among the terms that he touches on, some of the design terms he expands on are Affordance, Signifiers, Mapping and Feedback.

Affordance is “the relationship between a physical object and a person.”

A physical example of affordance is the way a bookcase affords storage. Bookcases have shelves that are able to withstand the weight of the items a person puts on them, and the bookcase supports them physically until the person comes and removes the items on it. The design allows for the ability to organize and place items in a way that both allows the user to see what they have while keeping the items in a specific place.

A digital example of affordance is a drop-down menu’s ability to afford options and to open and close. A drop-down menu starts as a button which when one puts their mouse over it affords the ability to expand into a list where its options can be clicked on so the user can move to a different page to fulfill whatever needs they have. The design condenses multiple buttons into a list to take up less space and to create less clutter on a webpage while also providing options for the user.

A signifier is a perceivable indicator that communicates appropriate behavior to the user.

A physical signifier is the writing on the cap of a pill bottle. Whether it’s printed or engraved into the cap, they all have a safety lock to notify the user of which direction they must turn to open and to close the bottle. Many of them also include the instruction to remember to push down on it to disengage the lock. The existence of the safety mechanism shows both the value of the medicine inside—losing one would be terrible—and the danger of pills that are not prescribed to you.

A digital (and deliberate) signifier is the sound of a notification alerting a cellphone user of a text. It’s a straightforward, but effective way of letting the user know that someone has sent them a message. There are many ways of showing notification, but the specific use of sound, whether it’s a ping or an alarm or the sound of ducks quaking, shows the importance of answering the message punctually.

Mapping refers to the relationship between the elements of two sets of things.

A physical example of mapping is the knob of a fan’s ability to switch between strengths. As you turn the knob in a direction, the fan’s strength will get either stronger or weaker depending on the user’s desired temperature. This design allows for multiple settings on the given device.

A digital example of mapping is the scrollbar on website pages. When a person uses a mouse the scroll up or down, the page moves up or down however much the user wants to allow them to access the information on the page. This design both indicates how much information is on a given page as well as how and in what direction (in the case of horizontal scrollbars) the page can move in.

 

Feedback is the term referring to the communication of the results of a certain action.

A physical example of feedback is the stopping of a key when you put it into a lock. When you lock a door, the key often must be turned to either lock or unlock it. When a door is locked, the key can be turned until the lock is unable to be moved in the direction of the lock. It tends to click, but mostly the key stops and even when forced, it is unable to move further in that direction. This design is simple, but effective; because the keyhole physically moves along with the key, the direction of the keyhole when a person sees a door can indicate if it is open or closed and if it is hard to see, the physical sensation and ability to turn the key in a given direction shows if the door is locked or not.

A digital example of feedback is the changing of color of a button after you click a button on a webpage. A more specific example would be clicking like on a YouTube video; when you click on the like button, it does a little animation of shifting through colors and a splash of confetti before setting on a black color from the original pale grey color. This design indicates the ability to show your pleasure at a video and prior liking of a video in case a user decides to rewatch it.

Citations

“5 Shelf Bookcase – Room Essentials™.” Target, www.target.com/p/5-shelf-bookcase-white-room-essentials-8482/-/A-54360637.

“DropdownMenuExample.” WordPress Developer Resources, https://developer.wordpress.org/block-editor/reference-guides/components/dropdown-menu.

“Plastic Medicine Pill Bottles with Child Resistant Caps – Push Down and Turn – Prescription Vial, Medicine Container, Pill Cases Dispenser Organizers (6 Dram, 12pcs).” Walmart, https://www.walmart.com/ip/Plastic-Medicine-Pill-Bottles-Child-Resistant-Caps-Push-Down-Turn-Prescription-Vial-Container-Cases-Dispenser-Organizers-6-Dram-12pcs/1750933823.

“How To Change Your Android Notification Sound.” Online Tech Tips, www.online-tech-tips.com/smartphones/how-to-change-your-android-notification-sound/.

“2000 Series, Fan Knob.” Clipsal, www.clipsal.com/products/detail?CatNo=2031VF3CB-KB&itemno=2031VF3CB-KB-WE&tab-document-1=0.

“Windows Control: The Scroll Bar.” Microsoft Visual Basic,  www.functionx.com/vb/controls/scrollbar.htm.

“Modern door handle and keyhole for flat key – doorknob on door.” dreamstime, https://www.dreamstime.com/modern-door-handle-keyhole-flat-key-doorknob-door-modern-door-handle-keyhole-flat-key-doorknob-locked-door-image165039398.

Self Tape Audition. YouTube, www.youtube.com/watch?v=sajD5qotDlyc&ab_channel=SabrinaGuerrero.