Prototyp.it

Daily dose of protips on how to create neat web and mobile prototypes using modern toolset. 

[prototajpit-blog]

Daily sources of inspiration for UX/UI designers

Most of us search for inspiration on a daily basis. We get a decent dose of information everyday, sometimes we are even overwhelmed by the amount of news resources. I would like to share with you my stack of inspirational resources about user experience, web design and web/mobile development. I made myself a habit to scan through those everyday.

MaterialUp @materialup

It is probably the best place to look for material design inspirations. MaterialUp also came up with MaterialUp market, where you can buy or sell some nicely crafted designs.

HeyDesigner @heydesigner

They send high quality curated articles to designers and front-end developers every Sunday. What is quite awesome are channels with well thought out categorisation.

Treehouse video blog @treehouse

Weekly dose of informations about web development and design. If you want to be up to date with all popular frameworks, plugins and web tools, you should definitely follow them.

Medium @medium

Medium needs no introduction. If so, it is the source of high quality stories on numerous topics, including user experience and web design.

Sketchapp tv @sketchappTV

Feed of freebies for sketch lovers. Community is offering a new research each day.  If you are interested in improving sketch skills, you should definitely follow this source.

Design review - podcast

The Design Review Podcast is a weekly podcast about products and their UX. Each week review a product and analyze the user experience design to understand how they work and take away insights from how they're made.

Product hunt  @producthunt

Product hunt surfaces the best new products, every day. It is a place for product-loving enthusiasts. If you are interested in product development, and you wish to be up to date on startups, it is a place for you.

InVisionapp blog @InVisionApp

A lot of interesting articles especially for beginners in User Experience. There is a lot of articles, with straightforward and universal tips how to start prototyping.

Codepen.io @codepen.io

CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing. If you would like to improve your front-end design skills this is a place for you.

LukeWroblewski @lukew

LukeW is an internationally recognized digital product leader who writes a lot about technology and mobile user experience. If you are interested in numbers and analysis behind  mobile UX, spend some time reading his articles.   

What is your stack of daily inspirations?

[prototajpit-blog]

How to prototype in the browser with yeoman

Howdy prototypers! Browser prototyping is a concept of creating prototypes within the users’ native environment. With this blogpost I would like to show how to run and setup an initial environment for browser prototyping.

BROWSER PROTOTYPING #1: SETTING UP ENVIRONMENT

Here and there, sometimes we hear that UX designers should also code, prototype and design using modern web tools. It is important to remember that we are building systems for the web, and as such, we should keep our design deliverables within the browser. So if you are tired of creating non-interactive prototypes, this blogpost is for you.

CONSOLE

First of all to start creating prototypes in browser, you need to make friend with the console (terminal in Mac or cmd in Windows). Commands are executed from the console, you can see there also application errors and other useful informations. In this tutorial you can  see how to start working with the console.

SUBLIME

Sublime is a popular code editor. It has all the features necessary to start, and is not as cluttered as many other coding environments. It’s easy, straightforward and free (to some extent).

INSTALL NPM AND NODE.JS

You will need N**pm, **which is a package manager, and Node.js.

If you’re using Mac or Windows, the best way to install Node.js is to use one of the installers fromnodejs.org. Node.js comes with Npm preinstalled, so you should have a version of npm after installing node.js. To check if  you have installed it properly, just write in a console:

npm - v

node - v

INSTALL BOWER

Bower is awesome!

This is yet another package manager, but  this one comes with all the popular frameworks, like bootstrap or material design. With this tool you can easily manage frameworks and UI libraries in your prototype. To install Bower just run in your console:

sudo npm install -g bower

INSTALL GRUNT

Grunt is a task-based tool that helps in running repetitive tasks. For the purpose of prototyping we don’t need to elaborate on this tool too much.

Although it is  a very important for front-end developers optimizing codes for production purposes, here we will only use it to start, build and publish the prototype. To install grunt just run it in a console.

sudo npm install -g grunt

INSTALL HEROKU TOOLBELT

