Website Portfolio Summative

Design & Create a personal website to showcase your TGJ work, other course work, extra-curricular accomplishments, personal successes... past, current... future goals, hopes, dreams... where to after graduation... post secondary goals... hopes... dreams... bucket list... possible travel destinations... experiences you like to have... people you like to meet... things you'd like to do... etc.
.
Design Process Steps:
.
1. Brainstorm ideas for themes, design layouts, content, organization, colour scheme, etc. for your website... the fastest, most effeciate way to work out a variety ideas is.... rough thumbnail sketches on paper (nothing beats it for speed and ease : )
Generate as many ideas as you can... test them... try different variations... play with scale, position, arrangement etc... mix and match your ideas to develop the strongest most inspiring ideas...
- logo... type of logo... where will it go... animated logo...
- banner logo? animated banner logo?
- other animation? gif/s?
- sound effects? what type? where? when?
- rollover buttons? rollover image/s? where?
- colour scheme... look... feel....
- typography... type of font... look... feel... colour... size... placement... expressive typography???
(make sure your fonts are web-safe!)
http://www.fonttester.com/help/list_of_web_safe_fonts.html
http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css
http://www.fonttester.com/web_safe_fonts.html
Get APPROVAL to proceed to Proposal.
-
.
2. Propose your best ideas for theme, content, organization, colour scheme... etc. Provide enough detail to show you have throughly explored and tested the design possibilities and have arrived at ideas worth supporting and developing. Have a sketch of a sitemap showing the site navigation. Make sure no page is a "dead end" eg. every page must lead to another page or homepage. G
Get an APPROVAL to proceed to mockup stage.
.
3. Photoshop Mockup: create the artwork and layout of home page. The photoshop mockup will "supply" all the visual "parts" you will need to create your website in Dreamweaver.
Keep your layers.
When you have fully worked out your design get an APPROVAL to start your Dreamweaver site.
Copy the "parts" and paster into a new photoshop file and save (jpg or bmp) using simple names (eg. rollover1a.jpg, rollover1b.jpg, etc).
Keep all the separate images or visual "parts" of your website IN YOUR WEBSITE FOLDER!
.
NOTE: Pixel Dimensions of a Typical Website screen (1024x768 pixels; 72 ppi)
.
Make sure images are NOT pixelated or distorted.
.
3. Dreamweaver site:
a) Create the "home" page.
Use "Ap Div" to bring in images/visual "parts" and setup your website as per your mockup design.
Make sure all images are good quality and not distorted.
b) Use home page as template to create other pages (eg. save as.. page1.html, page2.html... etc)
.

Include:
- rollovers or buttons, links to other pages or other websites... reference websites... favourite links?
- contact email link
- about you... interests, hobbies, sports, clubs, work, volunteering, pass times, likes/dislikes, bio, gallery of photos, your resume... etc.
- your animation project, a video link? or audio link?
- an animated flash banner? (gif)
- your TGJ work, or work from other courses, a portfolio page or gallery page
- where to next... post secondary goals... hopes... dreams... bucket list... possible travel destinations... experiences you like to have... people you like to meet... things you'd like to do...
- minimum 5 well designed pages: NO "DEADEND" pages (eg. each page links to another page or "home" or "back").


Link to GOOD and BAD website Design...
http://vixpage.webs.com/designtips.html



.
.
Some exemplars... however they are not evaluated by level/grade/mark/quality... they are just to show you samples.

https://sites.google.com/a/ldhss.ocdsb.ca/inside-the-mind-of-sandy-bhogal-2/

http://www.wix.com/graciehawes/ghawesport

http://www.tumblr.com/tagged/tgj4m

http://www.wix.com/bum1_16/kayleesite

http://www.wix.com/mooseman_5/elliott

http://www.wix.com/emmakolbuc/emmak

http://www.wix.com/monkey_girl_987/bkphotography

http://www.wix.com/megwil/chewy

http://www.wix.com/jerichocr0ss/matt#!__site
.
http://www.wix.com/poswiat0/brysen-poswiata

http://www.wix.com/jasmine_major/photo

http://www.wix.com/vnesss/vanessam

http://www.wix.com/trenty19/trentb

http://bml.tldsb.on.ca/mcgrath/index.php?option=com_content&view=article&id=26&Itemid=292.