View project More about this project →

Designing and Developing Surface Applications - Surface 2.0 SDK Training

The Surface 2.0 Training Course, developed by CM Group (Content Master) for Microsoft, was hosted on the official resource at microsoft.com/surface/training. The course was delivered using Luminosity, a SCORM-compliant e-learning platform built with Silverlight and HTML5, representing Microsoft's next-generation interactive e-learning solutions.

Luminosity was adopted broadly within Microsoft, notably across initiatives such as Patterns & Practices.

The visual and interaction design process encompassed the complete creation of the user interface and graphics, starting from initial wireframes and progressing through fully realized UI elements and interaction flows. These design elements were developed collaboratively with CM Group and Microsoft's Surface team, who provided instructional content, resulting in a comprehensive training resource specifically designed for Surface 2.0 (later known as PixelSense).

The user interface design referenced early internal Microsoft guidelines, specifically pre-official Metro concepts derived from Windows Phone, which were themselves rooted in foundational design principles such as Swiss and Bauhaus minimalism. As official Metro branding was still in development at the time, independent refinement and interpretation were required to meet the specific design needs of this project.

A notable aspect of the training course was the creation of original, detailed graphics clearly illustrating multi-touch gesture interactions, including rotation, translation, and pinch-to-zoom. Additionally, detailed guidelines for touch-point sizing were produced, explicitly referencing early Windows Phone UI standards, providing practical clarity for developers implementing Surface interactions.

Further technical details regarding multi-touch manipulation processing, gesture recognition, and related frameworks are documented in the separate SlideView entry.

More ⇨

View project More about this project →

Spotting the Rogue - Silverlight Interactive Media

Developed the interface, animations, and graphics for Microsoft’s Malware Protection Center’s "Spotting the Rogue" initiative while at Content Master. Built in Silverlight 1.0, this interactive experience educated consumers about identifying and protecting against rogue software, including popups, phishing, viruses, spyware, and adware.

The project featured a fully interactive Silverlight video player enabling users to select and control three distinct educational videos. Graphics and icons were customized from existing Microsoft assets to visually communicate complex cybersecurity concepts clearly to an end-user audience. In addition to the interactive Silverlight experience, the videos were individually hosted on Microsoft's official channels, ensuring broad visibility and accessibility.

This project was part of a broader collaboration with the Microsoft Malware Protection Center, which included additional consumer security-focused content such as the "Microsoft Security Update" video. The intuitive design approach effectively simplified cybersecurity education, reaching a wide consumer audience and enhancing user awareness of rogue software threats.

More ⇨

View project More about this project →

Visual Studio Partner Resource Center - Multi-Touch Enabled Interface

The Visual Studio Partner Portal was a groundbreaking multi-view, multi-touch WPF interface that demonstrated Microsoft’s commitment to modernizing developer tools and enhancing user interactivity. Designed as an immersive platform for partners, it utilized cutting-edge UI concepts, including gesture-based navigation, responsive layouts, and a dynamic data-driven structure. The interface allowed users to switch seamlessly between slide, grid, and list views, catering to diverse user needs while maintaining accessibility through mouse, keyboard, and touch input options. One of the most notable features of the portal was its integration of real-time collaboration tools and SharePoint list support, enabling partners to interact with data in intuitive ways. It also incorporated design and gesture elements inspired by my earlier SlideView concepts, which emphasized user-centric interactions and adaptive functionality. This project not only provided a forward-looking showcase of Visual Studio’s capabilities but also influenced the evolution of similar interfaces within Microsoft’s ecosystem. Its modular design and robust feature set made it a template for future developer-facing tools, demonstrating how thoughtful interface design could drive engagement and productivity in enterprise applications.

More ⇨

View project More about this project →

Content Master Website, Photography and Development

Design and Development of the Content Master website. Created a long panoramic photograph of the Seattle Waterfront by stitching together multiple photographs. Image stitching was done manually using Photoshop. Once the panoramic was generated, the image was split into multiple layers based on object proximity. The foreground features the Seattle Space Needle and other iconic landmarks separated from the background to enable dynamic cloud effects flowing through the city. Random blinking lights further enhanced the effect. Clicking between sections blurs and moves the city dynamically. Built using Flash, AS3, and Photoshop.

More ⇨

View project More about this project →

MSDN "Take The Tour" - Prototype Silverlight UI

