rizzio.net » Portfolio

Night Kitchen Website Re-Skin

Dave — Mon, 09 Jan 2012 17:21:42 +0000

Summary: What’s that old expression? “The cobbler’s children have no shoes.” The Night Kitchen website had been neglected for more than a few years, and needed a refreshing. There were extremely tight restrictions on time and technology used, so this was definitely a “re-skinning” and not a full redesign.

We wanted a new look for the Night Kitchen website that would encourage visitors to explore our stories, interactive projects and designs in depth. Our redesigned portfolio promotes a selection of recent projects which highlight NK’s engaging approach to interactive storytelling, which aims to provide transformative and meaningful experiences that connect with audiences.

Tech: Illustrator, Photoshop, Flash, Actionscript, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.whatscookin.com

Smithsonian’s NMAH ~ Educational Citizenship Website

Dave — Mon, 09 Jan 2012 17:21:27 +0000

Summary: Working in partnership with the Smithsonian’s National Museum of American History (NMAH) and the U.S. Citizenship and Immigration Services (USCIS) Office, we developed an interactive, multimedia-rich website that supports aspiring citizens’ efforts to pass the civics portion of the new USCIS Citizenship Test.

Using content from the NMAH collections and working with a consultant that specializes in teaching English as a second language, we created a flexible, progressively scaffolded learning environment through which students move through learning, practice, and test stages commensurate with their mastery of the question topics. Given that the interactive experience should appeal to learners for whom English is a second language, and that the civics test is conducted as an oral interview, voiceover narration and closed-captions are provided, and learners have the opportunity to practice responding to the audio prompts.

The framework contains 100 vignettes, 19 activities, and 32 zoomable object explorations, that help extend learning beyond merely teaching to the 100 questions on the test. Instead, using objects and documents from its collections the NMAH offers aspiring citizens a vibrant look at our nation’s history, the functions of our government, the rights and responsibilities of U.S. citizens, and the power of democracy. By providing context to the questions on the test, prospective citizens can facilitate their learning of complex facts and concepts, and draw a deeper connection to the significance of becoming an American citizen.

Tech: Illustrator, Flash, Actionscript, XML, Photoshop, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.americanhistory.si.edu/citizenship

Smithsonian’s NMAI ~ Environmental Challenges Website

Dave — Mon, 09 Jan 2012 17:21:17 +0000

Summary: American Indian people have long thrived on, respected, and protected the environments that make up their homelands. Night Kitchen Interactive collaborated with the Smithsonian’s National Museum of the American Indian (NMAI) to create an educational website for use in classrooms, to inform younger audiences about the ways in which American Indian communities continue these efforts today.

To fulfill student and teacher needs, the site presents a media-rich, scaffolded learning environment with progress tracking and assessment features. Students watch videos, explore interactive activities, and answer questions along the way to gain deeper insights to the integral role the environment plays in the daily lives of American Indian communities and draw connections to local environmental issues. The culminating classroom presentation activity allows students to collect notes taken across the site into one central web-based planner.

The site was designed and built to be visually inviting and reflective of the rich design traditions and unique voice of each tribal community featured therein. The visual and UX design was crafted to create a learning environment that supports the storytelling traditions that are central to communities featured within the project. Feedback from NMAI and Smithsonian has been glowing.

Tech: Illustrator, Flash, Actionscript, Photoshop, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.nmai.si.edu/environment/

SFMOMA Country Dog Gentlemen ~ Mobile Website Conversion

Dave — Mon, 09 Jan 2012 17:21:03 +0000

Summary: In 2009, with some of the 20th century’s greatest artists as inspiration, Night Kitchen Interactive created an engaging kiosk installation and website, bringing to life the works of Piet Mondrian, Jackson Pollock, Frida Kahlo and others. Roy De Forest’s colorful work acted as an aesthetic springboard, paving the way for vivid, lively animations. Each animated story reflects an individual artist’s unique approach, creating different extraordinary worlds to be explored. Performance artist Sebastienne Mundheim collaborated with Night Kitchen to craft the voices of two colorful canine characters from Roy De Forest’s work. With the dogs as guides, modeling behaviors of inquiry, this journey through modern masterpieces is reflective, whimsical, and insightful.

These stories and activities excite and inform young museum visitors, inspiring them to contribute their own creative responses to the museum’s website. Targeting children aged 6-10, a rare audience for modern art, this interactive experience engages younger museum visitors and their families with playful narratives and interactive activities. Each reinforces key learning points associated with an individual work and encourages visitors to share their own creative responses in a visitor-contributed gallery on SFMOMA’s website.

In 2011, SFMOMA was interested in adapting the existing Country Dog Gentlemen animations into an HTML5 experience, so visitors with mobile devices that do not support Flash can still partake in the enhanced rich-media experience. We implemented the main menu utilizing “responsive web design” techniques promoted by many of today’s most advanced HTML5 and CSS gurus. We used @media CSS queries in combination with Max and Min device-widths to create a single menu page (and CSS) with break-points that serve up different layouts and different graphics depending on the size and orientation of your device! It was really fun and exciting to be part of bringing this new technique to life while working to improve the museum and online experience for SFMOMA’s younger audiences.

Tech: Illustrator, Photoshop
Role: Lead Designer / Technical Advisor
Link: In-Progress

AnyPlace Platform Website

Dave — Mon, 09 Jan 2012 17:20:39 +0000

Summary: The AnyPlace platform provides a flexible, affordable way for historical and cultural institutions to share place-based interpretive projects online. Place is an important touchstone for memory, history, and culture. By exploring the memories and records of place, we educate the public and promote and protect significant spaces, sites, and stories that hold meaning.

