Interactive Design / Project 2 - Website Redesign Prototype
Week 6 - Week 9 (28/04/25 - 18/06/25)
Felice Jolin (0373636)
Interactive
Design / Bachelor of Design (Hons) in Creative Media
Project 2 -
Website Redesign Prototype
TABLE OF CONTENT
LECTURES
Week 7 - Box Model
The display property is key to controlling layout in CSS. Each element has a value: block or inline.
Block Element
<div> is the standard block-level element.
A block-level element starts on a new line and stretches out to the left and
right as far as it can.
Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
Other display properties :
- Inline-Block
- Flex
- Grid
Box Model
Most HTML elements are containers. Elements such as body, p, h1, h2, div, ul, ol, li is a container, or box. Each box has three layers that surround its content such as :
• Padding • Border • Margin
The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).
Flexbox
CSS Flexbox is a powerful tools for creating responsive and efficient web layouts that rely on a solid understanding of the Box Model, as they manipulate elements' positioning and spacing within a container.
Week 8 Selector Quiz
This is independent learning week, Mr. Shamsul task us to fix the html he gave.
Html link: https://drive.google.com/file/d/1EfSgsgHTm2uRTgJAHO8vXud1e8amIH3D/view
Week 9 Drop down menu
This week, we practiced making drop down menu. The drop down menu here has background color and when hover it can change color.
Week 10 Layout tutorial
This week, Mr.Shamsul taught us to make the layout tutorial and how to link to another page. In order to link from one page to the other, it must have specific a href of the name with the same file name.
Fig. 1.14 The code
INSTRUCTIONS
TASK
In Project 2, we are assigned to design a prototype based on our previous Project 1 Proposal. The prototype is to be developed using Figma.
I start of with creating a fram of size 1280 x 2884 and made layout guide.
Fig 1.1 Grid
Feature #1, #2, and #3
- Navigation hover effect
- Drop down menu for 'services'
- Button + hover effect
Moving on, I made the navigation to have hover effect from white to
orange colour. Then I made the drop down menu for 'service' consist of
(angpao, flyer, paperbag, softbox, book, and hardbox). I also made the
explore more button, with hover efect from orange to white color. This was
all made using add auto layout and compound set.
.png)
- Cursor blinking
I also made the column to have the small line blinking when click.
It applies in the column at every bottom page and form in the contact page. For these columns, Mr.Shamsul also suggested me to change all into right angle edges to have consistency.
Feature #6
- Carousel
For these section in home page, I made a carousel, when click the button, it will move to right and vice versa.
FIRST DRAFT (home, services, contact us)
I create the design for home page, services page and contact us page. The fonts used is Helvetica for sans serif and Georgia for serif. I ensure different sizes and weight usage of each typeface and fonts to give contrast.
As I have not sketch the wireframe for About us and Process page, I immediately do it in Figma with the three other pages as the design reference.
Feature #6
- Carousel
FIRST DRAFT (about us & process page)
Mr.Shamshul gave feedback on week 9, There was some to be revised. Below are changes made during the development of the prototype:
- Delete strokes of button
- Extend the blue background on second slide of home page
- Add more spacing under picture of services on home page
- Allign footer information
- Change the button text into something more engaging
- Change the background picture for contact page first slide
- Do not use serif, just all sans serif to have a modern look
- Icon on slide 3, contact page is too big
- Make the column all consistent , no corner radius
- On slide 2 & 3 of services page, expand the picture to fit the frame (left & right only)
- Discard the enddless scrolling word animation of 'OUR SERVICES' and 'Contact US'
- Mr.Shamsul suggested to discard the shadow on the logo.
I tried to mask clipping and edit the logo from photoshop.
.png)
Fig 1.18 Logo edit
Here is the before and after. (the revised logo just apply for the in the most bottom of every page).
Fig 1.19 Logo before & after edit
I immediately make the changes and the result are as below.
Draft #2 (all pages)
I decided to change the headline on my slide of home page and change the headline sizes of the first slide of all pages.
.png)
Final Design
Click here to see the prototype
Overall Prototype Navigation
A brief writeup of outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
INTERACTIVE FEATURES
#1 Navigation
Navigation to particular section or pages are available on top menu bar.
#2 Logo
The logo we are clickable and could navigate back to homepage.
.png)
#3 Button Hover
The text button will change color from orage to white when hover.
.png)
#4 Button Scroll
If click the button, it will scroll down to the next slide.
.png)
#5 Carousel
When click the button, it will scroll to the side to reveal the other images. Below is the first carousel found in the home page.
Below is the other two carousel found in process page.
#6 Change to effect
The word 'VIEW PROJECT' while having hovering effect from black to orange colour, it is also clickable to bring you to the services page.
Helvetica (Bold & Regular)
COLOR USED
Orange is the primary color for the brand, while I add blue as a complementary color to add contrast.
DESIGN DECISIONS MADE DURING DEVELOPMENT
In response to Mr. Shamshul’s feedback in Week 9, several decisions and changes were made during the prototype development. These included removing button strokes, extending the blue background on the second slide of the homepage, increasing spacing under the services image, aligning footer content, and updating button text to be more engaging. Additional changes involved replacing the contact page background image, switching all typography to sans serif for a modern look, resizing the contact page icon, standardizing column shapes, expanding images on the services page to fit the frame, and removing the endless scrolling text animations on the “Our Services” and “Contact Us” sections. Lastly, I also changed a bit the design for CRK logo and discard the shadow (this just apply for the logo in the most bottom of every page).
While still maintaining the base and overall look, there are also some changes made from the initial wireframe skecth as when seen on paper and when designing on computer, the aesthethic is ddifferent, hence changes needed to be made. Such as the headline on the third slide of homepage wireframe is in the centre, while in the prototype I alligned it to the left. Some simple changes were made. While for the other technical and designs changes were discussed above.
RECAP OF REDESIGN GOALS
Here are the points of the goals:
- Accesible navigation
- Clear information hierarchy (large heading title and reasonable size for body content)
- Optimizing mobile
- Use short paragraphs and headings to speficy what you are conveying
- Harmonious colour scheme, clean layout, simple typography and effectively use of white space
- Divide information into section and pages for clear division.
- Use a consistent buttons, icons, theme.
- Make sure the brand identity such as color, tone and typography is cohesive on every page.
Design Proposal Rationale:
- Modern inimalist design
- Bold complementary color
- Serif and sans serif
How the prototype addresses the objectives set in the redesign proposal?
As far as I am to develop the prototype, I keep in mind the redesign goals that I desire. Starting from the accessibility of navigation, yes I applied this to my prototype at the top right of every page to easily move from one page to the other.
Secondly, clear information hierarchy, where I applied bold heading and reasonable size for body content, and prioritize clarity and readability.
Thirdly, the prototype only contain short paragraphs and to speficy content
Fourthly, harmonious colour scheme, yes as I am using a complementary color with natural color (white). I is also allign with the theme modern minimalist with professionale yet creative look.
Fifthly, clean layout, simple typography and effectively use of white space. Yes, the design layout is tidy, alligned and effectively using white space , also only using one typface with different sizes and weights to add dynamics.
Sixthly, divide information into section and pages for clear division, absolutely, I add in pages for About Us, Services, Process, and Contact us which previous website doesn't have.
Seventhly, use a consistent buttons, icons, theme. Indeed, the buttons used are consistent with different text and consistenyt logo were used and placed on the most top and bottom page of every section.
Eightly, make sure the brand identity such as color, tone and typography is cohesive on every page. I only use minim color, to enhance look and stay simple while still alligning with the brand itself.
During the redesign process, I also need to makesure to have the redesign rationale I had in the proposal, which is modern minimalist design and yes, I applied this one, using simple typography and clean layout and clear information. Secondly using bold colour, where in my case I used orange and blue as complementary colour. However the initial idea of using both serif and sans serif typafaces was canceled. I first tried out using the combination of both typefaces, however, it does not look modern and professional, Mr.Shamsul also agreed and he told me to change all into sans serif only.
In conclusion, everthing was allign with the objectives set in the redesign proposal except for the usage of only sans serif typeface. Nevertheless, I'm satisfied with the overall result.
REFLECTION
Experience : Developing the prototype was a new experience for me, it was a lot of work that needed much time of dedication and awareness to details. There were ups and downs during the process however I am gratefule that I managed to finish my work on time while applying the redesign goals stated in my proposal.
Observation : During the design process, I observed that dividing information into specific sections and pages (About Us, Services, Process, Contact) made the content feel more organized and complete, compared to the original website which lacked this structure. Consistency in design elements like buttons, icons, and logos also contributed to a cohesive and professional look.
Findings : What I realise after going through this process is that typography really affects the overall look of website. Initially, I planned to use both serif and sans serif typefaces, but after trial, I realized the combination did not reflect the modern, minimalist feel I was aiming for. Mr. Shamsul also recomended me during feedback session to stick to sans serif only, which I did. This change instantly made the design feel cleaner and more professional. Overall, all elements in the prototype aligned well with the objectives set in the redesign proposal, and although I adjusted my original typeface plan, I’m satisfied with the final result and how the prototype communicates the intended brand image.
Komentar
Posting Komentar