jessxiing96-blog

[jessxiing96-blog]

IAT 235: Idea Journal #4

As a public commuter, transiting can be very easy and convenient for us. But the question is, how and who made public transit easy and convent for everyday people? I always question myself, how do people design the skytrain for commuters and why does it has to look like this, why do they build the entrance here and so on. However, I gained some answers after reading a research online, the authors stated that in order to build a good public transport facilities, it is important to understand the nature of interchange from a design perspective which includes area or platforms of people places where people move around or gather, the places of waiting where people wait for transits, and the places of movement ‘switch’ where it allows people to change platforms or direction of transport quickly and conveniently. This three concepts help to structure and manage transportation better for public use. Not only that, the design of signboards and maps in stations are very important too as it is a piece of information for commuters to conveniently know their directions and plan their route ahead. In addition, the online article titled Photographic Typologies: The Study of Types provides a view and understanding of the importance of Typologies in buildings interior design as it can affects users experience 

Vancouver Skytrain Map and Seattle Light Rail Map

Figure 1 : Vancouver Skytrain Map, retrieved from https://buzzer.translink.ca/2018/04/wayfinding-101-the-skytrain-b-line-and-seabus-network-map-in-depth/

Figure 2 : Seattle Light Rail Map, retrieved from https://www.seattlesouthside.com/explore/getting-around/rail/link-light-rail/

First of all I would like to talk about the design route of Vancouver Skytrain and Seattle Light Rail. Both of the maps give a clear and precise informations to users, but the example from Seattle Light Rail Map gives travellers a clear and fun ways to look at maps or the destinations they are heading to, while the one in Vancouver is plain and simple. Let’s discuss Figure 1, even though it looks simple, the use of colours to differentiate the routes of different services Translink provides and the zones around Vancouver area, provides a clear understanding of an informative design to travellers. As Coates and Ellison (2014)’s reading mentioned that one of the most important element in informative design is the use of colors, visual images, typography, and the placement of the info. As for here, we can see that colours help to differentiate the route and zones of Translink services, and the use of icons such as ship and plane to indicate the kinds of transportation / services they provide in that area.  On the other hand, Seattle Light Rail Map (figure 2) gives an interesting and fun experience for commuters to view maps and plan their route. I personally like the design of this informative design because it includes a variety of icons related to the destination. For instance, a dragon icon is used to symbolized Chinatown. The map itself provides clarity and additional information for commuters, such as the travel time between the places, it adds up the conveniency and unique experience for commuters. 

However, the authors from one of the reading stated that information designs are being deliver through various platforms like prints, media, advertisement, interactive and environmental, it is crucial for us, as designers, to understand how to create a way to deliver the intended message of that certain information. (Coates, Ellison, Ballantyne & Credo, 2015). In order to gather the right informations and create a better and meaningful solution, designers have to understand how everyday people struggle with problems like transiting and commuting in a city. The authors use the examples of New York subway transit, how its transit information designs (like maps, travel card machines, sign boards, etc.) being deliver to commuters. We have to understand that different users have different needs, for instance, when building a skytrain station in Vancouver, we have to not only think for the everyday people but also include different groups of people that need special care like elderly people, people in wheelchairs, children, and so on. The reading stated that the use of font (typography) in informative design needs to be carefully chosen because some fonts might be hard to see and it can cause inconveniences to commuters or miscommunications might occur.

One of the most important design in public transport is the interior design of the transport itself, such as buses and trains. For instance, how many passengers can a bus fits, how can the interior design achieve that amount of passengers, and where to put the stop buttons around the bus. I find that the buses in Vancouver has a good interior design and convenient for people to commute around. It has many features, even for the smaller community buses. The examples below show the features of a community bus which is smaller than normal buses. All of the pictures are taken in the interior of a community bus, figure 4 shows the front and driver seat, figure 5 shows the wheelchair and stroller access at the back of the bus and the last one, figure 6 shows the seats and windows of the bus from a side view. In my observation as a commuter, Vancouver buses lack of one of the most significant information, which is the display of bus number at the inside of the bus. One of the issue is that, some people rushes to catch bus without noticing that they got on to the wrong bus and stayed in it until they realized or reached the wrong destination. However, as a designer, this issue can be address through a display on the navigation bar on top where it shows which stop the bus is reaching. For example: Instead of putting just the name of the stop “Rumble Street”, it could be display as “417 : Rumble Street”, showing the number of the bus and the name of the road. With this design or function, it can help people to understand which direction or bus they are taking, hence, improve their route planning.

