INTERACTIVE DESIGN - FINAL PROJECT

November 26, 2019

INTERACTIVE DESIGN - FINAL PROJECT

14/10/19 – 26/11/19 (Week 10 – Week 14 )
Arletta Leviani (0337751)
Interactive Design
Final Project

INTRODUCTION

PLANNING

After gotten briefed by Mr Shamsul for our final, we need to get a partner. My partner is Tan Shi Lee and she asked to have a website for her business, BGL Evenets. She gave me a facebook link as reference of her business and I found their instagram page as well.

https://www.facebook.com/BGLEVENTs/
https://www.instagram.com/bglevents/

I start to make my design in Adobe Illustrator and picking the color schemes from pinterest. I settled between rose gold and millennial pink.

Fig 1.1.1 color schemes

Fig 1.1.2 color schemes

When making this, I keep in mind that it need to be doable in Adobe Dreamweaver. I manage to make the home of the web and manage to capture the overall aesthetics. Even when I make the first draft like this, I eventually change a lot of it.

Fig 1.2 first draft

I got my images from Tan's previous works and I start to make the website on Adobe Dreamweaver. I try 3 times until I am satisfied. This is the first design that I scraps later on. The reasons are because the navigation bar looks weird, the cover isn't part of a container so the about section go under the cover and it looks weird in mobile.

Fig 1.3 First Draft

I start searching for a template I can use to make the nav and cover. I found Regna template which I like and start customize them.

Fig 1.4 Regna template by bootstrapmade

I want to have a video playing in the background for my landing page so I compile them myself.

Then I put the logo in the front of the video and call to action button to book the service. I put the description/about in the landing page then put some delay animation when being scrolled down. This is the final landing page.

Fig 1.5 landing page

Then I make the services, it being divided to 3 parts, weddings, birthday, and photography. I made 3 separate pages for everything. I make sure to put the contact description at the button if they want to book for the event. The cover is similar for every page except the landing page which is a video. I use different picture for each page.

Fig 1.6 services pages

I then continue to make the gallery page. The page consist of previous work photos. I make the grid system on my own with a lot of trial and error. I also put delay on the pictures so they appear when scrolling.

Fig 1.7 gallery page

Then I make the team page. The business is started with 3 people. I add the pictures and included their social media.

Fig 1.8.1 Picture provided

Fig 1.8.2 Picture provided 2

Fig 1.8.3 Picture provided 3

Fig 1.8.4 Team Page

Lastly I make the contact page. The page is pretty simple overall.

Fig 1.9 Contact us page

In total I make 7 pages instead of the minimum 5 pages. I customize them so they are quite different from the templates. I make my own back to top button, and my page loader. This is the final website already uploaded to webhost.

https://bgl-events.000webhostapp.com/landingpage.html

FEEDBACK

Week 10
we were briefed about the final project so we didn't have any feedback

Week 11
When I my my first draft in Adobe Illustrator, Mr lun suggested me to search another font from google font and Mr Shamsul told me to find a better call to action words that attracted user more.

Week 12
I was told to be faster when making the web because I just finish 1 out of 5. The rest is ok.

Week 13
Mr Shamsul said that he like the little fade in action in the landing page and he said to focus on the wedding page. I also told not to have a link going to service, instead just straight away got to the wedding, birthday or photography page. Mr Lun say it's ok already.

REFLECTION

Experience

Week 10
we were briefed about the final project.

Week 11
I have a hard time picking my font from the start. I really don't want to use too much curvy fonts but eventually I gave up because there's not much font I can use that fit the theme. Every time I'm making the draft, I need to remind myself that I am making it for a client and need to have the same mindset with them.

Week 12
I start to make my first page. The first page always the hardest since I need to make navigation, cover, footer. After all those were done, I just have to duplicate them to the other pages. I make a mistake that I should have put my back to top button and page loader from the start since at the end I need to put them one by one to all pages.

Week 13
The hardest part is to upload everything to webhost. There are times when I notice how sensitive webhost code reading is, for example, uppercase from the word 'jpg' can't be read if the code is lowercase, even when Adobe Dreamweaver can read them just fine.

Observation
Week 10
I notice that it took me a while to make something for my partner instead of something that I wanted. I put myself in a mindset then I can work properly.

Week 11
I notice that when making the first draft, I made the landing page too long, so when I did the coding, I narrowed them down to only 'about' and the rest can be found at the navigation buttons.

Week 12
When making the code, I notice having comment section in every container css is really helpful when I want to fix something. I manage to easily do changes if necessary or use some assets I made already.

Week 13
Seems like code reading in webhost and Adobe Dreamweaver a bit different. For Dreamweaver my Page loader gif javascript can only readable when put on the <head> but in web host the javascript need to be put on <body>. I don't know why it does that but I manage to fix it eventually.

Finding
Week 10
I find that having as much information from my partner is really important to plan each pages.

Week 11
I find that having a color scheme is really important. I use pink as my main color but after a while, using a natural color is the safest route so I change most of the color except for hovers, I kept them pink as a complimentary color.

Week 12
I notice that I should make codes that would be use for every pages first like navigation, footer, cover, back to top button, page loader so I don't have to duplicate every css, javascript and html codes to every pages one by one.

Week 13
I notice that I need to be careful when naming the images in uppercase or lowercase in Adobe Dreamweaver because even when Dreamweaver can read them, webhost can't. I also notice in webhost you can edit the html and css file without needing to reupload. Just click the file, click right, open then I can edit the file if needed quick changes.

I notice Mr Shamsul keep forgetting that I am not going to graphic design, he has been saying that I can do more things in Advance Interactive but I am going to Animation. It happens twice in a month. I do wonder if he's alright, all the best for you and Mr Lun.

Search This Blog

Arletta's Design Journal