About

Mark Watkins | Urban Interactive (a sole proprietorship)
Available for work in: SD | PDX
I’m available for new projects and creative collaborations. Please don’t hesitate to contact me with any questions you may have.
(650) 291-6506
mark@urbaninteractive.us
LinkedIn

Roles

Web Designer including UX, UI, and development
Instructional Developer
Instructor
Graphic Designer
CAD Drafter, 3D Modeler
Motion Graphics Designer

 

Mark has done a remarkable job for us at Curriculum Technology. We brought him in during a time we were rolling out a major new product/service initiative and while the product was good, the presentation to the market was not. His vision, creativity, skill, and work ethic were major factors in enabling us to firmly establish the new product in the marketplace, where we are still experiencing very strong year over year growth. Mark is the real deal, a consummate pro.

Jon Doyle, President, Curriculum Technology, February 2, 2017

Education

1995 Masters of Architecture. Parsons School of Design, New York, NY
1988 Bachelor of Arts, University of Southern California, Los Angeles, CA

Awards

I’ve worked on projects that have received awards over the years, all in collaboration with many talented folk. The list includes Applied Arts Award Annual, the ID Interactive Media Design Review, the Creativity 33 Award Annual, Ars Electronica for Net Vision / Net Excellence, the New York Flash Film Festival, and a Macromedia Site of the Day Award, back when Flash was owned by Macromedia.

Published

Collaborative projects have been published in The New Yorker (a 3d rendering for Alice Aycock), the New York Times (various Skyscraper Museum projects), Architectural Record (Manhattan Timeformations), and Wired (Manhattan Timeformations).

Exhibited

Collaborative projects have been exhibited at a variety of museums and galleries. The coolest ones are the Eyebeam Atelier Building for Diller + Scofidio Architects, exhibited at the Museum of Modern Art, the Manhattan Timeformations project, exhibited as part of the 2001 Ars Electronica at the O.K. Centrum fur Gegenwartskunst in Linz, Austria, and the City Speculations project produced for Baratloo + Balch Architects and exhibited at the Queens Museum of Art.

Web UX UI | 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.com | 2016

ct2_els_1500x900
ct2_home_1500x900
ct2_various_1500x900
ct2_preview_1500x900
ct2_reviews_1500x900
ct2_pro_1500x900
ct2_content_1500x900
ct2_bh_1500x900

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.

curriculumtechnology.com | 2015

ct1_home_1500x900
ct1_team_1500x900
ct1_catalog_1500x900
ct_wireframes_1034x620
ct_ct1mockups_900x500
ct_member2_900x500
ct_flow_diagram_1200x800
ct_flow_833x500

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.com | 2013

graphis_home_1500x900
graphis_store_1500x900
graphis_schools_1500x900
graphis_recents_1500x900

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.

Older Projects 2000-2012

loci_01_1500x900
loci_02_1500x900
loci_04_1500x900
lmp_01_1500x900
lmp_02_1500x900
aidl_1500x900
mttimeline_animated_640x480
sm_home_1500x900
sm_tallest_1500x900

Case study: Website design and/or development
Clients: Skyscraper Museum, US Forest Service, Parsons School of Design Department of Architecture, 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

tivo_screenshots_1200x720_04
tivo_screenshots_1200x720_02
tivo_screenshots_1200x720_03
tivo_screenshots_1200x720_05
tivo_screenshots_1200x720_06

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.

Station Place Kiosk 2002

Kiosk_04_1500x900
Kiosk_17_1500x900
Kiosk_06_1500x900
Kiosk_07_1500x900
Kiosk_13_1500x900
Kiosk_11_1500x900
Kiosk_09_1500x900
Kiosk_10_1500x900
Kiosk_08_1500x900
Kiosk_03_1500x900
Kiosk_02_1500x900
Kiosk_12_1500x900
Kiosk_05_1500x900
Kiosk_16_1500x900
Kiosk_15_1500x900
Kiosk_14_1500x900
Kiosk_01_1500x900

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.

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

san_01
san_02
san_04
san_03

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

ct_report_writing_02_1500x900
ct_report_writing_01_1500x900
ct_report_writing_03_1500x900
vitesse_omat_02_1500x900
vitesse_omat_01_1500x900
visa_1200x720
dm_project_screenshot_stack_0003

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.

Graphic Design | Mark Watkins

My work for a variety of clients includes marketing collateral, book cover design and production, book creation in InDesign, UI creation for the TiVo app, and lots of website design (wireframes, flowcharts, sitemaps, prototypes and UI elements, plus carts, databases and user account pages). I’ve provided project management and art direction and always collaborate well with coders and developers.

Sample Projects

3D | CAD | Mark Watkins

Over the years, many 2D and 3D visualizations of buildings and sculptures for competitions and other proposals. Helped Diller + Scofidio Architects with Eyebeam Atelier and ICA Institute of Contemporary Art and Alice Aycock with “Swing Over” in Baltimore, “Dallas Dahlia”, and “The Uncertainty of Ground State Fluctuations” in Missouri. Sporting an M.Arch, 1995, Parsons School of Design, from 1995 to 2009 I balanced jobs with architecture firms while teaching at Parsons. From 2011-2014 I helped a variety of small firms with construction drawing sets. AutoCAD, 3DS Max, Sketchup 2017, Vray 3, Maya, Mental Ray, et. al.

Sample Projects

Sketchup + VRay 2017

MOO_View_01_Render_04_2000x1125
MOO_View_01_Render_04_amb
3D_MoO_03_1500x900
3D_MoO_02_1500x900
3D_MoO_01_1500x900

Case study: 3D work
Description: From AutoCAD drawing set to Sketchup to VRay to Photoshop of a restaurant renovation. Sketchup has a pretty decent, fairly intuitive camera for choosing and refining views with clients. The VRay extension performs spot texturing and lighting quickly and professional renderings with integrated IES lighting support.

CAD Work 2012-2014


Case study: CAD work
Clients: YMD Studio, Inc. in Brooklyn, NY, and Boone Architects in San Diego, CA.
Description: Production of AutoCAD construction drawing sets.

3D for DES 2008-2009

3D_DES_01_2000x1200
3D_DES_02_2000x1200
3D_DES_04_2000x1200
3D_DES_05_2000x1200
3D_DES_09_2000x1200
3D_DES_03_2000x1200
3D_DES_06_2000x1200
3D_DES_07_2000x1200
3D_DES_08_2000x1200

Case study: 3D work
Employer: DES Architects + Engineers
Description: As a fulltime Graphic Designer at DES Architects + Engineers in 2007 and 2008 (before the 2008 construction meltdown) I produced single images and three minute movies of corporate campuses, renovations, libraries, schools, and other projects.
Software: 3DS Max, VRay, Photoshop, Premiere and After Effects.

Video for DES

3D for Burning Man since 2007

3D_Emery_2015_02_1500x900
3D_Emery_2015_1500x900
3D_Emery_2016_1500x900
3D_Emery_2014_1500x900
3D_Emery_2013_1500x900
3D_Emery_2013_02_1500x900
3D_Emery_2011_1500x900

Case study: 3D work
Client: Michael Emery Artworks
Description: Since 2007 when we both volunteered for David Best’s Temple of Forgiveness, I’ve helped Artist Michael Emery get funding for a series of interrelated, standalone, interactive sculptures by providing presentation renderings.
Software: Recently Maya and Mental Ray, and 3DS Max about 5 years ago.

Making Cool 3D since 1996

Motion Design | Mark Watkins

Motion graphics and animated 3D models produced using Premiere, Final Cut Pro, 3D Studio Max, Maya, After Effects, Audacity, etc.

Sample Animations