The conveniency of Vancouver buses range from including bikers to the easy access for wheelchairs and strollers. The design itself is well-thought and provide good services to the public. However, the wheelchair services can sometime consume a lot of time, especially for a smaller community bus like this because the driver has to manually lower the platform for strollers and wheelchairs, therefore, it can bring inconveniences to other commuters. The design and functionality of this platform can be improve through a press of button beside the driver’s seat that can actually save time and energy. Figure 6 shows a side view of seats in the bus with the stop lines for people to pull for their stop. The design includes conveniency to commuters but lack of information design, for instance, there are no signs or context indicating that the stop lines are use to pull for the next stop. Putting myself in a new commuter’s position, with no experience of commuting, I would not have known the function of the yellow lines. Therefore, I think this can easily be improve by just adding a sign or icon to inform commuter on how to use the lines (e.g. Pull yellow line to stop). To conclude this, Vancouver’s transit system is well-designed and organized for variety of commuters, but for some parts, it can be improve by inserting better informative designs to advanced user’s experience.

Figure 3 : A front view of Vancouver community bus with the navigation bar on top.

Figure 4 : A view of the wheelchair and stroller access in a small community bus.

Figure 5 : A picture of a side view of the seats with yellow lines that is for stopping.

Reference List :

Coates, K., & Ellison, A. (2014). Introduction to information design. Retrieved from https://ebookcentral-proquest-com.proxy.lib.sfu.ca

Coates, K., Ellison, A., Ballantyne, L., & Credo Reference , distributor. (2015). An introduction to information design / Kathryn Coates & Andy Ellison ; design by Lizzie Ballantyne. (Enhanced Credo ed.)

Naudé, S., Jones, J., & Louw, P. (2005). Design Guidelines For Public Transport Facilities. Retrieved from https://repository.up.ac.za/bitstream/handle/2263/6332/041.pdf?sequence=1&isAllowed=y

Photographic Typologies: The Study of Types. (2012). Retrieved from https://blog.redbubble.com/2012/04/photographic-typologies-the-study-of-types/

[jessxiing96-blog]

IAT 235: Idea Journal Submission #3

According to the reading by Coates and Ellison (2014), they mentioned that in order to have a legit and readable informative design, the use of color, graphic, typography, and the alignment/ placement of the context are important aspects and informations in many design context. 

The reading stated that the use of font (typography) in informative design needs to be carefully pick as each font is unique and their uniqueness helps them to fit in different kinds of informative design. Each type of font delivers different kind of feels and meaning in a context. Not only that, the font has to be suitable and clear in context in order to deliver the message. For instance, the brand Gucci uses a font that is somewhat equally sized with equal space in between each letters, stating their brand as clear as possible, as well as, giving a fashionable and luxury look to it. However, the informative design here also associated with fashion. As Gucci is an Italian fashion and leather goods label, the 3 lines under the name of the brand indicates a belt which also demonstrates leather. In this case, people will remember Gucci as a brand of luxury leather products. 

Gucci Brand 

On the other hand, color coding is another way of attracting viewer’s attention, and guiding them to a category or group of content. It is useful in various informative designs such as maps, routes, files, etc. However, in this case, Metrotown Mall map shows various kind of color to guide people to where they want to go in the mall. The different use of color in the map is designed to set the 7 different area of the mall apart, such as the levels of the mall and the different sections or parts of it. Therefore, with the use of colors, it acts as a navigation tool and helps to guide people to their destination easily and conveniently. Moreover, the little icons on the left also help to improve people’s understanding of the map.

Metrotown Mall Map

In the reading by Baer and Vacarra (2008), they explained the use of graphic in various informative design help us to understand more of the meaning in a context. I helps to deliver a story. In this case, the reading provide an example of illustrating maps and buildings can improve a person’s knowledge in depth, as well as, giving a visual understanding of the functions and additional details of that certain thing. For example, the recycle and garbage bins in SFU are very important and useful visual information for everyone because it is not only educating us how to recycle but it is also guiding us the different recycle components and where should discard them properly. With the help of the visual informative design above each bins, it navigate students to throw and recycle their garbage properly. Therefore, visual graphic can improve our understanding of something, as well as, educating us about about new things that we did not know. 

SFU Recycle Bins

However, in Coates and Ellison (2014) reading, they mentioned that the alignment or placement of each object in the context are very important as it helps to guide the human eyes to the message of the informative design. For instance, the arrangement of context and visual object in an infogrpahic can guide our eyes to where we should read first to understand the whole message of the infographic. Here, with the collaboration of color coding, our eyes naturally look at the brightest and sharpest color in the content, which is the red bubble in this content. After that, we are able to read the message smoothly by following the placement of the objects in the infographic, and by reading the text and observing the imagery, it helps us to understand more of the message. 

Weather and Pollution Infographic/Diagram

