What is it?

- drag and drop HTML page builder

- customizable with project-specific code

- rearrange sections by dragging and dropping

- rapidly produce a full page of

- edit individual components at the code level

- export full page of HTML code or code from individual components

Why was it created?

- large project with 100's of screens

- complex pages with 15 - 20 sections

- many sections were reused on different pages

- delivery to dev was cumbersome and inefficient

Why was it created? pt2

- dev requested that we send HTML pages for every designed screen which is highly inefficient (see Sketch)

- front-end and back-end teams need a quick and easy way to access UI code and elements

- view SWIM project homepage and static UI Kit

Process from Prototype to UI Kit

1. prototyping is done as usual
2. flat UI design (Sketch)
3. built out in HTML
4. UI code is manually added as needed

Demo

Side Note...

- HTML5 presenter (flexible alternative to PPT)

- can be used for one-on-one meetings, large presentations or to simply organize and communicate ideas

- export to PDF

- send link to a specific slide

- themes and markdown support

- speaker notes with controls