6 apps to supercharge your prototyping

thumbnailBeing a user centered designer means a significant portion of my responsibility involves prototyping concepts to gain feedback for various designs that solve actual business problems. That means iteratively sketching or wireframing ideas early and often in the design process to generate conversation, and more importantly, to gather feedback from stakeholders.

My goal is to ultimately mesh user goals with business goals for a win-win situation that is mutually beneficial from both perspectives. Therefore, I’m always interested in any tool that enables me to not only be more effficient, but more effective in that process.

If what I’ve said so far begins to resonate, you may be interested in the following prototyping tools that can assist you in walking your stakeholders through your vision on the way to your final product.

iMockups for iPad ($7)

If you have an iPad and prefer working on it, iMockups may be worth a look. Although iMockups is designed exclusively for the iPad, it has a presentation view for sharing your vision with a larger audience by connecting your iPad to a big screen. You can place hotlinks on various elements in the wireframe for actual navigation from one wireframe to the next.

If you’re a Balsamiq Mockups user or work with someone who is, it is convenient that iMockups files can be exported to Balsamiq BMML format. With that said though, collaboration and sharing is limited to emailing either editable project files or PNGs.

6 apps to supercharge your prototyping

 

Flinto ($20.00/month—30 day free trial)

From PNGs to prototypes in 45 seconds is Flinto‘s pitch. That said, however, you still need to create those PNGs outside of Flinto unlike some other prototyping services. Some people might look at that as a negative, but I actually like having the ability to use my favorite graphic editor instead of being confined to using yet another built-in interface that I have to learn how to use before I can do anything. And I don’t think I’m really stepping out on a limb when I say if you’re in the business of creating apps, you probably already have your preferred graphic editor ready to go at a moment’s notice.

Where Flinto really excels is with its integrated Share & Install feature. It allows you to share your prototype link with others who can install the prototype on their homescreen-both iOS and Android-to use like a live working app. You can make it as realistic as you want it to be with recreated iOS and Android transitions, fixed headers and footers, and screens that scroll vertically.

6 apps to supercharge your prototyping

 

Briefs ($199—free trial)

Built for visual thinkers, Briefs provides a way for you describe your mobile app to others. You’ve got an app design in your head, and Briefs is here to help you get that idea into the heads of others, which includes more that just sharing a demo. Briefs for Mac allows you to see your design and even test it live on actual devices while you design. It uses native animations and interactions so you can gain a really strong appreciation for how it will feel. Like other competing services, you can apply hotspots to flat files that link between “pages” but Briefs gives you the flexibility to use either your own assets created outside of the app or you can build pages right in the app using their library of interface elements.

Briefs separates itself from the rest when it comes time to share your work. Using what they call briefs, you package all of your mobile design timelines into one brief that can be viewed on the free Briefscase iOS app by clients or teammates on their own devices. But what’s especially nice is Briefs for Mac streamlines the exporting of your assets to your developer(s), where you can provide a detailed blueprint that represents your app design.

6 apps to supercharge your prototyping

 

POP — Prototyping on Paper (free)

If you prefer the tried and true method of sketching wireframes on actual paper or the proverbial back of a napkin, of which I am personally a fan, then have we got an app for you. You literally sketch out your ideas, take pictures of them with your phone, and then upload them into Prototyping on Paper where you can then begin to stitch together your sketches using hotspots.

Yes it’s basic, but that’s the beauty of it. You don’t need any complicated software, just a pencil and piece of paper. After you’ve created your scenario, you can share and demo your rough prototype on an iPhone, iPad, or even in your web browser.

6 apps to supercharge your prototyping

 

Marvel (free)

Running completely off DropBox, updating your prototype is as simple as updating your design files: Marvel automatically recognizes whenever you save changes to your assets and updates your prototype in the background without the nuisance of re-uploading your files. And unlike much of the competition, Marvel not only supports mobile (iOS and Android), but web and gaming devices as well.

