Interactive Design / Final Project: Design, Exploration and Application
Derin / 0354969 / Design in Creative Media
GCD 60904 / INTERACTIVE DESIGN
Final Project
INSTRUCTIONS
Design, Exploration and Application
FINAL PROJECT
Website Planning
To kickstart the website creation process, I begin by creating a mind map using Miro. This collaborative tool allows me to visually organize my thoughts and ideas in a structured manner. By mapping out the key elements and connections, I gain a clearer understanding of the website's structure and content hierarchy. The mind map serves as a valuable reference throughout the design and development stages, ensuring that the website aligns with my initial concept and goals.
|
| Fig 1.0 Website Mind Map |
I proceeded to create the content in ChatGPT afterwards.
After having an overview of the website, I proceeded with creating a mood board. I initially chose a purple-cyan vibrant color for the website. But after much consideration, I decided to settle down with colors that might resemble paranoia itself.
|
| Fig 1.1 First Mood Board |
My next mood board is inspired by the Cheshire Cat from Alice in Wonderland. The Cheshire Cat from "Alice in Wonderland" can metaphorically represent the concept of paranoia. Just like the cat's ability to appear and disappear, paranoia can make individuals feel constantly on guard and uncertain. The cat's mischievous grin symbolizes the unsettling nature of paranoid thoughts and the sense of being watched or manipulated. But of course it is important to note that metaphors should not diminish the seriousness of mental health conditions or undermine people's experiences.
|
| Fig 1.2 Final Mood Board |
After finalizing the mood board, I moved on to the site mapping process using Procreate. I wanted to incorporate a subtle yet captivating element into the design, so I decided to create a background with eyes. The intention behind this choice was to evoke a sense of being observed without overwhelming the viewer. By carefully balancing the presence of the eyes, I aimed to create an intriguing visual experience that adds depth to the overall design.
|
| Fig 1.3 Sketching |
Prototype Design
Once the planning phase was complete, I proceeded to digitize the design into a prototype using Adobe XD. This step was relatively straightforward as I already had a clear vision for the website. Since the website followed a cohesive theme, designing the remaining pages became repetitive and cohesive.
|
| Fig 2.1 Creating the Website Prototype Design |
The decision to place the navigation bar inside the hamburger icon was a deliberate design choice that I made. This implementation ensures that the navigation bar remains visible as you scroll through the website. By clicking on the hamburger icon, an offcanvas menu will appear, displaying a list of available pages within the website. It's important to note that this menu does not redirect you to another page but provides a convenient way to navigate within the current page. This approach offers a streamlined and intuitive user experience, allowing visitors to easily access different sections of the website without disrupting their browsing flow.
|
| Fig 2.2 Navigation Icon |
While the content surrounding the topic of paranoia on this website is generated by ChatGPT, it is important to note that the helplines and hotlines provided are real and can offer genuine support to those in need. The inclusion of these resources aims to provide valuable assistance and guidance for individuals who may be experiencing paranoia or related mental health challenges. It is crucial to reach out to the appropriate helplines for professional help and support.
|
| Fig 2.3 List of Helplines/Hotlines |
Here is the final result for the prototype!
Fig 2.4 Final Prototype Outcome for Paranoia 101 - PDF
Coding
I began the process by establishing the HTML structure for pages 1 to 4 before moving on to the index page. Once the foundational elements were in place, I proceeded to incorporate the essential meta tags for character encoding and configuring the viewport. These steps laid the groundwork for a well-structured and properly formatted website.
 |
| Fig 3.1 HTML Markup |
Afterward, I gathered all the required CDNs and start linking external resources such as CSS and JavaScript files. These resources include the Bootstrap CSS and JavaScript, Font Awesome icons, and Google Fonts for Montserrat and Roboto fonts. Font Awesome is useful for creating images that matched the text size without the need to manually adjust width or height (basically for convenience purposes). An example of this implementation is the icon-like image beside the text in the Helplines and Hotlines section of page 4.
 |
| Fig 3.2 Bootstraps and Font Awesome |
After linking everything respectively, I built the navigation bar. This navigation section is designed to create a fixed-top navbar with an offcanvas menu for a website. The navbar is located at the top of the page and contains a toggle button represented by the three horizontal bars icon (fa-solid fa-bars). When clicked, the toggle button triggers the appearance of the offcanvas menu, which slides in from the right-hand side.
Each navigation link is wrapped within a <li> element with a corresponding <a> tag, styled with the "nav-link nav-font" classes. Additionally, there is a floating "back to top" button at the bottom of the offcanvas menu, represented by an upward-pointing caret icon (fa fa-caret-up). When clicked, this button quickly scrolls the user back to the top of the page.
 |
| Fig 3.3 Offcanvas menu |
The web page consists of various sections, each tailored to its content and structured using HTML elements. CSS classes are applied for styling, and Bootstrap components ensure responsiveness across devices. One notable section is the "mobile gap," strategically designed to create spacing and alignment for smaller screens. It utilizes container-fluid with d-flex class for flexibility and contains a nested div with the "container" class. The sections incorporate informative text, images, and buttons, effectively presenting information about paranoia. The page is completed with a footer containing links and social media icons, something I added last minute which differs from the initial design.
 |
| Fig 3.4 Sections |
I created a responsive website layout using Bootstrap's classes, so that it adjusts seamlessly on different devices. By including meta tags for character encoding and viewport configuration, the website renders optimally across various screen sizes. The navigation section features a fixed-top navbar with a toggle button that activates an offcanvas menu on smaller screens. Using custom CSS, the design remains consistent and user-friendly. Additionally, container classes and media queries ensure proper content alignment and spacing. The result is a responsive website that provides an optimal user experience on both desktop and mobile devices.
 |
| Fig 3.5 Bootstrap's Responsive Classes |
Final Outcome
At this point, I had nearly completed the website. As a final step, I thoroughly checked its appearance on various screen devices and made the necessary adjustments to ensure optimal spacing and overall visual appeal. Here is the result!
https://paranoia101.netlify.app/index.html
.png) |
| Fig 4.1 Offcanvas Menu - PNG |
 |
| Fig 4.2 Index.html - PNG |
 |
| Fig 4.3 Page 1 - PNG |
 |
| Fig 4.4 Page 2 - PNG |
 |
| Fig 4.5 Page 3 - PNG |
 |
| Fig 4.6 Page 4 - PNG |
Fig 4.7 Final Outcome for Paranoia 101 - PDF
FEEDBACK
Great design. Interesting choice for the navigation, it works.
Week 14
Looks okay. It should look consistent.
REFLECTION
This project has been an amazing learning experience for me as a designer. As I made progress, I couldn't help but feel proud to see my ideas come to life. Achieving success in implementing interactive elements and navigational features (hell yeah!!) was incredibly rewarding. However, I'll admit that there were moments of frustration and mini breakdowns when I got stuck on coding challenges. Thankfully, my friends were always there to generously share coding tips, and my family provided much-needed mental support. Despite the challenges, this project gave me a deeper appreciation for the intricacies of creating functional and visually appealing websites... I hope I will never have to code again 🚬.
