Thank you all for making this a successful Kickstarter project!

Our Corporate Sponsors:

Praise...

@julpi - "Amazing! Pixate will allow [me] to design iOS apps with stylesheets!"

@treyheath - "Awesome. Why is this just now being made."

@jiwostudio - "Style iOS UI with CSS? count me in!"

@jmikewatson - "Designers! I absolutely wish this existed now! Kickstart these folks"

@pache71 - "DUDE WE NEED THIS!!!!"

Introduction

At Pixate we are enabling designers and developers to create beautiful mobile apps quickly and easily. Pixate will forever change the way you create your applications. We're confident that once you use Pixate for your mobile apps, you will NEVER want to build apps any other way.

As mobile apps become more sophisticated, one of the key differentiating factors of successful apps is their design. A good design improves the user's experience, makes your app more compelling, and increases the overall positive perception of your product. However, getting a beautiful design into your application is not as easy as it should be.

The Problem

Current workflows require a large amount of manual labor and, due to their iterative nature, are oftentimes repeated. Designs are created as raster images, have to be sliced, exported, and saved in multiple resolutions. Considering that something as simple as a button has multiple visual states, this process has to be repeated numerous times just for a single UI element. And even after these processes have been executed, it is still challenging to accurately recreate an original design with code. If a change is required, this entire process has to be repeated. Pixate solves this problem.

The Solution

Pixate is solving these problems through a suite of desktop and mobile technologies. Much of the tedious low-level design translation and coding will be abstracted so that a designer can accurately describe their design with a familiar CSS styling language. The output created by the designer can be consumed directly by the developer using the Pixate Engine. And, if minor tweaks need to be made, these can be done by the developer without having to involve the designer and thus avoiding the repetitive slice and export process.

The Pixate Engine

The Pixate Engine consists of two core technologies: a 2D graphics engine and a CSS styling engine.

The 2D graphics engine facilitates the rendering of scalable, resolution-independent vector graphics and a number of popular raster effects which will be modeled after Photoshop™ layer effects and compositing. The graphics engine, referred to as PXStyleKit, uses a rendering model similar to SVG. We are not creating an SVG implementation, but rather grabbing the most useful and most requested aspects of SVG that are needed for a good design.

The CSS styling engine enables the customization of your application's appearance, from one component to the complete UI. We chose to base our styling language on CSS because of it's simplicity, power, and because it is familiar to a large number of web designers already.

Our CSS implementation, called iCSS, incorporates the best of CSS3. We'll have selectors, new color functions, media queries, etc., with some extensions to support unique aspects of mobile design not available on the web. Anyone familiar with CSS will feel right at home with iCSS.

Below is an example of early cut of how we envision iCSS could be used to style a native app.

One of the distinct advantages of styling native apps with iCSS is that it allows for greater creativity, flexibility, and reuse of designs. For example, multiple designs can be tested against a single application, quickly and easily. The entire look and feel of a running application can be changed dynamically. iCSS empowers designers to make design changes without involving code.

How Pixate Works

The Pixate Engine styles native controls using the standard iOS bitmap approach. Bitmaps allow your controls to take advantage of the speed offered by the GPU. However, in contrast to today's workflows, the Pixate Engine renders and caches content to bitmaps dynamically as needed at runtime, giving you the ultimate in flexibility [and performance] in your designs.

The Pixate Visualizer

The Pixate Visualizer is a CSS editor with real-time preview of your design, both on the desktop and on your mobile device. The Visualizer consists of a mobile editor and a desktop editor. The desktop application can use your mobile device for live previews of your design during development.

What about Android?

Our plan is to support the same feature set in Android as we're going to support in iOS. This will happen after Pixate 1.0 for iOS ships. We are already prototyping Android support internally, so we're really excited to accelerate our iOS development through this Kickstarter campaign so we can quickly jump onto the Android version.

What's the Money For?

Building Pixate requires a lot of engineering effort. We've already spent a bunch of time getting to this prototype phase and we need your help to see it to completion. We'll be using the money to get to a minimum viable product that we can ship before the end of the year. We'll start with the iOS engine first, then the Visualizer then move on to Android. The more we raise, the more we can accelerate the product release schedule.

Thank you!