Today, the team is excited to introduce a new way to access premium design resources from Creative Market in your workflow: The Creative Market Photoshop Extension.
It’s a free panel that installs right into Photoshop, so that all content purchased on Creative Market through the extension is automatically installed and ready to use. Now, you don’t have to unzip downloaded files, manually install content, or restart Photoshop.
Read more about it on our blog and go download and install it for free now!
Personally, I had a really great time designing for this new ‘app’ space; it was super fun to work closely with Brian and Aaron on an iterative prototype. The process of pushing updates to a working prototype really helped us make granular refinements that resulted in a much better product.
We had built that early, private extension prototype well before our .com site launched, so largely the task of the team over the last few months was to revisit existing work, edit it down to the essentials with good UX and IA in place, polish the tiny details, and kick the tires on it endlessly to discover and repair as many bugs and errors that we could turn up. We waded through lots of unique challenges (i.e. caching, AIR and backbone.js integration, storing states, many others), but came out with a version 1 build that is functional and efficient.
In the next few days, we’ll share a deep technical post about how we built the extension over on the Creative Market blog. That being said, I wanted to quickly share a few high-level design considerations from our version 1 build of the extension below:
- Familiar & Adaptive UI
- While we could have designed almost anything inside the extension window, we decided it best to create a visual layout and system that looked familiar to the Photoshop app interface. We may have taken a few subtle liberties with the Adobe look, but the overall components give the app a familiar, native feel.
- We also had 4 color schemes to consider when implementing. Adobe allows users to change the skin of Photoshop to one of 2 light schemes or one of 2 dark schemes, so we had to ensure that the UI would adapt to these current known schemes, as well as future ones. Here’s a look at the 4 current schemes: http://d.pr/i/3wrD
- Sticky & Freeform Layout
- We had a design dilemma on how to lay out content. Since users can attach the window to the side of photoshop, drop it into a tab system with other tools in a single window, or pull it out as a free floating window and resize it, we started off with a list view. Our left to right product list approach encourages linear browsing and best fit the smaller mobile-like window size that appears when a user opens the extension.
- We explored various product thumbnail and detail lock-ups to achieve the best list view display, so that users could scroll through more products before committing to click into the details of one. It’s always a delicate balance to show the right mix of content and scale, and our v1 build increases browsing and searching efficiency based on the height of the product modules.
- Context & Features
- We distilled down to Creative Market products that could only be opened in Photoshop, and went beyond PS-only tools such as Actions and Brushes to include other cross-app resources such as Fonts, Shapes, and Templates.
- We included Collections to allow users access the collecting they may have done on the desktop site, so that they can access, purchase, and auto-install them in Photoshop when their ready. We’re looking at improvements to this feature in the near future, so stay tuned!
- Finally, we rolled in Free Goods of the Week on the extension at the last minute as a way for users to test the download and auto-install beauty of the extension, and have 2-3 fun free tools to play with each week.
Thanks for reading! Now, go grab the Extension and try it out!
Also, if you’re a developer who’d love to integrate Creative Market content and in-app purchasing into your own website or app, request an API Key today!
