CCT260, Project 2
PERSONAL WEBSITE
Design objectives
An integrated public and professional digital presence is more than an online resume or online list of projects. There are many critical parts to a personal/professional online identify, some of which are: a custom website; domain identity; cloud-based professional portfolios; integrated social media presence; collection of rich media; aggregates of social collateral and community interactions; and last but not least a comprehensive analytics program for user insights and measuring success. These are all integral to a strong digital strategy and a broader digital presence online.
In this project you will design and develop a simple website as a first and foundational step towards an online digital presence. Your website represents your professional online presence and will include critical components including a carefully written biographic statement, a professional representative photo of yourself, rich media content produced by you; a link to one of your social media websites appropriate for a professional presence, inner pages in addition to your homepage which include a selection of representative work that you feel strongly about and a process page.
Scope of work
Components: Your website should be at least 5 pages:
1. One mashup landing homepage featuring highlights of inner site content
2. One inner page that shows highlights of your work (e.g. photographic gallery, videos, essays, activities of interest)
3. One resume page with appropriate tables for tabular information
4. One rich contact information page with an integrated form. and some rich media content such as an embedded map
5. One process page (e.g. representing the phases of design and development of your site such as planning, rationale, inspirations, IA, wireframes, graphic design prototype, etc.), which includes a statement and summary of measures taken to ensure WCAG2.0 Accessibility.
Coding and programming: Use HTML/CSS to develop a finalized standalone website which works on a recent version of Firefox, Chrome and Safari on a desktop computer for a standard 1280px screen-size (mobile responsive not required).
Website components: You must include the following components on your website
1. Appropriate regions on both pages: header, navigation, main content, visual features, secondary content such as a sidebar, footer
2. A brief biography and photograph of yourself on the homepage
3. Connotative components such as spotlight image/video with strong visual impact on all pages
4. At least one hyperlink to your social media page, preferably something professional such as LinkedIn.com or Behance.net or Squarespace.com (should open in a separate tab/window)
5. Embedded videos of your choice from an external source such as YouTube, integrated appropriately in your overall design
6. Working cross-links from navigation to all inner pages including the process page
7. A balanced mix of writing and visual work featured on your process page.
Submission requirements
1. Final website: A compressed zip file maximum 25MB of your HTML/CSS along with the digital media assets such as images and documents, in an organized manner, and included in such away that the uncompressed file is fully viewable in a local browser on any computer other than your own
2. References: In-page citation of external resources
3. Note: All links to the home/inner as well as external pages should work; Ensure no use of placeholder content such as “Lorem Ipsum” or “Under Construction” pages; and all rich media such as photos/videos must be your own product with the exception of embedded YouTube video(s)
4. Accessibility and usability: Refer to guides and lectures for expectations, and include your summary report on the process page.
Learning outcomes
• Apply the foundational process for planning a standalone professional website; graphically designing a web interface; using web markup and programming to implement a usable design.
• Demonstrate a foundational understanding of standards-based front-end web development and design using HTML/CSS.
Evaluation criteria includes:
• [30%] Quality of content that includes digital original assets and content with attention to process, planning, wireframes, graphic design and visual identity, attention to usability and accessibility, grid- based hierarchy, visual emphasis, colour and typography, photographic and rich media treatment
• [70%] Quality of the design and development of website, use of proper HTML/CSS standards-based coding techniques based on learnings in class, organization and structure of code and assets, uniqueness of interface that sufficiently differs from worked in-class templates and examples.