Project 2 | Website Redesign Prototype

Task Introduction

This week, we need to develop a prototype for the redesigned website. The prototype must include interactive elements. We need to create three pages: a homepage, a core content page (at least one), and a contact page.

Visual Reference:



Brief introduction of the prototype:

IndieMusicReview.com is an online music review and discussion website for independent and non-mainstream musicians worldwide, focusing on album, single, EP, live performance, music video reviews and artist interviews.Users can browse and post reviews, view articles about artists or albums, and listen to music.


Prototype base page

Preview page

Displays the website name and description, website purpose and target audience, and quick redirection.

Home page

View event announcements, recommended related news, and popular articles.

Album and music page

This showcases a collection of recently popular albums, with related music recommendations below.

Article page‘

Clicking on an event or review article will redirect you to the article's content page. This page features the music, artist, band, or album being reviewed, and includes a quick playback interface.

Evaluation Release Page

On this page, you can publish reviews or apply to join the review team by filling in your name, email address, and review content.

About Us Page

This page contains a basic introduction to the website and promotional images and text.



My website optimization focuses on increasing the readable area and improving the old layout.A preview page has been added, and navigation, typography, fonts, and buttons have been optimized.

The original layout was outdated, so I redesigned the text and image layout, adding vitality to its overly rigid arrangement. While maintaining neat edges, I broke up the layout and readjusted the positions and boundaries of the text and images.

The original website's navigation was awkwardly positioned, so I moved it to the top, making it more prominent and larger, and aligned the search box and text.

Add preview pages to showcase the website's style and theme. Include large preview images on important pages so that users can quickly understand the main content by clicking on these pages.


Final Prototype

Prototype Link:

https://www.figma.com/design/pqvwtHRBtPwJPhi4CLSoDk/Untitled?node-id=0-1&t=zdhk3PwJnqDxAAlU-1

Display link:

https://www.figma.com/proto/pqvwtHRBtPwJPhi4CLSoDk/Project-2-%7C-Website-Redesign-Prototype?node-id=0-259&p=f&t=K5PE5QmSUf8DluFc-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=0%3A259

Comments

Popular Posts