Upload
samir-dash
View
289
Download
0
Embed Size (px)
Citation preview
Currently this concept is part of a personal experiment by Samir Dash
7 July 2016
Cloud based “Design Style Guide Document” Automation
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?
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
Completely Cloud based no software to installNot restricted to Adobe software solutioncan support non adobe softwareMinimal user intervention is workflowdesign automation is possibleQuick 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 supporthelps in global team Supports Agile SDLCQuick 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?
Overviewof 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.
Feature #1Complete 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,
Feature #2Complete 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
Feature #4Absolute positioning details
• Provides absolute position of the objects and draws the red lines.
Feature #5Relative 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.
Feature #6Multi-language support
• Style guide can be generated in multiple languages like Korean,
Hindi, German, Spanish, Chinese, Arabic etc.
*NOT IMPLEMENTED IN POC
Feature #7Assets/Design 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
Feature #8Optional 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
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!