Portfolio


Microsoft Surface 2.0 Designer Training Course Graphics and Skin

Worked closely with Microsoft Designers and Developers on the Surface team to create e- learning training around the interface and design best practices for the Microsoft Surface 2.0 SDK and Training. Additionally, I worked with the Surface team to design a metro styled skin based on the Surface 2.0 brand. Silverlight 4.0, Surface 2.0 SDK TAP, Adobe Illustrator, Luminosity Studio, Visual Studio 2010, Expression Blend

More ⇨

~Websites / Interactive~
Microsoft & HP Data Appliance Posters

Created a hybrid brand template based on both HP and Microsoft corporate brands. Designed a series of posters, banners and datasheets showcasing the four appliance servers co-developed by Microsoft and HP. Worked closely with the content authors to assure design would work at all sizes and form factors.

More ⇨

~Print / Poster / Datasheet~
Visual Studio Team Foundation Service Preview //build attendees

The 2nd design of the Visual Studio TFS "Golden Ticket" series. Included with the Windows 8 Developer Tablet given to each attendee of the //build conference hosted by Microsoft in 2011. The Visual Studio logo was incorporated into a popup that opens to reveal a 3D version and a unique code to unlock the service.

More ⇨

~Print / Promotional~
Microsoft MMPC - Spotting the Rogue Graphics and Animation

Interface, animation and graphics. Created in Silverlight 1.0. A full suite of custom icons were designed along with a fully interactive video player.

More ⇨

~Videos / Interactive~
Microsoft Customer Evidence Showcase - prototype Silverlight Web Experience

The Customer Evidence Showcase is an extension of the existing Microsoft UX Kit. The Silverlight based site was redesigned to improve overall User Experience and assist in finding related content. The content was stored on Azure cloud storage and managed using a 3rd party Content Management Tool

More ⇨

~Websites / Interactive / CMS~
Microsoft SQL Server 2008 Poster

Technical overview poster for SQL Server 2008. Features the 5 primary offerings as color coded regions positioned to show the relationship between each section. Worked with Each team at Microsoft to establish the overall content and visual representation of each offering. Developed custom graphical assets, icons and layouts. Focused on technical accuracy, useability and optimization across multiple form factors.

More ⇨

~Print / Poster / Illustration~
Visual Studio 11 Developer Preview Product Guide //build

Print Design and layout for the Visual Studio 2011 Preview Product guide shown at the Microsoft Build event in 2011.

More ⇨

~Print~
Microsoft SAAS Interactive Poster Website

Created a data driven version of an existing poster that features real time XML based localization including support for R-L character sets. Custom controls designed to expand and collapse to adjust for the difference in text length. Similar in concept to DeepZoom technology in general interface but is driven by XAML vector content to provide data binding.

More ⇨

~Websites / Poster / Interactive~
.NET Field Demo - Woodgrove

UI/UX Design for the Microsoft .NET Field Demo

More ⇨

~Websites / Application / Interactive~
Zune Model Comparison Infographic

Infographic inspired poster design showcasing the form factors and features of each Zune device. Researched each device and developed custom illustrations to accurately illustrated the actual hardware including the internal hardware configuration.

More ⇨

~Poster / Illustration~
Visual Studio ALM - Technical Whitepapers

Print production for 8 new Application Lifecycle Management hero scenario white papers. Focused on reader experience when choosing paper stock, binding, form factor and layout. Created a series of icons and info table highlighting the product pillars. Many of these graphics became standard and used in multiple places.

More ⇨

~Print / Datasheet / Book~
Visual Studio ALM Compete Book- Design and Graphics

Five Application Lifecycle Management competitive discussion guides designed intoa booklet for internal Microsoft field salespeople. In addition to the competitive discussion guides, the booklet includes a table of contents, cover and section introductions, and an introduction (3-5 pages) written by Microsoft.

More ⇨

~Print / Book~
Microsoft Visual Studio "Dev11" Preview Book

Print design and layout for the Visual Studio 2011 Product guide.

More ⇨

~Print / Book~
At&t 2010 Developer Summit Website

At&t 2010 Developer Summit Registration Website

More ⇨

~Websites~
AT&T 2010 Certified Solutions Catalog

Printed catalog of solutions that have been certified with AT&T. This catalog was created in 2009 to update the existing catalog with new content and design guidelines. Rather than create a simple linear list of solutions, the catalog is categorized in two different ways; by solution vertical(telecommunications, manufacturing, legal...etc) and cross industry (security, email, VPN...etc). A Content Management System was created to store and manage the catalog data.Images, logos and content was then imported and laid out dynamically so that content could be easily edited and changed without having to manually edit the document.

