Welcome to Version Two Demo Site

Techniques and Technology for User Interface Design and Development

In creating this site, the overall experience and User Interface is intended for demonstration purposes. The markup and front-end functionality is derived from my existing projects, open source websites and trial-and-error experimentation.

Great information and presentations

After the previous beta, several features were added back, as well one that was removed.

Mobile-First Content

Looks great on any device when viewed with a web browser, including tablets and smart-phones, automatically!

Vertical Timeline Format

Dynamic Timeline presentations of information otherwise buried in CV text. Roll back in time and click into a subject. Pop-up windows show even more detail.

Web Gallery of Design & Illustrations

Thumbnail images of screen captures expand to display images in series with right and left click navigation. A variety of work including web banners, web designs and illustrations is represented.

Case Studies for User Experience and Visual Design

Thumbnail images of screen captures and images for demonstrating a variety of work including web banners, web designs and illustrations.

Removal of Tabbed Navigation

Experimental single-page tabbed-navigation scheme is changed to a more common linked multi-page navigation scheme to eliminate extensive DOM manipulation involved.

Marketing and Advertising Leaders

The intended audience and targeted types of users were part of the planning for this project.

Audience: Potential Employers

Demonstration of capabilities of skills, professional work and capabilities.

Audience: Visual Design Clients

Demonstration of variety and depth of media design and production. Media types include print web and publications media for marketing, advertising, packaging and editorial presentations.

User Experience: Project Managers

Thumbnail images of screen captures and images for demonstrating a variety of work including web banners, web designs and illustrations.

Case Studies: Stakeholders

Quantifying the capabilities for managing ALL aspects of a project, while demonstrating team-building experience.

Front End Developer Teams

User Experience and User Interface projects that are backed up by javascript, jQuery, JSP or data-driven websites.

User Interface Information

Technical specifications, in general and information on third-party plugins. Links are references to authors and source locations. For more detailed information go to the About page.

HTML5/CSS3

Mobile-first, responsive, web markup and UI interactivity that works with any modern browser and on any device.

Bootstrap 3.3 & 4.2 with jQuery

Framework for building the mobile-responsive website, and a popular choice for many projects on any platform.

jQuery Plugin: Vertical Timeline

Responsive timeline plugin for jQuery that uses Milles-Bornes-style roadmap or milestone pattern to show progression in a vertical configuration.

jQuery Plugin: Ekko Lightbox Gallery

Lightbox-style web gallery plugin for jQuery that creates thumbnail images that expand into navigation through a series of related images.

WAI-ARIA Browser Accessibility

Also known as ADA, Section 508A/B or as W3C Standard WAI-ARIA.

Frequently Asked Questions

A random list of questions to help users understand the navigation and presentation of the web site.

Q: I recieved a warning message. Why?
A: Defender or other network security applications and services may detect and interpret scripting calls to Google and Stack CDNs as suspicious. There are no permanent cookies set by this site.
Q: What web browsers are supported by this demonstration?
A: Chrome, Firefox, Internet Explorer 8 or newer, Safari and Opera on any mobile or desktop system with a web browser.
Q: Do I need any special plugins?
A: Selected content is written as a Shockwave/Flash file which require a plugin to be viewed, but the website itself requires no plugins to operate.
Q: Some of the features are not working!
A: The jQuery plugins and the web site Bootstrap framework require javascript to be enabled. Most web browser implementations have javascript enabled by default. Reload the site by using the browser "Refresh" button
Go to the Contact page to add questions or post to the twitter feed for lonewolfstudio.com

 Examples of Work

Case Study: 2014 MacArthurPTA Mobile Site

Complete overhaul of existing community-driven website to add Wordpress interactivity and make content editing available to select individuals.

User Experience Development Study (2014): Home Page Mockup for Mobile Devices
PHP Site to Wordpress or Drupal with Mobile-First Capability

Selected as a solutions for a community-driven PTA web site, the new design was targeted toward emphasizing distributing content editing directly to the owners of the material. This was to restore the original functionality of the web site before major security concerns required closing of the content areas to remote login.

Go to Case Studies page to learn more

Case Study: 2005 Relaunch of MacSales.com

Complete overhaul of existing eCommerce site with updates to User Interface to HTML4/CSS2 with support for Front-end driven "Live-pricing" options.

Original MacSales.com (2003): Original Home Page
Updated MacSales.com (2004): MacWorld Feature Home Page
OWC MasSales.com Relaunch

After working for four months on print advertising for Other World Computing's MacSales.com eCommerce website, it was clear that the company needed to expand their reach by upgrading their marginally useful web UI to an HTML4 standard that allowed cross-browser support for a single stack. Initially focused on building landing pages, creative branding and flexible page templates, the scope of the project increased to include up-to-date pricing display for featured products.

Go to Case Studies page to learn more

