Open Educational Resources

Document Type

Activity or Lab

Publication Date



This activity helps student design and develop a front-end of a website, from wireframes through HTML/CSS/Javascript. It includes design questions for students, including the invocation of Ben Schneiderman's eight golden rules for interface design.

Note: this activity assumes prior knowledge of web development. Since this activity is designed for an HCI course, with a focus on interface design, students are not expected to create a back-end for it. This activity can obviously be modified for a full-stack experience.


Although this activity can be used in isolation, it is intended to be part of a series guiding students towards the creation of a front-end of a website. The series (all published as OER) consist of:

a) Needfinding

b) Personas, Scenarios and Storyboards

c) Front-end Website Design and Development

d) Accessibility Evaluation

Creative Commons License

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 4.0 License.



To view the content in your browser, please download Adobe Reader or, alternately,
you may Download the file to your hard drive.

NOTE: The latest versions of Adobe Reader do not support viewing PDF files within Firefox on Mac OS and if you are using a modern (Intel) Mac, there is no official plugin for viewing PDF files within the browser window.