The Drone That Will Change Graffiti: An Interview with KATSU. KATSU is an artist and a vandal and a clever hacker too. His work pushes our idea of what can be achieved with the graffiti artist’s limited tool-set. Having established himself as one of New York City’s most prolific and imaginative taggers in the 1990s, he garnered admiration from the arts community (and condemnation from the authorities) when he pioneered the fire extinguisher spray can, which has permitted him to expand the scale of his art by orders of magnitude. He famously demoed it at “Art in the Streets,” a 2012 show at the the Los Angeles Museum of Contemporary Art, when, without invitation, he left his multi-story calling card on the side of the museum. Source

Intersection, an Interactive Lighting Sculpture. The SXSW 2014 Festival and Conference commissioned Houndstooth Studio to build a series of light sculptures for the Official SXSW Interactive Opening Party and the Eco Light Garden at Republic Square Park.

Intersection is a set of three steel framed, LED lined sculptures featuring overlapping geometric shapes. Visitors can interact with the sculptures at a podium equipped with a Leap Motion sensor. A single hand gesture over the infrared sensor allows users to control the colors, patterns and animations on the sculptures.

Houndstooth partnered with TouchTo for the development of a custom HTML5 application that generates real-time content animations based on user’s hand gestures and Art Seen Alliance assisted with the fabrication or the sculptures. Source

Magic Carpets over sacre coeur in morocco. ‘magic carpets 2014′ by french artist miguel chevalier is an interactive light display spread out across the floor of the former sacré coeur church in casablanca, morocco. covering it with a huge layer of light, the work references the world of biology, microorganisms, and cellular automata – as cells have the ability to multiply in abundance, divide and merge at different paces. pieces come together, fall apart and transform in shape at rapid speeds. the displayed organic universe mingles with a digital construction of overlapping pixels. Source

Design is Decision-Making

What is design? What does it mean to design something? What does it mean to be a designer? The last few weeks I’ve been thinking out loud about some specific design topics, but I’ve danced around the central question of what is design. I’d like to address that today.

Over the last few weeks I’ve talked about

• The subjective nature of design
• What it means to design responsively
• The role aesthetics play in design
• Simplicity as a philosophy and approach to design
• How design should start by spending as much time as possible defining the problemand identifying what’s to be designed.

There are many more topics I could talk about, but again, all this time I’ve really been dancing around the central question. What is design? What does it mean to design something?

Defining Design

We know design when we see it or when we do it, but that’s not much of a definition. Most definitions of design revolve around the word plan. Sometimes as a noun and sometimes as a verb.

• design (noun) — a roadmap or a strategic approach for someone to achieve a unique expectation
• design (verb) — to plan and make decisions about (something that is being built or created)

Design is found in the decisions made both before and during the process

According to definitions, design is some kind of plan. To design is to plan something. Words like purpose and intention are also frequently used in definitions. Design isn’t just a plan, but a plan with a purpose or for a specific purpose. You design to accomplish something specific.

I’m not entirely sold. I don’t disagree with the definitions, but I have a problem defining design as a plan in the sense that you can certainly create a plan without designing anything. I also think there are times we design something without much of a plan at the start.

Many designers will suggest that design is problem solving. I think all designers would agree we solve problems along the way to a finished design, but does solving a problem make one a designer?

One last definition I found while researching this post comes from an article in Fast Company, Is There A Scientific Definition Of “Design”? A pair of Canadian academics define design as follows:

DESIGN: (noun) a specification of an object, manifested by some agent, intended to accomplish goals, in a particular environment, using a set of primitive components, satisfying a set of requirements, subject to some constraints.

Sounds right and I can’t disagree with anything in there, but it’s quite a mouthful and in the end it’s really just saying design is a plan with purpose, while adding a little more detail than the other definitions.

What Does it Mean to Design Something?

I think part of the problem defining design is that there are so many different types of design. An industrial designer, a fashion designer, an architect, and a web designer, all design things, but the specifics of what they do are quite different.

There are some commonalities in these different types of design, things we all do. Planning is one. Purpose another. But I think more than anything design is about making decisions. It’s making decisions without knowing in advance if your decisions are good. It’s making decisions without a way to judge the success of any of them until after you’ve finished making all of them.

How can that be? How can we make decisions without a clear and objective way to know if we’re making the right decisions, if we’re making good decisions?

Design is about making decisions based on objective principles that may or may not apply. It’s making the most objective decision you can with an understanding that in the end those decisions are all subjective.

