Zuri – Marvelous Mystery Mutt and a dog well travelled!

 

Zuri came to us when she was just about 9 months old. We adopted her from the Humane Society in Champaign, Illinois. When Zuri became part of our family, she had no idea that her life would be so adventurous – frankly neither did we!

image001

Through the years, friends, strangers, and veterinarians told us something about Zuri. Maybe she’s Border Collie, maybe German Shepherd, maybe Irish Setter. To us, she was always just Zuri – a marvelous mystery mutt who always loved us!

image002

Just a few days after Zuri came to live with us we realized that Pizza was definitely her favourite thing in the world, this continued to be the case despite her travels and other fine meals!

 

 

 

We also realized that the blue octopus (Called Octopy!), belonging to her best friend Tashi was certainly her nemesis!

image003

 

When she was three, Zuri moved from the snow-covered fields in the prairies of Illinois to the heat of Texas.

image004

She adapted like a champ! As in her younger days, her love for Tashi, pizza, and making new friends continued. She made many a friend in the new cities we travelled to – both canine and human!

image005

Many years later Zuri got to take a long plane trip to India! We landed exhausted and relieved in Chennai and drove to Hyderabad.

In Hyderabad, Zuri quickly became the dada of the neighbourhood since she was twice as big as the other dogs there – she was quite thrilled with this newfound leadership. Her most favourite thing in Hyderabad was the auto rides we took to Hussain Sagar Lake park! We were quite happy that she loved the auto some of our auto drivers weren’t quite as happy.

image006

Now, Zuri is back in Austin, Texas, United States. She loves long walks and usually leads me on new adventures under the Live Oak trees that line the Austin trails.

image007

Through our travels together, the one thing I’ve known is that I will always have love, licks, and hugs to come home to! This is one friend who will always stand by my side and I hope she knows that of me.


Trace Zuri’s journey on the map! Here are the many places she’s been too!

  • Champaign, Illinois, United States
  • Lafayette, Indiana, United States
  • Kickapoo, Illinois, United States
  • Texarkana, Arkansas, United States
  • Houston, Texas, United States
  • Galveston, Texas, United States
  • Chennai, Tamil Nadu, India
  • Hyderabad, Telangana, India
  • Austin, Texas

 

 

 

 

 

The August Fest: Startup Chai

The purpose of Startup Chai was to create a forum where everyone could converse with each other – the entire space is the stage and all the participants are the experts & speakers!

DSC_0146

Saturday, August 30th was filled with lively conversations – both scheduled and unscheduled. 

We requested folks to suggest their own sessions. We received almost 20 proposals and many votes. After counting & collating, we picked the three most voted for sessions and here they are!!

DSC_0147

 

Sunday, August 31

10:00 am: Idea to entrepreneur

11:30am: Design + Startup

2pm: Python Love (The programming language, maybe snakes too)

4pm: Feminist Geekdom (Yes, men are welcome too)

5:30pm: Internet of Things

Join us at theaugufest.com

Learning from print: 2

Another great visualization in the New York Times today.

Some really great paradigms that can be emulated:

  • Mixture of tabular & graphical data
  • The total is displayed right next to the label for each “row”
  • No legend off to the right or bottom. Instead each segment is identified, in context on the chart.
  • The Total Row is separated & also displayed graphically & numerically.

Minimal theme for HighCharts

HighCharts is a popular & flexible Javascript framework to create data visualizations. The only trouble is that the default HighChart themes have a lot of 3D, shadows, and gradient that detract from data analysis.

This post walks you through a few steps towards creating a minimal, no “Chartjunk” theme for HighCharts.

Before & After

Basic Bar

Image

Basic Line

Image

Steps towards a minimal theme

1: Include a theme file

This step allows you to create a theme file that can be fully controlled.

  • Create a copy of themes/gray.js. In this example I have named it “zuri.js”
  • Open the bar chart example: examples/bar-basic/index.html
  • Include zuri.js in the file.

Now open the file zuri.js in your favorite text editor. I use Coda.

2: Background

Remove the background color and gradient.

Replace

background:{
	linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	stops: [
		[0, 'rgb(96, 96, 96)'],
		[1, 'rgb(16, 16, 16)']
	]
}

With:

background:'#fff',

3. Bar & line colors

I decided to choose some happy colors for the theme. These are defined on the first of theme. ColourLovers is a great place to find some nice palettes for your chart.

colors: ["#1860A8","#ea7613", "#3F7C20", "#F06078", "#F0C000", "#903060", "#F09000","#55BF3B", "#DF5353", "#7798BF", "#D8DA86"],

4. Fonts