More ⇨

~Print / Book / CMS~
At&t devCentral Certified Solutions Toolkit

UI /UX Design for the At&t devCentral Certified Solutions Toolkit DVD. XML Driven WPF application.

More ⇨

~Print / Application / Interactive / DVD~
At&t devCentral Sales Kit DVD

UI/UX Design for the At&t devCentral Sales Kit. XML Data Driven WPF application.

More ⇨

~Application / Interactive / DVD~
Microsoft BI Sales Configurator Tool

Internal Microsoft Silverlight Application designed to help the BI Sales force find targeted content quickly and effectively. Initally XML driven, the interface was later ported to utilize SharePoint lists.

More ⇨

~Interactive~
Microsoft Branch Office Infrastruscure Solutions

BOIS Solution Architecture poster designed to display the different scenarios in a manner that helps communicate the specifcs of each solution. Custom graphics were created to help identify the required hardware, software, bandwidth and pros/cons of each solution

More ⇨

~Print / Poster~
Cloud Vineyards Loyality Portal

Prototype Silverlight Application designed to show how a customer loyality portal could use Silverlight to enhance the Customer Experience.

More ⇨

~Interactive~
Content Master Promotional Material

Promotional and Marketing materal for CM Group, Luminosity and Content Master.

More ⇨

~Websites / Promotional / Logo/Type / Datasheet~
Microsoft Core Infrastructure Partner Readiness DVD

Sales DVD with WPF application designed to provide easy access to targeted content. Created UI, DVD label and Sleeve

More ⇨

~Application / Interactive / DVD~
C# for Java Developers Poster

Two quick reference posters designed to provide an comparison of C# for existing Java Developers.

More ⇨

~Print / Poster~
Visual Studio Team Foundation Service Limited Edition Preview

Print design for a limited edition Visual Studio Team Foundation Service Preview Invite.

More ⇨

~Print / Promotional~
Visual Studio Team Foundation Service Preview Invitation

The most basic and least exclusive version of the "Golden Ticket" series for the preview introduction of Visual Studio Team Foundation Service Preview. This is currently called VS Online.

More ⇨

~Print / Promotional~
Microsoft High Performance Computing Animation

Technical Animation and Custom Video Player. Many UI improvements and custom controls helped create a Next Generation player.

More ⇨

~Videos / Animation~
Interoperability Bridges Website - Microsoft

UI Design for Microsoft Interoperability website

More ⇨

~Websites~
Windows Intune Laptop Stickers

Laptop Sticker Design for Microsoft Intune.

More ⇨

~Print / Promotional~
Luminosity Branding, LMS and Datasheets

More ⇨

~Print / Websites / Promotional / Logo/Type / Interactive / Datasheet / CMS~
Novartis Sales Tool UI/UX

UI/UX Design for Novartis. Designed to be used in the field to provide the salesforce an efficient way to access sales material and objection handling documentation. WPF XML Driven

More ⇨

~Application / Interactive~
Microsoft Quicktakes Animations and Videos

Animations, Videos and Branding for Microsoft "Quicktakes". Created animated style. Directed videos and editing.

More ⇨

~Videos / Illustration / Animation~
SQL Server High Avalability Poster

Design for the Microsoft SQL Server High availability poster.

More ⇨

~Poster / Illustration~
Stickers, Shirts and other Promo items

A variety of promotional items such as stickers and t-shirts. This page is a general catch-all designed to showcase some of my favorite pieces.

More ⇨

~Print / Promotional / Illustration~
Syngo Dynamics Animation

Technical Animation and Custom Video Player

More ⇨

~Videos / Animation / Interactive~
Visual Studio Partner Portal

UI/UX Design for the Microsoft Visual Studio 2010 Partner Portal. Silverlight and WPF Applications

More ⇨

~Websites / Interactive~
Woodland Park Zoo Conceptual Design and Icons

Conceptual design for Seattle based Woodland Park Zoo. Custom icons and layouts. X

More ⇨

~Print~
Artscorps - Website redesign for Seattle based Non-Profit

Arts Corps is the largest nonprofit arts educator in the Seattle area. In 2002 the site was re-designed to provide a more modern look and easier access to their content. Later, a dynamic JavaScript based image gallery was developed to streamline the creation of new image galleries and keep the content up to date.

More ⇨

~Websites~
Microsoft Dream Server Website

Silverlight 1.0 Development. Developed interface to .PDF designs. Manually syncronized XAML to video mapping of a dynamic text box.

More ⇨

~Interactive~
Content Master Website, Photography and Development

