OUGD504: Design Production - Studio Brief 2: Design For Web Workshop 3

This was are third and final Design For Web Workshop with Simon. Once we had completed these sessions we would be able to work independently to apply the skills we had learnt to produce our own website.

We began our third workshop for Design For Web by repeating the same process we learnt last week in order to create the last three remaining buttons for our website and insert the code into source code of our DreamWeaver document.

Final website, complete with four rollover buttons.

In order to create a functioning website these buttons need to be link to the appropriate page. In order to achieve this we changed the coding from '#' which means it is not link to anywhere to 'work.html' etc.

• Four pages of the site

To see whether these links were successful we changed the text on each of the pages to say 'this is the work page' etc. and the clicked 'Save As' we then previewed the site in the web browser.

• Final website with four working pages

We were then able to fill each of these pages with the content of of site such as text, image and videos etc.

We began by creating a area for content within the design of the website.

• We began by typing the coding, using the calculations we had made in to the style sheet. 

• We then used the 'Div' tag to insert this into the html

• Final website with two columns in it

Inserting Text

• By simply copying and pasting the text into the style sheet, the paragraph is not formatted and there is no line breaks etc.

• However by inserting '<p>' a new paragraph is made and by inserting '<br>' a line breaked is inserted into the text.

Inserting a image

• We began by formatting the image for web in Photoshop 

• We then inserted this image in the coding for this by selecting insert > image

OUGD504: Design Production - Studio Brief 2: Design For Web Studio Session 3

Studio Session 3

We began our third studio session for the Design for Web brief by discussing and considering the content for our websites. Using the research in which we have gathered for our Summer Research Brief as a starting point we were asked to produce a simple diagram - keeping it to a four page website for now - which demonstrated the content for our site.

Things to Consider:

• Who is the target audience?
• How will the target audience interact with the site? Contact page?
• Possibilities for extension? Downloadable PDFs? Series of leaflets?
• Contextualise content, make it more specific

Once we had decided upon the content for our website we were then asked to produce a possible design for the homepage of website taking consideration into how the end user would navigate around this content.

We then laid these designs and our list of content for the website onto the table in order to receive feedback from the group in relation to the effectiveness of the design and the content we propose to include.

My Feedback

• Good inclusion of 'what not to do' 
• Is the site informative or promotional? (of your own design)
• Design is simple, but due to the actual topic being so vague, a slightly more developed design would work better as it's all too simple
• Simplistic, easy to navigate website
• Will imagery be included?
• Very simple design - maybe too simple?
• Looks slightly like a folder (paper filing)
• New concept I haven't seen before in regards to the menu working like a diary / planner divider
• How would the pages move as they were selected? And where would the other pages go after one was selected?
• The tabs look good and very interesting, but how would they each be distinguished from one another?

Overall I found the feedback I received very helpful in terms of the development of the design further. I believe the piece of feedback 'how would the pages move as they were selected? And where would the other pages go after one was selected?' is the most helpful in terms of the functionality of the site as this is something I had not put too much thought into beforehand, therefore a sketched out a site map of how this could work.

OUGD504: Design Production - Studio Brief 2: Design For Web Workshop 2

Workshop 2

We began our second web workshop for studio brief two by displaying the three scamps for our website which we were asked to produce in last weeks session in order to receive feedback on our initial ideas

My Feedback:

• Bottom right - interesting concept for navigation
• Good concept, the contents page will work well
• I like the 3rd one the best - the tabs

This feedback was particularly useful as we were able to receive the feedback at an initial stage which gave us a better idea of the conventions we need to consider when designing for web.

• Should be able to get to get to any page from any page, ideally.
• Navigation should be constantly visible
• Need to create something which is aesthetically pleasing whilst also keeping functionality and structure

By the end of this workshop our aim is to have a functioning four page website which we will create as a class. Therefore we began by making some basic decisions for the wire frame.

• Size: 1024 x 768 - Fixed size, works on 94 % of devices
• Headings: Helvetica
• Body Copy: Georgia
• Logo size: 200 x 200
• Button size: 200 x 100
• Navibar size: 200 x 600

Making a container 

To begin we needed to create a 'div' in the stylesheet.css which we named using the '#' symbol. We were then able to to type in the fixed size we had decided upon for the site.

In order to place the container from the stylesheet.css into the source code we used the '<' '>' brackets to open and close the 'div'.

To text whether these new changes had worked, we opened the website in a web browser, however as this is just a container with no border etc. it was not visible.

Therefore, we were able to edit the 'div' we made earlier in the style sheet to add a background colour.

Upon opening the webpage in a web browser we can se that these changes we have made have been applied.

• Fixed positioning
• Relative positioning

Fixed positioning

By changing the value of 'top' and 'left' to zero we were able to get rid of the white border which surrounded our container.

As a group we decided we wanted to centre the container of our screens and therefore we changed the value of 'left' to '512' which is half of the width.

However this technique was not effective as it would only work on the screen size we were working to

• We therefore changed the the value of the 'margin left' to '-512' 

• The container now appears in the centre of the browser

• We then made a navigation bar for the website using the same technique as the container 

• Again this coding from the style sheet was inserted in to the source code using the 'div'

• Final website with navigation bar

• To create the logo for the website we went into illustrator, ensuring that the profile was set to 'for web' and the size was correct.

• My logo for the website 

• In order to ensure the image was high resolution we selected 'PNG-24' and checked transparency which would ensure there would be no white background 

• We then inserted this logo into the style sheet by using the same techniques as before but ading a 'background image' option and inserting ht URL for our image.

• Again we used the 'div' coding to insert this into the source code

Final website with logo on it

• As our coding was starting to get complicated, Simon showed us a technique in which he used the return key to line up each of the separate 'div' codes making it clearer

• As with the logo, we created the buttons for our website in Illustrator

• again this was inserted into the style sheet using the same technique as before we positions the button where we want it to go on the site.

• For our buttons we wanted a rollover image, so the button will changes the cursor scrolls over it, however the coding for this is quite complex therefore we used an option in Dreamweaver to to do this.

• We began by placing the first state of our button which we created in Illustrator into the subject field 'original image' and the second state of our button into the subject field 'rollover image'.

• In doing this Dreamweaver then inserted a very complex code into our source code

• Final website which shows the fully functioning rollover button