Small Web Site – Designing for the Greater Good

Project Concept

This project gives you a chance to explore a cause that you are interested in. Topics may come from the humanities, health, education, environment, development and relief services, human/public services.

You will create a small but complete website with full responsibility over the design, images, code and final delivery. This website will apply concepts and techniques covered in courses MEDE 101, 103 and 104. Your website will be evaluated independently within each course based on that course’s criterion.

General S1P1 Requirements

Create a functional 5-7 page website (Valid HTML5 code).

The purpose of the website is to contribute positively to society. Using a subject that is a societal or   environmental concern, the website should provide a service such as the distribution of information, aggregation of ideas or questions from the field, or providing fundraising activities.

Your website needs to be completely original from start to finish. You CANNOT duplicate a website that already exists. You will need to consult with your instructors to find a reasonable balance for this     project.

Specific S1P1 Requirements

Target monitor resolution: 1920x1080

Forms or any extra interactive features (if any) can only be simulated, not actually functional. All content created by you:

-   You must write all text information.

-   Images, such as photos and illustrations, must be 100% created and owned by you.

No third-party technical solutions are permitted for S1P1.

S1P1 Deliverables

Prepare and deliver a walk-through presentation of 4 minutes MAXIMUM for your website.

All files and folders that make up the final functional site must be handed in inside a folder named after you and in the drop box of Mede 101, 103 and 104. URLs as a hand-in are not permitted.

Some courses may require additional file delivery, refer to your specific courses for more information.

Grading

The Elements of Performance from each professor are outlined below. This is what your instructors will  use to grade your work. If you have any questions as to what is expected of you by any instructor, refer to their Elements of Performance (EOP) or ask them directly.

S1P1 Elements of Performance

MEDE 101 Digital Fundamentals

Worth 25% of final grade for MEDE 101. Expectations for S1P1:

1. Overall Project Specifications: (5 marks)

•    A small website that meets needs of the users.

•    Ability to produce a functional website.

•    The website consists of 5-7 web pages (HTML5 files), plus any needed CSS

•    NO JavaScript permitted.

•    No splash pages, no video, no sound, etc. No frames. No other scripted or programmed interactivity

•    Website displays and functions well in multiple browsers (Firefox, Chrome, Safari)

•    All original text, images, layouts, and coding.

2. Coding (5 marks)

•    HTML should provide meaningful structure and semantics to content, and tags/elements should be chosen logically not arbitrarily. Validated XHTML5 Transitional code - for all HTML pages.

•    CSS required. All CSS code validated.

•    Appropriate use of CSS formatting.

•    Image tags use the width, height, and alt attributes consistently & appropriately.

•    Body text presented and formatted appropriately using HTML and CSS.

•    Text flow and expansion of text areas is handled with appropriate tags.

3. Architecture, Path, and Download Issues (5 marks)

•    Correct, logical, effective, and appropriate file and folder naming.

•    Logical, effective, and appropriate positioning of files in folders.

•    Ability to produce a well-organized, efficient, and updateable website.

•    Correct loading of pages, links, images, etc. for all parts of the site.

•    Optimal use of title tags.

•    Pages, images, and other elements use relative links for linking and/or loading elements that are part of the website. Site must be viewable and function locally, not only from a server or online computer.

•   Appropriate download times for individual images and pages.

4. Resolution and Layout (5 marks)

•    Page layout accomplished using CSS and divs (if tables used for page layouts, expect some deductions).

•    Targets the required resolution, and coding works correctly to support this.

•    Image files are the appropriate resolution and dimensions for general web use, as well as for the targeted monitor resolution.

•    Layouts, if they fluctuate, only do so appropriately for the target resolution and one other resolution.

•    Text and page layout accommodates font sizes being set one step larger by users.

5. File Formats, File and Site Optimization (5 marks)

•    HTML, CSS, and JavaScript (if any) are in the appropriate file format.

•    CSS use is more systematic and efficient, less piecemeal and redundant.

•    Appropriate graphic file formats employed for specific needs (photographs, illustrations, navigations and buttons, etc).

•    Good image quality, clarity, and colour.

•    Appropriate image compression and optimization for web environment.

•    Presentation (Voice, Body Language, Screen presentation)

MEDE 103 Language of Design

Worth 15 % of final grade for MEDE 103.

Your website needs to have a minimum of THREE image. These pictures MUST be ones you take and edit  yourself. Think about what you can photograph that will make for interesting composite components and overlays!

The images must show your Photoshop skills.

Delivery for this class is your original images in .jpg format, and the edited versions in PSD format to show your work.

EACH of your THREE Images must demonstrate these three Photoshop Skills:

Color Correcting

•    Use of the Camera Raw Filter on a Smart Object layer to control the images color and contrast

Compositing

•    Using layer masking and blending modes along with adjustment layers to blend multiple image elements into a single image

Image Correcting

•    Using the Healing Brush, Clone Stamp, Content-Aware Fill, or other methods to remove unwanted elements of the image