Web-Based Multimedia Design for Educators: 02/02/17

Insectropolis Screenshot Slideshow

*******Click the link above*******

For this blog assignment I started to think about the different websites I have used throughout my time in education. A couple websites that stuck out to me were, i-Ready, PBSkids, edconnect, scholastic, and Insectropolis, just to name a few. However, when thinking about the purpose of this assignment I decided to revisit these websites after I completed the readings for this week, to determine what websites were good and/or bad examples of designs. One website that struck me as visually unappealing and overwhelming after revisiting it and having an understanding of website design was Insectropolis. This website was created to publicize the different aspects that the bugseum of New Jersey has to offer in hopes that it would inspire viewers of the website to stop by for a visit. In the following paragraphs I will discuss the different features of the website and how they follow or do not follow the different principles of design that we learned about in this week’s readings.

When talking about the design of this website I want to start out with mentioning the various design principles that I thought fit well with the design of this website and helped it have some visual fulfillment,

Trapped Negative Space: When navigating throughout this website the designers did a good
job of properly trapping the negative space toward the outside edges of the layout. When I first went onto the website I thought that maybe the outside edges of the layout were specifically for the homepage. However, when navigating to the various different pages throughout the website the outside edges all remained the same size. I think this provides the website with enough outer space that the viewer doesn’t seem overwhelmed when navigating throughout the website and having an array of information stretch across the screen. The outside edge creates the perfect width of the page that enables the designer to effectively place the information on the page without overwhelming the viewer.
Centering Everything: Another design rule that I thought the designers of this website implemented well was that the text that was written on the website was aligned to the left which helped to give it a nice straight line and allow the eye to have an understanding of where the next eye entry point was expected to go. Although I think there are features of the text alignment that could have been implemented better in the design (discussed later in alignment) the idea that the text wasn’t centered on this website really helped to have the website visually appealing for the viewers. Additionally, there was uniform alignment of the text throughout the site. When navigating throughout the website the text remained to be aligned to the left within copy, leads, headlines, and even captions/cutline.
Asymmetrical Balance: Although sometimes I would imagine asymmetrical designs to be chaotic and unorganized I think for this website it works particularly well. The placement of the different navigational tools, images, text and tags help to make this website flow nicely. That being said, it brings me to my last design element that I believe went well with this website design.
Proximity: I enjoyed that with this website all the navigational tools were bunched together, different events were advertised in the lower left hand side and a slideshow was presented at the top of the page followed with information that highlighted why people should visit the bugseum. The proximity continues throughout the entirety of the website and I found that I never was confused on where to look for a particular topic. The tabs of: About the Bugseum, Our Exhibits, Plan Your Trip, Education, Event Calendar, and Photo Gallery all help and greatly organize the different areas of the website that might be of interest to the various visitors on the website.
Bulky Borders and Boxes: The first design feature that I found to take away from the aesthetic value of the website was the variation of borders and boxes that were used throughout the website. It seemed like when revisiting the site after having read about different design features I started to really hone in on what made me feel a little overwhelmed when navigating throughout the website initially. I found that not only were the borders varied across the site but in addition there were moving features and bugs that helped to distract the user. I found that the bugs might have been placed strictly to have the viewer understand by first glance what this website was about. However, I found that the bugs might have been too much on the website with everything clustered initially and since the bugs were animated it helped to really be distracting for me and I imagine other viewers as well.
Backgrounds: The idea of bulky borders and boxes helps to bring me into my next rule of design that did not fit nicely into the design of this website. Although this feature was not terrible I think there could have been changes made that would have made it even better. Initially when visiting this website, I was not a fan of the brown background, to me this takes away from a lot of what the website has to offer. I think that because of this it is conveyed that the website is really busy and I feel as if there were to have been a lighter brown shade it would have fit better with the flow and visual appeal of the website.

Too Many Fonts: Another design feature that I did not like was not only the various text types that were used but also the different text colors as well. I think overall, this took away from what the text was trying to say. In the internet browser that I used to view the website, Mozilla Firefox, there was a feature at the top of the webpage that allowed me to view the website in reader view. This feature allowed me to simply read the text that was on the webpage in the simplistic black and white formatting. This put the text into a standard and classic size font but also made the text just black which helped me in reading what it was that the website had typed up. Although designers sometimes find a need in making their websites visually appealing if it is not carefully thought out, it can take away from the overall message that is being conveyed.
Alignment: The next design feature that I thought was negatively portrayed in this website design was the alignment. Like I mentioned earlier I did enjoy that the designers did not center the text and rather aligned it to the left-hand side. However, the reason I think the alignment was bad was when reading the principles of design article it was stated to “always find something else on the page to align with, even if the two objects are physically far away from each other” (northernhighlands.com). Therefore when simply looking at the homepage the navigational links that are used to navigate throughout the site (About the Bugseum, Our Exhibits, Plan Your Trip, Education, Event Calendar, and Photo Gallery) are aligned to the left hand side of the page. However, when referring back to what was mentioned in the Principles of Design article it would have created a strong visual alignment & unity if the text for the navigational links would have been aligned to the right instead.
Contrast: I find that the contrast for this website is negatively portrayed because for the most part a lot of the information on the website looks visually similar. The text size is all relatively the same and is all represented in the same text color (blue, green, brown). The Principle of Contrast states, “If two items are not exactly the same, then make them different. Really different” (northernhighlands.com). Which was not emphasized throughout this website. Additionally, because there were so many different text types and sizes used throughout the website I found it very hard to identify what it was that was important information and what the designer really wanted me to focus in on as the viewer.
White Space: Last but not least, I found the lack of white space in the design of this website really took away from what the website’s viewers perceived when exploring this page. An important statement from a reading this week was, “white space is not your enemy” (Hagen & Golombisky, 2017). I think as designers we need to take an initiative for implementing the white space into our designs rather than working to get rid of it. Although the outside edges of the layout were negative space, that was primarily the only area where white space was utilized. In order to develop a more visually appealing website for viewers, it is imperative that designers implement white space much more frequently and include animation, images, text more infrequently in order to create an effective website overall.

Throughout this week’s reading it really helped me to see why it is important to become familiar and knowledgeable about the different principles and rules of design in order to create a web-design worth looking at. Overall, I really enjoyed this week’s readings and being able to understand what it is that makes a viewer particularly interested in a design.

References

Hagen, R., & Golombisky, K. (2017). Layout sins 13 amateur errors. In White space is not your enemy (3rd ed., pp. 33-44). Boca Raton, FL: CRC Press.

Principles of Design [PDF]. (n.d.). Retrieved February 2, 2017, from http://www.northernhighlands.org/cms/lib5/NJ01000179/Centricity/Domain/40/digitalartsdocs/principles-of-graphic-design.pdf

Web-Based Multimedia Design for Educators

Thursday, February 2, 2017

Design Basic Index: Loosened Alignment Exercise-

Something I previously designed...revamped with new design knowledge

Blog #3

Blog Archive