web – Urban Interactive

Instructional Design | Mark Watkins

Instructional design, providing multimedia training/eLearning design and development services, with Adobe Captivate as the main tool. Video production, SCORM compliant assessments, drag and drops, LMS integration experience. As Instructor/Professor at Parsons School of Design and other schools for more than ten years, developed many syllabi, class activities, tests and collateral course materials. Adobe Photoshop, Adobe Premiere, Audacity, Screenflow for Mac.

Sample eLearning Projects

San Diego International Airport 2016

Case study: eLearning design and development
Clients: San Diego Airport Authority via Curriculum Technology
Description: Following SAN brand guidelines, I designed and developed a suite of training tools for the San Diego Airport Authority, delivered using Adobe Captivate. Content covered sustainability programs, local wildlife protection, various reimbursement protocols and employee conduct rules and responsibilities. All learning modules featured professional photography, structured lesson plans, and a variety of quiz types.
Links: San Diego Aiport Stewardship Program

Training across many industries since 2005

Case study: eLearning design and development
Clients: Ortho McNeil, Genentech, Visa, Curriculum Technology
Description: In-house training tools for pharmaceutical sales (using an early take on a gamification concept), new employees, and law enforcement students.

Sample Classes Taught

Design Course Syllabi

Sample Syllabi PDF: Analyzing Media / Elements of Animation
Sample Syllabi PDF: Design Fundamentals
Schools: Parsons School of Design 1005-2005 and 2013, Art Institute San Diego 2015, and a handful of continuing education environments.
Description: Various course syllabi samples.

Web Design | Mark Watkins

Screen and site designer and developer. Making custom WordPress and Concrete5 sites for all types of companies and people. Revamped websites with lots of UX and UI work for Curriculum Technology. Managed web development at Graphis. Handled UI asset management and built wireframes at TiVo. Developed screens for a kiosk presenting a building in Washington DC.

Websites

CT2Learn 2016

Case study: Website design and development
Client: Curriculum Technology
Project URL: ct2learn.com
Description: CT2Learn is an educational product by Curriculum Technology, targeted to students and instructors in the criminal justice industry. The 2015-2016 redesign focused on color and graphic continuity on the page and site level, clearer navigational elements and improved mobile support. Work included both the public-facing marketing pages and the membership pages behind a pay wall.

Curriculum Technology 2014-2017

Case study: UX, UI and web design and development process
Client: Curriculum Technology
Description: Researched content, produced site maps, met with shareholders, discussed what worked and what didn’t. Then produced multiple site map proposals and made many, many mockups showing the variety of possible new directions. Honed in on the most important elements. Produced user flow charts, wireframes, and researched development requirements for communication with developers. Worked with developers to build out test pages, followed by a full test site. Worked with developers to replace the old with the new. Boom, easy peasy.
Software: Wireframes and mockups produced in Illustrator, Photoshop or Axure. Played with Invision and Sketch.

Graphis 2013

Case study: Website design, development, management
Client: Graphis Magazine
Project URL: graphis.com
Description: Designed and helped develop web-based tools for artists and designers to enter annual competitions hosted by Graphis and for Graphis judges to judge the submissions. Hired, managed and collaborated with two Python developers. We focused a lot on carts, databases, and user accounts. Produced many wireframes, sitemaps, flow charts, and mockups for public-facing pages. Pages developed within a custom CMS built by Brick SF in Python with LESS-based styles. Customized a daily WordPress blog. Managed multiple designers on tasks related to the physical production of print books.

Other Projects 2000-2012

Case study: Website design and/or development
Clients: Skyscraper Museum, US Forest Service, Parsons School of Design Department of Architecture, loci architecture
Sample URL: lociarchitecture.com
Description: Since 2000 when my first website Manhattan Timeformations developed in collaboration with Architect Brian McGrath and The Skyscraper Museum garnered a few awards, including a Net Vision / Net Excellence Award from Ars Electronica, I’ve been building websites for architects, artists and people in a variety of other industries.

Product UX and UI

TiVo 2009-2011

Case study: Graphics, UI prep, wireframes
Employer: TiVo
Description: Worked on two projects. First, prepared and managed graphics for the Series4 TiVo Premiere released in 2010 using Flash and second, created 50-75 wireframes for the Series5 TiVo Roamio. Both projects included developing nomenclature and defining exact positioning for all the little bits and pieces, like “fadeTop_mc”, “List Item”, “the pill”, “the BoD”, etc.

Kiosk Development 2002

Station Place Kiosk 2002

Case study: Real Estate Kiosk
Client: Louis Dreyfus Property Group / Kevin Roche Architects
Project: Station Place, Washington DC
Description: Created interactive kiosk for new building in Washington, DC. Collaborated with Animation+Images, Tom Wood Design and Earth Data Solutions. Used Macromedia Director, Flash, Quicktime, Adobe After Effects. Won 2003 Applied Arts Award Annual, 2003 Bronze Award for the ID Interactive Media Design Review, and 2003 Creativity 33 Award Annual.

