INTERACTIVE DESIGN - FINAL PROJECT
Rausha Aminath (0337000)
Interactive Design
Final Project
LECTURES
Lecture 11:
23.05.2019 (Week 11)
No Lecture.
Lecture 12:
23.05.2019 (Week 12)
No Lecture.
Lecture 13:
23.05.2019 (Week 13)
No Lecture.
INSTRUCTIONS
WORK
Week 12
We were tasked in creating a website for one of our classmates after pairing up. My partner is Azmina Haris. After deciding our partners, I started off by clarifying with her what kind of website she wants and which styles she prefers and color schemes and also fonts. After getting some idea about what she likes. Below is my moodboard and sketch of the Website layout.
Final Outcome: https://pensive-payne-d342ca.netlify.com/index.html
 |
| Moodboard |
 |
| Given Content: Work |
 |
| Given Content: Photography / Travel |
 |
| About Me Details Provided By Azmina |
 |
| Sketch of Wireframe |
 |
 |
Chosen Template - Katt - Tasty Blog Html Template
Week 12
After choosing the template and getting some content from Azmina, I started my work on dreamweaver.
After trying to make the theme more customized, I found some restrictions as the template was not bootstrap, so I tried another theme with bootstrap. I was also not that satisfied with the design.
After choosing the template and getting some content from Azmina, I started my work on dreamweaver.
 |
| Coding Process |
 |
| Home Page |
 |
| About Page |
 |
| Gallery Page |
After trying to make the theme more customized, I found some restrictions as the template was not bootstrap, so I tried another theme with bootstrap. I was also not that satisfied with the design.
Week 13
After the consultation, Mr.Shamsul suggested me to go ahead with the bootstrap theme I tested out. So I started doing final work on it.
 |
| Template I Used - Box Portfolio |
 |
| New Moodboard |
 |
| Styling Process |
 |
| Coding Process |
 |
| Coding Process |
 |
| Page #1 Home Page |
 |
| Page #2 About Page |
 |
| Page #3 Portfolio Page |
 |
| Page #3.1 Project |
 |
| Page #3.2 Project 2 |
 |
| Page #3.3 Project 3 |
 |
| Page #4 Gallery |
 |
| Page #5 Contact Page |
 |
| Home Page Safari Preview |
FEEDBACKS
Week 11:
Mr.Shamsul said that he template looks good, however since the template is very unique and customized, try to change as much as I can.
Mr.Shamsul said that he template looks good, however since the template is very unique and customized, try to change as much as I can.
Week 12:
The website looks good and is responsive so everything is good.
Week 13:
REFLECTIONS
EXPERIENCE
Week 11:
Creating 5 pages of website seems very scary as I had so much difficulty in creating just one page also. However once I started looking at the templates, it seemed a bit more simple than I thought it would be.
Creating 5 pages of website seems very scary as I had so much difficulty in creating just one page also. However once I started looking at the templates, it seemed a bit more simple than I thought it would be.
Week 12:
Making a template work into my own style is difficult and while the template looks good, there are so many changes I want to make and it was frustrating to see things get messy while trying to fix things the way I want.
Week 13:
Bootstrap templates are easier to manage and I can now see why the lecturers recommended using bootstrap.
OBSERVATIONS
Week 11:
Everyone in the class has already chosen their partner before hand this made it easier as they already knew what their friend wanted. For me also it was fun as Azmina and I had similar taste.
Week 12:
Without bootstrap, a template is very difficult to use. There are so many little details you have to consider before making any changes and this restricts my design very much.
Week 13:
Creating a modern looking websites with a minimalistic style is key and adding a little bit of animation will be good. However I noticed that the lecturer, like me, prefers not to have too much animation.
FINDINGS
Week 11:
Creating a 5 page website requires alot of consistency and when choosing a color scheme and font we have to be very careful and we should consider all the content we get.
Week 12:
Choosing a color scheme is difficult without content and planning out the website without a finalized content was much more difficult.
Week 13:
When dealing with clients there many things you have to keep in ming and this project has somehow showed me how it could be with a client and helped me be prepared a bit more.
FURTHER READINGS
The article discusses the difference between adaptive and responsive web design.
There are currently three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs.
One is not better or worse than the other; each has its own strengths and weaknesses. Responsive web design is the most common One Web approach. The approach uses CSS media queries
Server-Side Adaptive
Adaptive design builds on the principles of responsive design to deliver user experiences that are targeted at specific devices and contexts
We can achieve the server-side adaptive approach in a variety of ways, through server-side plug-in and custom user agent detection. Sites that use server-side adaptive include Etsy, One Kings Lane and OnlineShoes.com.
Comments
Post a Comment