1980k 1980k

3D LED POV Mirror. “We Are with You, Mirror” is a piece by Brady Marks from VIVO Media Arts Centre that was shown at the Vancouver Mini Maker Faire. It is a 3D persistence of vision volumetric display that acts as a mirror, using four spinning Peggy 2 boards to reflect visitors movements in low resolution 3D LED glory. Source

Read More
1980k 1980k

User Experience Interface Design

Welcome to the UX/UI Design Fundamentals Prep Course for the Bitmaker Labs User Experience & Interface Design 12 week immersive.

This course is intended to develop you as a strong Product Designer with front-end development knowledge. You’ll examine the fundamentals of user-centred design, including user research, information architecture, interaction design, UI design, and usability testing. By the end of the course, you will be able to design and build basic prototypes using Adobe Illustrator, HTML, CSS, basic JavaScript and jQuery.

Structure of this Prep Course


There are five main parts to this prep-course. They are not intended to replace the actual curriculum, but are just here to get you started. It’s essential that you complete each part in order:

Part 1: An Introduction

Part 2: Tools of the Trade

Part 3: Researching Design

Part 4: Learning the Basics of Code

Part 5: Design and Code Your First Homepage

Part 1: An Introduction


Once the course gets started, we’ll have a lot to cover, so it’s important to get a good understanding of the fundamentals to start strong.

While you complete this prep course, you might have questions and may need a hand— that’s awesome. These are three resources to help you out.

Your most important support resource: us  each other


Get to know your classmates, and work through designing things together. That’s what the entire course is about. Connect through Twitter, Facebook, or Google+. Open communication is key.

Feel free to reach out to @bitmakerlabs or @tailoredUX with the hashtag #DesignPrep for questions about this prep course over Twitter. We’ll make sure you’re using your resources, but will be happy to point you in the right direction and help out along the way.

If you have questions about enrolling in the course, or find yourself having a hard time with the prep course, don’t hesitate to reach out to Bitmaker Labs (design@bitmakerlabs.com) or tailoredUX (design@tailoredux.com) with the subject “Design Prep”.

Part 2: Tools of the Trade


We’ve broken down this section of the tutorial between all the tools you’ll need to know to make sure you’re well equipped with a jump start into getting down to design & development from Day 1.

Part 3: Researching Design


So what is UX?

The definition of User Experience Design, UX, or Experience Design, can be really controversial. UX is a way of thinking, can involve (but doesn’t necessarily have to) use “Design Thinking” (which is a major topic in and of itself), and can be approached in a lot of different ways.

During the course, we’re going to focus on practical applications of “UX” to web and mobile apps, and cut through the fuzziness of the meta conversation around UX. Our definition for UX is through the perspective of its’ application in designing software, or digital products.

In preparing for this, we will research and reflect ourselves on what we believe the definitions are for User Experience, and the disciplines that surround UX that are practiced in their own right:

Section 1: User Experience Design

Section 2: User Research

Section 3: Information Architecture

Section 4: Interaction Design

Section 5: User Interface Design

Section 6: Usability

Your first task is to research and write about these elements of UX Design:

Research on each of these topics, and structure your findings in any way you’d like.

But do write them down on a piece of paper, or post-its, or a notebook.

Then write a series of blog posts on Medium with your findings. Take pictures of your research and include them in your posts.

To help you with structuring your topics, and get you thinking about questioning design, here are the topics of your blog posts. The ultimate point is to take away the ambiguity so that we’ll all be talking the same thing when we kick off the course, and actually tangbile conclusions to with each other.

Blog post #1: User Experience Design


What is UX? Who defines UX? Whose job is “UX Design”? Are there “UX Designer” jobs out there? What are the differences between them? Use images in your post talking about this, and write about them.


See Gube, Jacob (2010). What is User Experience Design? Overview, Tools and Resources. Published in Smashing Magazine http://bit.ly/1iRrob9

Blog post #2: User Research


What is User Research? Are there any jobs dedicated to solely User Research? What does a User Researcher do for product design?


See Kuniavsky, Mike (2003). Crafting a User Research Plan. Published in Adaptive Path http://www.adaptivepath.com/ideas/e000107/

Blog post #3: Information Architecture


What is Information Architecture? What’s a job description for an Information Architect? What does an Information Architect do day to day? What does Information Architecture look like? Use images in your post talking about this, and write about them.

See Wodtke, Christina (2009). The Elements of Social Architecture. Published in A List Apart. http://alistapart.com/article/theelementsofsocialarchitecture

Blog post #4: Interaction Design


What is an interaction Designer? What’s the job description of an Interaction Designer? What does an Interaction Designer do day to day? What does interaction design look like? Use images in your post talking about this, and write about them.


