Web Template Evaluation
Over the past week or so I've created a Web Template that will be integral to the design of my final Portfolio Website. This website will not only contribute to getting a higher grade in my Web Design unit but also will help me with my Personal Professional Development unit too.
Since beginning the unit and taking time into researching various web technologies/issues, I've learnt a lot that is required into making a web template. There are many key factors which are needed in order to make a web template, one of these are the tools needed to put the website together. For the structure of my website, I used HTML, the coding language that is used to structure out content within a certain layout. For the stylisation of my website, I used CSS, this helped me integrate sophisticated design elements into making my template a lot more presentable and easier to the eye. To learn this code I used many different resources whilst taking notes in order to revise and remember what is needed to put together a web template. Most notably, I used codecademy.com to learn the basic features of HTML/CSS along with projects and tutorials into positioning and selector use. The image above displays the various exercises I took into order to understand the tools I had to know to put a web template together.
Since beginning the unit and taking time into researching various web technologies/issues, I've learnt a lot that is required into making a web template. There are many key factors which are needed in order to make a web template, one of these are the tools needed to put the website together. For the structure of my website, I used HTML, the coding language that is used to structure out content within a certain layout. For the stylisation of my website, I used CSS, this helped me integrate sophisticated design elements into making my template a lot more presentable and easier to the eye. To learn this code I used many different resources whilst taking notes in order to revise and remember what is needed to put together a web template. Most notably, I used codecademy.com to learn the basic features of HTML/CSS along with projects and tutorials into positioning and selector use. The image above displays the various exercises I took into order to understand the tools I had to know to put a web template together.
Secondly, my research through web design issues has also helped me structure out a website and what to avoid whilst putting a template together. With using such resources as the 960 pixel grid system, I've been able to put together a template that is consistent with most other commonly used website templates. Building a working HTML web template with this grid system has helped me realise the essence of using pre-made dimensions and the improvement that has been made from using the old table system. Overall, it has made me reduce the amount of complicated table nesting HTML I could've used and promote the law of keeping content separate from presentation (HTML/CSS). With pre-made layouts like these I most definitely will not hesitate making another website template as I'll have a simple laid out structure to follow by when positioning elements.
For my website I've decided to use vertical parallex scrolling instead of the generic usage of multiple HTML pages. Whilst this is costly on the amount of data needed to be loaded in one page, the different factors making up of my website can be found in one place and easily navigated about. In order for this type of navigation system to work, I've decided to use a fixed header (logo, navbar + clock) so that the user can easily be taken to the different pages without having to scroll to the top everytime. These three elements are used for identification (logo), navigation (navbar) and for general information (Clock:Time and Date).
The pages on my website are split into 4 sections, the Main-Wrapper, of which only the top is visible in the image (blue). The Main Wrapper is to keep the top 3/4 of elements together whilst also having a place for the header to go. The Left Column and Right Column sections are also held by the Main Wrapper, generally for my website I've kept images to the left and small chunks of information to the right (red and green). With attention to Jacob Niel's research in how user's read websites, I've decided to make my left column larger than the right column. This is so that any user visiting my website for the first time will be induced to look towards that side of my webpage. Lastly, my Sub-Main is not kept within the Main-Wrapper, but kept within the Page div itself, it is used for short tag-lines or additional information.
Overall I've felt like I've created a Web template that will be very beneficial to creating my website. One that can be easily manipulated due to the nature of the nested elements whilst also making my content easily positioned with usage of the 960 Grid System.
The pages on my website are split into 4 sections, the Main-Wrapper, of which only the top is visible in the image (blue). The Main Wrapper is to keep the top 3/4 of elements together whilst also having a place for the header to go. The Left Column and Right Column sections are also held by the Main Wrapper, generally for my website I've kept images to the left and small chunks of information to the right (red and green). With attention to Jacob Niel's research in how user's read websites, I've decided to make my left column larger than the right column. This is so that any user visiting my website for the first time will be induced to look towards that side of my webpage. Lastly, my Sub-Main is not kept within the Main-Wrapper, but kept within the Page div itself, it is used for short tag-lines or additional information.
Overall I've felt like I've created a Web template that will be very beneficial to creating my website. One that can be easily manipulated due to the nature of the nested elements whilst also making my content easily positioned with usage of the 960 Grid System.
No comments:
Post a Comment