Interactive Design — Project 1 : Prototype Design
24.4.2023—11.5.2023 (Week 4—Week 6)
Rachel Madeline Purwanto / 0356994
Interactive
Design / Bachelor of Design (Hons) in Creative Media
Project 1 :
Prototype Design
❥INSTRUCTIONS
❥TASK
For our first project, we are instructed to create a landing page for an existing website that we feel has a design problem. A landing page is the first page that visitors see when they arrive at a website, which is crucial to make a good first impression. As we redesign the website, paying attention to improve the user experience and address the design issues identified in the original website.
Instructions
- Choose an existing website with design problems that you would like to address.
- Identify the areas of the website that needs improvement.
- Develop a concept for your landing page that addresses the design issues and improves the user experience.
- Create 4-5 wireframes of your landing page design.
- develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD)
Requirements
- Landing page should include a clear and concise headline that describes the purpose of the website.
- Landing page size width is 1366 px.
- Landing page should include a call-to-action (CTA) button that directs users to the most important part of the website.
- Should be visually appealing and easy to navigate.
- Page should adhere to web design best practices, including accessibility and usability
1. CHOSEN WEBSITE
The website I chose is Suzanne Collins' website. As I was familiar with
her books as well, looking at the website I knew the colour scheme didn't
go hand in hand with most of her works and that the website has an old
fashioned look since it hasn't been updated since the early 2000s.(https://www.suzannecollinsbooks.com/index.htm)
Fig 1.1 Suzanne Collins website
Design Concept
Purpose of the website’s landing page : promote her new released book as well as her other books, including her biography.
Purpose of the website’s landing page : promote her new released book as well as her other books, including her biography.
- It isn't user-friendly and lacks information on the books
- Instead of putting information or a synopsis of the book which could catch the viewer’s interest, the home page only shows its book reviews, which would make the viewer lose interest easily
- No clear/concise hierarchy within the text that presents the information
- Doesn't have a clear structure or organization, contains irrelevant content.
- Cluttered with unnecessary amount of reviews in a long string of text
- Poorly labeled works and unintuitive terminology to describe the content (ex: Books are more intuitive than Works since users go on the website to check out the author's books)
- Information is incomplete, lacks visual cues and has broken links.
- Visual design is considered unprofessional because it doesn't properly portray the author and her books. Images aren't next to content related to them and there are large amounts of white space.
- Poor colour contrast especially for the text on background.
- Colour scheme is consistent but does not go hand in hand with the colour theme of Suzanne Collins books
- No visual hierarchy, headings/subheadings and links can be mistaken for one or other by visual indications such as colour. Sans-serif and serif fonts are used interchangeably with the headings and subheadings.
- It lacks credibility. There isn't any contact information or footer to let users know the website is updated and trustworthy.
- No clear/distinctive CTA button.
- The amount of text and links on the right sidebar is overwhelming and links to external websites where you can buy her books, but due to the amount of text there is a low chance that people would actually pay attention or even bother to check them out or read them. The quick links are also unnoticeable due to it being positioned at the bottom right side of the page.
My design idea features a more sophisticated but straightforward design including visual hierarchy by emphasizing on her new released book or well-known books and enhancing them by including a large image of it and a brief description of the book with short reviews. I will divide the biography, well-known novel series and new releases into different sections and keep the amount of words at a minimum to avoid overwhelming the viewers. I will use 2 fonts and its respective text sizes and weight to distinguish between each section and keep the words at a minimum amount but also include the relevant information about the book. The colour scheme Im going for would is mainly dark green and orange which fits the theme of the Hunger Games novels and the Underland Chronicles novels. A distinctive main CTA button will be made in a separate colour as the other side CTA buttons. I will add contact information and a footer at the bottom of the page to enhance its credibility and so fans could keep in touch with the latest news on books, events, and news.
2. WIREFRAMES
Before starting on the wireframes, I took inspiration from several
author/book websites that piqued my eye. Upon observing the rough layouts
of several generic author/book websites I took note of its content that I
found on most of the websites which are author biography, new releases,
book series (if available), newsletter to keep fans updated, and contact
information/socials.
Fig 2.1 Wireframes
3. DIGITIZATION ON FIGMA
I decided to go with the fourth wireframe having the navigation bar and new released books displayed in a carousel at the top of the page, and as you scroll it'll show her 2 novel series. Below that is the author and a brief introduction on her biography to give the viewers context and a button at the bottom that says read more. At the bottom of the page features a newsletter where fans could stay in touch with the latest books, news, and events and also check out their social medias.
Fig 1.1 Progress in Figma
Fig 1.2 Progress in Figma
Fig 1.3 Progress in Figma
As I got this far, I was given feedback that the font of the subheadings and headings are inconsistent throughout the website and that the headings should be kept as the same font and same goes to the subheadings as well. I removed the read more button since there was already an order now button that leads to a page where they could obtain further information on that book so the read more button is unnecessary. I also decided to include at least 2 of the book's award to convince viewers to buy it and avoided putting an overwhelming amount of reviews unlike the original website.
Fig 1.4 Progress in Figma
Drop shadow was added on each of the book covers and the text as to make it stand out from the background and it adds visual dynamism as well. To blend and create this gradient effect between one background to another and to avoid it clashing from the visual elements, I did a layer blur effect on them.
Fig 1.5 Final Design for Website
❥FEEDBACK
Week 5
- Make sure the font for the headings are
consistent, don't use different ones
- Make sure you have a
clear primary button and a secondary button
- Remove the 3 lines for
the menu on the top right corner if you already have the categories on the
top bar
- Remove the borders of the image
- Add header
above books
❥REFLECTION
This project is generally a fun and challenging at the same time, where we are introduced to a new program called figma, a program where you could design your website. This project gave me the opportunity to explore various aspects of figma and the different tools and effects. Although the project was only meant to be for us to adapt to working with figma to create the website, I decided to further experiment on the animation and interactive aspects of the website and created a carousel, which was fun.
Comments
Post a Comment