See Maier, Andrew (2009). Complete Beginner’s Guide to Interaction Design. Published in UX Booth. http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

Blog post #5: UI Design


What is UI Design? What does a UI Designer do day to day? What does UI Design look like? Find examples of 5 beautiful home pages for design agencies. Find examples of 5 beautiful home pages of designers. Use images in your post to reflect on why you liked them.

See Usability.gov (2011). User Interface Design Basics. Published on Usability.govhttp://www.usability.gov/what-and-why/user-interface-design.html



Blog post #6: Usability


What is Usability? Whose job is it to manage the usability of an application? What’s the difference between “User Research” and “Usability”? What are the different types of usability testing you can carry out? Hint: start with Heuristic Testing.


See Nielsen, Jakob (2012). Usability 101: Introduction to Usability. Published in NNGroup.com. http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Note: your research skills, and the way you approach thinking about design is the #1 thing that will help you be successful in this course. These blog posts have one real purposes: challenge your research skills and how you communicate your work.

We’d like you to publish each blog post on Medium and share with your peers, and with us over Twitter.

Part 4: HTML & CSS


We don’t like to think of things in terms of hours, or tasks. We’d just like you to take the time to really dive into, and have fun with a web environment that teaches HTML & CSS.

Our UX/UI Fundamentals course will cover the same concepts that are introduced in this Code Academy course. The magic will be in applying them to real, hands on projects with a design focus.

To prepare, CodeAcademy has a great interactive tutorial to run you through the basics:

http://www.codecademy.com/tracks/web

Completing this code academy prep course is mandatory to start our program. Send section completion screenshots to design@bitmakerlabs.com

Part 5: Design & Code Your First Homepage


After you’ve completed the HTML/CSS course on CodeAcademy, you should be familiar with the basics of how to build a profile page for yourself.

1. Create a narrative

Your profile page should answer the following questions:

i. Who are you? Where are you from? 
ii. What do you currently do? What do you want to do? 
iii. Let’s see you! Do you have an avatar / picture?

iv. Have you done any type of design related work? 
v. Have you built anything lately?
vi. Have you completed a non-design related project?

Answer these questions for that work:

i. Show us a picture / image of it 
ii. Give it a title 
iii. Describe what it is? 
iv. What did you learn from this project?
v. How do you think it relates to UX Design?

2. Sketch a rough layout on paper

Sketch how you’d lay this content out on a single page site. Use your blog post #5 as inspiration and look for examples on Dribbble of designers home pages. Mine for example is pretty old right now (I can’t wait to design a new one with you when the course starts!), but it still tells a pretty good story.

3. Design directly in code

Once you’re done designing, using your sketches of the layout you’d like, and using the inspiration from your research in blog post v, develop a basic 1 page layout with your answers from task 1. Pay attention to things like: font-size for headers, sub-headers, and body copy, and font weight for all of these things as well.

We don’t want you to dwell too much on the prettiness of the colours, so use when deciding on a colour scheme, use this for inspiration (and actual colours!)http://flatuicolors.com/

4. Publish your site on Dropbox

Follow the instructions on this page to host your site on dropbox. It’s the fastest way to get your page out there. Share it on twitter with the hashtag #helloworldUX

http://www.maclife.com/article/howtos/how_host_your_website_dropbox

That’s it!


This all completes your prep course requirements for the User Experience & Interface Design Prep Course.

If you have any questions about the full course, feel free to e-maildesign@bitmakerlabs.com.

If you’d like to speak to the designers, you can find us on twitter here: @tailoredUX,@mustefaJ, and @sidramatik. We’re happy to chat, and look forward to seeing you in July.

Source

Read More
1980k 1980k

The Year of Interaction Design Tools

A brief survey on the state of interaction + prototyping

We’re six months in to 2014, and designers have the widest selection of interaction and prototyping tools to date. The community is blossoming, and bridging the gap from mockup to working prototype is now easier than ever.
Inspired by the upcoming Pixate, I’ve compiled a brief breakdown of the state of interaction design tools in 2014.


Webflow

https://webflow.com/
$16+ a month | Web app
Webflow is a web app that allows users to design websites in the browser and that are completely coded and live. Webflow’s friendly WYSIWYG editor gives designers full control over the output, including the appearance on mobile devices.

Webflow is continuously adding new features — including web fonts, video support, continued W3C compliance, interactive states — and it even includes hosting, too.

Marvel

https://marvelapp.com/
Free | Web app
Marvel is a free web app for prototyping for web and mobile designs. With Marvel, work is done entirely online — but syncs with your Dropbox, allowing you to easily pull in mockups from your private or company files. Marvel also supports PSD files — so you don’t have to convert files before creating prototypes.

