26/09/2024 - //2024 / Week 1 - Week 13 Rio Sato / 0360530
Lectures and Exercises
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors University
Lectures
Week 1 Lecture
Mr. Shamsul explained about the Module Information.
Fig. 1.1 Module Information
Week 2 Lecture
Usability: Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. It is a part of User Experience (UX) Design. It is the second level of UX Design
Consistency in web design is crucial for visual and functional coherence.
It ensures a harmonious look and feel across all website elements, from headers to navigation bars.
Consistent design promotes intuitive user experience.
Key areas include navigation, layout, typography, and branding.
Example: Adidas Mobile App, Strava Mobile App, Air BNB Mobile App, ZUS coffee
 |
| Fig. 2.1 Example of consistency |
User interfaces should be simple and intuitive.
Simplicity means minimizing steps, using clear symbols and terms, and preventing errors.
Simple designs help users achieve goals efficiently while enjoying a great experience.
 |
Fig. 2.2 Example of simplicity
|
Visibility is key in UI design. The more visible an element, the easier it is for users to understand and use it. Conversely, hidden elements are harder to discover and utilize.
An effective interface should clearly display available options and how to access them at a glance.
 |
Fig. 2.2 Example of visibility
|
Feedback communicates interaction results visibly and understandably, signaling task success or failure to users.
Example: A mobile app icon changing color to indicate the current screen.
 |
Fig. 2.3 Example of feedback
|
|
Error prevention involves alerting users to potential mistakes, facilitating error-free interactions. This principle is crucial because humans are inherently prone to errors.
 |
Fig. 2.4 Example of error prevention
|
|
Week 3 Lecture
Website Structure
Header:
The header, located at the top of a webpage, typically includes the site's logo, main navigation, and key contact details. It serves as a central hub for users to access vital information and navigate the site efficiently.
Body: The body is the webpage's main content area, housing text, images, and multimedia. Well-organized body content enhances readability and user experience.
Footer: The footer, positioned at the webpage's bottom, typically contains copyright info, key links, and contact details. It concludes the page and offers extra navigation.
Content organization is crucial for a well-structured website.
• Use headings (H1, H2, H3, etc.) to create a clear hierarchical structure
• Group related content logically
• Label sections clearly
These practices significantly enhance user experience and navigation.
 |
| Fig. 3.1 Website Structure |
Week 4 Lecture
Web Standers
Web access has evolved significantly:
• Initially, users relied on keyboard, mouse, and monitor.
• Now, diverse access methods exist:
- Mobile devices and tablets with touchscreens
- Audible interfaces for voice interaction
- Assistive technologies like speech output for visually impaired users and speech input for those with limited mobility
Hardware and software diversity challenges:
• Multiple web browsers available (e.g., Chrome, Firefox, Safari)
• Various operating systems in use (Windows, macOS, Linux)
• Wide range of screen resolutions, from low to high definition
Week 5 Lecture
ID attribute
- HTML elements can have unique ID attributes
- IDs distinguish elements on a page
- Each ID must be unique to maintain functionality
- Unique IDs enable custom styling for specific elements
- Example: Styling a single paragraph differently from others
Class attribute
- HTML elements can have class attributes for grouping and styling.
- Classes identify multiple elements as distinct from others on the page.
- They're useful for styling specific content, like important paragraphs.
- Multiple elements can share the same class name.
ID and Class attribute
- ID and class attributes don't affect element appearance by default.
- Elements only change visually if specified by CSS rules.
Block elements
- Block-level elements start on new lines in the browser
- These include <h1>, <p>, and <ul>lt;ul> and <li>
Inline elements
- Inline elements appear on the same line as adjacent content
- These elements don't start new lines
- Examples include <b>, <i>, and <em>gt;, <a> and <img>
CSS Style Rules with HTML Elements
CSS links rules to HTML elements, defining their display. A CSS rule comprises a selector and a declaration, determining how specific elements appear.
 |
| Fig. 5.1 The Rules of CSS Style |
This rule applies Arial typeface to all <p> elements.
Selectors specify which elements a rule affects. Multiple elements can be targeted by separating names with commas.
Declarations define element styling. They consist of a property and value, separated by a colon.
CSS declarations are enclosed in curly brackets. Each declaration consists of a property and a value, separated by a colon.
CSS Properties Affect how Elements are Displayed
 |