Design is doing everything you can to understand the essence of the thing you’re going to design; the essence of what it is and what it’s supposed to do. Design is formulating a larger strategy, and  developing a concept for how you’ll proceed, knowing at the outset you won’t know if you’ve chosen a good or bad strategy until after you’re done and possibly not even then.

Regardless of being able to determine good or bad at the outset, you make a series of decisions that consider your initial vision at every step and attempt to remain unified to that initial concept.

Not only is design trying to get at the essence of the thing being designed, but it has to decide how that thing fits within larger contexts of the many other things that have been designed. It asks you to question whether the thing being designed is really what you think it is or if you should scrap all your work and start again.

Design is knowing that you could do everything right and well and that someone also designing the same object could do it well and right and end up with a different design. It’s knowing at a different point in time you also might design something in an entirely different way and still end up with a good design.

Design is multi-layered. You don’t need to design each layer, but the more you get right the better your design will be. At the bottom design is functional and reliable. Moving up the stack it becomes usable and helps people become more proficient. At the top it’s creative and offers aesthetic beauty, ideally arising out of the essence of the thing being designed, but sometimes from somewhere else with a purpose simply to delight.

There are contradictions in design. Simplicity would have us remove everything that’s non-essential and yet aesthetics are fine with us adding some less than essential things if they delight or communicate something beyond the object itself.

Designing a Website vs. Designing a Shirt

When designing a website you’re concerned with the goals and objectives behind the site. You’re concerned with the client and the people who’ll visit and use the site. You have to be concerned with all sorts of technical details about html, css, javascript, browsers, performance, and accessibility. You’re concerned with type and layout and color and the atmosphere your aesthetic details create.

I’ve never designed a shirt or any other piece of clothing, but I imagine concerns would also include goals and objectives and the people who’ll wear the shirt. There will be technical details in regards to the fabric and a process for turning materials into a finished product. There will be choices in color and shape and general aesthetics.

A lot goes into creating a website and a lot goes into creating a shirt. The technical details vary and they vary yet again when designing an industrial product or a process to move packages from one truck to another.

There’s a craft associated with anything designed. The specifics vary from thing to thing and so the decisions made at the start and along the way will vary with them. The design of all of them can be found in the decisions made both before and during the process.

Closing Thoughts

The definitions for design sound simple. Design is some kind of plan with a purpose. To design is to create this plan and then make decisions that align with the original plan. I don’t disagree with any of the definitions, but I feel they leave so much unsaid.

In design there’s an objective, some kind of task to complete or problem to solve and there will be many, many decisions made along the way. Some of those decisions will be made up front. They’ll be based on objective principles, guidelines, and experiences that start us on the design journey.

Many more decisions will be made during the journey. Design asks us to make the best decisions we can at each step of the way even if that decision is to turn around and start down the journey again from a different road.

Design can be applied to most anything. If it requires more than a single decision, more than a single step, it can be designed. A website can be designed. A shirt can be designed. An automobile can be designed. Your life can be designed.

In the end to design is to be human. It’s making the best decisions you can under any and all circumstances. To become a better designer, to become a better person, is to become better at making decisions.

Source

Geometry in UI Design

I found myself using geometry while designing user interfaces quite often, so I decided to share a simple example I was working on the other day.

Aligning interface elements in Photoshop is pretty easy as it comes with the pre-defined aligning options. And for the 95% those are all you really need. What can you do in those 5% examples when you can’t use these options? Well, it actually depends a lot on what you’re working on. Let’s see a specific example.

Aligning an Icon to the Center of…

the quarter of a circle. This was my most recent example when I had to use geometry to get that pixel perfect UI element.

I was working on a confirmation window, which was inside a circle. Yes, we’re trying out all sorts of cool stuff at wondermags. What we want to do is ask the user if he’s sure of the action he’s about to execute. We give him an explanation of what will happen and options to confirm or cancel.

Here’s a quick sketch for this window:

A very rough sketch :)

So the problem we’re trying to solve here is how to properly align the two icons to the center of each of the buttons at the bottom half (confirm and cancel). If you use the align to vertical and align to horizontal center in Photoshop, this is what you’ll get:

Icons are not properly aligned to the actual center of the buttons.

Now this doesn’t look right at all and it certainly looks very strange to say the least. Photoshop aligns it like this because it still treats it as a rectangle, not a quarter of the circle (there’s no difference for Photoshop).

For Photoshop, this is still a rectangle.

---

Square Area is the Answer

I was thinking, what would be the easiest and most precise way to align it right to the actual center. Here’s where geometry comes handy. I figured that the key here could be the square area of the quarter of the circle. All I had to do is calculate the square area of it and draw a rectangle with the same square area to use as a guide. But first, I had to find out what dimensions I had to use.