April 17, 2004March 31, 2017

Architecture & Sculpture (1996-2004)

Clients and employers included:

Alice Aycock, Artist. January 2002 – March 2004.
3D models, animation, graphic design in production of sculptural work for national venues. Used form•Z, Maya, Photoshop, Illustrator, After Effects.

Diller + Scofidio Architects, July – November 2001.
3D models, digital video for Eyebeam Atelier Museum design presentation. Exhibited at the Whitney Museum. Used form•Z, Photoshop, After Effects.

Open Office Architects / Diller + Scofidio Architects, Summer 2001.
3D models for Shiseido cosmetic counter designs. Used form•Z, Photoshop.

Morris Sato Studio, January – December 2000.
3D models, animation, analog video shoot for Vineyard Theater interior design and for Grey Art Gallery exhibit on designer Shiro Kuramata. www.nyu.edu/greyart/exhibits/shiro/index.html. Used After Effects, form-Z, Media 100.

Duany Plater-Zyberk & Company, April 2000.
3D models for town planning charrette for Liberty Harbor, NJ. Used form•Z, Photoshop.

Susana Torre / Team for Environmental Architects, April 1999 – February 2000.
Construction drawings for the Brooklyn Children’s Museum. Town planning charrette for Liberty Harbor, NJ. Used form•Z, AutoCAD, QuarkXPress.

Karen Van Lengen Architects, July 1997.
3D drawings for “The Busy Woman’s Dream Home” project. Used AutoCAD.

Marpillero Pollack Architects, May – June 1995, May – June 1997.
3D models, graphic design. Used formoZ, Photoshop, QuarkXpress.

Baratloo/Balch Architects, October – November 1996.
3D model, animation for video art project titled “C is less than P minus G times T (Queens Conjecture)” exhibited at Queens Museum of Art. Used formoZ, Alias, Media 100.

Keenen/Riley Architects, July – November 1996.
Construction drawings, photocollage and maquettes for Palm Island aviary and private residence and for Field House. Used pencils, bass wood, Photoshop.

Jody Pinto, artist. May – June 1996, October – December 1998.
3D models, animation, digital video for bridge design presentation. Used Softimage, Media 100, Premiere.

Environmental Simulation Center, May 1993 – December 1994.
3d models of New York City buildings and streets. Used AES.

Sam Anderson Architect, June – September 1995.
Construction drawings for Fogg Art Museum, Harvard University. Used trusty old pencils.

PATH Architecture, May – June 1995.
3D models of Hudson River waterfront for physical exhibit at the Storefront for Art and Architecture. Used formoZ, Photoshop.

May 28, 2003March 31, 2017

Manhattan Timeformations (2000)

Manhattan Timeformations
http://www.skyscraper.org/timeformations

An old school website consisting of animated, wireframe representations of New York City high rises and urban development since 1890, produced for The Skyscraper Museum with a grant from the New York State Council on the Arts.

12.01.2000: inception date

Manhattan Timeformations was begun in the early 90’s by architect Brian McGrath, author of a folio called Transparent Cities, “a boxed edition of twenty-four historic and contemporary maps on clear acetate — twelve of Rome, twelve of NY — that invites readers to assemble, transform, and contemplate the ever-evolving urban spaces of almost any city”.

In 2000, McGrath and The Skyscraper Museum received public funds from a Technology Initiative Grant from the New York State Council on the Arts, allowing this previous research to be revisited with specific focus on New York and the age of skyscrapers. Designer Mark Watkins was brought in to put the website together, and to help reimagine the project in interactive form.

Throughout the Summer of 2000, The Skyscraper Museum, curated by Carol Willis, held a series of informal discussions with the public, presenting the aims of the project while 3d digital models of New York skyscrapers were constructed in the gallery by Parsons School of Design architecture students Akiko Hattori and Lucy Lai Wong. These models, also built by McGrath and added to his large, historical / analytical model of Manhattan, were exported and formatted for online presentation.

I was responsible for research, analysis, interface design, production, animation, presentation. The project consists of 3D models brought into Flash. Heavy Photoshop preparation. Praised for intuitive navigation. Recognized by the 2001 Prix Ars Electronica (Award of Distinction for Net Excellence), the 2001 New York Flash Film Festival (Winner in the category “3D”), received a Macromedia Site of the Day Award (December 19, 2000). Exhibited at Ars Electronica 2001 in Linz, Austria (background image), in “net.ephemera” at Moving Image Gallery (May 2001, NYC), the 2001 Los Angeles Siggraph Technical Images Gallery, at the MIT “Image and Meaning” conference, on the online art database Rhizome.org, and featured in the 2001 New York Digital Salon and in the pages of Wired (November 2001), Architectural Record (June 2002), Leonardo, and others.