In contrast of this example is another example from SFU’s The Peak News Stand. The somewhat unorganized content gives reader a hard to directly get the message of this design. The big arrow is a clever way to guide human’s eye to the news brand The Peak, but it is still a confusing way to lead readers to the information as there are dots in rows pointing down, as well as, short lines in a row directing towards The Peak. Nonetheless, the use of the font from three of the text are different which gives an uneven design of the context. The use of the color coding here is simple which can be good and bad for the design. According to Coates and Ellison (2014), colors are meant to easily lead readers to the important information, especially bright colors, therefore, the color of yellow symbolized fresh and to use it in a news stand design, it works.

Reference 

Baer, K., & Vacarra, J. (2008). Information design workbook : Graphic approaches, solutions, and inspiration + 30 case studies. Retrieved from https://ebookcentral-proquest-com.proxy.lib.sfu.ca

Coates, K., & Ellison, A. (2014). Introduction to information design. Retrieved from https://ebookcentral-proquest-com.proxy.lib.sfu.ca

[jessxiing96-blog]

IAT 235: Idea Journal Submission #2

Silver Reef : Hotel, Casino, Spa Advertisement

Silver Reef : Hotel, Casino, and Spa’s advertisement provides information of their services but in one look, this advertisement has too many info and graphic in one design. The size of the font on top, mainly the “N” is being covered by the background image of the Hotel. The map on the left covered the background hotel image, while the rest of the images on the right are overlapping on each other and provide little info of their services. Lastly, Silver Reef’s logo and the most important informations, which is located on below left is not being seen directly. Therefore, the overall design information for Silver Reef’s advertisement was too overwhelming, with the wrong alignment of informations and wrong placement of info, my suggestion for a better ads design is to put the logo and other information (like address and number) on the top centre, leaving the background the same, hence, resizing the map into a circular/ sphere map and place it in the middle. After that, other graphic information can be place on the side (with the same “arrowing” effect, pointing out from the location) with text suggesting what kind of services they provide.  Lastly, the slogan “make us your next stop” can be under the graphics information on the centre, encouraging people to visit them. This placement and alignment will provide a more organized and clearer information and services Silver Reef is providing. It also gives more sense to guide the human eyes in receiving the information from the ads.

The News North Information Notice

The News North notice provides very informational content, but lack of informative design that can guide human’s eyes when reading the notice. From the title to the end of the list content (above the image) works as an informative design, but the image below creates an imbalance of the design because there are a lot of context on top, while the image below is small. However, there are ways to fix the design of this notice into a more informative design. As it is mentioned, this is a green bin notice for the apartment residents, the title size of this notice should be bigger, and to make it more noticeable, a background container in green color (indicating it is a recycling notice) or red (getting residents attention immediately) should be added, the color of the text should be white or black so that the color design is in contrast. The first paragraph should stay the same, while the image of NO PLASTIC BAGS should be put under it on the left and add another two images of composing and green bins on the centre and right (aligning with each other in a row) to create a balance design of the notice. The informative content should stay the same, however, the title “What Goes In A Green Bin?” should be bold and highlight the word green bin to get residents’ attention. Next, the last paragraph should highlight the words “NO PLASTIC BAGS” and “GARBAGE” in red, so that residents can receive the main informations of the notice directly. Lastly, the email and contact should be align in one row. 

Surrey Tran’s Women Consciousness Raising and Resource Sharing Group Event

This informative design for Surrey Tran’s Women Consciousness Raising and Resource Sharing Group somehow works in delivering their message, somehow not because of the small text in the content and the font for the title of the event can be change to a font that is more attractable like Arial (just to attract people to read their event). The overall design of this poster works better if the font size in the content is bigger and the important info like the date and venue should not only be bold but also highlighted. The design below works well because it has a slogan and an image, they create a balance in the poster. Not only that, the colors choice in this poster also match with each other, creating a calm environment. First of all, the title of this event needs to be change to a bigger and attractable font, after that the text size in the content can be bigger. However, for the second paragraph, the date and venue should be more highlighted, such as aligning them on the next two row, for instance :

Venue: XXX

Date: XXX

Lastly, the third paragraph where the words “topics to be discussed of group should be align on the same row, then showing a list of topic will be better for the design. 

Sprott Shaw College Advertisement

The advertisement from Sprott Shaw College shows a simple informative design which advertise their career service just in a few words. The overall of this informative design is successful because of its simplicity design and color used in this advertisement. It has a balance amount of text and image in one content, its alignment provides a guide to the human’s eyes. However, it can be create better if the background have some images that relate to their services. For instance, a picture of the college can be embedded as the background with a low opacity, so that it will not cover the logo or the content. In addition, I think the image at below is unnecessary, it can be resize to a smaller image and put at the below left along with a slogan if they have, while the phone number and website can be place on top of it in a smaller size text. In general, this informative design is simple and direct but the use of the color in this design are very plain (suits education services) but it can be improve, by adding a background image so that the content itself will not look plain and boring. 