This is the square area that interests me (dashed area).

The formula for calculating square area of a circle is A=π*r^2. But in my case I was only using quarter of the circle. So my formula was:

A = π * r^2 / 4

π is a standard which is 3.1416 and r is the radius, which in my case is 145 pixels (also half of the width of the circle).

I made the calculations and the square area of the rectangle I had to draw was 16,513 pixels.

But the square area info doesn’t help me much. I can’t draw a rectangle in Photoshop so that I would set the square area of it. What I need is the width of the rectangle. And to get it, I just had to add the square root to my formula.

A = √(π * r^2 / 4)

The end result is 128.5 and lots of decimals. Now I could draw a square on top of my quarter of the circle with width set to 128 pixels and align it to the top left corner. The center of this square is the actual center of my button. This is what my icon needs to be aligned to.

Rectangle with the same square area as the quarter of the circle.

I aligned the icon to the horizontal and vertical centers of the guide rectangle on top of my circle.

Aligned the icon to the center of the guide square.

Applied the same process for the other button and that’s it. Pixel perfect alignment, pixel perfect user interface design.

Pixel perfect UI.

---

Here’s the comparison of before and after:

Before and after: wrong and right.

Conclusion

I would like to highlight two major points of this article. One is that geometry and mathematics in general can help you a lot in pixel perfect user interface design and web design. You just have to find the right way to figure it out.

The other one is that if you do something, do it properly. If you have to design an interface, go for the pixel perfection or don’t do it at all. This is what separates average interface designers from the best ones. Put some extra work in it, even more than necessary if you can.

Try, fail, think, learn.

Source

SVG is for Everybody

In his SVG is for Everybody talk at An Event Apart in Seattle WA 2014, Chris Coyier walked through the current state of SVG and how Web designers and developers can use it on their sites today. Here are my notes from his talk:

• SVG can made from essentially anything “vector”. You can learn the syntax but you don’t need to. If you can open it in Illustrator, you can save it as SVG.
• SVG will never replace raster graphics (sets of pixels), it is good for icons, illustrations, diagrams, charts, logos, etc.
• SVG is not new -its been around since 1999. It was designed for the Web but coverage was not great.
• 10% of sites on the Web are using SVG according to Google.
• To create SVG, you can hand-craft code or use a vector editing tool.
• IE 9 does not support gradients but it does support SVG, so you can use it to create gradients in that browser.
• SVG will resize itself to whatever space it has to fill, without loosing resolution.
• Images set to max-width 100% will fill the size of their container and not more. With vector images, you can instead set width to 100%.
• Inline SVG is just SVG code right inside HTML. You can set styles on each element in the markup.
• Three big advantages to inline SVG. 1) all the elements are in the DOM so they can be styled and scripted. 2) No additional http requests are needed to load the image 3) You can define it once and reuse it again.
• SVG templating system: sites need a system for icons. Use inline SVG and wrap elements with DEF tags, which makes sure it does not render. Then display: none on the whole SVG element.
• From that point on, you can reference the DEFs in your SVG throughout the site. Define an object once and reuse it in many places.
• You can set a folder of SVGs and use Grunt to create the inline code and DEFs you need for it. This is the idea of sprites for SVG
• Unlike image sprites, SVG sprites are vector based, don’t require background positioning code, can be restyled with colors, strokes, etc. (including SVG CSS controls).
• You can control individual parts of SVG using CSS. You get some of these advantages with SVG images but not all of them.

Icon Fonts vs. SVG

• Both are vectors but icon fonts use anti-aliasing rules.
• Both have CSS control but SVG has lots more: class names, target parts, SVG specific
• Positioning of icon fonts is subject to line-heights and letter spacing. SVG is a lot easier to position.
• Icon fonts have weird failures like CDNs/headers, IE6 supports font-face but other versions of Windows phone do not.
• SVG has better semantics as it is just images instead of images in text/fonts.
• Accessibility with icon fonts requires a lot of care. SVG is better as it is just an image tag.
• Icon fonts win at support (IE6+) vs. SVG (IE9).

Dealing with Fallbacks

• SVG needs fallback for IE 6-8 and Android 2.
• One fallback is to show nothing. If you are using SVG for icon enhancements, you may not need them on lower end browsers.
• Multiple background support is basically as good as SVG support so you can use them as fallbacks in background-images.
• If you need to support fallbacks for inline SVG, you can use Modernizer, hiding/showing image and SVG elements, and other Javascript solutions.
• You should also optimize your SVG files like you optimize other Web graphics. SVG-O is a tool that can do that for you.

SVG also supports animations, filters (including CSS filters), and more. It’s a massive world of potential.

