In 2013, during my time as Chief Designer at Samsung , I observed that many designers were frustrated with the amount of time they spent creating red lines for multiple versions of mobile device UIs. This repetitive, non-creative work detracted from their ability to focus on what truly mattered—innovative and creative design solutions. Despite their passion for creativity, much of their time was spent on tasks that could be automated.

This observation led me to explore how design automation could alleviate these pain points, culminating in my development of Specstra. The tool automated the tedious task of generating detailed style guides, freeing up designers to focus on the creative aspects of their work. At a time when no such automation tools were available, Specstra was revolutionary, saving significant time and allowing designers to dedicate more energy to innovation.

At the time, automation was transforming industries, yet no tools existed to streamline the tedious task of creating style guides in the design process. Through my work on Specstra, I introduced a solution that addressed this gap by automating the creation of detailed, pixel-perfect style guides. During the conceptualization of this tool, I aimed to create the tool that can empower designers by reducing their drafting work completely, allowing them to focus more on creativity, thus optimizing both time and cost for organizations. I created the initial concepts and then showed it my collegues. But then I realized creating a concept is not enough in automation to get real feedback. So started building a barebone working prototype using my the technologies I already knew. Started using PHP and some libraries that could help break the PDFs to make the first working prototype in 2013.

I continued working on this post my Samsung days and during my IBM days, was able to complete the an upgraded version of the PoC. Then I went ahead to test it with some users. Many supportive colleagues at IBM who were more than willing to help me test it. Their collaboration and insights played a crucial role in refining the tool, ensuring it effectively addressed the pain points of manual style guide creation. Specstra allowed designers to upload files from various design software such as Photoshop and Illustrator, generating print-ready style guides in minutes, a task that used to take days. This PoC helped me understand how the automation in design process not only can saved money and can have real impact through improved delivery times but also supported Agile projects by accommodating last-minute changes without derailing timelines. Back in 2016, when no such automation tools were available, Specstra seemed to be a groundbreaking step in aligning creative design with the efficiency of automation.

It was worth to note that during the October 2014, Adobe Extract was launched in as part of Adobe's Creative Cloud updates. It was introduced as a tool to help web designers and developers easily extract design information, such as images, fonts, and CSS, directly from Photoshop files. Where as by that time my PoC of Specstra was able to extract more detailed design information from not only Adobe Photoshop, but from Adobe Illustrator or any exported PDF files generated from MS PPT, Corel Software Suits. Also the PoC of the solution was cloud based, using PHP, MySQL, Python, Perl, Ruby, Shell Scripting, HTML5, CSS3, JavaScript, Canvas & Node.

This was a proof-of-concept /experimental exploratory project I was spending my weekends during 2013-15 to come up with a cloud based tool that allows designers & developers in quickly getting assets, CSS and element details like position, dimension, shapes, raster, text formatting info etc. from the design file/screen mockups easily without them required to have installed Adobe Software suits like Photoshop.

Sample PDF generated:

The major challenges I faced were in reading the Adobe proprietary file formats like PSD to extract separate information on design elements specially the fonts and getting formatting information without using any of the Adobe technology available. Invented many workarounds and implemented them in an assembly line kind of architecture (i.e. chain of responsibility design pattern) to ensure that multiple design file uploads (each one having file sizes from few hundred MBs to 1 GB ) are processed successfully without crashing or over burdening the cloud system. Also the implementation required the necessary image processing tasks to acheive certain goals like creation and export of assets in speific resolution and rendering the red-lines on the fly.

Crafting a Seamless, Multi-Tool Handoff Solution with User-Centric Simplicity:

When designing Specstra, I deeply empathized with the challenges designers faced, as I was working closely with them daily. Understanding their pain points, especially during the design handoff process, was crucial. I spent the initial days focusing on these problems and how difficult it was to streamline the creation of red line documents. One of the major challenges at that time was the fragmented tool landscape—unlike today, where Figma and Sketch dominate, designers used a wide variety of tools to create their mockups. This made the automation process even more complex.

This led me to design Specstra with a user-friendly, cloud-based UI accessible through any browser. I prioritized a simple drag-and-drop interface that could support multiple file formats, regardless of the design tool used to create them. The outcome of the solution was formatted to be easily printable on standard A4-sized paper, ensuring convenience for developers. During user testing, participants appreciated the simplicity and efficiency of this approach, validating the design decisions made for the project.

Learning Advanced Backend Programming - From Backend Fundamentals to Decoding Proprietary File Formats:

By the time I worked on Specstra, I had a solid foundation in backend programming through my earlier experiments with PHP, Classic ASP, and NodeJS. However, this project pushed me out of my comfort zone to dive into low-level executions with these technologies. To process proprietary files like .PSD, .AI, and .PDF, I had to develop workarounds and hacks. This involved writing scripts to read base64 code and identifying string tags and blocks to extract critical information like color, dimensions, and position metadata. Supporting multiple versions of these files, from Photoshop 6 to CS4, was a complex task that required processing each file type based on its release.

Technologies Used:

The technologies used were: PHP, MySQL, Python, Perl, Ruby, Shell Scripting, HTML5, CSS3, JavaScript, Canvas & Node.

https://www.linkedin.com/pulse/specstra-20-my-experiments-cloud-based-design-process-samir-dash/