Prototyping User Interfaces

05430 SOFTWARE STRUCTURES OF USER INTERFACES

"In lab, you will learn how to design and program effective graphical user interfaces, and how to perform user tests. We will cover a number of prototyping tools and require prototypes to be constructed in each, ranging from animated mock-ups to fully functional programs. Assignments will require implementing UIs, testing that interface with users, and then modifying the interface based on findings. Some class sessions will feature design reviews of student work." - CMU course description

HELP

Wednesdays 10:30-11:50am Newell Simon Hall 3002, taught by mkery phd student

Q/A on Piazza . Grades on Canvas

Direct message via email mkery [at] cs.cmu.edu

PROGRAMMING HELP

Web Dev Style Guide

When your project and code is poorly structured, the world is a sadder place.

  1. Seperate files: index.html, index.js, style.css. You can combine HTML, CSS styling, and javascript all in one HTML file, but it scales miserably, please don't. index.html is the name for your site's home page
  2. Folders: If you have more than 1 javascript file, put them all in a script folder. If you have more than 1 CSS image, put them all in a style folder. If you have images, put them in an image folder. Keep organized. HTML is the exception, keep HTML files in the main project folder.
  3. MODULARITY: In Javascript, don't copy the same lines of code over and over. If you repeat any chunk of code more than twice, extract it out into a function! If you repeat a color or image more than once in CSS, extract it out into a CSS variable.

Basic HTML

CSS

  • Avoid absolute width like width=300px; because this breaks on different screen sizes! When possible make width a percent like width=50%
  • To center a div, one common option is to make display=inline-block; and margin=auto. If that fails and the div has a parent, try text-align=center on the parent element.
  • a web app dedicated to how to center things in CSS
  • For complex positioning, math is your friend! Try CSS calc()

Javascript

  • Javascript (JS) is a language. Since there are so many variants and frameworks out there, it is also called "Vanilla" Javascipt We'll focus on vanilla Javascript.
  • Code academy Javascript, if you're rusty on basic programming fundementals
  • Javascript tutorials mini-course
  • W3 Schools Javascript tutorials
  • MDN Javascript tutorials. Lots of advanced content on this site
  • Frameworks: You may have heard of popular ones like JQuery or React or Angular. JQuery is a good beginner choice, because it makes Vanilla Javascript syntax simpler but JQuery is a lot slower than plain Javascript, so it's losing some popularity as plain Javascript grows and advances. React and Angular are excellent for larger web apps that need to load and animate and change a lot of data-driven divs efficiently. Advised to skip these for simple projects, but we'll try out React later in the course!
  • Coffeescript, Typescript: are a couple of cool wrapper languages around Javascript. Coffeescript gives Javascript a bit more Python flavor, and Typescript introduces strong typing to Javascript. These are more advanced, but you are welcome to use them!
LECTURES
GALLERY