26/11/24 - 07/12/24 (Week 9 - Week 11)
Andrea Choo Qin Hui (0366959)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2 : Website Redesign Prototype
INSTRUCTIONS
LECTURES
Week 9: (Box Model - Layout in CSS)
・The Display Property :
- It is the most important property in
CSS for controlling layout
- Every element has a default display
value depending on what type of element it
is
- The default for most elements is
usually block or inline
・Other Display Properties :
- Inline-block
- Flex
-
Grid
・Box Model in CSS
:
- Most
HTML elements are
containers
-
These
are
a
container
or
box
:
body,
pi,
h1,
h2,
div,
ul,
ol,
li
-
Each
box
has
three
layers
that
surround
its
content
-
The
layers
are
in
order
from
inside
to
outside
1.
Padding
2.
Border
3.
Margin
Week 10: (Position Property: CSS - Position)
・What is the CSS position property? :
- Used to control the positioning of an
element within its containing element
- Determines how an element is displayed in
relation to other elements on a web page
- Has several possible values, each of
which affects the element's behaviour differently:
1. Static (default) : Positioned in the
normal flow of the document
: They are not affected by the top, right, bottom
or left properties
: It is the
default behaviour for most HTML elements
2. Relative : Can
use the top, right, bottom and left properties to move
to its normal
position in the document flow
: Other
elements on the page will still occupy the
original space of the
element
3.
Absolute : Positioned relative to the
nearest ancestor with a position value
other
than static (usually
relative, absolute or
fixed)
: If no such
ancestor exists, the element is
positioned relative to
the
initial containing block
(typically the
viewpoint)
4. Fixed
: Positioned
relative to
the
viewport
: Do
not move
when the
page is
scrolled
:
Stays
in
the
same
position
even
if
the
user
scrolls
up
or
down
3.
Sticky
:
Initially
positioned
according
to
the
normal
flow
of
the
document
:
When
the
element
reaches
a
specified
scroll
position
(defined
by
top,
right,
bottom
or
left),
it
becomes
'sticky'
and
will
remain
fixed
at
that
position
while
the
user
continues
scrolling
PROJECT 2
The objective of this assignment is to translate our
website redesign proposal into
a functional prototype. This prototype should visually and
interactively represent
the proposed changes, demonstrating your ability to apply
design principles and UX
strategies effectively.
Building upon your previous assignment (Website Redesign
Proposal), we are now
required to develop a prototype of the redesigned
website. This prototype should
reflect the proposed visual design and user experience
improvements, providing a
tangible representation of the final product.
Website Redesign Proposal
Figure 1.1 Website Redesign Proposal
To recap, this is my redesigning goals for the
My Government
Website:
1. Enhanced Usability - Making the website
look less cluttered
2. Modernised Look - To make the website
look more aesthetically pleasing to the eye
but also retain what a
government website should look like
3. About Us Page - So that new users
know what My Government is offering its users
4. Scroll to Top Button - Users will have
an easier time to return to the top of the
website
5. Faster Load Time - So that users will
have a smoother experience while browsing
the
website
Website Redesign Prototype
Develop a clickable prototype that includes key pages and
features of the redesigned
website. The prototype should allow users to navigate through
the site and interact
with essential elements.
Key Pages to Include:
- Homepage
- Core Content Pages
- Contact Page
User Experience (UX) Considerations:
- Usability
- Interactivity
Since it was my first time using Adobe XD, I
didn't know what to do or how it works.
So, I took it upon myself to watch a few Youtube Tutorials on
Adobe XD before starting
on my prototype.
To have the exact colours of the Malaysian
Flag, I googled the hex codes for the blue
(#010066) and red (#CC0001). As said above, I was new to
Adobe XD, so after
watching more Youtube videos, I found out that I could
download plugins for the app.
Here is all the plugins I used for Project 2:
|
| Figure 1.1 Plugins for Adobe XD |
To create the scroll to top button, I watched this Youtube video:
Figure 1.2 Youtube Tutorial #1
To make the form in my 'Contact Us' page, I
watched this Youtube Video:
Figure 1.3 Youtube Tutorial #2
To fully use the form in the 'Contact Us' page, it's best
to use the anima plugin to do so.
|
| Figure 1.4 Map |
Unfortunately, the plugin I wanted to (Maps
Generator) use for the interactable map
feature doesn't exist anymore / been removed and the one I
installed as a stand in only
works with addresses in China, but when coding the website,
I will make sure to
include one where it works.
The information for the 'About Page'
was taken from this
website, it was the same
website I used as research to find out more about My
Government. They have included
key information about the website that can't be found on
My Government itself.
|
| Figure 1.5 Final Messy Interactions |
To make sure the prototype works
smoothly, I tested and retested it repeatedly until
I
was satisfied with the results, especially when the
interactions for the prototype were
this messy, so I had to make sure every section and
buttons worked accordingly.
Final Website Redesign Prototype
Figure 2.1 Project 2 : Final Website Redesign Prototype in
English PDF
Figure 2.2 Project 2 : Final Website Redesign Prototype
in Bahasa Melayu PDF
Fonts used:
- Title & Heading (Helvetica)
- Subtitle (Helvetica Neue)
- Navigation Bar, Buttons &
Subheadings (Gill Sans)
Final Website Redesign Prototype Brief
The redesign of
malaysia.gov.my
focuses on addressing key issues identified in the current
website while introducing features to enhance user
experience and functionality. The existing website, though
functional, has a cluttered layout, outdated aesthetics
and usability challenges, which undermine its
effectiveness as a government portal. My redesign proposal
in Project 1 aims to modernize the website, making it
user-friendly, visually appealing and more accessible to
its diverse audience, which includes Malaysian citizens,
tourists, expats and foreigners.
One of the main issues with the current website is its
layout, which feels plain and overly crowded in some
areas. The navigation bar in particular, is overwhelming,
with numerous options that make it difficult for users to
find information they need quickly. Additionally, the
color scheme — primarily dark blue and pink, conveys a
tacky and dated aesthetic that does not align with the
professional standards expected of a government portal.
The typography lacks visual appeal, with minimal
differentiation between headings and body text, which
affects the readability and fails to create a clear visual
hierarchy for the users. Outdated and inconsistent icons
further take away from the site's overall appearance,
contributing to an impression of incohesiveness and
neglect.
To address these issues, my redesign introduces a cleaner
layout with a more intuitive navigation system. The number
of menu options is reduced, making the website easier to
explore. The color palette is updated to feature
Malaysia's national colors, red and blue, to evoke a sense
of patriotism while ensuring the design remains sleek and
professional. This modern aesthetic aligns with
contemporary standards for government websites and helps
to promote a sense of trust and pride among users.
Typography plays a crucial role in the redesign, with
distinct fonts chosen for headings, subheadings, and
paragraphs to improve readability and create a more
engaging visual experience. By establishing a clear
hierarchy, the redesign eliminates the monotony of the
current website, making content easier to digest. The
redesign prototype also replaces outdated icons with
modern, cohesive visual elements, contributing to a
polished and consistent appearance.
A significant addition in the redesign is the introduction
of an 'About Us' page, a feature absent in the current
version. This page provides essential information about
MyGovernment services, helping first time users understand
the purpose and offerings of the portal. It enhances the
user experience by bridging the gap for those unfamiliar
with the website, making the portal more inclusive and
informative.
The goals of the redesign focus on three main areas:
enhancing usability, modernizing the website's look, and
introducing the 'About Us' page. Usability is improved by
decluttering the layout, streamlining navigation and
incorporating better typography. The updated aesthetic,
grounded in national colors and modern design principles,
ensures the website is visually appealing and reflective
of a forward-thinking government. Meanwhile, the new
'About Us' page provides valuable context for users,
fulfilling a key informational need.
The redesign also takes into account the website's diverse
target audience, which includes Malaysian citizens,
tourists, expatriates, and foreigners. By maintaining the
site's multilingual support (English and Bahasa Melayu)
and introducing improved accessibility features, the
redesign ensures the portal is welcoming and functional
for all users. A more intuitive interface further
simplifies navigation, making the website a valuable
resource for its varied audience.
In conclusion, the redesign of
malaysia.gov.my
successfully addresses the primary limitations of the
current portal while introducing meaningful improvements
to usability, aesthetics and functionality. By
implementing a modernized layout, patriotic design
elements, enhanced typography, and an informative 'About
Us' page, the redesign creates a more user-friendly and
visually appealing government portal. This enhanced
version not only serves its diverse audience more
effectively but also strengthens the online presence of
the Malaysian government, reflecting its commitment to
accessibility, inclusivity and progress.
(618 words)
Comments
Post a Comment