Posts

Final Project Website Redesign

-
Image
  CAVS 55 Website Redesign Code Folder 1. Introduction This project focuses on transforming an approved website redesign prototype into a fully functional, responsive, and accessible website. The main objective was to implement the visual and interaction design decisions made during the earlier stages of the project and bring them to life using front-end web technologies. The final outcome is a live website that accurately reflects the original Figma prototype while following best practices in web design, usability, and performance. The website was developed as a multi-page platform consisting of five main pages: ACT Home, Events, Collections, Contact, and FAQ. Each page was designed and implemented to provide a consistent user experience, intuitive navigation, and a professional visual appearance. The final website is publicly accessible via a live URL hosted on Netlify. 2. Tools and Technologies Used The development of the website relied on standard front-end web technologie...
Post a Comment
Read more

Prototype Development: CAVS 55 Event Page Redesign

-
Image
  figma.com Prototype Development: CAVS 55 Event Page Redesign The objective of this prototype is to translate the CAVS 55 Event Page redesign proposal into a functional, interactive representation that demonstrates improved usability, visual hierarchy, and engagement. The prototype aims to transform the original static and text-heavy page into a dynamic event hub that clearly communicates the significance of the 55th anniversary of the Center for Advanced Visual Studies (CAVS) while supporting intuitive navigation and a more immersive user experience. Overview of the Prototype The interactive prototype was developed using Figma, leveraging components, auto-layout, and interactive frames to simulate realistic navigation. The prototype includes three core pages: Homepage (CAVS 55 Main Event Page) Program Page (Core Content Page) Contact Page These pages reflect the redesign goals by presenting information in clear sections, using strong visual hierarchy, and incorpora...
Post a Comment
Read more

Exercise 3 - Creating a Recipe Card

-
Image
  Spaghetti Carbonara This website is a simple recipe card designed using HTML and CSS. It features a clean and modern layout showcasing the “Spaghetti Carbonara” recipe. The recipe card includes the dish’s title, a high-quality image, a detailed list of ingredients, and step-by-step cooking instructions. The webpage uses a combination of element selectors, class selectors, and ID selectors to style different parts of the page, providing a visually appealing and easy-to-read format. The design includes a soft color theme, rounded corners, hover effects, and a responsive card layout to enhance the user experience. This website serves as a beginner-friendly demonstration of how HTML structure and CSS styling can be combined to create an attractive, functional recipe card. HTML And CSS Code <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0...
Post a Comment
Read more

Project 1 - Website Redesign Proposal

-
Image
  canva     canva   1. Website Analysis – CAVS 55 Event Page (act.mit.edu/event/cavs-55) 1.1 Current Design Evaluation Layout The page follows a standard single-column event layout : site header with navigation, then event title, dates, and descriptive text, sometimes with images in between. act.mit.edu Content is mostly long text blocks , with limited use of visual hierarchy (sections, cards, or clear blocks), which makes scanning harder for users who just want the basics (what / when / where / how). Important elements like date, time, place, program schedule are buried inside paragraphs instead of being visually highlighted (e.g., in a sidebar, box, or icons). Color Scheme The page uses the MIT ACT site palette , which is mainly white background with dark text and a dark header. This is consistent with the rest of the site and feels academic and serious. act.mit.edu However, for a celebration event (55th anniversary of CAVS) , the color scheme ...
Post a Comment
Read more

Simple Personal Profile Page

-
Image
Simple Personal Profile Page: https://eloraby-task1.netlify.app/ Mohammad Oraby Hello! My name is Mohammad Oraby. I’m currently studying Software Engineering and I’m passionate about technology, design, and problem-solving. I enjoy learning new things and creating projects that can make life easier or more interesting. Outside of academics, I love exploring new places, trying different types of food, and meeting people from various cultures. I believe that every experience helps shape who we are and teaches us something valuable about the world. My Hobbies Playing Chess Watching Movies Traveling My Skills Web Development (HTML, CSS, JavaScript) Team Collaboration Creative Problem Solving Personal Profile Page after adding a little CSS:  https://mohamed-eloraby-task1.netlify.app/ Mohammad Eloraby 💻 Software Engineering Student | 🌍 Based in Kuala Lumpur | 🎯 Passionate Learner Hello! My name is  Mohammad Eloraby . I’m currently pursuing my degree in  Software Engineering ...
Post a Comment
Read more

Interactive Design Exercise 1

-
Image
  Week 2 |  Exercise 1 Write your report in e-portfolio Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing your findings and recommendations. What To Have in The Analysis: Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers. D...
Post a Comment
Read more