Embedded Files
24.04.2024 - 00.00.2024 (WEEK 1-0)
Koh Xin Yee / 0363349 / Bachelor of Interactive Spatial Design (Hons)
Interactive Design
Exercises
lectures:
lectures:
Principles of usability:
Principles of usability:
Consistency
Simplicity
Visibility
Feedback
Error Prevention
Website usability: https://skmm.gov.my/en/home (for references)
Mental Models: what the user believes about the system (web, application, or other kind of product), help the user predict how a system will work. users know how to operate the website with the past experience they have by operating websites with similiar structure.
3 key elements of website: header, body, footer
anatomy of web page: 14 Basic Elements - https://blog.tubikstudio.com/anatomy-of-web-page/
web content management - https://wordpress.com/
Week 1 exercise 1: WEB ANALYSIS
Week 1 exercise 1: WEB ANALYSIS
To do:
To do:
Choose 2 websites from the link given and review the website, taking note of its design, layout, content, and functionality
Identify the strengths and weaknesses of the website, and consider how they impact the user experience
Write a brief report summarizing your findings and recommendations.
Links:
Process:
Process:
For the first week we are to do some analyse regarding some o the award winning websites. I first screened through the websites in the given link, and clicked into some which the cover page attracts my attention. Of course, as they're all award winning websites, the designs are fabulous, and most of them have their unique style. Then, from all of the websites I clicked into, I find a few that I'm interested in the most to do my analysis.
Website 1: Synthetic Humans
Website 1: Synthetic Humans
The first website I found is called "Synthetic Humans", created by "Fantasy" from the US. Overall, the design of the website is really cool, with the theme of artificial intelligence
Design
Design
the website design style is modern futuristic, which shows a lot of AI 3D models of humans, but without facial expressions, giving the "synthetic" vibes
the colour tone is light and cold, with choices of neon(?) colours, such as light pink, blue and white
typography are simple and easy to read
the website uses high quality visuals as the background, the assets are in 3D, when I scroll through with my mouse, the visuals will move or turn around to present different content
Layout
Layout
the website has a very simple layout, a large visual background, some key words in the center, and different navigation buttons at the four corners
navigation is quite easy, as the main function is the changing content and background will scrolling
Content
Content
the content is very limited in this website
they use straightforward key points on every screen to introduce about the products and service provided, and other navigation buttons will lead the users to key in their details or to their main website for more info
Funtionality
Funtionality
the website has clear call-to-action buttons, although they are not as large as the wordings in the middle, but the animations and the colour contrast of the buttons make them obvious, guiding users to take the next step
the transition between the content pages are engaging and the interaction is interesting
Strengths
Strengths
The modern design and engaging content contribute to a pleasant and immersive user experience
scrolling navigation to see the screen altering and showing different content is quite interesting at first
the brief and concise content keeps the interface from being over-compact, as overall, I think this website is only to catch the attention of audience, and not giving any extra or detail information, so the simplicity and visibility is definitely a bonus mark
the website provides excellent hovering effects, cool animations and transitions, enhancing the overall interaction, it also includes small interactions with the mouse, which the background visual will move slightly, following the movements of the cursor
Weaknesses
Weaknesses
The website is somehow a little unresponsive or slow in responds on my laptop, which causes poor user experience
the navigation is quite troublesome as I need to scroll my mouse a lot in order to see the next screen
if the design allows the user to jump to the next screen with swift and smooth auto transition with just scrolling one time (instead of manually scrolling a lot), I think it will be better
the loading screen is a little too long, which may cause the audience to loose patience while waiting to enter the website
Website 2: KidSuper World
Website 2: KidSuper World
Unlike the first website introducing cold and synthetic artificial inteligence, the second website is super lovely! The website name is "KidSuper World", made by basement studio in Argentina, and it seems to be an online store selling products.
Design
Design
the website is using an artistic and playful style, watercolour themed, and it's really interesting and visually appealing
after the page is successfully loaded, you can use the cursor to move around the screen to slowly reveal the watercolour art on the background
colourful and eye-catching visuals
typography used is simple but font size a little small
Layout
Layout
layout is simple yet interesting, as it contains a lot of interactive elements
the layout and structure may not always be intuitive for first-time visitors, as the navigations are not clear enough
the pages are rich in elements but may feel cluttered due to the abundance of visuals and design elements
Content
Content
the content is lively and consistent with the brand's playful aesthetic
the use of high-quality watercolour animations keeps the content fresh and engaging
choice of background music is nice
hierarchy of content not entirely clear, making navigation more challenging
Funtionality
Funtionality
the interactive elements works, but responds slowly
the shop section seems well-integrated and offers a variety of products, enhancing the e-commerce aspect
Strengths
Strengths
unique and artistic design creates a memorable experience that aligns with the brand's identity
cool thing that the user can interact with the products, by dragging it with the cursor to observe it in different angles, change the orientation or even open and close the bag, enhancing the user experience
the website provides chance for the users to select a background music, giving the vibes like entering a real store with an immersive experience
cool interaction provided, that users can interact with the animated wall art and change the colours of the sweater worn by the mannequin at the center of the store
Weaknesses
Weaknesses
cursor in the website will change into a mini hand, but unfortunately, the responsiveness is slow and laggy
call-to-action button is not obvious, some important interaction buttons should have bigger contrast to be easily found, such as the "back" button
products with the simillar colour with the background almost blended into the background, better contrast in highlighting the products would bring better user experience
navigation quite is unclear, don't know what to do at the main page at first until I find that the roll-up door can be click on
font colour of footer and background has less contrast, difficult to navigate
Week 3 exercise 2: Web Replication
Week 3 exercise 2: Web Replication
To do:
To do:
replicate TWO (2) existing main pages of the websites given in the link to gain a better understanding of their structure
follow the dimensions of the existing website from the width and height
use Adobe Illustrator
focus on the layout, type style, and color style
Links:
How to screengrab - on Chrome:
make sure whole web page is loaded completely
right click - choose inspect
close toggle device toolbar
adjust the width of the website
Run Command - capture full size screen
Process:
Process:
The websites I chose to replicate is Bandit and Morgan Stanley.
Final Outcome:
Week 4 exercise: HTml basics
Week 4 exercise: HTml basics
Process:
Process:
Created a html file using notepad, and named the file as "index.html", saved the file type to All Files. Created a new folder named "image" in the same folder where the html file is.
Code:
Deploy to netlify:
Web deployed:
exercise 3: Creating a Recipe Card
exercise 3: Creating a Recipe Card
To Do:
To Do:
create a recipe card using HTML and CSS.
goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
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.
The recipe I chose is "Perfect Baked Potato" from https://www.101cookbooks.com/baked-potato/
References:
References:
deployed html
Page updated
Google Sites
Report abuse