Prototype Android Apps in Microsoft SketchFlow

(If you are a C# | XAML dev and prototype cross-platform apps, Xamarin anyone, these template projects can make your job very easy!)

This is third post in the series of SketchFlow template projects for prototyping apps for mobile devices. Last two posts were for Windows Phone & iPhone 6.

Pull this and various platform template SketchFlow projects from GitHub.

This post introduces Android Lollipop template project for SketchFlow. For this first Android template I chose LG G3 phone skeleton as base and added Lollipop home screen for more in-time feel in prototype. As and when I get time I will add more Android devices which can be easily swapped in the prototype in seconds.

For a quick demo of Android Lollipop prototype template project, have a look at this video:

Some screenshots of the project in action:

App Mock Up

Sharp Snippets

You are toying with an idea of creating a new app. If you are not replicating functionality of some other app, you would go through the process of visualizing your idea in the form of app UI. You don’t want to jump into code at this time but want to feel how information in the app will be placed and how it will look inside the screen boundaries. This process is a pre-cursor to UX development or full-fledged wire-frame creation. This process of visualizing the idea takes some time before you are confident about how you want to take your app forward and jump into some sort of coding. Paper+pen or whiteboard+marker are good way to work through fluid ideas and layout information. This is not the phase when you are working on UX or designing UI, but just laying out ideas in rough screens. I personally like drawing and…

View original post 465 more words

iPhone 6 Project For App Prototyping in Microsoft SketchFlow

I have updated Microsoft Blend SketchFlow project for latest iPhone 6 frame. Download projects from GitHub. As earlier the project has built in iPhone 6 frame, animated keyboard image, iPhone 6 home screen, and clickable home button.

My earlier posts have detailed information about other Sketchflow projects and video tutorial of how to use them.

SketchFlow is a powerful prototyping tool. In last post I shared Windows Phone SketchFlow template project. Here I am sharing iPhone skeleton project for SketchFlow. Both these projects are similar in functionality with different phone frames. Android projects are on their way. Read more…

Prototype iPhone Apps in SketchFlow

Edit: Updated for iPhone 6

Download projects from GitHub.

SketchFlow is a powerful prototyping tool. In last post I shared Windows Phone SketchFlow template project. Here I am sharing iPhone skeleton project for SketchFlow. Both these projects are similar in functionality with different phone frames. Android projects are on their way.

Download projects from GitHub.

Excerpt from earlier Post:

Those who have exposure to Visual Studio Blend, WPF/Silverlight developers, SketchFlow comes as natural extension to quickly prototype app ideas. Other prototyping tools are – Pencil, Balsamiq,Axure, SmartDraw, Visio etc. Recently, I wrote an introductory post about open source prototyping tool, Pencil, with example navigation flow screens. In my experience I found SketchFlow to be very efficient in creating high-fidelity prototypes. This project template gives, out-of-the-box, phone frame images, dummy keyboard with interactive states, back button, and home button. The phone frame images included are – Windows Phone emulator stock image, Nokia Lumia 925, Nokia Lumia 1520, and HTC One. Android phones and iPhone are in plans.

For a quick demo, have a look at this video:

Following are some screen shots of the SketchFlow player:

Prototype Windows Phone App in SketchFlow

Download the template project from GitHub.

[This post got a mention on Microsoft Channel 9 This Week]

SketchFlow is one of the best prototyping tools available. SketchFlow is part of Blend which is now an integrated tool with Visual Studio. Those who have exposure to Blend, WPF/Silverlight developers, SketchFlow comes as natural extension to quickly prototype app ideas. Other prototyping tools are – Pencil, Balsamiq,Axure, SmartDraw, Visio etc. Recently, I wrote an introductory post about open source prototyping tool, Pencil, with example navigation flow screens. In my experience I found SketchFlow to be very efficient in creating high-fidelity prototypes. SketchFlow provides free form screens to create any type of prototypes – web site, web app, SPI, desktop app, or smartphone apps. This is powerful. But, with great power comes great boilerplate work :D. I so needed some kind of Windows Phone specific template project in SketchFlow which I could use to quickly draw my pages in and let template take care of generic phone specific look and feel (interactions). I didn’t find one. So I created one. This project template gives, out-of-the-box, phone frame images, dummy keyboard with interactive states, back button, and home button. The phone frame images included are – Windows Phone emulator stock image, Nokia Lumia 925, Nokia Lumia 1520, and HTC One. Android phones and iPhone (available now) are in plans.

Watch this video for a quick go through of the project and also to know how you can swap phone frames in seconds, throughout all prototype screens in the project:

Following are some of the screen shots of the project in action:

And yes, with my other project you can create prototypes for iPhone in Microsoft SketchFlow.

Happy mocking-up! 😀

Optimizing for Lower Cost Devices

It is of utmost importance to consider the technical limitations of low-cost devices when you are designing your application. Sensor, memory, camera, hardware buttons are some of the areas where you need to focus if you wish to see your app running smoothly on all kinds of Windows Phone devices. Following is a four-part series on Windows Phone Developer Blog which is to guide you in detail about how you can avoid the limitations of a low-cost device.

Optimize Startup Time
Be sure to keep startup time fast. The basic guidance here is to defer as much activity as possible until the first frame of your application is rendered. This means minimizing code in App/Page constructors and keeping Launching/OnNavigatedTo activity minimal.
If page initialization will take some time or is dependent on network requests or file I/O, for instance, then show a progress bar to convey activity. Leverage the system tray ProgressIndicator for the best performance. To leverage the system tray ProgressIndicator without affecting page layout, set the system tray Opacity to 0.
Read more here…

Reduce Memory Usage
Per certification requirement 5.2.5, apps should not exceed 90MB of memory usage on 256MB devices. With the introduction of 256MB devices like the Lumia 610, this becomes very relevant.
Use the memory profiler and memory-related API’s to profile your app’s memory usage. A basic rule of thumb is to load only what you need when you need it, and dispose items when they are no longer needed. Instead of preloading all game assets at startup, for instance, load assets for the on-screen experience only and flush those assets when the experience changes. Instead of loading full data sets in lists, load pages of data on demand as the user requests them.
Continue here…

Handle Feature Reductions
To free up RAM for the foreground on 256MB devices, generic background agents (PeriodicTasks/ResourceIntensiveTasks) are disabled.
On today’s devices, users can disable background agents for an app manually via the Settings control panel, and the system can disable background agents for an app if the maximum number of supported background agents is exceeded.
Read more…

Respond to User Input
A responsive UI is a basic expectation that users have of apps. The basic guidance here is to keep as much activity off of the UI thread as possible until absolutely necessary.
To keep page load times and in-app navigation responsive, defer loading activities until the first frame is rendered. The guidance for optimizing startup time of your MainPage (above) applies to optimizing the startup time of subsequent page loads as well. Additionally, leverage the TiltEffect to acknowledge user input. This will make your app look and feel more like the first party experiences as well.
Continue…

Hope you find this aggregated information useful.

Enjoy coding!