(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:
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…
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:
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! 😀
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 love to draw on paper/whiteboard. It is difficult to work with physical media if you are going through multiple iterations and changes (owing to fluid nature of this phase), even if you are good at drawing. For the reason of sheer manageability I would rather go for some GUI authoring tool with which I can directly drag+drop shapes, connect them, group them, size them and play around with ideas. Using GUI authoring tool is cleaner and easier if you are not into drawing. There are many such tools available out there with their strengths and weaknesses. Microsoft Office Visio, Sketch Flow, Concept.ly, Balsamiq Mockups, etc are some of the popular mockup creation tools. In this post I will talk about Pencil.
[Side note] If you are into SketchFlow and Windows Phone app development, you will find my project template useful. Check it out here. In following episode on Channel 9 Brian talks about my project at 06:12 mark.
Pencil is an open-source and free GUI authoring tool. With Pencil you can quickly create mockups and walkthroughs. Pencil is flexible to extend. It has pre-built basic shapes and also platform specific shapes (Visio calls them stencils, Pencil calls them shape collections) like Web, iOS, and Android. But you could make a mockup for Windows Phone as well. For this post I quickly created this panorama concept with Nokia Lumia, Windows Phone-
This mockup is created with Sketchy GUI collection. Sketchy is a nice visual representation of ideation phase. In Pencil you have choice to use other standard and straight shapes. Shapes are flexible for customization to your requirement.
Pencil is a nice and simple tool. For small sized apps and quick ideation processes Pencil is very good. Pencil does not automatically generate code. Though it does generate clickable HTML but they are static HTML’s, not controls. Pencil is not good if your ideation process goes large and you have more than 10 screens to mockup in a single document (you will keep multiple screens in one document because you want to link them for click-through). With more than 10 screens in a single document Pencil goes very slow, painfully slow. Also, it seems, Pencil community may not be actively updating it. Last update was in 2012. If these things bother you, look at Sketch Flow or you might want to consider Visio. You can get 90 day trial of Microsoft Office Visio for free here.
For quick and small ideation process I liked Pencil, with its current abilities. I will soon try to do a quick video on basic tasks in Pencil.