PROJECT 2 | WEBSITE REDESIGN PROTOTYPE
05/11/2025 - 27/11/2025 (Week 7 - Week 10)
LIST OF CONTENT :
LECTURE NOTES
WEEK 8
POSITION VALUES
1. STATIC (Default)
Characteristics:
- Default positioning for all HTML elements
- Elements flow in normal document order
- NOT affected by top, right, bottom, or left properties
- Elements appear where they naturally fall in the HTML structure
Syntax: .static-element { position: static; }
Use Case: Standard document flow (most common scenario)
2. RELATIVE
Characteristics:
- Element positioned RELATIVE to its normal position
- Can use top, right, bottom, left to offset from original position
- Original space is PRESERVED (other elements don't move into its space)
- Element is moved visually but occupies original layout space
Syntax: .relative-element { position: relative; top: 20px; /* Moves 20px DOWN from normal position / left: 10px; /Moves 10px RIGHT from normal position */ }
Use Cases: - Minor positioning adjustments
- Creating positioning context for absolute children
3. ABSOLUTE
Characteristics:
- Removed from normal document flow
- Positioned relative to NEAREST POSITIONED ANCESTOR (position other than static)
- If no positioned ancestor exists, positions relative to viewport
- Does NOT preserve space in layout
- Other elements behave as if it doesn't exist
Syntax: .absolute-element { position: absolute; top: 50px; left: 100px; }
Use Cases: - Overlays
- Tooltips
- Dropdown menus
- Elements that need precise positioning
IMPORTANT: Parent element typically needs position: relative to serve as reference point
Characteristics:
- Positioned relative to VIEWPORT (browser window)
- STAYS IN PLACE during scrolling
- Removed from document flow
- Always visible at same screen position
Syntax: .fixed-element { position: fixed; top: 10px; right: 20px; }
Use Cases: - Fixed navigation bars
- Sticky headers
- "Back to top" buttons
- Chat widgets
- Cookie banners
Characteristics:
- HYBRID of relative and fixed positioning
- Initially positioned in normal flow (like relative)
- Becomes "stuck" at specified position when scrolling reaches threshold
- Switches between relative and fixed based on scroll position
- Requires threshold value (top, right, bottom, or left)
Syntax: .sticky-element { position: sticky; top: 20px; }
Use Cases: - Table headers that stick while scrolling
- Section headings in long articles
- Sidebar navigation
- Floating action buttons
NOTE: Element becomes sticky when scroll position reaches the specified value
PROJECT 2
INSTRUCTIONS
For Project 2, we needed to develop a prototype for our chosen website following our proposal in Project 1. I chose Assisi Palliative Care (ASPAC) as my website to redesign. I chose to make my prototype in Figma as I have experience using the software.
Key Pages To Include:
- Homepage
- Core Content Page
- Contact Page
PROCESS WORK
I designed the homepage with a dramatic full-screen hero section featuring a monochromatic background image and bold typography displaying "ASSISI PALLIATIVE CARE" with the tagline "CARE BEYOND CURE. WHERE HOPE MEETS HOME." This approach directly addresses the original website's static, plain layout by creating an emotionally impactful first impression that immediately communicates the organization's mission while maintaining dignity and professionalism. I included a prominent "Let's get in touch!" call-to-action button to encourage immediate engagement, addressing the proposal's goal of clearer calls to action. Below the hero section, I created a four-card grid layout showcasing ASPAC's core services—Pain Management, Spiritual Care, Emotional Support, and consultation services. I used a color-coded system alternating between soft blue, dark slate, coral, and warm beige backgrounds to create visual distinction while maintaining cohesion, directly responding to the original site's inconsistent color usage and lack of visual hierarchy.
For the Our Story page,
I redesigned the contact page with a split-screen layout featuring the compelling headline "WANT TO WORK WITH US? REACH OUT TO US HERE!" on the left, balanced by a clean contact form on the right. The form includes clearly labeled fields for Full Name, Email, Subject, and Message, with a sage green "SEND" button that maintains brand consistency.
The navigation bar includes Home, Gallery, Events, Our Story, and Contact Us, with a light/dark mode toggle in the top right corner. I also added a "back to top" button for seamless navigation, addressing the original site's issue of subdued footer elements that were easy to overlook.
Figma Working File : Working File
Fig 1.1 Figma Working File
Prototype Link : Prototype View
*Note: There is a slight lag when viewing from embeded prototype. Click link for smoother viewing.
Fig 1.2 Website Prototype
DESIGN DECISIONS & OBJECTIVES
The original site suffered from a static, underdeveloped layout with plain text blocks, minimal visual hierarchy, and lack of engaging elements like hover effects or animations. I addressed this by creating a dynamic, visually rich prototype with full-screen hero sections, grid-based card layouts, and a light/dark mode toggle that provides interactive feedback and user control. The original website's color scheme was inconsistent, with disconnected sections and weak contrast that made certain text and buttons hard to notice or just feel flat. My prototype uses a cohesive color system, creating clear visual distinction between sections while maintaining harmony. I also added a dark mode toggle feature. The toggle between color and monochrome modes addresses accessibility concerns while giving users control over their viewing experience—particularly important for visitors in emotionally sensitive situations or with disabilities. Following that, I included responsive hover states and consistent header placement across all pages.
<< Project 1 Project 3 >>