Oakridge Vancouver Advertisement

Oakridge Vancouver Advertisement provides an abstract informative design due to the “dino-egg” shaped image and the lines around the frame. The overall design and color gives a modern and futuristic look of the new build apartments in Oakridge, which attracts apartment buyers who are seeking for a modern looking apartment. The line around the frame acts as a guide to the human eyes, where it brings focus to the modern apartments view and the content or message above. However, the message on the upper right should be re-size as this is a printed advertisement located on skytrain stations, and it should clearly be seen or advertise to people. Another suggestion would be the change of color for the lines around the frames, it should be a color that is more appealing to the eyes, such as the color of yellow or green. Lastly, the title of this ads should be align neatly, the second row “to the” should neatly align with the word “welcome” at the first row and “living” on the third. The overall of this design is successful in a way that it shows a modernistic and futuristic design, but it can be improve with the suggestion above.

[jessxiing96-blog]

IAT 235: Idea Journal Submission #1

DHL Website 

link : http://www.dhl.com/en.html

The main page of DHL website is lack of design due to its padding and margin. The color of this website is good because it matches the company and service, however, the padding of the page itself is smaller than the actual site. In this case, it can be fix by changing the padding to the actual size of the site, to create a full site and cancel out the blank space on this site. Other than that, I find the logo is a little bit small, it can be bigger or more obvious, like centring it and attached to the bar when the page is being scroll. The texts in this page can be fix by increasing the size, so that user can see them clearer, the margins and space between text can also be fix, so that user can easily click on the links they want; there are more space to direct and click on buttons. 

Public Bank Website 

link : https://www.pbebank.com/

The main page of Public Bank website is quite confusing due to its arrangement of bars and information. It does not provide a clear informative design because the bars are not organize properly. This can be improve by arranging the main bars like “about us”, “contact us”, “login” on the left side (beside or under the logo) because users tend to read from left, and their eyes tend to guide them to the logo of the company. By putting the main bars near the logo, it is easier to guide user to the informations of this website. Not only that, other bars like “promotions” or “products” can also be put on the top, in a line with the main bars. This design arrangement provides a more clear and direct understandings/ informations of the website. For the additional graphics, it should be stretch across the page. Rather than putting the needs and solution menu on the right, it can be either under of above the graphic, to balance the amount of information or content of the site. However, I like the pull-down menu for the different branch of the bank beside the logo, but the button can be whit or transparent instead of blue.

 Leaner.org Website 

link: https://www.learner.org/exhibits/garbage/solidwaste.html

This website provides many useful information but with a plain design. At first glance, it is not attractive, it is simple but lack of informative design. We can see a clear title at above the page, some informative buttons on the left, the content in the middle, but plenty of blank spaces. The use of color and font can be change, color helps to make a text stands out. For instance, the color of the text title of each section can be change to a more brighter color as the background is a bit dull, this way it helps user to quickly see the title of each section. In other ways, the color of the background can be change to a white background, leaving the background of the container where it hold all the content dull, and make the title or important text stands out by changing the color or size of it to catch the attention of users.

Singapore Government Website 

link : https://www.gov.sg/

In this Singapore government website, it has a few informative design error where the size of the texts and bars arrangement can be improve. On the upper right, there are small bars of "MESSAGE US", "SUBSCRIBE", "CONTACT", "FEEDBACK", "SITEMAP", "FAQ". These bar can be enlarge and put in an obvious part of the website so that user can see and click them right away. Not only that, the search bar on the upper right can be bigger and place in the same line of the main bars, this way, the looks of the website are more organized and clean. The logo of the website can also be bigger, to eliminate the blank space under it. Another thing is when the page is scrolled down, there is a small text button "back to the top" located at the below left. This button should be bigger or more obvious because its purpose is to guide user back to the top of the main page. Overall, the main bars are informative, just the lack of organize in design that is much needed to improve.

KTV Party World Website 

link : https://www.partyworldktv.com.sg/

This Chinese Karaoke website has some poor informative design. First of all, the logo of this company is small and unclear. In order to make the logo more obvious, insert a plain colored background across the heading of the website, under the logo and bars. However, the menu bars of the website can be put together with the logo (like DHL and Singapore Government website), just to align them neatly so that user can easily understand the website. Other than that, the background of the website itself can be change to a more clean looking background so that the content in the middle will not block the information or graphic of the background. The font and text size should be adjust to clarify their services. Another suggestion is that they should include their social medias icon so that users are able to follow their latest news, in addition, a gallery of their services should also be include under the menu bars, so that users have the idea of what kind of website or services they are providing.