Builds on earlier SlideView concepts, introducing more advanced 3D transforms and rotation-based animations to create an even richer interactive experience. While a regular SlideView moves on a 2D flat plane, this version rotates content panes in line with the animation direction, then snaps them back into place using elastic easing. It also incorporates a multi-state “Fisheye” style navigation panel for a sleek, modern feel.

This moves beyond simple parallax or linear scrolling, leveraging PlaneProjection for near-3D illusions and dynamic transitions. The idea is to make each pane feel like a separate “card” spinning or shifting in space before settling. It further introduces subtle rotation on the Y-axis while adjusting GlobalOffsetX and GlobalOffsetZ, all timed through Silverlight storyboards.

Another major difference from regular SlideView is how the UI handles rotation states within the animation. Instead of simply sliding, the content frames tilt up to -45° or rotate slightly, then spring back to a final position. This creates a more immersive sense of “pane reorientation” each time the user navigates. ElasticEase is used for a bouncy, natural feel during the snap-back transition.

Below is a shortened snippet from the ContentFrame class, specifically the Animate method, demonstrating how rotation and offset values are applied, along with elasticity for snapping panes back. This code reveals how the UI calculates intermediate states and transitions before final alignment:

// Shortened excerpt from ContentFrame Animate method
private void Animate(int id, int x, int z)
{
    int previousPosition = this._position;
    this._position = id + this._position;
    Storyboard sbEnd = (Storyboard)this.Resources["sbEnd"];
    Storyboard sbMove = (Storyboard)this.Resources["sbMove"];
    
    // Set initial 'From' offsets
    (sbMove.Children[0] as DoubleAnimation).From = new double?(this.proj.GlobalOffsetX);
    (sbMove.Children[1] as DoubleAnimation).From = new double?(this.proj.GlobalOffsetZ);
    
    // Target partial offsets for a smooth shift
    (sbMove.Children[0] as DoubleAnimation).To = new double?(0.8 * x);
    (sbMove.Children[1] as DoubleAnimation).To = new double?(0.8 * z);

    // Introduce tilt or rotation
    // If user navigates multiple frames, tilt changes more:
    if (Math.Abs(id) > 4)
        (sbMove.Children[4] as DoubleAnimation).To = new double?(-45.0);
    else
        (sbMove.Children[4] as DoubleAnimation).To = new double?(2.0);

    // ElasticEase for springiness
    (sbMove.Children[3] as DoubleAnimation).To = new double?((id / Math.Abs(id)) * -5);
    
    // After sbMove completes, sbEnd finalizes the offsets and rotation
    // ... (rest of method omitted for brevity) ...
}

Here, the code modifies GlobalOffsetX and GlobalOffsetZ while layering in a DoubleAnimation on the rotation. By using a partial multiplier for the To values (e.g., 0.8 * x), the system creates a softer entry before the final stage. Then sbEnd polishes off the last 20% of motion, snapping the pane into place. This structure is more complex than the typical “one-shot” SlideView scroll found in simpler demos.

Paragraph 7: Once the user navigates to a new section, the difference in angle (-45° or 2°) depends on how many frames are moved, and a negative or positive sign indicates direction. ElasticEase ensures a spring effect, so the pane appears to pivot, slow down, and then bounce once it reaches its final location—offering more visual feedback compared to standard SlideView transitions.

Meanwhile, the “Fisheye” navigation panel watchers the mouse Y-position, scaling each navigation item with Math.Abs distance checks. If the user’s pointer is very close to an item, it grows toward MAX_SCALE or slightly below, while others shrink and fade. This interplay of scale, opacity, and slight 3D rotation sets the experience apart from the simpler lists in a typical SlideView environment.

The overall result is near-3D browsing experience resembling high end gaming interfaces while being xml driven and touch enabled. The MSDN “Take The Tour” prototype demonstrates a further yet distinct evolution of SlideView

More ⇨

View project More about this project →

Microsoft Forefront Training Kit

Designed a data-driven user interface for the Microsoft Forefront Training Kit, built using Silverlight and XML. The interface provided a structured and visually engaging learning experience.

More ⇨

View project More about this project →

Archived Student Portfolio Site (2003)

Sixspeedmedia.com is an interactive Flash-based portfolio website, continuously live and fully functional since early 2003. Ayeckel.com was a rebrand of SixSpeedMedia and exists on the same server instance for over 2 decades. Initially developed as a student project at the Art Institute of Seattle, SixSpeedMedia introduced multiple foundational innovations in interactive web design—features that today are recognized as standard components of kinetic user interfaces.

Technical Details & Innovations

Elliptical Carousel Navigation

