Website Design
& Implementation

Determine what the goal of the site will be (what specific problem or user need will you be addressing?), and generate a strategy/scope description reflecting that. Create an inventory of content you plan to include in the site, and provide a information architecture diagram showing how that content will be grouped and organized on your site.

Create wireframes for each of your major page types (e.g. main/landing page, main category page, individual content page, about page, contact page), showing the basic grid and page layout you plan to use.

List functional requirements for the site--what technology do you expect to use? What purpose will it serve?

Create mockups in a graphics or prototyping program, showing your intended design for the site. There should be one mockup for each wireframe you created.

• Published in a portfolio directory in your igme230 repository, and linked from your landing page.
• index.html page in the portfolio directory that includes your name and an image (could be a photo or an avatar)
• Gallery page with brief information about a minimum of three examples of your work (these can be projects or exercises classes, or work you've done on your own)
• Individual pages with more detail for each of your examples, including the following:
  • a title and a relevant image (could be a screenshot or photo)
  • a one-paragraph description that describes the skills, tools and process you used to create that work
  • if the example is from a group project, be sure to clearly indicate what your role was on that project
• Contact information page
• Resume (HTML, not PDF) with a printer-friendly CSS media query
• Documentation page with information about the development of your portfolio, including the following content:
  • Source information for any images or code that you didn't create yourself (including CSS frameworks, typefaces, and any code libraries)
  • Description of any particularly challenging aspects of the design and how you dealt with them.
  • If you used a template or framework, explain how you modified it so that your portfolio has a unique look and feel.
  • Anything that goes beyond the base expectations for the project--what did you do that was particularly challenging? This could involve art/design, content, or code.

• Responsive design with a minimum of two layouts–one optimized for desktop, one for phones
• If a framework or template is used, colors and typefaces must be modified so that the site is not a “cookie cutter” replica of the template
• Principles of visual design employed: clear visual hierarchy, good use of white space, effective alignment of content, thoughtful choices of colors and visual elements
• Effective typography employed; typeface(s) chosen should be clear and legible as well as appropriate to the content being presented

• Semantic, valid HTML
• Well-structured, valid CSS used for formatting and layout
• Drop-down menu for navigation used somewhere on site
• Images and other media properly optimized for screen display