Introduction:
For our final assignment the task was set to complete an online webzine that would reflect and accompany the magazine created – Vibe. In order to do this Dreamweaver and Photoshop would be used to design and create five linked web pages.
Research:
As our pages for Vibe magazine had already been created the task of putting together a five page website would be helped along due to the fact the general colour schemes, font and style had already been set.
As well as referring to our magazine pages it was necessary to do some other researching, I looked at several popular online publications, such as Kerrang, Nme, Q and Mojo. The styles of these websites seemed to differ slightly depending on whether the publication was a weekly or a monthly, however the basic themes seemed to revolve around a dark background and coloured boxes of information and content.
After looking into ways to create and design a website that would fit in with those within the same field as well as ways to make the website as user friendly as possible I discovered the concept of BWD – Balanced Website Design: “Together with the intrinsic purpose needs of a website, these aspects form three pillars of website design, and hence the BWD methodology ... usability, purpose and aesthetics.” (D. Lawrence, S. Tavakol, 2007, pg 10) the basic ideal of this is to create a website that functions well and looks appealing as well giving the audience the features needed.
Photoshop:
When designing the website the program that was best suited was Photoshop, working with this I was able to quickly pull together ideas as well as alter and add certain elements. By using Photoshop it meant the design could be easily transferred onto Dreamweaver to be created. It was only necessary to create a basic format for the website, focusing on the home page as it is the hub and therefore first port of call for anyone visiting the site; by creating this page all other pages would follow this format and style. Through further research it became aware that there were certain aspects that make up a quality homepage: “At least seven major rules must be considered when designing a homepage for an internet resource or service: purpose, scope, structure, enhancement, links, forms and maintenance. “ (M.D. Harris, 1997, pg 899) Through choosing the general colour scheme and font style, whilst working with the magazine page I’d created earlier I was able to ensure the two could be matched together to a degree as well as working well as a functional website.
One main element of Photoshop is the use of different layers, for each new part added to the page a new layer can be created, this means different layers can be worked on a different times, without affecting any other images of text on the page. BY locking certain layers, colours can be added to background layers or to text boxes made on higher layers.
When the primary design was completed I was then able to begin to transfer the work onto Dreamweaver, in order to do this I used the Marquee tool; this is an aspect of Photoshop that allows images and other components to be traced around and copied onto another program.
Dreamweaver:
By using Dreamweaver I would be able to process a webzine quickly and easily “Dreamweaver provides you with the tools for publishing your site by copying the web document and supporting files from the computer you created them into the web server and make them accessible to viewers,” (Kogent Solution Inc, 2008, pg 18) To make the transition from Photoshop to Dreamweaver it was necessary to make a table that matched the height and width of the design created within Photoshop, to do this I changed the height and width from percentage to pixels on Photoshop and typed in the number into the ‘raw’ code on Dreamweaver.
I added a background to the five pages I had created, I sourced the blue-grey texture from Google Images (www.google.images.co.uk) as it was in-keeping with the pale colour scheme created within my magazine page. Also I used blue and grey colours for the header and navigation bar as well as changing the font colour to grey #ccc.
By using ApDiv boxes I was able to move images and text around easily, I aligned all text to ‘centre’ and focused on making the content appear in some form of columns, symbolising a magazine format. I kept the amount of text small as within webzines the amount of information and news is lesser than that found within the print publication, in some ways it may act as a taster.
I linked all the pages together using by following the website lecture notes on MyCourse. I went to properties and browsed the root folder and setting the target to self; however when adding external links I needed to paste the link and set the target to blank in order to open a new window.
To make the sections within the navigation bar – Home, Magazine, Blog, Video and Feature change colour when the viewer rolls over the word I went to Page Properties and changed the colour of the text to black and underlined, this meant that the viewer is aware of where the links are on the page.
To add a video to the page I followed an online tutorial, I copied the embedded code from Youtube and changed the page from split to code, I then pasted the video code into the html and refreshed.
Throughout creating the website I viewed the web pages within the live view, by doing this I could check the hyperlinks and get a better and fuller look at each web page.
Bibliography:
www.Kerrang.com
www.NME.com
http://mycourse.solent.ac.uk/mod/book/view.php?id=184961
http://www.youtubeget.com/yg8.html
M.D. Harris, Handbook of home healthcare administration, Jones and Bartlett learning 1997, pg 899
Kogent Solutions Inc, Dreamweaver in simple steps, Dreamtech Press2008, pg 18
D. Lawrence, S. Tavakol, Balanced Website Design – optimising usability, purpose and aesthetics Springer, 2007, pg 10
No comments:
Post a Comment