My class had the privilege of listening to guest speaker Mauvé Page share her expertise and knowledge on the design of a website. Right off the bat, we learned that there are five design principles: balance, rhythm, proportion/scale, contrast/point of focus, unity/harmony. When designing the homepage for example, it is important to keep in mind a good balance of color, pictures, text, and everything that goes into aiding the visual appeal to viewers. The first impression of your website is often the visual aspects, so it is important to consider the design style and patterns that are used for your website pages as well as posts. 

Things to consider in terms of balance is the amount of white space compared to dark or coloured areas. Is the amount of white space overpowering? Is there too much white space compared to dark or coloured areas (or vice versa)? These are some questions you can ask yourself to develop an effective and visually appealing page for viewers. With this, you can also take into consideration the amount of color used, potential shapes, use of different font sizes, and the placement of text or images; which will all aid visual equilibrium. 

Rhythm refers to the flow of your website. Your site should have good movement that makes it easy to follow as well as navigate what you are looking for. Rhythm can be generated through design tools such as the repetition of colors or shapes, that can help sequence the order and layout of your website. 

Proportion is also another important design aspect to take into consideration that relates back to balance and can also impact the rhythm of your site. The size of the images, posts, font, and other visual design elements can greatly decide where the viewer’s attention is drawn too. You can use proportion to create emphasis and importance whether it’s by using large bright images, bold font, or any other design tool that is capable of catching the attention of viewers. It is important to keep in mind the use of different proportions on your site, as the ratio to larger and smaller aspects is crucial to ensure your website does not appear crowded and dis-organized. 

I will leave the descriptions at these three for now, and would like to explore the design of a website that I visit quite often: https://www.garageclothing.com 

When I visit Garage’s website, I often do not stop and look at the design of their website as I am too focused on searching for new clothes and accessories that usually result in me spending too much money (worth it though!). So this time, let’s stop and take a look at the design of their home page….

When you first open Garage’s Website, your immediate attention is drawn to the large scale moving photo gallery that typically highlights new clothing drops, sales, and anything else that will immediately intrigue viewers. This is an effective design style as the pictures displayed typically showcase ideal clothing pieces that the target audience will respond well to, followed by an immediate button that will link you to the items and collection you are looking at. 

What I also like about the Garage homepage is the use of bold highlighted text that is used to direct the customers attention to aspects that they can benefit from (and so will the company). The “MEMBERS GET MORE” is eye-catching as it is the only coloured text on the homepage, which makes it more intriguing and likely for users to look into their loyalty program. The bold “FREE SHIPPING” and “GET YOUR ORDERS ASAP” are also effective ways to display the text as both free shipping and quick delivery are important features for customers and often ways the company can benefit as well by causing you to spend more money to receive such benefits. The menu headers at the top of the site are also effective as they are set up based on different categories, which makes navigation really easy. As soon as you hover over one of the menu headers, a wide drop down bar appears that displays all of the subcategories, as well as a few pictures of new arrivals within that specific category. This makes the navigation clear, easy, and available to customers which allows for Garage’s website to be so effective and functional. 

Let’s take a look further down the home page….

When you first scroll down from the first main gallery that appears when you open the website, you are taken to eight different changing images that display new arrivals and different categories. This is one of the design tools that I find makes the second half of the home page a bit too busy. The proportion of the images are quite large, and due to the quantity, they expand the home page quite a bit. With this, the quantity of the images also seems a bit overwhelming and disrupts the balance between text and images, making this portion of the homepage less visually appealing. Including just one row of four images instead of the current two rows of four may be an effective way to make the page look more organized, and enhance the movement as you scroll through the page. 

I really like the “ TRENDING RN” at the very end of the site. The circular images create a contrast and variety in shapes, as up until that point we had only seen vertical and horizontal rectangular shapes. The layout of the different categories are effective and visually appealing, and I think this section of the homepage could even replace the many images above as it is ultimately serving the same purpose: promoting new clothing arrivals and styles. 

Because Garage is a clothing website, it can be difficult to differentiate from competing websites and have them all end up looking alike. Identical sites are more common than we think, as a class reading we engaged in, “Design Machines: How to survive the digital apocalypse,”  by Travis Gertz, discussed. Gertz discusses that without a logo or well known name attached to a website, there is often not much individuality seen on websites which causes them to all end up looking the same. This is often due to the pressure that comes with designing a website and maintaining standards, “copycat culture”, and the content itself being poor quality (Gertz, 2015). In my opinion, Garage has done a good job at personalizing their website to effectively reflect the style and aesthetic the brand goes for. The style of font used and the bold/uppercase lettering creates a more fun, youthful energy which successfully captures the brands primary audience. The images displayed are often professional, yet casual and often are taken at everyday locations, which reflects the brands message that Garage has the perfect clothing for everyday lifestyle. 

References: T, Gertz. (2015). Design Machines: How to survive the digital apocalypse. Louder Than Ten. https://louderthanten.com/coax/design-machines