New Assignment Brief - Portfolio Website

The Brief 

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

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.

Your design work

You should ensure that you take note of screen sizes and that your pages work effectively with current popular screen resolutions.

You should 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.

Your designs must achieve consistency over the sections of your site: you must use common type styling, layout and structural elements between sections.

You need to consider usability and accessibility in the design of your interface and page layout.

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

 

Pitching your designs

You will pitch your designs to the group and tutors in a presentation.  You have to include your proposed content, layout, interface designs and look and feel in your pitch.  This can include:-

-   Wireframes

-   Flow diagrams

-   Graphics

-   Proposed content

-   Logo and heading designs

-   Interface designs

-   Page mock-ups

This pitch needs to be prepared as if you were selling your idea to a client.  Include technical research, particularly screen resolutions, browsers and platforms.  Show colours and fonts in mock ups rather than on their own – make visualisations rather than lists.