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
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 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.
1. Designer News: https://news.layervault.com/
Designer News, a community of people in design and technology. Launched on Dec 31, 2012 as a place to discuss and share interesting things in our industry.
Keep an eye out on Designer News to get insights on activity in the design community.
2. Stack Exchange: http://ux.stackexchange.com/
User Experience Stack Exchange is a question and answer site for user experience researchers and experts
3. Quora: http://www.quora.com/User-Experience
A participation-based question-and-answer website where questions are created, answered, edited and organized by its community of users.
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.
1. Get a sketchbook / notebook, a great pencil, and an eraser.
This is the most important part of generating great ideas in design. You don’t have to get a fancy sketchbook, or a fancy pen, so don’t feel the need to splurge. You can pick something up from:
DeSerres: http://www.deserres.ca
Currys: https://www.currys.com
Or the Dollar Store: I’ve loved my Dollar Store notebooks
I recommend to start by getting a big Rodeo notepad to give you room to think things through on paper.
2. Adobe Creative Cloud
It’s important to get a firm understanding of Adobe Illustrator and Photoshop for the work we’ll be doing in this course. We’ll learn how to communicate workflows and create beautiful interfaces.
You can get Creative Cloud here: https://creative.adobe.com/
3. InVision App
Arguably the most important tool in our toolbox, the InVision App let’s you share work, build interactive prototypes with images, and get feedback from users, colleagues, and friends.
Create an account here: http://www.invisionapp.com/
4. Dribbble
Inspiration comes from great people and places. Sign up for a Dribbble account to get inspired by interesting interfaces. Dribbble is a heavily UI focussed site, and helps you get some great ideas for UI’s and Branding. It’s also a great tool to get freelance work if you’re interested in UI focussed work.
Sign up for Dribbble here: https://dribbble.com
5. Google Chrome
It’s free, fast, and easy to use. We’ll be using it to preview work, and manipulate designs live in the browser with built in inspector tools.
Download Google Chrome here: http://tinyurl.com/qxfc8kh
5. Get the Panda App extension for Chrome
Panda App shows is a quick way to see the most popular shots on Dribbble. Every time you open a new browser tab, you’ll get a fit of inspiration.
Download the Panda Chrome extension here: http://usepanda.com/
7. Dropbox
Create a dropbox account. We’ll be using it for storing *everything* and publishing your first site:
Sign up for Dropbox here: http://dropbox.com/
8. Sublime Text
Our favorite text editor! Armed with a number of time saving shortcuts and great syntax highlighting, Sublime Text is a very easy to use text editor. It’s also the industry standard for web developers. The free trial works just fine, although it frequently prompts you to purchase.
Download Sublime Text here: http://www.sublimetext.com/
9. Medium
Medium is a blog publishing platform. You’ll need this for your prep course.
Sign up here: http://medium.com
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.
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
The Year of Interaction Design Tools
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.
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 usingclick, show, hide, mouseenter 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.
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
- I’m just focusing on the asset creation here and not details about implementation on either front- or back-end.
- I still do Photoshop comps, so the majority of my workflow centers around Photoshop visualization of elements and/or screens.
- 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:
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%):
I’ll then jump into Illustrator and create my vector graphic at that exact size:
I’ll make my document size the exact size of the graphic by choosing Object > Artboards > Fit to Selected Art.
From here, File > Save As… and choose “SVG” as the Format.
Keep the default options checked.
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.
Choose Edit > Paste. When the dialog box appears, choose “Pixels.”
Disable the visibility of the Background layer.
Choose File > Save for Web…. Choose the PNG-24 Preset and make sure “Transparency” is enabled.
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.
You should now have 2 raw files: 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.
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.
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.
And there you have it: a manual workflow for designers to create optimizedSVGs and PNGs. Enjoy!
Downtown Sydney Transformed by Light
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.
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
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
- interactive
- interaction
- installation
- design
- led
- light
- art
- technology
- projectionmapping
- projectmapping
- robotics
- ui
- mobile
- projection
- interactivedesign
- lightdesign
- apple
- web
- 3d
- ux
- userinterface
- lightart
- robot
- artinstallation
- touchscreen
- application
- app
- webdesign
- touch
- motion
- responsive
- adobe
- multitouch
- future
- robots
- drone
- photoshop
- productdesign
- ledinstallation
- lightsculpture
- video
- user experience
- iphone
- creative
- interactivelight
- digitalart
- motiondesign
- ar
- 3dprinting
- responsivedesign
- augmentedreality
- drones
- kinetic
- data
- development
- kinect
- microsoft
- display
- immersive
- process
- painting
- timelapse
- dronerobotics
- 3dprojection
- ios
- vr
- virtualreality
- earth
- ai
- device
- user interface
- engineering
- laser
- lightpainting
- kineticsculpture
- lightinstallation
- touchinstallation
- animation
- programmableleds
- graffiti
- interactions
- neon
- performance
- leapmotion
- watch
- mobiledesign
- pixel
- environment
- exoskeleton
- interactiveenvironment
- sound
- lcd
- social
- leds
- lukew
- artlight
- patterns
- internet
- carui
- November 2011 128
- December 2011 65
- January 2012 25
- February 2012 27
- March 2012 33
- April 2012 31
- May 2012 16
- June 2012 32
- July 2012 20
- August 2012 37
- September 2012 24
- October 2012 34
- November 2012 31
- December 2012 6
- January 2013 21
- February 2013 11
- March 2013 10
- April 2013 35
- May 2013 45
- June 2013 10
- July 2013 49
- August 2013 33
- September 2013 40
- October 2013 57
- November 2013 31
- December 2013 28
- January 2014 86
- February 2014 49
- March 2014 24
- April 2014 40
- May 2014 6
- June 2014 9
- July 2014 1
- August 2014 34
- September 2014 30
- October 2014 45
- November 2014 21
- December 2014 6
- January 2015 5
- February 2015 17
- March 2015 18
- April 2015 14
- May 2015 1
- June 2015 10
- July 2015 4
- August 2015 1
- October 2015 11
- March 2016 4
- December 2016 18
- September 2017 6
- October 2017 13
- November 2017 5
- June 2018 8
- July 2018 2
- November 2018 7
- February 2019 8
- March 2019 6
- July 2019 1
- August 2019 1
- October 2019 1
- July 2020 5
- November 2020 9
- December 2020 1
- January 2021 1
- April 2021 1
- May 2021 9
- June 2021 3
- August 2022 3
- May 2023 2
- September 2023 1
- May 2025 6