tag:webdesign.tutsplus.com,2005:/categories/prototypingEnvato Tuts+ Web Design - Prototyping2017-07-26T14:00:47Ztag:webdesign.tutsplus.com,2005:PostPresenter/cms-29062How to Create an App Prototype Using CSS and JavaScript<p>Animation really is one of the best features to hit CSS in a long time. After all, as we’ve come to realise, motion can enhance user experience and encourage actions where static contexts fall short. In this tutorial we’ll build a prototype for an app using CSS animations and a touch of JavaScript.<br></p><h3>What We’re Creating</h3><p>For this exercise we’ll develop a prototype for an app that lets subscribers follow one another. Initially we’ll load in a list of users with their names below each corresponding avatar. These avatars, when clicked, will trigger a modal containing a “follow” button and additional information pertaining to each individual user.</p>
<iframe src="https://codepen.io/tutsplus/embed/awaYNX/?height=800&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="800" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>For demo purposes we’ll load in 30 users using a free service called <a href="https://randomuser.me/" target="_self">Random User Generator</a>. Their API not only provides random images of users, but it also provides random data such as names, addresses, emails and much more.</p><h2>
<span class="sectionnum">1.</span> Set the Stage</h2><p>
I’ve <a href="https://webdesign.tutsplus.com/articles/13-prototyping-tools-for-web-designers--cms-28254" target="_self">discussed options previously for building prototype concepts</a>, but for this article we’ll construct a prototype with real code. For this task we’ll be using <a href="https://marvelapp.github.io/devices.css/" target="_self">Marvel Devices</a>; an open source library that contains eleven pure CSS mobile devices to showcase prototypes typically made with <a href="https://marvelapp.com/" target="_self">Marvel App</a>.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/29062/image/iphone.jpg"></figure><p>
To get started include <a href="https://github.com/marvelapp/devices.css/blob/master/assets/devices.min.css" target="_self">devices.min.css</a> at the top of your document, go back to the <a href="http://marvelapp.github.io/devices.css/">demo</a> and select the combination you want, then copy and paste the generated HTML into your project.<br></p><h2>
<span class="sectionnum">2.</span> Load the Users</h2><p>With the CSS obtained for our demo’s device (Nexus 5) it’s time to get to work on loading in our application’s user feed.</p><pre class="brush: html noskimlinks noskimwords">&lt;div class="marvel-device nexus5"&gt;
&lt;div class="top-bar"&gt;&lt;/div&gt;
&lt;div class="sleep"&gt;&lt;/div&gt;
&lt;div class="volume"&gt;&lt;/div&gt;
&lt;div class="camera"&gt;&lt;/div&gt;
&lt;div class="screen"&gt;
&lt;h3 class="title"&gt;Results&lt;/h3&gt;
&lt;ul class="users"&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;</pre><p>The users will be loaded as list items and injected into the <code class="inline">.users</code> unordered list. This is the initial foundation, but we need to use JavaScript to communicate with the random user API in order to insert these list items. To make this request we’ll use plain, vanilla JavaScript <a href="http://es6-features.org/" target="_self">ES6</a> style.</p><pre class="brush: javascript noskimlinks noskimwords">let request = new XMLHttpRequest();</pre><p>The <code class="inline">request</code> is the variable that will contain our AJAX request, but it requires a URL to connect with.</p><pre class="brush: javascript noskimlinks noskimwords">request.open('GET', 'https://randomuser.me/api/?results=30', true);</pre><p>The <code class="inline">open</code> method will retrieve the API data from the URL and parameters we set. There are <a href="https://randomuser.me/documentation#results" target="_self">plenty of other parameters to use</a>, but for this demo we’ll just retrieve 30 results. Now that we have our URL in place and the request sent, let’s retrieve that data.</p><pre class="brush: javascript noskimlinks noskimwords">// Utility for DOM selection
function select(s) {
return document.querySelector(s);
}
// Store for referencing
const users = select('.users'),
// AJAX Request
request.onload = function() {
if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
let data = JSON.parse(request.responseText),
l = data.results.length;
for(var i = 0; i &lt; l; i++) {
// data results
console.log(data.results[i]);
}
} else {
alert('We reached our target server, but there was an error');
}
};
request.onerror = function() {
alert('There was a connection error of some sort')
};
// Send Ajax call
request.send();</pre><p>The entire request is now in place. Opening up the console you’ll see all the results of the provided data listed. This is a good start, but we definitely need to do more than just log the output to the console.</p><h2>
<span class="sectionnum">3.</span> Inject User Data</h2><p>For this next part, we’ll inject markup using the data we have available from the random user API.<br></p><pre class="brush: javascript noskimlinks noskimwords">users.insertAdjacentHTML('beforeend', '&lt;li&gt;&lt;img src="'+
data.results[i].picture.medium +'" data-pic="'+
data.results[i].picture.large +'" data-name="'+
data.results[i].name.first + ' ' +
data.results[i].name.last + '" data-email="'+
data.results[i].email +'"&gt;&lt;span class="user-name"&gt;'+
data.results[i].name.first +'&lt;/span&gt;&lt;/li&gt;');</pre><p>The lines of code above will be placed in the loop created prior that was logging data to the console. As mentioned, we have quite a few options with regards to data attached to the user objects, such as first name, email and avatar sizes. The medium image size will be used for initial display, whereas the large size will be used for our modal that is triggered when the thumbnail avatar is clicked. All of these pieces of information will be stored inside data attributes so we can retrieve them as needed.</p><h2>
<span class="sectionnum">4.</span> Detect Avatar Position</h2><p>We are going to build another component for this demo; a modal that’s triggered from the point of execution (i.e. clicking on an avatar). We’ll need our dear friend math to actually determine where the modal will expand from.</p><pre class="brush: javascript noskimlinks noskimwords">var transOriginNames = {
webkitTransformOrigin : 'webkitTransformOrigin',
MozTransformOrigin : 'MozTransformOrigin',
msTransformOrigin : 'msTransformOrigin',
transformOrigin : 'transformOrigin'
};
users.addEventListener('click', function(e) {
let target = e.target,
target_coords = target.getBoundingClientRect();
if(target.nodeName === 'IMG') {
for(var name in transOriginNames) {
modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';
}
}
});</pre><p>To achieve this expansion of the modal from the point of execution we need to make sure our <code class="inline">transform-origin</code> is correct in order to have the modal scale properly. I’m using an <code class="inline">object</code> to hold all our <code class="inline">transform-origin</code> prefixes since we’re using JavaScript to set them and we also need to ensure all bases are covered for browsers that don’t support the standard.</p><p>Take note of the math required to determine the <code class="inline">transform-origin</code> values.</p><pre class="brush: javascript noskimlinks noskimwords">modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';</pre><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/29062/image/click-diagram.png"></figure><p>The diagram above explains visually how the math is being calculated. In order to determine the correct location we use <code class="inline">offsetLeft</code> and <code class="inline">offsetTop</code> plus half the <code class="inline">width</code> and <code class="inline">height</code> respectively to find the exact center of the avatar. <code class="inline">scrollTop</code> is also very important because 30 users will overflow the boundary of the device screen and <code class="inline">offsetTop</code> will need to have this value subtracted to determine the proper distance from the top of the screen. All of the values in the diagram above are provided by our friend <code class="inline">getBoundingClientRect</code>.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/29062/image/bounding-client-rect.jpg"></figure><p>Logging the <code class="inline">target_coords</code> to the console you can see all the dimensions and values we require to make a proper assumption. These values with regards to the <code class="inline">width</code> and <code class="inline">height</code> will always change depending on the avatar’s position within the device screen.</p><h2>
<span class="sectionnum">5.</span> Animate the Modal</h2><p>With the avatar coordinates prepped and ready to receive our click event, it’s time to add the modal motion that will display the user’s profile.</p><pre class="brush: css noskimlinks noskimwords">.modal {
transform: scale(0) translateZ(0);
transition-duration: 320ms;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-property: transform, opacity;
opacity: 0;
}</pre><p>The above code is slimmed down from the live demo to showcase the exact motion properties we’re going to be using. We are initially hiding using <code class="inline">opacity</code> and <code class="inline">scale</code>.</p><p>Now it’s time to define the CSS properties that will handle the active state for the modal’s motion.</p><pre class="brush: css noskimlinks noskimwords">.screen.active .modal {
transform: scale(1) translateZ(0);
opacity: 1;
}</pre><p>Using JavaScript we’ll toggle an <code class="inline">active</code> class on <code class="inline">screen</code>. In the lines above we’re reversing what we set prior. This is how we create the expanding effect of the modal. It’s a very <a href="https://material.io/guidelines/motion/material-motion.html" target="_self">Google Material Design-esque style</a> that helps from disrupting cognitive behavior and quickly responds to user input precisely making the motion responsive. This style also confirms user input by immediately expanding outward from the point of contact.</p><h2>
<span class="sectionnum">6.</span> Give Avatars Motion</h2><p>During load we’ll create a scaling effect making the sequence less static and more responsive. Each avatar will scale in at a different interval than the next and for that we’ll use CSS.</p><pre class="brush: css noskimlinks noskimwords">@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes expand-out {
from { transform: scale(0); }
to { transform: scale(1); }
}
.users li {
opacity: 0;
}
</pre><p>Initially we’ll hide the users and then toggle a <code class="inline">show</code> class once the AJAX request is good to go. I’ve also included our keyframes that will morph our properties into the correct values. We’ll use these keyframes in the following code snippet that sets the motion into play.</p><pre class="brush: css noskimlinks noskimwords">$user-count: 30;
$duration: 200ms;
$stagger_delay: 0.0125s;
$easing: cubic-bezier(.66, .14, .83, .67);
.users.show {
li {
animation-duration: $duration;
animation-name: fade-in;
animation-fill-mode: both;
animation-timing-function: $easing;
opacity: 1;
img {
animation-duration: $duration;
animation-name: expand-out;
animation-fill-mode: both;
animation-timing-function: $easing;
}
@for $i from 1 through $user-count {
&amp;:nth-of-type(#{$i}) {
animation-delay: ($stagger_delay * $i);
img {
animation-delay: ($stagger_delay * $i);
}
}
}
}
}</pre><p>To help with the math I’m using Sass loops and variables to hold our user count that is also tied with our JS results from the random user API call. The loop is the key to the whole puzzle as it will loop over our user count and add the stagger value we defined in a variable.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/29062/image/avatar-animations.gif"></figure><p>Above is our result with the final avatar animation sequence. Remember we’re only using keyframe animations in CSS and using JavaScript to toggle the <code class="inline">show</code> class once the avatars are retrieved from the random user API.</p><h2>Closing Thoughts</h2><p>Make sure to look over the live demo as there are also additional elements that add benefits, such as an animated loader that will display while users are loading and remove itself once avatars are loaded.</p><p>Thanks to Shaw for his insight and <a href="https://dribbble.com/shots/3520202-Foodie-Friends" target="_self">this Dribbble shot</a> used for inspiration. As always leave any comments below for further discussion, and give the demo <a href="https://codepen.io/tutsplus/details/awaYNX/" target="_self">some hearts on CodePen</a> if you want to see more like it!</p>2017-07-26T14:00:47.000Z2017-07-26T14:00:47.000ZDennis Gaebeltag:webdesign.tutsplus.com,2005:PostPresenter/cms-29139Get Rid of Dummy Content by Using lists.design<p>In today’s quick tip I’ll help you make your web designs and mockups as realistic as possible by getting rid of dummy content. Generic dummy text can be really helpful in giving a design “body”, but it often removes an element of context, ultimately making the design weaker. Let’s improve that!</p><h2>Watch Screencast</h2><figure><script src="//fast.wistia.com/assets/external/E-v1.js" async="async"></script><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_z4gv7cj1ed videoFoam=true"> </div></div></div></figure><p>In the past I’ve explained <a href="https://webdesign.tutsplus.com/courses/craft-designing-with-real-world-data" target="_self">how to use the Craft plugin for Sketch</a>, but today we’ll be looking at a service called “Lists”. Lists provides a whole heap of content, organized into categories such as:<br></p><ul>
<li>Business</li>
<li>Communication</li>
<li>Design</li>
<li>Education</li>
<li>Entertainment</li>
<li>Finance</li>
<li>Food</li>
<li>Health</li>
<li>Identity</li>
</ul><p> and many more. Clicking these filters will give you category-specific results:</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/29139/image/filters.png"></figure><p>Explore any results you like, then click once on the chosen item to copy it to your clipboard. That can then be pasted into your design tool of choice.</p><h3>JSON</h3><p>Additionally, you can get hold of the content in JSON form. This is perfect for using JavaScript to parse and populate UI elements dynamically; for example dropdowns with lists of countries. Take a look at the video for more details.</p><h2>Useful Resources</h2><ul>
<li><a href="http://www.lists.design">www.lists.design</a></li>
<li>
<a href="https://webdesign.tutsplus.com/courses/craft-designing-with-real-world-data" target="_self">Craft: Designing With Real-World Data</a><br>
</li>
</ul>2017-07-20T10:14:35.000Z2017-07-20T10:14:35.000ZAdi Purdilatag:webdesign.tutsplus.com,2005:PostPresenter/cms-29155Learn How to Create a Prototype in Atomic<p>Prototyping should be a fast and easy way to gain confidence in your designs. No longer regarded purely as a way to sprinkle motion magic or over-polish designs, prototyping is a communication tool. Whether communicating with stakeholders, design managers or users, a good prototype helps to communicate design decisions and test ideas.</p><h2>Our Prototype</h2><p>In this tutorial we’ll be creating a basic “boarding pass” prototype in Atomic, <a href="https://app.atomic.io/d/gwHvHCHf0RRL">which you can preview here</a>. The prototype begins with a loading state before enabling you to browse your upcoming flights and preview your boarding QR code. To create this prototype we’ll be using interactive components, data, variables and page transitions. Not to worry! I’ll be helping you through each step. </p><p>Here’s a demo of what we’ll create:</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/prototype-demo.gif"></figure><h3>Tutorial Assets</h3><p>There are a few things you’ll need in order to follow along:</p><ol><li><a href="https://app.atomic.io/register">An Atomic account</a>:&nbsp;Get started with a free trial (there’s also a free plan).</li><li><a href="https://app.atomic.io/d/Sc6UFLNqKDOy" target="_self">Design Assets</a>: This is the file in which you’ll find the design assets and create your prototype.</li><li><a href="https://docs.google.com/spreadsheets/d/1LoAi80wP3wJ1YgiERGMj9pg3O0zy5HcbXhmsqc13c0c/edit?usp=sharing">Data Source</a>: A Google Sheet file with the data we’ll be using in our prototype.</li><li><a href="https://itunes.apple.com/us/app/atomic-advanced-web-mobile-prototyping/id1061539997?mt=8">Atomic iOS App</a>:&nbsp;Download the app from the App Store to test your prototype on your phone.</li></ol><figure class="post_image"><img alt="httpsatomicio" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/29155/image/atomic.jpg"><figcaption><a href="https://atomic.io/">atomic.io</a></figcaption></figure><p>If at any time throughout the tutorial you have a question, feel free to reach out to me (<a href="https://twitter.com/femkesvs">@femkesvs</a>), or the Atomic support team (<a href="https://twitter.com/we_are_atomic">@we_are_atomic</a>) on Twitter.</p><p>Let’s go!</p><h2><span class="sectionnum">1.</span> Copy the Assets to Your Account</h2><p>I’ve created a sample file with the assets you’ll be needing to create your prototype. This sample file is complete with the assets we’ll be using, as well as pre-built components.</p><figure><img alt="copygif" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/copy.gif"></figure><p>You can <a href="https://app.atomic.io/d/Sc6UFLNqKDOy">access the assets here</a>. To use the assets you’ll need to copy the prototype into your account. You can do this by clicking <strong>Copy &amp; Edit</strong> in the bottom right and then select a project you’d like to copy it into. I suggest creating a new project for this tutorial.</p><h2><span class="sectionnum">2.</span> Upload the Data to Atomic</h2><p>Before we get started creating our prototype we’ll need to first add the data source to Atomic. I’ve put together a Google Sheet with some basic data that we’ll be using in our prototype. </p><p>You can <a href="https://docs.google.com/spreadsheets/d/1LoAi80wP3wJ1YgiERGMj9pg3O0zy5HcbXhmsqc13c0c/edit?usp=sharing">access the data here</a>. With the data source open, head to <strong>File &gt; Add to My Drive</strong> (you’ll need a Google Account for this).</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/adding-data.gif"></figure><p>Next, with your project open in Atomic, select the <strong>Data</strong> tab. From here click <strong>Import Data</strong>, and locate the data source via search. Once located select the data source. You’ll see Atomic load the data into your project. This data source can now be accessed and used in any prototype within the project.</p><p>We’re ready!</p><h2><span class="sectionnum">3.</span> Creating the Loading State</h2><p>Let’s begin assembling our prototype by creating the loading state. We’ll do this by creating both a custom transition and timed-based page action. </p><p>First, select the loading component from the Assets page to copy (CMD-C and paste (CMD-V) it to the page 1. It will be large, and rather than resizing it, position it into its starting position.</p><p>Then copy the loading element you just placed on page 1, this time pasting it on on page 2. Reposition it into its final state (rotated clockwise 75° so the plane is positioned off the right side of the canvas).</p><figure><img alt="page-action-1gif" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/page-action.gif"></figure><p>To create our transition, hop back to page 1. In the right hand properties panel you’ll see a section named <strong>Page Actions</strong>. Click the plus button and then set the following:</p><ul><li>Make something happen: After a set time</li><li>Wait: 0</li><li>Go to: Page 2</li><li>Motion: Custom transition</li><li>Easing: Ease in-out</li><li>Duration: 2000</li></ul><p>Let’s preview and see our transition in action–you should see the plane glide from left to right over the course of two seconds. Neat!</p><p>To take it further you can also copy and paste the Fly logo to both page 1 and page 2 (beneath the loading component in the pages panel and placed behind). Make sure you follow the same technique of placing it in its start and ending position on each page. You probably have to adjust the order of your layers to make it appear from behind.</p><p>Lastly we’ll need to create an action that takes the user automatically to page 3 from page 2. On page 2 add another timed page action. This time we’ll use the following settings:</p><ul><li>Make something happen: After a set time</li><li>Wait: 1000</li><li>Go to: Home</li><li>Motion: Slide up</li><li>Easing: Ease in-out</li><li>Duration: 300</li></ul><p><strong>Tip</strong>: if you’d like to stagger the timing of the two elements animating you can do this using the <strong>Advanced Motion Timeline</strong>. </p><h2><span class="sectionnum">4.</span> Understanding Components</h2><p>Next, copy the elements needed for page 3 and paste them onto page 3. You’ll need to do a bit of rearranging and adjustments to fit the elements on the page as needed.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/arranging-page.gif"></figure><p>Almost all of the elements needed for this page are components. </p><h3>A Word About Components<br></h3><p>Components in Atomic are like symbols. Any component can be edited and reused throughout a project. Any edits made to a component will be updated in each instance. Components can also be interactive and contain multiple states of a symbol. This makes it really easy to structure your prototype.</p><p>Let’s add some interactivity to the boardingPasses component. To open the component, double-click on the component icon in the layers panel next to the layer name. Once open, you’ll see three pages; one representing each flight. For now these passes are identical, soon we’ll change this. </p><p>We know that the user has three flights and we’d like them to be able to swipe through each one. There’s also a QR code icon that, when interacted with, should bring up their boarding pass code.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/opening-component.gif"></figure><p>If you look in the layers panel you’ll notice each page is an instance of a component called “boardingCard”. Let’s open the boardingCard component now to see how the data has been applied.</p><h2><span class="sectionnum">5.</span> Using the Data</h2><p>The boardingCard component is a component embedded in a component. This allows us to create a boarding card symbol that can be reused while showing different data sets.</p><p>With the boardingCard component open you’ll see two pages; the front and back of the pass. This is where the data is being assigned to the individual text elements.</p><figure class="post_image"><img alt="Text Properties" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/29155/image/still.png"><figcaption>Data inherited from parent</figcaption></figure><p>Select the ABC text and take a look at the <strong>Text properties</strong>. You’ll notice the following:</p><ul><li>Content: Set from data column</li><li>Data: Inherit from parent</li><li>Column: departure-code</li></ul><p>Subsequently if you look at the<a href="https://docs.google.com/a/atomic.io/spreadsheets/d/1LoAi80wP3wJ1YgiERGMj9pg3O0zy5HcbXhmsqc13c0c/edit?usp=drive_web"> Google Sheet</a> where this data is being pulled from, you’ll see a column titled “departure-code”. This means that the text element ABC will display whatever data is shown in the column “departure-code”.</p><p>All dynamic text in this component has been set to <strong>Inherit from parent</strong>. This allows us to link to the data sheet at a group level, and therefore display and sort through the data row by row. We’ll get to this soon.</p><h2><span class="sectionnum">6.</span> Adding a Flip Interaction</h2><p>Next we’ll set up a page-based transition to flip between the pass and QR code. On the front page of the boardingCard component press <strong>H</strong> to bring up the hotspot tool. Then, draw a hotspot over the QR code icon on the front page.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/drawing-hotspot.gif"></figure><p>Hotspots allow you to define interactive areas of your prototype. With your hotspot selected, under the interactions panel set the following:</p><ul><li>Gesture: Click or tap</li><li>Go to: &gt; Next page</li><li> Motion: Flip</li><li>Easing: Ease in-out</li><li>Duration: 300MS</li></ul><p>Then, on the back page, create another hotspot (H) that will take us back to the front page. This time draw it over the <strong>close</strong> icon and set the following:</p><ul><li>Gesture: Click or tap</li><li>Go to: &gt; Previous page</li><li> Motion: Flip</li><li>Easing: Ease in-out</li><li>Duration: 300MS</li></ul><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/preview-flip.gif"></figure><p>Time to test your interaction! In the bottom right corner, press the <strong>Preview</strong> button. Preview mode lets you test your transitions and interact with your prototype via hotspots. Try clicking on the QR card or close icon;&nbsp;the card should flip between the two states. You can close the preview by pressing <strong>X</strong>.</p><p>Having this boarding card as an interactive component allows us to select which data is shown dynamically, without having to create multiple states and interactions.</p><h2><span class="sectionnum">7.</span> Connecting the Data to the Parent</h2><p>To return, click the purple <strong>back</strong> button up at the top left. Now you should be back in the boardingPasses component. In this component we have three passes currently displaying the same data. Let’s update this now. </p><p>Remember how inside the boardingCard component, the data was set to <strong>Inherit from parent</strong>? In this case the parent is the component instance.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/toggle-row.gif"></figure><p>On the flight 1 page select the boardingCard instance. In the <strong>component properties</strong> leave <strong>State</strong> as it is. Under <strong>Data</strong>, select the data source and ensure the <strong>Row</strong> is set to row 1. The instance should now display data from the first row of the data sheet. </p><p>If you toggle the row you’ll notice that the data displayed updates. Let’s keep it on row 1 for now, however on flight 2 and flight 3 set this to show data from row 2 and row 3 respectively.</p><h2><span class="sectionnum">8.</span> Adding Swipe Gestures</h2><p>To enable users to swipe through their boarding passes we’ll need to set up some swipe interactions. </p><p>Create and draw a hotspot (H) on the right-hand side of the flight 1 page (make sure you leave some space at the top for the hotspot over the close icon on the back page of the boardingCard component, and that it doesn’t cover the QR code on the front page). To create the swipe gesture, use the following settings:</p><ul><li>Gesture: Swipe left</li><li>Swipe distance: 200</li><li>Go to: &gt; Next page</li><li> Motion: Push Left</li><li>Easing: Ease in-out</li><li>Duration: 300MS</li></ul><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/swipe.gif"></figure><p>Do the same on the the flight 2 page, and add a second hotspot on the left side of the flight 2 and flight 3 pages set to <strong>Push Right</strong> and <strong>Push Left</strong> instead. Feel free to press <strong>Preview</strong> to test and interact with the component, and adjust your swipe settings accordingly. </p><h2><span class="sectionnum">9.</span> Create a Variable</h2><p>To finish building the prototype we’ll need to create and use a variable. This variable will enable our components to talk to one another while influencing their state. </p><p>The variable we’ll be creating will be used to update the progress dots based on which boarding pass is shown.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/adding-variable.gif"></figure><p>To create a variable, press <strong>V</strong> to open the <strong>Variables Modal</strong>. In here click <strong>Create New Variable</strong> and type “flightDisplayed” into the <strong>Name</strong> field. Leave the default value blank. </p><p>Great, you have your variable set up! Close the variables modal by pressing the <strong>X</strong> or <strong>escape</strong> on your keyboard.</p><h2><span class="sectionnum">10.</span> Using Variables</h2><p>Navigate back to the prototype. If we preview now from the Home page, you should be able to swipe between the cards and also interact with the QR code. </p><p>While we can now swipe through the passes, there are a couple more things to configure to influence the progress dots to update based on the progression of boarding passes.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/setting-variable.gif"></figure><p>To do this, open up the boardingPasses component. On page 1 let’s create the following page action:</p><ul><li>After a set time</li><li>Wait: 0</li><li>Set: flightDisplay (variable)</li><li>To: value...</li><li>Value: 1</li></ul><p>Repeat this on page 2 and 3, ensuring the value is set to 2 or 3 to reflect the page you’re on. </p><p>We’ve effectively told the component boardingPass to update the value of the variable flightDisplayed, depending on the flight (page) displayed. We can now use this value to influence the state of the progress dots.</p><p>Here’s how: head back to the prototype and open the progressDots component. </p><p>You’ll notice three pages (states) named 1, 2 and 3. This naming matches the values being set in the flightDisplayed variable. It’s important that these page names match the values set.</p><figure><img alt="" src="https://tutsplus.github.io/learn-how-to-create-a-prototype-in-atomic/gifs/progress-dots.gif"></figure><p>Head back to the prototype, select the progressDots component, and:</p><ol><li>In the <strong>Component</strong> section in the properties panel, open the <strong>State</strong> dropdown.</li><li>Select the flightDisplayed variable.</li></ol><p>We’ve now connected the progressDots component to the variable flightDisplayed. This means that when the value of the variable changes to a value, the progressDots component will display the page that matches the variable value. </p><p>Try previewing your prototype now, interacting with the boarding passes by swiping and seeing if the progress dots update.</p><p>Lastly, you can delete or move the Assets page to ensure your shared preview opens on the correct starting page. To delete the page, select the hamburger menu on the page thumbnail and click <strong>delete page</strong>.</p><p><strong>Tip</strong>: See if you can figure out how to get the promoCard component to update its state based on the flight displayed. You’ll want to create a new variable called cardDisplayed. </p><h2>Ta-da!</h2><p>There you have it! Your very own Boarding Pass app. If you downloaded the iOS App, try opening the prototype and interacting with it on your iPhone; it should feel just like the real thing.</p><p>Well done for following this tutorial through to the very end. You should now have a thorough understanding of how to create your own prototype in Atomic. If you have existing assets in Sketch you can import them using the <a href="https://atomic.io/features/sketch-plugin/">Atomic Plugin for Sketch</a>, or design natively in Atomic if you wish.</p><p>Questions? Comments? Leave them below or reach out to me on Twitter (<a href="https://twitter.com/femkesvs">@femkesvs</a>). </p>2017-07-18T09:44:06.000Z2017-07-18T09:44:06.000ZFemke van Schoonhoventag:webdesign.tutsplus.com,2005:PostPresenter/cms-28707Storyboarding vs. Prototyping: When to Use Each<p>Prototyping is a multi-disciplinary activity, spanning across digital design, industrial design and everything in between. Whilst being precursors to the end product, prototypes may vary in fidelity. This article will look at digital prototyping, providing guidelines you can use to determine when you should and shouldn’t build one.&nbsp;</p><p>Within the digital space a prototype is used to quickly test ideas and see whether users can complete core tasks. They are intended to save development time as not a single line of code is needed to validate any ideas. Furthermore, a prototype is not always needed. Often, a storyboard will do! Choosing between the two depends on what you’re trying to achieve. Each of these deliverables is an important skill for UX designers to develop, but arguably what’s more important is the ability to select the appropriate output and level of fidelity required.</p><h2>Prototypes</h2><h3>Low Fidelity Prototypes</h3><p>A low fidelity prototype is often created using paper and pen.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/28707/image/prototype-1.jpg"></figure><h4>When to Use</h4><p>In my experience, lo-fi prototypes are intended to capture the “low hanging fruit” feedback, such as confusion about platform conventions (e.g. Material design plus button, Windows 8 charm bar etc). Also, this method is especially useful when working in a collaborative design project. You can set the timer for fifteen minutes, hand out a number of templates and get each person to sketch out their ideas (one page per two people works well).&nbsp;</p><h4>Recommended Tools</h4><p>Companies such as <a href="https://www.uistencils.com/">uistencils.com</a>&nbsp;offer a number of paper and ruler stencils of common UI elements to quickly put together rough concepts. You could also use a paper and notepad. These lower fidelity prototypes can be uploaded in tools such as Invision, where you can link up the pages using “hotspots”, and simulate, at a pretty loose level, what the end product could possibly look like.</p><h3>Mid Fidelity Prototypes</h3><p>A medium fidelity prototype is normally put together using software. Unlike the paper prototype, which may be more suitable for collaborative design, this method is usually put together by a UX designer on the team.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/28707/image/prototype-2.jpg"></figure><h4>When to Use</h4><p>Use mid-fi prototypes after you’ve gone through your inspiration phase, including qualitative research, customer journey maps and initial flows. The goal here is to test some task flows and see how users respond to your ideas overall.</p><h4>Recommended Tools</h4><p>There are a number of tools out there such as <a href="https://www.uxpin.com/" target="_self">UXpin</a>, which are always evolving and updating their set of features. <a href="https://www.axure.com/" target="_self">Axure</a> is also a common tool and one which I prefer due to the rich interactivity with form fields and its ability to create complex rules and conditions. However, in my experience, less is more–making complex interactions at this stage defeats the purpose. The intention of this prototype is to create something quick and easy for testing.&nbsp;</p><h3>High Fidelity Prototypes</h3><p>High fidelity prototypes can be differentiated from mid fidelity prototypes in a couple of ways. The main thing that separates them is that they are often created using code. However, this might well be very hacky code, certainly not production quality, and being in need of some serious refactoring.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/28707/image/prototype-3.jpg"></figure><h4>When to Use</h4><p>High fidelity prototypes are good when you’ve finished initial user testing sessions and want to explore richer interactions and animations. Also, you may want to share a vision with stakeholders regarding what the final product may look like.&nbsp;</p><h4>Recommended Tools</h4><p>In my experience, designing in the browser is best here. <a href="http://getbootstrap.com/" target="_self">Bootstrap</a> or <a href="http://foundation.zurb.com/" target="_self">Foundation</a> are perfect examples of frameworks for getting you off on the right foot.</p><h2>Storyboards</h2><p>I find the best time to use a <em>storyboard</em> is when you have an idea to communicate. A storyboard (in the context of UX design) is a linear sequence, showing how a user may be struggling with an existing process or product. However, often it reflects an imagined state and interaction with a new product.&nbsp;</p><h3>When to Use</h3><p>
<strong>Innovation Projects</strong>: I used to work in a consultancy. In between contracts I was often tasked with building an innovation project in order to drum up business and sell our capability to companies who may not be actively looking. For example, on the back of whatever we came up with to show (our skills with big data, data visualisation, user experience etc.) the account manager would be tasked with demoing our creations to each representative.&nbsp;</p><p>A prototype was often created, simply because we had the resources to build one. However, in this scenario a storyboard is more effective as a sales tool. The prospective client may or may not be savvy with technology; by using a storyboard you can bypass the industry jargon or tech babble and clearly show a story–including a problem and resolution.&nbsp;</p><p>
<strong>Human Centered Design Challenges:</strong> Storytelling is also powerful in human-centered design challenges, where you need to get inspiration from research, ideate and consider the scope of the problem and innovative ways to address these issues. A prototype often seems a bit premature here. The natural progression of one of these challenges may be a crowdfunding campaign, rather than building out an actual product. Therefore, a storyboard may be the best way to succinctly convey this to an audience and reach them on an emotional level, where they are more likely to contribute (as opposed to looking at a user interface).&nbsp;</p><p>
<strong>Hackathons:</strong> Hackathons are probably the best place to use a storyboard and ironically they are very rarely ever seen there. This is because typically you get technical types participating and they are overly focused on technologies and programming languages. These can really alienate the panel of judges. By having a compelling storyboard, showing how the solution addresses the problem it is more likely to be compelling to an audience and be a strong supplementary piece to anything that has quickly been generated in a few days.</p><h3>Recommended Tools</h3><h4>Low Fidelity</h4><p>All you need to create a storyboard is some sharpies and butcher’s paper! You don’t even need to be good at drawing.&nbsp;</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/28707/image/storyboard-1.jpg"></figure><h4>Medium Fidelity</h4><p>If you are a designer and have <a href="https://webdesign.tutsplus.com/categories/adobe-illustrator" target="_self">Adobe Illustrator</a>, <a href="https://webdesign.tutsplus.com/categories/sketch" target="_self">Sketch</a>, or <a href="https://webdesign.tutsplus.com/courses/affinity-designer-quick-start" target="_self">Affinity Designer</a> you can also take your storyboards to the next level by finding a free set of storyboard art illustrations and editing them to suit your story. If you have a look online there are generally many available.&nbsp;</p><h2>Conclusion</h2><p>In my personal experience, low to medium fidelity storyboards are sufficient in UX design. Perhaps if you were working in the industrial space you may need something more higher fidelity. However, in digital it’s unlikely that the benefits will outweigh the costs.&nbsp;</p><p>The intention of this article is to give you more awareness around which deliverable to use and when. You will often be tasked with things by managers who don’t really understand the need for each. It is hoped that by reading this you will be able to critically think about the deliverables needed and put forward a case for whatever choice you come up with.&nbsp;</p>2017-04-26T13:37:34.000Z2017-04-26T13:37:34.000ZJoeltag:webdesign.tutsplus.com,2005:PostPresenter/cms-28663New Course: Prototyping an App With Adobe XD<p>Adobe XD is an all-in-one cross-platform tool for designing and prototyping websites and mobile apps, allowing you to get from your idea to working prototype faster. In our new short course, <a href="https://webdesign.tutsplus.com/courses/prototyping-an-app-with-adobe-xd?ec_promo=short_course" target="_self">Prototyping an App With Adobe XD</a>, you’ll learn the full process of wireframing, prototyping, and designing an app with Adobe XD.</p><h2>What You’ll Learn</h2><p>Designer <a href="https://tutsplus.com/authors/daniel-white?ec_promo=short_course" target="_self">Daniel White</a> originally recorded this course as a livestream, and in the course of about an hour he takes you through the steps involved in creating several screens for a fictional social platform. The course includes detailed discussion of the process from start to finish, including questions from the participants.</p><figure class="post_image"><a href="https://webdesign.tutsplus.com/courses/prototyping-an-app-with-adobe-xd?ec_promo=short_course" target="_self"><img alt="Screenshot from the Adobe XD prototyping course" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/28663/image/Adobe-XD-screenshot.jpg"></a></figure><p>Learn more about the essential tools of Adobe XD in our course <a href="https://webdesign.tutsplus.com/courses/this-is-adobe-xd?ec_promo=short_course" target="_self">This Is Adobe XD</a>.</p><h2>Watch the Introduction</h2><figure><script src="//fast.wistia.com/assets/external/E-v1.js" async="async"></script><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_olowwcs5dh videoFoam=true"> </div></div></div></figure><h2>Take the Course</h2><p>You can take our new course straight away with a subscription to <a href="https://tutsplus.com/subscribe-with-elements?ec_promo=short_course" target="_self">Envato Elements</a>. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.</p><p>Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.</p><p>Looking for a wireframing alternative? <a href="https://themeforest.net/item/blokk-wireframe-kit-170-screens/19278025" target="_self">Blokk Wireframe Kit</a> is a set of 170+ wireframe screens in 14 popular categories, perfect for composing any kind of clean one-page website. All blocks are based on a genuine Bootstrap Grid and are fully editable in Sketch and Photoshop format.</p>2017-04-21T09:17:17.000Z2017-04-21T09:17:17.000ZAndrew Blackmantag:webdesign.tutsplus.com,2005:PostPresenter/cms-2825413 Prototyping Tools for Web Designers<p>Let’s take a look at some prototyping tools available for web designers today, in no particular order: </p><ol>
<li>Framer</li>
<li>Adobe XD</li>
<li>Adobe After Effects</li>
<li>Adobe Animate CC</li>
<li>Craft Prototype</li>
<li>Principle</li>
<li>Atomic</li>
<li>Proto</li>
<li>JustinMind</li>
<li>Origami</li>
<li>Flinto</li>
<li>Webflow</li>
<li>Marvel App</li>
</ol><p>Dishing out ideas to stakeholders and clients can seem effortless at first, but when things get difficult we need tools to help speed up the feedback process. The web is becoming more complicated for front-end designers, with ever-more interactive requests. Actions such as swiping and dragging are just the tip of the iceberg, and figuring out how the whole puzzle fits together is where the true art of prototyping lies. <br></p><h2>Where Prototyping Fits<br>
</h2><p>By definition, a “prototype” is an early sample built to test specific concepts. A prototype is used to evaluate and enhance a system to gain better insight into the project as a whole. We all work on projects on a daily basis and some are far more intricate than others, but when is it time to call for a tool to help aid in the feedback food chain?</p><p>Some would argue code is far quicker to begin with, but there are moments when time is better spent using a prototype instead of spending time engineering something that may fall quickly to the wayside. Prototyping invites feedback on interaction and placement. It’s an interactive wireframe, giving clients a better understanding on how the project fits together for their users. </p><p>Other times, prototyping before coding can help benefit the project by identifying any edge cases that may have been missed.</p><h2>Prototyping and the Web Design Landscape<br>
</h2><p>When we ask ourselves where this fits into the landscape today, we can definitely attribute the ever increasing demand for motion work. Interfaces are becoming living organisms with interactive content. Simple interactions can be cut and dry to explain verbally, but in other contexts it helps to gain perspective of how an interaction can be triggered–and more clients are demanding to see proof of concepts before signing off. It’s important, now more than ever, to have an idea on where to turn when the need to prototype should arise.</p><p>With so many tools available on the market, which one should you use? Let’s take a look.</p><ul class="roundup-block__contents posts--half-width roundup-block--card"><li class="roundup-block__content posts__post"><article><header><a class="posts__post-preview" href="http://webdesign.tutsplus.com/articles/how-to-decide-between-static-lo-fidelity-and-hi-fidelity-prototypes--cms-21673"><img class="posts__post-preview-image posts__post-preview-image--regular" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/21673/preview_image/proto.jpg"></a><a class="roundup-block__content-link posts__post-title" href="http://webdesign.tutsplus.com/articles/how-to-decide-between-static-lo-fidelity-and-hi-fidelity-prototypes--cms-21673"><h1 class="nolinks">How to Decide Between Static, Lo-Fidelity and Hi-Fidelity Prototypes</h1></a></header><div class="posts__post-teaser">In this post, I'll walk you through high-level prototyping approaches, and describe in which contexts one would choose each.</div>
<footer class="posts__post-details"><div class="posts__post-teaser-overlay"></div>
<div class="posts__post-publication-meta">
<img sizes="76px" class="posts__post-author_photo" src="https://cms-assets.tutsplus.com/uploads/users/30/profiles/18807/profileImage/nick.jpg" alt="Nick Bewley"><div class="posts__post-details__info">
<address class="posts__post-author"><a class="posts__post-author-link" href="http://tutsplus.com/authors/nick-bewley">Nick Bewley</a></address>
<time class="posts__post-publication-date" datetime="2014-08-21 14:18:01 UTC" title="21 Aug 2014">21 Aug 2014</time>
</div>
</div>
<div class="posts__post-primary-category topic-webdesign"><a class="posts__post-primary-category-link topic-webdesign" href="http://webdesign.tutsplus.com/categories/prototyping">Prototyping</a></div></footer></article></li></ul><h2>
<span class="sectionnum">1.</span> Framer</h2><figure class="post_image"><img alt="framer" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/framer-logo.jpg"><figcaption>Framer</figcaption></figure><ul>
<li>Plus License: $15/mo (Mac Only)</li>
<li>Enterprise License: Contact<br>
</li>
</ul><p><a href="https://framer.com" target="_self">Framer</a> lends the familiarity of visual editing with the flexibility of code, giving a seamless workflow complemented by device previewing, version control and simplistic sharing. An app that helps to pioneer new interaction patterns in order to create groundbreaking apps. Pull in data from your favorite API, capture real user input to test, and work with actual users and feedback. Import graphics directly from Sketch, Photoshop or Figma.<br></p><p>Although Framer may appear as though it’s used strictly for mobile apps, it can also be leveraged for non-app projects, or used as a standalone library. When using the <a href="https://github.com/koenbok/Framer" target="_self">Framer JS library</a> alone, you avoid the <a href="https://en.wikipedia.org/wiki/Integrated_development_environment" target="_self">IDE</a> completely. Essentially it’s an open source JavaScript framework for rapid prototyping. Define animations and interactions, complete with filters, spring physics, 3D effects and more. Although CoffeeScript isn’t required, the docs use CoffeeScript as well as the IDE.<br></p><p>It should be known that Framer isn’t meant to be used for creating production-ready animations. </p><blockquote contenteditable="false" class="twitter-tweet">
<p><a href="https://twitter.com/UXDesignDad">@UXDesignDad</a> <a href="https://twitter.com/framer">@framer</a> Hey Andre! Framer is a prototyping tool for the Mac. So no production apps 😁</p>— Krijn Rijshouwer (@krijnrijshouwer) <a href="https://twitter.com/krijnrijshouwer/status/827205595375755267">February 2, 2017</a>
</blockquote>
<p>Because Framer has its own concept of layers and is pretty heavy code-wise, you can’t use it in plain (existing) DOM stuff like you might do with GreenSock. In fact, it puts its own canvas in the DOM and all the animations are run inside that canvas.<br></p><ul>
<li><a href="https://framer.com/features/handoff">https://framer.com/features/handoff</a></li>
<li>
<a href="https://framer.com/getstarted/guide">https://framer.com/getstarted/guide</a><br>
</li>
<li>
<a href="https://framer.com/pricing/2017">https://framer.com/pricing/2017</a><br>
</li>
<li>
<a href="https://framer.com/getstarted/import">https://framer.com/getstarted/import</a><br>
</li>
</ul><h2>
<span class="sectionnum">2.</span> Adobe XD</h2><figure class="post_image"><img alt="Adobe XD" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/XD-logo.png"><figcaption>Adobe XD</figcaption></figure><ul><li>Price: Requires Adobe’s Creative Cloud Account</li></ul><p>Draw, reuse, and remix vector and raster artwork to create wireframes, screen layouts, interactive prototypes and production-ready assets all from the same app. Work with powerful tools like <a href="https://www.youtube.com/watch?v=42VCB42TKp4" target="_self">Repeat Grid</a> built specifically for <a href="http://www.adobe.com/products/experience-design.html" target="_self">XD</a>, and with layers, symbols, and pen tools for UX design. Add interactions using a variety of animations to create transitions between art boards to simulate the flow of your app/website. </p><p>Clients can make comments directly on your prototypes when you share directly, and view designs in real time on actual devices. Designs can be adjusted and automatically updated across platforms. Switch easily from wireframing, visual design, interaction design, prototyping, preview and sharing, all in one powerful tool.</p><p>While XD is still a beta product it remains to be seen if it will stick around for the foreseeable future. You can read more about the features released <a href="http://www.adobe.com/products/experience-design/features.html" target="_self">here</a> to stay informed on upcoming changes and enhancements. We even published a 15 part series covering all of the essential tools you’ll need to start designing and prototyping with Adobe XD:</p><ul class="roundup-block__contents posts--half-width roundup-block--card"><li class="roundup-block__content posts__post"><article><header><a class="posts__post-preview" href="http://webdesign.tutsplus.com/articles/new-course-this-is-adobe-xd--cms-28058"><img class="posts__post-preview-image posts__post-preview-image--regular" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/28058/preview_image/xd-3.png"></a><a class="roundup-block__content-link posts__post-title" href="http://webdesign.tutsplus.com/articles/new-course-this-is-adobe-xd--cms-28058"><h1 class="nolinks">New Course: This Is Adobe XD</h1></a></header><div class="posts__post-teaser">In our new course, This Is Adobe XD, Envato Tuts+ instructor Daniel White will cover all of the essential tools you’ll need to start designing and...</div>
<footer class="posts__post-details"><div class="posts__post-teaser-overlay"></div>
<div class="posts__post-publication-meta">
<img sizes="76px" class="posts__post-author_photo" src="https://cms-assets.tutsplus.com/uploads/users/23/profiles/18578/profileImage/AndrewBlackman-400.jpg" alt="Andrew Blackman"><div class="posts__post-details__info">
<address class="posts__post-author"><a class="posts__post-author-link" href="http://tutsplus.com/authors/andrew-blackman">Andrew Blackman</a></address>
<time class="posts__post-publication-date" datetime="2017-01-24 16:05:39 UTC" title="24 Jan 2017">24 Jan 2017</time>
</div>
</div>
<div class="posts__post-primary-category topic-webdesign"><a class="posts__post-primary-category-link topic-webdesign" href="http://webdesign.tutsplus.com/categories/adobe-xd">Adobe XD</a></div></footer></article></li></ul><h2>
<span class="sectionnum">3.</span> Adobe AfterEffects</h2><figure class="post_image"><img alt="After Effects" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/aftereffects-logo.jpg"><figcaption>Adobe After Effects</figcaption></figure><ul><li>Price: Requires Adobe’s Creative Cloud Account</li></ul><p><a href="http://www.adobe.com/products/aftereffects.html" target="_self">After Effects</a> is not specifically a prototyping tool for websites and applications (although you can still get away with it), but it does help prototype motion for those looking for a way to comp/mockup animations for clients. Create motion graphics for video or create animation effects for the Web. Here's a great article on Tuts+ by <a href="https://tutsplus.com/authors/charles-yeager" target="_self">Charles Yeager</a>:</p><ul class="roundup-block__contents posts--half-width roundup-block--card"><li class="roundup-block__content posts__post"><article><header><a class="posts__post-preview" href="http://webdesign.tutsplus.com/tutorials/how-to-use-after-effects-for-web-animation-prototypes--cms-21451"><img class="posts__post-preview-image posts__post-preview-image--regular" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/21451/preview_image/preview.png"></a><a class="roundup-block__content-link posts__post-title" href="http://webdesign.tutsplus.com/tutorials/how-to-use-after-effects-for-web-animation-prototypes--cms-21451"><h1 class="nolinks">How to Use After Effects for Web Animation Prototypes</h1></a></header><div class="posts__post-teaser">In this screencast tutorial we're going to prototype an app UI animation. We'll take a Photoshop layout, then bring it to life using Adobe After Effects.</div>
<footer class="posts__post-details"><div class="posts__post-teaser-overlay"></div>
<div class="posts__post-publication-meta">
<img sizes="76px" class="posts__post-author_photo" src="https://cms-assets.tutsplus.com/uploads/users/591/profiles/18402/profileImage/Profile400.jpg" alt="Charles Yeager"><div class="posts__post-details__info">
<address class="posts__post-author"><a class="posts__post-author-link" href="http://tutsplus.com/authors/charles-yeager">Charles Yeager</a></address>
<time class="posts__post-publication-date" datetime="2014-06-18 14:37:25 UTC" title="18 Jun 2014">18 Jun 2014</time>
</div>
</div>
<div class="posts__post-primary-category topic-webdesign"><a class="posts__post-primary-category-link topic-webdesign" href="http://webdesign.tutsplus.com/categories/animation">Animation</a></div></footer></article></li></ul><p>Also checkout this ten part series on Tuts+ called <a href="https://cgi.tutsplus.com/series/welcome-to-after-effects--ae-28707" target="_self">Welcome to After Effects</a>.</p><h2>
<span class="sectionnum">4.</span> Adobe Animate CC</h2><figure class="post_image"><img alt="Adobe Animate CC" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/animatecc-logo.jpg"><figcaption>Adobe Animate CC</figcaption></figure><ul><li>Price: Requires Adobe’s Creative Cloud Account</li></ul><p>Adobe Animate is an evolution of Flash Professional. It’s a tool that includes features such as timelines, keyframes, abundant export options, support for 3rd party JavaScript libraries, camera position adjustments and much more. While it is aimed more towards animators, don’t be fooled into thinking you can’t use it for other needs. Remember that tools do as much as you desire and are only limited by your imagination. Use it for website wireframes, animation testing for apps and more. You can read about the inner workings of Adobe Animate in this article by yours truly:</p><ul class="roundup-block__contents posts--half-width roundup-block--card"><li class="roundup-block__content posts__post"><article><header><a class="posts__post-preview" href="http://webdesign.tutsplus.com/tutorials/a-web-designers-guide-to-adobe-animate-cc--cms-28240"><img class="posts__post-preview-image posts__post-preview-image--regular" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/28240/preview_image/pre.png"></a><a class="roundup-block__content-link posts__post-title" href="http://webdesign.tutsplus.com/tutorials/a-web-designers-guide-to-adobe-animate-cc--cms-28240"><h1 class="nolinks">A Web Designer’s Introduction to Adobe Animate CC</h1></a></header><div class="posts__post-teaser">What’s better than being static? Being in motion, my good friends. Motion is on the rise for the web, from simple interface interactions, to more complex...</div>
<footer class="posts__post-details"><div class="posts__post-teaser-overlay"></div>
<div class="posts__post-publication-meta">
<img sizes="76px" class="posts__post-author_photo" src="https://cms-assets.tutsplus.com/uploads/users/638/profiles/19175/profileImage/avatar-brickbg400x400.jpg" alt="Dennis Gaebel"><div class="posts__post-details__info">
<address class="posts__post-author"><a class="posts__post-author-link" href="http://tutsplus.com/authors/dennis-gaebel">Dennis Gaebel</a></address>
<time class="posts__post-publication-date" datetime="2017-02-21 09:44:50 UTC" title="21 Feb 2017">21 Feb 2017</time>
</div>
</div>
<div class="posts__post-primary-category topic-webdesign"><a class="posts__post-primary-category-link topic-webdesign" href="http://webdesign.tutsplus.com/categories/adobe-animate">Adobe Animate</a></div></footer></article></li></ul><h2>
<span class="sectionnum">5.</span> Craft Prototype</h2><figure class="post_image"><img alt="Craft Prototype" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/craft-prototype-logo.jpg"><figcaption>Craft Prototype</figcaption></figure><ul><li>Price: Free. Requires Sketch $99.00</li></ul><p>Build hi-fi prototypes with your real design files. Craft is part of the Invision family; a company acquiring many tools (such as <a href="http://macaw.co/" target="_self">Macaw</a> and <a href="https://easee.design/" target="_self">Easee</a>) these days from outside entities.</p><p><a href="https://www.invisionapp.com/craft#prototype" target="_self">Craft Prototype</a> is a powerful set of tools that lets you design with real data, creating style guides in one click. With prototype you can do the job right from Sketch; all in one space. With real time mirroring to your phone you can test out design prototypes immediately. When you’re ready to share, you can publish your work directly to Invision to gain instant feedback from clients and stake holders. It even lets you prototype at a higher fidelity with motion, giving you a timeline to adjust visually using keyframes. Generate HTML and CSS, native swift code, and documentation for your developer. Watch this short video explaining <a href="https://vimeo.com/158847486" target="_self">Craft 2.0 Preview - Prototype in Sketch</a> on Vimeo.<br></p><h2>
<span class="sectionnum">6.</span> Principle</h2><figure class="post_image"><img alt="Principle" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/principle-logo.png"><figcaption>Principle</figcaption></figure><ul><li>Price: $129.00 (Mac only)</li></ul><p><a href="http://principleformac.com" target="_self">Principle</a> makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. The app appears very much like the UI for Sketch including other familiar aspects for alignment, art board creation and screen connections, plus real time previews. Click animation layers to dive deeper into keyframes and adjust custom easing curves just like you would in other animation tools. Principle gives you the freedom to experiment without limiting you to pre-defined transitions, plus you can import artboards from Sketch as well.<br></p><p>The <a href="https://itunes.apple.com/us/app/principle-mirror-ui-design/id991911319?ls=1&amp;mt=8" target="_self">Principle Mirror</a> app for iOS lets others view your designs on their device. While designing, you can interact instantly by plugging your device into the computer or export a standalone Mac app for others to view. </p><figure data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=-v5mi8at7Y8" class="embedded-video">
<iframe src="//www.youtube.com/embed/-v5mi8at7Y8?rel=0" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe>
</figure><h2>
<span class="sectionnum">7.</span> Atomic</h2><figure class="post_image"><img alt="Atomic" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/atomic-logo.jpg"><figcaption>Atomic</figcaption></figure><ul>
<li>Starter Tier: $15/mo</li>
<li>Pro: $25/mo<br>
</li>
<li>Unlimited: $25/mo<br>
</li>
</ul><p><a href="https://atomic.io" target="_self">Atomic</a> is a web-based app that integrates with Sketch, allowing you to import designs from there or anywhere of your choosing. Bringing designs into Atomic is simple; use the powerful Sketch plugin or drop in elements from your favorite design tool.<br></p><p>Atomic has built-in drawing and layout tools for designing from scratch or building upon imported designs. Quickly link your designs using a range of <a href="https://vimeo.com/136202462" target="_self">gestures and transitions</a> for mobile or desktop. Use custom CSS to apply additional styles and also export your CSS to share with other developers. Read more about the features of Atomic <a href="https://atomic.io/features" target="_self">on their website</a>.<br></p><h2>
<span class="sectionnum">8.</span> Proto</h2><figure class="post_image"><img alt="Proto" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/proto-logo.jpg"><figcaption>Proto</figcaption></figure><ul>
<li>Freelancer $24/mo</li>
<li>Startup $40/mo<br>
</li>
<li>Agency $80/mo<br>
</li>
<li>Corporate $160/mo<br>
</li>
</ul><p>Build sophisticated animations for any interaction design pattern with the easy to use timeline with <a href="https://proto.io" target="_self">Proto</a>. The app comes with a complete set of UI libraries such as iOS9, Material Design, Windows 10 and more. Designs can be imported using the Sketch or the Photoshop plugin; import them in layers and synced with Dropbox. Export UI assets directly. Preview prototypes in browser or devices using proto app for IOS or Android. Share with clients or team members to collaborate and generate feedback. Proto integrates with leading user testing tools to get powerful feedback and insight. </p><p>Learn more about its features on <a href="https://proto.io/en/new-features" target="_self">the Proto website</a>.</p><h2>
<span class="sectionnum">9.</span> JustinMind</h2><figure class="post_image"><img alt="JustinMind" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/justinmind-logo.jpg"><figcaption>JustinMind</figcaption></figure><ul>
<li>Pro $19/mo</li>
<li>Enterprise: <a href="https://www.justinmind.com/enterprise" target="_self">Contact</a><br>
</li>
</ul><p>JustinMind is an app-based product for transforming simple mockups into interactive prototypes for iOS and Android, and creating web and mobile wireframes. Take advantage of pre-built UI libraries, embed HTML and documents into anything your heart desires. Paid accounts allow multiple users to simultaneously interact with the same prototype making feedback effortless to gain. It even has an extensive library of <a href="https://www.justinmind.com/widgets" target="_self">pre-existing widgets</a> tailored to the device template selected for your project. Elements like interactive buttons, checkboxes, lists, and even parallax layouts are at your disposal.</p><p>If you’re new to this tool it comes packed with <a href="https://www.justinmind.com/support" target="_self">great tutorials and guided videos</a> for everyone from beginner to expert. While it offers a free plan for browser sharing abilities you must upgrade to a paid account for collaboration amongst your team members. With JustinMind Prototyper you can import images from any design tool or directly from your web browser and turn them into exciting and engaging web prototypes with the “image hotspot” tool. Export your prototype to a fully functional HTML document and make it readily available to view in any web browser.</p><ul><li>
<a href="https://www.justinmind.com/features">https://www.justinmind.com/features</a><br>
</li></ul><h2>
<span class="sectionnum">10.</span> Origami</h2><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/origami-logo.jpg"></figure><ul><li>Price: Free Mac only.</li></ul><p><a href="http://origami.design" target="_self">Origami</a> is built and used by designers at Facebook and has been used to create such apps like Instagram, Messenger and Paper. Copy anything from Sketch and paste native layers into Origami Studio. Quickly adjust, add behavior, and animate any layer property without going back. The tool offers designers an array of gestures and transition animations that are common to UI patterns.</p><p>Origami offers useful features for interactive prototyping along with plugins for Sketch and Photoshop as well as a documentation library complete with forums.</p><p>There is an “Export to Code” feature that lets you convert your visual design into written code samples for iOS, Android, or web. You can’t directly share prototypes with individuals operating on devices other than your own, though you can preview your prototypes with Origami Live, available for Android and iOS. Check out the tutorials for more insight on the <a href="http://origami.design/tutorials" target="_self">Origami website</a>.</p><h2>
<span class="sectionnum">11.</span> Flinto</h2><figure class="post_image"><img alt="Flinto" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/flinto-logo.jpg"><figcaption>Flinto</figcaption></figure><ul>
<li>Free 14 day Trial</li>
<li>Flinto Lite; Web-based subscription $20/mo</li>
<li>Mac App: $99<br>
</li>
</ul><p><a href="https://www.flinto.com" target="_self">Flinto</a> for Mac is an app-based tool that allows you to create anything from simple tap-through prototypes, to comprehensive prototypes with interactions. There’s no programming or timelines; it’s a prototyping tool for designers at its core. Place objects and components where you desire. Transitions can be simple or complex, and transitions are reusable. You have precise control over each layer, including spring or cubic-bezier easing.</p><p>Use the “behavior designer” to create micro-interactions that exist within one screen. This is perfect for things like button effects, toggle switches, looping animations and scroll-based animations.<br></p><p>Adding scrolling areas to your screens is easy too; select layers, and click the “scroll group” button. You can tweak a variety of options, create paging scroll groups, nest scroll groups and even create scroll-based animations.<br></p><p>All the changes you make in Flinto for Mac can be tested immediately in the preview window, or on your WiFi-connected iPhone or iPad using the free iOS viewer app.<br></p><p>Flinto’s iOS viewer app is free in the App Store for anyone to download, so you can send your Flinto files to anyone you’d like to share with.</p><ul>
<li><a href="https://www.flinto.com/mac">https://www.flinto.com/mac</a></li>
<li>
<a href="https://www.flinto.com/tutorial_videos">https://www.flinto.com/tutorial_videos</a><br>
</li>
<li>
<a href="http://blog.flinto.com">http://blog.flinto.com</a><br>
</li>
</ul><h2>
<span class="sectionnum">12. </span>Webflow</h2><figure class="post_image"><img alt="Webflow" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/webflow-logo.jpg"><figcaption>Webflow</figcaption></figure><ul>
<li>Starter Tier: Free</li>
<li>Lite: $16/mo<br>
</li>
<li>Pro: $35/mo<br>
</li>
</ul><p><a href="https://webflow.com" target="_self">Webflow</a> is another web-based app that runs directly in the latest versions of Chrome and Safari. This means it’s currently optimized in those said browsers, however the code produced has cross browser support.<br></p><blockquote>“Build dynamic, responsive websites without writing code. Launch with a click, and enjoy the fastest, most reliable hosting on the web. Export clean, semantic code to hand off to developers.”<br>
</blockquote><p>Webflow is heavily focused on web animations, interactions and responsive web design. Interactions 2.0 is coming soon and will offer more control for animations and interactions across break points (often a pain point designers express), and of course the ease of building visually vs. a proxy of code.<br></p><p>To give you a taste of Webflow possibilities checkout this <a href="http://illustration-to-life.webflow.io" target="_self">live demo</a> that can also be viewed in Webflow or checkout the code produced in this <a href="https://codepen.io/waldo/pen/VPBeXQ?editors=0100" target="_self">CodePen</a> demo. It’s also beneficial to get a taste of the UI in this <a href="https://www.youtube.com/watch?v=d65Cq1tWsZI" target="_self">video</a>.<br></p><p>The code quality that’s produced is semantic, legible and easy to work with if you export and use it externally or hand it off to a developer. Here are a few demos showcasing the code produced.</p>
<iframe src="https://codepen.io/tutsplus/embed/JbezRG/?height=450&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="450" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<iframe src="https://codepen.io/tutsplus/embed/VPBeXQ/?height=450&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="450" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>Currently <a href="https://interactions.webflow.com" target="_self">Interactions V1</a> is available and <a href="https://webflow.com/feature/interactions-v2" target="_self">Interactions 2.0</a> will include more customizations with parallax type animations and interactivity built in visually; animations based upon cursor/live-scroll position. Webflow is hoping to launch the beta pretty soon so Interactions 2.0 will be a large part of the interface and a big reason for many designers and developers to use Webflow.<br></p><ul>
<li><a href="https://wishlist.webflow.com/ideas/WEBFLOW-I-17">https://wishlist.webflow.com/ideas/WEBFLOW-I-17</a></li>
<li>
<a href="http://3d-transforms.webflow.com">http://3d-transforms.webflow.com</a><br>
</li>
<li>
<a href="https://webflow.com/prototyping">https://webflow.com/prototyping</a><br>
</li>
<li>
<a href="https://webflow.com/feature/interactions-v2">https://webflow.com/feature/interactions-v2</a><br>
</li>
<li>
<a href="https://interactions.webflow.com">https://interactions.webflow.com</a><br>
</li>
<li>
<a href="https://flexbox.webflow.com">https://flexbox.webflow.com</a><br>
</li>
</ul><p>Thanks to Waldo Broodryk from Webflow who took the time to answer many of my questions and share his demos and knowledge.<br></p><h2>
<span class="sectionnum">13.</span> Marvel App</h2><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/638/posts/28254/image/marevel-logo.jpg"></figure><ul>
<li>Free (1 user, 2 projects)</li>
<li>Pro $12/mo<br>
</li>
<li>Company $48/mo<br>
</li>
</ul><p>The <a href="https://marvelapp.com" target="_self">Marvel</a> browser-based editor allows you to link all your designs together, add gestures and transitions to make your prototype feel just like a real app or website. Create prototypes for the iPhone, iPad, Desktop, Apple TV, Apple Watch and Android.</p><p>Marvel comes with such features as collaboration, commenting, along with designing in your browser with “Canvas”, plus you can add images using Photoshop, Sketch or pen and paper. Users can click and drag to create interactive hotspots on designs that react when they’re clicked or touched. Marvel comes with other cool features like a <a href="https://blog.marvelapp.com/grab-the-latest-update-to-our-sketch-plugin" target="_self">Sketch plugin</a> and even an <a href="https://blog.marvelapp.com/marvel-for-ios-the-prototyping-tool-for-the-mobile-generation" target="_self">iOS tool</a>. The iOS app now includes Canvas (mentioned previously), Marvel’s rapid design tool that allows you to create app mock-ups from scratch. This app also includes <a href="https://www.iconfinder.com" target="_self">Iconfinder</a> and <a href="https://unsplash.com" target="_self">Unsplash</a> which provide you with an epic database of over one million stock photos and icons to incorporate into your designs.<br></p><p>Marvel also features such as user roles, project organization using folders, syncing designs from Google Drive, options to embed video and audio from YouTube, Spotify, Vimeo and SoundCloud.</p><ul class="roundup-block__contents posts--half-width roundup-block--card"><li class="roundup-block__content posts__post"><article><header><a class="posts__post-preview" href="http://webdesign.tutsplus.com/tutorials/how-to-create-an-interactive-prototype-with-marvel--cms-22683"><img class="posts__post-preview-image posts__post-preview-image--regular" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/22683/preview_image/prev.png"></a><a class="roundup-block__content-link posts__post-title" href="http://webdesign.tutsplus.com/tutorials/how-to-create-an-interactive-prototype-with-marvel--cms-22683"><h1 class="nolinks">How to Create an Interactive Prototype With Marvel</h1></a></header><div class="posts__post-teaser">Marvel is an excellent online tool which allow designers to create prototypes of mobile applications and web projects. In this tutorial we'll see how we can...</div>
<footer class="posts__post-details"><div class="posts__post-teaser-overlay"></div>
<div class="posts__post-publication-meta">
<img sizes="76px" class="posts__post-author_photo" src="https://cms-assets.tutsplus.com/uploads/users/384/profiles/18824/profileImage/bio.jpg" alt="Armando Sotoca"><div class="posts__post-details__info">
<address class="posts__post-author"><a class="posts__post-author-link" href="http://tutsplus.com/authors/armando-sotoca">Armando Sotoca</a></address>
<time class="posts__post-publication-date" datetime="2014-12-16 12:15:46 UTC" title="16 Dec 2014">16 Dec 2014</time>
</div>
</div>
<div class="posts__post-primary-category topic-webdesign"><a class="posts__post-primary-category-link topic-webdesign" href="http://webdesign.tutsplus.com/categories/prototyping">Prototyping</a></div></footer></article></li></ul><ul>
<li><a href="https://marvelapp.com/design">https://marvelapp.com/design</a></li>
<li>
<a href="https://marvelapp.com/features">https://marvelapp.com/features</a><br>
</li>
<li>
<a href="https://marvelapp.com/sketch">https://marvelapp.com/sketch</a><br>
</li>
</ul><h2>Conclusion</h2><p>No matter the tool you decide to use, choose the one that fits for you and the one you feel most comfortable with. Leave a comment below if you’ve had experience with any of the tools mentioned to help others trying to decide which tool to turn to. I hope this article helps you gain a more insight and arrive at an educated decision when the time comes to choose.</p><p>Special thanks to these folks for their input, knowledge sharing and opinions during my research:<br></p><ul>
<li><a href="https://twitter.com/davidkpian" target="_self">David K Piano</a></li>
<li>
<a href="https://twitter.com/vlh" target="_self">Val Head</a><br>
</li>
<li>
<a href="https://twitter.com/waldobroodryk" target="_self">Waldo Broodryk</a><br>
</li>
<li>
<a href="https://twitter.com/stephenshaw" target="_self">Stephen Shaw</a><br>
</li>
<li>
<a href="https://codepen.io/notoriousb1t/" target="_self">Christopher Wallis</a><br>
</li>
<li>
<a href="https://twitter.com/jtraggianese" target="_self">James Traggianese</a><br>
</li>
<li>
<a href="https://twitter.com/sureshselvaraj" target="_self">Suresh Selvaraj</a><br>
</li>
<li>
<a href="https://twitter.com/nola_will" target="_self">Will Phillips Jr.</a><br>
</li>
<li>
<a href="https://codepen.io/Vheissu/" target="_self">Iván Uruchurtu</a><strong><br></strong>
</li>
</ul>2017-03-02T16:31:13.000Z2017-03-02T16:31:13.000ZDennis Gaebeltag:webdesign.tutsplus.com,2005:PostPresenter/cms-28058New Course: This Is Adobe XD<p>Adobe XD (also known as “Experience Design”) is fast becoming the web designer’s graphic tool of choice. It allows for designing, prototyping, and collaborating with others, all from within one application. </p><p>In our new course, <a href="https://webdesign.tutsplus.com/courses/this-is-adobe-xd?ec_promo=teaser_post_short" target="_self">This Is Adobe XD</a>, Envato Tuts+ instructor <a href="https://tutsplus.com/authors/daniel-white?ec_promo=teaser_post_short" target="_self">Daniel White</a> will cover all of the essential tools you’ll need to start designing and prototyping with Adobe XD.</p><figure class="post_image"><img alt="creating a gradient with Adobe XD" src="https://cms-assets.tutsplus.com/uploads/users/48/posts/28058/image/Adobe-XD.jpg"></figure><p>Among other things, you'll learn about:</p><ul>
<li>creating artboards</li>
<li>fills, gradients, and shadows</li>
<li>transforming and aligning shapes</li>
<li>object and background blur</li>
<li>prototyping and transitions</li>
</ul><p>You can take our new course straight away with a subscription to <a href="https://tutsplus.com/subscribe-with-elements?ec_promo=teaser_post_short" target="_self">Envato Elements</a>. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.</p><p>Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.</p><figure><script src="//fast.wistia.com/assets/external/E-v1.js" async="async"></script><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_a365cq6ggs videoFoam=true"> </div></div></div></figure><h2>Get free access to our next Adobe XD course</h2><p>Be the first to hear about our exciting new course on Adobe XD. <a href="http://email.tutsplus.com/h/i/48D77AC31DB1D3BC" target="_self">Sign up now</a> to help shape the course and get free access.</p>2017-01-24T16:05:39.000Z2017-01-24T16:05:39.000ZAndrew Blackmantag:webdesign.tutsplus.com,2005:PostPresenter/cms-27708Create a Lo-fi UI Prototype in 60 Seconds<p>Let’s create a Lo Fi Prototype, in sixty seconds, using the <a href="https://themeforest.net/item/madkit-lowfi-prototypes-uxui-kit/15693066" target="_self">MadKit Sketch UI kit</a> from Themeforest!</p><h2>Watch the Screencast</h2><figure><script src="//fast.wistia.com/assets/external/E-v1.js" async="async"></script><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_doqq3eatj4 videoFoam=true"> </div></div></div></figure><h3>How it’s Done</h3><p>In a duplicate of the MadKit Sketch file (Lo-Fi UI) create a new page. Go to <strong>Insert &gt; Symbols &gt; Base &gt; Shapes &gt; Window</strong> to create a browser window for our mockup. </p><figure class="post_image"><img alt="Shapes" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27708/image/shapes.jpg"><figcaption>Shapes &gt; window</figcaption></figure><p>Also under <strong>Shapes</strong> grab a browser-header, and then give your prototype a name.</p><h3>Content is King</h3><p>Now we’ll assemble our prototype’s content by using symbols that can be found under <strong>Categories</strong> (start with a video background cover). Next we’ll add a product list, a testimonials slider, after that we’ll show the latest blog posts, we’ll add some info on the people of the company, then we’ll wrap up with some contact details.</p><h3>Stree-etch</h3><p>Stretch your window object so that it fits your content:</p><figure class="post_image"><img alt="stretch window" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27708/image/stretch.jpg"><figcaption>Stretch the window shape</figcaption></figure><p>Now select all six content pieces, right-click in the layers menu, and select <strong>Detach from Symbol</strong>. In the <strong>Video BG</strong> object hide the <strong>Base/Shapes/window</strong> and set the<strong> Video Background</strong>’s radius to <strong>0.</strong></p><p>Now we’re going to hide the window shape for every second piece of content, then for the remaining pieces we’ll hide the borders and set the radius to 0.</p><p>Finally, grab the browser window and the header symbols and drag them all the way to the top of the stack.</p><h2>We’re Done</h2><p>That’s how you create a lo-fi UI prototype in sixty seconds! Be sure to check out more of what’s on offer for <a href="https://themeforest.net/tags/wireframe?category=sketch-templates&amp;referrer=search&amp;utf8=%E2%9C%93&amp;view=grid" target="_self">prototyping in Sketch</a> on Themeforest:</p><figure class="post_image"><img alt="wireframe Sketch app templates" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27708/image/tf.jpg"><figcaption><a href="https://themeforest.net/tags/wireframe?category=sketch-templates&amp;referrer=search&amp;sort=sales&amp;utf8=%E2%9C%93&amp;view=grid" target="_self">Wireframing Sketch app templates</a> on Themeforest</figcaption></figure>2016-11-29T14:47:01.000Z2016-11-29T14:47:01.000ZKezz Braceytag:webdesign.tutsplus.com,2005:PostPresenter/cms-27440Adobe XD in 60 Seconds<p><a href="http://www.adobe.com/products/experience-design.html" target="_self">Adobe XD</a> allows you to design and prototype for apps; anything from wireframes, to multiscreen experiences. Let’s see what it offers, in sixty seconds! <br></p><figure><script src="//fast.wistia.com/assets/external/E-v1.js" async="async"></script><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_pwjqutj7t7 videoFoam=true"> </div></div></div></figure><p>Once you’ve opened the application, you can start by creating a new artboard with a variety of preset sizes, then add more artboards for additional screens within your design.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27440/image/xd-1.jpg"></figure><h2>The XD Interface</h2><p>Familiar tools like the line, ellipse, and rectangle tool are available from the tool bar at the left of the interface. There you’ll also find the text tool, and the pen tool which allows you to draw custom shapes.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27440/image/xd-3.jpg"></figure><p>On the right hand side is the property inspector; an area which provides a number of options for the object selected on your artboard.</p><p>If you have more than one artboard, these can be linked together by switching to prototype view. You can also set transitions between the artboards, defining the type of transition and how long each one will last.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27440/image/xd-4.jpg"></figure><h2>Sharing</h2><p>Once your design or prototype is complete it can be shared online, to be viewed on either a computer, tablet, or smartphone.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27440/image/xd-5.jpg"></figure><h2>Keen on Wireframing?</h2><p>Checkout these wireframing kits available from Envato–for Adobe Illustrator, Adobe Photoshop, and Sketch. Why not create and submit your own Adobe XD wireframe kits for sale?</p><figure class="post_image"><img alt="Wireframing on Envato Elements" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27440/image/elements.jpg"><figcaption><a href="https://elements.envato.com/items?searchTerms=wireframe&amp;sortBy=popular" target="_self">Wireframe kits on Envato Elements</a></figcaption></figure><figure class="post_image"><img alt="Wireframe kits on Themeforest" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/27440/image/themeforest.jpg"><figcaption><a href="https://themeforest.net/tags/wireframe" target="_self">Wireframe kits on Themeforest</a></figcaption></figure><h3>Further Resources</h3><ul>
<li><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-a-ui-prototype-using-adobe-xd--cms-26585" target="_self">How to Create a UI Prototype Using Adobe XD</a></li>
<li>
<a href="http://www.adobe.com/products/experience-design.html" target="_self">Adobe Experience Design CC</a> on adobe.com</li>
<li>Follow <a href="https://twitter.com/AdobeXD">@AdobeXD</a> on Twitter</li>
<li>
<a href="https://webdesign.tutsplus.com/tutorials/search/Wireframing" target="_self">A Beginner’s Guide to Wireframing</a><br>
</li>
<li>
<a href="https://elements.envato.com/items?searchTerms=wireframe&amp;sortBy=popular" target="_self">Wireframe kits</a> on Envato Elements<br>
</li>
<li>
<a href="https://themeforest.net/tags/wireframe" target="_self">Wireframe kits</a> on Themeforest</li>
</ul>2016-10-17T09:30:06.175Z2016-10-17T09:30:06.175ZDaniel Whitetag:webdesign.tutsplus.com,2005:PostPresenter/cms-27060Designing, Wireframing & Prototyping an Android App: Part 2<p>In <a href="http://code.tutsplus.com/tutorials/designing-wireframing-prototyping-an-android-app-part-1--cms-26860" target="_self">part one</a> of this two-part series, I showed you how to take an initial idea for an Android app, and develop it into a detailed plan—right down to mapping out the individual screens that'll make up your finished app. </p><p>Using the example of a travel app that'll help users plan and book a fun-filled summer adventure with all their friends, we identified our target audience by creating a user persona (remember our friend Sasha?) and then created a list of features that would be perfect for Version 1.0 of our app (and perfect for Sasha). Finally, we created a screen list and a map showing <em>exactly</em> how all these screens will fit together.<br></p><p>We covered a lot of ground in part one, but up until now all our planning has been a bit high-level and abstract. In part two we’re going to get up close and personal by wireframing and prototyping the individual screens that'll make up our app. <br></p><p>By the end of this tutorial you’ll have created a digital prototype that you can install and test on your own Android smartphone or tablet.<br></p><p>Let’s dive right in and start creating some wireframes!<br></p><h2>What Is Wireframing?<br>
</h2><p>Wireframing is where you sketch out all the major UI components you want to place on a particular screen. The purpose of wireframing is to outline a screen’s structure—it’s not about the finer details of how a screen looks, so try not to get sucked into the specifics of graphic design. For now, it’s enough to know that you’re going to place a menu on Screen A; you don’t need to worry about what colour this menu is going to be, or how you’re going to style the menu's text.<br></p><p>For more information on wireframing, check out the following resources:</p><ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399"><img class="roundup-block__preview-image" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/9203/preview_image/wireframing.png"><div class="roundup-block__primary-category topic-webdesign">Wireframing</div>
<div class="roundup-block__content-title">A Beginner’s Guide to Wireframing</div>
<div class="roundup-block__author">Winnie Lim</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing-in-omnigraffle--webdesign-8840"><img class="roundup-block__preview-image" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/6249/preview_image/preview-1.png"><div class="roundup-block__primary-category topic-webdesign">UX</div>
<div class="roundup-block__content-title">A Beginner’s Guide to Wireframing in Omnigraffle</div>
<div class="roundup-block__author">Justin Smith</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="http://design.tutsplus.com/articles/10-tips-for-building-wireframes-with-illustrator--cms-19984"><img class="roundup-block__preview-image" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/19984/preview_image/preview-wireframe.png"><div class="roundup-block__primary-category topic-design">UX</div>
<div class="roundup-block__content-title">10 Tips for Building Wireframes With Illustrator</div>
<div class="roundup-block__author">Ian Yates</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="http://webdesign.tutsplus.com/courses/wireframing-with-sketch"><img class="roundup-block__preview-image" src="https://cms-assets.tutsplus.com/uploads/users/71/courses/561/preview_image/wireframing-sketch-1.png"><div class="roundup-block__primary-category topic-webdesign">Wireframing</div>
<div class="roundup-block__content-title">Wireframing With Sketch</div>
<div class="roundup-block__author">Adi Purdila</div></a></li>
</ul><p>Wireframes are pretty deceptive—they may look like quick, rough-and-ready sketches, but they’re actually a powerful tool for exploring, defining and refining your app’s user interface. They can also help you identify any flaws with your initial screen designs, before you invest too much time into perfecting these designs. <br></p><p>It’s much easier to put a big cross through a wireframe, turn the page in your notebook and start again than it is to completely rewrite code you already spent <em>hours</em> working on.<br></p><p>So, I’ve sung the praises of wireframing long enough! How do you go about creating a wireframe?<br></p><p>You have a few options:<br></p><ul><li>Sketch your wireframes using pencil and paper.</li></ul><figure class="post_image"><img alt="An example of a paper wireframe" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-paper-example.jpg"><figcaption>A paper wireframe of our app’s Book a Hotel screen.</figcaption></figure><ul><li><p>Create digital wireframes using professional image-editing software such as Adobe Photoshop, or a dedicated wireframing program such as Pidoco, Axure, InDesign, Sketch, Omnigraffle, or Balsamiq Mockups. </p></li></ul><figure class="post_image"><img alt="An example of a digital wireframe" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-Balsamiq-mockup.png"><figcaption>A wireframe of the Homescreen, created using Balsamiq.</figcaption></figure><p>But why restrict yourself to one tool, when you can reap the benefits of both? Paper and digital wireframes each have their own unique set of strengths and weaknesses. Digital wireframing is perfect for creating polished and precise wireframes, but navigating multiple menus isn’t always the best way to get those ideas flowing—and it certainly isn’t ideal when you want to quickly test out multiple different ideas! On the other hand, paper wireframes are great for a rapid-fire brainstorming session, but you may struggle to create paper wireframes that are accurate and detailed enough to serve as blueprints for the kind of screens you're going to create. </p><p>I recommend creating your first drafts using pen and pencil (which is ideal for getting those creative juices flowing) and then, once you have a set of paper wireframes you’re happy with, you can spend some time refining these drafts using digital wireframing software.<br></p><p>This is the approach I’ll be using in this tutorial, but bear in mind that wireframing is a creative exercise, so there are no hard and fast rules here. Use whichever method works the best for you.<br></p><h3>Creating Your First Wireframe<br>
</h3><p>To give you the best possible overview of the wireframing and prototyping process, I’m going to pick one screen from my travel app and work on it throughout the rest of this article. The screen I’m going to select as my guinea pig is the checklist, as I think this particular screen contains some challenging UI elements that’ll make for an interesting example.<br></p><p>Just to refresh your memory, in part one I wrote the following description of how I imagined the finished checklist screen:<br></p><blockquote>
<em>In its default state this screen displays a checklist of all the tasks the user needs to complete, in order to plan a successful trip. Tapping any task will take the user to a screen where they can complete this task. Whenever the user completes a task, this item is ticked off their checklist.</em><br>
</blockquote><p>To create a first draft wireframe, grab some paper and your writing implement of choice, and then draw the rectangular outline of a typical smartphone or tablet.<br></p><p>I’m going to start by adding all the navigational elements to my wireframe. Looking at my screen map, I can see that the user needs to be able to reach three screens from the checklist: <br></p><ul>
<li>Select A City.</li>
<li> Book Transport.</li>
<li>Book Hotel.</li>
</ul><p>These screens represent two different kinds of navigation: backwards navigation and forwards navigation.<br></p><p>‘Select A City’ is the previous screen in my application’s flow, so it represents the user moving backwards through the application’s history. Android handles this kind of backwards navigation automatically (usually via the smartphone or tablet's ‘Back’ softkey) so you don’t need to add any explicit ‘Select A City’ navigation to your UI.<br></p><p>The other two screens are a bit different, as they represent the user moving forward in our application. The system doesn't handle forwards navigation automatically, so it’s our responsibility to provide the user with everything they need to be able to navigate to these screens. <br></p><p>These navigational elements are going to take the form of two <code class="inline">TextView</code>s, which I’m going to arrange in the style of a checklist (okay, so two items isn’t much of a list, but if I continued working on this project I’d eventually add more tasks to this list). In their default state, each <code class="inline">TextView</code> will remind the user that they need to complete this task, for example “You still need to book a hotel!” When the user taps either <code class="inline">TextView</code>, it’ll take them to the Book Transport or Book a Hotel screen, so they can complete this task. <br></p><p>When the user completes a task, the corresponding <code class="inline">TextView</code> will update to display information about the user’s hotel or their transport arrangements (I’m not going to add any of this info to my wireframe for now, but it’s something to bear in mind). <br></p><p>To create a checklist effect, I’m going to create a corresponding <code class="inline">ImageView</code> for each <code class="inline">TextView</code>. In its default state, each <code class="inline">ImageView</code> will display a red cross, but once the user completes a task this will be replaced by a green checkmark. <br></p><p><img alt="A first draft paper wireframe of the checklist screen" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototypnig-checklist%20screen.jpg"><br></p><p>Finally, I’m going to add a title <code class="inline">TextView</code>, which will display whatever the user has chosen to call this particular trip. <br></p><p>As you’re building your wireframe, you may encounter UI elements that could work in numerous positions and at different sizes. Creating a paper wireframe takes pretty much no time at all, so if you have any other ideas then take a few moments to wireframe them. In fact, you should aim to sketch out a few alternatives for <em>every</em> screen so you can decide which idea has the most potential.</p><p><img alt="A series of different wireframes for the checklist screen" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/prototyping-and-wireframing-multiple-pages.jpg"><br></p><p>Rinse and repeat for every screen that makes up your app, until you have a complete set of paper wireframes. The next step is turning these first drafts into more polished digital wireframes.<br></p><p>There’s plenty of software out there that was created specifically for wireframing, so it’s well worth spending some time researching your options on Google, although if you prefer you can use your favourite image-editing software instead, such as Adobe Photoshop.<br></p><p>Personally, I’m a fan of <a href="https://balsamiq.com/" target="_self">Balsamiq Mockups</a>!<br></p><p><img alt="The checklist screen as a digital wireframe created using Baksmiq Mockups" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-digital-wireframe.png"><br></p><p>Spend some time creating and perfecting your design in the software of your choice, and be on the lookout for any opportunities to tweak and refine your wireframe. Working with a new tool can also throw up some new ideas, so if you’re suddenly struck by a flash of inspiration about how you can improve your design, then grab some paper and wireframe these ideas. If they stand up to the scrutiny of paper wireframing, then go ahead and fold these changes into your digital wireframe. </p><p>Once again, rinse and repeat for the rest of your screens.<br></p><h2>Prototyping Your Project</h2><p>Time to put your designs to the test by creating a digital prototype based on your wireframes. </p><p>Prototyping gives you the chance to get some hands-on experience with how your design looks and functions on a real Android device, but it also allows you to test how your design translates across multiple screen configurations, via Android Virtual Devices (AVDs).</p><p>So how do you create a digital prototype?<br></p><p>The easiest way is to use Android Studio, which doubles up as a powerful digital prototyping tool thanks to the IDE’s built-in graphical layout editor. Throughout this section, I’ll be using many of the <a href="https://code.tutsplus.com/articles/whats-new-in-android-studio-22--cms-26629" target="_self">new features introduced in Android Studio 2.2</a>, so if you want to follow along then make sure you’re running Android Studio 2.2 Preview 1 or higher.<br></p><p>To create our prototype, boot up Android Studio and create a new project. To keep things simple, I’m going to use the ‘Empty Activity’ template. Since you’ll be testing this prototype on your own Android device, make sure you set your project’s minimum SDK to something that’s compatible with your Android smartphone or tablet.<br></p><p>Once Android Studio has created your project, open its <code class="inline">activity_main.xml</code> file and delete that annoying ‘Hello World’ <code class="inline">TextView</code> that Android Studio adds to this layout by default. Make sure you have the ‘Design’ tab selected so you can see Android Studio’s palette and canvas.<br></p><p>Now we’re ready to bring our wireframe to life! Let’s start at the top, with the screen’s title. It’s pretty obvious that this is going to be a <code class="inline">TextView</code>, but what about its contents? When the user starts planning a trip, they can call said trip whatever they like, so how do we know what text to use in our prototype?<br></p><p>Dealing with variable text is a recurring theme in this prototype, so let’s take a few moments to explore this problem in more detail now.<br></p><p>Prototypes are a powerful tool in the app developer’s arsenal, but let’s not get carried away—when a screen contains variable elements, there’s no way you can prototype every single version of that screen. This is certainly the case with our checklist, as the user could name their trip anything, from the pithy <em>Trip 1 </em>to the rambling and overly-excited <em>Fun-filled ultimate summer vacation of dreams</em>, and everything in-between.<br></p><p>While it’s <em>impossible </em>to test every conceivable title, a prototype is the perfect opportunity to put your design under some serious pressure by testing the most weird and wonderful variables you can think of. <br></p><p>For my checklist prototype, I’m going to create three string resources: one representing the “typical” title I imagine most users will opt for, one that’s unusually short, and one that’s seriously long-winded. Testing these extremes is one of the most effective ways of flushing out any potential problems that may be lurking in your screen designs. </p><p>Once you’ve created these string resources, you need to give this text somewhere to live, so grab a <code class="inline">TextView</code> from the palette and drop it onto the canvas.<br></p><p>Android Studio 2.2 introduced the concepts of constraints, which are handy for quickly building digital prototypes (and user interfaces in general). You can create constraints manually, but why go to all that effort when Android Studio can do the hard work for you?<br></p><p>There are two ways of getting Android Studio to create constraints for you, so let's explore both. The first method is to use autoconnect, so make sure you have this mode enabled by toggling the <strong>Autoconnect</strong> button (where the cursor is positioned in the screenshot below).</p><p><img alt="Select Android Studios Autoconnect button " src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-autoconnect.png"><br></p><p>Now, drag your <code class="inline">TextView</code> to the place it should appear in your layout. I want my title to be centred, so I’m going to drag the <code class="inline">TextView</code> to the middle of the canvas and release. When you release the <code class="inline">TextView</code>, Android Studio will respond by creating all the constraints required to hold this <code class="inline">TextView</code> in place.<br></p><p>Note, when two constraints are pulling a widget in opposing directions, those constraints appear as jagged lines, which is why these constraints look different to regular constraints.<br></p><p><img alt="Drag the TextView widget into the correct position and Android Studio will create constraints automatically" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-opposing-constraints.png"><br></p><p>If you’re unsure whether your <code class="inline">TextView</code> is perfectly centred, drag it slightly along the horizontal axis. Tooltips will appear either side of the widget, displaying its current position along the horizontal left and right axis. Drag the <code class="inline">TextView</code> until you get an even 50/50 split.<br></p><p>Set this <code class="inline">TextView</code> to display one of the string resources you created for your title—it doesn’t really matter which string you start with, as you’ll be testing them all anyway! <br></p><p>Next, we’re going to build our checklist. I’m going to use two images in my checklist: a green tick that’ll appear when the user has completed a task, and a red cross to signify that this item is still firmly on the user’s ‘To Do’ list. Create these images and add them to your project’s <code class="inline">drawable</code> folder.<br></p><p>Next, open your <code class="inline">strings.xml</code> file and create the two default messages:<br></p><ul>
<li>You need to book a hotel!</li>
<li>You need to sort out transport!</li>
</ul><p>Drag two <code class="inline">TextView</code>s from the palette and drop them onto the canvas—don’t worry about getting everything perfectly aligned just yet. Set these <code class="inline">TextView</code>s to display your default string resources.<br></p><p>Next, grab two <code class="inline">ImageView</code>s from the palette and drop them onto the canvas. As you release each <code class="inline">ImageView</code>, Android Studio will prompt you to select a drawable to display. We’re going to start by prototyping the default version of this screen, so select the red cross image for both <code class="inline">ImageView</code>s.<br></p><p>At this point, we’ve added all the necessary UI elements, but since we randomly dropped all of them onto the canvas, chances are your prototype doesn't bear much resemblance to your wireframe. Once again it’s constraints to the rescue!<br></p><p>The second way that Android Studio can automatically create constraints is via the inference engine. Spend some time dragging your <code class="inline">TextView</code>s and <code class="inline">ImageView</code>s into the perfect position on the canvas, and then give Android Studio's <strong>Infer constraints </strong>button a click (where the cursor is positioned in the screenshot below).<br></p><p>When you click this button, Android Studio will automatically create all the constraints required to deliver your current layout.<br></p><p><img alt="Select the Infer Constraints button" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-infer-constraints.png"><br></p><p>That’s the default version of this screen sorted, but we also need to test how this screen adapts once the user starts checking tasks off their ‘To Do’ list. Ultimately, I want these <code class="inline">TextView</code>s to display some basic information about the user’s hotel reservations and travel arrangements. This pits us against an old foe: variable text.<br></p><p>This screen needs to be flexible enough to display information about hotels (and airports, train stations, etc.) with seriously long names, but at the same time it shouldn’t look odd if the user books into a hotel that’s so cool and trendy that its name is a single letter, or the pi symbol (yep, it's <em>that </em>kind of hotel). <br></p><p>Once again, the solution is to create multiple strings that represent the most awkward text your layout might conceivably have to handle. If you’re unsure about just how extreme you should get with your string resources, then you can always turn to your friend the Internet for guidance. In this scenario, I’d spend some time researching hotels and airports, specifically looking for ones with long, short or just downright <em>weird </em>names, and then use the best examples in my string resources. <br></p><p>Once you’ve created all your resources, you can do a bit of preliminary testing by switching between the different string resources and drawables, and then checking the output in Android Studio’s built-in layout editor.<br></p><p>While this doesn’t give you the same level of insight as testing your app on a real Android device or AVD, it’s <em>much</em> quicker, making it the perfect way to identify any immediate, glaring issues with your layout.<br></p><p>Chances are you’ll need to shuffle your <code class="inline">TextView</code>s and <code class="inline">ImageView</code>s around a bit in order to find that perfect balance between a layout that can display a large amount of text and a layout that doesn’t look odd when it only has to display a few letters. <br></p><p>If you do need to make some tweaks (I know I had to!) then simply grab the widgets in the canvas and drag them into a new position. Once you’re happy with the results, just give the <strong>Infer constraints</strong> button another click and Android Studio will create an entirely new set of constraints for you.<br></p><p>Here’s my finished prototype.<br></p><p><img alt="The finished digital prototype" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/27060/image/wireframing-and-prototyping-finished-prototype.png"><br></p><p>Not bad, but the real test is how well this layout translates across Android smartphones, tablets and AVDs with different screen configurations, so this is exactly what we're going to do next.<br></p><h3>Testing Your Digital Prototype<br>
</h3><p>There’s no substitute for getting some hands-on experience with how your prototype looks and functions on a real device, so start by installing your project on your own Android smartphone or tablet and spending some time interacting with it, just to get a feel for the overall user experience. Don’t forget to test your prototype in both landscape and portrait mode!<br></p><p>If you identify any issues or opportunities to improve your screen design, then make a note of them, so you’ll know exactly what changes you need to apply once you’ve finished testing your prototype.<br></p><p>If your app is going to provide the best experience for all your users, then it needs to be flexible enough to adapt to a range of screen configurations. Once you’ve thoroughly tested your prototype on your own Android device, you should create multiple AVDs that have different screen sizes and densities, and then test your prototype across all of them. Again, if you notice anything ‘off’ about your prototype, or have an idea about how you could improve the design, then make a note of these changes so you won’t forget them.<br></p><p>Once you’ve thoroughly tested the default version of your layout, you need to test how your prototype will adapt once the user starts ticking tasks off their checklist.<br></p><p>Update both <code class="inline">ImageView</code>s to display the green tick drawable, and switch the default text for two of the alternate string resources—again, since we’ll be testing all our string resources, it doesn’t really matter which two you start with.<br></p><p>Put this new version of your prototype through the same vigorous testing process, which means installing it on your Android device for some hands-on experience, and then testing it across AVDs with different screen configurations. As always, make a note of your findings. Then, rinse and repeat for all the string resources you created for your checklist and title <code class="inline">TextView</code>s.<br></p><p>Once you’ve finished testing, you should review your notes. If you only need to make small tweaks, then you may be able to get away with applying these changes directly to your prototype and digital wireframes. However, if these changes are more dramatic or amount to a complete redesign, then you should spend some time exploring them in more detail first. Ideally, you should put your new ideas through the same wireframing, prototyping and testing process as your initial ideas, as this is still the most effective way of ironing out any issues with your designs.<br></p><p>Sure, it’s frustrating to find yourself back at the wireframing stage when it seemed as if you were almost done with the whole design process, but time spent exploring new ideas is <em>always</em> time well spent.<br></p><p>Even if you end up discarding these ideas in favour of your original design, at least you’ll know that you really are working with the best screen designs you could come up with. There’s nothing worse than investing a ton of time and effort into a project, when the whole time you have a nagging doubt in the back of your mind that maybe,<em> just maybe</em>, you should have gone down a different route. </p><p>Basically, if prototyping has stirred up any new ideas, then now’s the time to explore them!<br></p><p>Once you’ve tested all versions of your prototype across a range of AVDs, there's just one thing left to do: create a prototype of every other screen in your screen map, and subject every last one to the same level of scrutiny. <br></p><h2>Summary<br>
</h2><p>In this two-part series, we looked at how to take an initial idea and develop it into a detailed design.<br></p><p>This may sound like a lot of work (because, let’s be honest, it <em>is</em> a lot of work) but every step in this process will help you flush out any problems with your design and zero in on opportunities to improve your app.<br></p><p>Planning, wireframing and prototyping can actually save you time in the long run by reducing your chances of having to deal with major problems further down the line. As soon as you start writing code, fixing design issues becomes <em>much</em> more difficult. <br></p><p>But ultimately, investing so much time and energy into perfecting your app’s underlying design will help you deliver a better experience for your users. That means more downloads, more positive reviews, and more people recommending your app to their friends and family—and who wouldn’t want that?</p>2016-08-22T12:12:07.000Z2016-08-22T12:12:07.000ZJessica Thornsbytag:webdesign.tutsplus.com,2005:PostPresenter/cms-27039New Course on Prototyping With InVision and Principle<figure class="final-product final-product--image"><img src="https://cms-assets.tutsplus.com/uploads/users/48/posts/27039/final_image/Prototyping.png" alt="Final product image" /><figcaption>What You'll Be Creating</figcaption></figure><p>If you don’t already use prototyping in your work, you might instead use flat mockups or flow diagrams to imagine how users will interact with your app.&nbsp;</p><p>Getting started with prototyping can seem quite intimidating, especially with new tools becoming available all the time. But don’t fear! In our new short course,&nbsp;<a href="https://webdesign.tutsplus.com/courses/make-the-leap-from-static-mockups-to-moving-prototypes?ec_promo=short_course" target="_self">Make the Leap: From Static Mockups to Moving Prototypes</a>, you'll discover&nbsp;how to get started quickly.</p><h2>What You’ll Learn</h2><p>In this course, Envato Tuts+ instructor <a href="https://tutsplus.com/authors/chris-osullivan?ec_promo=short_course" target="_self">Chris O'Sullivan</a> will show you how prototyping will help you:</p><ul><li>Start thinking about your work interactively.</li><li>Communicate ideas to your team.</li><li>Test your designs with users.</li></ul><p>You'll learn how to use two tools that are easy to get started with: InVision and Principle. You’ll get tons of value for just a short investment of time.</p><h2>Watch the Introduction<br></h2><p><iframe src="//fast.wistia.net/embed/iframe/iqqndecabb" width="850" height="531" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed"></iframe>
</p><h2>Take the Course</h2><p>You can take our new course straight away with a subscription to <a href="https://tutsplus.com/subscribe-with-elements?ec_promo=short_course" target="_self">Envato Elements</a>. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.</p><p>Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.</p>2016-08-12T18:35:28.000Z2016-08-12T18:35:28.000ZAndrew Blackmantag:webdesign.tutsplus.com,2005:PostPresenter/cms-26848Get Started With Web Animation <p>Motion has become a really important part of the web design field in recent years. Motion and animation add layers of dimension to an interface, aiding the user, offering feedback, delighting, and engaging along the way.</p><p>In this article, I’ll run through the steps involved in learning animation for the web, from what it’s all about, though straightforward transitions, more complex animations, and useful resources. There’ll be some practical, interactive exercises to drill points home. By the end, you’ll have a solid idea of the current web animation landscape and how you can get to grips with it.<br></p><p>We’ll be looking at the following:</p><ul>
<li>What, and Why?</li>
<li>CSS Transitions<br>
</li>
<li>CSS Keyframe Animation</li>
<li>Authentic Motion<br>
</li>
<li>Cubic Bezier Functions (Timing)<br>
</li>
<li>CSS Libraries and Tools<br>
</li>
<li>SVG<br>
</li>
<li>JavaScript<br>
</li>
<li>Prototyping<br>
</li>
</ul><h2>What, and Why?</h2><p>The web design discipline is ever-changing, and one aspect to have emerged in recent years is the ability to animate. Browsers have become more capable, processors faster, and hand held devices have paved the way for “gestures”; swiping, pinching, and force touching.</p><p>Motion offers interfaces a number of things which improve user experience, including:</p><ul>
<li>
<strong>Causality</strong>: highlighting action and reaction, one thing causing another.</li>
<li>
<strong>Feedback</strong>: telling a user that they’ve successfully (or unsuccessfully) completed an action, such as clicking something, or entering form data.</li>
<li>
<strong>Progression</strong>: illustrating that one thing follows another, events in series–loading bars and spinners being perfect examples.</li>
<li>
<strong>Delight</strong>: good design is often said to be invisible, but well implemented motion can genuinely delight and engage your users.</li>
</ul><p>Motion improves the user experience and brings life to the web. With all this in mind it’s important that, as an interface designer, you take animation into account. Let’s get going with the basics!</p><h3>Learning Resources</h3><ul>
<li>
<a href="https://cssanimation.rocks/why-animate/" target="_self">Why animate?</a> by Donovan Hutchinson </li>
<li>
<a href="http://alistapart.com/article/web-animation-at-work" target="_self">Web Animation at Work</a> by Rachel Nabors</li>
</ul><p>Or jump right in with Craig Campbell’s practical animation course!</p><ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="http://webdesign.tutsplus.com/courses/practical-web-animation"><img class="roundup-block__preview-image" src="https://cms-assets.tutsplus.com/uploads/users/71/courses/828/preview_image/webanim-3.png"><div class="roundup-block__primary-category topic-webdesign">Animation</div>
<div class="roundup-block__content-title">Practical Web Animation</div>
<div class="roundup-block__author">Craig Campbell</div></a></li></ul><h2>CSS Transitions</h2><p><a href="https://www.w3.org/TR/css3-transitions/" target="_self">CSS transitions</a> are often a web designer’s gateway into the world of motion. They instruct the browser to take an initial state of an element, then an end state, and transition smoothly between the two. The syntax is relatively direct, comprising four properties and a shorthand version:</p><ul>
<li><code class="inline">transition-property</code></li>
<li><code class="inline">transition-duration</code></li>
<li><code class="inline">transition-timing-function</code></li>
<li><code class="inline">transition-delay</code></li>
</ul><p>Let’s start with a button. In this example we have a button with some base styles to make it look as though it’s raised from the page a bit. By default, if you hover over it, it changes colour. Then if you click on it, it appears to be pushed down. We’ve done this using the <code class="inline">background</code>, the <code class="inline">position-top</code>, and the <code class="inline">position-left</code> properties, but the change in each case is instantaneous:</p>
<iframe src="https://codepen.io/tutsplus/embed/qNPwrB/?height=300&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="300" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>Now let’s make the effect subtler, by adding a <code class="inline">transition</code> to the <code class="inline">.button</code> element. Adding, for example, <code class="inline">transition: all 1s;</code> will make sure that <em>all</em> property changes will be transitioned smoothly over the course of 1 second.</p><p>Uncomment the first rule in the CSS pane and you’ll see it take effect:</p>
<iframe src="https://codepen.io/tutsplus/embed/qNPwrB/?height=500&amp;theme-id=12451&amp;default-tab=css,result&amp;embed-version=2&amp;editable=true" width="850" height="500" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>Now you’ve seen that work, try uncommenting the second rule instead. In the second example we’ve listed each of the changing properties individually, so we can define different transition speeds to each one.</p><p>Lastly, try uncommenting the third example, where you’ll see we’ve added <em>timing functions</em> too. These affect the rate of transition–we’ll talk more about them shortly.</p><h3>Learning Resources</h3><ul><li><a href="https://webdesign.tutsplus.com/courses/up-and-running-with-css-transitions" target="_self">Up and Running With CSS Transitions</a></li></ul><h2>CSS Keyframe Animation</h2><p>With CSS transitions under your belt, it’s time to take things up a notch. CSS keyframe animation gives far more control, allowing you to specify changes all along a timeline. Two steps are necessary for keyframe animation; defining the keyframes themselves, and assigning the animation to your element of choice.</p><p>Let’s say we start with a ball.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/26848/image/ball.png"></figure><p>Now we can define some keyframes, setting a <code class="inline">from</code> state, and a <code class="inline">to</code> state. Here we’re saying that its <code class="inline">left</code> position property will begin at 5%, animating to 85%, effectively moving the ball across the screen.</p><pre class="brush: css noskimlinks noskimwords">@keyframes move {
from {
left: 5%;
}
to {
left: 85%;
}
}</pre><p>You can see we’ve nested the <code class="inline">from</code> and <code class="inline">to</code> within a <code class="inline">@keyframes</code> declaration. And we’ve named our animation <code class="inline">move</code>. Now we need to assign this animation to our ball, which we do like so:</p><pre class="brush: css noskimlinks noskimwords">.ball {
animation: 1s move;
}</pre><p>This is implemented in its most simple, shorthand form. We need to define how long we want the animation to last, and which animation we’re applying. Now when we load the demo, you’ll see the animation take effect:</p>
<iframe src="https://codepen.io/tutsplus/embed/dXkppB/?height=300&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="300" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p><strong>Note</strong>: the animation kicks in upon page load, so you’ll need to hit the <strong>rerun</strong> button in the corner of this embedded pen to see anything happen.</p><h3>More Control</h3><p>Going beyond simple <code class="inline">from</code> and <code class="inline">to</code> stages, we can define points all along the timeline using percentages. Using 0% and 100% would give us exactly the same result as before:</p><pre class="brush: css noskimlinks noskimwords">@keyframes move {
0% {
left: 5%;
}
100% {
left: 85%;
}
}</pre>
<p>Let’s add an extra step in the middle, and bring the ball back to its starting position. We’ll also make the animation iteration-count <code class="inline">infinite</code>, so it keeps looping. Edit the values in the pen below and see them take effect:</p>
<iframe src="https://codepen.io/tutsplus/embed/pbdELL/?height=340&amp;theme-id=12451&amp;default-tab=css,result&amp;embed-version=2&amp;editable=true" width="850" height="340" frameborder="no" allowfullscreen="true" scrolling="no">
</iframe>
<p>It’s possible to add multiple animations to a single element, change the animation direction, and to completely alter the timings. Take a look at these resources to find out more!</p><h3>Learning Resources</h3><ul>
<li><a href="https://webdesign.tutsplus.com/courses/up-and-running-with-css-keyframe-animations" target="_self">Up and Running With CSS Keyframe Animations</a></li>
<li><a href="https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068" target="_self">A Beginner’s Introduction to CSS Animation</a></li>
<li>
<a href="http://cssanimationspocketguide.com/" target="_self">The CSS Animations Pocket Guide</a> by Val Head</li>
<li>
<a href="http://uianimationnewsletter.com/" target="_self">The UI Animation Newsletter</a><br>
</li>
</ul><h2>Authentic Motion</h2><p>Motion brings static objects to life, and the difference <em>authentic</em> motion can make to this is immense. Motion gives an object mass, places it in space, and real-world physics suddenly apply to it. If an object moves in a way we’re familiar with, we’re far more likely to make that all-important emotional connection. It’s the difference between a circle moving up and down, and a ball bouncing:</p>
<iframe src="https://codepen.io/tutsplus/embed/JKOENr/?height=400&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="400" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>The difference between these two is clear (though the bounce is far from being perfect). Learning how to give your animation authenticity is crucial.</p><blockquote>“Most natural action tends to follow an arched trajectory, and animation should adhere to this principle by following implied ‘arcs’ for greater realism.” – <a href="https://en.wikipedia.org/wiki/12_basic_principles_of_animation" target="_self">Twelve Basic Principles of Animation</a>
</blockquote><h3>Learning Resources</h3><ul>
<li>
<a href="https://material.google.com/motion/material-motion.html" target="_self">Material motion</a> from Google’s Material Design Guidelines<br>
</li>
<li>
<a href="https://webdesign.tutsplus.com/tutorials/adding-appeal-to-your-animations-on-the-web--cms-23649" target="_self">Adding Appeal to Your Animations on the Web</a><br>
</li>
<li>Disney’s <a href="https://en.wikipedia.org/wiki/12_basic_principles_of_animation" target="_self">Twelve Basic Principles of Animation</a><br>
</li>
</ul><h2>Cubic Bezier Functions (Timing)</h2><p>We’ve covered “easing” a couple of times already in this article; it’s the rate at which something moves, and can be expressed as a curve along two axes. In CSS there are a few built-in timing functions which you can use with their keywords (<code class="inline">linear</code>, <code class="inline">ease-in</code>, <code class="inline">ease-in-out</code> etc.) but you can describe these timings more precisely with a <em>cubic bezier function</em>, which looks like this: </p><figure class="post_image"><img alt="12511" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/26848/image/bez.png"><figcaption>.1,.25,.1,1</figcaption></figure><p>As time moves constantly along the x axis, the rate of movement speeds up and slows along the y axis. This example above is used on our bouncing ball from earlier; you can imagine the ball moving quickly upwards, then slowing as it reaches its apex. Take a look at this curve on <a href="http://cubic-bezier.com">cubic-bezier.com</a> to help you visualize it.</p><p>The curve is controlled by the two handles (which you’ll be familiar with if you’ve ever used <a href="https://design.tutsplus.com/tutorials/illustrators-pen-tool-the-comprehensive-guide--vector-141" target="_self">the pen tool</a> in Adobe Illustrator or Sketch) and the cubic bezier function we can use in CSS reflects those handles. So, our function looks like:</p><pre class="brush: css noskimlinks noskimwords">cubic-bezier(.1,.25,.1,1)</pre><p>There are four values, each one ranging (for the sake of argument) from 0 to 1 They represent:</p><ul>
<li>the x coordinate of handle 1 (.1)</li>
<li>the y coordinate of handle 1 (.25)</li>
<li>the x coordinate of handle 2 (.1)</li>
<li>the y coordinate of handle 2 (1)</li>
</ul><p>Understanding how bezier functions work will dramatically improve your animations, particularly if you’re aiming for <em>authentic</em> motion.</p><h3>Learning Resources</h3><ul>
<li>
<a href="https://webdesign.tutsplus.com/courses/easing-in-to-cubic-bezier-functions" target="_self">Easing in to Cubic Bezier Functions</a><br>
</li>
<li>
<a href="http://cubic-bezier.com/">cubic-bezier.com</a> by Lea Verou<br>
</li>
<li>
<a href="http://easings.net/">easings.net</a> by Andrey Sitnik</li>
</ul><h2>CSS Libraries and Tools</h2><p>Coding good-looking CSS animation by hand can be tough, but there are a number of libraries available which do the heavy lifting for you. <a href="https://daneden.github.io/animate.css/" target="_self">Animate.css</a>, by Dan Eden, is a stylesheet filled with keyframe-based animations, all with custom class names, ready for use.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/26848/image/anim.png"></figure><h3>Learning Resources</h3><ul>
<li><a href="https://webdesign.tutsplus.com/courses/learn-motion-ui-from-top-to-bottom" target="_self">Learn Motion UI From Top to Bottom</a></li>
<li><a href="https://webdesign.tutsplus.com/tutorials/quick-tip-bring-your-website-to-life-with-animatecss--cms-19423" target="_self">Quick Tip: Bring Your Website to Life With Animate.css</a></li>
</ul><h3>More CSS Libraries</h3><ul>
<li>
<a href="http://www.minimamente.com/example/magic_animations/" target="_self">Magic Animations</a><br>
</li>
<li><a href="http://www.vittoriozaccaria.net/dyn-css" target="_self">DynCSS</a></li>
<li><a href="http://elrumordelaluz.github.io/csshake/" target="_self">CSS Shake</a></li>
<li><a href="http://ianlunn.github.io/Hover/">Hover.css</a></li>
</ul><h2>SVG</h2><p>SVG (Scalable Vector Graphics) have become the web designer’s best friend in recent years, giving us crisp graphics, lighter pages, and animatable elements. Some of what we’ve discussed can be applied directly to SVG elements, but many properties behave differently.</p><p>Here’s an inline SVG with a transition applied to its color upon hover. However, you’ll notice we’re using the <code class="inline">fill</code> property, not the <code class="inline">background-color</code> which we would expect with an HTML element:</p>
<iframe src="https://codepen.io/tutsplus/embed/VjAbAb/?height=300&amp;theme-id=12451&amp;default-tab=css,result&amp;embed-version=2&amp;editable=true" width="850" height="300" frameborder="no" allowfullscreen="true" scrolling="no">
</iframe>
<p>SVG can be animated with CSS much like we’ve discussed in the rest of this article. If you can transform or translate it with HTML, you can do the same with SVG.</p><p>But SVG can also be manipulated through SMIL (<a href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a>) which allows you to use things like the <code class="inline">&lt;animate&gt;</code> element, directly within the SVG. Check out this SVG circle, transitioning across the screen:</p>
<iframe src="https://codepen.io/tutsplus/embed/bZYWQO/?height=300&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="300" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>This is a circle, containing an <code class="inline">&lt;animate&gt;</code> specifying which attribute to animate (the <code class="inline">cx</code> coordinate in this case), from a position of 50px to 400px, duration of 2 seconds, and repeating indefinitely.</p><pre class="brush: html noskimlinks noskimwords"> &lt;circle cx="0" cy="50" r="50" fill="#2098d1"&gt;
&lt;animate attributeName="cx" from="50" to="400" dur="2s" repeatCount="indefinite" /&gt;
&lt;/circle&gt;</pre><p>SMIL is a very powerful set of tools, start reading up below!</p><h3>Learning Resources</h3><ul>
<li>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-use-animatetransform-for-inline-svg-animation--cms-22296" target="_self">How to Use “animateTransform” for Inline SVG Animation</a><br>
</li>
<li>
<a href="https://css-tricks.com/guide-svg-animations-smil/" target="_self">A Guide to SVG Animations (SMIL)</a> by Sara Soueidan<br>
</li>
<li>
<a href="https://webdesign.tutsplus.com/courses/animating-with-snapsvg" target="_self">Animating With Snap.svg</a><br>
</li>
<li>
<a href="https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846" target="_self">Sign on the Dotted Line: Animating Your Own SVG Signature</a><br>
</li>
</ul><p>Love the idea of animating SVG but not sure <em>what</em> to animate? Check out the <a href="https://studio.envato.com/explore/vector-illustration" target="_self">vector illustration services</a> on Envato Studio and see what’s on offer!</p><figure class="post_image"><img alt="Characters Elements and Object ready for Video Animation" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/26848/image/studio.png"><figcaption><a href="https://studio.envato.com/explore/vector-illustration/9488-characters-elements-and-object-ready-for-video-animation" target="_self">Characters, Elements and Objects ready for Video Animation</a></figcaption></figure><h2>JavaScript</h2><p>Many front-end developers first toy with JavaScript (or jQuery) by adding animation to web pages. Where browser support for CSS alternatives is sketchy, JS is a good bet.</p><p>jQuery’s UI library comes packaged with a number of off-the-shelf UI helpers, including the <code class="inline">effect()</code> method, demonstrated below (choose an effect from the dropdown and watch as it’s applied to the content:</p>
<iframe src="https://codepen.io/tutsplus/embed/NAXGPJ/?height=400&amp;theme-id=12451&amp;default-tab=result&amp;embed-version=2" width="850" height="400" frameborder="no" allowfullscreen="true" scrolling="no"></iframe>
<p>Beyond this, JavaScript (in the right hands, not mine) can offer <em>serious</em> animation, and since Adobe Flash officially handed in its resignation some brilliant JavaScript libraries have emerged. GreenSock’s Animation Platform (GSAP) is arguably the most powerful–giving developers a whole host of timeline and tween-based tools.</p><p>Take a look at our <a href="https://webdesign.tutsplus.com/courses/greensock-animation-platform-first-steps" target="_self">beginner’s course</a> and see how you fare with GSAP!</p><h3>Learning Resources</h3><ul>
<li>
<a href="https://webdesign.tutsplus.com/courses/greensock-animation-platform-first-steps" target="_self">GreenSock Animation Platform: First Steps</a><br>
</li>
<li>
<a href="https://webdesign.tutsplus.com/courses/advanced-animation-with-gsap-plugins" target="_self">Advanced Animation With GSAP Plugins</a><br>
</li>
</ul><h2>Prototyping</h2><p>Gone are the days of static design deliverables being enough–images and flow diagrams don’t communicate enough information. Nowadays shrewd clients want to see and feel what you’re designing, experience the movement, which is why prototypes answer far more questions.</p><blockquote contenteditable="false" class="twitter-tweet">
<p>"If a picture is worth 1000 words, a prototype is worth 1000 meetings." —saying at <a href="https://twitter.com/ideo">@ideo</a></p>— John Maeda (@johnmaeda) <a href="https://twitter.com/johnmaeda/status/518556402902925313">October 5, 2014</a>
</blockquote>
<p>Prototypes can be pretty raw, or reflect the end product quite accurately, but wherever they fall on this scale creating them needs to be efficient. Where motion and animation is concerned there are a number of applications to help you communicate your designs. </p><p><a href="http://blogs.adobe.com/animate/welcome-adobe-animate-cc-a-new-era-for-flash-professional/" target="_self">Adobe Animate</a> is Flash for the next generation, offering advanced animation tools. Adobe <a href="https://webdesign.tutsplus.com/tutorials/how-to-use-after-effects-for-web-animation-prototypes--cms-21451" target="_self">After Effects</a> is a video production tool, but also offers advanced timeline-based motion. But then there are simpler applications, such as Principle for Mac, and even Keynote:</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/30/posts/26848/image/kenote.png"><figcaption>Keynote Motion Graphic Experiment, by Linda Dong</figcaption></figure><p>Once motion design has become a part of what you do, finding the best tools to show the world is an important step!</p><h3>Learning Resources</h3><ul>
<li>
<a href="https://webdesign.tutsplus.com/courses/motion-design-with-principle-for-mac" target="_self">Motion Design With Principle for Mac</a><br>
</li>
<li><a href="https://webdesign.tutsplus.com/tutorials/timeline-based-animation-for-the-web-with-hype-3--cms-24899" target="_self">Timeline-Based Animation for the Web with Hype 3</a></li>
<li>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-use-after-effects-for-web-animation-prototypes--cms-21451" target="_self">How to Use After Effects for Web Animation Prototypes</a><br>
</li>
<li>
<a href="http://www.lindadong.com/blog/keynotemotiongraphic" target="_self">Keynote Motion Graphic Experiment</a> by Linda Dong<br>
</li>
</ul><h2>Conclusion</h2><p>And there we have it! This guide should have given you a solid understanding of the web animation landscape as it exists today. With all these learning resources under your belt you’ll be armed with a whole new set of skills to explore the world of motion design.</p><p>I hope you found it useful. Please share your own tips and resources in the comments below, or on the <a href="https://forums.envato.com/">Envato community forum</a>.</p>2016-07-14T12:29:50.217Z2016-07-14T12:29:50.217ZIan Yates