A summary of the first week of classes is as follows:
Mr. Shamsul emphasized the importance of usability in design during this week’s session. Usability refers to how users can use a product effectively and efficiently, and it is a key component of user experience design (UX).
Week 1 Slides:
During the lecture, Mr. Shamsul introduced several key usability principles：
1） Consistency:
Consistency is a key factor in visual elements and functionality in web design, ensuring that the website looks coherent and that individual elements work harmoniously.
Consistency includes aspects such as navigation system, page layout, menu structure, fonts and typography.
Consistent design enables users to recognize and learn patterns, and users will become frustrated if similar elements do not produce similar output.
2）Simple:
The interface should be as simple as possible, minimizing the number of steps and using obvious symbols and terminology.
Simple design helps users achieve their goals faster and more efficiently and provides a good user experience.
3） Visibility:
Visibility means that the more visible an element is, the more likely users are to understand and use them.
Users should know what their options are and how to access them just by looking at the interface.
4） Feedback:
Feedback communicates the results of any interaction, making it both visible and easy to understand.
Feedback indicates to the user whether a task was completed successfully, such as navigation items changing color or loading a submenu when the mouse is hovered over them.
5） Error prevention:
Error prevention is about making it easy for users to do what they are doing without making mistakes.
Avoid common usability pitfalls like complex interfaces, confusing navigation, poor feedback, and insufficient error handling.
By following these principles, designers can create websites with a great user experience and avoid common usability issues.
Week 2
Group Activity: Prototyping
Class Activity
In this engaging classroom activity, each group is presented with a unique scenario, challenging them to craft a mobile interface tailored to solve a specific problem or cater to a particular user need. Once armed with their scenarios, the groups embark on the creative journey of outlining their design concepts and bringing them to life through basic prototyping.
As part of the process, every member within each group assumes the pivotal role of a "user," tasked with rigorously testing the prototype's usability. This entails navigating through the interface, attempting to accomplish assigned tasks, and providing valuable feedback for iterative improvement.
Among the participating groups, I found myself assigned to the fifth group, where we collectively tackled our designated scenario. Our challenge? Designing a brand-new e-commerce application for a local clothing store, a task that demanded a delicate balance between functionality and aesthetics.
Our scenario presented us with a clear set of user needs: consumers craving a seamless and intuitive shopping experience. They desired a streamlined checkout process complemented by comprehensive product descriptions and visually captivating photos, all encapsulated within an effortless browsing and purchasing journey.
To kickstart our brainstorming session, we embarked on an in-depth visual exploration, studying existing shopping applications like Taobao and Shopping to draw inspiration and glean valuable insights. Armed with newfound knowledge and creative sparks, we delved into the design process, meticulously refining our ideas and translating them into tangible prototypes.
After rounds of iteration and refinement, we proudly unveiled our final creation—an e-commerce application that seamlessly melded form and function, catering to the diverse needs and preferences of our target users.
This is our final result.
Fig. 1. Final result Week 2 (30/04/2024)
Week 3:
Website Structure
The second group came to our group as users to test the prototype and get some feedback from users.
Course Overview
This week, Mr. Shamsul guided us through the crucial aspects of website structure. We learned that an effective website structure enhances user experience and significantly impacts search engine optimization (SEO).
Main Elements
Header
- Function:The header is crucial for providing users with main navigation and essential information. It typically includes the website logo, navigation menu, and search bar.
- Importance:A clear and user-friendly header improves user experience by helping visitors quickly locate the information they need.
Body
- Function:The body contains the core content of the website, such as text, images, videos, and other media.
- Organization:Organizing content effectively is key to ensuring clarity, readability, and ease of understanding. This can be achieved by using paragraphs, subheadings, lists, and multimedia elements.
- Importance:Well-organized content not only enhances the user reading experience but also aids search engines in crawling and indexing your site's content more efficiently.
Footer
- Function:Located at the bottom of a webpage, the footer typically includes copyright information, privacy policies, contact details, and additional navigation options (such as links to social media).
- Importance:The footer provides users with extra navigational help and important information, enhancing the overall integrity and usability of the website.
Through this week's lessons, we gained a deeper understanding of the fundamental elements of website structure and their crucial role in improving user experience and SEO. Mr. Shamsul's insights helped us realize that a well-structured website is not just about optimizing page layout but is also essential for enhancing overall website performance and user satisfaction.
Week 3 Slides
Week 4：
HTML Exercise: Profile Page
This Week's Learning Summary
This week, Mr. Shamsul introduced us to the concept of web standards, detailing the evolution of the web and the interplay between a website's software and hardware. Although we had previously covered the basic structure of web pages, this lecture provided a more comprehensive understanding of these concepts.
We concentrated on learning HTML, the universal language of the web. Mr. Shamsul explained the basics of HTML, including how to create headings, paragraphs, bold text, italic text, ordered and unordered lists, and how to insert images.
During our practical session, we applied what we learned about HTML. Mr. Shamsul guided us through coding in a text editor to create a basic HTML page. We saved these files with a .html extension and uploaded them to the Netlify platform. Our primary task was to introduce ourselves and include a personal picture on the page. This exercise not only reinforced our understanding of HTML syntax but also provided hands-on experience with the process of deploying local files to a web platform.
Week 4 Slides
Fig 4.1 Screenshot of my HTML code，Week 4
Introduce yourself using HTML PDF：
Week 5
Use DW to further improve the curriculum
Information page HTML code ，Week 5
Information page HTML code ，Week 5
Information page HTML code ，Week 5
Introduce yourself using HTML PDF：
INSTRUCTIONS
2. Exercise 1: Network Analysis
Week 1 | Exercise 1
We need to select two (2) websites from the given links. Carefully examine the website you choose, paying attention to its design, layout, content, and functionality. Identify the strengths and weaknesses of your website and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What should be included in the analysis:
Consider the goals and objectives of the website and evaluate whether they are effectively communicated to users.
Evaluate the website's visual design and layout, including use of color, typography, and images. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of website content, including its accuracy, clarity and organization. Consider the performance of your website, including load times, responsiveness, and compatibility with different devices and browsers.
Pasqua Wines' website aims to showcase their wines and heritage, enhance their brand image through engaging content and interactions, and attract both consumers and business partners.
2. Visual Design and Layout:
To start with, it's evident that the Adoratorio Studio website interface sets forth clear objectives and communication methods. Through its overall design, imagery, and language tone, the website effectively communicates the brand's identity and style, thereby capturing the interest of its target audience.The site employs a high-end visual design with elegant imagery and a clean layout to effectively present its wine products and the cultural story of the winery. The design is modern and the color scheme is harmonious, offering a visually pleasing experience.
Fig 1.1 Text layout，week1
3. Website Functionality and Usability:
The website is comprehensive with an intuitive user interface, featuring sections for product displays, company history, latest news, and contact information. It supports multiple languages, accommodating international visitors.
4. Quality and Relevance of Website Content:
The content is rich, covering detailed introductions to the winery, product information, news updates, and industry trends. Content is frequently updated, reflecting the winery's innovations and activities in the industry.
Fig1.2 Navigation menu，week1
5. Website Performance:
The website loads at a moderate speed, optimized for various browsing devices including mobiles and tablets. Despite rich multimedia content, the pages are well optimized to ensure a smooth user experience.
Fig1.3 information，week1
Strengths:
- Design: The website boasts a sophisticated, modern visual design that enhances the brand's image with high-quality imagery and a harmonious color scheme.
- Content: Rich and relevant content showcases the winery's history, innovations, and product details, engaging effectively with the audience.
- Layout: The clean and intuitive layout ensures easy navigation across various sections, enhancing user experience.
Weaknesses:
- Functionality: While generally user-friendly, the site could potentially improve by integrating more interactive elements or real-time support features to enhance user engagement.
- Performance: Although optimized, the heavy use of multimedia could affect loading times on slower internet connections or less capable devices, potentially detracting from the user experience for some visitors.
RayRaylab aims to provide unique digital experiences through customized website creation, focusing on brand enhancement and creating emotionally impactful user interactions.
2. Visual Design and Layout:
The website showcases a minimalist and modern design, using clean lines and a limited color palette to emphasize professionalism and clarity. The layout is straightforward, promoting easy navigation and highlighting the portfolio prominently.
Fig1.4Minimalist web design，week1
3. Website Functionality and Usability:
The website boasts an intuitive layout tailored for seamless navigation, featuring distinct sections dedicated to home, projects, and contact information. Its user-centric design prioritizes ease of use, ensuring effortless access to detailed project information and streamlined contact options.
Fig 1.5 Modern minimalist design typography style，week1
4. Quality and Relevance of Website Content:
The content is focused on demonstrating the agency’s expertise in creating tailored, brand-centric web experiences. It highlights the unique approach of integrating design and development skills.
5. Website Performance:
The performance aspects like load time were not directly observed, but the site appears to be lightweight with minimal graphics that should contribute to fast loading times across devices.
Fig 1.6Website introduction, week1
Strengths:
- Design: The minimalist and modern design with a clean and professional look emphasizes clarity and simplicity, which is appealing for a tech-focused audience.
- Content: Focused and relevant to their services, demonstrating the agency's capabilities in integrating design with functional web development.
- Layout: The straightforward layout facilitates easy navigation, making it simple for users to explore the agency’s projects and services.
Weaknesses:
- Functionality: While user-friendly, the website might benefit from additional interactive features to better engage visitors and showcase the agency’s expertise in interactive design.
- Performance: Although designed to be lightweight, the actual performance in terms of speed and responsiveness was not assessed, which could vary depending on the user’s device and internet speed.
Exercise 2: Website Copy
Our assignment this week is to copy two (2) existing homepages of the website given in the link below to better understand its structure. Choose any two from the given links. Follow the dimensions of your existing website in terms of width and height.
First, I imported a screenshot of the https://www.morganstanley.com/ landing page (check - Run command - Search screen - Capture full size) into Adobe Illustrator.
The font used by this website. I couldn't find the font in Google Fonts, so I replaced it with the Futura font. The text is arranged according to its position and displayed in the outline view.
Below is a comparison between the original website and the copied website, as well as a high-level view of the final results.
Screenshot of the original website, web page copy process，week3
Fonts used on this website. I couldn't find the font in Google Fonts, so I replaced it with a similar Futura font. The text is arranged according to its position and displayed in the outline view.
Below is a comparison between the original and copied sites, as well as a high-level view of the final results.
Screenshot of the original website, web page copy process，week3
Final result of website copy 2
Exercise 3: CSS Layout - Recipe Card
In this exercise, you will 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. Choose ONE recipe from the link below.
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.
Use your creativity to make the page look appealing and interesting
I choose baked pizza.
Production process pictures,Week 7
Exercise 3: Making baked pizza CSS Layout - Final result of Recipe Card
We believe that the search bar for purchases in our design should offer more comprehensive options, rather than limiting the user experience. Additionally, the page should incorporate a variety of display interfaces beyond just a restrictive search interface. We've identified a lack of detailed content, which is essential for providing users with a fulfilling experience.
Furthermore, we aim for a uniform and concise layout design to ensure ease of navigation and a visually appealing interface. Our goal is to create an environment where users feel relaxed and comfortable while using the app. Therefore, meticulous attention to detail in the app layout design is paramount to enhancing the overall user experience.
REFLECTION
Key Elements in Web Design
The articles provided in class offer detailed explanations of various essential elements in web design:
Header:Located at the top of the webpage, it is the first area users see. It contains core navigation and website identity, serving as the main navigation element.
Headings:Includes branding, call-to-action buttons, links to content categories, social media links, and contact information, providing key information and navigation options.
CTA Button:Designed to encourage specific user actions like purchasing, contacting, or subscribing, these buttons grab users' attention for quick actions.
Hero Section:The above-the-fold area featuring visually appealing elements such as images, sliders, fonts, or videos, aimed at grabbing user attention and conveying messages quickly.
Footer:Located at the bottom of the page, it typically includes branding, supporting links, contact information, and social media links, providing additional navigation and information.
Slider:Displays different products, offers, or information interactively, though it can affect page speed and usability.
Search Bar:Allows users to browse site content and find information quickly based on search queries.
Menu:A core navigation element that can appear as horizontal menus, sidebars, or drop-downs, designed based on user research for optimal navigation.
Breadcrumb Navigation:Helps users understand their location on the website, improving findability and navigation efficiency.
Form:Facilitates interaction between users and the system, collecting user input efficiently with clear visual cues and support.
Card:Used to organize similar data or content visually, arranged in a grid format to help users browse and understand content quickly.
Video:Engages users and conveys information effectively, with considerations for load times, user experience, and accessibility.
Progress Indicator:Shows users their progress through long articles, complex tables, or multi-step processes.
Favicon:A small icon representing the brand in the browser's URL line and bookmark tabs, aiding quick identification and access.
Tag:Used for secondary navigation to specific content categories, commonly found in blogs and content websites for additional content classification and support.
These elements are critical for enhancing user experience, improving navigation, and effectively conveying information on a website.
23/04 /2025 - 28/05/2025 / Week 1 - Week 6 Wang Yifan / 0368363 Advanced Animation / Bachelor of Design (Honours) in Creative Media / Taylors University Exercises INTRODUCTION LECTURE Week 1:Miro Board Fig 2.1 Week 1 Miro Board Week 2: Lecture Slides Fig 2.2 Week 2 Lecture Slides Week 2 Miro Board Fig 2.3 Week 2 Miro Board Week 3: Lecture Slides Fig 2.4 Week 3 Lecture Slides Week 5: Lecture Slides Fig 2.5 Week 5 Lecture Slides Week 5 Miro Board Exercise 1: Bouncing Ball Animation In the first exercise, we need to find references and observe the difference of each ball's physical property (football, ping pong and bowling) and its weight. Then, we should analyse how does it affect: The timing and travel distance of each bounce (Contact pose to Contact pose) The overall timing that determines the number of bounces The height of each Up pose when it bounces Reference for different bouncing ball: Football - https://www.youtube.com/watch?v=01cm7H1QoJg Ping Pong -...
21/04/2025 - 18/05/2024 (Week 01 – Week 04) Wang Yifan / 0368363 Montion Graphics & Compositing / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1: Individual Task - Technical and Motion Graphics Sensibilities INTRODUCTION LECTURE Week 1 Practical: Fill up the details below: 1. E-Portfolio link 2. Pinterest Board: 3. List down 3 of your favourite Motion Graphics works and explain why you like it the most. Fig 2.1 Week 1 Practical Class, Week 1 (25/4/25) Week 5 Practical: 1. Follow instructions on the Tutorial demo during online class. 2. Create your own composition based on the requirements below: 3. Download all of the design elements from this link: https://bit.ly/3cHoqZ6 Create 1080 x 1920 size poster (I.G Stories size) on Photoshop Trace and crop the images using the Pen tool. Create 1 composition and attach below (I.G poster) Animate the composition for 5-16 second loop with sound (I.G video story) Firstly, before I imported the...
-SPETEMBER 24, 2024 24/09/2024 - //2024 (Week 02 – Week 06) Wang Yifan / 0368363 Film Studies and Cinematography / Bachelor of Design (Honours) in Creative Media / Taylors University Project 1 – Story Development
.png)
评论
发表评论