Heroku is a cloud based application that will help you bring prototypes online. You don’t need to bother with any devops stuff like domains, servers or other.

Publishing on Heroku is super duper easy, as you will see later on. Just make sure you have heroku toolbelt installed on your device. Confirm that you have an account on heroku.com.

INSTALL YEOMAN

Alright, finally time to introduce Yeoman.

It is a scaffolding tool for modern webapps, which will help you to kickstart a new prototype from generators. A generator is basically a plugin that can be run with the “yo” command to scaffold complete projects or useful parts. You can browse generators here. To install Yeoman just run it in a console:

sudo npm install -g yo

SCAFFOLDING PROTOTYPE

Now you have all the necessary ‘ingredients’ installed. From now on you can create new projects and start prototyping in browser. To do this, make sure you are in the path of workspace or in some place where you store all your projects, and run in your console:

npm install -g generator-angular-fullstack

This will install one of the most popular generators available on Yeoman platform made by  DaftMonk. This generator is highly customizable, based on angularjs, with both server and client sides. You can create a simple HTML prototype or a fancy prototype with logic, data, API and complex behaviors.

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo angular-fullstack, optionally passing an app name:

yo angular-fullstack [app-name]

Follow the instruction in a terminal.

And to run your app on a localhost, just say:

grunt serve

This moment, if you have all stuff installed, application should open within a browser.

PUBLISHING APP

Publishing your app on Heroku is also super easy. You just say:

yo angular-fullstack:heroku

If you succeed (or not) with scaffolding your prototype write tweet me on @arekjaneczko

Enjoy browser prototyping!

[prototajpit-blog]

10 tips for mobile prototyping on pixate

Pixate is a powerful tool for prototyping. Here are my tips for getting started.

Layer assets

The basic building block in Pixate is the “layer”. To each layer you can attach animations or trigger interactions based on non trivial conditions. However, to start using Pixate, you need user interface elements. I use the Sketch app to prepare my UI assets first. If you are a novice in prototyping, start by downloading freebies from http://sketchapp.tv/ or follow @sketchapptv on twitter to get daily updates. Sketch also gives well crafted templates for iOS and material design, so starting with your own UI is super easy. In this article you can read some more tips how to start with Sketch.

Exporting assets from Sketch

Exporting assets from Sketch is straightforward. To do this simply indicate folder where you put all project assets.  Instead of naming a group of layers or for the whole artboard, declare a path for concrete layer. It will save you a lot of trouble with versioning, UI elements updating, exchanging prototype with your team. Every time you change something in Sketch you can simply click export and it will change an asset in a folder instantly.

Download the mobile app

You should encourage all team collaborators, stakeholders to download the app for mobile devices to preview changes. It assures that everybody is on the same page with prototype updates. It is also a great feature to test prototypes remotely, directly in user or customer native environment (on his mobile device).

Duplicate prototype

Prototyping is an iterative process. The main purpose of the prototype is to discover design solutions and gather feedback from people. While prototyping you will do a lot of changes. Every time you receive a feedback do a duplicate of prototype. It doesn’t cost you anything and you will have the whole story behind your work, all ideas in one place.

Preview prototype

To make your workflow with prototype sleek and effective, you need to see constantly details of a prototype on a bigger screen not only on mobile device. Only then you will be sure that each tiny detail works exactly as you designed it. To preview a prototype on a larger screen plugin your mobile device and start capturing screen on QuickTime Player.

Organize layers

Like I mentioned before, layers are building blocks in Pixate. You can attach  animations and trigger interactions to them. It is important to create proper hierarchy and organize structure of layers. It is crucial when prototype is growing. You can create hierarchy by nesting and naming layers. To nest layer just name parent layer and drag child layer to the parent. Remember some of the interactions like “reorder” works only in scope of parent layer.

Reorder layers

My first mistake when starting prototyping with pixate was using a lot of fade animation to create a flow between layers. To create clean routing between main navigation elements (like for instance in navigation drawer) we should use a reorder animation. Make sure your main elements are nested into parent – app layer.

