Interactive Design Exercises
Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media
GCD 60904 | Interactive Design
Week 1 — Week 8
Hello to Interactive Design!
After the introductory class to the internet world where we are accessing multiple websites daily, including social media and other platforms. centuries till now on the font.
These are the jump links to each part of this portfolio
Lecture summary
Mr Shamsul (Week 1):
"Beware of clutters in the website design and refrain from bombarding the page with details and texts.
White spaces are important in the website design, as they allow comfort in one's eyes."
Lecture slide 1
What is usability?
An interface with high usability ensures users first encounter can find their way easily enough to achieve objectives without depending on expert knowledge.
In short, a high usability interface guides users through its easiest route to achieve the site's goal.
Usability in designing products for user satisfaction
- Consistency
- Simplicity
- Visibility
- Feedback
- Error prevention
■ Consistency
Consistency ensures that the website looks coherent and works harmoniously across all the different elements, such as headers, footers, sidebars and navigation bars.
It is a key for the patterns to be recognized and learned by users. Confusion and frustration occur when similar-looking things don't provide a similar output.
Website examples:
Apple
Sime Darby
■ Simplicity
Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, making the interface as obvious as possible with symbols and terminology, thus making it difficult to make mistakes.
This principle is incorporated in designs to help users achieve their goals faster and more efficiently when using a simple interface.
■ Visibility
Visibility in an interface means how accessible an element is depending on how visible the element is.
■ Feedback
Feedback communicates the results or output of any interaction made by users, making it both visible and understandable. It is used to signal the users whether they completed or failed to perform the task.
For example, the buttons with hover animations give users feedback that this element can be interacted, with or the status box when users finish an action in the interface.
■ Error Prevention
Error prevention is important, as we humans can make mistakes sometimes. Thus, this involves alerting the users when they're making an error, intending to make it easy for them to do whatever it is they are doing without making a mistake.
For example, the confirmation box on any sensitive actions such as information submission and deletion helps prevent unintentional actions by users.
Instructions
Mr Shamsul Hamimi, my module coordinator and lecturer for this semester, provided us with the necessary files including the module information, and reading elements to give us a headstart on this module.
MIB - Module Information Booklet
Exercises/ HTML Document Development & HTML, CSS Document Development, CSS Layout Model
The class must carry out exercises to show competencies in understanding web development through prototyping and development processes.
Deadline: Week 8
The exercises include:
- Web analysis (Week 2)
Analysing an existing website and identifying areas of improvement to help develop critical thinking skills and gain insights into web design best practices. - Replicate a website (Week 3)
Replicating an existing website to gain a better understanding of its structure to aim to develop design skills using software (Photoshop, Illustrator) - HTML and CSS Document Development (Week 8)
- CSS Layout (Week 8)
Learning goals:
This module helps in improving technical and digital media competencies, that is to demonstrate creative use of software, and effective use of digital media skills to promote or communicate design concepts or solutions.
Work Process
Exercise — Website Analysis
Website No. 1
What is this webpage about?
According to the CSS Winner website, this meticulously crafted website is for a creative studio based in Tokyo, Japan under an interactive creative team specializing in the fusion of technologies, filming, lighting and sounds. This page documents their amazing works and projects commissioned by other major industries in Japan to thrive in improving the liveable environment of cityscapes.
I believe this website did a spectacular job of communicating the purpose of the page without the description from the CSS Winner website. It successfully presents them are a group of creative professionals with multiple past projects for the viewers to refer to or a so-called portfolio.
 |
| Fig 3.1.1 A webpage for a Tokyo-based creative studio |
Design style: Consistency
First, on the main webpage, I can observe the minimalist design style of the whole page. With only minimal text and graphics, it created a sense of a slick and clean browsing experience. Thus, this level of design introduces eye comfort to the viewers.
The fonts used in the website introduced a modern and professional feel, while the colour choice of the webpage creates a sense of premium and the animated images provide evidence to the viewers that the corporation cared about the high-quality works in designs. Those visual elements intertwine and complement each other to better communicate with the viewers about them.
San-serif fonts
Simplicity, versatility and improved legibility for appealing purposes across various industries.
Colour choices
Warm white and bold black colours, thus convey a sense of professionalism and seriousness.
Imagery
Interactive 3D slideshow presentation to the viewers for an immersive browsing environment.
 |
| Fig 3.1.2 Dragable slideshows for different projects |
In terms of creativity, web developers and UI designers did a great job challenging the 2D webpage environment by making the whole layout 2.5D, thus more interactive and compelling to the viewers.
Layout: Visibility
The overall layout of the webpage remains clear and simple to direct the viewers' attention to the main focus and the browsing flow. Hierarchy can be seen applied in the whole design to convey the purpose/meaning of this website that they are a creative group that makes impacts.
Content clutter: Simplicity
With a simple direction in mind, the developers aim to mainly use graphics and exceptional animations to guide the viewers intuitively on their website with some texts to aid comprehension of the webpage layout. For example, the view projects button under the animated pictures gives a clear direction for the viewers to access the webpage.
 |
