Final Project

 2024.11.26 - 2025.1.7 (Week 8 - Week 14)

Khan Saif / 0367438

Interactive Design / Bachelor's Design in Creative Media / Taylor's

LINK TO THE REDESIGN OF CNN

BRIEF REPORT:

Navigation/Footer:

The navigation bar is carefully organized into two distinct sections to enhance user experience and streamline access to key features. The primary section contains essential elements, such as the CNN logo, main navigation links, and utility buttons for search and sign-in, providing easy access to the most commonly used parts of the site. The secondary section is dedicated to additional categories, including "Global Travel" and "Tech," offering further navigation options for users with specific interests. By utilizing flexbox, the design ensures that both sections adjust fluidly, maintaining a responsive layout across a wide range of screen sizes, from desktop to mobile devices.

To boost interactivity and modernize the design, hover effects are integrated throughout the navigation elements. These effects include smooth scaling of buttons and icons, along with subtle color transitions, which create an engaging experience for users as they interact with the navigation items. These animations not only improve usability but also contribute to the overall sleek and contemporary aesthetic of the site.

At the bottom of the page, the footer is designed to complement the overall aesthetic with a gradient background, matching the bold color scheme. It also includes interactive links that offer users quick access to essential policies, terms, and additional information. This footer ensures that users can navigate easily to important sections of the site, rounding out the design with both functionality and style.

Main Page (Index.html):

The "Latest News" section is designed to immediately capture attention, using a bold red-to-black gradient background that aligns perfectly with CNN's iconic branding. This section prominently features a breaking news headline, paired with relevant images and navigation arrows, allowing users to easily browse through the latest stories. The layout is thoughtfully structured to maintain visual balance, drawing the user’s focus directly to the most important and current news.

The "Featured Section" offers a practical design with a sidebar for easy navigation, complemented by a content area showcasing images and brief descriptions. This layout emphasizes user accessibility by incorporating category markers and smooth hover transitions, enhancing the overall navigation experience. These design choices ensure that users can quickly find and explore content of interest while maintaining a clean, organized interface.

In the "Top Stories" section, a responsive grid layout is employed, effectively displaying multiple stories in a uniform and structured manner. This layout is versatile, ensuring that content scales smoothly across a variety of screen sizes, from desktop monitors to mobile devices. The responsive nature of this design guarantees consistency and usability regardless of the device being used to view the site.

About Page (ABOUT CNN) (protoabout.html):

These rectangles are styled using the .rectangle-1, .rectangle-2-left, and .rectangle-2-right classes, which serve as visual focal points, drawing attention to the most important content on the page. The use of the flexbox layout, through the .flex-container class, guarantees that elements are properly aligned and spaced, contributing to a clean and organized structure. Additionally, this layout is responsive, meaning it adapts seamlessly to various screen sizes, ensuring a consistent user experience across devices.

Typography plays a significant role in this design, with clear and uniform typefaces used throughout. The 'Anek Devanagari' font is applied to both headers and paragraphs, offering a modern and readable look. The headers (h1 and h2) are differentiated through varying font sizes and bold styles, establishing a clear content hierarchy that guides the reader’s attention. The h2 tags are further enhanced with a subtle text shadow, improving readability and adding an extra layer of visual interest to the design. Meanwhile, the paragraphs are centrally aligned with well-balanced margins, ensuring the text appears neat and easy to read.

In terms of responsiveness and usability, the code is designed to provide an optimal viewing experience across different devices. The background is set to cover the entire screen, ensuring that the background image fills the available space without repeating. This contributes to a clean and polished look, regardless of the screen size. The background image is positioned in the center, which further enhances the overall aesthetic of the page. Text within the paragraphs is neatly aligned, and the content is structured in a way that allows for a smooth and natural flow for the reader. 

Sign In (SIGN IN) (Sign In.html):

Inside the container, there is an image of the CNN logo, followed by a heading that invites users to sign in. The form includes labeled input fields for both email and password, with appropriate styling for readability and ease of use. The labels have padding, and the input fields have a consistent size and border radius to match the overall aesthetic. The button, designed in black with white text, stands out as a clear call to action, encouraging users to sign in.

REFLECTION:

Throughout the course I have been attending, I consistently focused on evaluating my performance and engaging in self-development as I progressed with the project. Seeking constructive feedback from my classmates and instructors played a crucial role in identifying areas for improvement. This input allowed me to better understand what specific aspects of my work needed attention and how I could enhance them based on the user experience.

As a result, I was able to develop a well-constructed website that aligned with the expectations and needs. My experiences reinforced the significance of adopting a user-centered design approach and highlighted the critical role that feedback plays in refining and improving a project. Furthermore, this process underscored the importance of maintaining a continuous lifecycle throughout the development phase to ensure that the final product is both functional and user-friendly.