Uses meteor.js. YouTube video of a plugin in development. Sketch/Steel.
Category: Prototype
Sketch Tutorial: Colorful Switch
Good beginner tutorial for Sketch 3.
Framer Generator
Import web pages into Sketch
Sometimes you need to tweak or slightly redesign an existing web page without original assets. Some common ways to do this would be to recreate a page from scratch, tweak it in a web inspector, or in the worst case make a screenshot and mess with bitmap (if you enjoy pain). Another hacky way to do that is to actually convert the web page to a vector graphic. Here is how I do it:
1. Convert page to SVG
Option one: Use http://derailer.org/paparazzi/ like so https://www.youtube.com/watch?v=9cgHQyXm4_Y to import a page into sketch. If it doesn’t work well try option two.Option two: Go to http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx and insert the desired URL of a web page and the screen size.
Note: Sometimes you want to access a page behind a login, or an offline document. You can use this chrome extension http://cl.ly/VRdx to save a webpage as a single document and feed its internal code to hiqpdf converter.
Turn Marvel Prototypes Into iOS And Android Apps In Less Than 10 Minutes Using Appcelerator
For Marvel Pro users only. Also run locally.
About two months ago we launched a feature for Pro users that allowed them to download their prototype as a zip file. The zip file contains the HTML, CSS and JS source files that Marvel uses to build your prototype.
This allows you to host, alter, mix up and play with your prototype on your local machine or server. It’s also really useful if you happen to be presenting and you’re not sure if you’ll land yourself in a situation that has a sketchy internet connection.
There is one other advantage to our downloadable prototype in that it’s fully compatible with HTML based app building platforms like Titanium, Phonegap, Cordova. The following tutorial video gives you an overview on how to run the integration with Titanium.
Prototyping, testing, code-generating links
The Future of Javascript Animation with Famo.us
After much anticipation, hype and controversy, Famo.us is finally being released today for limited public consumption. When I first saw the Famo.us webpage in late 2012, I was intrigued by what I thought was impossible to do on the web. Suspending disbelief for a moment, I began to wonder what code would look like if the animation magic I was seeing were suddenly possible to write in JavaScript.
Ultimately, developing in Famo.us is straightforward; however the concepts do differ from standard web development. In this primer I’m going to go over why Famo.us is different, the basics of writing Famo.us apps, and a list of resources to help you become a guru.
These days, web browsers apply hardware acceleration to certain CSS properties. When rendering a typical webpage, you can gain the benefits of this acceleration if you trigger CSS based animations. The browser still has to work hard to recompute the layout of your page from a change to the DOM. In practice this means that if your app is making changes to the DOM that require the browser to re-layout your page, you’ll lose hardware acceleration and generally see inconsistent and slow performance.
Famo.us is built around a neat idea: by directly using the CSS matrix3d transform in combination with the window.requestAnimationFrame function, you can describe the complete layout and animation of your app in a way that’s hardware accelerated with consistent performance.
Surfaces
The basic building blocks of a Famo.us application are Surfaces. Surfaces are simply divs that contain HTML. They make up your app at the most granular level and often do not contain sophisticated layout or content that you want to animate within the surface. A typical app is built out of many surfaces containing mostly text or images and targeted with basic visual CSS.
The Scene Graph contains your app’s surfaces along with Transforms. Transforms are used to position surfaces and thereby layout the UI of your app. They are also used to describe animation.
Using Wireframes or Prototypes to Elicit, Analyze, and Validate Software Requirements
Within the business analysis community, the debate still reigns about whether how the application will look and how the screens will be laid out is technically part of requirements or design. This debate centers around the wrong question.
The right question is “When is the most effective time to introduce visual prototypes into your requirements process?”. My answer: As soon as it makes sense to do so.
Another good question to consider is “What requirements do a prototype or wireframe represent?” My answer: It depends. It depends on where you are at from a requirements process perspective (eliciting, validating, analyzing, or a bit of each), what types of requirements management practices you have in place, and what level of user interface expertise is available across members of the team.