New Project

 The Brief
In this assignment, I will design and build a website containing my FdA work to date, plus any existing work I feel you should include in my portfolio and biography information such as an ‘about’ section and/or a CV. This will form the starting point to my portfolio website which I will keep up to date with new projects throughout the course.

These are the parameters that have been set for making web pages

To make successful websites with working links you will need to thoroughly understand the folder system that structures your files. You will create a web project folder with your name and make folders within this that offer a sensible navigation structure. These may be, css, images, scripts, working files. Please note the index.html page MUST be loose at the top of the hierarchy not inside a folder.

You will use TextWrangler to create all HTML and CSS. The goal of this project is to further your understanding and abilities in hand coding HTML & CSS, therefore you will not be allowed to make any of this assignment in Adobe Dreamweaver or any other visual WYSIWYG editor.

Your site will be constructed as a single page with the different sections made visible using css positioning or by a hide/show or similar jQuery method. CSS3 animation or jQuery will give the smoothest and best results.

You will not use images of text in this assignment. All text elements must be live selectable text and styled using css. You will use either Google Fonts or @fontface for your text elements.

Images are restricted for content, header (masthead) decoration or sprites for use as background to navigation elements but all links must be text based.

Important: You will not use html tables for the purpose of creating layouts at all in this assignment.

Working with CSS

You will use Cascading Style Sheets (CSS) to format and style the elements of your page so that you can:

· style and distinguish between navigational and content areas of your page,

· format and control your text and any links,

· you can create print- friendly versions of your page which restyle the content for print outcomes.

Working with real outcomes

You will also prepare and format your page with CSS for different browsers on different platforms. This will involve testing your pages on both Mac and PC computers.

In order to make sure that your pages work seamlessly in different browsers and on both Macs and PCs, you can use conditional HTML comments to direct Mac and PC browsers (including Internet Explorer and Safari to sets of CSS files).

Working with text and images

Text material in Word .doc format or created in any other word processing package must be converted to 'vanilla' plain text (txt) files before inserting into the web page.

You will use Photoshop or Illustrator to process images that will be optimised for web delivery using Save for Web and Devices as a gif, jpg or png, with care taken over pixel dimensions, file sizes and image qualities.  Video content should be displayed using the ‘Video for Everybody’ system.

All the images you make in Photoshop and Illustrator should be placed in the ‘images’ folder in your project folder and will be addressed with the correct routing through HTML. You will make these images accessible through the use of  <alt> and <title> tags.

For the typographic elements of your design you will use webfonts using either @fontface or Google Web Fonts.

My design work

I will ensure that I take note of screen sizes and that my pages work effectively with current popular screen resolutions.

I have to consider creating visually pleasing and legible designs where the design acts to make the content more appealing and readily readable with a standard web browser, rather than dominate or overpower the content.

My designs must achieve consistency over the sections of the site: I must use common type styling, layout and structural elements between sections. I need to consider usability and accessibility in the design of your interface and page layout.

I need to demonstrate my approach to the creative process using methods that are standard to the digital media industries. As well as your visual research, my sketchbook and blog should show sketches, ideas and experiments for the designs in development so the processes I have used to reach decisions on such issues as wireframe layout, colour, typography and navigation are transparent. Navigation must be planned using flow diagrams.