Interactive Design - Project 2
.png)
In this assignment, we were tasked with redesigning a poorly designed website to make it more presentable, responsive, and functional, with clear navigation and hierarchy. Based on the proposal I submitted, I will address all these issues by creating a minimalist and clean website. At the same time, I will retain the imagery, logo, and information from the original website. While the website currently lacks sufficient information and features low-quality images, I will supplement it with additional resources found online about the Riverside Art Center.
Before moving on to my redesign website, kindly click here to access my proposal from Project 1.
Before starting my website redesign, I created wireframes in Figma to visualize how the website will look. From the wireframes, I selected the ones that looked more presentable and suited an art gallery website to create a minimalist yet artistic design. I have created several wireframes for my design through a process of trial and error. Below are the initial wireframes I developed.
Wireframe
Assets
I created assets such as typography and a color palette and saved them in a library in Figma. Below are the assets I primarily used in my design. Since the name of the organization is Riverside Art Center, I used calm blue to represent the river, then complemented it with beige, dark blue, and grey to balance the blue color. For the typography, since this website is related to art, I chose the serif font Cormorant Garamond for the header to create a classic, elegant feel that aligns with the institution's identity. For the paragraphs, I used Muli, which is highly readable and also conveys professionalism.
Asset
Knowing that the website of Riverside Art Center has very limited information, especially in terms of imagery, therefore I browsed online to find more images related to the organization. Most of the images I used in my redesigned website are not originally from the art center's website, as those images were too outdated. Instead, the images are primarily from their official Facebook page and some artists' portfolio websites to showcase their artworks.
Riverside Art Center's Facebook page
Terri Lynne Blosser's Instagram
After deciding on my assets and imagery, I began working on the design. Before finalizing it, I created several different versions, especially for the landing page, to determine which one was better in terms of hierarchy, layout, and navigation. Here are some initial designs I created. They lack clear sections and proper hierarchy.
Initial Design
However, while working on the content for the pages, I realized there was very insufficient information, especially for the About page. The original website’s About page only included a very brief background of their organization and three images. After consulting with Mr. Shamsul, he allowed me to use AI to generate content for it. As a result, I created a more detailed About page and am happy that my website is now complete with all the information I needed. Most of the content was retrieved from the original website, its official Facebook page, and external sources about their organization. Finally, my redesign website concludes with 5 pages, which are Landing Page, About, Our Artists, Programs, Join Us.
Redesign website overview
Landing Page
- A video introduction showcasing the Riverside Art Center to provide a brief overview of the organization.
- The organization’s mission and purpose to explain their goals and activities.
- Show a short introduction of their main features that they provide.
- Gallery of their organization.
- Location and opening hours.
- Menu: About, Our Artists, Programs, Join Us
Landing page (Please click into it if the preview is not working)
About
- Background of the organization.
- Vision and mission of the organization.
About
- Artist's profile such as profile picture, bio and background.
- Artist's gallery of their artworks.
- Artist's statement on their inspiration and creative processes.
Our Artists (Please click into it if the preview is not working)
Programs
- Showcasing event calendar of upcoming classes, exhibits or events.
- Brief details on the date, time and title of the programs.
Programs
- A list of form to allow visitors to fill in to become a member
Join Us
Reflection
As a conclusion, I am quite satisfied with my final outcome. Compared to the original design, it looks significantly better, with clear navigation, functional menus, a structured hierarchy, and a tidy layout. Redesigning a website is not an easy task, as many aspects need to be taken into consideration. While addressing the issues present in the original website and solving them, it is also important to ensure the overall design was visually appealing.
During the redesign process, I faced challenges, such as structuring each section with a clear hierarchy. It took several trials and errors to create a well-organized website layout. Although wireframes were prepared beforehand, there were instances when incorporating imagery, typography, and content did not look as expected. Additionally, I had to consider the perspective of users, asking myself what kind of information they would need to see at first glance. To ensure the redesign met everyone's expectations, I also asked some friends to try out the new website.
Overall, I found trial and error to be a crucial part of this assignment, helping me refine the design to achieve the best outcome. By continuously testing, learning from mistakes, and seeking feedback from others, I was able to develop a visually appealing website with a good user experience.
.jpg)
.png)
Comments
Post a Comment