Google Web Designer

Google has released a new tool, named Google Web Designer, for creating interactive HTML5 sites and ads. It has a modern WYSIWYG where you don’t need to dive into the code but use the features to get the output and the tools are mostly design-oriented. However, the code generated is always there and it can be edited or tweaked and the result is displayed automatically.

The tool comes with ready-to-use settings for designing Google-powered ads (DocubleClick, AdMob) that will work on any device. There are built-in components like 360 or carousel galleries, YouTube video embedding and more. A timeline exists for animations and anything can be drawn with a pen tool (not limited to shapes).

Google Web Designer is currently in beta status and it is available for both Windows + Mac.

Google Web Designer

https://www.google.com/webdesigner/

Data Visualization: The Quest for Patterns

Recently I was trying to present a way for individuals to find patterns in large amounts of data. The end result was considered successful and I thought I would share at a high level what was done.

Firstly, the data looked a tad liked this…

Note 1: this is NOT the actual data.
Note 2: C1 and C2 are where I wish to draw interest to in this example. I.e. the final outcome should be a clean visual of the all data with an intuitive focus where C1 and C2 get and send their data.

Certainly not terribly daunting, interesting, nor unfamiliar for the average office/information worker/victim 🙂
Running this through Excel Services really did not produce anything useful. It hinted at associations between the data points but that was it. See for yourself…

Not the best presentation of data I’m sure you’d agree… (Even forgiving the quality of the image.)
So I ran the data around a different set of axis with a bit of custom code and got a dramatically clearer view of the columns and their content associations. At least I think it is.

Colour coding C1 and C2 made things even more clear.

A successful solution!

UI Dragging : Dragdealer JS

Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

The script is pretty flexible with options like:

  • working horizontally or vertically
  • defining the initial positions of the slider (x/y)
  • setting the number of steps for the slider
  • snapping to the steps
  • and much more.

Dragdelaer JS has callbacks on both release and move events which makes any type of interactions possible.

Data Visualization: Earthquakes

Visualization of data is a topic I have a more than passing interest in. It’s a fundamental part of my daily routine as I help people understand what they have and show them new methods and tools with which they can discern patterns that may be hidden.
Sometimes I find things that are interesting or just well done. Such as this earthquake data from the USGS. Looking at the image below you can see data points (location) with value (seismic strength) and recency (date/time) clearly and concisely.

Quick Website Sketching With Paper Browser

Paper Browser is a set of PDF files that look like a browser which can be used for sketching easily once they are printed.

There are 2 different sets:

  • Quick sketch: proportionally scaled to 1024×768px and subdivided into width sections (800, 960, 1024)
  • Browser sketch: canvas is 1024×768px minus the height of the browser toolbar and status bar with 32*32px grids.

They both come with landscape and portrait versions.