Interactive Design - Project 2 - Website Redesign Prototype
16/10/2025 - 2/11/2025 (Week 7 - Week 10)
Te Li Wen (0367811)
Design Principles - Bachelor of Design in Creative Media - Taylors University
Project 2 - Website Redesign Prototype
Table Of Contents
- Lecture
-
Project 2 - Website Redesign Prototype
- Feedback
- Reflection
Lecture
Week 8
<iframe
src="https://drive.google.com/file/d/1YhPBAOYZOHIrx1ludkTF2HSidd2GaV6z/preview"
width="640" height="480" allow="autoplay"></iframe>
Project 2 - Website Redesign Prototype
On the first week we were tasked to choose a website which isn't up to date
anymore. My choice of website was Suda On Line
Figure 1.0 Screenshot Of Suda On Line Home Page
Here is the redesign proposal slides
<iframe
src="https://drive.google.com/file/d/1czhoK8pUYylut5RrBStCLjx7lXptHaT9/preview"
width="640" height="480" allow="autoplay"></iframe>
Prototype Brief
The Suda On Line website is a lexicography website where they translate
ancient writings. This website gives the user immediate full excess tho the
entries with or without registering into the website.
To put it simply, users are free to use the website as a way to translate
ancient writings into English translations whenever they want with a search of
a button. Those who registered as guests, would receive more excess to
advanced search features that includes Greek text. Editors on the other hand
who had registered, would be able to participate in the ongoing work of the SOL, if they are approved by the Managing Editors with appropriate qualifications.
For the prototype, there are 8 pages which were developed:
1. Home Page
- Small introduction ablut Suda On Line
2. About
- History of Suda On Line
3. Features
- Explanation of the features
- What it provides
4. Instructions
- Instructions for editors
- Guided steps
5. Authors (3 separate pages)
- Our Team
- Programmers Emeriti
- Founders
6. Contacts Page
- Email and social contacts
- Comments
First off, the heading from the original website was outdated and unappealing.
The logo was extremely pixelated and very small along with the title of the
website. The title itself did not look like a title at all which made it
confusing to the viewer and there were a couple unnecessary elements within
the header that does not belong in the header. So discarding the old yellow
beige header, it would be replaced with a dark brown background color. The
logo is redrawn referencing the old logo but with a more modern and simpler
look. As for the title, the font is changed to a type of serif slab font to
have a typewriter aesthetic. The extra elements such as the wifi icon and the
extra link to a different website is discarded since it had no correlation to
the website.
Moving on to the navigation bar, in the original website, it was difficult to
search or know where the navigation bar was due to how small the font size
was. In the redesign, the navigation bar background is changed from a bright
orange to a subtle warm grey color and the fonts uses the same serif slab font
in bold font display and the size is increased and centred compared to the
original website. A hamburger drop down menu is also included on the right for
additional information. A color changing effect is added for the words when
hovered for some visual interactions.
While in the original website there was not a single image and even when it
had images it would not appear at all. In the home page, a hero image is put
as the user enters the website along with some information about the start of
Suda On Line. Since in the original home page, all they had were many texts
and a long paragraph on how to use the website, the redesign would only
include a brief information on how Suda On Line came to be. In the original,
the footer was only had the copyrights bout the website. The redesign changed
the footer slightly by including the same image from the hero image. The title
and logo of the website is included as well as some social media icons for the
user to follow.
To go into more detail for the website, the original had a large wall of text
which makes it hard to comprehend as a new user. So instead of having multiple
paragraphs to read, it is reduced to a few paragraphs as a summary. In the
actual final redesign, the paragraphs would be changed to short sentences but
the page length would be increased. A few images and elements would be added
so it wouldn't feel boring as the user reads through the page. The same
process is added to features as well.
Instructions on the other hand was slightly difficult since it shouldn't be
cluttered or too long otherwise the user would be overwhelmed with what they
have to follow. So the steps are organised in a list instead of paragraphs and
added images above each step so it would be easier for the user to
follow.
On the authors page, there wasn't any in the original website but they
included the authors on the left side with no additional information or
pictures to know more on who worked on the website. In the redesign, the
authors has 3 sections Out Team, Programmers Emeriti, and Founders. These were
added on as extra pages in the prototype. Each of the authors have their own
frames for themselves with information about what projects they have
participated in before and what they have contributed on the Suda On Line
website.
Lastly the contacts page. In the original website they did not have a contacts
page, but they did include their email in their help page. So instead of a
help page, in the redesign it is replaced as the contact page which also
includes a form for the user to comment their thoughts about the website or
what they wanted to be improved for the future and some social media icons
which changes opacity when hovered.
Final Outcome
Figure 1.1 Screenshot Of Final Prototype
Feedback
Week 10
He told me try and make my redesign have more elements so it doesn't look too
basic and have my texts not be in many paragraphs since it would be very
cluttered. He also added that I could reduce the size of the words on the left
in the header to be almost the same height as the title. Overall he approved
of my layout, just needed a few minor changes.
Reflection
During this assignment, it taught me how to look for faults of the website designs and think of a way to make it look comprehensible and visually appealing. This assignment changed my perspective on the way I interact with elements in websites which I never do and I find that exciting. I had some struggles with designing certain pages but after receiving advice from my tutor and from my course mates, it helped me overcome my design block and improve certain parts of my designs. Although it was my first time using Figma and Adobe XD, I had my friends who helped explain where the tools were and how to use them. All in all, I enjoyed designing layouts so this assignment just pushed me to understand more on how to composite my designs.
Comments
Post a Comment