This article will talk about all of the the updates and improvements I have made to the revisited version of the small business website project. Topics discussed will be about improvements made to the color contrast, logo, use of JavaScript, use of FlexBox, PHP, and leaner code. While looking back at the original version of the small business project, it had obvious structural and usability issues that I was unaware of at the time. Accessibility was at the forefront of my mind while redesigning and restructuring the site this time around, which allowed for a better user experience and nicer looking site as a whole.
Feedback:
After receiving feedback on the first version of the small business website, it was clear that my code needed to be leaner. This caused me to be more strategic with my use of inherited elements in CSS in the revisited version. Additionally, the CSS was also too long due to an incorrect understanding of media queries. At the time I believed that an entire section needed to in a media query, causing unnecessary repetition and cluttering of my code.
Changes & Enhancements
Solved Issues
The first issue that needed to be solved was creating leaner code. I first way I achieved this was with the use of inherited fonts in my CSS. I did this my adding a font family to the body rule and headings rule, as suggested on my feedback sheet. The second way I was able to fix this issue was by removing the repetitive code from each media query. Taking out the elements that were there unnecessarily quite literally slimmed down my code by more than half. In my HTML, I also updated the ARIA label by removing the word “navigation”, as you mentioned it was redundant due to it being implicit in the nav element type.
Another major issue that needed to be solved was the responsiveness of the grid structure used for my product items. On the original version, the images would become distorted and start to move out of their borders when the screen became smaller. There was even a moment where the items would touch together before forming a single line structure. To fix the problem I decided to redo my code for the entire site, as the items seemed to be bound in some way by another declaration in my code. Starting from scratch allowed me to take a different approach by using FlexBox instead of grid. The use of FlexBox made styling the products much easier and the elements now move to fit the screen automatically, going from a single line when in mobile-first view, to a 2×1 design when on a medium screen, and finally to 3 across when on a larger screen. This was my greatest challenge during the first iteration of the site, and creating a solution for the revisited version, though simple, was my biggest achievement.
New FlexBox styling of product elements
Enhancements
Color Contrast
All of the enhancements added to the revisited version of my website were done for accessibility purposes. The first notable change that I made was the color scheme for an improved contrast ratio. Although I liked the colors used in the first version, I noticed that they were a bit dull. After checking them on WebAim I realized that they did not pass and had a failing WCAG score. The updated versions of my background colors are darker, causing the white text to stand out and be more readable, allowing for an an easier user experience. It now passes the color contrast AAA rating on WCAG with a score of 10:87:1. In addition, I also changed the text colors of my logo to white so that it would be more readable against a darker background. I also removed the little brown dots on the stem design of the leaves on the logo as they did not look good with the new background color.
Original header color contrast
Updated header color contrast
JavaScript, Favicon, & PHP
I added the minimal use of vanilla JavaScript to the revisited version of the site. As shown above in the updated header color contrast image, there is a section that says “Welcome, we are open!”. I have set this to change to “Sorry, we are closed!” depending on the time of day. If the user has JavaScript turned off this will not affect the content, and they will instead see a statement saying “Welcome! Please see shop hours below”.
I created a favicon using the “R” with the same typeface as my headings. I originally had wanted to use my logo for the icon, but it did not show up well and had to take an alternative route. I gained inspiration by seeing other people use the first letter of the shop name instead, so that is the direction I went with. I am happy with the outcome as it is clear to read and refers back to the styling of the site itself.
For the first time I implemented the use of PHP instead of HTML for the final version of the website. I had originally coded and styled the site using HTML so I could make changes without needing to make the website live, and then switched to PHP once those changes were done. I then took my header and footer elements, changed them into server-side includes, then added them back into my page files. I chose to make those elements includes because they are the only two sections that stay the same throughout the entire site. Using PHP, in my opinion, is a great resource for saving time. Any changes I had to make to my header and footer only needed to be done once, which was very useful.
404 Error Page
The most significant enhancement to my revisited website is the addition of a 404 error page. Other than restructuring my product elements in FlexBox, this was the biggest learning curve I had for this version of the site. I struggled for a while with where to place the 404.html in my files, but when I finally got it to connect to the site I was very pleased with how it turned out.
404 error page
Accessibility
Accessibility was on the forefront of my mind during this iteration of the small business website, and a major factor that played into my design and structural choices. As mentioned earlier in the blog post, I changed my color scheme to pass the WebAIM AAA color contrast ratio. I also used Siteimprove to check the accessibility score of my site and make any changes that were necessary to gain a higher score. My site now has a score of 98/100. I also changed my ARIA labels where necessary, used alt tags on all of my images, and used meta tags in the head of my pages for descriptions and keywords. In addition, on my home page I added call-to-action buttons so help the user navigate the site more easily, and to make it seem more like a real store. All of these elements help make navigating and viewing my website more accessible and enjoyable for the user.
According to MDN Web Docs, “The <details> tag is a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A disclosure widget is typically presented onscreen using a triangle that rotates (or twists) to indicate open/closed status with a label next to the triangle.” In other words, the <details> tag is a feature that allows information to be shown or hidden depending on how the user wants to view the page. This article will describe the different ways in which the developer can create, style and use this tool.
The <summary> Tag
For the <details> element to be activated, its child element, the <summary> tag, is required. According to MDN Web Docs, “The <summary> element is necessary for the widget to appear so the hidden description can be toggled open or closed. It can only be used as the first child of the <details> element. When the <summary> element is clicked, this event is sent to the <details> element. This is what’s called a “toggle event”.” Because of the <summary> element, we are now capable of creating this effect in HTML rather than making an event in JavaScript. The <summary> presents as a heading for each <details> element, and is what is clicked on, along with the widget, to reveal or close the information hidden underneath.
The details element can be utilised in one of two ways: open or closed. When the developer uses a closed details tag this causes the information below the <summary> element to be hidden when the user first enters the page. This can be useful when the developer doesn’t want to overwhelm the user with too much content, and allows the user to choose whether they want or need to view the hidden information. When the <details> element is open, it presents in HTML as <details open>. This causes the information underneath to be shown when the user first enters the page. The user can then choose whether they would like to toggle the element closed or keep it open.
Image of the HTML code
Image of how the HTML is presented on the website
Styling the Widget
Due to the <summary> tag a widget will appear next to the heading. The default shape of the widget is a triangle. The triangle will change direction depending on whether the information is open or closed. If the information is open the triangle will point down, and if the information is hidden the triangle will point towards the heading. This widget has the ability to be customised in CSS to change it to different shapes. The <summary> element supports the list-style properties, like list-style-type, so you can change the disclosure triangle to one of the available options given to you in CSS, such as a square, a circle, etc. You can also use list-style-image to change it to an image of your choice as well. The last way the widget can be styled is to remove it completely by using list-style: none.
If the choice is made to change the shape of the widget to anything other than a triangle you need to ensure that the user knows that the <summary> heading is clickable. This is because the triangle is the only shape that provides a clear indication that the element has been toggled, and an image will not move. You can achieve this effect in CSS by adding curser: pointer in the details summary section. This will cause the curser to change to the shape of a pointer finger and notify the user of a clickable element.
According to Scott O’Hara from an article written in 2022, “If removing this marker so you can insert your own custom chevron or other visual expanded/collapsed state marker, it will actually make the state of the widget unclear with Firefox and VoiceOver, since the announcement of the default triangle direction is the only way state is communicated in that pairing. Other browsers also have an issue with consistently announcing the toggled state of the disclosure widget if this marker is removed. Something to keep in mind as you determine just how important it is to restyle an element whose semantics are, at least presently, semi-reliant on their default styling.” Browsers tend to have a difficult time understanding and announcing widget shapes other than the default triangle, making it difficult for those visually impaired or those that use screen readers to know it’s a clickable element, so is strongly advised to keep the triangle widget unless it is absolutely necessary for you to change it.
CSS showing the styling of the disclosure widget
Image showing how that styling displays on the website with the image of the arrow
Styling the <details> Element
If you want to contain your collapsible content you can use the border property to style both the summary and paragraph elements together. By putting the elements in a box it enables the content to be separated and kept clear. This may be depending on the content.
Browser Compatibility
Currently both the <details> and the <summary> elements have full support on the latest version of each browser. Although the <summary> tag is read as a button therefore it strips the roles of any other child elements for those that use assistive technologies such as screen readers. For example, if you put an h4 in the <summary> tag it would not be read by the assistive technology as a heading.
It is possible to create a list within the <details> element but be aware that it is not supported by some web browsers. These browsers include Safari and Safari iOS, Opera Android and WebView Android.
<details> element compatibility chart
<summary> element compatibility chart
Real World Uses
Please see below examples of where to find uses of the <details> element used in real world scenarios:
FAQ’s
Navigation
Condensed info
Conclusion
To conclude the <details> element is a great tool to reduce clutter on a web page. It is an innovative advancement in HTML for the web design world that reduces the need for JavaScript.
User Experience Design is not only an important step to take during the phase of product development, but also a necessary one. It is the process design teams use to create products that provide meaningful and relevant experiences to users. A critical step in forming such an experience is the process of research. This allows us to fully understand what the consumer needs, wants, and requires as the creator of the product. It is easy to believe that if you personally like the way something looks or functions that it is the correct way to go forward, but that is not the case. We as designers are not the users of the final product, and therefore it is crucial to take the consumer’s thoughts, suggestions, and opinions into account. This is why conducting research is extremely important for the success of the product.
My Major Project is to create a tiny living interior design website. This site will be created specifically for others in mind. I am someone who has moved quite a few times in their life and always found it fun and therapeutic during the process to design my own tiny living space. Although this subject brings me joy, the website itself is not about me. In order to break away from my own personal design wants and biases, user experience design research is necessary. I will need to learn about all types of styles and aesthetics in order to please my user and give them the same satisfactions that this topic brings me.
User Experience Design is a new concept for me, so breaking it down into phases will help during my implementation of the process for my own project. These phases are…
PHASE 1- DISCOVER: User Research
PHASE 2- DESIGN: Brainstorm features for solutions
PHASE 3- BUILD: Design a prototype based on findings from phases 1 & 2
PHASE 4- TEST: Usability testing
PHASE 5- LAUNCH: Release the product to the users
Another way to visualize the user experience design process is with the Double Diamond model. Within the image there are two overarching goals; the first is to make sure the creator is designing the right thing. This goal is represented in the first diamond, with the main focus being on research. The designer starts with a problem, the main reason for why they are going to create their product, which will inevitably end up being their solution. The creator will then take the initiative to conduct research, both qualitative and quantitative, to gather more information on the problem itself, as well as interviewing or surveying potential users to understand what they would like to see or experience from a solution.
The second goal of the Double Diamond model is to make sure the creator is designing things right. This is represented in the second diamond. Once the research part of their process is over, they move on to build a product that will coincide with the findings based on their research. Usually, this part involves a lot of trial and error. The creator will keep improving upon a prototype until they believe it meets the needs of the user. Once the designer delivers the product for usability testing and has received feedback, the designer will adjust it again and then launch it as a solution to the problem.
Phase 1- DISCOVER
Although I am quite good at designing a room to my personal taste, I am not yet aware of what the general public will want to see specifically from my website. Therefore, I need to conduct research on specific home aesthetics, trendy color patterns, where to find the necessary products for each type of design, what kind of plants will work well in different styled rooms, and home décor trends for the next year or two. In order to establish a well-rounded research model, I need to use both quantitative and qualitative methods to obtain as much information as possible.
Collecting Quantitative Data (Online and In Person Research)
To provide myself with a deeper understanding of what the home décor trends are, specifically for people on a budget living in tiny bedroom spaces, I need to turn to the internet as well as social media. Cost-friendly websites such as https://www.ikea.com/us/en/ and https://www.wayfair.com/ are very popular, have up to date inventory to gain inspiration from, and have a plethora of real-life reviews to read through.
I have personal experience ordering furniture from both https://www.ikea.com/us/en/ and https://www.wayfair.com/ in the past, as well as knowing quite a few people who have used those companies recently. Due to their popularity with the general public I plan to look through the reviews on their websites to understand what type of bedroom products are top rated, are well received, and which ones are not. On top of that, I would also like to visit furniture stores in person, both large corporations and small-scale boutiques, to gain a sense of what products are currently in stock and gaining the most interest from consumers. I also plan to find interior design blog websites, such as https://www.homesandgardens.com/ for the most up to date advice and to keep on trend.
In the wake of the pandemic, over the past few years social media apps, such as Instagram and TikTok, have risen to become the most popular form of entertainment and outlet to receive news. Therefore, I plan to use both platforms for research about my major project, as they are mostly viewed and used by a demographic of people ages eighteen to twenty-four, which is about the same demographic for my website. Instagram is a very aesthetically pleasing app to look at, and people have pages dedicated to any topic. I want to use the app to pick out accounts specifically focusing on the most current décor trends for 2023 and upcoming to 2024. TikTok is also a great resource because it provides a vast amount of budget-friendly home DIY (do it yourself) videos, which will be helpful to learn about and teach to my user.
In addition to the design and furniture, I am going to have a houseplant element to my tiny living site. I have experience taking care of twenty plus plants while living in Miami, FL for a year, and one of the greatest resources to learn from were YouTube channels (e.g. YouTube Channel: https://www.youtube.com/@NickPileggiPlants/videos) discussing the nature and needs of each plant. I would rewatch these videos and provide my user with a selection of easy to care for plants to choose from based on their room type, as well as tips and tricks on how to help their desired houseplant thrive in their environment.
Collecting Qualitative Data (Interviews)
Once I have collected all the quantitative data from the internet, social media, and in-person store explorations, I will have a better understanding of what interview questions to ask candidates during my qualitative data research process. As of now I plan to find six interviewees, hoping to get a mix of people who have just moved into a tiny space and people who are currently planning to move.
Assumption:
Based on current consumer patterns, the busy lifestyles of students and young professionals, and the cost-of-living crisis both in Boston and London, people living in tiny spaces will either turn to manufactured large-scale department stores such as IKEA, Wayfair, and Target to acquire their décor in a quick and budget-friendly way or leave their space blank.
Research Objectives:
While interviewing my chosen candidates, I’d currently like to learn the following bits of information:
Have they ever decorated their own room before?
What type of bedroom aesthetics would be the most pleasing to see?
What factors are inhibiting them from decorating and personalizing their living space?
What types of material or fabric would they most like to use in their own space?
What type of furniture stores would they prefer to shop in?
What problems have they encountered living in a tiny space?
How big is the space they currently reside in?
How likely are they to engage in DIY decor?
Do they like houseplants?
How likely are they to purchase a houseplant?
What direction is their window facing?
Target Audience:
Originally, I had wanted my major project website to be accessed by and encompass the needs of the entirety of the United Kingdom and USA. After some research, I learned that most people residing in tiny bedrooms and spaces are those who have moved to expensive areas, either for university or a new job opportunity, such as London and Boston.
Therefore, I have adjusted my target, and the audience I want to attract to my website will be university students and young adults living in London and Boston. Both cities offer small living spaces for large rent prices, and thus cause a significant amount of their residents to decorate their tiny rooms on a budget.
When they explore my website, I want the audience to feel as if they be free to transform their little spaces into a cost-friendly sanctuary of their own design.
Demographic of the Hypothetical Target Audience
18-30 years old
lives in London, UK or Boston, MA
college student/ young professional
lives in their own space or tiny room
Sampling:
I plan to have a target number of at least six people to interview. These would include about 3-4 friends, two of whom live in Boston and have either just moved or are about to move. Another friend lives here in London and has just moved into off-campus student accommodation for the year. All these friends are either young professionals or master’s students within the correct age demographic and are currently going through, or are about to go through, the process of decorating their own tiny spaces.
In addition, I would like to conduct interviews with a mix of 2-3 university students and young professionals here in London, preferably residing in tiny living spaces off campus. This will ensure a higher probability that the interviewee is allowed to make changes to their space on a more transformative scale.
Phase 2- PROTOTYPE DESIGN
Now that the research process has ended and all the candidates have been interviewed, it will be time for me to start analyzing all the data I collected. All the analyzed data will help me form a clear path for what direction to take the design of my website in a way that it will most benefit the user. This will be done by using empathy maps, user profiles, and journey maps.
Empathy Maps:
Empathy mapping is a great organizational process to start analyzing all the data collected during the interviews. It will provide the designer with a more in-depth view of the interviewee’s background, thoughts, and desires for the final product.
A trick learned from Steph’s class is to use sticky notes during the interview process. For each question an answer is quickly written down in a short but descriptive way to indicate the person’s wants, needs, and concerns. After all the interviews are completed, the sticky notes will be organized into 2-3 categories based on the results. These categories will be grouped together to discover interesting similarities, whether they be positive or negative, to provide me more clarity on how to move forward with my design plan. For example, these can be based on popular design choices, similar go-to stores to shop in, or whether they are plant people or not.
The success of my website hinges on the usability and approval from my users. Their needs must be met, and their concerns should be weeded out during the empathy mapping process. Therefore, this step is the most crucial to perform when designing a solution. If done properly, it can transform a good idea into a great one.
User Profile:
Once empathy mapping is complete, I will then move on to making a user profile based on the categories I had previously decided to create. These profiles do not go into a great amount of detail for security reasons but will include some background information and their category description.
It will also include information such as whether they have ever decorated their own living space, their eagerness to learn about the latest home décor trends, what first comes to mind when they picture designing their own space, and what concerns they have about decorating, and their desired budgets.
Journey Maps:
Journey mapping is a great step to take to put yourself in the user’s shoes. This will not only allow you to visualize what their experience will be like, but it will greatly improve your own design by metaphorically seeing a point of view outside of yourself. This is a step we learned in Chris’ class and was a fun but very informative way to enhance a design in a timely manner.
To make a journey map, you can create a persona or two based on what you think most of your users will be like, which will include thinking of your candidates based on the information they provided during their interviews.
As an example, the persona can be a made-up character of a young professional who just moved on their own to London for the first time for a job opportunity. As an individual living on her own for the first time to start a new career, the space she has chosen to live in is quite tiny but can feel like home if she picks her own furniture and adds a few personal touches for the décor. To accomplish this, she may go online and search for design inspiration, as well as tips for the best stores to shop that will be the most cost effective.
During this process I would also think of keywords that were brought up during the research stage in order to enhance the website to the needs of the user.
Phase 3- PROTOTYPE BUILDING
Currently, I plan to make an all-in-one website that provides visual inspiration for bedroom decor, offers tips for where to buy certain pieces of furniture (e.g., beds, nightstands, dressers, rugs, lamps, and decorative art pieces) on a budget, trendy paint color combinations, houseplant care instructions, and blog posts about the latest trends for tiny bedroom design. I will also have home décor Instagram accounts tagged on my site, as well as the furniture stores, so my users can find conversations and comments there if they need to decide whether to purchase a product. This way it will not be necessary for me to create a comment section on my own website. This will allow me to put all my effort into the design of my project and the content I will be providing.
I will be starting to write up the content and find/ design artwork for my major project very soon, as I have come to learn the #1 rule in web design is to create the content first. Once this is done, I will have a clear vision of how many pages my website will be, and how exactly it will function.
Phase 4- TESTING THE PRODUCT
Usability Testing:
Once I have completed putting my content together, I will start to code my website. For each page I complete I will find 2-3 friends to use the website and see if the page works the way I intended for it to. I will also ask for any feedback they may provide, and if they don’t provide any I will ask for a different point of view just in case. This way I can check my work as I go along in the process.
Then once the prototype of the site is complete, I will ask different friends, family members, and those in our MA class to use the website for a final usability test to make sure the entire website works cohesively. Each opinion matters, and I will continue to update the site even past the submission date.
In honor of studying in the UK, the first website is for The British Museum in London. This website showcases two types of typography- serif for the title and sans-serif for the body of the page. The use of a serif font for the title gives it a sophisticated classic look, as well as a bit of artistic flair, which matches the atmosphere of a museum. Using sans-serif for the remainder of the page allows the viewer to read each detail and announcement clearly and quickly, which provides an easy user experience.
Hobbs London- Clothing Brand
Hobbs London is a clothing store that is meant to showcase a mix of beauty and professionalism. The typography used on their website does just this, with using a mix of serif and sans-serif for the title of the site and just sans-serif for the body of the pages. The mix of typography in the title is a simple, yet intentional choice. The name of the store is in serif to showcase the mix of style and professionalism of the clothing line, but the word London underneath is in sans-serif for it to standout and showcase to the viewer that it is the UK branch of the store they are witnessing.
The use of sans-serif for the body of the page, including the names of different clothing items and their descriptions, allows the viewer to read them clearly and easily. This helps provide customers with a quicker shopping experience.
Six- West End Musical
Last but certainly not least is the website for the West End musical, Six. The site uses two font styles- serif for the title and sans-serif for the body text of the page. Serif is used for the title of the show because it’s meant to be bold, striking, and have flair, just like the musical itself. The only difference with this is that the dot of the “I” in the show’s name is designed in the shape of a crown to further give context to what the production is about, which is the six wives of Henry VIII.
The sans-serif used in the body of the website helps guide the viewer to read about the show and purchase tickets. The font itself is also displayed in either white or gold colors to stand out against the purple background. The choice of colors for the site is another nod to the six wives, who were each queens of England. Both purple and gold are known to be colors representing royalty.
Ivy Chen is a website that is a beautiful blend of an artist’s passion for graphic design and fashion. The website hosts both Ivy’s fashion brand, as well as her most recent illustrations. In her “About Me” section of the site, she describes how she is drawn to the fluidity of lines and form. She takes this inspiration and has created something unique for her website. Ivy implemented parallax scrolling onto her site’s homepage, allowing the next category to seamlessly blend into the one before as you continue to scroll, while the page itself stays still. This is a feature that I do not often see on websites, and what makes hers stand out to me as a good website. It is creative while still being simplistic and easy to use. Although a lot of information seems to be on just one page, it is still fast moving and does not bog down the site. The feature itself is a big focal point of the website, but Ivy does not use it in excess. All of her other pages feature normal scrolling, which allows the viewer the opportunity to see her styles and artwork as individual components rather than having them blend together. This website’s attractiveness is in its simplicity.
As someone who has a deep interest in tattoos and has a few herself, I am always happy to come across a website from the tattoo world that has a straightforward layout and a thoughtful design. Cosmic Peach Tattoo is a beauty and tattoo company mixed together. They provide cosmetic tattooing in the London area. The company has a website that draws you in just from the color scheme alone. Their environment is meant to make the customer feel safe, hygienic, and at ease. The colors on this website do just that. On their homepage they use a calming shade of lilac blended together with a light tone of orange that puts the viewer in a relaxing mood, showing that this is not meant to be a fearful process. The colors physically move on the homepage while blending together, also symbolizing the transformation that their services will provide to the customer. In addition to the colors, their website is easy to navigate, with each page clearly labeled. The site also has quick loading times and provides all of the necessary information required on each page. Not only do they showcase their work, but they take you through step by step on booking, they provide the customer with aftercare instructions, they clearly showcase their prices, and they provide real customer testimonials. I know this website is good because it makes me want to book an appointment.
Wood Green animal shelter has a show on HBO Max, which is where I discovered them for the first time. Although I cannot currently provide for a pet at this juncture in my life, it did not stop me from going straight to their website to look at all of the dogs they had. While glancing at the site, I noticed how simple and clean it looked. Their homepage is very clear, and has all of their tabs listed on the top of the page, making it easy to navigate. They also make it simple for someone like me, who just wanted to look at pictures of the animals they currently had. This section is present right on the homepage, where there’s a filter to narrow down the search to exactly what you’re looking for. Another aspect of the website that caught my eye was their logo. It is a simple design of arms hugging a dog, using the company colors. The colors are white and green, and they used the negative white space to make the arms, and the filled in green space to make the dog. It is a cute and simple design that shows how much they care for the animals, as well as how much they want them to go to loving homes. The functionality of the website is great, and the loading times are very quick. With their artistic design, feature design, and great functionality, Wood Green has a very good website.
The design of this toothbrush case is simple yet effective. Although it stands at no more than two inches tall, it is easily able to cover the area of the toothbrush that goes into a person’s mouth, protecting them from germs. It is made out of a soft plastic material, which allows the toothbrush to easily bypass the stopper at the entrance of the case with minimal force. The stopper at the opening also helps keep the case stable and enclosed on the toothbrush. In addition, the softness of the plastic also makes the case easy to clean since the stopper at the entrance can bend in different directions without breaking. The sides of the case have a risen ridged surface all around, allowing the person to grasp onto it even if it gets wet. The pink color of the case allows the person to identify it easily, even though the item is small in scale. A tiny size for the case is helpful and preferable. It is not too bulky, making it easy to store in the home and to pack while traveling. The shape is also important. It is wider at the base to make room for the toothbrush, but the case gets thinner at the top to keep the toothbrush from moving around and picking up more germs. Overall, the construction of this basic tool, necessary in everyday use, is designed well because it is easy to use.
Toothpaste Container
Toothpaste is an item we all use everyday, multiple times a day, until the last drop has been taken and we need to buy a new one. But we don’t always think about why we’re able to extract it out of the tube so easily and how quick the action of putting it onto the toothbrush is. The design of a tube of toothpaste is simplistic but ingenious. The example I’m using is my own container of Crest mint toothpaste. The actual tube of the toothpaste container is the most important part of what makes the extraction so easy. The plastic material it’s made out of is soft and is very easily bendable. This allows us to squeeze the toothpaste out with as much force as is necessary. And when there is only a minimal amount of paste left the tube can even be rolled so that the last bit at the bottom can make its way out. A material like this helps us use all of the product and stops us from wasting any of it. The design of the nozzle at the top of the tube is made of a more structured plastic and is thinner than the rest of the tube so that the paste can come out in a controlled manner. This again helps with waste management so that we can put the correct amount of toothpaste onto the toothbrush. The outside of the nozzle at the top of the container has risen hoop-like edges so that the cap can easily fit back on. The cap itself also has rigid edges, but this is so we can easily grip and twist it back on the nozzle. Color is also important with toothpaste containers. The flavor of mine is mint, so the blue mixed with a mint green color on the tube is important so people know what they’re buying without having to look at the fine print on the box. Toothpaste is an item we use each day without thinking, but the design is so well done that it is universally used by most brands.
Shampoo & Conditioner Bottles
When purchasing this set of shampoo and conditioner, I did something that one should never do. I bought it because of the way the bottles looked. I was drawn to their simplistic shape, as well as their calming and pretty color. Luckily for me the product works well with my hair, but that was just a side thought when I found the Monday brand at my local Target. The design is clever because their logo is engraved in the plastic bottle, allowing it to stay there indefinitely. The indentations of the logo also make it easier to pic up the containers when they are wet. The hand can get a better grasp on them. Although the words “shampoo” and “conditioner” are painted on the front of each bottle, an “S” and “C” are also engraved on the top of the correct nozzle so you don’t have to worry about getting them confused if the paint comes off the front. The top of the nozzles also have an arrow engraved as well, telling you which direction to turn the nozzle to open the product correctly. The bottles are made out of a light plastic, so they do not add to the weight. The material is also soft, so if needed I can remove the nozzle and squeeze the product out if it’s running low. As mentioned earlier in the post, the color is what caught my eye first. It’s pink, but aesthetically it’s a shade of pastel pink that seems to be very popular right now. Having the product be this color eliminates the need for unnecessary or overwhelming design choices. Not only is this set of shampoo and conditioner appealing to look at, it is also very functional and easy to use.
