30th of May '18 - 28th of June '18 (Week 10 - Week 14)
Gilbert Evander Aligoey (0332508)
Web Design and New Media 2018
Final Project
Work Process
On the tenth week of class, Mr Shamsul told us to start working on our final project, we have to choose 1 from 2 of the websites that we decided to recreate. We are required to make minimum 6 pages of that website (landing page included), and the fonts that we could use are only from Google Fonts.
On the second class for this week, we started working on the first page of our chosen website.
For the Landing page, I tried to make it as neat as possible, while easy to be navigated. The website that I chose was Indomaret, and it has 3 color as the theme, which are red blue and yellow, so I made those 3 as the colors that I use for the whole website pages.
This website is using mostly Indonesia language because it was to show that it is meant for Indonesian people, and some of them doesn't know english very well.
 |
| Fig 1.a Workspace on Dreamweaver |
I decided to use red for the main color from the other two color is because it kinda makes it pop up but not as pop as yellow, so it doesnt hurt your eyes while looking at the navigation bar.
For the Image below the navigation, I decided to make it slide to the left consistently only using CSS codes with animation. It was really challenging because I basically didn't know anything about how to animate anything usinG CSS, and I can't find any tutorials in youtube on how to make the sliding effect that I wanted to do, so I just try some stuff and keep working on it until I figured it out.
 |
| Fig 1.b The Whole Page of the website |
The Learn More circle is actually an image, so to make it interesting I made it change the display when you hover on top of it. The hard part about this was that if you make it purely from CSS, it have to be precisely at that place, so because it's all inside a circle, and that circle was meant to be like a button, I just make it from an image.
 |
| Fig 1.c Learn More Hover Effect |
and for the three images below that, I made it grayscale so when you hover over it, it's gonna have another effect too. I made it this way so it became more interesting a bit without it getting too tacky.
 |
| Fig 1.d Hover Effect |
For the footer, I made it blue so it kind of contrasting from the header (red), and I made the buttons have an effect when u hover over it too.
 |
| Fig 1.e Footer |
Beside that, I made the small icon on the top of the tab.
 |
| Fig 1.f Favicon on the tab |
So thats basically what I did for the landing page (first page), so here's the other page turns out.
 |
| Fig 2.a Promotion (Promosi) Page (2nd Page) |
This page is basically just a promotions page, showing the promotions that are available at that time.
 |
| Fig 2.b Card (Kartu) Page (3rd Page) |
This page is just to show how to register for the membership.
 |
| Fig 2.c Services (Layanan) Page (4th Page) |
This page is to show what kind of services that are available for public access.
 |
| Fig 2.d Berita (News) Page (5th Page) |
This news page is to show news that are related to Indomaret itself and what's going on.
 |
| Fig 2.e Contact Us (Hubungi Kami) Page (6th Page) |
 |
| Fig 2.f About (Tentang) Page (7th Page) |
This page is about when Indomaret was established, where was it built and the background stories.
