INTERACTIVE DESIGN TASK I: Web Analysis + web Replication + Recipe Card

 MODULE GCD60904: INTERACTIVE DESIGN

23 April 2024 - 01 May 2024 : Week 1 - Week 3

Bachelor of Design (Hon) in Creative Media

Task I / Exercises: Web Analysis + Web Replication

---

MODULE INSTRUCTION:

“APR - JUL 2024: GCD 60904 / ADVANCED TYPOGRAPHY MODULE INFORMATION BOOKLET”

Task I / Exercises: Web Analysis + Web Replication (Week 1 - 3)

Web Analysis: Students within this cohort are expected to select two different websites using the material provided. Following their selection, students must meticulously review each site; considering its design (colour, typography), layout, content (Text-types, imagery), and functionality (navigation, forms, and interactive elements). Identify the website's strengths as well as their weaknesses; how does this impact the user experience. Finally, students must submit a report summarising their findings and recommendations for changes. This report should not be less than 500 words in total (factoring in both websites.)

In depth: Students should consider the purpose and goals of the website; what is the type of content presented on the site and is it effectively communicated to its audience. It may prove useful to determine the targeted demographic. Evaluate the Visual Designs and Layout of the website; referencing its use of colour, Typography, imagery etc. Students must consider the Functionality and usability of the website; including the navigation, forms, interactive elements, etc. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organisation. Finally, consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

Web Replication: Students within the cohort are expected to find and replicate the appearance and structuring of an existing website in order to gain insight and have a better understanding of how they’re structured. In this exercise, students will need to develop their designs using a digital software such as Adobe Illustrator; demonstrating their ability to organise segments and visually replicate said website. Replication serves as one of the more effective methods to gain insights into web design best practices.

Recipe Card: Students within the cohort are expected to take an existing recipe sourced from the internet and arrange its content to fit a html website. Following their collection and  arrangement, students are then expected to use CSS in order to improve the visual quality of their site - making it look more presentable. Students should use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

---

EXERCISES I, II, III: Web Analysis + Web replication + Recipe Card

WEEK 1: Website Analysis

Interactive Design as a module references the concept of providing select pieces of information in a creative & engaging format. Mainly focusing on Websites & their development + Design, Interactive Design provides additional methods of providing information to intended audiences using the receptive and intuitive medium of website design. For this first week’s assignment, student’s are to take this concept and explore it through referencing two existing websites. In analysing a series of websites, students can become more familiar with the expectations of Website Design and its functionality. This way, when we need to develop our own websites in future; we’ll have a reference as to what an effective website looks like and what mistakes we should avoid.

“Presentation of Usability Designing Products for User Satisfaction”

WEBSITE REPORT [60]

For this first exercise, I would begin analysing two websites that had previously been featured on awwwards.com; a professional site which specialises in promoting aesthetically pleasing and functionally sound websites. By referencing this website, I would be able to see what professional designers may consider to be a more effective website - being supported by individuals with well informed opinions.

WEBSITE I: UPSENSE™ STUDIO SINGAPORE (LINK HERE) [543]

Upsense Studio Singapore is a creatively developed Interactive Website, designed to promote the company’s parent Digital Design Agency who specialises in “branding, web design and Product designing.” Produced by web-author Sandy Galabada, it is clear that their intention for this website is to advertise their company and its talents by providing audiences with examples of their previous works, clientele and accomplished artists. The website is designed to appeal to businesses which are looking to develop an online page to host a storefront, promote an event or to spread information about their efforts. Additionally, the company offers a subscription-based service which is targeted towards website developers - providing them with insights to guide their creative ventures.

Website’s Strengths: All important assets such as texts, images, web-buttons and external links are organised with clear distinctions between categories/sections. This is especially important for this website as they provide multiple, distinct services which are clearly separated and easy to read. Additionally, all the website’s information can be found on the home-page, allowing readers to be informed of other pages and access them with one-click. 

Assets such as the Header-Bar have been used effectively; following the reader down the pages, allowing it to be used without needing to scroll back to the top to change pages. Other assets such as the website’s buttons have also been designed well. Not only are the buttons clearly marked and remain consistent in their design, but they also provide clear visual feedback to the reader when hovering over them. Continuing with the visual themes of the page, this website’s theme is uniquely designed but still remains un-intrusive, never distracting the viewer with its design choices. In an interesting case, the website mainly uses neutral colours such as whites, greys and blacks but each section features a vibrant colour: colour-coding.

Website’s Weaknesses: The first weakness can be observed when loading the website; it is resource intensive with the average website falling between 100-150 megabytes of memory while this page occasionally reaches as high as 300 megabytes. This potentially could be caused by the amount of animated assets found on each page. Some animated assets feel like a hindrance to the page such as the mouse trail which block texts in some cases. 

