PROJECT 2
Week 1-Week 6 (23/04/2025-21/05/2025)
Jennifer Michelle Hiendrawan/0374682
Interactive Design/Bachelor of Design (Honours) in Creative Media
Project 2
TABLE OF CONTENTS
1.Lecture
2.Instructions
3.Task
4.Feedback
5.Revision
6.Final Outcome and Brief Writeup
4.Reflection
LECTURE
Week 9-box model
-Display is an important property for controlling layout which every element
has a default display value depending on what type of element it is.
-Usually, most element use block or inline.
Block level element
-<div> is the standard
-Starts on a new line and stretches out to the left and right as far as it can
.png)
Fig 1.1 Display Property
Inline element
-<span> is the standard
-Can wrap some text inside a paragraph <span> like this </span>
without disrupting the flow of that paragraph.
.png)
Fig 1.2 Display Property
Other display properties: inline-block, flex, grid
Box model
-Body, p, h1, h2, div, ul, ol, li. are container, or box.
-Each box has three layers that surround its content, which are padding,
border, and margin
.png)
Fig 1.3 Box model
-Example:
<div>
<p>This is a paragraph. It is a very short
paragraph.</p>
</div>
-Apply this to control the size of padding, border, and margin:
div {
background-color: red;
padding: 0;
border: 1px
solid black;
margin: 0;
}
p {
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px !important;
}
Flexbox
-Create responsive and efficient web layouts.
-Flexbox (Flexible Box Layout) Key Concepts:
-Flex Container: The parent element with display: flex.
-Flex Items: The children of the flex container.
-display: flex: Establishes a flex container.
-flex-direction: Defines the direction of the flex items (row, column).
-justify-content: Aligns flex items along the main axis (start, end, center,
space-between, space-around). -align-items: Aligns flex items along the cross
axis (stretch, center, start, end).
INSTRUCTIONS
TASK
For project 2, we must make a prototype using Figma based on what we've made
on Project 1 Proposal.
Progress
1.First i opened figma and created the frame
.png)
Fig 3.1 Frame
2.I created the hover and drop-down menu for the navigation
.png)
Fig 3.2 Navigation
3.I started to make the first page. I used blue, green, white, and gray as the
color pallete to create variation. For this page, i created horizontal swipe.
For the endless scroll animation, i made a frame and copy it one by one, then
make it change to the next frame by using the prototype panel. This was the
first page design before the feedback from Mr. Shamsul
.png)
Fig 3.3 First Attempt for First Page Design (Home page)
.png)
Fig 3.4 Endless Scroll Animation Progress
.png)
Fig 3.5 First Attempt for Second Page Design (Content page)
.png)
3.6 Flip and Horizontal swipe progress
5.This was the initial design for the third design, which is the contact page.
Here i added a box so that the viewers can give their detail information to
get to know more about Ciputra Group. I also added maps and Ciputra LinkedIn
as an important information to reach Ciputra Group.
.png)
3.7 First Attempt for Third Page Design (Contact Page)
Here i created an effect, so that when the box is clicked, it looks like you
can actually type in it.
.png)
3.8 Progress
6.Then i continue to create page 4 and 5 which is the content page. I chose
the business and sustainability and made a design for it. Here was the initial
design.
.png)
3.9 First Attempt for Fourth and Fifth Design (Content page)
FEEDBACK
After completing all of my designs, I asked Mr. Samsul for feedback. Mr.
Samsul said that I should add a call-to-action button at the very top of the
homepage. He also mentioned that the spacing between the fonts was too tight
and needed to be increased. For the carousel section, the circular indicators
were too large, so it should be made smaller, and an additional arrow should
be added to the carousel to avoid it looking unbalanced. Furthermore, the
shape of the arrows looked strange and untidy, so it should be redesigned to
appear neater. In the footer at the very bottom of each page, there was no
contrast for the buttons, the color blended too much with the background. The
social media icons should also be made more consistent by using the same color
for all of them (for example, if green is chosen, then all should be green).
The "About" page was too wordy, so the amount of text should be reduced. On
every page that contains paragraphs, a title should be added to prevent user
confusion. On the contact page, the "Submit" button was too large and looked
odd. It should be designed properly to resemble a standard "Contact Us" page
(refer to examples online), and a "Contact Us" title should be added. The
layout should show the map first, followed by the contact form. The designs of
pages 4 and 5 were very inconsistent and looked different from pages 1, 2, and
3, so they should be made more consistent.
REVISION
1.Add a call-to-action button at the very top of the homepage and increased
the spacing of the font
.png)
Fig 5.1 Before
.png)
Fig 5.2 After
2. Made the circular indicator for the carrousel became smaller and add
additional arrow to avoid it looking unbalanced (fixed the untidy arrow also)
.png)
Fig 5.3 Before
.png)
Fig 5.4 After
.png)
Fig 5.5 Before
.png)
Fig 5.6 After
4.Reduced the amount of text on the about page
.png)
Fig 5.7 Before
.png)
Fig 5.8 After
5.Add title for each page. Here i also made the carrousel more tidy.
.png)
Fig 5.9 Before
.png)
Fig 5.10 After
6.Revised the contact us in contact page and reduce the size of the submit
button
.png)
Fig 5.11 Before
.png)
Fig 5.12 After
.png)
Fig 5.13 Before
.png)
Fig 5.14 After
8.Made the design for pages 4 and 5 became more consistent
Fig 5.15 Before
.png)
Fig 5.16 After
FINAL OUTCOME AND BRIEF WRITEUP
FINAL OUTCOME
.png)
Fig 6.1 Final Outcome Prototype Design
.png)
Fig 6.2 Prototype Navigation
.png)
BRIEF WRITEUP
Interactive features
There are several interactive features that I applied in my prototype. The
first is the navigation and dropdown menu that appears when clicked, and
it can also direct users to the next page. In addition, I created a
horizontal swipe feature that allows users to slide through content using
the available buttons. I implemented this on several pages. I also added
images that can be flipped, so it display a different image when the flip
button is pressed. Lastly, I made the text box look as if someone is
actually typing in it by adding a keyboard typing effect.
.png)
Fig 6.4 Process of making navigation and dropdown menu
.png)
Fig 6.5 Process of making horizontal swipe for home page
.png)
Fig 6.6 Process of making horizontal swipe and flip for about page
.png)
Fig 6.7 Process of making Keyboard typing effect for contact
page
Design Decisions made during development
This is the wireframe that i made as my initial plan for creating this
project, and it was also the design for all the pages.
.png)
Fig 6.8 First Attempt of wireframe
How the prototype addresses the objectives set in the redesign
proposal?
These are the redesign goals I created at that time.
These are the redesign goals I created at that time.
.png)
Fig 6.8 Redesign goals
First, it is very clear that the website design has significantly improved
and looks much better and more visually pleasing, which aligns with
redesign goal number 1. Then, I also created a design that is attractive,
fits the theme, yet is not outdated, in order to enhance the first
impression when people open the website and encourage them to keep reading
through all the pages, which aligns with redesign goal number 2. The
Ciputra Group website now also features a more varied color palette
compared to before, where most pages were predominantly white with dark
blue and a bit of green. This creates a design that is less monotonous and
increases reading interest among the target audience. This aligns with
redesign goal number 3. In addition, the font has also been improved by
using a typeface that is easy to read and applying different sizes for the
titles and content on each page, so users don’t get confused. Bold text is
also used to highlight titles. This corresponds to redesign goals no. 4
and 5. The logo has also been redesigned to be more memorable and modern,
in line with redesign goal no. 6. In this design, redesign goal no. 7 has
also been implemented through a website layout that is more organized and
user-friendly, featuring titles on every page, tidy typography, and
different font sizes and bold text to indicate titles. As for redesign
goal no. 8, it will be developed later during the final project phase,
which involves the coding stage.
REFLECTION
Experience
I gained a lot of new experiences and also new knowledge in using the
Figma application. I also received a lot of new insights from Mr.
Shamsul's feedback on the design I created, such as how to make it more
consistent, and so on.
Observation
It turns out that making a website takes a very long time, because it
requires time for re-checking, whether the interactive elements work well,
whether the hover functions, whether the dropdown menu works, and so on,
in addition to whether the font and color are also appropriate.
Findings
For me, the presence of color variation is indeed very important in a
website, as it makes the website more lively, interesting, and able to
convey the message of the website effectively.
.png)
Comments
Post a Comment