| Fig. 5.2 Fig. 5.1 Properties |
This rule sets the Arial typeface and yellow color for all <h1>, <h2>, and <h3> elements.
Properties define which element aspects to change (e.g., color, font, width, height, border).
Values specify settings for chosen properties (e.g., the specific color for a color property).
Using External CSS
<link>
- Uses three attributes:
• href: CSS file path
• type: "text/css"
• rel: "stylesheet"
- Multiple CSS files can be linked:
• Use separate <link> elements
• Example: One for presentation, another for layout
<style>
- Apply consistent styles across pages
- Separate content from the presentation
- Easily update styles site-wideh
individual page)
Week 7 Lecture
CSS selectors are fundamental tools that target and style HTML elements on web pages. They define which elements receive specific styles like colors, fonts, and spacing.
Main Types of Selectors:
- Universal (*) - Targets all elements
- Element - Targets specific HTML tags
- ID (#) - Targets unique elements
- Class (.) - Targets multiple elements sharing a class
- Descendant - Targets nested elements
- Attribute - Targets elements with specific attributes
- Child (>) - Targets direct children
- Pseudo-elements - Targets parts of elements
Why Multiple Selectors Matter:
- Provides flexibility in targeting elements
- Enables precise control over styling based on structure, attributes, and state
- Supports responsive design
- Improves maintenance and accessibility
Week 9 Lecture
The display property is fundamental for CSS layout control. Elements are either block-level (like div) or inline (like span) by default, though this can be overridden.
Display Types
- Block: Takes full width and starts on new line
- Inline: Flows within text without breaking lines
- Other types: inline-block, flex, and grid
Box Model Structure
Every HTML element is a box with three layers around its content:
- Padding: Inner spacing
- Border: Element boundary
- Margin: Outer spacing
Flexbox
A modern layout system with two key components:
- Flex Container: Parent element with display: flex
- Flex Items: Children elements that can be aligned and distributed using properties like justify-content and align-items
Exercise 1
Web Analysis
Website link: Panelki - CSS Winner
Website Overview:
The Panelki website, designed by Elen Winata, is a visually striking platform showcasing Soviet-era panel housing. It stands out for its innovative use of typography, color, and interactive elements that effectively bring the architectural subject matter to life.
Design and Layout:
The website's design is minimalist yet impactful, reflecting the architectural style it represents. The use of a limited color palette, primarily black and white with different size of font, creates a stark and memorable visual experience. The typography is bold and clear, enhancing readability and emphasizing key information.
Functionality and Interactivity:
One of the site's strengths is its interactive elements. Users can explore different aspects of panel housing through clickable sections, creating an engaging and educational experience. The navigation is intuitive, allowing visitors to easily move between different parts of the site.
Content and Purpose:
The website effectively communicates its purpose of showcasing and educating about Soviet-era panel housing. The content is well-organized, providing historical context and architectural details. The use of high-quality images and illustrations further enhances the informational value.
User Experience:
The overall user experience is immersive and educational. The site's responsive design ensures compatibility across various devices. However, sometimes load times might be a concern for users with slower internet connections due to the rich visual content.
 |
| fig. 1.1 Website view |
(213 words)
Website link: Pesquera Diez (P10) - Awwwards SOTD
Website Overview:
The Pesquera Diez (P10) website, designed by Agencia Creativa Hola, is an innovative platform showcasing the brand's fishing products and services. It stands out for its dynamic design elements and great composition, creating a visually engaging user experience.
Design and Layout:
The overall layout of the website is meticulously crafted, maintaining a clean and well-organized structure that significantly enhances both readability and user navigation. This thoughtful organization allows visitors to easily find and digest information without feeling overwhelmed by the dynamic visual elements.
One of the standout features of the design is the strategic use of a bold yellow accent color. This vibrant hue is employed with precision to create striking contrast against the predominantly neutral background, effectively guiding the user's eye to key elements and important information. The yellow accents serve multiple purposes: they add visual interest, highlight critical content, and contribute to the overall brand identity of Pesquera Diez. This color choice not only enhances the aesthetic appeal of the website but also plays a crucial role in improving the user's ability to navigate and interact with the site's content efficiently.
Functionality and Interactivity:
The site likely features interactive elements that complement its dynamic design. The cutting animations suggest a high level of interactivity, potentially enhancing user engagement and making the browsing experience more immersive.
Content and Purpose:
The website effectively communicates its purpose of showcasing Pesquera Diez's fishing products and services. The content is presumably well-structured, providing information about the company's offerings in an visually appealing manner.
User Experience:
The overall user experience appears to be engaging and visually stimulating. The combination of clean layouts and great spacing(compositioning)creates a modern and professional feel.
 |
| fig. 1.2 Website view |
(278 words)
Exercise 2
Web Replication
Introduction
Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.
Website View
 |
| Fig. 2.1 Website View - Ocean Health Index |
Final Outcome
 |
| Fig. 2.2 Exercise 2: Web Replication Final Outcome - JPG |
Fig. 2.3 Exercise 2: Web Replication Final Outcome - PDF
|
Comments
Post a Comment