Professional Timeline

LMS Conversion for Rasmussen College
Collegis Education
A division of John Wiley & Sons Education Services
Oak Brook, IL

LMS icon bootstrap UI icon web design icon
Blackboard Learn LMS
Optimize LMS Content
Quality Assurance for Content

  • Conversion of Courses & Content to Blackboard LMS
  • Modified existing courses in BbLearn
  • Quality Assurance and Content Corrections
  • Modified existing interactive content to template requirements
  • Troubleshoot and correct inconsistent UI presentation
’18
Blackboard Learn UI for Rasmussen College
’16
Detail of TIMS User Interface, including implementation of new icons for entire application and integrated help application.

myCatamaranRx UX Study
Catamaran
(now OptumRx, a division of United Health Corporation)
Schaumburg, IL

visual design icon CMS UI icon UX design icon
myCatamaranRx Development
Web Site Presentations

’14
BMR-Rx and myCatRx Header Designs

Web Design and UI/UX Development
John Wiley & Sons (Deltak Innovation)
Oak Brook, IL


Canvas LMS User Interface
Optimize LMS Content
Multi-media Production

  • Conversion of Blackboard templates and Learning Systems Content to new Canvas platform
  • Re-designed Canvas Templates for Graduate and Doctorate Studies courses
  • Added Instructor-created content to Business Management and Physics Courses
  • Created derivative Learning Content for ongoing Course creation for review by client Instructors and imported multimedia content
’13
Graduate Studies Student UI for Creighton University - Template for Multimeda Viewing

Kiosk & UI Design
Aspen Marketing
West Chicago, IL

visual design icon CMS UI icon UX design icon
UI Specialist/Front-End
Child Hunger Ends Here Project

  • Short-term assignment with Agile/MVC .Net agency
  • Consumer-facing LAMP UI projects with HTML/CSS & jQuery
  • Fortune 500 clients: FedEx, Citibank & Visa.
  • Conagra Brands Foundation not-for-profit Child Hunger Ends Here promotional site
Kiosk Screen design for Citibank Business services, showing a "Link to Facebook" option
’12

Web Design and UI/UX Development
Other World Computing, Inc.
Woodstock, IL

visual design icon CMS UI icon UI design icon creative designer icon ad design icon
Lead Designer & Web Developer

  • Lead Creative for ecommerce reseller of mobile products
  • Re-designed macsales.com & OEM site
  • $28M in revenue from coordinated ad campaigns
  • Managed production of ads & web designs
Dynamic HTML template for newertechnology, Inc. Designed and completed in 12 months by team.
’04

Corporate Website Relaunch
Methode Electronics, Inc.
Harwood Heights, IL

visual design icon project leader icon creative designer icon ad design icon
Graphics Manager Role
Corporate Web Projects

Corporate Web Site Relaunch (1997)

“Methode business units must provide internet communications consistent with our corporate message.” Chairman Emeritis Bill McGinley.

In 1996 the Fiber Optics Group of Methode Electronics, Inc. was the fastest growing unit in a company with a capitalization value of $550M and rising. The Graphics Manager was a new position, charged with making the process of creating marketing collateral and advertisements directly for that division.

Original HTML3 standard webspage for Methode Electronics, Inc. (1995).
’97

Illustration and Graphic Design
Lone Wolf Studio
Prorietor

visual design icon digital illustrator icon creative designer icon ad design icon
Instruction Designer
Corporate Web Projects

  • Self-employed web project manager and designer
  • Designed lonewolfstudio.com as demonstration and advertising platform
  • Corporate advertising projects for recruiting agency clients
Self-employed Illustrator and Graphic Design practice, transitioning to Web Design & Development
’93

Hobby Kit Instruction Sheets
Revell-Monogram Models
Morton Grove, IL

visual design icon Instruction Sheet icon creative designer icon
Instruction Sheet Production
In-house Instruction Designer

  • Execution of Instruction sheet designs from engineering plans and sample products
  • Supplied Camers-ready Art for print production
  • Specification of typography and direction of final artwork illustrations
Digital illustration of assembly diagram for Hienkel Bomber kit (1989) Decal Illustration for F4G Phanthom (1989)
’89

Student Work
School of the Art Institute
Chicago, IL

student role icon digital-illustrator icon creative designer icon
Visual Communications Major
Film Animation Minor

  • Later: Flash Development and Training Practice
  • Later: Digital Illustration and Graphic Design Training
  • Fine Arts Illustration and Graphic Design
Welcome Home (1991)
Marker rendering illustrations for televison and media advertising project.
’84

Undergraduate Art Student
Bradley University
Peoria, IL

student role icon digital-illustrator icon creative designer icon

’81

Christopher Bourseau

  • Illustrator, Graphic Designer and Art Director
  • Prepress Production, Print Advertising Design and Catalog Layout