Macaw

http://macaw.co/
$99 | Mac & Windows
Macaw is a desktop WYSIWYG design tool that outputs working, live code. It’s particular strength lies in creating responsive designs: Macaw’s built-in breakpoint editor makes it easy to create pixel-perfect designs at any screen size.
Although no coding knowledge is required, basic experience with HTML and CSS certainly enhances the final product.

InVision

http://www.invisionapp.com/
Free | Web app
InVision is not strictly an interaction design tool. InVision is used for prototyping and productivity. For prototyping, InVision allows you to add interactive events to static images to demo user interaction. At the same time, InVision’s project management features allow both stakeholders and designers to interact with prototypes before development begins.

Flinto

https://www.flinto.com/
$20 a month | Web app

Flinto allows you to create interactive prototypes that are useable both on the web and on a mobile device. Flinto allows designers to take static images and create prototypes that can be scrolled, rotated, and interacted with however you want.
One particularly enticing feature: Flinto prototypes can be used natively on Android and iOS devices — so, you can interact with your latest Instacart-for-Cats prototype on your own iPhone or Android device.

Quartz Composer

Quartz Composer is a developer tool created by Apple for use in motion graphics. Although not its original purpose, Quartz Composer has been adopted by the interaction design community as a code-free option for showing animation and state change in designs.
Quartz Composer can be daunting at first glance —with a significant learning curve. Luckily, support is growing. Facebook and IDEO have recently released new Quartz Composer libraries to make the program more accessible to first time users.

Origami

http://facebook.github.io/origami/
Free | Mac only
Origami is a Quartz Composer library created by the Facebook Design team to help prototype interaction on mobile devices. It allows designers to easily replicate common animation and interactions that occur on mobile devices — think animating image transitions or button presses.
Like Quartz Composer, Origami is particularly useful for prototyping, but it doesn’t output useable code. Its claim to fame: Origami was instrumental in designing Facebook’s most recent mobile app, Paper.

Avocado

http://labs.ideo.com/2014/05/27/avocado/
Free | Mac only
Like Origami, Avocado aims to improve Quartz Composer by adding a library that mimics common interaction on mobile devices.
While Origami focuses on interaction and animation, Avocado focuses on replicating common UI elements for iOS — for example, a working iOS keyboard — allowing users to prototype ideas for iOS without using any code.

Framer.js

http://framerjs.com/
Free | Javascript framework
Framer.js is a Javascript framework for prototyping event-triggered animation. Framer boasts many features — one being a built-in generator that processes layer groups from your own PSD files and outputs each group into layers that form the basis of your project.
Framer is a Javascript framework — so unlike other options here, it doesrequire an understanding of HTML, CSS, and Javascript. However, it’s not bound to any specific program. You can host it and interact with it anywhere and everywhere.

Source

Read More
1980k 1980k

How designers can create interactive prototypes with Illustrator

At the start of a product idea the designer uses wireframes, mockups and prototypes to get feedback as fast as possible. Balancing the amount of time spent creating these temporary assets and reducing misinterpretation is key.

Tools like Illustrator give the designer the flexibility to experiment and draw without being forced to think about technical constraints early in the process. It’s great for quickly outputting static mockups, though Illustrator does not have great tools built-in to express interactions or different states in the product.

This article explains how you can quickly go from Illustrator to an interactive clickable prototype in the browser without the need for a developer, without writing HTML, in about 10 minutes.

The goal

As an example we’re going to prototype a small fruit application. The end result of this process is embedded below. Try hovering and clicking the first row.

The example contains some common interaction elements like hover states, tooltips, and dialogs. This is all easily layed out in one artboard. There’s no need to export and maintain different PNGs for each state of the product. You don’t have to upload your assets to a 3rd party tool. The technique that is about to be explained just exports one SVG with all the states in it. Sounds good? Let’s get our hands dirty.

Preparing your Illustrator document

There are two things to keep in mind when you’re going make a prototype out of your Illustrator document;

  • Create a logical hierarchy and name the important elements (layers, groups and shapes) in your "Layers" palette. Keep in mind that we’re going to export the whole document in one SVG file.
  • All elements should live in the same artboard. Hidden elements can later be made visible after a mouse event in the browser. e.g., a dialog can be hidden, but it should be the topmost element.

The name of an element will be used as its ID. This ID is later used to attach mouse event listeners to its element. This is what makes SVG so interesting for prototyping compared to bitmaps; every shape or group is its own element in the browser.

