Top

Industry

@Large: Ai Weiwei on Alcatraz exhibition symbol
Fig.1.1 @Large: Ai Weiwei on Alcatraz — Exhibition symbol. Context "The Chinese Andy Warhol" and detained activist reimagines the notorious island penitentiary turned national park in this blockbuster exhibition. With For-Site, National Park Service, and Golden Gate National Parks Conservancy. Project Develop an exhibition identity and information system to engage and educate diverse visitors from around the world. Implement branded materials across all channels, ranging from environmental signage and interpretive print materials to video titles and social media. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • standards manual
  • interpretive design
  • visitor experience
  • environmental signage
  • exhibition signage
  • street banners
  • wayfinding
  • mapping
  • educational materials
  • print collateral
  • exhibition brochure
  • rack card
  • business paper
  • gala invitation
  • donor materials
  • print management
  • merchandise
  • swag
  • video titles
  • social media graphics
  • accessibility compliance
@Large: Ai Weiwei on Alcatraz symbol and title in horizontal lockup
Fig.1.2 @Large: Ai Weiwei on Alcatraz — Exhibition symbol with wordmark in horizontal logo lockup. Notes The iconic identity propagated rapidly through media and merchandise, helping to attract nearly a million visitors and — with a 120 percent increase in San Francisco visitors — expand the cultivation and stewardship of park donors.
@Large: Ai Weiwei on Alcatraz island exhibition signage
Fig. 1.3 @Large: Ai Weiwei on Alcatraz — Exhibition signage. Notes To preserve the integrity of the historic island structures, all materials were designed and engineered to be freestanding or minimally attached. Photo Courtesy Drew Altizer Photography.
@Large: Ai Weiwei on Alcatraz exhibition label
Fig. 1.4 @Large: Ai Weiwei on Alcatraz — Exhibition label. Notes In the installation titled Stay Tuned, each of the twelve cells in Alcatraz's A Block contains a sound piece by someone detained for the creative expression of their beliefs. Photo By Jan Stürmann, courtesy For-Site.
@Large: Ai Weiwei on Alcatraz wayfinding panels
Fig. 1.5 @Large: Ai Weiwei on Alcatraz — Wayfinding panels. Notes Portable wayfinding signage accommodates visitor flow at one of the National Park Service's most popular attractions.
@Large: Ai Weiwei on Alcatraz interpretive reference binder
Fig. 1.6 @Large: Ai Weiwei on Alcatraz — Interpretive reference binder. Notes In the installation titled Trace, interpretive kiosks cross reference 176 prisoner-of-conscience portraits built from over one million lego bricks and laid out on the floor of the prison's laundry and manufacturing facility.
@Large: Ai Weiwei on Alcatraz interpretive reference binder spreads
Fig. 1.7 @Large: Ai Weiwei on Alcatraz — Interpretive reference binder spreads.
@Large: Ai Weiwei on Alcatraz standards manual
Fig. 1.8 @Large: Ai Weiwei on Alcatraz — Standards manual pages. Notes The 30-page manual allows all the exhibition partners and media branches to use the identity in their own materials while preserving the integrity of the brand.
@Large: Ai Weiwei on Alcatraz symbol geometry
Fig. 1.9 @Large: Ai Weiwei on Alcatraz — Symbol geometry. Notes Interlocking and concentric circles form the body for rebel wings. The symbol references the artist's personal style, social media presence, and quest for freedom.
@Large: Ai Weiwei on Alcatraz exhibition-branded hoodie
Fig. 1.10 @Large: Ai Weiwei on Alcatraz — Exhibition-branded hoodie. Notes The popular symbol appeared on everything from sell-out merchandise and coveted swag to a birthday cake.
Peralta Colleges responsive website home page
Fig. 2.1 Peralta Colleges — Responsive website home page view. Context Peralta Community College District comprises four colleges in Alameda County. Project Create a networked content management system with custom-built, branded themes to unify hundreds of decentralized district and college websites. Promote access and usability through user interface best practices and compliance with accessibility regulations. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • wireframing
  • cms theming
  • wordpress multisite
  • website
  • markup + code
  • html
  • css
  • javascript
  • php
  • plugin development
  • multisite configuration
  • google integration
  • custom search
  • calendar
  • rss
  • executive presentation
  • cms training
  • quickstart guide
  • accessibility compliance