The “animated reveal” will sometimes appear too slow when looking at larger sections, leading to information being missed or potentially completely skipped. Although the inclusion of embedded videos may be useful in promoting aspects of the company, a majority of them are compressed with a reduced frame rate & quality which clashes with the smooth scrolling of the page; difficult to watch. Finally, some animated graphics which have been included have a tendency to stutter when hovering on buttons.

Website’s Mild Inclusions: Interestingly, the website features a loading screen which appears when changing pages. Although its inclusion is unnecessary, it suggests that previous users have been unsure if the page is loading or frozen. Additionally, the website’s use of Typography is striking. All fonts used are still readable but the font switches when denoting headers, sub-headers, subtitles. The only questionable design choice is that sometimes the font switches mid-sentence which can look confusing.

Overall, the website is very creatively designed while still being able to inform the reader about its intended goal.

WEBSITE II: UPSENSE™ STUDIO SINGAPORE (LINK HERE) [463]

SCRIB3 is a creatively developed Interactive Website, designed to promote their personal Crypto Marketing Studio company which specialises in “Graphic Design, analytics & growth, public relations.” Produced by studio freight, their intention for the website is to advertise their company in relation to the development of Crypto-based developments and their expertise in advertising. The website is designed to appeal to businesses which are looking to either begin or expand into crypto-space markets.

Website’s Strengths: Similar to the last observed case, all important assets such as texts, images, web-buttons and external links are organised with clear distinctions being made between categories/sections. Unlike the other site however, this organisation is able to benefit specialised sites needing to condense their information into one page. (being the home page.) Another aspect of design which appears to be important is visual feedback for the audience whenever interacting with the buttons - either shifting or changing colour to suggest where the reader is hovering. Additionally, the website’s header features alternate forms of navigation in the form of jumplinks 

Thematically, the website’s layout is very functional while possessing its own creative vision. The background is black with washed-pink serving as the dual-tone; allowing text and images to be shown without straining the reader's eyes. Similar to the previous site as well, a third colour appears on other pages, suggesting another colour-coding scheme to keep viewers informed of which page they are on. Interestingly, this website also features a custom typeface which is also still readable which is important in typographical design.

Website’s Weaknesses: Although the theming of the website is unique; it is not perfect and can be counter-intuitive in practice. In an attempt to keep pictures and other images feeling cohesive with the page's design; all photos use a half-tone effect which can make it difficult to accurately visualise the image. Each image is further distorted by the mouse-trail effect which attempts to upscale and re-render the image. Returning to the concept of colour-coding in the website, some colour combinations (such as deep blue & black) are ineffective, making it difficult for colour-blind individuals to read. In the form of included animatic elements: although they are very unique and interesting to view, there is an effect in which they speed up in relation to scrolling. This would not be too much of a problem if it wasn’t for these animatics also being connected to the conveyor sections which sometimes prevents readers from viewing content.

Website’s Mild Inclusions: Interestingly, the website possesses a scrolling-assist feature in which it feels ‘floaty’ (the speed is not linear with the scroll pad - starting slow then speeding up and will continue to scroll after the scroll pad is not touched.) This could be an annoying feature for some but is also something which aids careful reading.

TOTAL WORD COUNT: 1066

Task II / Exercises: Website Replication (Week 3 - 4) 

Continuing with our studies of currently existing websites; this week, the cohort is expected to replicate the layout of two websites in order to develop an intuition into how websites should be arranged. While the practice could be seen as redundant, considering a majority have been on websites for a good portion of our lives and there has been somewhat of establishment of a universal design; this exercise still proves to be useful as it forces active learning. While working, it is important to consider why websites are designed the way they are. 

“Presentation of Understanding Website Structure”

WEBSITE I: BANDIT™ Athletic Sportswear 

“Website Recreation I - BANDIT (Original site left, recreation right)”

BANDIT is a marketing website which is designed to promote a specific style of clothing to physically active people. When looking into the websites’ design, I was able to organise it into the three main sections: Header, Body & footer due to how the website was designed.

The Website’s header features a small Navigation bar which sits atop a larger banner advertisement of the most recent news. Audiences are drawn to looking through the bar as the Company’s branding offsets a balanced design; creating visual interest. Additionally, the header is also populated with promotions and a call-to-action button (membership) which is constantly reinforced in later stages.

For the body of the site, it features a carousel of currently available clothing items which is neatly organised by the selection menu attached to the side. Interestingly, this portion of the website features prominent empty space which is used to make audiences focus either on the clothing or the membership. In the carousel, Red Font also appears which highly contrasts with the themes establishing black & white, drawing the audience in to its message - reinforcing the membership. Finally, the membership banner itself is made to contrast the white of the website; making it eye-catching and suggest the call to action, JOIN TODAY.

