Interaction Design Project 2 : Working Web Page

 May 24, 2024 - (Week 9 - Week 10)

linchenyi/ 0367008

Interaction Design/Bachelor of Design in Creative Media

Project 2: Working Web Page

1. INSTRUCTIONS

2.LECTURE 

Week 9

Display Property

The display property controls how HTML elements are laid out:

• Block elements: Start on a new line and take up the full width (e.g., <div>).
• Inline elements: Stay within the line and do not start a new line (e.g., <span>).
• Custom display: Override default values to meet specific design needs.
  • Example: Making <li> elements inline for a horizontal menu.

Other Display Types

• Inline-block
• Flex
• Grid

Box Model in CSS

HTML elements act as containers, and the box model consists of layers:

• Padding: Space inside the element, around the content.
• Border: A line surrounding the padding and content.
• Margin: Space outside the border, used to separate elements.

Flexbox

The purpose is to create responsive and efficient web layouts.

Key concepts:

• Flex container: A parent element with display: flex.
• Flex items: The children of the flex container.

Important properties:

• display: flex: Establishes a flex container.
• flex-direction: Defines the direction of the items (row, column).
• justify-content: Aligns items along the main axis (start, end, center, space-between, space-around).
• align-items: Aligns items along the cross axis (stretch, center, start, end).

Fig 1.1 Website Classroom Exercises 

html ：

css：

Netlify Link：

https://6681c8b92d3c73809e7b6540--stellar-profiterole-4d3f5a.netlify.app/#

Week 10 Assignment Process

We'll turn the UI design prototype into the final visual design for your digital resume (CV).

• Review UI Design Prototype: Improve the initial design based on feedback.
• Refine Visual Design: Determine fonts, colors, and images to match your personal brand and the tone of the resume. Ensure the design looks professional and cohesive.
• Enhance User Interface Interactions: Add advanced interactions like animations and smooth transitions to improve user engagement and experience.
• Technical Implementation: Develop the final design using HTML and CSS.
• Presentation and Documentation: Update your portfolio to explain and showcase the steps and processes of this task.

Working Web Page

The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission

Process

1. Initial Setup and Figma Mockup Translation:

• Tools: Figma (for mockups), VS Code (for coding), Google Fonts, Dreamweaver.
• Assets: Profile pictures, app icons, process images, business card images.
• Goal: Convert the Figma mockup into a fully functional, responsive HTML and CSS webpage using Dreamweaver.

1. Converting Figma Mockup to HTML:

• Extract visual elements from the Figma mockup, including layout structure, images, text content, and color schemes.
• Create an index.html file and a style.css file.

https://ephemeral-bunny-175bd5.netlify.app/