Peralta Colleges responsive website mobile view
Fig. 2.2 Peralta Colleges — Responsive website mobile view.
Peralta Colleges WordPress admin header management view
Fig. 2.3 Peralta Colleges — WordPress admin header management view. Notes Custom code extends WordPress header functionality to support content management for the front-end structure.
FOSOTA / Friends of Ruth Asawa School of the Arts symbol
Fig. 3.1 FOSOTA / Friends of Ruth Asawa School of the Arts — Symbol. Context FOSOTA is a nonprofit foundation dedicated to championing arts education and arts-based learning at San Francisco’s groundbreaking public arts high school and beyond. Project Create an identity to represent the strength of a community working together to champion arts education and arts-based learning. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • website
  • information architecture
  • nomenclature
  • markup
  • html
  • css
  • squarespace
  • copywriting
FOSOTA / Friends of Ruth Asawa School of the Arts symbol with wordmark in horizontal logo lockup
Fig. 3.2 FOSOTA / Friends of Ruth Asawa School of the Arts — Symbol with wordmark in horizontal logo lockup.
FOSOTA / Friends of Ruth Asawa School of the Arts responsive website home page
Fig. 3.3 FOSOTA / Friends of Ruth Asawa School of the Arts — Responsive website home page view.
FOSOTA / Friends of Ruth Asawa School of the Arts responsive website subpage
Fig. 3.4 FOSOTA / Friends of Ruth Asawa School of the Arts — Responsive website subpage view.
FOSOTA / Friends of Ruth Asawa School of the Arts symbol with social media hashtag
Fig. 3.5 FOSOTA / Friends of Ruth Asawa School of the Arts — Symbol with social media hashtag.
The Forty Part Motet exhibition lobby signage
Fig. 4.1 The Forty Part Motet — Exhibition lobby signage. Context The sound installation – considered Janet Cardiff's masterwork – is a reworking of the sixteenth-century composition Spem in Alium, with each of forty vocal parts individually recorded and played back through forty speakers. With Fort Mason Center for Arts & Culture and the San Francisco Museum of Modern Art. Project Create an exhibition identity for the installation's California debut and implement branded materials across all channels, ranging from environmental signage and interpretive print materials to a mobile-first ticketing website. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • interpretive design
  • visitor experience
  • environmental signage
  • exhibition signage
  • street banners
  • website
  • markup
  • html
  • css
  • plugin integration
  • video titles
  • educational materials
  • print collateral
  • exhibition gallery guide
  • rack card
  • postcard
  • gala invitation
  • e-invite
  • event program
  • event signage
  • donor materials
  • print management
  • swag
  • accessibility compliance
The Forty Part Motet exhibition symbol
Fig. 4.2 The Forty Part Motet — Exhibition symbol. Notes The symbol references the forty voices, the five vocal parts (soprano, alto, tenor, baritone, and bass), and the dynamic visitor experience amidst the sonic landscape. Says the artist, ". . . in a live concert, the audience is separate from the individual voices. I wanted to be able to 'climb inside' the music . . ."
The Forty Part Motet exhibition gallery signage
Fig. 4.3 The Forty Part Motet — Exhibition gallery signage. Notes In addition to the exhibition making its California debut, it was also the inaugural exhibition in Fort Mason's new Gallery 308 and the final SFMOMA on the Go collaboration. Photo JKA Photography.
The Forty Part Motet exhibition gallery signage
Fig. 4.4 The Forty Part Motet — Exhibition gallery signage. Notes The lobby wall reflected in the glass doors leading to the gallery wall beyond creates an additional layer of interpretation that visually suggests the soundscape to come.
The Forty Part Motet exhibition street pole banners
Fig. 4.5 The Forty Part Motet — Exhibition street pole banners.
The Forty Part Motet responsive website site mobile view
Fig. 4.6 The Forty Part Motet — Responsive website mobile view.
The Forty Part Motet type study
Fig. 4.7 The Forty Part Motet — Typography and color study. Notes Storyboards help keep multiple project partners focused and aligned throughout the design and evaluation process.
e-minus logo
Fig. 5.1 E-minus — Symbol. Context E-minus offers engineering solutions for energy efficiency and clean energy to reduce the cost and resource load of institutional systems. Project Create an identity to capture energy reduction engineering and apply it to a responsive website and business paper. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • cms theming
  • website
  • markup
  • html
  • css
  • wordpress
  • business paper
  • copywriting
