31/10/2019 - 19/11/2019 (Week 10 - Week 13)
Eunice Lo Set Tze (0334512)
Interactive Design
Final Project
Final Project
Week 10
For this week, I teamed up with my friend Angelina in making each other's blog for the final project which means, we will be each other's client. So, I had to create a website for my friend Angie and she'll give me her contents for the website.
So, I started out by giving mine which is about my favourite type of breeds and tips on caring for dogs. After getting all the info, I waited for Angie's contents so that I can start designing my wire frame for the website.
 |
| Initial layout |
After creating the layout, my friend's idea got slightly rejected as Mr.Shamsul wants something different as he said the star has a fansite already so, if he wants other information but related to the artist. Then, she changed to fan events and merchandise instead of albums and tour.
 |
| New wire frame |
 |
| The other ones |
Then, I started out my website by searching for some bootstrap templates and I used this template to start out my layout and use as inspiration.
Here is the link :
https://startbootstrap.com/previews/agency/
 |
| The template's layout |
After that, I proceeded to Dreamweaver and start up my layout for the homepage. So, I start out by typing
 |
| HTML 1.1 |
 |
| HTML 1.2 |
 |
| HTML 1.3 |
 |
| HTML 1.4 |
 |
| HTML 1.5 |
Then here is how the homepage will look like in the web
 |
| Homepage header and navigation bar look |
 |
| About section |
 |
| Event and Merchandise buttons |
 |
| Contact section |
Then I proceeded to do the layout for "about" page
 |
| HTML 2.1 |
 |
| HTML 2.2 |
 |
| HTML 2.3 |
And this is how it will look like in the web
 |
| About page header |
 |
| Info section |
 |
| Aditional images |
 |
| More info |
After making the about page, I proceeded to making the event page.
 |
| HTML 3.1 |
 |
| HTML 3.2 |
 |
| HTML 3.3 |
Then, I went on with checking on the looks of it after dealing the html and css and here is how it looks
 |
| Fan events header |
 |
| Info on the events |
After settling it, I proceeded to the Merchandise page
 |
| HTML 4.1 |
 |
| HTML 4.2 |
 |
| HTML 4.3 |
 |
| HTML 4.4 |
 |
| HTML 4.5 |
 |
| HTML 4.6 |
Here is how it will look like on the web
 |
| The header |
 |
| The images and buttons that directs to modals |
 |
| The modal that shows the listing |
 |
| The close button at the end |
 |
| Hat section of the modal |
 |
| The close button |
Comments
Post a Comment