With the Footer, The website displays its required links and connections. The sizing of the buttons (email, sign me up) are purposely made more prominent as it plays into the call-to-action while the ‘legal speak’ is small - a design which is universally accepted. Interestingly, the website’s accessibility features are put along the bottom in smaller text which would not be helpful to those who may require it.

WEBSITE II: THE OCEAN HEALTH INDEX 

“Website Recreation I - BANDIT (Original site left, recreation right)”

THE OCEAN HEALTH INDEX is most likely a governmentally operated website which tracks the condition and damaging effects towards the ocean. Once again, the website is clearly divided into three distinct sections which have been separate to improve user experience.

The header is populated by a pronounced Navigation Bar which outlines both the needs and goals of the website - informing audiences such as students or involved communities to find what information they need as quickly as possible. Also within the header lies two windows which serve as the website’s call-to-action, suggesting how said audience can become involved in the data collected for the website. An interesting design choice is the use of colour within the header - only one of the two windows has been designed to be white which makes sense as it promotes what the website is about and thus, would want to engage the audience first. Additionally, the ‘+’ in the header is the only thing to use the colour orange; while still being out of the way, it highlights this section's importance.

For the body, it is designed in a card-layout way which has been used to promote news relating to the ocean and its health index. This is often common for news-related articles as it condenses large articles into a card which explains the basic information quickly to the audience; explaining a full catalogue of articles in seconds. Although I have not seen all the articles, it is still important to consider that a majority of their cards in this section are brighter colours to contrast with the dark-ocean background behind.

Finally, the footer is surprisingly very simple in its design which is not necessarily a bad thing. It is clearly separated from the previous section due to it being a bright colour and it is populated with the websites socials and Term & services. 

Task III / Exercises: Recipe Card (Week 7 - 8)

Recipe Card: During these last two weeks, the lecturer has been introducing the cohort to a new element of interactive design; Cascading Style Sheets (CSS.) In essence, this additional element is used in conjunction with HTML and is utilised to produce a more visually appealing website using a series of commands and selectors. In our exploration, it was found that CSS can be included into a website’s design using two methods: Baked-in coding or the addition of a .CSS file which is read alongside the .HTML File. In the first instance, CSS can be baked directly into the HTML code with the introduction of the “<style></style>” brackets where the lines found within the body can be manipulated using selectors. In the second instance, a second document can be created alongside the HTML file and is written in the same style as “<style></style>” however; this document  does not require the ‘style’ tags and should be <hrefs> in the original HTML file. This second method is more preferable as it keeps function and design separate and prevents instances in which a minor dismantles the entire page.

“Presentation of Application of HTML & CSS”

In order to showcase our understanding and creative application of the two elements, students within the cohort were required to search the internet for a single Recipe in order to develop a website card; displaying what is being made, the ingredients required, steps needed to complete etc. using both HTML and CSS. For this exercise, it was highly recommended to create an attached CSS file rather than a baked-in version to better determine the students' understanding. Furthermore, students are expected to use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card. In my instance, it is important to note that I was not present for the explanation of implementing CSS into the website due to a head injury I had obtained in week 6 where we discussed CSS for the first time.

PDF File HC

“Use of HTML and CSS for Exercise III”

For this exercise, I decided to source the recipe for “Yellow Sponge Cake with Chocolate Frosting” as the Recipe I would format using HTML. In the case of HTML, a majority of the work comes from arranging the text into the correct text formats and ensuring that all parts are segmented correctly in order to improve readability. Additionally, HTML needs to be used to format any images used in the website in order to prevent large gaps from being formed between areas of texts. When it came to developing code for HTML, I tried to organise all parts using progressive indents, making it easier to define which parts may need to be edited while also using the addition of extra lines to further separate sections. However, looking back on my HTML Coding, a major issue I noticed was that I did not utilise the “<div></div>” (I had simply forgotten) to create spaces between paragraphs and other bodies of texts, leading to the text being pressed together. However, in an attempt to correct it, I had used CSS in order to create space between texts which works but is not an optimal solution which I will need to correct in future.

In the case of CSS, I was not too confident with its overall presentation. I was able to utilise its styling option to alter the overall presentation of the website however, I found difficulty using “.id selectors” as in some instances they would not work for some particular reason. Another issue I tried to resolve was when formatting the page when a smaller resolution is being used. The main difficulty came from the use of images within the document as whenever the resolution would change, they would upscale and break-up the text into a weird format. Currently, I don’t believe we will have learnt how to manage this yet however, we may be able to in future.

The Final site can be viewed here: LINK