e-minus logo
Fig. 5.2 E-minus — Symbol with wordmark in horizontal logo lockup.
e-minus responsive website home page
Fig. 5.3 E-minus — Responsive website home page view.
e-minus responsive website mobile view
Fig. 5.4 E-minus — Responsive website mobile view.
School of the Arts fundraiser poster
Fig. 6.1 School of the Arts — Fundraiser poster. Context Ruth Asawa School of the Arts, San Francisco's audition-based public high school, raises funds for its Artists-in-Residence program, which engages professional artists as teachers and cultivates the next generation of arts educators. Project Create an identity for a fundraising event and implement branded materials ranging from posters to event signage. Notes Alphabet soup, Victorian engravings, seaweed flair, a checkered tablecloth, a paper placemat, and a grunge brush. Sometimes it just all comes together. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • wordmark
  • typography
  • illustration
  • poster
  • postcard
  • e-invite
  • fundraising materials
  • print management
  • social media graphics
  • event signage
  • merchandise
  • swag
  • public relations
  • press release
  • copywriting
School of the Arts fundraiser online banner
Fig. 6.2 School of the Arts — Fundraiser online banner. Notes Horizontal banner for online ads, headers, and social media posts.
School of the Arts fundraiser funny money
Fig. 6.3 School of the Arts — Fundraiser funny money.
Sanctuary exhibition logo
Fig. 7.1 Sanctuary — Exhibition logo. Context Thirty-six contemporary prayer rugs designed by artists from around the world and hand woven by artisans in Pakistan are laid out on the floor of Fort Mason's historic chapel in this "art about place" installation. With For-Site. Project Create an identity evoking the physical space and the conceptual ideas of the exhibition. Develop an information system and implement branded materials across all channels, ranging from environmental signage to an exhibition catalog. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • wordmark
  • typography
  • interpretive design
  • visitor experience
  • environmental signage
  • exhibition signage
  • street banners
  • billboard banner
  • wayfinding
  • street decals
  • educational materials
  • walkaround placard
  • walkaround binder
  • exhibition catalog
  • book design
  • rack card
  • postcard
  • business paper
  • gala invitation
  • fundraising materials
  • event program
  • project report
  • print management
  • social media graphics
  • merchandise
  • swag
  • accessibility compliance
Sanctuary street pole banners
Fig. 7.2 Sanctuary — Exhibition street pole banners.
Sanctuary walkaround interpretive placard
Fig. 7.3 Sanctuary — Walkaround interpretive placard. Notes Visitors are invited to remove their shoes and walk or sit on the artworks. Portable interpretive materials instead of wall signage and labels allow visitors to learn about the art as they interact with it.
Sanctuary exhibition rack card
Fig. 7.4 Sanctuary — Exhibition rack card.
Sanctuary eight pieces of flair
Fig. 7.5 Sanctuary — Eight pieces of flair.
Sanctuary walkaround interpretive binder spread
Fig. 7.6 Sanctuary — Walkaround interpretive binder spread.
Sanctuary social media tiles
Fig. 7.7 Sanctuary — Social media tiles.
Sanctuary exhibition catalog
Fig. 7.8 Sanctuary — Exhibition catalog.
Sanctuary exhibition catalog spread
Fig. 7.9 Sanctuary — Exhibition catalog spread.
Sanctuary exhibition catalog spreads
Fig. 7.10 Sanctuary — Exhibition catalog spreads.
Live Oak School logo
Fig. 8.1 Live Oak School — Logo. Context Live Oak School is an independent K–8 day school growing leaders to take on the challenges of their generation. Project Develop an identity to capture growth, partnership, and community using the leaf shape of the namesake tree (a.k.a. Quercus agrifolia). What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • visual interface design
  • front-end development
  • website
  • markup + code
  • html
  • css
  • javascript
  • application concept
  • browser-based app
  • building banners
  • brochure
  • look book
  • annual report
  • book design
  • poster
  • postcard
  • business paper
  • fundraising materials
  • print management
  • merchandise
  • swag
  • copywriting
  • editing