Name interactions

When creating a prototype in Pixate, it is a good practice to name all the interactions, especially when you work with a larger team of UX Designers. Leaving default names for interactions may decrease readability and make it difficult for others to work with your prototype.

Use actions

Lately, Pixate team introduced new amazing feature which is called the ‘Actions’. You can reuse someone else’s code and just run it to scaffold whole app with animations, interactions and layers. After running an ‘Action’ script you can fill it with your assets.

Pixate community

Finally, the Pixate community is growing stronger. Be a part of this community! There is a lot of showcases, know-how tips, and also some feature requests, you can upvote.  Support responds quickly on each request. So if you encountered any problem using this tool you can rest assured somebody will help you.

[prototajpit-blog]

Common skillset for UX Designers!

Howdy protypers!

With this blog post I am asking myself today:

What is the most common skillset for User Experience Professionals? 

What kind of deliverables and value UX Designers should provide working with agile team, what activities produce concrete value both for a team and for a product, what skills are the most desirable from team perspective? Is it more kind of service design methods or still prototyping, dominates. This questions are connected with a core problem, what is the common ux skillset.  

What is the problem?

User Experience domain is quite a fertile, in terms of adding new 'activities', 'tasks', 'methodologies', to scope of UX Design. Now front-end developers also change their titles adding some magical UX Designers to the footer.  Recently i saw two interesting projects organizing UX activities. One gives a straitforward labels for few kinds of user experience activites, describing concrete deliverables for them. And second is kind of checklist. As you can see there is a plenty of tasks, with huge differences in scope, value and effect. 

Everytime when we spread the bounderies of experties, domain is expanding. It means we are learning and discovering some new connections. But it is bad when we don't make clear bounderies, and people with whom user experience professionals works (for instance development team members, product owner’s) are not sure what actually should be the scope of tasks. Also recrutairs don't know what to expect. We event don't know what can we expect from other  ux designers it sounds weird.  

UXsuperbs

To adress this problem i came up with a simple application that collects the votes for each skill. If you will go to:

uxsuperbs.com

You will see the list of skills, from which you can choose those activities/skills you do in daily basis and after there will be a list with numbers indicating how many people choose this concrete skill.

Together we can shed more light on what are the common skills for user experience designers.

If you have any suggest how to improve this app just tweet it to me: @arekjaneczko

[prototajpit-blog]

Pixate round #4 - Navigation drawer with material design UI

Howdy prototypers! Today we will try prototype one of basic patterns from Android which is called Navigation Drawer. We will use material design UI done in sketch.  The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options.

Alright, our navigation drawer will look like this on inbox app:

Our pixated version looks and behaves very similar:

Problem

So the problem is how to display and dismiss navigation drawer after tapping hamburger button and after 'swiping' from the left corner of device screen, exactly like you have on native android device.

Solution

As far as showing layer based on tap interaction is straightforward, the 'swipe' must be done by 'drag' interaction with some additional hacks.

Pixate prototype can be previewd here: pixt.io/p3735083d9792

1. First you can download UI to play with.

2. Add assets to the project

3. Create a structure for your prototype, which will consist of app node, and drawer node.

4. Then add layer for hamburger tap,and  assign tap interaction to it. We would like to have a ripple effect for our tap interaction - yepp it is material design so animation has a meaning, it is important to simulate this. That is way, i export assets from sketch, separate layers for hamburger icon, and hamburger with a ripple effect and animate this after tap interaction.

5. To make ripple effect working you need to add 'Fade' interactions for - screen loading, taping hamburger icons and dismissing drawer. Like for instance for tap interaction you fade this on 100%, and for dismissal on 0%:

6. Alright, we need to fill out drawer node, with assets. That is why, we add account switcher with photo. This layer will be fixed.

7. Then we must add a navigation items. As you can see asset is higher than height of drawer layer, that is why we need to add a scroll interaction. To do this we need to create a node ScrollableContent, and put our asset into this node.8. You will need layers for tapping hamburger button and swiping (displaying and dissmisng drawer).