Source

Motion Ui Design Principles

This blog is a quick look at some simple Ui motion design principles.  There isn’t too much documented about this area of mobile ui design and I thought there would be some value in expressing my views.   From what is documented already I urge anyone interested in ui motion to check out Pasquale D’Silva http://psql.me/ and Johannes Tonollo’s meaningful transitions http://www.ui-transitions.com/#home.  

Also make sure you bookmark http://littlebigdetails.com and http://capptivate.co.  (A special thank you to Capptivate.co who allowed me to use their captures below).   

These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation.  With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design.  With the exclusion of skeuomorphic design there is now a freedom for content to behave in an unrestricted manner.  Gone are the awkward and sometimes absurd transitions that appeared to break all laws of their pre-defined physical environment.  Now the space has opened for there to be a much richer identity and defined language or landscape to mobile Ui and motion is very much an integral part of that.

Personality.

The most obvious principle is that any motion or animation should be of the highest standard possible.  Apps should look at going beyond “out of the box” motion solutions and making something bespoke and truly engaging.  Within the app the motion should convey a distinct character, whilst keeping a clear consistency throughout. Behaving in an expected manner will help maintain a stable relationship with the user keeping them engaged with experience.  

 http://capptivate.co. https://twitter.com/CapptivateCo

Paper Makes use of a scale overshoot through out the app, giving it a clear and distinct character. 

 http://capptivate.co. https://twitter.com/CapptivateCo

Dots carries through a very relaxing inertia which is prevalent through all aspects of the Ui.  Again making it definable against other apps.  

Orientation.  

Motion should help ease the user through the experience.   It should establish the “physical space” of the app by the way objects come on and off the screen or into focus. It should aid the flow of actions, giving clear guidance before, during and after.  It should serve as a guide, keeping the user orientated and preventing them from feeling lost, reducing the need for additional graphics explaining where they are or have been.

 http://capptivate.co. https://twitter.com/CapptivateCo

Yelp shows a great example of drawing focus with a intelligent and well crafted animation.

Making keeps the user orientated when drilling down into a category with a simply elegant transition.

National Geographic keeps the user aware of where they are and have been with a good use of 3d perspective. 

Context.

Motion should give context to the content on screen by detailing the physical state of those assets and the environment they reside in.  Without the restrictions of skeuomorphism the ui is free to behave in any manner with out seeming contradictory to its pre defined environment.   Adding a stretch or deform to an object or applying inertia to a simple list scroll can make the experience much more playful and engaging.  

 http://capptivate.co. https://twitter.com/CapptivateCo

Responsive.

Motion should be responsive and intuitive.  It should react in a way that reassures the user, rather than surprises or confusess them.   The reaction of the ui, to a users actions, should be complementary and comprehensible.

 http://capptivate.co. https://twitter.com/CapptivateCo

Emotive

It should evoke a positive emotional response, whether that be comfort from a smooth scroll or excitement because of a well executed animation transition.

 http://capptivate.co. https://twitter.com/CapptivateCo

Restraint.

Steer clear of distracting or even confusing the user with too much animation, Subtlety is key.  It should be used to maintain or help focus.  Not take it away.  Also don’t over elaborate aspects such as screen transitions. This becomes increasingly frustrating to the user over time.  Or if they are simply left waiting for what seems like “forever”. (there are no examples of this as its a not to do - and i’m not in the habit of kicking peoples work in the nuts)

Source

Mobile Nav could be costing you half your user engagement

So, you have a mobile app where there are more pages or sections than can fit on a mobile screen at once. Your first thought might be to create a tabbed design, with a row of tabs along the top or buttons along the bottom.

But wait… that extra row of tabs or buttons wastes a lot of valuable real estate on a small mobile display, so let’s not do that. Instead, let’s move the options into a side menu, or side drawer, as our Android team keep reminding me it’s called.

If your mobile app has multiple views then I would be surprised if this subject has not been vigorously debated by your team:

1. Persist all the navigation options on screen at all times so your users have clear visibility of all the main app views and single-click access to them.
2. Or, free up screen real estate by moving the options into a side menu.

The side menu has become fashionable on Android but not yet taken off on iPhone… and so another factor that enters the discussion is the desire for your Android and iOS apps to have similar navigation and user journeys, or not.

I thought it worth sharing our experience.

Usability vs. clean design

When we first started zeebox, we began with a tabbed design with a row of buttons along the top. Our reasoning was simple: “Out of sight, out of mind” – i.e. if you don’t see the set of available options then you’re not going to know that they exist.