| Fig 3.1.3 "VIEW PROJECTS" button for browsing direction |
A suitable amount of paragraphs are used in each individual project description page combined with the graphics (images and videos) to create balance for the ease of browsing.
 |
| Fig 3.1.4 Graphics and text paragraphs on the website |
Functionality:
For the viewers' aesthetic preference, light and dark mode webpage styles are added and placed under the page to allow viewers to change the colour scheme they are comfortable with. The button menu and navigation of the website feel smooth due to the hover animations and the graphic guidance of the arrow on the cursor.
 |
| Fig 3.1.5 Cursor arrow direction guide |
Dark mode black header
Light mode white header 
Quality & Content relevance:
This portfolio website is well-built, with each section introducing the creative design organization (Aircord) in detail on what service they can provide for the potential clients. Even though there are chances given for the potential clients to contact them for the service such as email, and phone numbers, the contact info sections are more hidden on the webpage.
Compatibility:
The web developers consider making the website design responsive to different viewing media from large PC screens to small mobile phone screens.
Considering that mobile phones have limited performance and controls compared to the PC, some animations such as the cursor graphics are removed to increase the performance of the website when viewed on mobile devices.
Final verdict (Aircord)
Strengths:
The whole animation and the design are interactive, making the viewers feel more immersive and attached to the page. The page is responsive on each interaction with smooth animations (gliding transitions to different page sections) for improving the browsing experience. The clear content allows the user to be able to grab hold of the necessary organization's information. The simple and consistent design language in the website aids in visual communication with the viewers.
Weaknesses:
This website may require large GPU resources to ensure a smooth animation and may strain the performance of the low-end PC and mobile devices.
 |
| Large memory, CPU and GPU resources consumed |
Website No. 2
What is this webpage about?
According to the CSS Winner website, this website is for a design studio located in Singapore. This page documents the ultimate potential they can bring to the table in web development, UI/UX design and branding.
I believe this website did a nice job of communicating the purpose of the page without the description from the CSS Winner website. It definitely introduces what the design studio can provide in detail and their available plans for potential clients who are looking for design services.
 |
| Fig 3.2.1 Upsense™ main webpage |
Design style:
Throughout the webpages, I observed they are going for the minimalist and informative style of design to communicate with viewers more in detail about their service and convince us to do business with them.
 |
| Fig 3.2.2 Informative design style |
A complicated mixture of serif and san serif fonts:
I think the use of serif and san serif fonts in this website makes it a bit visually complicated, as there are different uses of the two fonts in various sections such as the headers and paragraphs, making the whole website look inconsistent.
 |
| Fig 3.2.3 Inconsistent use of fonts |
As seen from the image, the inconsistent usage of fonts for different purposes on the major headings, minor headings and paragraphs makes the page less visually pleasing.
Colour choices: The colour choices of the website are good, with a subtle colour that creates contrast in the website to allow a smoother browsing experience.
 |
| Fig 3.2.4 Subtle colour choices |
Imagery: Their website is supported by graphics (images and videos) that are related to the content they are conveying.
 |
| Fig 3.2.5 Supporting images |
Layout: Visibility
The overall layout of the webpage remains simple, with each element such as the navigation menu and the contents clearly divided and creating just enough negative spaces for the viewers' browsing comfort.
Content clutter:
Compared to the previously studied website, this website may make people feel a bit more cluttered in terms of graphics and text, making the viewers feel more bombarded with the information. Thus, a person may spend more time going through the amount of information contained in each page.
 |
| Fig 3.2.6 Mild clutter contents |
Functionality:
Each section and button are made to direct the viewers to the specific page in a simple move without going through multiple menus to navigate.
 |
