Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Currently this concept is part of a personal experiment by Samir Dash
7 July 2016
Cloud based “Design Style Guide Document...
is a cloud based
100% automated visual design style guide creator
that allows to come up with very detailed
style-guide an...
Tedious process
Lots of manual work
no creativity – draftsman-ship work is not fun for designer.
Time & effort consuming a...
Completely Cloud based
no software to install
Not restricted to Adobe software solution
can support non adobe software
Min...
Overview
of Features
Localization:
Korean,
Hindi,
Spanish,
French,
Chinese,
Arabic etc.
Detailed
Report:
Font, Shape,
Colo...
Feature #1
Complete
details of the
objects
• Supports text/font, shape, image objects
• Resolution dependent (Screen Pixel...
Feature #2
Complete
details of
color,
shapes,
images &
font
• Supports text/font, shape, image objects
• Font formatting i...
Feature #3
Complete
details of the
objects
• Grid analysis report for shapes, images & text
Feature #4
Absolute
positioning
details
• Provides absolute position of the objects and draws the red lines.
Feature #5
Relative
positioning
details
• Provides relative position of the objects and draws the red lines.
It automatica...
Feature #6
Multi-
language
support
• Style guide can be generated in multiple languages like Korean,
Hindi, German, Spanis...
Feature #7
Assets/Desig
n Element
Export as
CSS, Images
etc.*NOT IMPLEMENTED IN POC
• Associated assets can be exported au...
Feature #8
Optional
Interactive UI
allows user
to point and
inspect
• Additionally Specstra provides an interactive UI for...
is in early stage POC
The current core engine of the POC that crunches hundreds of MBs of design
files to generate the sty...
Thank You!
Upcoming SlideShare
Loading in …5
×

Specstra 2.0 : Cloud Based UI Design Process Automation

348 views

Published on

Specstra is a cloud based 100% automated visual design style guide creator that allows to come up with very detailed style-guide and design-specs document based on uploaded mock-up by the user.
The user can upload  Adobe Photoshop (  PSD), Adobe Illustrator (.AI), or PDF formatted exported from any design tool (Corel draw, Paint etc.) and within minutes Specstra can generate style guide which other wise would have taken the user days to complete and that with prone to error.

Published in: Design
  • Be the first to comment

Specstra 2.0 : Cloud Based UI Design Process Automation

  1. 1. Currently this concept is part of a personal experiment by Samir Dash 7 July 2016 Cloud based “Design Style Guide Document” Automation
  2. 2. is a cloud based 100% automated visual design style guide creator that allows to come up with very detailed style-guide and design-specs document based on uploaded mock-up by the user. The user can upload Adobe Photoshop ( PSD), Adobe Illustrator (.AI), or PDF formatted exported from any design tool (Corel draw, Paint etc.) and within minutes Specstra can generate style guide which other wise would have taken the user days to complete and that with prone to error. What is Specstra?
  3. 3. Tedious process Lots of manual work no creativity – draftsman-ship work is not fun for designer. Time & effort consuming activity Not scalable there is limit to how much a single designer can do Comes with cost Creative guys are paid to do these non-creative tings – however charges remain the same. Threat to agile projects last moment changes in design can impact the software delivery Pain-points of manual approach of style-guide or a specs document creation
  4. 4. Completely Cloud based no software to install Not restricted to Adobe software solution can support non adobe software Minimal user intervention is workflow design automation is possible Quick to Delivery Reduces the designer time to delivery by 99% or more. Saves $$$$ Saves money by 50% or more. Supports creativity Designer can save more time for creative stuffs and is saved from draftsman-ship. Multi-language support helps in global team Supports Agile SDLC Quick iterations and design changes will not delay the time to development as style guide can be ready in a few minutes. One click User Experience One click GUI guide makes the workflow super easy. Automatically handles multiple device resolutions and screen densities. Scalable for any volume of works. No need to pay to reserve people for the work . Why Specstra?
  5. 5. Overview of Features Localization: Korean, Hindi, Spanish, French, Chinese, Arabic etc. Detailed Report: Font, Shape, Color, Grid, Absolute, Relative positioning. In every iteration the report is complete in all respect. Customized report builder: Editor to add and remove details, renaming etc. Multi Design file support: Outputs from Photoshop, Illustrator, Corel Draw, In- Design, Gem to be supported. Super easy to use dashboard: Dashboard that is easy to use and aligns with the design workflow. 5-10 minutes delivery : All reports will be generated in 5-10 minutes of upload On demand premises hosting: For confidentiality the customer can order on premises hosting on- demand.
  6. 6. Feature #1 Complete details of the objects • Supports text/font, shape, image objects • Resolution dependent (Screen Pixel) units • Resolution independent (Point) units (Auto conversion based on target pixel density of the device ) – example iOS Retina, Non-Retina, Android (LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI etc. ), PC Screen standard web resolution etc. • Font formatting information – size , family, style, color,
  7. 7. Feature #2 Complete details of color, shapes, images & font • Supports text/font, shape, image objects • Font formatting information – size , family, style, color, • Web safe / Non-web safe color analysis
  8. 8. Feature #3 Complete details of the objects • Grid analysis report for shapes, images & text
  9. 9. Feature #4 Absolute positioning details • Provides absolute position of the objects and draws the red lines.
  10. 10. Feature #5 Relative positioning details • Provides relative position of the objects and draws the red lines. It automatically detects the enveloping objects and calculates the relative distance etc.
  11. 11. Feature #6 Multi- language support • Style guide can be generated in multiple languages like Korean, Hindi, German, Spanish, Chinese, Arabic etc. *NOT IMPLEMENTED IN POC
  12. 12. Feature #7 Assets/Desig n Element Export as CSS, Images etc.*NOT IMPLEMENTED IN POC • Associated assets can be exported automatically • Raster as well as resolution independent assets like vectors • CSS styles exported for font & shape objects
  13. 13. Feature #8 Optional Interactive UI allows user to point and inspect • Additionally Specstra provides an interactive UI for the user to select the design element in runtime and get the details. *NOT IMPLEMENTED IN POC
  14. 14. is in early stage POC The current core engine of the POC that crunches hundreds of MBs of design files to generate the style guide is in a very early prototype stage. The POC uses PHP, MySQL, Shell-Script, Python, Ghost script and some open- source libraries. Also it implements a assembly line architecture to reliably work on few GBs of design files without crashing the server. Attached is a PDF formatted style guide generated from the current POC POC the proof!
  15. 15. Thank You!

×