Last week Clarity was invited to the Windows 8 Developer Launch event in here in Chicago. Matt Hidinger and I were asked by some good friends at Microsoft to give our 2-cents on why we’re excited about Window 8. It was a packed event, and we had a great time. Below are some pictures, slides and a short recap on our talk. Pictures courtesy of Bob Laskey
Win8 : A Business Perspective
Here at Clarity we’re excited about Win8 for a number of reasons. One of the wins we see from a business perspective is reusability in three main areas: Design, Code, and Skillset.
Design – We can now share design assets and create a consistent brand experience across Microsoft’s three major screens: Xbox, Windows Phone, and now Windows 8.
Code – We primarily use C# and XAML to build our Windows Phone apps. Xbox, and Windows 8 also give us a framework to write C# and XAML. While the code isn’t necessarily copy & paste, there is a ton of overlap between the platforms.
Skillset – This is sort of a nice side-effect of having similar coding platforms. We are now sharing talent across our dev projects. In other words, our mobile guys are building Win8 apps and our XBOX guys are able to make the transition to Win8 or Win Phone just as easily.
Win8 : A Design Perspective
I’ve been building and designing software for a long time. And as a ‘design guy’ I tend to focus primarily on the UX aspects of software. With Windows 8, UX and aesthetics have finally been promoted to a first class citizen. This is great news for both designers and developers. This is especially exciting from a development perspective because it makes good design a hellava lot more accessible to the non-designer.
Metro makes Design More Accessible. . I like to think of Metro as a ‘developers kind of design’. It gets to the point, and promotes functionality over flash. Its about solving problems, visually, which is something we can all get on board with.
That last statement might seem a little broad. Specifically, the Windows 8 platform makes a handful of tedious design scenarios very easy for developers :
Touch First Controls – MS has finessed the crap out of these touch controls. They are accurate, and have a ton of user research driving their functionality. This is something that takes a lot of precision and therefore time to nail. Now you get it for ‘free’.
Animation – I’ve spend a good portion of my career figuring out the ‘perfect’ easing functions and timings to create snappy elegant motion in applications. MS has spent a bunch of time making the animation framework super easy to use for everyone. Its really good. Use it.
Built-in Styles – Margins, spacing, alignment, font-sizes, type-casing, font-weight. These are things that make most developers cringe. Well guess what, MS has been awesome enough to provide you with templates that have all of the base styling built-it so you don’t need to fret about those teeny-tiny pixels.
Win8 : A Development Perspective
Our own Matt Hindinger did an awesome job talking about the great new development opportunities that come with the Win8 Metro platform. I’ll make a feeble attempt to recap the highlights of his portion of the talk.
In Metro you have a choice to use 3 different development platforms : HTML5/Javascript, XAML/C++, XAML / C#. And the question we get asked the most is ‘when do I use what?‘. This is the when & where breakdown that we’ve come up with:
C++ XAML / DirectX – We think this platform is best used when you have a need for performance and precision. C++ and DirectX give you full control of every pixel on the screen and its super fast.
C# / XAML – This is our platform of choice. It offers a very reliable strongly typed coding environment that couples speed of development and a robust control set. If you come from a .net background, this is the one for you.
HTML5 / Javascript – We think this platform offers great flexibility and an awesome set of tools for loose and fast prototyping. If you are coming from a web background you will be pleasantly surprised at the modern CSS, js support. We’ve had really good success with this framework so far.
Our Slides
Below is our slides from the event. Check em’ out and share them with your friends. We had a lot of fun embracing the ‘trenches’ theme .
If you have any questions or thoughts you’d like to share with us don’t hesitate to hit us up on twitter.
Best,
Erik Klimczak | e = eklimczak@claritycon.com | t = eklimcz
Windows 8 is coming in hot! And here at Clarity we just couldn’t wait for MS to publish the official design guidelines. Our clients want to see their brand on Windows 8 now. So we meticulously picked apart screen shots and some XAML to create our own Photoshop templates. Get the unofficial Windows 8 photoshop templates below to kickstart your next Win8 project. Free of charge from your friends at Clarity Consulting
Whoa..8? I just got 7…
Yeah dude, the Windows 8 beta is right around the corner and the excitement is almost palpable. Over the past 6 months Microsoft has been slowly revealing the next evolution of Windows. The first glimpses of the platform came at BUILD where the developer preview was released along with a ton of sample apps and code snippets. Shortly after, MS publicly announced their plans for the Windows 8 Store. The Store announcement boasts some great opportunities for app makers and showcased some very nice apps.
The new Windows 8 platform has adopted the “Metro” design language that can be seen in Zune, Xbox, and Windows Phone products. The Metro styling has its roots in traditional Bauhaus design principles which, for this designer, is a breath of fresh air. Yet, for a platform driven by rich design concepts, guidelines and templates are sparse. Right now, the best documentation is scattered throughout the MSDN library and doesn’t give much in the way of practical design resources.
Why do I need this?
A few times now I have gone through the rigamarole of designing a Windows 8 app. And every time I go through the same process – take screenshots of my Window 8 tablet; creating guides and font sizes; start adding in content. In efforts to speed up our design process we made some template time-savers that I’d like to share.
Thanks to our senior photoshop template maker Brittany Travitz we now have some basic templates that should help you:
Set up proper margins and spacing
Find consistent Font Sizes & Weights
Create a basic application flow
What do I get?
The templates are primarly based on the Expression Blend windows 8 default project template. But we’ve also baked in some of the fine print found in these articles
There are four files included in the download. These files represent a bare-bones Metro application flow (see below). The four files include:
Home – This is the basic landing page or Hub of an application where you surface featured and curated content.
Category – One level below the home page is the category view. This is where you would present the full list of items for a given category.
Detail – This is pretty self explanatory. Details of a product, article, video, image, etc, go here.
Snap View – All Metro apps in Win8 require to support a snapped view state that takes up 1/3 of the screen. Similar to supporting CSS Media queries in a responsive website design.
Anything Else?
I’m sure MS will be releasing official design files and resources any day now. But until then, hopefully these files will save you some time as you spin up your next Win8 Project.
** BONUS **
We stumbled upon some really nice free icons for Metro app design. Check them out at Icons8
About 5 months ago I gave a talk on Design for Software for DevSum11. It was a great event and I was pleasantly surprised at positive attitude the community had towards design. Shortly there after I was contacted by Wiley to see if I would be interested in elaborating the talk into a book. After a many fist pumps, I calmly proceeded to pursue the engagement.
Design For Software: A Playbook for Developers
As a formally educated ‘design guy’ I’ve had the unique opportunity to work along-side some rather brainy engineers here at Clarity. Even though I’ve sort of been the ‘odd man out’ I’ve gained some unique insights into the deep dark trenches of building software.
And over the course of my career I’ve hand-picked a creative process that won’t break the precious budget and cause timelines to get bogged down. That is the basis of the book, and what I’d like to share with both the tech-savvy artists and the creative-minded technologists of the world.
SO WHAT’S IT ALL ABOUT?
In my opinion well-designed software consists of three key ingredients:
Cognitive Psychology – Understanding and anticipating how users will use the software
Aesthetics – The fit n’ finish, bells & whistles, glitz & glam
Solid Code – The way it works and how it ‘feels’
Techy people, Arsty people, you are one in the same, with different priorities, but one great ability in common – Solving Problems.
However, designers and developers are typically viewed as opposing forces, left-brain vs. right-brain, if you will. This implies there is nothing ‘creative’ about developing software, which, most developers would tell is complete bull dooky. Perhaps its because we designers tend to gravitate towards the gray-area and developers have a natural propensity towards the black & white.
Regardless, some design principles in the context of software can be made black & white. And that is precisely what I’m talking about. Design is no more than solving problems, visually. And developers are already great at solving problems, so just because you didn’t go to design school doesn’t mean you don’t have the ability to make your software shine.
WHO IS IT FOR?
‘Design for Software’ is meant to connect the dots between software and design. Its targeted at tech-minded folks that have a taste for design, but aren’t sure what it takes to get there. Or the tech-savvy artists looking to fill the gap between art theory and cold hard code.
WHEN CAN I GET IT?
Unfortunately, I juuuust started the writing process and it will be a few months before anything is available to buy. My plan is to create a blog series that coincides with the high-level concepts that will be elaborated in each chapter of the book. I’ll key you posted as I make progress!
The Original Talk
Below is the original talk I gave at DevSum. It is more-or-less a high-level outline of what I’ll be writing about in the book.
It seems like everybody is getting bitten by the HTML5 bug lately. And as more folks jump on the band-wagon its going to become harder and harder to one-up the competition. Interestingly, the modern browsers are starting to offer some browser-specific functionality that can help make your shiny new HTML5 site stand out.
The Sticky Browser
It seems like the big trend in the browsers is to stick, pin, save, your sites somewhere convenient. I guess you can think of it as bookmarks 2.0. The biggest difference is how you access the saved site. This is important for three reasons:
It keeps the site in the user’s view
Offers app-like access with one click convenience
Increases the likelihood of visitor return
IE9 PINNED SITES
I think IE9 does the best job with this. It has concept of pinned sites which lets people attach a site to their taskbar or start menu. This is especially useful for html5 sites that are app-like in nature. The new Pandora site, grooveshark, and other utility apps like rulers, clipboard copiers, and dropboxes examples of apps that work perfectly with this concept.
Pinned sites are unique because they:
Attach to the taskbar/start menu in Windows
Give jumplist functionality for easy navigation
Allow notifications to get pushed to the OS level
OSX WIDGETS
OSX widgets aren’t anything new, but they do support html5 and can be a great companion to any HTML5 site. As a mac user I love widgets, I use them mostly for quick task-based interactions. Things like calculators, generators, quick-glance info, or notifications are all great uses for widgets.
Widgets are unique because they:
Live in the users OS for maximum convenience
Can access OS-level functionality like pasteboard, quartz composer, and run applescript
CHROME WEBSTORE
The chrome webstore has been filling out nicely with new and exciting web-based experiences. All the cool kids are putting their ‘apps’ in the webstore and you should too. I found it to be as easy as adding some basic javascript to your site and uploading it. With a nice apple-esque interface, the webstore should give your site some street-cred making it feel a little more official. Its also a great way to get feedback, rating, and track the success of your stuff.
Web-apps that exist in the webstore have some advantages:
Usage and rating analytics
Full screen or “Pinned Tab” Mode
Discoverability and exposure from the web store
Nice launch surface in the browser
FIREFOX ADDON
In my opinion, the firefox addon model is a little old-school and techy for the new immediate-gratifyin’ breed of users out there. But it is still a great way to give your site that little extra bump of usability. I haven’t actually built anything as a firefox addon but it seems like it works best when used to augment a core feature of a site. Evernote and StumbleUpon are two good implementations I’ve seen.
Firefox Addons are unique because they:
Integrate with Firefox’s native functionality
Offer quick and easy access to common tasks
Summary
Long story short, the HTML5 party is getting crowded….fast. Exploiting some the browser-specific functionality can be a great way to increase the accessibility and stickiness factor of your site. And if anything, it may be a way to squeeze out a few extra delight-points from your audience.
Best,
Erik Klimczak | @eklimcz | eklimczak@claritycon.com
I recently gave the Design for Software talk to my colleges here at Clarity, and not surprisingly, the typography portion raised the most questions. Unfortunately there really isn’t a definitive source for learning how to set type “the right” way. So I decided to drill into some key principles of digital typography.
There are a few typography questions that seem to bubble up more than the rest:
What sizes should I pick for headers and body text?
What are some typefaces look good together?
Should I use serif or san-serif?
In this first post I’ll try to shed some light on the topic of choosing a suitable scale for sizing your screen elements. In the following posts I’ll attempt to tackle the fine art of pairing typefaces and give some general rules of thumb for using serif and sans fonts. For the record, I am no expert on the subject, just enthusiastic about it and hopeful that other tech-minded creatives will find this post helpful.
Rhythm and Scale (What sizes should I pick?)
Choosing the right font sizes for your application involves three key components: Scale, Leading and consistent Vertical Rhythm. Once you wrap you mind around these little nuggets making space and size decisions should be a breeze.
Scale
Scale refers to the intervals of size and the relationship between them. There are many different scales available for many scenarios- these two are well suited for most typographic tasks
Scale in typography is akin to scale in music. Choosing notes in the correct scale result in harmonious chords and tones. The same is true for choosing a scale for typographic elements, arbitrarily picking sizes can result in a discorded visual rhythm.
When you’re deciding what size to make your headers a good rule of thumb – multiply your body size text by 2 and then find the nearest value in your scale.
Leading
Leading is the space between the baseline of the type and the next. In CSS and most programming languages this is the Line-Height property. Most classic typography books recommend a general leading value of 1.5em or:
Anything less than 1.5 is typically too cramped for comfortable readability.
Vertical Rhythm
The Vertical Rhythm is the spacing and positioning of text blocks as they descend down the page. The primary characteristic of perfect vertical rhythm is when the spacing between paragraphs and headers are equal or related to the leading. In other words, equal spacing between headings and paragraph text is ideal for keeping a consistent vertical rhythm.
Rhythm & Scale Widget
So far so good, BUT, programmatically positioning elements on a page can be a real downer. Adding margins and spacing manually to all your textblocks could get real cumbersome real fast.
The good news is that with some simple math inspired from this site we can calculate the CSS values for keeping good vertical rhythm. I created this html5/OSX widget to generate the base CSS values for scale and baseline aligning text in html.
Using the widget
First, choose a comfortable reading line height value. The amount will vary depending on your typeface…sans-serif faces typically need more than serif faces. Depending on my base font size I typically choose a value between 18 and 24.
Second, pick between one of the two common size scales. The Diatonic Scale is based on traditional typography sizes and the Golden Ratio Scale is based on the Fibonacci sequence (for natural-looking size values).
Last, preview the generated css on the backside of the widget and copy it to the clipboard. The values generated should be a good starting point for establishing vertical rhythm and font sizes.
*Bonus* If you are a mac user, download the dashboard widget. If you are an ie9 user, pin the site to your taskbar. And if you are a chrome fanatic get the widget HERE from the chrome web store
Generated Sample
Check out this sample page to see all this theory stuff working together. Taking the generated css from the widget I added a couple of css rules for columns and the bingo-bango…everything lines up nice.
Resource Roundup
During my exploration of this topic I found some great resources that give a much deeper dive into the typic of rhythm and scale. If you are interested in learning more these are key:
Over the past month I have been doing some experiments with html5 and JavaScript. Specifically, I wanted to see exactly how close I could come to making a website ‘feel’ like a native app.
In a recent post I made a claim that “websites can take a lesson from apps”. By which I meant, that apps do a better job of delivering curated content and rich interactivity than most websites currently do. So with that in mind I set out to create a sample website that featured some app-like functionality. Along the way I discovered some things I’d like to share:
Avoiding jQuery has some perf benefits for mobile devices
Adding Touch support, and handling the default behaviors
Getting around the lack of native scrolling in a fixed layout on iOS.
Using RequestAnimationFrame to conserve resources
Taking advantage of Hardware acceleration where it makes sense
Demo Site & Code
If you’re like me and don’t have the patience to read the full post, I’ll cut to the chase. The sample website demonstrates how to do the following:
Avoiding the use of jQuery for optimized perf on mobile devices
Adding touch capabilites to screen elements
Using hardware accelerated css animations
Detecting browser capabilities with Modernizr
An inertial scroller to workaround the lack of native scrolling in a fixed layout on iOS
Avoiding jQuery for Better Performance
jQuery is great, I use it all the time and in this day of browsers being riddled with discrepencies it makes web development much less of a headache. However, jQuery can be a bit bloated when you are building sites that are targeted for mobile devices. Mobile devices, even the best ones, just don’t have the horse power to run rich websites like laptops and desktop computers. Fortunately, the modern browser and especially thier mobile counter parts have made long strides in the realm of performance and functionality, and to some degree eliminate the need for large js libraries. While doing some research on the topic of “to Query’ or not” I stumbled upon a couple great links demonstrating some of the perf benefitts of avoid jQuery.
Summary
Long story short, a lot of websites only leverage selectors, $.ready, and event binding capabilities of jQuery. And the mobile browsers that support javascript implement the W3C HTML5 spec fairly well. Making it relatively easy to hand roll some js utilities to mimc what jQuery does without the added weight of the rest of the framework. Specifically, jQuery does a lot of scrubbing and checking behind the scenes that can send 1 line of code down a muti-step code path. While building the sample site I found these links helpful:
In case you have been living under a rock, many of the recent mobile browsers can propagate touch info similar to how mouse info is bubbled up to javascript. In most simple cases, say handling click events, you won’t need any of the extra touch information. But for more advanced interactivity like scale, rotate, flick-able scrolling, the touch information is crucial.
In this case I needed to add some inertial scrolling (which I’ll talk about more below). I already had it working with the mouse, and I didn’t want to duplicate all the code for touch. So I added a pretty clean way to handle the touch events by passing the touch info into the existing mouse handlers:
//Check for touch
var _eventType = ('ontouchstart' in window) ? "touch" : "mouse";
Preventing the Default Scroll and Page Scale
Lastly, if you decide to handle touch events coming from the browser you have to take one additional step to ensure that the default behaviors of iOS don’t fire when you’re executing your code.
To prevent the default pinch & zoom and the elastic scrolling functionality of the iOS browser add this line to your HTML page:
Summary
In general I think touch support rocks and provides very accurate real-time information about all the contact points in the browser. While building the sample site these links were most useful to me:
This isn’t really a new thing. In fact, there has been quite a bit of discussion about this around the interwebs. Basically, if you have a fixed lay out, say 1024×768, and you have long content in the middle, iOS will NOT scroll like you might expect. So the only solution is to create your own scroller implementation….which isn’t the easiest thing in the world. Luckily there are some folks out there that have some pretty decent ones:
But being the anal retentive person I am, I decided to take a stab at writing my own. I had most of the code from a parallax control I wrote for WP7 last year. I also added some easing logic inspired from this cool HTML5 TRON site:
I tried to make the scroller as generic as possible. It uses CSS3D Transforms when it can to leverage hardware acceleration on iOS and Safari. You can download the entire sample site to see how its working, but if you’re just interested in the scroller I put it here: https://gist.github.com/1104526
Using RequestAnimationFrame
Until very recently, most people did animation in javascript by kicking off setInterval or setTimeout then incrementing the various object properties. This doesn’t work great when you are trying to animate a lot of objects on the screen at once. Enter RequestAnimationFrame – basically what this little gem does is queues up as many paint functions as it can into one tidy screen draw. Therefore you can save a considerable amount of cycles and cpu usage by opting to use the RequestAniFrame over timers. This is the implementation I went with from Paul Irish:
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
Summary
If you’re are trying to push the bounds of what browsers can to, I highly recommend using the Request Animation Frame if your browser supports it. Currently, IE9, Opera, FireFox 5, Safari, Safari Mobile and Chrome 10 all support it. It offers a way to do much higher-fidelity animations than the current timer scenario. If you’re interested in learning more these are some great links:
In my opinion, this is the secret sauce to making web apps ‘feel’ like native apps. And I’m sure it won’t be long before all the browser vendors hardware accelerate animations and transforms.
At the time of this writing, only a couple (safari/mobile safari) browsers hardware accelerate ONLY 3d CSS animations & transforms. Leveraging CSS Transitions and Animations can make or break the performance on mobile devices. By sending the animations to the GPU you can get a full 60fps for animations even on small devices like the iPhone. Run the sample site in Safari, or an iPad, scale up an image by clicking/tapping it to see the smooth hardware acceleration in action.
In the Sample Site I detect if CSS3d transforms are supported with Modernizr and then either transform objects with hardware accelerated css3d or fall back to regular 2d css transforms. The pattern I used in the sample looks like this:
The key here is the fact that safari and safari mobile hardware accelerate any CSS3d transforms and animations. In general I found it pretty easy to work with CSS Transitions passing 3D transforms in as my animation property. Check out the full source to see the nitty gritty, but in general a barebones css3d transition with hardware accelerated transfoms looks like this:
The best place to learn about css animations and transitions is on apple’s web developer site. While I was building the sample, these were the sites I found most useful:
Phew! That was an overwhelming amount of code and babble. If you hung in there and read through the whole thing…I hope it was informative. It took me about 3 weeks to wrap my head around all of it, so hopefully this will save some time for anyone looking to get up and running quickly.
Overall I think it takes quite a bit of finesse to build ‘app-quality’ websites that work reliably across all the modern browsers. And until the discrepancies between browsers are minimized or tools/frameworks pop up to handle some of these advanced features I don’t see a ton of value in going to the extreme to build premium website that work on all platforms.
As an alternative, I think it probably makes sense to land somewhere between a native app and a nice website. In other words, I think you can still create atypical and engaging websites that have some app-like characteristics, without having to fret about hardware accelerating every animation and falling back where there is no support. However, this is something that should be left to the technologist/designer to be decided on a case by case basis.
There are some really great examples of what I mean listed here:
Thanks to everyone that attended my design talk at Devsum11. I was truly excited about the number of developers genuinely interested in design here in the Stockholm technology community.
Talk Overview
The bar for premium user experience has been rising slowly over the past 5 years. And as a result traditional design and technology are starting to converge in a very unique way. To be honest, I never expected to be giving a design process talk to a packed full room of developers. But here we are…and I couldn’t be more excited as more design thinking is being embraced by the technology community.
In the talk below I attempt to lay out a framework for a minimal design process that has been cherry picked for software. The goal of the talk is not to give a design 101 lecture, but give somewhat of a “playbook” or a checklist of design activities and resources you can start using tomorrow to enhance your next software project.
Design Process Overview
The talk gives a ton of examples and resources I use everyday to help me arrive at a well designed piece of software. The process I describe below is a streamlined version of the full design process as we use here at Clarity. At high level the slides go into some detail about the following:
Research
Inspiration
Sketching
Wireframes
Prototyping
Visual Design
Motion
Interaction Design
Feedback
Resources
The Goods
I hope that these slides will serve as a jump-off point for anybody looking to apply a design process to software. Or if anything…I hope this deck gets people excited about the intersection of design-thinking and technology.
In my last post I showed a quick summary of a graphic-intensive dashboard that I helped out with. I also mentioned that there are a lot of posts out there dogging SL and WPF rendering performance. But if we get creative with some of the built-in controls SL has to offer we can get some pretty good drawing perf. I wanted to elaborate on some of the techniques I used to eek-out every bit of perf I could. The main concepts I want to discuss are:
Procedural Animations
Writeable Bitmaps
Image Blitting
Out of the box, Silverlight and WPF have Storyboards and Timelines to animate objects on the screen. Storyboards, however, quickly break down once you need to draw more than ~50 items on a screen at once. Storyboards are great for quick animation (slide-in, slide-out, etc.), but for intense data visualizations we’ll have to get a little closer to the metal.
Procedural Animations
Procedural animations are most commonly found in video games and are used to create complex visual effects. Things like simulating particle systems, physics-based animations, and sprite animations. But that doesn’t mean we can’t spicy up our everyday-software with some of the same concepts.
They way most procedural animations are implemented are with a simple a Setup and Update, Draw loop.
In Silverlight we can setup our animations by hooking in to the CompositionTarget.Rendering event and then call ‘Update’ and ‘Draw’ each time it ticks. If you’ve ever done any game programming for SL or WPF this should look very familiar as it resembles a typical game ticker.
Here is a sample project you can download to wrap your head around how procedural animations in Silverlight.
This is the basic shell for doing pretty much any type of procedural animation and is the base of what we’ll build on to get to the good stuff. Note that just by following this pattern you can easily animate 1,000 objects on the screen…which is a nice improvement from 50.
Writeable Bitmaps for Animation
But why stop at animating a meager 1,000 objects? Lets crank it to 11. There are three key things to know about writeable bitmaps when using them for animation.
You can snapshot items in the visual tree and render them to a static image
You can write directly to the byte array (modify image at the pixel level)
You can render visuals that are NOT in the visual tree to an image
But since this post is about Animation I’m going to gloss over the nitty-gritty of WBs…there are a ton of great resources that already exist on the topic.
The WriteableBitmapEx library is the main thing I want to focus on. Once you wrap your head around the power of the WriteableBitmap you’ll find that this library is totally amazing, and can seriously take your visual effects to another level. This library does some REALLY interesting things that are NOT easy to do with SL and WPF out-of-the-box. :
All we’re doing here is setting an Image’s source equal to the WriteableBitmap. Then in the draw loop we clear out the drawing surface, populate our WB with ellipses, and then force a redraw(Invalidate). Pretty simple.
Image Blitting with Writeable Bitmaps
This is where things get interesting. We can use the super fast “blit” extension method to blit an existing image resource into the writeable bitmap. Sound confusing?
Its not…Silverlight is faster at drawing images than it is generating shapes, so we can take the bytes of an existing image and insert them into our writeable bitmap’s byte array. And the handy ‘blit’ extension method takes care of all the dirty work for us.
Putting all this all together you can start pushing the boundaries of what Silverlight can do. Below is a recreation of a popular particle effect using all the techniques I mentioned above. In the example I’m animating 3000 images at ~60fps. Go ahead and download the code and crank it up to 10,000-15,000..its still pretty smooth.
I hope this provides some insight into pushing the limits of silverlight’s rendering pipeline. I look forward to seeing other folks make some interesting visualizations.
Best,
Erik Klimczak | eklimczak@claritycon.com |twitter.com/eklimcz
Info graphics and Data visualizations have been a trendy item lately. I myself get geek’d out at the opportunity to represent a lot of data in a useful and elegant way. Data Vis isn’t new by any means, but seems to be on the radar of lots of visual artists, and was a popular topic of conversation at SxSW. While Static infographics are cool… I wish more of them were animated…which is the reason I’m writing this post.
Recently, I got the opportunity to work with a super smart Silverlight Stud (@SteveHolstad) on a super fun Infographic/dashboard/data visulization/Silerlight reporting engine. And I figured I would share some ‘lessons learned’ while bringing this baby to life.
The Challenge
The client (who’s information is blurred in the screen shots) needed a way to visualize their entire business at ‘glance-view’. While going through the elaboration phases we discovered a lot data flowing through the veins of their systems. This data would eventually drive the UI, but we needed to put on our information architect hats first. When asked what ‘drives the business?’ – the clients response included things like:
30,000+ ‘transactions’ per week
Of the 30k orders they all have distinct status
Transactions of the day vs the week
Overal revenue and ranking of profitability
…the list goes on
Without getting into the nitty gritty of the business…the main challenge was pretty clear up front:
Render ALOT of visuals on the screen. ( ~20k-~30k at a time)
The Design
As I started looking for inspiration to drive the creative end of the solution. I found a lot of really great infogrpahics and data visualizations floating around out there. Here are some of the links I found most useful:
At first, I tried to be clever with representing 30k items on the screen. I tried stacks, graphs, heat maps, funnels, drill downs, and wasn’t happy with any of them. So I decided ‘F-it, I’m just going to draw all 30k visuals on the screen’.
After I was happy with my approach for the layout, I went back and forth on Typography for a while. I was looking for something that was legible at very small sizes and looked appropriate for a infographic/datavis (something condensed). Also a type that had a modern feel, but a serious sentiment. The combo I ended up with was:
I wasn’t as worried about coming up with the creative pieces for the Design as I was about getting Silverlight to render more than 50 items on the screen at once.
There are a lot of posts dogging Silverlight and WPFs ability to render high performance graphics…and I agree with most of them . But I also believe that you can stretch the boundaries of what SL and WPF can do with procedural animations. Procedural animations are a great way to get the extra horse power you need for when rendering a lot of elements on a screen. Also, the code can (mostly) be reused on virtually any platform. HTML5 Canvas drawing, Flash drawing API, Processing, Openframeworks, and XNA all use similar drawing techniques ( beneath the covers, SL and WPF do too).
There are a few other folks that are doing advanced rendering techniques in SL and WPF. These were my go-to links when working through this project
For the folks that only ready summaries. Here is a small and kind of blurry video of the finished product. Making this entire experience feel ‘alive’ and fluid was a challenge. These are the key concepts involved with getting there:
(Click HERE for a slightly better resolution video) I didn’t have time to prep any code samples this time, but I’m planning on doing a quick post about how exactly the image blitting, and procedural animations work in SL.
Best,
Erik Klimczak | eklimczak@claritycon.com |twitter.com/eklimcz
There has been a lot if debate about the app-model vs the traditional web. Inspired by the original wired article…there is seemingly two schools of thought on the subject.
The Internet as we know it is dead….apps are replacing websites
Html5 is here to save the day and will bridge the gap between websites and native apps.
That said, we barely scratched the surface of a potentially humongous debate, but here are the cliff notes:
What is the internet?
Let’s establish some context by defining what the ‘Internet’ is, and how the term might mean different things to different people
For younger folks it could literally be Facebook. for older generations it would be AOL
For developers it’s a grid system of data flowing over port 80
For the rest of us it’s a vehicle to a destination.
For businesses its a marketing tool
What is an app?
Next we need to define what ‘app’ means in our context.
For developers an app may be defined as something you write in objective C (vs. HTML and JavaScript).
Or the distinction could be as simple as “connected” vs “disconnected”
In the eyes of a consumer the difference is more behavioral (task-specific interaction vs searchable and open)
So are apps killing the internet?
Now that we have some context of what we mean by ‘app’ and ‘internet’ we can get to the point.
What if every website was replaced with an app? And the only means of getting information was through a Marketplace or App Store. Wouldn’t this just be the Internet in disguise?
Most the apps would be largely uninteresting if they didn’t have the ‘internet’ fueling them behind the scenes.
Websites, apps, mail, maps, Facebook, Flickr…these are just destinations of content. The front-end technology or delivery mechanism doesn’t matter all that much (from a consumer perspective).
And considering the above, it’s hard to imagine the internet being anything but very much alive… its the lifeblood of our post-pc ecosystems.
So the web’s not dead…but apps are wildly successful…what can we learn from them?
Task-specific interactions – in our kitchens we have a dishwasher (to wash dishes). A toaster to toast bread. And a coffee machine to greet you, suggest your ‘usual’, and automatically re-order your supply when it’s running low (I wish…only here in the Clarity office).
You don’t buy a dish-washing, coffee-making, toaster oven. Why not? Because that is not how we are programmed to work.
Apps mimic the way we naturally work . News app for news, weather app for weather, Netflix app for movies…etc. And it’s pretty obvious now that people are willing to download 1000 different apps for a 1000 different tasks. Seem cumbersome? It is…but that is more of a UX opportunity for some eager UXers out there.
Html5 truly does start to bridge the gap between ‘apps’ and traditional websites. But I think we all can take a lesson from what apps do best:
Deliver specific, curated content with a premium experience
Whats next?
So what happens when we hit app-store critical mass? Everything has an app store. My phone, web browser, printer and even tv have been App store’d. And it’s not a far stretch to think that most of our appliances will all become connected soon too.
what does this mean for developers? A lot of work writing the next angry birds 100x over to run on every device that has some marketplace plugin.
How nice would it be if the “write once, run everywhere” mantra ever came true. Enter html5 – I’d be shocked if the Apples and Microsofts of the world weren’t thinking of ways to deeply integrate html5/js as a native technology platform in their Operating systems.
But Let’s be realistic for a minute.
While Html5 will help bridge the gap between premium apps and old crusty web 2.0 sites. I don’t think there will be enough momentum to thwart the Closed platforms that the tech giants like apple microsoft and facebook have created.
And after much debate with some smart folks. We all agree that while html5 will shine and people will build amazing experiences with it, but the ‘write once run everywhere’ world will not exist anytime soon. And there will always be brands and clients that have the need for premium experiences that reach across all platforms.
So its up to you – designer, engineer, consultant, wizard, freelancer, entrepreneur to best chose the platform that makes the most sense to get them closer to their business goals.
As professionals its our job to help educate our clients on some of the benefits of Html5 to help them make qualified decisions:
Semantic markup – Emily did a great job of explaining the benefits of semantic markup vs the plugin models.
Broad reach (runs on nearly every device and platform).
It runs on iPads and iPhones (Maybe this one is too obvious, but some of our Clients aren’t always aware).
Real Accessibility.
Canvas tag allows give you a great opportunity to create truly cross platform experiences without a ton of browser specific code.
So how do I get started?
Below are some links that I’ve gathered over the past couple of months that have been really helpful in getting up to speed on HTML5 and educating our clients on its benefits.
As always, I hope that these thoughts can help other folks in the endless world of technology consulting. I’m looking for to seeing more awesome html5 wizardry in the future.
