The purpose of this assignment is to develop a website using the appropriate design procedures.
For my Composite One, I’ve made a website called History of Everything. The goal of this website is to educate about the world’s past in a generalized and simple format. Major events from 30,000 BC to 2000 AD were listed on the homepage in a timeline format. HTML, CSS and PHP were used for this website.
A total of 6 pages were made for this website: Home, BC Timeline, AD Timeline, About, Contact, and the corresponding Thank You page for the form. All the pages followed a simple layout, with the title placeholder at the top (Fixed positioning, so it always stays on top of window), an image-banner as the header, Nav bar right below, then the content.
I made this website responsive, but did not add much effects for interactivity. The timeline descriptions adjust on browser resize. Using media queries, the Title and Nav Bar shrinks to a smaller font for small browser windows.
I find that the hardest part of this assignment was to follow the design procedures properly, or rather the most time-consuming. I started off using Illustrator to create the Wireframes and Mock up, and tried to follow the margin spacing accurately. My overall CSS styling changes during development to match my original idea. I ended up using Photoshop to create new Wireframes and Mock up which I find to be a lot more efficient, and improved my workflow. Although I understand that the accuracy of the Mock up (i.e. Margins) is not as accurate as Illustrator, I’d still feel that it would be a better approach if I were to work with personal clients. As it would save me a lot of time, and enough to show the general layout and feel of the website.
I aim to add more content to my timeline. Maybe separate the content into more categories (e.g. Country, Human Civilization, Beginning of the Universe, etc). Also I would like to find a way to make the content more interactive, visually appealing and easier to navigate through. Especially since I plan to add more timeline events.