9. Our prototype structure is almoste ready. We need a layer for dissmising the drawer, both for tap and swipe interaction.

10. Now we can show and dismiss drawer adding 'Move' animation to drawer layer, based on 'Tap' interaction.

11. To hide a drawer you just need to move to left about -320 points.

12. To make a swipe interaction available, you need to create layer a position it on the left border of a screen, adding 'Drag' interaction and set values on:

Adding reference edge, we freeze layer, in the way it won't move after drag.

Good luck with your prototypes!

[prototajpit-blog]

Rapid prototyping - learning process

Howdy prototypers! Today i would like to shed more light on my attitude towards work. You can call it rapid prototyping, and as far as I don’t like buzzwords, this concept is based on my experience from being a psychologist researcher, user experience researcher, and designer (prototyping guy) working as an agile team member.

It is actually a very simple concept - rapid prototyping is a learning process where every piece of design is an assumption which should be verified in order to make optimal decision. Process is fast, iterative, collaborative and feedback driven.

Mindset of UX/UI designer is kind like of ‘scientists’, who has bunch of certain hypotheses about people, needs, pains, behaviours, problems etc. The prototype is a model, simulation of your hypothesis - if it fits to the test users - it should also fit for others (with some level of probability, of course).

Why is it important?

This concept greatly differs from graphic or visual design processes  which focus mainly on aesthetics. With learning curve in mind you focus more on how ‘idea’ suits users attitudes. The difference is also in a way of making design decisions. If your design is hypothesis driven, your decisions are more conscious - let’s just say it is more based on ‘facts’ rather than ‘opinions’ :)

Conscious decision helps you build products and deliver projects that make an impact, not just ship software. Systematic learning process prevents from getting lost while building products and by clearly communicating and testing assumptions it is helping development teams align their work with overall personas and business objectives.

It is bloody difficult to achieve systematic learning process. UX designers are not lonely island, we work in collaborative environment where ideas are collapsing, iterating in at high rate.  In almost every situation there is a lot of decision makers, many obstacles to maintain overcome even in the simpliest of visions.

That is why we need framework which will helps us shape and test decisions/hypotheses. One of very interesting frameworks for keeping high level goals and hypotheses upfront in the whole development cycle is Impact Mapping, which together with InVision tool for design storytelling, is the promise of a better tomorrow.

In the next blog post I will describe in more details how we can draw impact map which will help us drive better prototypes. Meanwhile …

[prototajpit-blog]

Pixate round #3 - Intro for i'OS application

Howdy prototypers! Today I would like to show how you can create a nice animated "intro" for your pixate prototype. There is a lot of UX/UI discussions about doing such'an intros. Main argument against is we should provide content as quick as it is possible, but there are some cases where this kind of interaction is desirable, especially when we want to learn users what are the main features of our application.

Alright, our intro will look like this:

Problem:

So the problem here is how to create an intro slideshow with animated image background, on our pixate prototype. 

Solution:

We can use 'drag' interaction to allow user sliding the pages with 'reorder' animation to show next slide. To create an slowly moving images effect, we use 'move' animation  with spring easing curve. 

Pixate prototype can be previewd here: pixt.io/pd97a36ea3a2a 

Let's do it in a just a few steps: 

1. As always we need to have some UI elements. You can download UI used in tutorial here: bit.ly/UIpixate3

2. We must add our assets to the pixate project.

3. In pixate app we must create and app structure with 5 layers, each for a corresponding slide, and a layers for an assets. 

4. Next we must add some 'anchor point'. This is tweak to have an reference point for reordering layers. 

5. For each slide we must also add an layer which we will use to swipe between layers and position them into right bottom of container. (in my prototype i called this NextSlide with the number)

5. Now we should also add assets (body and images) to each slide. Body here is the layer which will be above image, and it is consisted of logotyp, slide tagline and two buttons. (preview assets in sketch).