One core innovation of Sixspeedmedia.com was the elliptical carousel navigation. UI elements were dynamically positioned using ellipse mathematics, creating an intuitive, space-efficient navigation system that dynamically scales to accommodate varying amounts of content.

Physics-Based Interactions (DiffX Method)

Sixspeedmedia.com was among the first web interfaces to implement realistic physics-based scrolling, employing a unique DiffX inertia method. This method calculates motion based on differences between mouse positions captured at precise intervals, applying decay (friction) for natural-feeling movement:

// Original DiffX inertia method (ActionScript, 2003)
function moveClipAroundCircle(theClip) {
    theClip.then = theClip.now;
    theClip.now = getTimer();
    var elapsed = theClip.now - theClip.then;
    var numSeconds = elapsed / 1000;

    mouseX = (_xmouse - 500) * _root.speed;

    if (_xmouse < 100) mouseX /= 20;
    else if (_xmouse > 1000) mouseX /= (_xmouse / (_xmouse / 3));
    if (_xmouse > 900 || _ymouse < 1) mouseX = 10;

    var degreeIncrement = mouseX * numSeconds;
    theClip.theta += degreeIncrement;
    theClip.theta %= 360;

    var radians = degreesToRadians(theClip.theta);
    var xOnEllipse = theClip.ellipseWidth * (Math.cos(radians) * theClip.radius);
    var yOnEllipse = theClip.ellipseHeight * (Math.sin(radians) * theClip.radius);

    var rotationRadian = degreesToRadians(theClip.rotationTheta);
    var rotatedX = xOnEllipse * Math.cos(rotationRadian) - yOnEllipse * Math.sin(rotationRadian);
    var rotatedY = xOnEllipse * Math.sin(rotationRadian) + yOnEllipse * Math.cos(rotationRadian);

    theClip._x = theClip.centerX + rotatedX;
    theClip._y = theClip.centerY - rotatedY;
}

Data-Driven Modular Content (XML)

Content was dynamically loaded from external XML data files, making updates straightforward without recompiling the Flash file. This modular architecture anticipated current content management practices.

Real-Time Visual Effects

The interface utilized experimental RGB-channel shifts and blur transitions to provide engaging visual feedback. These effects were accomplished in real-time without external plugins, pushing the limits of Flash's capabilities at that time.

Scalable UI Techniques

Scalable layouts were achieved through single-pixel-stretching methods and layered vector graphics, allowing the UI to adapt fluidly to various resolutions and screen sizes, prefiguring contemporary responsive design techniques.

Historical Timeline

• May 2002: Initial interactive concept documented (Data-driven UI).
• August 2002: Domain registration (sixspeedmedia.com).
• Late 2002: First elliptical carousel prototypes created, using early DiffX inertia methods.
• January 2003: Site publicly accessible, initial inertia implementation active.
• March 2003 (v0.8): Comprehensive implementation of elliptical carousel, RGB transitions, modular data-driven XML content.
• October 2003: Experimental mobile WML version released, demonstrating early cross-platform thinking.

Continued Availability & Modern Performance

Uniquely, Sixspeedmedia.com remains continuously live and fully operational since its initial launch in 2003, currently hosted at ayeckel.com/student-portfolio/index1.html. It performs exceptionally well on contemporary devices, running smoothly at approximately 100 FPS with touch interactions fully supported, exactly as originally designed.

Historical Documentation and Original Sources

The complete and detailed technical documentation, including version history, code samples, and original specifications, is available to verify authenticity and historical accuracy:

• Sixspeedmedia.com Original Development Documentation (2002–2003, PDF)

Influence and Lineage

The methods first demonstrated by Sixspeedmedia.com directly influenced subsequent development efforts in interactive and multi-touch UI design, including Silverlight-based multi-touch experiments. Most notably, the inertia methods from Sixspeedmedia's DiffX technique evolved directly into gesture-processing APIs later licensed and adopted by Microsoft's Windows Presentation Foundation (WPF) multi-touch Manipulation Processor. This clear lineage, verifiable through preserved documents and continuous hosting of the original site, establishes Sixspeedmedia.com's significant place within the historical evolution of kinetic and interactive user interfaces. Comparison and source code for Car Game, SixSpeedMedia, SlideView and gesture processing the original Silverlight gesture library burried deep within the file

More ⇨

View project More about this project →

Microsoft Surface 1.0 Design and Development Training Course Graphics and Skin

Created a custom Luminosity Skin and graphics for the Surface 1.0 Training Course.

More ⇨