INTERACTIVE DESIGN Project 2

 GCD 60904 / INTERACTIVE DESIGN

Project 2

Bachelor of Design (Honours) in Creative Media

LIU CHENG RUI (0370930) 

Instructions

Lecture notes

week9

1. Display properties

Function: Display is an important property that controls the layout. All HTML elements have a default display value, usually block or inline.

Block-level elements:

For example, <div> starts on a new line and takes up the entire line width of the parent container.

Inline element:

For example, <span> does not break the paragraph flow and can be nested within the paragraph text.

Other types:

Inline-block: Both the inline feature and the width and height can be set.

flex and grid: For more advanced layout control.

2. Box Model

Structure: Each HTML element is a "box" consisting of the following layers (inside and out) :

Content: The actual content of the element.

Padding: The space between the content and the border.

Border: The border that surrounds the content and inside margins.

Margin: The distance between an element and other elements.

3. Flexbox

Flexbox is a flexible layout based on the box model for responsive design.

Key concepts:

Flex Container: Parent element that contains child elements, declared by display: flex.

Flex Items: Child elements in a container.

Important attributes:

flex-direction: Defines the direction of the main axis (such as row or column).

justify-content: Justify child elements along the main axis (e.g., center, space-between).

Align-items: align child elements (such as stretch, center) along the cross axis.

week10

1. Static (static, default)

Features: Elements are arranged normally according to the document flow, and are not affected by positioning attributes such as top and right.

Purpose: Default behavior, suitable for normal content layout.

2. Relative

Characteristic: The element moves relative to its original position, but still occupies the space of the original position. Other elements are not affected.

Purpose: To fine-tune the position of elements, or as a parent container to provide a baseline for child elements.

3.Absolute (absolute positioning)

Features:

The element leaves the document flow and no longer occupies space in its original location.

Based on the nearest nonstatic ancestor; If no, the viewport is used as the base.

Purpose: To create floating content or cascading layouts.

4. Fixed (Fixed)

Features:

Positioning relative to the browser window (viewport).

The element position remains the same as the page scrolls.

Purpose: To implement elements such as fixed navigation bars or floating buttons.

5.Sticky (sticky)

Features:

Start at the normal position in the document flow.

When you scroll to a set threshold, "stick" to the specified position, which appears as a fixed position.

Purpose: For creating dynamic effects, such as fixed headers or scrolling headers.

Exercises

In the Project 2 assignment, we were asked to develop a software prototype that needed to be changed using software from Figma or Adobe.

Website prototype development homepage  week9

During the early stages of development in Week 9, I mainly chose to design the main page of the prototype website, which includes basic interactive elements such as the navigation bar.

But Mr. Rahman thought that my homepage design was a little too crowded, there wasn't a lot of white space on the page, and the page was not beautiful, so I changed it in the tenth week.

Website prototype development home page modification  week10

The revised web page seems to be much brighter, with pictures and text arranged more regularly.

In addition, I also added some interactive components to make my site look more like a real website.

Interactive element —— button week10

Interactive element —— contact form week10

Interactive element —— navigation week10

After completing the basic interactive components, I worked on the other pages of the site one by one.

Website "About Us" and interactive components  week10

Home page and interactive components  week10

Website "Contact form" and interactive components  week10

In this week, I mainly made and improved the contact form and other pages in the website prototype design.

When I made the page of the contact form, I chose to add some interactive plugins to make it more realistic (in the form of a change in the color of the outline when you click on the white bar and a prompt for the font to move up).

Preparation of contact form  week11

By the time I finished the main page, I felt that my web prototype wasn't rich enough, so I expanded the interactive elements of the home page.

The extended content page of the home page (left to post your ads, right to view local ads)   week11

Extended content page of the main page (Register Personal account)   week11

 

Finally, I will also design the pages that will be displayed after successful submission, because this will make them look more complete.

Prompt page after account or contact form submission   week11

Interactive plugins used when making pages   week11

summarize：

The prototype is designed to enhance the user experience and make the functionality better, and it is designed around easy-to-understand interactions and clear target features. Its key points are:

1. The home page adopts a modular layout, with a flexible grid system (mainly using pictures to achieve the purpose of segmentation) to divide the area, each part has a clear function, so that users can quickly get started.

2. Interactive design: Use small details (such as changes when the mouse hovers over the button, animation effects when switching pages) to engage users and make complex operations simple and clear.

3. Simplicity first: We decided to use the right amount of text and pictures to reduce visual interference, while using a limited number of colors (such as 3-5 theme colors) to increase the visual layer.

Decisions made during development:

1. As the original layout, color and other elements of the website were too old, I wrote in the original design proposal that corresponding changes should be made. Therefore, in the design of the homepage, I changed the previous website background from white to warm orange to enhance the visual beauty.

(However, when I first asked Mr. Lachman about my homepage and the "About Us" interface, Mr. Lachman thought that my homepage navigation bar was too small and not eye-catching, and that the layout of the homepage was too crowded and did not have enough white space and gaps, which would make it look unattractive and unattractive, which Mr. Lachman thought was not good enough.)

2. After getting feedback from Mr. Rahman, I made changes to my web design. First of all, the navigation bar is too small, I enlarged the previous font size and adjusted the distance between each letter element to avoid the loss of beauty due to the size of the font. The second problem is typography and white space. I asked Mr. Rahman for specific suggestions on modification. Mr. Rahman suggested that I simplify the picture and pay attention to the size rhythm of the picture, not the same size, length and width. The most important thing is that I need to adjust the position of the font and the picture according to the grid.

3. After correcting the above problems, I focused on making other interactive elements of the homepage and the contact form. For the production of the contact form, I found some teaching videos from youtube and made the text input box look more realistic under the guidance of the videos. When I was done, I expanded the rest of the interactive elements of the home page (such as "Publish your AD").

How the prototype achieves the goals set out in the redesign proposal:

When drafting the redesign proposal, I mainly focused on changing the text-based design style to a combination of text and images. So when making the design prototype, I added some pictures on the home page and the "About Us" page. Secondly, the proposal also mentioned the problem of improving the collection of user information. In my design prototype, I specially designed the "Contact us" page, and users only need to fill in your questions and your email address and submit them to complete the feedback.

Web Prototyping links:

Website Redesign Prototype - Page 1

Feedback:

This assignment lasted for three weeks. I had no clue about it from the beginning, but I also gained some cognition through repeated exploration and improvement. The first thing is about the design of the website prototype. Secondly, pay attention to the rhythm of pictures and text, that is, do not have too many words or pictures, which will greatly reduce the user experience. Finally, I would like to say that although there were a lot of big and small troubles in the production process, I also thought about ending it, but fortunately I persevered, and tried my best to improve and modify it. In this process, I gained a lot of new knowledge and new tools about interaction design, and I think it was a very memorable experience.