I am a Helvetica fan! There were a few places I had to replace the font family.
It might be easier to just find & replace in highcharts.js, though this has the disadvantage of being overwritten during an upgrade.

  • In zuri.js find and replace
    ‘Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif’
    with:
    Helvetica, Arial
  • Now, also add font definitions for the X & Y axis labels. Find these sections & add the following:
    labels: {
    style: {
    	color: '#333',
    	font: '12px Helvetica,Arial'
    }
  • To hide the labels altogether, find the specific axis label section & add:
    {enabled:false}
  • Similarly for the legend. Find the “legend:” section and add the following:
    itemStyle: {
    		color: '#555',
    		font: '12px Helvetica,Arial'
    	},
  • Finally, change the font for the tooltips. Find the “tooltips:” section and add the following:
    style: {
    	color: '#333',
    	font: '12px Helvetica,Arial'
    }

5. Remove shadows:

In the plotOptions section, add “shadow:false” to each of the chart types.

series:{
        	shadow: false
        }

6. Remove grid lines

In both the X & Y axis section, add or change the following setting.

gridLineWidth:1

7. Some final changes

  • Remove the rounded corners. In the Tooltips and Legend sections add borderRadius:0, and change the remove the gradient definitions from the background section.
  • Export buttons:
    Remove the gradient & make them more minimal.To do so, add a background color & make remove the border.

    exporting: {
    		buttons: {
    			exportButton: {
    				borderWidth:0,
    				backgroundColor:'#fff',
    				symbolFill: '#666'
    			},
    			printButton: {
    				borderWidth:0,
    				backgroundColor:'#fff',
    				symbolFill: '#666'
    			}
    		}
    	}

Resources

Download HighCharts

More about “Chart Junk”:

Design Technology. Prototype vs SIM

I loved this presentation from the folks at frogDesign. They were most wonderful – creative, geeky, informative all rolled in.

“Users wont wear the glove, they will dance.”

Key Concepts

  • “Quantum inspiration” – if you have inspiration, there’s a likelhod others had the idea too. Because of rapid propagation one needs to move fast.
  • Generative gut check” – trust your gut.
  • Requirements fail/wireframe fail – esp. when Visionary, Innovative & Prescriptive.

Ideate..
Build..
Show..
Repeat..

Process

  • Step 1: State the problem
  • Step 2: Whole bunch of ideation up front – many ideas to solve the problem
    • in your gut, what is your favorite/most viable. Trusting your gut on a disparate team
    • advance this
    • identify & solve
    • focus on: architecture, interaction
  • Step 3: Build
    • Expedient technology is used to stand up the model as rapidly as possibly. Very different than wireframing/prototyping.
    • Throw hardware on it, right poor code, get it in front of the customer asap
  • Step 4: Show
    • Put the simulation in front of customer and use it for storytelling
    • Generative Whiteboarding – then pick a single viable. (very similar to the 1up concept)
    • Flipping through a virtualizations is so much more relevant for stakeholders, esp. for hardware.
    • Index of the vision, but tell them it’s fake! Blue sky factor – maybe it will be 5 years in the future.

Making

  • Making is designing.. no more design then make! So say the folks at Frog Design.
  • Fragmentation in technology also becomes a design issue. Designing for multiple devices, one learns just making & doing.
  • Have the engineering team do design concepts early on.
  • 4 integrities: perceptual, technical viability, logical, economic.
  • Never underestimate the smallest prototype in someones hands vs. vast volumes of paper.
  • Bring the engineers into the process, don’t have them siloed. If you can show them you got to the 10% of what you want to get to, then engineerings will trust the design more and they will work toward you.
  • Flip your engineering team from the guy who protects the requirement to the guy who enables the designer.

Innovation

There was a quad chart here.. didn’t have time to re-do it.. but imagine it!

BS & LIES WISHLIST
ADVICE KNOWLEDGE

 

 

 

 

 

 

Page is Dead

Jacob Surber

Product Manager, Adobe

@jacobsurber

Design for the content

  • Firm center and soft periphery
  • Responsive Web Design: Boston Globe redesign example
  • Hide the outline on the tablet, or smaller resolutions.
  • Media query – in order of your audience
  • Task oriented for mobile content – 30 seconds to a minute.
  • Object oriented CSS for improved design standards

Resources

  • Upstatement – check out the blog post about responsive web design
  •  PelicanFly – absolute positioned on the grid
  •  Austin W website
  • Menacing Cloud – edward cant
  • filamentgroup – responsive images
  • w3c respimages

Interesting References

  • Johannes Gutenberg: Distribution methods are changing again, similar to protests in the 1472 regarding print (no longer in control of the priests)
  •  Denis Diderot – Information Overload first statement – 1755
  • First concept of a “Page” – London Times – 1811

Collection of excellent 404 collections!

Finally blogging after a very long time.

I am in the process of redesigning/reproductizing our error screens and went in search of some ideas and wow, did I find several! Plus I didn’t even have to work very hard to find some pretty darn cool collections!

Here’s a short list:

Enjoy! Do let me know if you read this collection of mega collections!