Design and Development of the Content Master website. I created a long panoramic photograph of the Seattle Waterfront by stitching together multiple photographs. The image stitching was done manually using Photoshop. Once the panoramic was generated, the image was then split into multiple layers based on how close the objects were. The foreground has the iconic Seattle Space Needle and a few others separated from the background so that dynamic cloud effects could appear to flow through the city. A few randomly blinking lights further enhanced the overall effect. When the user clicks between sections, the entire city blurs and moves to the chosen section. Flash, AS3, Photoshop

More ⇨

~Websites / Interactive~
The Art Institute of Seattle - FUEL Magazine

Founded FUEL while at the Art Institue of Seattle in 2007. Page layout, Print Design and Writing for the first 3 issues.

More ⇨

~Print~
Light Sciences Oncology Flash Website

Flash and HTML Website Design for Snoqualmie based Light Sciences Oncology

More ⇨

~Websites~
Technical Graphics

Various technical diagrams and graphics for Microsoft and others.

More ⇨

~Promotional / Icon~
Bahn Brenner Website, Photography and Print Design

Graphic Design and Photography for Bahn Brenner Print ads and Website.

More ⇨

~Websites / Promotional / Illustration~
CA Recovery Management Poster

Technical poster design for CA.

More ⇨

~Print / Poster~
Hard Liver Barley Wine Logo Concept

Type and logo design inspired by the Hard Liver Barley Wine festival.

More ⇨

~Logo/Type~
Jiggleberry Juice Bar Website

Site design and Development for Texas based Jiggle Berry Juice. PHP, MySQL.

More ⇨

~Websites~
silverlighttoys.com Website and Content

Created Silverlighttoys.com while at Content Master. Created technical showcase samples highlighting Microsoft Silverlight features.

More ⇨

~Websites / Interactive~
Microsoft Executive Briefing Center - device bar animations

Windows 8 device bar animated display design and hardware spec. Utilized Microsoft PowerPoint to create an advanced slideshow that spans across 5 full HD seamless displays.

More ⇨

~Animation~
Microsoft Big Data Animation

Concept, storyboarding and animation for several Microsoft Big Data videos.

More ⇨

~Videos / Animation~
Victory Lap - POC

Concepting and ui/ux design for a multi-tier, ranking, award, social and BI app. Created to show how gameification, social networking and Big Data could be used to enhance the Mobile device user experience. The system was intended to be run from a Cloud service to provide realtime data and allow for large scale computing to power the results and drive the dynamic UI elements. The overall visual design was intentially kept sparce and limited to using color for communication purposes. The actual branding of the final system would be based on the system palette of the device. Designed at Content Master with Chad Lundberg.

More ⇨

~Application / Interactive~
Arches Technology Wordpress Website Design

HTML5 based Wordpress website.

More ⇨

~Websites / Icon / HTML5 / Wordpress~
Visual Studio #herodev Superhero Cape and Graphics

Concept & Design for Microsoft Visual Studio #herodev Campaign. Designed Graphics and came up with a Super Hero cape to give out to attendees.

More ⇨

~Promotional / Illustration~
Centrinet Wordpress Website Design and Development

Wordpress website for Centrinet.

More ⇨

~Websites / HTML5 / Wordpress~
Bainbridge Island Brewing Photography

Photography for Bainbridge Island Brewing

More ⇨

~Websites / Photography~
Washington Federal - Bainbridge Island Branch Photography

Branch photography for the newly built "Micro Branch" concept

More ⇨

~Photography~
MSDN "Take The Tour" - Prototype Silverlight UI

Prototype UI developed for MSDN "Take The Tour. XML driven to allow for rapid content updates Utilizes perspective transforms and multi-state animations to give the illusion of the virtual info panes flying through 3D space. Vector based controls used animated gradients to give the panes dynamic lighting effects. The left navigation used a custom "Fisheye" style that increases the size of the item that is hoverd over. Touch swipe was also added to utilize touchscreens.

More ⇨

~Websites / Interactive~
Microsoft Forefront Training Kit

Data driven user interface for the Microsoft Forefront Training Kit. Silverlight, XML

More ⇨

~Websites / Interactive~
Microsoft SQL Server 2008 - Parallel Data Warehouse - Animations, UI and Player

A series of 4 animations for Microsoft SQL Server 2008 Parallel Data Warehouse. Custom UI and Video player developed in Silverlight.

More ⇨

~Websites / Animation / Interactive / Photography~
Ayeckel.com v1.0 - Student Portfolio Flash Website

