5/11/2025 - 25 /11/2025 / week 7- week10
YANG SHUO / 0384037
Bachelor of Design (Hons) in Creative Media
Interactive Design / Project 2
LIST
LECTURE
Box Model
Display Property
- Controls how HTML elements are shown and arranged on a page.
- Each element has a default display type, usually block or inline.
- Block elements start on a new line and take the full width.
- Inline elements stay within the text line and do not break the flow.
- Other useful display types include inline-block, flex, and grid.
Box Model
- Every HTML element is a box with four layers: content, padding, border, margin.
- Padding adds space inside the box.
- Border surrounds the padding.
- Margin adds space outside the border.
- The box model is essential for controlling spacing and layout.
Position Property
The position property controls how an element is placed
in its containing element.
Position
- It determines the element’s relationship to surrounding elements and how it moves or stays in place.
Static
- Default behavior for most elements.
- Follows normal document flow and is not affected by top/left/right/bottom.
- Stays in the normal flow but can be shifted relative to its original position using top/left/right/bottom.
- Removed from normal document flow.
- Positioned relative to the nearest ancestor that is not static; if none exists, positioned relative to the viewport.
- Stays in a fixed position relative to the viewport.
- Does not move when the page scrolls.
- Behaves like static at first.
- When scrolling reaches a defined point, it becomes fixed and stays in place while scrolling continues.
INSTRUCTION
EXERCISE
Project 2 | Website Redesign Prototype
- Original website: https://www.pennyjuice.com/
- Prototype redesigned in Figma:
Brief
For this project, I turned my redesigned Penny
Juice website into an interactive prototype. My
goal was not only to show how the pages look,
but also to let users experience how the website
would actually work. I wanted the prototype to
allow users to find information easily, switch
between pages smoothly, and understand the
ordering process without confusion.
Visual and Layout
I kept the overall design clean, consistent, and
well-structured. I adjusted spacing, layout, and
content order to reduce reading pressure and
make key information easier to understand. The
original website looked outdated and had
high-saturation colors that made reading
uncomfortable. The redesigned version uses
softer orange and teal tones to keep the brand
feeling friendly while improving readability.
Navigation and Information Structure
One of the biggest issues with the old website
was unclear navigation. There were too many
links and it was hard to know where to start. In
my redesign, I simplified the navigation to four
main items: Home, About Us, Products, and
Contact. The navigation stays at the top of
every page and has hover feedback to make the
browsing direction obvious. I also added
dropdown menus for About Us and Products to
reduce unnecessary clicks and help users reach
their target information faster. I expanded the
website content as well by adding product
philosophy and recipe ideas inspired by the
juice, to increase user interest.
Overview of the Three Main Pages
The Homepage focuses on letting users
understand the brand quickly. The slogan is
placed in a prominent position, and the product
advantages are divided into three clear
sections. Each block combines text and images so
users can browse comfortably without feeling
overloaded.
|
| Fig 1 Homepage |
The About Us page introduces the company
in more detail. Instead of only listing product
information like the original website, I added
recipe content related to concentrated juice to
create more buying motivation.
|
|
Fig 2 About Us page |
For the Contact page, I designed a form
that users can type into. It includes fields
such as name, email, address, and order details.
I built the form using components that simulate
real input. When a user clicks on a field, a
typing state appears. The form does not submit
data yet, but it shows how online ordering could
work in the future.
|
| Fig 3 Contact page |
Interaction Experience
To make the website feel more dynamic, I added
basic interactive feedback. Buttons and
navigation items change on hover. These details
help users understand what is clickable and
reduce uncertainty while browsing. They also
make the overall experience more engaging.
Conclusion
Overall, this prototype improves the key
problems of the original website: unclear
navigation, messy content structure, and
outdated visual style. The redesign follows a
user-focused approach, aiming to make the
website easier to understand and easier to use.
Although this prototype is not a fully coded
website yet, it clearly demonstrates how the
redesigned version could function in terms of
information flow and user journey.
REFLECTIONS
Strengths
I think my biggest strength in this project
was improving the clarity and usability of the
website. I managed to simplify the navigation,
organize the content more logically, and make
the user journey easier to follow. I also
learned how to use components, variants, and
interactions in Figma, so the prototype
includes hover states, dropdown menus, and a
simulated form. These details make the
prototype feel more realistic and more helpful
for understanding how the final website could
work.
Weaknesses
One weakness I noticed is that I spent too
much time on visuals at the beginning. I kept
adjusting colors, spacing, and layout, which
left less time for building the actual
prototype and interactions. I also realized I
sometimes think more like a designer than a
user, which can lead to decisions based on
appearance instead of usability.
Reflection
At first, I didn’t really understand the point
of prototyping and felt lost about where to
start. I thought the goal was only to make
something that looks nice. As I kept working,
I slowly understood that the real purpose is
to test the user experience and make sure
people can find what they need smoothly. This
project helped me shift from “designing static
screens” to “designing an experience,” and it
made me feel more confident in UX design.
评论
发表评论