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.