Live Oak School brochure cover
Fig. 8.2 Live Oak School — Brochure cover.
Live Oak School brochure spread
Fig. 8.3 Live Oak School — Brochure spread.
Live Oak School brochure spreads
Fig. 8.4 Live Oak School — Brochure spreads.
Live Oak School business paper
Fig. 8.5 Live Oak School — Business paper.
Live Oak School literary journal
Fig. 8.6 Live Oak School — Literary journal.
Live Oak School alumni t-shirt
Fig. 8.7 Live Oak School — Alumni t-shirt.
Live Oak School wine labels
Fig. 8.8 Live Oak School — Wine labels.
Home Land Security trail signage and exhibition labels
Fig. 9.1 Home Land Security — Trail signage and exhibition labels. Context Occupying a decommissioned military base in San Francisco's Presidio, site-responsive works by contemporary artists reflect on national security and its physical and psychological borders. With For-Site, National Park Service, Golden Gate National Parks Conservancy, and Presidio Trust. Project Create an identity that visually namechecks the government agency and evokes the nature of boundaries. Develop an information system and implement branded materials across all channels, ranging from environmental signage to an exhibition catalog. What I Did
  • visual design
  • identity
  • branding
  • logo
  • wordmark
  • typography
  • interpretive design
  • visitor experience
  • environmental signage
  • exhibition signage
  • trail signage
  • wayfinding
  • educational materials
  • print collateral
  • exhibition passport
  • rack card
  • gala invitation
  • fundraising materials
  • print management
  • event program
  • event signage
  • video titles
  • e-invite
  • social geofilter
  • media graphics
  • merchandise
  • swag
  • accessibility compliance
Home Land Security wordmark in logo lockup
Fig. 9.2 Home Land Security — Wordmark in logo lockup. Notes Custom-drawn letterforms and refined letterspacing reimagine the standard-issue monospace typeface.
Home Land Security passport stamp and social media geofilter
Fig. 9.3 Home Land Security — Passport stamp and social media geofilter.
Home Land Security rack card
Fig. 9.4 Home Land Security — Rack card.
Home Land Security exhibition passport
Fig. 9.5 Home Land Security — Exhibition passport. Notes The pocket-size exhibition guide evokes the show's borders theme and travels easily to the installation sites on the one-mile trail loop. Visitors can get their passports stamped too.
Home Land Security passport catalog spreads
Fig. 9.6 Home Land Security — Exhibition passport spreads.
Home Land Security passport catalog spread
Fig. 9.7 Home Land Security — Exhibition passport spread.
Careernav responsive website home page
Fig. 10.1 Careernav — Responsive website home page. Context East Bay Career Pathways Consortium builds and strengthens integrated career pathways between schools, community colleges, and employers in high-demand industry sectors. With Peralta Community College District. Project Create an easy-to-use, database-powered mobile website to allow users to learn about and pursue careers through coordinated certificate and degree programs in their local high schools and community colleges. What I Did
  • visual interface design
  • identity
  • branding
  • information architecture
  • front-end development
  • wireframing
  • cms theming
  • wordpress
  • markup + code
  • html
  • css
  • php
  • browser-based app
  • plugin configuration
  • database design
  • google integration
  • custom search
  • stakeholder presentation
  • cms training
  • accessibility compliance
Careernav responsive website mobile view
Fig. 10.2 Careernav — Responsive website mobile view.
WordPress admin database view
Fig. 10.3 Careernav — WordPress admin database view. Notes Select plugins extend WordPress functionality to support a database by creating relationships between custom post types and allowing the importing of data.
San Francisco State University main site home page with accessible navigation menu
Fig. 11.1 San Francisco State University — Main site home page with accessible navigation menu. Context SFSU is a university in the 23-campus California State University system. Project Create a program of branded front-end templates to unify and bring into compliance hundreds of decentralized websites. Build out pilot sites including the university’s landing page and develop an accessible navigation directory. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • wireframing
  • application concept
  • browser-based app
  • navigation menu
  • template development
  • cms theming
  • website
  • markup + code
  • html
  • css
  • javascript
  • research
  • executive report
  • documentation
  • standards
  • accessibility compliance