A group’s click area will be exactly the area its child shapes cover. To avoid potential gaps in its hit target you can add a big invisible rectangle (zero opacity) to the group. That rectangle should cover what you want the group’s hit target to be.

When you’re done mocking up you can export the document as an SVG file using"Save as…" and select "SVG" from the file format list. In the export dialog you can optionally embed the images and fonts used inside the document. If you’re not going to manipulate the text or numbers using JavaScript you can select "Create outlines". This makes sure the fonts look the same on all computers.

The visual part is ready to go. The next step is creating a small separate document to which we’ll add the interactivity.

Setting up the playground

As promised there will be no converting to HTML, but we do need a place to connect the SVG to the interactive instructions. The easiest way to add interactivity through JavaScript and CSS to your document is by having a separate HTML load the SVG into it. By not directly editing the SVG file you can just keep exporting the Illustrator document without overwriting your additions. This will make it possible to iterate fast while still be able to quickly test the different states.

Create an HTML file called “fruit.html” in the same directory as the SVG file with the following contents:

<!doctype html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  $.get('fruit.svg', function(data) {
    $(document.body).append(data.documentElement);
    init();
  });
  function init() {
    /* Add JavaScript here */
  }
</script>
<style>
  /* Add CSS here */
</style>

You don’t have to understand what’s going on in here. You do have to make sure ‘fruit.svg’ is the actual name of the file you exported from Illustrator. The comments point to where you’re going to paste the instructions from the next chapter.

You now created all three necessary files:

  • An Illustrator file in which you can edit the visual part of the prototype.
  • An exported SVG file that will be loaded by the browser (do not edit).
  • An HTML file that contains the JavaScript.

The HTML is set up to load jQuery. jQuery will later help us add mouse event listeners and animations. The call to $.get() will load the specified SVG document you exported in the previus chapter. Inside the “style” element you can optionally apply CSS to the SVG elements. You could also use it to add a background or other branding to the page.

We’re almost at the fun part. Because the HTML embeds the SVG; both files need to be loaded from the same webserver. This is because of browser security restrictions. If you’re already editing on a webserver you don’t have to do anything. If you are working on your local computer you can use your favorite webserver or open your terminal and go to (type “cd” and drag the folder onto the terminal) the directory the files are in and run:

python -m SimpleHTTPServer

You can now open your browser and go to http://localhost:8000 . You should see a link to the fruit.html file. Let’s get ready for the final step and add some interactions to the prototype.

Creating interactivity

A typical interaction you’ll want to create is showing a dialog when you click a certain button. We already drew and positioned a dialog in Illustrator and put it in a group called “dialog” and then hid the group.

You can easily show and hide layers, groups and shapes using jQuery’s $() selector. To create some great interactive prototypes you can get a long way with just usingclickshowhidemouseenter and mouseleave.

In the following code example we make the “dialog” group visible when the “row1” group is clicked.

$('#row1').click(function() {
  $('#dialog').show();
});

When the “closebutton” group in the dialog is clicked we hide the dialog again.

$('#closebutton').click(function() {
  $('#dialog').hide();
});

Another typical mouse interaction is showing a tooltip when a certain element is hovered over. The tooltip is completely mocked up in the Illustrator file so all we have to is make it visible when the “mouse enters” the “row1” group area. We hide it again when the mouse leaves that area.

$('#row1').mouseenter(function() {
    $('#tooltip').show();
});
$('#row1').mouseleave(function() {
    $('#tooltip').hide();
});

By copy and pasting these two examples you’ll be able to express a lot of different states in a normal application.

Download

I hope you enjoyed learning about this easy way of prototyping. If you love Illustrator like I do, I think you’ll find this process keeps a good balance between iteration speed and expressiveness.

Source

Read More
1980k 1980k

Workflow for Designers

’m currently working on no shortage of responsive projects, all of which have great need for resolution-independent imagery. Since all the cool kids are going the SVG route, I figured I’d try my hand at it too. I seem to have arrived at a decent workflow for creating quick vector assets with really small file sizes. If anything, I’m just writing this down so I can remember it for next time.

A few quick notes

  1. I’m just focusing on the asset creation here and not details about implementation on either front- or back-end.
  2. I still do Photoshop comps, so the majority of my workflow centers around Photoshop visualization of elements and/or screens.
  3. There are a ton of great solutions that can automate this for you. However, if you’re anything like me, some of them may seem either overly complex or feel like a black box, or both. The workflow I describe below is mostly born of my desire to be anal-retentive about asset creation. Hmph.

As an example, let’s try and create the ever-popular social media navigation bar. However, you decide to do it—I assemble mine in Photoshop—my comp looks something like this:

Social media navigation

