- Overview
- Required Pages
- Performance & Accessibility Requirements
- Visual Design, CSS and Responsiveness
- Process Timeline
- Final Submission Checklist
- Grading Criteria
- Previous Student Examples
Overview
Establish a 3+ page standards-based responsive site for your own design practice using HTML5, external CSS3, links, and embedded media. The site must include a JavaScript or jQuery image gallery (PrettyPhoto or similar) and use Google Fonts. It will be hosted on a free Pantheon web server.
Required Pages
Include the following pages with consistent navigation on each page:
- Home: introductory information your subject. This is probably the first thing people will see when they come to the site.
- About: a brief biography and/or artist statement, including one or more in-line pictures, as needed.
- Image Gallery: a page with thumbnail images that link to full-size images on their own pages. You may use the PrettyPhoto script presented in Exercise 4. The gallery page will contain thumbnails (roughly 150px x 150px) which will open to the full-sized image.
- Additional pages as needed
Performance & Accessibility Requirements
- All links must be functional.
- There must be no missing or broken images.
- Images must be optimized for the Web — scaled and compressed — so as not to slow page load time.
- Color contrast must meet WCAG Standards
- Use HTML 5 Semantic Elements where appropriate
- “
header” (usually contains site name, branding, and the nav bar) - “
nav” (consistent links to all your pages) - “
main” content primary content unique to each page - “
aside” content of secondary importance (such as a sidebar) — if needed - “
footer” (usually contains copyright, social media info, possibly repeated nav links from header)
- “
Visual Design, CSS and Responsiveness
- The site must be “responsive,” with layout adapting based on screen size. Note that to achieve this not only might some elements be fluid, but your CSS must contain at least one media query (breakpoint) to change the layout at a larger or smaller screen size.
- Your CSS file should start with the Universal Selector Reset as provided in the exercises.
- Use typography and visual design principles in a thoughtful and appropriate manner.
Process Timeline
The project will play out over several phases and include two opportunities for consultations with the instructor:
- Week 1: Identify the theme and architecture of your site. If you are a design or art student, you should use this as an opportunity to create an online portfolio. Find and examine three or more professional websites that inspire you to think about your own design. Create three or more rough sketch options for general site layout and upload them to Discord. Sketches can be hand drawn and scanned or photographed to upload.
- Week 2: Choose one option and create a clean wireframe, drawn with all elements to scale so that measurements can be applied. Wireframes can be carefully hand drawn, use a prototyping application like figma.com or Sketch (30-day free trial, also installed in the GDAT labs) or a vector drawing app like Affinity Designer or Adobe Illustrator.
Begin to build HTML and CSS based on wireframe.
> Download the Project 1 Starter Code.
Choose visual elements and style guidelines: colors, typography, other visual treatments.
(See yellow wireframes used for Mondrian exercise. Proposals and wireframe(s) submitted to instructor prior to consultation.
(Note: Wireframes show general content areas and relative sizes of the various elements on your page. They do not need to include actual content. If all pages of your site will be built with the same general layout, only one wireframes is needed. If pages have different structural foundations, for example if your home page has a structurally different design from your other pages, you may need to create more than one wireframe to build upon.)
See Converting Wireframes to Code. - Weeks 3–4: Finalize static HTML page and linked CSS style sheet based on your measured-out wireframe(s). Page should demonstrate a structural design foundation, with containers for navigation and content. Refer to exercises 1 – 4. Code-in-progress consultation with instructor.
> Setup a free Pantheon account to host your website - Week 5: Code-in-progress critique and final site assembly.
- Week 6: Final site due.
Final Submission Checklist
- Site utilizes custom fonts (Google Fonts or Adobe Typekit)
- PrettyPhoto (or similar) JavaScript for interactive lightbox gallery effect
- Site is responsive — adapts to various window sizes, using both fluid, percentage-based widths and CSS media queries.
- No broken links or missing images
- Images have been optimized for the web — downsampled to the maximum pixel size needed for display and exported as JPG, PNG or GIF as appropriate
- Typography and visual design principles have been applied thoughtfully
- Complete local site folder uploaded to Project 1 Box folder
- Complete remote site hosted on Pantheon server (note PrettyPhoto code will not be functional)
Grading Criteria
To be considered in the grading process:
Critique Grade
- Sufficient amount of work-in-progress completed
- Sketches and wireframes carefully measured out and built
- Demonstration of basic concepts of HTML & CSS
- Enough elements in place to discuss approach to information architecture and usability — consistent navigation, information organization
- Enough elements in place to discuss approach to visual design — color choice, typography, overall unified and thoughtful layout
Final Project Grade
- All requirements as stated above are present
- IA/Navigability/Usability — consistent navigation, well organized content, and overall good user experience
- Visual Design (color, type, layout) — appropriate and well executed visual choices, considering aesthetics and accessibility (legibility of color and typography)
- Responsiveness — layout changes to avoid breaking at all screen sizes
- Technical execution — all links work, no missing images, PrettyPhoto plugin functions (in local site folder)
- Punctuality