San Francisco State University accessible navigation menu
Fig. 11.2 San Francisco State University — Accessible navigation menu. Notes The Center for Accessible Technology and the California Emerging Technology Fund awarded SF State their Digital Inclusion Award for the landing page, with specific recognition for the navigation directory’s keyboard accessibility and its standards-based, semantic markup and code.
San Francisco State University satellite site template example
Fig. 11.3 San Francisco State University — Satellite site template example. Notes Hundreds of the university's sites adopted and successfully implemented a template — each developer selecting a CMS of its choosing.
San Francisco State University satellite site template examples
Fig. 11.4 San Francisco State University — Satellite site template examples.
San Francisco State University page architecture documentation
Fig. 11.5 San Francisco State University — Page architecture documentation.
California College of the Arts symposium poster
Fig. 12.1 California College of the Arts — Symposium poster. Context The work of graduate and undergraduate students in Visual + Critical Studies, Visual Studies, and Writing is featured in posters, mailers, and books. Project Create compelling and modular designs to represent word-centric content, focusing on literary typography and application to a variety of media. What I Did
  • visual design
  • identity
  • branding
  • wordmark
  • typography
  • book design
  • poster
  • mailer
  • event program
California College of the Arts symposium program
Fig. 12.2 California College of the Arts — Symposium program.
California College of the Arts symposium poster
Fig. 12.3 California College of the Arts — Symposium poster.
California College of the Arts Sightlines book wordmark
Fig. 12.4 California College of the Arts — Visual Studies book title typography.
California College of the Arts Sightlines book
Fig. 12.5 California College of the Arts — Visual Studies book.
California College of the Arts Sightlines book spreads
Fig. 12.6 California College of the Arts — Visual Studies book spreads.
California College of the Arts Sightlines book
Fig. 12.7 California College of the Arts — Sightlines book.
California College of the Arts Sightlines book spreads
Fig. 12.8 California College of the Arts — Sightlines book spreads.
California College of the Arts Writing Book 2013 cover typography
Fig. 12.9 California College of the Arts — Writing Book 2013 title typography.
California College of the Arts Writing Book 2013
Fig. 12.10 California College of the Arts — Writing Book 2013.
California College of the Arts Writing Book 2013 spread
Fig. 12.11 California College of the Arts — Writing Book 2013 spread.
Girl Scouts River Valleys website home page detail
Fig. 13.1 Girl Scouts — Girl Scouts River Valleys website home page detail. Context Girl Scouts gives 2.5 million girls and adults a chance to practice a lifetime of leadership, adventure, and success. Project Move the Girl Scouts' flagship Minnesota/Wisconsin council from a high-overhead proprietary content management system to an open source CMS with a modern, girl-centric visual interface. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • wireframing
  • cms theming
  • website
  • markup + code
  • html
  • css
  • javascript
  • php
  • wordpress multisite
  • multisite configuration
  • plugin development
  • mobile app buildout
  • content development
  • illustration
  • headers
  • social media tiles
  • documentation
Girl Scouts River Valleys website home page
Fig. 13.2 Girl Scouts — Girl Scouts River Valleys website home page view.
Girl Scouts web and social media tiles
Fig. 13.3 Girl Scouts — Web and social media tiles.
Girl Scout cookies
Fig. 13.4 Girl Scouts — Cookies. Notes Just because.
Girl Scouts Great Girl Gathering event mobile app
Fig. 13.5 Girl Scouts — Great Girl Gathering event mobile app. Notes The app helped 50,000 Girl Scouts calendar and navigate events during a two-day celebration at the Mall of America in celebration the the Girl Scouts' 100th anniversary.
Imbee symbol
Fig. 14.1 Imbee — Symbol. Context A social networking place for tweens allows them to blog and connect with each other while maintaining privacy and security. Project Create a vibrant tween-friendly identity and apply it brand-wide. What I Did
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • visual interface design
  • information architecture
  • front-end development
  • prototype buildout
  • website
  • markup + code
  • html
  • css
  • javascript
  • application concept
  • browser-based app
  • theme design
  • illustration
  • merchandise
  • swag
