Prototyping Design Tutorial Roundup: Best Video Tutorials

In general, pen and paper prototyping is most often used to display conceptions in the product development process. Which processes simply and rapidly with a brief sketch. But you still have a lot of work to do, if you want to get the wireframes to be more perfect. On YouTube, somebody shows a paper-based prototype for Daum’s webmail service. All the button clicks and page interactions displayed logically and clearly by two people cooperated with each other. While time is money and everything at this quick tempo environment. Some users wondered how long it takes to rehearsal for the presentation. The more worried is the sequence of the paper pieces, and the problem of documents missing.


Comparatively, employing with a variety of wireframing/prototyping tools is a more advanced operation. So many introduction or summary of such tools explosively listed. But, do you really know how to use it? Maybe some of you are eager to find out the video tutorial on YouTube or somewhere. It is better to teach you how to do it better than only names. There are some video tutorials of the frequently-used tools. Just take a look.

Wireframing Tool – Balsamiq

Balsamiq Tutorial

Balsamiq Mockups started in 2008 in California. It is the pioneer of hand-drawn style prototyping tool and reproduces the experience of sketching on a whiteboard. It is a simple wireframing tool, which means it cannot use to make the interactive prototype. To help users learn better and faster, a 3-minute video tutorial shows at the home page. More detailed tutorials are available on YouTube, such as this Balsamiq Tutorial with 65K + views, which created in November 2013.

Interactive Prototyping Tool – Mockplus

30 seconds prototyping with Mockplus

Mockplus is a simple and easy-to-learn interactive prototyping tool. Which interaction design is fully visualized, that’s WYSIWYG. It’s unique link points allowing you to create interactions between components and page drag and drop easily. A 10 minutes video tutorial available at the Tutorial page, that is, learning right, using right. Also, you can find more tutorials on YouTube, then you will learn that Mockplus could help you to achieve the more advanced and complicated interaction effects. Its comparative advantage could see from the “30 seconds prototyping with Mockplus”. Mockplus tutorial has accumulated 10K + views within a few months.

Interface Editing Tool- Sketch

Sketch App Tutorials Series Introduction

Sketch is a vector drawing application for all designers. Vector graphics is currently the best way to conduct web pages, icons, and interface design. Experienced designers spend a few hours can use it well with their own design skills in Sketch. If you are a beginner and don’t know how it works, simply follow the tutorial videos. LevelUpTuts’ Sketch App Tutorials Series Introduction, which has 300K + views will teach you well in learning Sketch.

(adsbygoogle = window.adsbygoogle || []).push({});

Collaboration & Presentation Tool – Invision

Invision video tutorial

Strictly speaking, InVision not an interaction design tool, but it can help designers and design teams to do prototyping more efficiently. Creating an online prototype requires only four parts: creating a project, uploading visual design drafts, adding links, and generating online prototypes to communicate with colleagues, users, and get feedback. A 3-minute video tutorial available on it’s website for a quick overview of Invision. Similarly, you can go to YouTube to find more detailed Invision video tutorial.

You may also interested in:

How to Be A Completely Failed UX Designer?

What Kind of Prototypes and Design Tools You Need for Your Audience?

100 Excuses for Designers — Because sometimes you need one! (by Jon Moore)

20 Prototyping and Wireframing Tools for Web Designers

UI & UX & Graphic Professionals: Best Facebook and LinkedIn Groups to Join


10 Best Web Development Tutorials For Beginners

Maybe you’re looking to build a website for the business you’re bootstrapping from the ground up. Maybe you’d like to enter the world of web development and are looking for an introduction to coding. Or maybe you’re just trying to stay a step ahead (or behind) your hacker kid.

Whatever the case, we’ve got the resources to help you get started. Here’s a list of the 10 best web development tutorials for beginners.website-code

1. Codecademy

It’s almost like a university course, only you control when and where class happens. Codecademy’s beginning web development course walks you through the basics of HTML and CSS, giving you projects throughout to practice newly learned skills. And once you’ve mastered the fundamentals, it’s easy to launch into a new course on a more specialized skill, such as PHP, JavaScript or Python.

2. HTML Dog’s Beginning HTML Guide

This set of tutorials is much less flashy than Codecademy, but just as useful. HTML Dog provides a straightforward, easy-to-follow group of tutorials covering HTML fundamentals. If you’re interested in learning CSS or JavaScript, they’ve got beginner’s guides for those as well.

3. Ruby on Rails Tutorial

One of the most popular web development frameworks, Ruby on Rails—based on the Ruby language—powers Basecamp, Twitter and GitHub, just to name a few. If you’re interested in building your own awesome web app, check out this free Ruby on Rails tutorial book by Michael Hartl. Covering more than just Rails, you’ll also learn the ins and out of web application development.

4. Mozilla Developer Network

From the folks behind the Firefox browser comes this helpful list of web development tutorials. Focused on HTML, CSS and JavaScript, tutorials run the gamut of beginner to advanced.

5. PHP 101 for the Absolute Beginner

This popular scripting language is not just one of those fleeting web development trends (Flash, anyone?); it’s here to stay, and has long been used for server-side programming on a large number of websites. If you’ve been itching to learn it, start here with Zend’s free tutorials. They’re easy to understand and will have you writing code in no time.

6. GitHub for Beginners

GitHub is the de facto collaboration tool for many software development projects. If you want to work in web development, familiarity with GitHub is a must. This tutorial is a great way to learn the ins, outs and terminology that make the networking site tick. And like the title says, this tutorial truly is for beginners—no prior programming experience is required.

7. Non-Programmer’s Tutorial to Python 3

One of the top 8 programming languages, Python is often used as a scripting language for web apps. This tutorial will help you master the basics of Python, but more importantly, you’ll master the fundamentals of programming in the process.

8. 30 Days to Learn jQuery

jQuery is an open-source JavaScript library, designed to simplify the job of client-side scripting. If you’re looking to use it in web development, check out this tutorial—30 days worth of 10- to 15-minute lessons from Tuts+ will get you started on the road to being a jQuery ninja.

9. A Roadmap for Beginning to Code

As author Jimmy Li states in his intro, “You don’t know what you don’t know.” Well, with this big-picture tutorial on beginning web development, you’ll quickly learn what you need to know and how to get there. It’s a great read before jumping into anything else.

10. Coding Pitfalls for Beginners

Read this last tutorial after you’ve spent time learning your chosen web development frameworks. Also from the Tuts+ team, this article outlines some of the common mistakes made by beginning programmers. With specific insight into Ruby, JavaScript and PHP issues with some language-neutral insights thrown in, it’s definitely worth a read.