ART 320 Web Design

Project 1: Personal Website, HTML (Static)

Overview

Establish a 3+ page standards-based responsive site for your own design practice using HTML5, 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 in an account setup for you at http://ubuffalo.art, a Dreamhost web server. (This is new for Fall 2025. You may keep your portfolio site active after the semester ends and use it for professional purposes.)

Required Pages

Include the following pages with consistent navigation on each page:

  • Home:  Branding and introductory information. 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. You may use the PrettyPhoto script presented in Exercise 5. The gallery page will contain thumbnails (roughly 150px x 150px) which will zoom 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 different device screen sizes. Note that to achieve this some elements may have fluid widths, and 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:

  1. Week 1: Sketching (Discovery Phase)
    • Identify the theme and organization of your site. If you are an 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 with ideas for your own design.
    • Create three or more rough sketch options for general site layout. Sketches should be hand drawn, scanned/photographed, and uploaded to a new Design file in the Figma>ART320>Project 1 project. Name the page “Sketches”.
  2. Week 2: Wireframing (Design Phase)
    • Choose one sketch option and in a new page in your Figma Project 1 design file, create a clean wireframe, drawn with all elements to scale so that measurements can be applied.

      (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
    • > Download the Project 1 Starter Code
  3. Weeks 3–4: Coding (Design and Development Phases)
    • Choose visual elements and style guidelines: colors, typography, other visual treatments.
    • Begin to build HTML and 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.
  4. Week 5: (Development Phase)
    • Code-in-progress critique and final site assembly.
    • See Access Your Webhost to upload your site files to the Internet.
  5. Week 6: Finalization
    • Final site due.

Final Submission Checklist

  • Site utilizes custom Google fonts
  • PrettyPhoto (or similar) JavaScript for interactive lightbox gallery effect (click on smaller thumbnails to open larger, full-sized images)
  • Site is responsive — design adapts to various window/device sizes (without overlapping items, overly narrow columns, or content that gets hidden off-screen) using both fluid (percentage-based) widths and CSS media queries (breakpoints).
  • No broken links or missing images
  • Each page has an appropriate <title> tag to appear with the correct name in the browser tab
  • 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(images that are not optimized will noticeably load too slowly)
  • Typography and visual design principles have been applied thoughtfully
  • Personal Branding/Identity should be present on all pages
  • Complete local site folder uploaded to Project 1 Box folder
  • Complete remote site hosted on ubuffalo.art. index.html must be at the root level of your sites. (Be sure your site URL has been posted to Discord.) UBITNAM.ubuffalo.art/project1/.

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
  • Placeholder pages (minimally) in place to demonstrate navigation
  • Responsiveness will not be part of the critique assessment

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

Previous Student Examples

View Student Examples on Box