Top
Industry
Home:
Show captions
About
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
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.
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.
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.
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.
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.
Fig. 1.7
@Large: Ai Weiwei on Alcatraz
— Interpretive reference binder spreads.
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.
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.
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.
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
Fig. 2.2
Peralta Colleges
— Responsive website mobile 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.
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
Fig. 3.2
FOSOTA / Friends of Ruth Asawa School of the Arts
— Symbol with wordmark in horizontal logo lockup.
Fig. 3.3
FOSOTA / Friends of Ruth Asawa School of the Arts
— Responsive website home page view.
Fig. 3.4
FOSOTA / Friends of Ruth Asawa School of the Arts
— Responsive website subpage view.
Fig. 3.5
FOSOTA / Friends of Ruth Asawa School of the Arts
— Symbol with social media hashtag.
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
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
. . .
"
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.
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.
Fig. 4.5
The Forty Part Motet
— Exhibition street pole banners.
Fig. 4.6
The Forty Part Motet
— Responsive website mobile view.
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.
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
Fig. 5.2
E-minus
— Symbol with wordmark in horizontal logo lockup.
Fig. 5.3
E-minus
— Responsive website home page view.
Fig. 5.4
E-minus
— Responsive website mobile view.
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
Fig. 6.2
School of the Arts
— Fundraiser online banner.
Notes
Horizontal banner for online ads, headers, and social media posts.
Fig. 6.3
School of the Arts
— Fundraiser funny money.
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
Fig. 7.2
Sanctuary
— Exhibition street pole banners.
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.
Fig. 7.4
Sanctuary
— Exhibition rack card.
Fig. 7.5
Sanctuary
— Eight pieces of flair.
Fig. 7.6
Sanctuary
— Walkaround interpretive binder spread.
Fig. 7.7
Sanctuary
— Social media tiles.
Fig. 7.8
Sanctuary
— Exhibition catalog.
Fig. 7.9
Sanctuary
— Exhibition catalog spread.
Fig. 7.10
Sanctuary
— Exhibition catalog spreads.
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
Fig. 8.2
Live Oak School
— Brochure cover.
Fig. 8.3
Live Oak School
— Brochure spread.
Fig. 8.4
Live Oak School
— Brochure spreads.
Fig. 8.5
Live Oak School
— Business paper.
Fig. 8.6
Live Oak School
— Literary journal.
Fig. 8.7
Live Oak School
— Alumni t-shirt.
Fig. 8.8
Live Oak School
— Wine 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
Fig. 9.2
Home Land Security
— Wordmark in logo lockup.
Notes
Custom-drawn letterforms and refined letterspacing reimagine the standard-issue monospace typeface.
Fig. 9.3
Home Land Security
— Passport stamp and social media geofilter.
Fig. 9.4
Home Land Security
— Rack card.
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.
Fig. 9.6
Home Land Security
— Exhibition passport spreads.
Fig. 9.7
Home Land Security
— Exhibition passport spread.
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
Fig. 10.2
Careernav
— Responsive website mobile 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.
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
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.
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.
Fig. 11.4
San Francisco State University
— Satellite site template examples.
Fig. 11.5
San Francisco State University
— Page architecture documentation.
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
Fig. 12.2
California College of the Arts
— Symposium program.
Fig. 12.3
California College of the Arts
— Symposium poster.
Fig. 12.4
California College of the Arts
— Visual Studies book title typography.
Fig. 12.5
California College of the Arts
— Visual Studies book.
Fig. 12.6
California College of the Arts
— Visual Studies book spreads.
Fig. 12.7
California College of the Arts
— Sightlines book.
Fig. 12.8
California College of the Arts
— Sightlines book spreads.
Fig. 12.9
California College of the Arts
— Writing Book 2013 title typography.
Fig. 12.10
California College of the Arts
— Writing Book 2013.
Fig. 12.11
California College of the Arts
— Writing Book 2013 spread.
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
Fig. 13.2
Girl Scouts
— Girl Scouts River Valleys website home page view.
Fig. 13.3
Girl Scouts
— Web and social media tiles.
Fig. 13.4
Girl Scouts
— Cookies.
Notes
Just because.
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.
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
Fig. 14.2
Imbee
— Symbol with wordmark in horizontal logo lockup.
Fig. 14.3
Imbee
— Sign-up website home page view.
Notes
Need a screen name? Try my
screen name generator
prototype.
Fig. 14.4
Imbee
— Skateboard.
Fig. 14.5
Imbee
— Shirt.
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
Fig. 15.2
Low E
— Symbol with wordmark in logo lockup.
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
Fig. 16.2
International Orange
— Exhibition signage.
Fig. 16.3
International Orange
— Exhibition billboard.
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
Fig. 17.2
Presidio Habitats
— Exhibition catalog spreads.
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
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.
Fig. 18.3
Asian Art Museum
— Walkaround interpretive placards.
Notes
Portable interpretive materials allow visitors to reference information while viewing intricate artworks up close.
Fig. 18.4
Asian Art Museum / Mercedes Benz
— Arts of Pacific Asia gala invitation.
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
Fig. 19.2
Rock Project
— Logo application.
Fig. 19.3
Rock Project
— Banners.
Fig. 19.4
Rock Project
— Standards brief.
Fig. 19.5
Rock Project
— Logo sketch iterations.
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
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
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
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
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
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
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
Fig. 26.2
Manhattan Twins Club
— Responsive website home page 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
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
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
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
Fig. 30.2
Merrill Lynch Philanthropy
— Website icons.
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
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
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
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
Fig. 34.2
Beyond the Obvious
— Exhibition catalog spreads.
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
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
Fig. 36.2
Black Panthers
— CD-ROM insert spreads.
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
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
Fig. 38.2
Center for Social Justice and Civil Liberties
— Signage.
Photo
Courtesy LPA.
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
Fig. 40.1
Industry
— Project tiles.
Notes
Industry project icons distill salient project visuals into tiny, 100-pixel squares.
Fig. 40.2
Industry
— Greeting card.
Notes
More cowbell, except with dots . . .
Fig. 40.3
Industry
— Symbol.
Notes
Contact Industry
.