I’ll then go through an measure the size of each icon in Photoshop by using the marquee tool wih the Info palette to get the actual pixel dimensions (shown zoomed in at 1200%):

Measuring dimensions in Photoshop

I’ll then jump into Illustrator and create my vector graphic at that exact size:

Measuring dimensions in Illustrator

I’ll make my document size the exact size of the graphic by choosing Object > Artboards > Fit to Selected Art.

Fitting to selected art in Illustrator

From here, File > Save As… and choose “SVG” as the Format.

“Save As…” in Illustrator

Keep the default options checked.

Default SVG options in Illustrator

You’re going to have to create fallback PNG graphics, so now is a good time to do that. In Illustrator, Select > All and then Edit > Copy to copy the shape to your clipboard.

Switch back to Photoshop and choose File > New…. Photoshop will assume the new dimensions of the new file to be the dimensions of the shape in your clipboard, so just double check that those are the same dimensions of your vector shape.

New Document dialog box in Photoshop

Choose Edit > Paste. When the dialog box appears, choose “Pixels.”

Paste options in Photoshop

Disable the visibility of the Background layer.

Disabling background visibility in Photoshop

Choose File > Save for Web…. Choose the PNG-24 Preset and make sure “Transparency” is enabled.

Save for Web in Photoshop


Edit: in the comments below, Jamie Reynolds mentions generating the PNGfrom Illustrator as opposed to Photoshop. However, I’ve noticed a difference between the output; I find that Illustrator doesn’t do as well as Photoshop does with the aliasing. Check out the bottom row of pixels here; Illustrator makes some poorer choices for clarity, hence my desire to add one more step to generate a better graphic.

Difference between exporting PNGs from Photoshop and Illustrator


You should now have 2 raw files: an SVG and a PNG.

Two file in Finder: an SVG and a PNG

Time to optimize. If you don’t already have them, download and installImageAlpha and ImageOptim. Open ImageAlpha and drag your PNG into the window.

ImageAlpha

Choose File > Save As… and make sure “Optimize with ImageOptim” is enabled. Decide whether you want to overwrite your image or create a new one. Choose Save.

If ImageOptim isn’t open, this will launch ImageOptim. You’ll see that our original file size of 1KB has been reduced to 574 bytes. Huzzah! Let’s do this for our SVG as well.

ImageOptim

Lucky for us, there are some really smart people out there that make our jobs easy. Check out SVGO, a great command line tool for optimizing SVGs. If you’re not into command line, there’s also a GUI called SVGO GUI. That’s my weapon of choice.

Just like ImageAlpha, crack open SVGO GUI and drag your SVG file in.Warning: this will automatically process your file, so if you still want to preserve your original, duplicate it before dragging into SVGO GUI. Voilà! Our 1KB SVG dropped down to 713 bytes.

SVGO GUI

And there you have it: a manual workflow for designers to create optimizedSVGs and PNGs. Enjoy!

Source

Read More
1980k 1980k

Downtown Sydney Transformed by Light

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Downtown Sydney Transformed by Light for Vivid Sydney Sydney projection light exhibition

Starting tonight through June 9th, the city of Sydney is hosting an annual exhibition of light and music calledVivid Sydney. Dozens of light sculptures and projections will be viewable throughout the downtown area as well as in the Sydney Harbor in an event that is completely free to the public. Looks like a lot of fun. See more on their website and over on Facebook.

Read More
1980k 1980k

Supernumerary Robotic Limbs (SRLs) are robotic limbs that, when worn, give you more limbs than you’d normally have. In other words, they’re not robotic limbs designed to replace biological limbs that you might be missing, but rather robotic limbs designed to augment the number of limbs that you have already. Source

Read More
1980k 1980k

This instructable will guide you through all of the steps to in order to create a one-of-a-kind beer pong table complete with cup detecting RGB pods, automatic ball washers, a 32×12 ping pong ball LED grid, side LED rings for spectators and an RF interface to communicate wirelessly with a PC! It will teach you everything from theory of operation to modifying the table to suit your needs. First, I will take you through the modification and wiring of the table before we dive into the software side of things.

The toughest part about this project is just getting it started. There is a lot of prepping and labour to do before you can get anything real exciting working. However, if you can stick it out until you get the 32×12 LED grid in place, you will do just fine. Once you get up to that point, you can really start to see the potential for the table and it makes working on it a lot more enjoyable. I worked on this table on and off over the course of one year. If I were to build another one and had a set schedule of 8-hours per day to work on it, I could easily finish it within one week. The majority of the time that I spent on this project went into prototyping, development and writing the software rather than actually assembling the project. Source

Read More