Interactive Design / Project 2 - Website Redesign Prototype

Omar bin Shafik / 0371439

Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 2 - Website Redesign Prototype

Website Redesign Prototype for the Yale School of Art website
For the redesign, I wanted to go for something that was more modern looking than the current website. I wanted to clean things up and give the website a simpler and easier to understand appearance, making it easier to navigate and understand what each element on the page is. I also decided to use a simple colour palette that would be shared across all pages which consist of more toned down and cohesive colours since the current colours the website uses are quite bright and inconsistent in their usage. I also decided to use a simpler and more modern font and made the text a little bigger to make it easier to read for viewers. I also wanted the website to work similar to social media websites like Reddit or X, with students and staff being able to interact with each other through forums posts and comments. I want the gallery to be somewhere students can share their works on the website to be able to receive comments and feedback from other students and teachers. The forums would be where faculty can go to interact with each other through forums posts. 

For the home page, I wanted to keep things as simple as possible. The current website's home page feels like there's too much information being given all at once. I wanted to simplify it by only putting a few elements in, with each element of piece of information having its own section or sharing a section with one or two other elements or pieces of information. I divided the home page into 4 main sections, a main pages section that shows off the pages that are regarded as some of the most essential to the website, a map and school tour section which provides a map of the school and video school tour, a news and events section which provides information on events and the dates on which they occur and announcements made by the school, and a weekly student showcase section which displays works submitted by students that have been handpicked by staff and faculty to be displayed on the website every week.


Fig 1, Prototype Main Page

The gallery page would display students' works that have been submitted throughout the years from when the website was first made. Each week, faculty would hand pick several works from students to be displayed on the home page. Each work of art would be clickable to display a bigger version of the image and links to student profiles would be provided to visit as well. In the students profiles would be link to socials that students have set up themselves. The works would also be separated into year submitted to show students progress throughout the years.


Fig 2, Prototype Gallery

The forums would be where faculty would go to to converse about things currently going on in school or to just connect with each other. This would be the main communication hub between school faculty. It could also be used as a way for students to get in touch with teachers for feedback or opinions on certain matters or assignments. 

The UI and UX improvements are visible with the top bar and pop out side menu. These serve to clean up the menus in the website and to make it simpler to navigate. The main pages are listed on the top bar and other more specific pages can be found in the side menu. I also want to make some of the image panels on the pages clickable to navigate to related pages so that the website feels more intuitive. I also made it so that the school logo in the top bar would be clickable to send the viewer to the home page.


Fig 3, Top Bar and Side Menu

Comments

Post a Comment

Popular posts from this blog

Advanced Typography: Task 1 Exercises

Image
23.4.2025 - 21.5.2025 / Week 1 - Week 5 Omar bin Shafik / 0371439 Advanced Typography / Bachelor of Design (Honours) in Creative Media Task 1 / Exercises LECTURES Week 1: Typographic Systems According to Elam, there are 8 major variations: Axial Radial Dilatational Random Grid Modular Transitional Bilateral Can be complex because they are dependent on communication to function properly. Additional aspects like hierarchy, order of reading, legibility and contrast also come into play. Typographic systems are essentially a set of rules that can be followed to help with decision making. This can take away intuition in some ways, it also serves as a solid framework that helps learners be guided while developing their own intuition in their explorations. ...
Read more

Digital Photography and Imaging - Digital and Physical Collages

Image
22.04.2024 - 14.06.2024 / Week 1 - Week 6 Omar bin Shafik / 0371439 Typography / Bachelor of Design (Honours) in Creative Media Digital Photography and Imaging LECTURES Week 1:  We were given a briefing/introduction to the module and what we would be doing for the semester. We were also tasked with our first task which was composing an image with magazine cutouts. Week 2:  Since the air conditioning still isn't running, our class was cut short. We were taught on the rule of thirds that we could use to make our images easier to look at and how to use it to our advantage while composing the image. Week 3: We learned about the basic controls of photoshop but the power cut out around one and a half hours into the class so it had to be cut short again.  Week 4: We went through the basics of photoshop and were tasked to create digital collages for our assignment. Week 5: We learned about how to shoot photos and about how lighting can affect the ph...
Read more

Video and Sound Production - Final Project

Image
Week 9 - Week 14 / 18 June 2025 - 23 July 2025 Omar bin Shafik / 0371439 Video and Sound Production / Bachelor of Design (Hons) in Creative Media Instructions Final Project For the final project we had to go through a checklist of things to do. We had to make a shot list, draw up a storyboard, film everything, and edit together a short video and we needed to use one kind of visual effect in the video. I was grouped up with Racheal for this Project. I made the shot list and storyboard for the video. After a few consultations with Mr. Martin, we made the story for the video better. Shot list: argument flash back sc1 sh1 front, medium close up mc walking to class sc1 sh2  3/4 low angle, medium flash back to mc arguing with parents sc1 sh3 3/4 eye level, medium close up mc shaking her head, getting the thought out of her head Classroom sc2 sh1  side, medium studying with headphones on/earpho...
Read more