INTERACTIVE DESIGN PROJECT 2

-

May 25, 2024

Start week8 - End Week10

Li Jingbu/ 0367209

Interactive Design/Bachelor Of Design In Creative Media

Instruction




Project 2

Requirement:
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:





Outcome:

Vertical

Horizontal

Netlify Link

评论

发表评论

此博客中的热门博文

Typography/ Exercise

-
图片
 26.09,23-/Week1-Week LI JINGBU /0367209 Typography/Bachelor of design (Hons) creative media/Taylor's University Task 1/ Exercises LECTURES Week 01 Lecture 01: Introductions In lecture, Mr. Vinod introduced us to typography. He explained that Typography is an act of creating typefaces or type families. I learned that  typography has envolved over 500 years from calligraphy to digitalization. It is "the art and technique of arranging type to make written language legible, readable, and appealing when displayed". And the process also created numbers and symbols. Typography is now something everyone dose. Typography can be seen at everywhere in our daily lives, Typography is applied in animation, website design, application design, posters, books and more. Font : refers to the individual font or weight within a typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold or Frutiger Light, Roman. Typeface: refers to the various families that do not share characteristics,...
阅读全文

ADVANCED TYPOGRAPHY TASK1

-
图片
 April 21, 2024 Start Week1-Week3 LI JINGBU/0367209 ADVANCED TYPOGRAPHY/Bachelor of design(honours) in creative media Instruction Lecture Summary Week1 In the first week, Ms. Vinod introduced us to the requirements of the module and the tasks for the semester. In the first week we need to complete eight printing systems. Axial Radial Dilatational Random Grid Modular Transitional Bilateral "Typographical organization is complex because the elements are dependent on communication in order to function. Additional criteria such as hierarchy, order of reading, legibility, and contrast also come into play. The typographic systems are akin to what architects term shape grammars. The typographic systems are similar that the systems has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making." (Elam, 2007) 1.Axial System All elements are aligned to the left or right of a single axis, which can be curved. 2.Radial System All elements e...
阅读全文

INTERACTIVE DESIGN Exercise 1&2&3

-
图片
 April 28, 2024 Week1 Exercise LI JINGBU/ 0367209 Interactive Design/ Bachelor of Design in Creative Media Lecture In this week's lesson, we learned about website 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 A design’s usability depends on how well its features accommodate users’ needs and contexts. Key Principle of Usability 1. Consistency 2. Simplicity 3. Visibility 4. Feedback 5. Error Prevention 1. Consistency Consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated. For example, if a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that. Similarly, if a backward arrow denotes the back button, then it should not be c...
阅读全文