Flash based Student Portfolio Website. I photographed a remote area of Alaska during the summer solstice. 8 photos taken from my Nikon D70 were stitched together to form a single image. The foreground, mid and background were seperated into layers and saved as transparent .png images. They were imported into Flash as seperate layers and custom mouse interaction and parallax code allowed the scene to appear realistic. Randomized clouds moved behind the hills to give a sense of motion and reality. When the scene moves towards the left, the lens flare from the sun rotates into position. The project icons animate into position virtually infront of the whole scene. They also blur similar to depth of field and fly into focus. The custom mouse code comes from very first portfolio website (sixspeedmedia.com 2003) where I allow the content to automatically scroll in relation to the mouse position in a way that lets them see content off screen. In the case of the parallax scene, the mouse allows the user to see my projects by simply moving the mouse across the scene. A motion blur effect was also added to the project icons and varies based on the mouse acceleration values.

More ⇨

~Websites / Interactive / Photography~
Messageglue Wordpress Website

Wordpress website for Messageglue.

More ⇨

~Websites / Wordpress~
Archived Student Portfolio Site (2003)

Featuring a custom carousel interface that was groundbreaking and virtually unheard of at the time, this innovative design showcased interactive, skinnable elements. Additional mouse-scrolling code evolved into a dynamic parallax site, pushing the boundaries of web interactivity.

More ⇨

~Websites / Interactive~
3M Respiratory Protection Resource Guide - iPhone and Android

I designed the user interface and icons for this app, providing industrial hygienists and safety professionals with a comprehensive, user-friendly tool. The free app enables users to quickly find answers to frequently asked respiratory questions, access the 3M respirator selection guide, identify 3M facepieces, cartridges, and filters, review qualitative fit-testing protocols, and perform fit tests efficiently.

More ⇨

~Application / Icon / Interactive~
Luminosity Website Series

Designed and developed a series of websites for the Luminosity brand of products, including Studio, Reach, and Synergy, creating cohesive and visually engaging platforms that showcased the unique features and functionality of each product.

More ⇨

~Websites~
Luminosity Course output UI and Custom Skins

Created a skinnable course template for CMGroup Luminosity, enabling the development of SCORM-compliant courses for projects such as Surface 2.0 and Microsoft Patterns and Practices. The template allowed for seamless customization and integration, ensuring adherence to industry standards while enhancing the user experience.

More ⇨

~Websites / Interactive / CMS~
Slide View / Multi View UI Design

Slideview is a concept that goes back to my days at The Art Institute of Seattle. I designed an interface that broke from the normal rules and created a design where the items were large horizonral sliding icons. An Icon can represent a folder or an individual item and changes layout to help communicate the differences. Multi-Touch and Swipe support were added to utilize the new and cutting edge multi-touch interfaces on the market at the time. The ui was data-bound to an xml file or Sharepoint list that has a matching file structue to hold the images. Multiple views were added so the user can switch between Slide, Grid and List views.

More ⇨

~Websites / Interactive / CMS~
Microsoft Surface 1.0 Design and Development Training Course Graphics and Skin

Custom Luminosity Skin and graphics for the Surface 1.0 Training Course

More ⇨

~Websites / Interactive~
Open Road Winery Photography

Photographic concepts for Open Road Winery. I used retro SLR lenses with adaptors on my Sony NEX 5n mirrorless camera. Most of the variations came from using alternate color light sources and changing lenses. Most of this series were shot on a 80's Minolta 50mm f1.4 manual focus lens. This gave me good sharpness but a narrow depth of field which I used to separate the bottle from the background. The older lens has a distinct look compared to the factory lens that came with my NEX. Using an f1.4 allowed me to illuminate the scene using only tea candles while still keeping the exposure short to minimize any vibration.

More ⇨

~Photography~

 

 

"Compiling Internets"

Andy Yeckel: Visionary Designer and Developer

Andy Yeckel is a pioneering designer and developer whose groundbreaking innovations have shaped how we interact with technology. From early experiments with computers in the 1980s to revolutionary multi-touch interfaces and cinematic UI design in the 2000s, Andy’s work consistently pushed boundaries, combining visionary creativity with technical precision.


A Journey of Innovation

1988: Early Experiments

Began experimenting with a Compaq Portable running DOS and Logo Writer. On its green CRT screen, he scripted graphics that sparked his lifelong passion for interactive design and technology.

1990s: Building Foundations

During the 1990s, Andy immersed himself in the transition from analog to digital technology. He built computers, created network cables, and set up LAN parties, becoming deeply involved in the early PC enthusiast scene. Subscribing to Macworld magazine, he memorized Silicon Graphics (SGI) machine specifications and dreamed of owning an SGI INDY workstation or their larger servers.

