P1/10/2024 - 15/10/2024 (Week1-Week4)
Amber Tan Jing Jing (0372746)
Interactive Design / Bachelor of Design in Creative Media / Taylors University
Exercise 1, 2, 3
Table of Contents
Usability: Designing Products for User Satisfaction
Key Principle of Usability
1. Consistency
- A key factor in web design for both visual elements and functionality.
Ensure that the website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.
Includes consistent navigation system, page layout and menu structure, fonts and typography and branding in web design
2. Simplicity
Used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.
Help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
3. Visibility
4. Feedback
- Communicates the results of any interaction, making it both visible and understandable
Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.
5. Error Prevention
It involves a user when they are making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake.
Week3
Understanding Website Structure
The Three Key Elements
1. Header
- The top section of a webpage.
Contains the website's logo, navigation menu, and contact information.
Provides users with quick access to essential information and navigation.
2. Body
- The main content area of a webpage.
- Contains text, images, videos, and other multimedia elements.
Proper organization of content within the body is crucial for readability.
3. Footer
- Located at the bottom of a webpage.
Includes copyright information, links to important pages, and contact details.
Provides closure to the webpage and additional navigation options.
Organizing Content
Navigation Menus
- Help users move around the website.
- Use clear and concise labels for menu items.
- Consider using dropdown menus for complex sites.
Week5
The Web and Language
HTML
- Made up of characters that live inside angled brackets < >
- Elements are usually made up of two tags: an opening tag and a closing tag.<element>Information</element>
Each element tells the browser something about the information that sits between tis opening and closing tags.
Figure 1.1 Opening Tag & Closing Tag
Figure 1.2 Attributes
<body>, <head> & <title>
Figure 1.3 body, head & title
Headings
Figure 1.4 Headings
Paragraph
Italic
Figure 1.7 Italic
Ordered ListFigure 1.8 Ordered List
Unordered List
Figure 1.9 Unordered List
Nested ListFigure 1.10 Nested List
Writing LinksFigure 1.11 Writing Links
Adding ImageFigure 1.12 Adding Image
Week6
HTML & CSS
ID and Class attribute
ID attribut
- Every HTML element can carry the ID attribute
- It is used to uniquely identify the element from other elements on the page
- No two elements have the same value for their ID attributes (otherwise the value is no longer unique)
- Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page.
- Eg: you might want to assign one paragraph within the page a different style from all of the other paragraphs.
Class attribute
- Every HTML element can also carry a class attribute.
- Sometimes you will want a way to identify several elements as being different from the other elements on the page
- For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements
- The class attribute on any elements can share the same value or name
Block elements
- Some elements will always appear to start on a new line in the browser window
- Example: <h1>, <p>, <ul> and <li>
Inline elements
- Some elements will always appear to continue on the same line as their neighbouring elements
- Example: <b>, <i>, <em>, <a> and <img>
CSS Style Rules with HTML Elements
Figure 1.13 CSS Style Rules with HTML Elements
CSS Properties Affect how Elements are Displayed
Figure 1.14 CSS Properties Affect how Elements are Displayed
Method to Employ CSS
Using External CSS
<link>
- The <link> element can be used in an HTML document to tell the browser where to find the CSS file
used to style the page
- It is an empty element and it lives inside the <head> element
- It should use three attributes:
- href; To specify the path to the CSS file
- type; This attribute specifies the type of document being linked to. The value should be text/css
- rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
- An HTML page can use more than one CSS style sheet.
- To do this it could have a <link> element for every CSS file it uses
- For example, one authors use one CSS to control the presentation (fonts and colors) and a second to control the layout
Using Internal CSS
<style>
- You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page.
- The <style> element should use the type attribute to indicate that the styles are specified in CSS
- The value should be text/css
- When building a site with more than one page, you should use an external CSS style sheet. This:
- Allow all pages to use the same style rules (rather than repeating them in each page)
- Keeps the content separate from how the page looks
- Means you can change the styles used across all pages by altering just one file (rather than each individual page)
Week7
CSS Selectors
- Allow to target and style HTML elements on a web page.
- Used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
- A crucial part of web development because they enable to control the presentation and layout of your web pages.
Universal Selector:
- Selects all elements on the page.
- Represented by an asterisk (*).
- Use it with caution, as it can affect all elements and lead to inefficient CSS.
Figure 1.15 Universal Selector
Element Selector:
- The simplest type of selector, it target HTML elements by their tag name.
Figure 1.16 Element Selector
ID Selector:
- Targets an element with a specific id attribute.
- IDs must be unique within an HTML document.
- To select an element with a specific ID, use a # symbol followed by the ID name.
Class Selector:
- Targets elements with a specific class attribute.
- Multiple elements can share the same class.
- To select elements with a specific class, use a . symbol followed by the class name.
Figure 1.18 Class Selector
Descendant Selector:
- Selects an element that is a descendant of another element.
- Can specific descendant of anther element.
- For example, to style all <a> elements inside a <div> with class "container".
Figure 1.19 Descendant Selector
Attribute Selector:
- Selects elements with a specific attribute value.
- It is used to styling elements based on their attributes, such as form inputs.
- Syntax: [attribute=value]
Figure 1.20 Attribute Selector
Child Selector:
- Selects elements that are direct children of another element.
- To select only the immediate <li> children of an <ul>.
Figure 1.21 Child Selector
Pseudo-class Selector:
- Selects elements based on their state or position in relation to another elements.
- Common pseudo-classes include: hover, :active, :visited, :link, :focus, and :nth-child(n)
Figure 1.22 Pseudo-class Selector
Pseudo-element Selector:
- Selects parts of an element rather than the element itself.
- Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.
Figure 1.23 Pseudo-element Selector
Adjacent Sibling Selector:
- Syntax: element + adjacent
- Selects an element that is immediately preceded by a specified element. Styling an element that directly follows another specific element.
Figure 1.24 Adjacent Sibling Selector
General Sibling Selector:
- Syntax: element ~ siblings.
- Selects all elements that are siblings of a specified element. Styling all sibling elements that follow a specified element.
Figure 1.25 General Sibling Selector
Box Model-Layout in CSS
The Display Property
- Display is CSS's most important property for controlling layout.
- Every element has a default display value depending on what type of element it is.
- The default for most elements is usually block or inline.
Block-Level Element- <div> is the standard block-level element.
- A block-level element starts on a new line and stretches out to the left and right as far as it can.
Figure 1.26 Block-Level Element
Inline Element
- <span> is the standard inline element.
- An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
Figure 1.27 Inline Element
Other Display Properties
- Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
- Each of these is a container, or box.
- Each box has three layers that surround its content. The layers are, in order from inside to outside: Padding, Border, Margin.
- The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).
Figure 1.28 Illustration shows the various layers in the box model
- For example, consider the following <p>, which is wrapped inside a <div>:
Figure 1.29 <p> wrapped inside a <div>
- We can apply the following CSS to the paragraph tag in order to control the size of the padding, border, and margin of the paragraph:
Figure 1.30 Apply the following CSS to the paragraph tag
- Reason to include an element in ‘div’ tag/element is to create layout. Another method to create layout in CSS is using position property.
Flexbox- A powerful tools for creating responsive and efficient web layouts.
- It rely on a solid understanding of the Box Model, as they manipulate elements' positioning and spacing within a container.
- Flex Container: The parent element with display: flex.
- Flex Items: The children of the flex container.
Important Properties ( Flex Container )- display: flex: Establishes a flex container.
- flex-direction: Defines the direction of the flex items (row, column).
- justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).
- align-items: Aligns flex items along the cross axis (stretch, center, start, end).
Position
CSS Position Property
- Used to control the positioning of an element within its containing element. It determines how an element is displayed in relation to other elements on a web page.
Position: Static (default)- Static (default): Elements with position: static; are positioned in the normal flow of the document. They are not affected by the top, right, bottom, or left properties. This is the default behavior for most HTML elements.
Figure 1.31 Position: static
Position: Relative- When an element has position: relative;, you can use the top, right, bottom, and left properties to move it relative to its normal position in the document flow. Other elements on the page will still occupy the original space of the element.
Figure 1.32 Position: relative
Position: Absolute
- Elements with position: absolute; are positioned relative to the nearest ancestor with a position value other than static (usually relative, absolute, or fixed). If no such ancestor exists, the element is positioned relative to the initial containing block (typically the viewport).
Figure 1.33 Position: absolute
Position: Fixed
- Elements with position: fixed; are positioned relative to the viewport, and they do not move when the page is scrolled. They stay in the same position even if the user scrolls up or down.
Figure 1.34 Position: fixed
Position: Sticky
- Elements with position: sticky; are initially positioned according to the normal flow of the document. However, when the element reaches a specified scroll position (defined by top, right, bottom, or left), it becomes "sticky" and remains fixed at that position while the user continues scrolling.
Figure 1.35 Position: sticky
Instructions
Exercise 1 - Web Analysis (Week2)
Instructions
Choose TWO (2) websites from the link given. Review the website that you've selected carefully, 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.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
Link to choose websites:
Chosen Websites:
Purpose and Goals:
Figure 2.1 About Us
As the picture above says, the purpose of this website is to serve as a complete resource for users seeking the best alcoholic drinks. Its main goal is to improve brand reputation and promote different brands of alcohol and attract users to try and buy them.
Visual Design and Layout:
This website uses warm tones and flesh tones as the background color. Eye-catching images and videos that grab users' attention. In terms of formatting, the font is easy to read and the title and text are of a good size. This website is very clean and minimalist. The option to select a language in the lower right corner of the website enhances accessibility. This makes it more convenient for users to navigate and understand the content.
Figure 2.3 Shop Winners
The Shop Winners section displays various award-winning wines. The clear pictures and simple color schemes make for a comfortable viewing experience. If users can’t find the wine they want on this page, they can easily type the type of wine in the search bar on the left. Besides, clicking on an image provides detailed information about the wine of choice.
Functionality and Usability:
The navigation design of this website is simple and clear, so users can easily find the information they need. The search box and category menu are also designed to be intuitive.
Quality and Relevance:
The website provides high-quality, highly accurate reviews and recommendations. Overall, the content is well organized, clear and easy for users to understand. When using mobile devices, website loading times may be slightly slower in some cases.
Figure 2.4 Screen Display on Smartphone
Accessible on smartphone, the layout is also functional. So I think there is nothing wrong with the responsiveness of this website. Besides, I think the website has no issues on multiple browsers.
Purpose and Goals:
As the picture above says, the purpose of this website is to promote Neurable AI, which allowed everybody to experience the power of high performance brain-computer interfaces in their daily lives. The goal of the Neurable website is to showcase the capabilities and benefits of its brain-computer interface technology.
Visual Design and Layout:
Figure 2.6 Home Screen & Products
This website uses dark colors and off-white colors. Dark colors are very technological, while off-white colors give people a very comfortable feeling. The font is easy to read and the paragraphs is clear as well. This website also adds animations. When the users slide the mouse, the picture will move accordingly. This increases participation. Besides, the image also very clear.Functionality and Usability:
This website's functionality is good. Navigation is clear that the users can easily find the information about products.
Quality and Relevance:
This website uses clear language and is well-organized. This make it easy to navigate and understand. So I think this website quality is good because of its easy to navigate.
Figure 2.7 Screen Display on Smartphone
This website quality is good. Pages load quickly, providing a smooth user experience.
It performs well on smartphone.
The website runs smoothly on multiple browsers.
Exercise 2 - Web Replication (Week3)
In this exercise, we have to choose any two websites from the link given. Follow the dimensions of the existing website from the width and height.We can use any image from stock image or free stock icon. The image that we use does not have to be an exact image from the original website. Focus on the layout, type style, and color style. Find similar typefaces/fonts.We need to screengrab the website and begin to replicate the page.
Chosen Websites:
1. Ocean Health Index
Figure 3.1 Progress Screenshot (Ocean Health Index)
Figure 3.2 Left Original , Right Replicate (Ocean Health Index)
Figure 3.3 Final Web Replication-Ocean Health Index - PDF (10/10/2024)
2. Morgan Stanley
Figure 3.4 Progress Screenshot (Morgan Stanley)
Figure 3.5 Left Original , Right Replicate (Morgan Stanley)
Figure 3.6 Final Web Replication-Morgan Stanley - PDF (10/10/2024)
Exercise 3 - Personal CV Page (Week 7)
I found some references in Pinterest before creating my personal CV page.
Then I started to draw sketches.
Figure 4.2 Sketches, Week7
Figure 4.3 Color Schemes, Week7
Figure 4.4 Working Progress, Week7
Figure 4.5 Webpage screenshot
Weekly Coding Practice
HTML Personal Profile Page (Week 5)
This week we use TextEdit to type the code.
Figure 5.2 My Profile Page Screenshot
CSS Personal Profile Page (Week 6)
This week, we learned about CSS and continued our exercises from last week using Adobe Dreamweaver. We explored how to create a timetable, add links, change colors and change fonts.
Figure 5.3 Dreamweaver Code Screenshot
Figure 5.4 Dreamweaver Screenshot
Figure 5.5 Personal Profile Page Screenshot
Besides, we have to add a contact form below.
Figure 5.6 Contact Form Code
Figure 5.7 Contact Form Screenshot
CSS Personal Profile Page (Week 7)
This week we learn how to float the paragraph beside the image.
Figure 5.8 Dreamweaver Screenshot (Image float)
Box Model in CSS - Food Galor Page (Week 9)
This week we learned about box model in CSS. This allow us to keep images separate from other content.
Figure 5.9 Dreamweaver Code Screenshot (html & css)
Figure 5.10 Food Galor Page Screenshot
Box Model in CSS - Food Galor Page(Week 9)
This week we learned how to use the box model to control the size and spacing of elements to create card styles with rounded corners and shadow effects, and make the cards scale when hovered. Besides, we learned how to keep the navigation bar fixed at the top while scrolling.
Figure 5.11 Dreamweaver Code Screenshot (html & css)
Figure 5.12 Food Galor Page Screenshot
Figure 4.5 Webpage screenshot
Comments
Post a Comment