Imbee symbol with wordmark in horizontal logo lockup
Fig. 14.2 Imbee — Symbol with wordmark in horizontal logo lockup.
Imbee sign-up website home page view
Fig. 14.3 Imbee — Sign-up website home page view. Notes Need a screen name? Try my screen name generator prototype.
Imbee skateboard
Fig. 14.4 Imbee — Skateboard.
Imbee shirt
Fig. 14.5 Imbee — Shirt.
Low E symbol
Fig. 15.1 Low E — Symbol. Context A bassist concern is named after the open note on the first string of a bass. Project Create a memorable identity by turning a bass clef low E dotted whole note into the letter E. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
Low E symbol with wordmark in logo lockup
Fig. 15.2 Low E — Symbol with wordmark in logo lockup.
International Orange rack card
Fig. 16.1 International Orange — Rack Card. Context Sixteen artists create site-specific artworks at the historic Fort Point in celebration of the 75th anniversary of the Golden Gate Bridge. With For-Site, National Park Service, Golden Gate National Parks Conservancy. Project Create an exhibition identity and apply it brand-wide environmental signage to interpretive and collateral print materials. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • wordmark
  • typography
  • standards brief
  • interpretive design
  • visitor experience
  • environmental signage
  • exhibition signage
  • billboard
  • mapping
  • educational materials
  • print collateral
  • exhibition brochure
  • rack card
  • gala invitation
  • donor materials
  • print management
  • media graphics
  • e-invite
  • event signage
  • accessibility compliance
International Orange environmental signage
Fig. 16.2 International Orange — Exhibition signage.
International Orange exhibition billboard
Fig. 16.3 International Orange — Exhibition billboard.
Presidio Habitats exhibition logo
Fig. 17.1 Presidio Habitats — Exhibition logo. Context The first site-specific art exhibition in a national park invites international artists to imagine homes for the Presidio's animals. With For-Site and Presidio Trust. Project Create an exhibition identity and apply it to environmental signage and collateral materials. What I Did
  • visual design
  • identity
  • branding
  • logo
  • wordmark
  • typography
  • interpretive design
  • visitor experience
  • environmental signage
  • exhibition signage
  • mapping
  • educational materials
  • exhibition brochure
  • post card
  • gala invitation
  • donor materials
  • media graphics
  • e-invite
  • accessibility compliance
Presidio Habitats exhibition catalog spread
Fig. 17.2 Presidio Habitats — Exhibition catalog spreads.
Asian Art Museum brochure and rack cards
Fig. 18.1 Asian Art Museum — Museum brochure and rack cards. Context The San Francisco museum houses 18,000 artworks up to 6,000 years old. Project Design and produce engaging works ranging from interpretive materials and exhibition signage to event calendars and collateral print materials. What I Did
  • visual design
  • typography
  • icon design
  • illustration
  • environmental signage
  • exhibition signage
  • ground decals
  • interpretive design
  • educational materials
  • print collateral
  • events calendar
  • museum brochure
  • rack card
  • poster
  • postcard
  • mailer
  • event program
  • gala invitation
  • donor materials
  • fundraising materials
  • print management
  • media graphics
  • copyediting
Asian Art Museum icons
Fig. 18.2 Asian Art Museum — Event icons. Notes Icons pictured: concerts, demonstrations, exhibitions, literary arts, special events, lectures, family activities, film and video, for members only.
Asian Art Museum walkaraound interpretive placards
Fig. 18.3 Asian Art Museum — Walkaround interpretive placards. Notes Portable interpretive materials allow visitors to reference information while viewing intricate artworks up close.
Arts of Pacific Asia gala invitation
Fig. 18.4 Asian Art Museum / Mercedes Benz — Arts of Pacific Asia gala invitation.
Rock Project logo
Fig. 19.1 Rock Project — Logo. Context Kids learn music by performing live rock 'n' roll shows. Project Create an identity to evoke a rock 'n' roll amp stack and music turned up to 11. What I Did
  • visual design
  • identity
  • branding
  • logo
  • environmental signage
  • banners
  • business paper
  • merchandise
  • swag
Rock Project logo application
Fig. 19.2 Rock Project — Logo application.
Rock Project banners
Fig. 19.3 Rock Project — Banners.
Rock Project standards brief
Fig. 19.4 Rock Project — Standards brief.
Rock Project logo sketch iterations
Fig. 19.5 Rock Project — Logo sketch iterations.
Pop-Up Book Fair symbol
Fig. 20.1 Pop-Up Book Fair — Symbol. Context A wine-and-shopping bookstore takeover raises funds for a school library. Project Create a literary event identity for application to various media. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • print collateral
  • poster
  • postcard
  • mailer
