05.10.2021 -22.11.2021/ Week 07- 14
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Interactive Design Project 02: Microsite Design & Project 03: Website
LECTURES
Week 06:
Plan a website's structure
✧ Start with a rough outline:
defining audiences & building the content
✧ Consider the monitor sizes, user
experience and browsers
✧ Find a hosting service
✧ Hosting service is like a house that helps to store all the websites an
individual has tailored made
Ideal Web Page Sizes
✧ Commonly use sizes: (w) 960px (h) 700px
✧ 960 Grids, split into 12 column grid, each 1 grid is = 600 px
Responsive Designs
✧ Designs that can be fit across multiple platforms
✧ Bootstrap: provides a set of CSS & JavaScript files that helps
the website to be responsive & can be displayed across all screens
Fig _ example of Bootstrap
Fig _ how to know if it uses bootstrap
✧ Bootstrap link to refer to that provides predefined frameworks and
codes: https://getbootstrap.com/docs/5.1/layout/grid/
Sitemap
✧ Sitemap helps to map and segregate content
Fig _ example of sitemap
Wireframe
✧ Wireframes help to organise the page and also create the user's
experience
Fig _ Wireframe example
Example of bad user experience:
✧ Content is all over the place
✧ Usage of colours is bad
Example of good user experience:
✧ Employ negative space, breathing space
✧ Content placed strategically, it lets user focus on the
content
Week 11:
More in-depth learning of how to create webs on Dreamweaver (class
live tutorial)
Steps identified in class:
✧ 1st, define sizes of the elements within your design (for example,
header, icons, background, elements, pictures, etc)
Fig _ The usage of selection tool
✧ Within
Photoshop, we can use the "Selection tool" as indicated in Fig _ to
identify the size of the element we wish to insert into
Dreamweaver
✧ Once item
is selected, we can use "copy merge" to export the image. When dealing
with icons that we want transparency, copy merge
is not the best way, instead we can use the
artboard crop function in Ps to export the
item, though will need to keep in mind to undo
it after exporting the icon.
✧
Save all images in "Web Legacy"
Fig _ planning pages
✧ 2nd, Plan & list down all pages ahead of time
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1LfErFV9d7y0CfzSJRXvRFVLwEA4h4Eb0/preview"
width="640" height="480" allow="autoplay"></iframe>
EXERCISE
Project 02: Microsite Design
In this task, we are to produce a microsite, which is an extension of
Project 1 as shown in Fig1.1.
Fig 1.1 Project 1's Landing Page
Microsite Design Finalised
I first planned out a Site Map (as shown in Fig 2.1) to better organise the items I need to insert for each web page. I did the entire Microsite Desgin in Adobe Illustrator. I've finalised my designs as shown below before proceeding to Dreamweaver.
Fig 2.1 Site Map PNG
Fig 2.3 Index/Home page & 2.4 Product Page PNG
Fig 2.5 About page & 2.6 FAQ Page PNG
Fig 2.7 Contact Us Page PNG
Fig 2.8 Full Microsite Design in PDF
Project 03: Website
For this part of the project, we used Adobe Dreamweaver to create the 5 pages website that we have drafted in Ai.
Fig 3.1 Dreamweaver view of website progression
Here's a view of how i started the project. It was uncertain for me as it is using a software that I am not entirely familiar with but over time I managed it! There were a few items from the draft that did not made it into the final webpage...
Fig 3.2 All web, images & CSS files
In Fig 3.2, i showed the folder that contained all the working items for the website project.
I've utilized a lot of this CSS items. (Note to self: If I were to do another project like this, kindly organize the names so it will be easier to refer back to)
Fig 3.4 Some of the coding in Dreamweaver (FAQ page)
Final Submission
Fig 3.5 Final Website in Safari View
I've recorded an overview of how the website looks like in Fig 3.5.
Download the HTML and CSS files HERE.
FEEDBACK
There is impressive progression shown compared to what the website started off as.
REFLECTIONS
Through this module & project, I got to know more about the coding world and how it has this crossover collaboration with design to create web designs. Prior to this module, I've only used Wix.com to create websites, and I have not learnt about the inner part of how a website was made out of. In this Final Project, I learn to be patient and preserve through the project. Mr Tarmizi helped me a lot in consultations with my website, for example, my website kept not appearing in real-time safari mode, Mr Tarmizi solved the problem by looking through my codes. He also is very helpful when presented with a question that is probably an easy task but is quite channeling one for me. This is also one of the more frustrating projects to work on, as once there is a problem, I need to go back to the coding part to see which codes were written wrongly or which CSS item that I maybe accidentally made larger. There were also the divs that I often made the mistake of making them too big, which affected the following items I inserted. But all in all, it was a good learning experience.
Comments
Post a Comment