Another standout feature is while you could convert your Photoshop files to images (PNG, JPG, GIF), you don’t need to unless you want to, because Marvel supports PSD files and also claims it will be supporting Sketch soon.

6 apps to supercharge your prototyping

 

InVision (free–$22/month)

Built for agile iterations, the power of InVision is in its collaboration platform, making it a great choice for distributed teams. Obviously, like many other prototyping services and apps, you can create a clickable demo by linking up sketches, wireframes, or high fidelity designs. And such prototypes can be shared and viewed through a browser or a mobile device for an instant touchable demo. I don’t mean to gloss over these facts, but I just want to get to what sets it apart from other prototyping services.

Unless you’re a one-person team designing apps only for yourself, then you’ve probably experienced some of the difficulties collaborating with clients and teammates, keeping track of who said what about what, and organizing all of the comments and recommendations in a digestible format.

Any designer who has been buried in feedback and struggled to organize all of it will appreciate InVision’s design collaboration tool, LiveShare, which enables real time in-browser collaboration with no downloading required. LiveShare is much more than a screen sharing application as evidenced by visible name tag pointers for everyone in the meeting, voice chat, private conference line capabilities, text chat, sketch mode, and even whiteboard mode where everyone has a pencil with which to draw on a shared virtual whiteboard.

6 apps to supercharge your prototyping

 

Of course, there is no one size fits all prototyping tool. Many factors determine what might be right for you or your team.

MightyDeals Exclusive: New Thirsty Soft Font Family – only $9!
6 apps to supercharge your prototyping

Source



Posted in Blog | Comments Off on 6 apps to supercharge your prototyping

Playing with type and images in Photoshop

Playing with type and images in Photoshop

Following our new series of positive thinking wallpapers today we will show you how to create a simple and soothing image using Photoshop. The author we feature today is Confucius and the quote is “Everything has beauty, but not everyone can sees it”. We will also use a stock photo from Unsplash.

So in this little case study/tutorial we will show you how to play to some basic masking, photography and typography to create a beautiful wallpaper. The process won’t take more than 45 minutes but I am sure you will have a lot of fun.

Step 1

Open Photoshop and create a new document. I am using 2880×1800 pixels, the standard retina display Macbook Pro resolution. After that let’s start playing with our positive quote from Confucius. Add the word BEAUTY. The font I am using is called Liberator.

Playing with type and images in Photoshop

Step 2

With the Rectangle Tool, create a rectangle with a 10pt stroke.

Playing with type and images in Photoshop

Step 3

Now add the rest of the text. The first part using the same font and the last using a smaller font. In my case I used Orator St.

Playing with type and images in Photoshop

Step 4

For the background I am using a photo from http://unsplash.com/ – I wanted an image with a cold/calm feel and I found this one with some trees and the fog. I liked the mood of it.

Playing with type and images in Photoshop

Step 7

Change the color of the text from white to a purpleish extracted from the image. I apply a Layer Style>Color Overlay to a folder with the typography elements.

Playing with type and images in Photoshop

Step 8

With the Magic Wand Tool (W) select the tree. Then mask the text and rectangle so you can make some branches going in front and behind the symbol.

Playing with type and images in Photoshop

Step 9

Here’s a zoom version to see how I played with the branches and the typography.

Playing with type and images in Photoshop

Step 10

Go to Layer>New Adjustment Layer>Photo Filter. Use the Warming 85 at 33%.

Playing with type and images in Photoshop

Conclusion

Add your logo and you are good to go. The design is simple and soothing, exactly the mood I wanted to have for this particular design. So as Confucius sad “Everything has beauty, but not everyone can sees it” – maybe that’s why I will probably be the only one who can see the beauty on this wallpaper.

Playing with type and images in Photoshop

Playing with type and images in Photoshop

Posted in Blog | Comments Off on Playing with type and images in Photoshop