| Fig 3.2.7 Navigations and buttons for business |
Quality & Content relevance:
This business website is made with care, with multiple sections introducing the viewers to different parts of the works and services the design studio provides in detail. Sufficient opportunities are given for the potential clients to contact them for the service such as email, and phone numbers.
Compatibility
The web developers are considerate of making the website design responsive to different viewing media from large PC screens to small mobile phone screens.
The multiple graphics on the website are aligned according to different devices to best suit the viewing experience across various platforms.
Final verdict
Strengths:
This website is more informative towards the viewers, making the potential clients more informed about their services they can provide with numerous proof for assurance. Thus, the customers may feel safe and comfortable to contact them for the best service quality they can get from the design studio.
Weakness:
The subpages in the website feel cramped and bombarded with information where viewers may find themselves unable to focus on what elements to read first.
Exercise — Replicate websites
In this exercise, Mr Shamsul gave us the task of replicating the elements in the selected websites to aid us in gaining a better understanding of the studied websites' structures.
The websites I've chosen to study and replicate are:
For the Morgan Stanley website, I scrutinized the structures, layouts, and visual design of the website before attempting to recreate a website replica of the original page.
I've found that some of the fonts used in the website are paid fonts, thus rendering me turning to other typefaces that closely resemble the original fonts.
Some of the replacement images used are cropped and photoshopped to achieve the desired visual outcomes for the image to look as similar as possible to the original website.
The Original - Morgan Stanley
The Replica - Morgan Stanley
Morgan Stanley website replica on 11/5/2024
The next website I've studied and replicated is:
The same process as before, I carefully look through and inspect the website for the fonts information. Again, even though there's only a single font family used on this website, it is still a paid font family. Thus, I can only replace the original font "Tomato Grotesk" with Helvetica fonts as it looks quite similar to the original website.
The Original - Bandit Running
The Replica - Bandit Running
Bandit Running website on 12/5/2024
HTML and CSS Document Development
Update 1: Include content with different sizes of headings and a bulleted list using <h1>..., <ol>, <li>
Update 2: Included a schedule form in the HTML document using <table>
Update 3: Include a button for the blog and comment box to email
Exercise 3 — Creating a Recipe Card
In this exercise, I was tasked to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
I am to choose a recipe from the website 101cookbooks
This exercise aims to test the application of HTML and CSS knowledge that I’ve learned throughout the week.
 |
| HTML and CSS icon image by Brandon Morelli on Codeburst |
Selecting and Data compiling
The crucial part of making the website page is understanding what content I will produce. Hence, I hastily selected a recipe that piqued my interest, where the dish is called: Penne Alla Vodka
In this first stage of progression, I gathered all the data I needed to include in my recipe card.
 |
| Penne alla Vodka website image on 101 Cookbooks |
Those data included:
- The recipe name
- The dish’s description
- The ingredients
- The step-by-step instructions
- Additional info such as serving size, total time for this dish
Prototype web design
Proceeding to the next stage, which is to breathe life into my website recipe card, I decided to use the prototyping software, Figma to assist me in the easier visualization and pre-coding stage. Furthermore, this intuitive app also aids me in the coding process later in the blog. (Thank you Figma.)
 |
| Website design in Figma — 7 June 2024 |
Minding the visual design principles, I emphasize the hierarchy system to create various layerings for different info in my recipe card to guide the viewers and enhance the reading flow.
The reason that I’ve used a contrast and minimalist design style in my website design, is that in my opinion (I believe others will agree) the recipe card needs to be kept simple with minimal visual distractions while providing necessary visual graphics for easier comprehension. Henceforth, this is why I only included a picture of the dish and simple icons in the design.
In my design, the page is separated into 3 main sections: The main description, ingredients and instructions. It is intuitive to keep the important content in the recipe card the sole purpose is to let the viewers understand and follow the instructions to cook the dish themselves.
3 main sections of the website design
The ingredients info is further simplified to only show the essential information about the type of ingredients and the amount required for dishes.
 |
| Ingredients panel |
HTML and CSS Coding
Progressing onwards after I finalized my design, I began to do the front-end developer task, making the design available on online public websites by using HTML and CSS language.
 |
| HTML coding — 7 June 2024 |
Following the instructions by Mr Shamsul, I separate the CSS code entirety from the HTML file, leaving me with two different coding text documents to manage. I can observe that it’s quite more manageable to separate the HTML and CSS out, where I can know what I’m currently handling.
Originally I tended to use the normal basic coding such as <h1>, <h2>, <p> to control the visual elements on my website. I understand that I can already achieve the desired outcome with the basic codings, but I would like to have more control over each individual element. Thus, I attempted to use the <div class> attributes to assign my own unique ID to the element.
After hours of tweaking the CSS codings to execute good-looking element arrangements, I called it a day and added a finishing touch, which is to upload my index.html and style.css files on Netlify so that my design will go live and be accessible to the others.
Lecturer's Feedback
Week 2:
Yet to receive feedback from Mr Shamsul
My reflections
Exercise - Website Analysis
For the first exercise, I'm provided with opportunities to interact with and experience the existing websites on their UI/UX design aspects and study the websites to gain insights into the professionals' work.
Through this exercise, I'm able to observe various design perspectives and be impressed by the works of others, imagining how many possible outcomes to produce a successful website design to visually communicate with the public.
Exercise - Replicate website
Comments
Post a Comment