For example, in the above images, if you don’t see a GUIDE option then how would you know to go to the menu to look for it? And if you discovered it once, would you remember that each time you returned to zeebox? Even if you did, it would be two clicks to get to the guide rather than one.

On the other hand, the design looks so much cleaner without that ugly row of buttons along the top, moving the navigation into a side menu really lets the content breathe.

The idea of moving app navigation off-screen into a side menu – also known as a hamburger menu or navigation drawers – seems to have originated about 18 months ago.

Around Sep 2013 Facebook switched to a new side menu design – or at least my Facebook app did as part of its A/B test. Surely if Facebook was doing this, then it had to be good… right?

The friendly and wonderfully helpful Google Play team suggested thatnavigation drawers (which I’m referring to here as a side menu or side navigation) were the new way to go and would be the preferred design pattern for our Android app.

And so about six months ago, we decided to take the plunge and switch to a side navigation. To make sure people knew about all the available views and options we had the app start up by showing the navigation drawer open:

When we launched the new version the user reviews were great (“Love the new design, 5 stars”).

But when we looked at our analytics, it was a disaster! Engagement time was halved!

It looked like “out of sight, out of mind” really was the case.

The surprising truth

After realizing the gravity of the situation, we rushed out an update two weeks later that restored the top navigation as the default. We also provided a settings option that allowed users to turn on side navigation if they preferred so as to not upset those people who had loved the new side menu.

Anyway, cut to six months later.

The zeebox app has really come a long way in those months, we have a new My TV page that’s a constantly updated personal feed of news, TV shows starting for you, and posts for shows and from people you’re following. The My TV page is the place that our users want to see. But we wanted another go at letting the content breathe, so it was time to try that side navigation experiment again…

However, having learned our lesson, this time we’re going to do it the smart way: we’re going to A/B test it.

Our favorite A/B test tools and methodology

Lately we’ve become big fans of A/B testing, both with users coming into the office to test interactive Flinto prototypes and with A/B configuration built into our production app.

We start by creating mock-ups of various design concepts. We use Flinto to turn those into interactive prototypes that look just like the real thing, but which are built and iterated in minutes or hours.

You can see a couple of our Flinto prototypes here and here – click the links on an iPhone for best effect. Tap an hold anywhere on the page to see where all the interactive hotspots are, then tap on a hotspot as if you’re using the real app.

We advertise for users who love TV, anything from The Voice to Downton Abbey. Twice a week we have four to five people come by our office to our virtual lounge where they try out the various concepts and prototypes we’ve prepared.

Sometimes you’re able to get a clear design winner from that small user sample. But in other cases, like for side navigation, you really need to sample thousands of people using the real app. And for that you need A/B testing.

For mobile app A/B testing, we use Swrve – it’s the most sophisticated A/B testing product I’ve found. It provides not just useful features like Goal Seeking (the A/B test server can automatically switch all users to the best option once a clear winner has been determined) but Swrve also lets you serve customised experiences for every individual user.

For example, if you’re a Comcast subscriber and we notice that you haven’t yet discovered that zeebox can act as a remote control for your Xfinity box, then Swrve could instruct the zeebox app to pop a message telling you  about that, with the timing of the message adjusted on a daily basis for optimal effect.

Anyway, we decided to go with a 15/85 test, where 15 percent of users were served the side navigation and 85 percent got the top navigation.

We launched the new version, waited 48 hours, checked the stats… would things be different this time…

The answer was a resounding No.

Weekly frequency was down. Daily frequency was down. Time spent in app was down. The side nav was as big a disaster as the first time round.

The good news is that, thanks to A/B testing, this time we could simply flip a switch on the server and set 100 percent of users to top navigation.

Given that the discussions about top or side nav are very likely a topic of debate in your company, I thought it worth sharing our experience.

Back when we did our above A/B test and concluded that the side nav was not for us, Facebook launched its new navigation on iPhone, with a persistent bottom navigation on every page. So, on iPhone, the app has a persistent lower navigation.

However, on Android it’s, well… variable. Looking at Facebook on my Android phone (below left) vs. on my colleague’s phone (below right), Facebook must be A/B testing this right now as some people are seeing top navigation and others side navigation. I’d love to know what Facebook are seeing in terms of engagement with each…

When does side navigation ever come into play?

My take-away from all of this is that if most of the user experience takes place in a single view, and it’s only things like user settings and options that need to be accessed in separate screens, then keeping the main UI nice and clean by burying those in a side menu is the way to go.

On the other hand, if your app has multiple views that users will engage with somewhat equally, then side navigation could be costing you a great deal of your potential user engagement, and interaction with those part of the app accessed via the side menu.

Source