Specstra 2 - Cloud Based “Style Guide" Automation
106
4
0
Published:
  • Add to Collection
  • About

    About

    Specstra is a pet prototype that I had started 3 years back to explore a possible solution for design related automation process. The problem o… Read More
    Specstra is a pet prototype that I had started 3 years back to explore a possible solution for design related automation process. The problem of design automation is most of the process blocks are related to creative aspect of the work the designer does. So I started with the blocks that were more aligned to less creative activity so that these blocks can be removed from the creative process flow . One of such area was creation of style guide design from the selected design where the designer has to spend hours to manually define specs. This is a proof-of-concept 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 a Design Style guide with all the specs and the 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. 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 achieve certain goals like creation and export of assets in specific resolution and rendering the red-lines on the fly. The technologies used were: PHP, MySQL, Python, Perl, Ruby, Shell Scripting, HTML5, CSS3, JavaScript, Canvas & Node. Read Less
    Published:
'Automation' is the buzz now in every nook and corner of the tech industry. When we try to resolve productivity issues involved in design domain that is now powering Design driven Software Development Life Cycles (SDLC), we always end-up with a little innovation and that's what the story of 'Specstra', is all about.

YOUR STORY ARTICLE:
(Fig – The printable visual style guide generated within minutes from ‘Specstra’ comes handy for developers to make a pixel perfect UI)
(Fig – It takes a minute for ‘Specstra’ to generate a print-ready 100 pages long style guide for any submitted design)