Adapted from the codebase originally developed for PhilaPlace (www.philaplace.org), the AnyPlace platform allows organizations to establish their own interpretive website, using their own brand and visual aesthetic, and engaging visitors in exploration of their places, topics, curation, and media.

Each organization’s instance of AnyPlace would provide its visitors with a rich online tool for browsing place-based stories, images and videos on a map, by topic, or as collections. Visitors could alter content geographically and thematically, take virtual tours, save favorite places, print Google directions and submit their own stories and media for consideration.

The design challenge was to create an aesthetic that had enough of a “brand” to promote as a branded product, but not so much that potential clients felt that they would not be able to break-out of the AnyPlace look. The result is an exercise in subtlety and minimalism.

Tech: Illustrator, Photoshop, HTML, CSS
Role: Lead Designer
Link: anyplace.whatscookin.com / demo.anyplace.whatscookin.com

Open House Chicago’s Location-Based Desktop and Mobile Websites

Dave — Mon, 09 Jan 2012 17:20:26 +0000

Summary: The Chicago Architecture Foundation (CAF) needed to develop a website for its OpenHouseChicago (OHC) 2011 program, a free public event that provided people of all ages, backgrounds, and interests with access to many of Chicago’s greatest architectural spaces and places that are normally open “by invitation only.” The website needed to convey a celebration of Chicago’s rich architecture, history, and culture found in the city’s vibrant network of neighborhoods.

We built on the community and mapping platform of PhilaPlace to design and develop the OHC desktop and mobile optimized websites. Through the integration of two open source solutions – Google Maps and the CollectiveAccess collections management system – PhilaPlace supports a rich feature set that presents a mosaic of historical and contemporary records about sites within a particular area.

Designing over top a preexisting PhilaPlace framework, most functionality and UI restrictions needed to be understood and followed, along with a strong brand inherited from the Chicago Architectural Foundation. The result is a website that through the desktop and mobile devices conveys the richness of the content as well as its place within the larger organization and brand.

Tech: Illustrator, Photoshop, HTML, CSS
Role: Lead Designer
Link: myitinerary.openhousechicago.org

Minnesota Historical Society ~ 3D Fort Snelling Website

Dave — Mon, 09 Jan 2012 17:19:53 +0000

Summary: The Minnesota Historical Society (MHS) needed to develop a robust online presence for its 3D Fort Snelling Project to provide an innovative way to showcase digital history by integrating three distinct, but interrelated components: historically accurate virtual 3D models, a collections database, and a data visualization tool. With that goal in mind, Night Kitchen teamed up with key stakeholders from MHS and the Virginia Institute for Advanced Technology in the Humanities (IATH) in a collaborative process to establish a Technical and Creative Project Plan that would be used to guide the design and development of the website.

It’s an exciting project to bring to the world, the on-site living history program of Fort Snelling, by building an interactive content-rich, collections-based website, and identifying innovative ways to engage visitors of all ages in Fort Snelling’s rich history. My main contribution to the Project Plan was through the creation of high-fidelity wireframes for client approval and UX by-in and with the creation of the preliminary visual creative treatments.

Tech: Illustrator, Photoshop
Role: Lead Designer / Preliminary UX Designer
Link: In-Progress

AIGA Philadelphia Chapter – Site Rebuild

Dave — Mon, 31 May 2010 19:09:56 +0000

Summary: Redesign and re-architect the static HTML and Coldfusion AIGA Philadelphia website into a full content managed Drupal website. The AIGA Philadelphia board wanted the new site to still visually tie in with the previous site’s color scheme, but were open to all other changes in content presentation and user interaction. The new site tries to bring consistency and user expectations into the forefront, while opening the back-end up to the board for more frequent and manageable updates. This new site is scheduled to be live by the end of the summer, 2010.

Tech: Photoshop, Illustrator, Basecamp, Dropbox
Role: Lead Designer / Information Architect / Project Manager
Link: www.AIGAPhilly.org

Philadelphia Tax Amnesty – Website and Online Media Campaign

Dave — Sun, 30 May 2010 19:03:33 +0000

Summary: Develop the online components of a full media campaign for the Philadelphia Tax Amnesty program. The website was designed to integrate the already developed brand system and create an engaging & informative web experience to promote program details as well as sign-up users into the program. In addition to the website, online banners were created in 2 waves. The first wave was in released prior to the program launch and provided basics about the program and it’s key beginning and ending dates. The second wave of banners went live on the program’s launch date and had an actionscript countdown clock alerting the user to how many days were remaining in the program. Additionally, for the street-crew promotions staff, a fully animated placard was created with a countdown clock that showed the Days, Hours, Minutes and seconds remaining in the program.

Tech: Photoshop, Illustrator, Flash, Actionscript
Role: Lead Designer / Flash Designer & Production
Link: www.PhillyTaxAmnesty.com

Saint Clare’s – Site Redesign

Dave — Sat, 29 May 2010 19:03:26 +0000

Summary: Create a full website redesign to build off of the Saint Clare Health System’s rebranding and refocusing. A new brand was developed, built around a sky blue color scheme and the phrase “Turning Promise into Practice”. The website relied heavily on that sky blue aesthetic, and brought in a triadic color scheme for emphasis elements. The new design had to be clear, professional and a lot more usable than their previous design, and reinforce the new focus of turning promise into practice for their patients.

Tech: Photoshop, Illustrator, Flash, Actionscript
Role: Lead Designer / Flash Designer
Link: www.SaintClares.org