Final Project
week 10 - week 15 (24.08.20 - 00.00.20)
Park hyoung yoon (0325165)
Bachelor in Design (Honors) in Creative Media
Interactive Design Exercises
Final Project
Students were to group in pairs to create website for each other as web
designer and client vice versa. 5 pages have to be designed based on any topic the partner desires. My partner wanted to create a portfolio of her photographs.
Proposal made by Johanna Nikola Zora Elle
Based on the layout given, mock up was made using Photoshop.
Color Scheme
 |
| Fig 1 color scheme |
Homepage
This was the given layout of the home page. However it was redesigned to reduce empty space.
 |
| Fig 2 mock up 01 homepage |
Redesigned homepage
Navigation bar was placed at the top of the page. logo and the menu were aligned together. profile picture was also added to create focus and more colors to the page.
 |
| Fig 3 mock up homepage 02 |
Mr Shamsul gave a feedback that homepage should show what the general web page is about. he suggested to use her photography image in the homepage. Bootstrap carousel seemed to be perfect fit to be used for the homepage.
Progress
html
 |
| Fig 4 html homepage |
css
 |
| Fig 5 css homepage |
Homepage Final Outcome
 |
| Fig 6 homepage wide screen |
 |
| Fig 7 homepage wide screen |
People page
The only change was the addition of the heading and the navigation bar from the given layout. Hover effects had to be added for the captions of each image. Click to enlarge feature was requested by the partner, light box was used for this feature.
 |
| Fig 8 people page mock up |
Progress
 |
| Fig 9 people page html |
 |
| Fig 10 people page css |
People page Final Outcome
 |
| Fig 11 people page wide screen |
 |
| Fig 12 people page with menu button |
 |
| Fig 13 people page click to enlarge image |
 |
| Fig 14 hover image |
Travel page
Same layouts and same feature applied to this page just as people page. Only difference is that the grid of the image is different.
 |
| Fig 15 travel page mock up |
Progress
 |
| Fig 16 travel page html |
 |
| Fig 17 travel page css |
Travel page Final Outcome
 |
| Fig 18 travel page wide screen |
 |
| Fig 19 travel page with menu button |
 |
| Fig 20 travel page click to enlarge image |
 |
| Fig 21 hover image |
About Page
 |
| FIg 22 Mock up |
Progress
Button directed to contact page was added
 |
| Fig 23 About css |
 |
| Fig 24 About Html |
About page Final Outcome
 |
| Fig 25 About page wide screen |
 |
| Fig 26 About page with menu button |
Contact Page
 |
| Fig 27 Mock up |
Progress
The link of the mail was added 'mail to' function so that when clicked another page opens up with forwarded email to petitejoy@mail.de
the icons when clicked, opens new window to dedicated page.
 |
| Fig 30 Contact Page HTML |
 |
| Fig 31 Contact page CSS |
 |
| Fig 32 Contact page wide screen |
 |
| Fig 33 Contact page small |
Comments
Post a Comment