In 1994, Andy began learning Photoshop 2 on the family Macintosh Centris 610, experimenting with layer masks and exploring early digital photography. By 1998, he purchased his first significant PC, a Dell XPS266 featuring the first AGP (Accelerated Graphics Port) and a 3dfx Voodoo 2 video card. Andy was captivated by 3D Mark demos, running benchmarks, and overclocking to explore the potential of cutting-edge hardware.

2000-2003: Education and Breakthroughs

After graduating high school in 2000, Andy joined the Art Institute of Seattle (AIS) to study in the newly launched Multimedia Web Design program. His skills in Photoshop and web design developed rapidly, and he began creating interactive interfaces, including car configurators inspired by his passion for automobiles.

In 2002, Andy authored a detailed interface design document that laid the foundation for his groundbreaking 2003 carousel interface. This document outlined dynamic, scalable, and data-driven web concepts, showcasing innovative features like touch-like interactions, skinnable design, and parallax effects. These ideas became fully realized in the 2003 website, a centerpiece of his graduation portfolio.

During this time, Andy worked at Go2Marine, where he developed scripts for web automation, integrating database-driven methods to streamline content generation. This experience reinforced his understanding of data-driven systems, a skill he carried into his more creative, groundbreaking work.

2003-2007: Professional Growth

In 2003, Andy joined Bahn Brenner Motorsport, where he optimized their website and connected their product database to Froogle.com, doubling their sales within weeks. His work also included creating the ABA/16V supercharger conversion, which gained widespread attention within the Volkswagen enthusiast community. 1996 VW GTI 16v - Sweet Sixteen - Eurotuner Magazine

From 2005 to 2007, Andy pursued a Graphic Design degree at the Art Institute of Seattle (AIS), further refining his artistic and technical skills. During this time, he built upon his earlier work, advancing the cinematic and interactive elements of his designs. His 2007 cinematic interface showcased groundbreaking features, including:

  • Motion Blur: Adding dynamic realism to transitions.
  • Weather-Responsive Visuals: Integrating atmospheric effects like clouds and rain.
  • Dynamic Lighting: Creating immersive, visually striking experiences.
  • XML-Driven Text: Enabling adaptable, data-driven content displays.

These features demonstrated Andy’s ability to combine art and technology seamlessly, influencing the evolution of user experience design.

The 2007 interface, a more advanced version of his 2003 carousel, became the highlight of his graduation portfolio and caught the attention of Content Master, where Andy was subsequently hired. His hire marked the beginning of a period where he contributed to cutting-edge multi-touch and gesture recognition technologies, setting the stage for his later work with Microsoft.

2008-2012: Multi-Touch and Microsoft

At Content Master, Andy developed advanced interfaces and eLearning content for Microsoft Surface 2, contributing directly to WPF 4’s multi-touch gesture library. His work included manipulation processing and gesture recognition, which became foundational to multi-touch user experiences.

Andy collaborated with Umesh Patel to create the first multi-touch website, demonstrating gesture recognition and manipulation processing in Silverlight. This work directly influenced Microsoft’s touch-driven strategies across their platforms. Andy also created technical posters and educational materials, further solidifying his role as both a designer and educator for developers and designers alike.

In 2009, Andy shared his innovations with industry leaders like Bill Buxton, further cementing his role as a trailblazer in touch interaction design. He also contributed to interfaces for Visual Studio, SQL Server, Azure, and other major Microsoft projects.

2013-2020: Freelance and Personal Focus

Andy continued to innovate as a freelance designer, creating UI designs for Bing voice search and iOS/Android apps for 3M Hearing and Respiratory Protection. During this time, he shifted focus to family life, becoming a father while maintaining his passion for design.

2018-Present: Entrepreneurship and Advocacy

In 2018, Andy founded Alpha Channel Design expanding his creative pursuits to physical products. He also launched ADASigns.com, using cutting edge 3d prting technology to create signs with accessibility and usability.


Legacy and Innovations


Closing Thoughts

Andy Yeckel’s career exemplifies how quiet, relentless innovation can transform entire industries. His contributions have often been ahead of their time, influencing the tools and interfaces we use daily. Despite the far-reaching impact of his work, Andy remains humble, reflecting on the challenges of carving a path in the fast-moving world of technology.

Andy’s story is one of perseverance, creativity, and an enduring commitment to excellence. His designs have not only shaped the user experiences of today but continue to inspire what’s possible for tomorrow. By blending functionality with beauty and focusing on the needs of real users, Andy has left an indelible mark on the tech landscape—quietly, but unmistakably.

Back to top