WEB BOARDS

DESIGN FOR WEB Kathryn Brooks // OUGD504 // DESIGNING FOR WEB DEVELOPMENT VIDEO: For this page I wanted to put a video on, I made the video as part of a history of and thought it would be in keeping with everything else on my website, I think it looks good against the white background, I've put some instructions on above the video from the UKTEACOUNCIL and aligned everything centrally, I think this looks neater. ROLLOVER IMAGE: This is my 'Teas' page where I wanted the main focus to be images, I decided I would like a grid of images that would be circular that would make up the entire page, I would have them as rollover images so that information about the tea could be revealed when hovering over them. I started by saving my title header as an image on illustrator: This was the title header for the page, I saved it on illustrator for web with a transparent background: CODING: I started with the stylesheet, coding the numbers according to measurements in my previous plans (wire frame etc.) I wanted my content to be left aligned,

Upload
kathryn-brooks
Category

Documents
view
214
download
0

TAGS:

Embed Size (px):

description

PRESENTATION BOARDS ON BUILDING A WEBSITE

Transcript of WEB BOARDS

DESIGN FOR WEB

Kathryn Brooks // OUGD504 // DESIGNING FOR WEB

DEVELOPMENT

VIDEO:For this page I wanted to put a video on, I made the video as part of a history of and thought it would be in keeping with everything else on my website, I think it looks good against the white background, I've put some instructions on above the video from the UKTEACOUNCIL and aligned everything centrally, I think this looks neater.

ROLLOVER IMAGE:This is my 'Teas' page where I wanted the main focus to be images, I decided I would like a grid of images that would be circular that would make up the entire page, I would have them as rollover images so that information about the tea could be revealed when hovering over them. I started by saving my title header as an image on illustrator:This was the title header for the page, I saved it on illustrator for web with a transparent back-ground:

CODING:I started with the stylesheet, coding the numbers according to measurements in my previous plans (wire frame etc.) I wanted my content to be left aligned,

DESIGN FOR WEB

Kathryn Brooks // OUGD504 // DESIGNING FOR WEB

SCAMPSINITIAL SCAMP DESIGN DIGITAL MOCK UP

IMAGERY USED:

VISUAL:I wanted my design to be simple and clean, with main focus on photography. I found these images of tea photography which I visually think will make the website look appealing to the taret audience.

My scamp designs have been designed to look like a simple tea website with interesting photography and facts about tea, I think type and image are relevant to my target audience, in terms of style and design.