Creating Adobe's Creative Suite

Jorge Tello Aliaga

Graphic Designer
Visual Designer
UI Designer
Adobe Acrobat
Adobe Illustrator
Adobe Photoshop
Adobe
Client: Adobe
Role: Visual Design Manager
Tools: Photoshop, Illustrator, Acrobat, Applescript, ResEdit.

Introduction

Adobe Systems, a leader in digital media and marketing solutions, was primarily an engineering-driven company in the late 1990s, focusing more on functionality than user experience. The professional applications (Pro Apps) under Adobe's umbrella, which would later evolve into the Creative Suite, were burdened with an outdated and inconsistent user interface (UI). Recognizing the need for a fresh and cohesive visual identity, Adobe hired me as the UI Manager to spearhead this transformation.
Photoshop Tool Bar Explorations
Photoshop Tool Bar Explorations

Challenge

The primary challenge was to revamp the look and feel of Adobe's Pro Apps, which faced resistance from the engineering teams. These teams had long been accustomed to working in silos, each with its own set of code that could not support newer graphics formats or be shared across different applications. The task was not just about redesigning the UI but also about fostering collaboration among the engineering teams to facilitate a unified approach to UI development.
Photoshop Toolbar - Before and After
Photoshop Toolbar - Before and After

Objectives

Update the UI to be modern and visually appealing.
Ensure a consistent look and feel across all Pro Apps.
Introduce new visual elements such as anti-aliased icons, drop shadows, and color rollovers.
Develop a cohesive strategy for sharing UI code and assets among different applications.
Illustrator Toolbar Showing All Tools and All Rollover Colors
Illustrator Toolbar Showing All Tools and All Rollover Colors

Approach

Initial Proposal and Advocacy:
Proposed updating the tool icons to include anti-aliasing, drop shadows, and color rollovers.
Met with resistance due to the existing codebase's limitations.
Engaged in extensive discussions with engineering teams to highlight the importance of a modern UI and the benefits of code and asset sharing.
InDesign Before and After My Redesign
InDesign Before and After My Redesign
Innovative Design Concepts:
Drew inspiration from Apple's introduction of MacOS X with the Aqua UI, which featured transparency and translucency.
Conceptualized and proposed icons and splash screens that broke outside their traditional canvas, offering a more dynamic and engaging visual experience.
ImageReady Art I Created and Its Use in Collateral Assets
ImageReady Art I Created and Its Use in Collateral Assets
Creating Icon Families
Creating Icon Families
Multiple File Icons for InDesign
Multiple File Icons for InDesign
The Entire Photoshop Icon Family
The Entire Photoshop Icon Family
Implementation Tools and Documentation:
Developed "IconMaker" AppleScript application to aid designers in creating consistent icon families and splash screens.
Authored comprehensive documentation and specifications to ensure consistency across all visual assets.
"IconMaker" Tool I Coded and Shareable Code for Antialiased Icons
"IconMaker" Tool I Coded and Shareable Code for Antialiased Icons
UI Design Process Slide
UI Design Process Slide
Interface Enhancements:
Implemented new tool icons and welcome screens.
Introduced a darker UI option and other visual improvements to enhance usability and aesthetics.
Illustrator Welcome Screen Design
Illustrator Welcome Screen Design
Adobe Bridge Development:
Recognized the need for a central application to integrate all Adobe apps within the Creative Suite.
Proposed and designed "Project Bridge," a control bridge to unify and streamline the user experience across apps.
Solely created the comps for this new component, which marketing enthusiastically embraced.
The new application, renamed "Bridge," was successfully added to Creative Suite 2, providing a cohesive interface for users to manage their creative assets.
Original Presentation Slide for "Project Bridge"
Original Presentation Slide for "Project Bridge"
Slide Showing View Modes
Slide Showing View Modes
Full Comp Showing Image Browser
Full Comp Showing Image Browser

Outcome

The project culminated in a significant visual overhaul of Adobe's Pro Apps, setting the foundation for what would become the Creative Suite. The new UI elements were well-received, and the collaboration between design and engineering teams marked a pivotal shift in Adobe's approach to software development. The changes not only modernized the applications but also paved the way for future innovations in UI design within Adobe.
Specs for SplashScreens in Later Versions of Creative Suites
Specs for SplashScreens in Later Versions of Creative Suites

Future Vision

Before leaving Adobe for new opportunities, I explored futuristic UI concepts for Photoshop, envisioning a sleek, intuitive, and highly functional interface that would continue to push the boundaries of design and user experience.
Concept for Futuristic Photoshop UI with 3D Tools and Layers
Concept for Futuristic Photoshop UI with 3D Tools and Layers

Conclusion

The transformation of Adobe's Pro Apps into a visually cohesive and modern suite of tools was a challenging yet rewarding endeavor. It required not only design expertise but also the ability to advocate for change, collaborate across teams, and develop tools and documentation to ensure consistency. This project highlights the critical role of UI design in software development and its impact on the overall user experience.
Partner With Jorge
View Services

More Projects by Jorge