logo
Fig. 21.1 Psykic — Logo. Context Psykic designs skateboard decks and merchandise. Project Create an identity to apply to decks and merchandise. What I Did
  • creative concept
  • visual design
  • identity
  • branding
  • logo
  • wordmark
  • typography
  • merchandise
  • swag
  • skateboard decks
  • deck design
  • fabrication management
Levis clothing label
Fig. 22.1 Levi Strauss — Clothing label. Context The worldwide pants company was founded in San Francisco in 1853. Project Create fashion-forward clothing labels and hang tags to modernize company's Dockers brand. What I Did
  • visual design
  • identity
  • branding
  • typography
  • clothing label
  • hang tag
Icon Sets virtual art gallery icons
Fig. 23.1 Icon Sets — Various. Context Icon sets reinforce navigation nomenclature and visually identify sections. Project Create navigation structures, nomenclatures, and icons in conjunction with visual interface design and development. Notes Icons sets from top: virtual art gallery, senior housing types, aviation photography store, home loan process. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • nomenclature
  • markup + code
  • html
  • css
  • javascript
  • icon design
  • illustration
FieldReport literary review ratings slider
Fig. 24.1 FieldReport — Literary review ratings slider. Context Users read and score short-form true-life literary submissions. Project Create browser-based tools in conjunction with visual interface design and development to support user functions. Notes Try it for fun. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • browser-based app
  • markup + code
  • html
  • css
  • javascript
  • forms
  • slider
  • timer
  • leaderboards
  • illustration
Pet Care wireframe screen view
Fig. 25.1 Pop-Up Pet Care — Functional wireframe screen view. Context Pop-up veterinary clinics deliver pet care services in the community. Project Create an information architecture to support data entry, record retrieval, and report generation. Build functional front-end wireframes and prototypes including a pet breed autofill, accesskeys, and a pet birthday calculator. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • browser-based app
  • wireframing
  • prototyping
  • markup + code
  • html
  • css
  • javascript
Manhattan Twins Club responsive website mobile view
Fig. 26.1 Manhattan Twins Club — Responsive website mobile view. Context The New York City club is the largest multiples community in the US. Project Create an identity and apply it to a public-facing sign-up website and a members-only portal. What I Did
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • website
  • portal customization
  • cms theming
  • markup
  • html
  • css
  • squarespace
  • copywriting
Manhattan Twins Club responsive website home page view
Fig. 26.2 Manhattan Twins Club — Responsive website home page view.
Schwab Job Guide navigation tree view
Fig. 27.1 Charles Schwab — Employee help desk navigation tree view. Context The brokerage firm excels at customer service by providing extensive employee training. Project Design and develop browser-based job-support training modules and "just-in-time" reference tools for financial services employees. What I Did
  • creative concept
  • visual interface design
  • information architecture
  • front-end development
  • website
  • intranet
  • markup + code
  • html
  • css
  • javascript
  • performance support
  • online help
  • help desk
  • web-based training
OffRoad website splash screen view
Fig. 28.1 OffRoad Capital — Website splash screen view. Context An online venture capital marketplace backed by Charles Schwab pioneers investing platforms. Project Create an engaging visual identity targeting wealthy individual investors and private companies seeking financing. What I Did
  • visual design
  • identity
  • branding
  • visual interface design
  • screen prototypes
  • markup
  • html
  • css
  • animation
Wells Fargo fund data sheets
Fig. 29.1 Wells Fargo — Fund data sheets. Context The world's fourth-largest bank offers wealth and investment management services. Project Create fund financial data sheets and brochures for investors. What I Did
  • visual design
  • information design
  • brand support
  • data sheets
  • brochure
  • infographics
  • print collateral
  • graphing
  • charting
  • illustration
Merrill Lynch Philanthropy website home page view with banners
Fig. 30.1 Merrill Lynch Philanthropy — Website home page view with banners. Context The brokerage firm headquartered in New York supports its communities through philanthropic programs. Project Design internal and public-facing websites capturing the spirit of the company's philanthropy for contributor and beneficiary audiences. With CapGemini. What I Did
  • visual interface design
  • information architecture
  • front-end prototyping
  • website
  • intranet
  • markup
  • html
  • css
  • icon design
