Final Project
Interactive Design
Final Project
LECTURES
Week 11
There were no lectures this week. We moved on to our final project.
Week 12
No lectures this week. We continued with our final project.
Week 13
No lectures this week. We continued with our final project.
Week 14
No lectures this week. We continued with our final project and finalising it.
Before continuing with the project, we were asked to pair up with another person and your group mate will act as each others designer and client. Each student will provide each other with what they want to include in their website. We also discussed what we liked and what colour scheme we liked. My group mate was Nicole. So before everything, I asked her what she liked and what she would want to include. I took notes down and started sketching.
 |
| Figure 1.1 Sketch and some notes |
So Nicole would want the website to broadcast where she has been. She would want to include Japan and USA in the website. She also loves the beach and describes herself as being a thalassophile, a lover of the sea. Hence, I decided to make the website beach themed, using the colours of the ocean. Below are some mood boards. I also created a logo to accompany the website.
 |
| Figure 1.2 Beach background, colour scheme, logo, and icons. |
Nicole also shared a few pictures that she would want to add to her travel website.
 |
| Figure 1.3 Pictures used (Japan) |
 |
| Figure 1.4 Pictures used (USA) |
I then took 2 of her pictures and edited it, to make it into like a hover.
 |
| Figure 1.5 Hover images |
Below are some fonts that I wanted to include in the website.
 |
| Figure 1.6 Reem Kufi typeface |
 |
| Figure 1.7 DM Serif Display |
 |
| Figure 1.8 Abril Fatface |
 |
| Figure 1.9 Roboto Mono |
I then went online to look for a template so I can do it better. I found one template and kinda fell in love with it and so I decide to use it. Here is the original link.
Box Template
I downloaded it and started to do it in Dreamweaver.
 |
| Figure 1.10 Process |
 |
| Figure 1.11 Process |
 |
| Figure 1.12 Process |
 |
| Figure 1.13 Process |
Each page required a new html.
For each of the pictures in the Japan and USA, I resized it in photoshop, so that its more neat when displayed in html.
 |
| Figure 1.14 Resizing pictures in photoshop |
Below is my final outcome.
https://nicoletravels.netlify.com/
I've gotta say I didn't expect for it to take so long to load. Most probably because the files were huge :/
Below is a screen recording that I have done so that you can view it, in case the website takes too long.
Feedback
Week 12
No feedback received this week
Week 13
No feedback received this week
Week 14
We were told to make sure to upload the entire folder into the web host.
Findings
Week 12
I found out that I didn't just have to create one page but 5 more pages worth of html like contacts and others.
Week 13
This week I found out our templates could be similar, it just needs to changed a whole lot.
Week 14
This week I found out that we have an extended deadline. Yay.
Observations
Week 12
This week, I went online to look at our seniors work so I can get a glimpse of what they have done and what should be acheived
Week 13
This week, I found out that people around were starting on their first page of html.
Week 14
This week, I realised that we all relieved when we heard that our deadline has been extended.
Experience
Week 12
The final project really scares me the most because im not the best at coding and my brain is the worst at processing html.
Week 13
THis week, after finding a cool template, I was more motivated.
Week 14
I realised that, since we used bootstrap in our last project, it has kind of trained me into doing html better.
Further Reading
Trends in Web Design
There a lot of trends nowadays regarding to web design. Below are some of them that are currently in trend.
Minimal.
Minimalism takes full use of the white spaces to create a clean and multipurpose versatile design. Comfort can be achieved though slow but detailed animations.
Futuristic Deisings
Futuristic designs are taking a whole step into the future.
Custom Illustration and Videos
Visuals tend to attract people a lot. Users tend to process visuals faster than text, up to 60000x faster in fact. People would normally remember 10% of what they hear, 20% of what they read and 80% of what they see and do.
Shadows for extra depth
Shadows help create an illusion for depth and this makes it the design communities favourite design. With shadows, you can convert your flat design into a semi flat.
Minimal Studio SHots
Images with a plain background (negative spaces) that focus on a particular detail. They are the best at drawing user's attentions on a specific item
More Negative Spaces
Web Designers are heavily using negative spaces to draw users attention to something that's unique. Designers use dramatic negative spaces to create Focal Points. Focal points are points t of interests. They help emphasis or difference that capture and hold our attention.
Animation, Gifs and Cinemagraphs.
Motion help Cath users attention. Users would love to see stories and not want to read. The use of animations, gifs and cinegraphs to create eye-catching landing pages, banners, newsletters and more.
https://medium.muz.li/web-design-trends-2018-a9bfabc99d46
Comments
Post a Comment