Alicia Lee Hui Min ( 0331719 )
1/11/18 - 29/11/18 (Week 10 - Week 14)
Interactive Design
Final Project
INSTRUCTIONS
1/11/18 (Week 10)
For the final project, we are required to team up with a person from class and create a professional website for them. The website could be either a portfolio, informational site ,small business website, or whatever client (which is our friend) wishes it to be.
I teamed up with Megan,we both started discuss and list out what we wanted on our websites and send it to each other. She requested for a portfolio website.
8/11/18 (Week 11)
This week is an e-learning week so we worked from home. We both finalised our content and using the information I got from Megan, I started to sketch out the sitemap and wireframes.(These are not the final designs they are just drafts to guide me.)
 |
| Figure 1.0 Sitemap |
 |
| Figure 1.1 Wireframe Sketch |
 |
| Figure 1.2 Wireframe Sketch |
|
 |
| Figure 1.3 Wireframe Sketch |
|
 |
| Figure 1.4 Wireframe Sketch |
Megan told me to check her Pinterest web section for the colour scheme and the look and feel that she wants for her website which is minimal and a nude colour palette. Here are some of the references and also colour scheme and font used.
 |
| Figure 1.5 References |
 |
| Figure 1.6 References |
 |
| Figure 1.7 Colours picked out |
 |
| Figure 1.8 Final Colour Scheme |
 |
| Figure1.9 Typeface used |
 |
| Figure 1.10 Megan's Logo |
22/11/18 (Week 12)
I started by searching online for bootstrap templates as I wanted the website to be responsive.
There were many templates available on the website. I ended up choosing the creative portfolio as my theme. I chose it as it was similar in some ways to my design and also it looked interesting. Here is what it looks like.
 |
| Figure 1.12 Bootstrap Template |
 |
| Figure 1.13 Bootstrap Template |
I downloaded the template and opened it in Dreamweaver. From there, I changed the content according to the information given to me by Megan and started to design the homepage.
 |
| Figure1.14 Coding Process |
 |
| Figure1.15 Coding Process |
22/11/18 (Week 13)
This week, I continued to work on all the pages, changing the style in css as well as adding pictures, designing the header and adding in other contents.
 |
| Figure1.16 Coding Process |
 |
| Figure1.17 Coding Process |
 |
| Figure1.18 Resizing pictures |
 |
| Figure1.19 Resizing pictures |
 |
| Figure1.20 Designing the header |
 |
| Figure1.21 Designing the quote in about |
 |
| Figure1.22 Coding Process |
29/11/18 (Week 14)
By this time, I had already gotten more than half of the website done, and I just needed to code the remaining pages and make some minimal changes here and there.
 |
| Figure1.23 Homepage |
 |
| Figure1.24 Homepage Sneak Peek of Works |
 |
| Figure1.25 About |
 |
| Figure1.26 Interest image slider |
 |
| Figure1.27 About quote |
Here are some images on here website that I had to link.
 |
| Figure1.28 Image for Website |
 |
| Figure1.29 Image for Website |
 |
| Figure1.30 Image for Website |
 |
| Figure1.31 Image for Website |
 |
| Figure1.32 Image for Website |
 |
| Figure1.33 Image for Website |
 |
| Figure1.34 Image for Website |
 |
| Figure1.35 Image for Website |
 |
| Figure1.36 Image for Website |
After making some final adjustments and changes in the website, I was finally done with it. Here's the final outcome of the website I designed for Megan which is a portfolio for her.
PDF of Website
 |
| Figure1.37 Homepage |
 |
| Figure1.38 About |
 |
| Figure1.39 Design |
 |
| Figure1.40 Design |
After that, I uploaded the files onto 000webhost and had a hard time uploading the file as the web host kept on crashing but everything worked out in the end. Here is the process.
 |
| Figure1.41 Uploading process |
 |
| Figure1.42 Uploading process |
FEEDBACK
Week 13
No feedback was given
Week 14
General feedback: If we are using a bootstrap template, we must ensure that most of it is changed and customized.
REFLECTIONExperienceWeek 10; This week, I started to draft out the content of the website. Week 11, my friend and I shared our content with one another and started sketching out wireframes and sitemaps.Week12, I started to do the homepage using a bootstrap template and making some changes in them.
Week 13, I started to design and code the other pages. Week 14, I made some touch-ups and uploaded the website on webhost.
ObservationWeek 10;I observe that categorising and placing information under categories require some thought process as it affects the viewer.Week 11, I observe that there are many ways to layout a website and at times it can be overwhelming. Week 12, I observe that I had to resize the images to make them appear more equal on the webpage.Week 13, I observe that googling for methods for coding was very helpful.Week14, I observe that when uploading the files they should be the same as what I have on my desktop and named the same way.
FindingsWeek 10; I found it easier list out the content after knowing the goal of my website. Week 11, I found it hard to sketch out the wireframes at first as I was a bit stuck so I found that looking at other websites helped to inspire me and let the ideas flow. Week 12, I found that bootstrap helped me to get a start on my design instead of being stuck on how to get certain things together which made the workflow much faster. Week13, I found that making a gallery took a lot of trail and error as I had to find the perfect padding and width size to make it even and neat. Week 14, I found it hard to upload my files on webhost as it kept on crashing which made it hard and I had to retry many times and even use different accounts.
FURTHER READING
The web wizard's guide to web design by James G.Lengel
This book gave a variety of well structured examples of an ordinary web. Tips on fonts, spacing, kerning, colour and more were mostly mentioned which was good to recap on. This book gave some side effects that could possibly happen which is good to note down for future use as it is common for hiccups to occur during coding.
Comments
Post a Comment