Merrill Lynch Philanthropy website icons
Fig. 30.2 Merrill Lynch Philanthropy — Website icons.
Lexar interactive web-based training module
Fig. 31.1 Lexar — Interactive web-based training module. Context The company's retail partners are briefed on the features and benefits of its flash memory products. Project Develop a browser-based, interactive sales-force trainer with fast facts and pop quizzes. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • website
  • markup + code
  • html
  • css
  • javascript
  • performance support
  • web-based training
  • pop-up quiz
  • icon design
  • animation
Landscape Architecture website page views
Fig. 32.1 Landscape Architecture — Website page views. Context A landscape architecture company specializes in high-end residential, restaurant, and commercial projects. Project Create an identity and apply it to design portfolio website and collateral print materials. What I Did
  • visual interface design
  • information architecture
  • front-end development
  • website
  • markup + code
  • html
  • css
  • javascript
  • print collateral
  • business paper
  • postcard
  • mailer
Timken Museum of Art logo
Fig. 33.1 Timken Museum of Art — Logo. Context The San Diego fine arts museum displays European masterworks. Project Create an identity and apply it to business paper and collateral print materials. What I Did
  • visual design
  • identity
  • branding
  • logo
  • symbol
  • wordmark
  • typography
  • print collateral
  • business paper
  • forms
  • exhibition brochure
  • event program
Beyond the Obvious exhibition catalog cover
Fig. 34.1 Beyond the Obvious — Exhibition catalog cover. Context The exhibition features work from contemporary jewelry artists. With San Francisco Craft & Folk Art Museum and Susan Cummins Gallery. Project Design an art catalog to accompany the exhibition. What I Did
  • visual design
  • identity
  • branding
  • wordmark
  • typography
  • book design
  • exhibition catalog
Beyond the Obvious exhibition catalog spreads
Fig. 34.2 Beyond the Obvious — Exhibition catalog spreads.
National Geographic website design proposal
Fig. 35.1 National Geographic — Website design proposal home page view. Context Founded in 1888, the non-profit scientific and educational organization is one of largest in the world. Project Design compelling sample screens — using the organization's trademark rectangular yellow border — to illustrate possibilities for taking the print magazine to a web environment. With Luminare and National Geographic. What I Did
  • visual design
  • visual interface design
  • markup
  • html
  • animation
Black Panthers CD-ROM design proposal
Fig. 36.1 Black Panthers — CD-ROM design proposal. Context The Black Panther Party was a political organization founded in Oakland in 1966 to defend minority communities through militant self-defense and community social programs. Project Propose for publishers an interactive and audio CD set to explore the history of the Black Panthers in the context of contemporary youth culture. With Luminare and the Dr. Huey P. Newton Foundation. What I Did
  • visual design
  • visual interface design
  • product prototyping
  • book design
Black Panthers CD-ROM insert spreads
Fig. 36.2 Black Panthers — CD-ROM insert spreads.
Motown CD-ROM proposal
Fig. 37.1 Motown — CD-ROM prototype. Context Motown Records is an American record label founded in Detroit in 1959. Project Create an interactive prototype pitch exploring the history of Motown. With Luminare and Motown. What I Did
  • visual interface design
  • game design
  • interactive prototyping
Center for Social Justice and Civil Liberties typography
Fig. 38.1 Center for Social Justice and Civil Liberties — Logo. Context The museum and educational center operated by the Riverside Community College District focuses on social issues and civil rights. Project Create a stately civic identity for building signage. What I Did
  • visual design
  • identity
  • branding
  • wordmark
  • typography
  • environmental signage
Center for Social Justice and Civil Liberties signage
Fig. 38.2 Center for Social Justice and Civil Liberties — Signage. Photo Courtesy LPA.
Please Do Not Stand By social media banner
Fig. 39.1 Please Do Not Stand By (Send me to your leaders) — Outreach campaign social media view. Context Citizens are encouraged to let their politicians know where they stand on issues. Project Create a vibrant visual motif for distribution via social media and snail mail. Commissioned by ArtRise Projects. What I Did
  • creative concept
  • visual design
  • illustration
  • social media banners
  • postcard
  • merchandise
Industry project tiles
Fig. 40.1 Industry — Project tiles. Notes Industry project icons distill salient project visuals into tiny, 100-pixel squares.
Industry card
Fig. 40.2 Industry — Greeting card. Notes More cowbell, except with dots . . .
Industry symbol
Fig. 40.3 Industry — Symbol. Notes Contact Industry.