Project: Designing a Button to Reflect your Personality

Back to CPSC 581 home Worth: 20%

Sketch, design, implement and document via a portfolio a WPF control button that reflects some aspect of your personality.


This is an exercise in creativity, where you will design, implement, document and demonstrate an interactive button (or other type of graphical control) that reflects your personality. This unconventional task was deliberately chosen to have no obvious solution. Nor are there other examples out there that you can easily copy. Thus it is up to you to be as creative as possible. To prepare for this assignment, you will learn techniques on: how to brainstorm and refine ideas via sketching, how to program in WPF, how to create a portfolio entry displaying your results.

Pedagogical Objectives

  • Apply basic sketching techniques and lateral thinking to produce various designs
  • Acquire first-time experiences brainstorming ideas via sketches in a sketchbook
  • Learn how to implement, package, install and document WPF and controls
  • Acquire first-time experiences creating a portfolio web site and summary

Assignment Deliverables and Details .

  1. 10 competing design sketches and 10 sketch details. In your sketchbook, generate at least 10 competing (different) designs of a button or control that reflects some aspect of your personality. Choose the most promising one, and then produce 10 details and/or variations of a particular sketch in your sketchbook.
  2. An implemented WPF control and example application. Implement a WPF control that demonstrates this control. Similarly, implement an example application that demonstrates this control.
  3. Poster portfolio summary. Create a paper-based visual summary (it should be easy to carry and show, e.g., no larger than 18x24) that illustrates your control. Provide a title, minimal text (perhaps as annotations), and visuals that reveal what this is about. Emphasize the visuals over text - let it tell its own story. Don't feel bound to flat paper or a poster - you can have things unfold, have set of pages, overlays, use a box or other packaging, re-purpose stationary and art materials, etc. Have impact.
  4. Web portfolio. Create a web site that will contain all your portfolio summary. Include a brief introduction to yourself and (if you prefer) a photo. Make it engaging. For ideas, Google design portfolio and art portfolio. Also see Artist Portfolio Guidelines for some hints on portfolios and how they are used.
  5. Portfolio summary. Within this web site, create a portfolio summary of your project that documents your design and implementation in a visually appealing manner. Note that this may become your standard style for other summaries. The portfolio must include:
    1. a front page with an illustrative image, description and index
    2. an illustrated and annotated sequence describing your button. Avoid lengthy text. Use visuals as much as possible, e.g., screen snapshots, animation, video, etc.
    3. a download page containing the complete source and executables, and instructions for running the sample and/or inserting your control into an application, and the API for the control
  6. Demonstrate your work. During class time, you will be asked to demonstrate all the above work to other class members and the instructor


  • Sketchbook
  • Visual Studio 2008 (including WPF)
    • You can download VS 2008 for free from the U Calgary MSDNAA Software Center. After logging in, click Software (top left), then select Visual Studio 2008 Professional Edition. You should also download the MSDN Library for Visual Studio 2008.
  • Art supplies as needed


Your grade will be based delivery of sketches, your design creativity, your implementation, documentation and packaging, and your portfolio summaries (paper and electronic). However, great successes or failures, or incompleteness in one exercise criteria will likely affect your total grade. Note that a successful implementation is required: if you cannot demonstrate your system, you will automatically receive a zero. Similarly, missing or incomplete work will result in a large grade penalty.

Hint: Generating Ideas by Lateral thinking

seeking to solve problems by unorthodox or apparently illogical methods. It is about moving sideways when working on a problem. It encourages people to apply different perceptions, different concepts and different points of entry to problem-solving.
  1. In you sketchbook, jot down several words that you (or your friends) would use to describe your personality.
  2. For each of these words, visualize in your head how different professionals would create a caricature of this personality trait e.g.,
    • a Disney cartoonist (animating a person, an animal, a flower, a rock...),
    • an architect (building a home, a high-rise, a garden shed, a city),
    • an industrial designer (creating a shovel, a tea kettle, an action figure),
    • a fashion designer,
    • an avant garde artist,
    • a computer scientist (hey, that's you!),
    • and so on.
  3. For each one of these, sketch out some graphical explorations of buttons that somehow capture the essence of these personality traits. Label these sketches, and annotate them if necessary. Don't try to evaluate your sketches - its quantity, not quality of ideas that matter right now.
  4. Alternately, google the personality trait and click the images view - you will likely get many ideas by seeing other people's images. Use these images to inspire you own sketch attempts, especially in terms of interactivity. For example, how would your button react to one or more clicks, or an approaching/leaving cursors? How will its visuals change over time?
  5. Generate as many sketches as possible i.e., you may wish to sketch several designs of one personality trait, or explore several personality traits and their combinations. You can exaggerate these traits: the buttons can be caricatures. Humour is allowed!
  6. Show and explain your design(s) to others. You will know which ones are the most exciting by how you talk about them.