Design Samples
Most of my programming time is spent on database-driven web applications, which means that I do a good amount of user-interface work. My design philosophy is simple: figure out what the user needs, then give it to them. Good design builds on the expectations of users, not programmers. Following this philosophy, most of my designs focus on cleanliness and functionality over visual flare.
When possible I like to use valid semantic markup. XHTML 1.0 Strict and CSS are my tools of choice—they give us lightweight, clean pages more readily than table-driven HTML. It is important to remember, however, that XHTML and CSS are merely tools, and that part of a designer's job is picking the right tool for the job. Again, the user comes first, and sometimes the user is best served by layouts that cannot yet be implemented with XHTML and CSS.
Below are a handful of projects that best represent my design proclivities.
Move
Description: Easy to use web file transfer utility designed as an alternative to emailing large attachments. You will need a CoSign Friend Account in order to see Move in action.
Client: University of Michigan School of Natural Resources and Environment.
Tools used: XHTML 1.0 Strict, CSS, Perl, MySQL
Features:
- Allows transfers of very large amounts of data (default is 800MB).
- Extremely easy, self-documenting interface builds on users familiarity with email clients while maintaining standards compliance.
- Automatically culls old files to keep disk use down.
- Very flexible -- everything from the interface to notification email text and cull frequency can be changed.
- Cannot be abused as a peer-to-peer file transfer system.
SNAP
Description: Moderated, user-generated events calendar.
Client: University of Michigan School of Natural Resources & Environment.
Tools used: HTML 4.0, CSS, PHP, MySQL.
Features:
- Standards-driven interface embedded in institution-wide HTML 4.0 template.
- Clean, automatically generated forms for data entry.
English 125 Course Website
Description: Website for an introductory writing course.
Client: University of Michigan students.
Tools used: XHTML 1.0 Strict, CSS, PHP.
Features:
- Fully standards-compliant interface.
- Clean integration between templating engine and dynamic content.
SWISS
Description: Intranet application for managing item inventory and check-in/check-out.
Client: University of Michigan School of Natural Resources & Environment.
Tools used: XHTML 1.0 Strict, CSS, PHP, MySQL.
Features:
- Extremely lightweight, standards-compliant interface adapted with permission from BlueRobot.
- Handles forms and table-based calendars gracefully.
- Easily extensible menu system.
johnmcox.org
Description: Personal code and writing repository.
Client: My own vanity.
Tools used: XHTML 1.0 Strict, CSS, Python
Features:
- Extremely lightweight, standards-compliant interface.
- Takes full advantage of semantic web-design.
- Accomodates a wide variety of content, from articles to code samples to poems.
#!/john/m/cox