Layers structure should look like this:

5. When we have a nice structured layers in prototype we can revive it adding animations and interactions. First we add 'Drag' interaction to each layer user will swipe. The 'drag' interaction should have a reference edge for left horizontal view, set on Min position - 286pt to Max position - 370pt. This action should be added to each 'NexSlide' layer. 

6. Then we must add a 'reorder layers' animation for each slide (master layer) and 'drag' for layer user will use to slide. With step 5 and 6 we will have finaly an slide show, after user will swipe an right corner of app it will reorder next layer. 

7. Now we can create an effect of slowly moving image. On each image you should add a 'Move' animation based on particular slide, triggered after drag release, with duration to final value. To have a such a delight effect of slow motion, you should use 'Easing Curve' - spring, with friction 10 and tension 1. 

You can preview some of the values on this tutorial movie. Good luck with your prototypes!

[prototajpit-blog]

Pixate round #2 @spotify artist view - pixat'ed

Howdy prototypers! One of the approach to learn prototyping is to copy and/or tweak some of well crafted designs.  Today I would like to show you how to pixate neat microinteraction on the artist view from spotify iOS application. 

I will use @sketch to replicate the spotify UI, and @pixate to prototype microinteraction. As you can see on the movies below, despite some minor differences in fonts, the effect is almoste identical. 

Spotify version:

Pixated version:

Pixated prototype can be previewd here: pixt.io/p62bc90251317

Few steps to do it:

1. First of all we need UI elements - Some UI files and sketch project to play with.

2. Create a layer with background blured, and without background blure effect (you can download it from sourcefiles below, but to shape a skill you could consider to replicate this by yourself)

3. Then you should export all your UI elements to pixate. 

4. In pixate create a container layer 'App' and add scroll interaction.

5. To 'App' layer add listing layer and background layer with blure effect

6. Then outside of a 'App' layer add a background layer without a blure effect

7. Also you need a standard iOS compontent which in my pixate project is called 'Header'. 

8. To make this microinteraction works, you need to add a 'Fade' animation, to 'Background with blure' layer and set it to - based on 'App - scroll position' then animates continuously with rate (rate 0,03). Also we need to fade this layer back on 100%, that is way we add a second animation. This will create an effect of fading while scrolling, and showing the layer without blure effect. 

9. To resize a picture without blure effect, add an animation 'Scale' and set it also for scrolling position with rate -0.005. Negative value will casue enlarging while scrolling down. We also want to set picture size to default after user ends scrolling. That is way we add a second animation and set it - 'based on scroll end'. 

You can see all interactions and values in the movie below. Good luck with your prototypes! 

[prototajpit-blog]

Pixate round #1 - Moving layers based on scroll position

Howdy prototypers! As a UX/UI designers sometimes we need to show or move particular ‘layer’ based on position of the scroll. Yes it happens, and yes it is difficult, mainly because there is no simple way (without coding) of determining where position of a scroll is, while user is scrolling throught long peace of content, and then trigger some interaction! With Pixate you can do this in just a few minutes! 

Problem:

So the problem is. How to trigger animation based on scroll position.

Solution:

Pixate came up with “Move” animation which can help us in this case.

1. First we need to create a layer where we put our content.

2. Drag Scroll from interactions panel to content layer. Because of this you will be able to scroll throught your content.

3. Next create layer you want to trigger after scroll.

4. Position this layer just under the content layer.

4. Drag Move from animations panel to layer you would like to animate while scrolling.

5. Set move based on Content to Scroll Position

6. You need to set Limit scroll range. This indicates on which scroll position animation will be triggerd. In my case i set it on Begin - 700pt, and End on 793pt. I set it in this way because I wanted to show this down navigation bar immediately after user scroll down, and the end of the scroll range is determined by the height of the element. Those values strictly depends on what you are prototyping.  

7. Last you can set Move rate to -1. It will simulate something like an "fixed to the bottom" effect. You can play around with those options to get better understanding. Good luck with your prototypes!