About  Christopher Bourseau

About this Site

 Development Platform/Framwork
Bootstrap, jQuery and javascript
 User Experience (UX) Design
Visualization or development of User Experience Wire-frame
 Creative Direction
Direction of designers and development of content, including meeting with stakeholders and client representatives.

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
Bootstrap Twitter Feed
Lone Wolf Studio Twitter Feed

Site Development Timeline

Mobile Demo Site v2
Current Website
Upgrade to ver 4

visual design icon bootstrap UI icon web design icon
Parallax Header Parallax Header

  • Revert to Traditional multi-page architecture
  • Convert deprecated HTML5/CSS markup
  • Update to dynamic footer and gallery assignments
  • Modify content to template requirements
  • Troubleshoot and correct inconsistent UI presentation
’19
Bootstrap Multi-page site with new navigation
’18
Detail of original HTML5/CSS3 interface.

Lone Wolf Studio v4
Lone Wolf Studio
HTML4/CSS2 Version

visual design icon digital illustrator icon creative designer icon ad design icon
Promoting to Employers Documentation of Work Examples

  • Self-employed web project
  • Retained Flash Introduction as demonstration
  • Redirects included for non-flash browsers
’13

Lone Wolf Studio v3
Lone Wolf Studio
HTML/CSS Version

visual design icon digital illustrator icon creative designer icon ad design icon
Created to promote Design Web Design and Site Development

  • Self-employed web project
  • Bypass Flash Introduction selector added
  • Demo targetted at recruiting agencies & employers
’04

Lone Wolf Studio v2
LAMP Host for Lone Wolf Studio
HTML3 Version

visual design icon digital illustrator icon creative designer icon ad design icon
Host: LAMP-based UNIX Illustrator Demo
No mobile features

  • Self-employed web project
  • Flash demos and simple web gallery created
  • Demo for recruiting agencies and employers
’98

BuildThisModel.com
BuildThisModel.com
On Hold

visual design icon Instruction Sheet icon creative designer icon
Instruction Sheet Presentation Site
In-house Instruction Designer

  • Presentation of Instruction sheet designs from past projects
  • Originally presented as Flash site
  • Three Kits included
’95

Home Page Lone Wolf Studio
Lone Wolf Studio
HTML2 Version

visual design icon digital illustrator icon creative designer icon ad design icon
HTML: WebBuilder
Host: .Mac
Admin: Dreamweaver

  • Self-employed web project
  • Designed with Flash Introduction as ARTIC Student
  • Flash Demo for recruiting agencies and employers
’94