graphics, social media

BBQ & BBB

As an ancillary offering to web development, I produce assets for web sites, apps and social media pages.

Here is my latest creation — a video to promote the Black Bottom Biscuit band’s upcoming return to Lone Star BBQ & Mercantile near Santee, South Carolina:

Word from the agencies is that these videos are all the rage right now, which makes sense — there is so much content on social media that it takes some visual excitement, especially animated graphics or video, to stand out from all the standard text out there.

If your next project would benefit from an animated gif or video, let’s talk about what I could bring to your team.

coding, graphics, mobile, ui, Uncategorized, web design, web development

Winning Hackcess to Justice (NC)

It was a pleasure to meet Raleigh attorney Caroline DiMaio this weekend and to advance her vision of an app to help inform migrant workers of their legal rights.

Our creation placed first out of five entries at the Raleigh edition of Hackcess to Justice, a hackathon presented by the ABA Journal and the N.C. Bar Association.  The competition was held at Campbell Law School and sponsored by Citrix ShareFile, Lawyers Mutual, and Poyner Spruill, LLP.

(It’s kind of a small world: I learned of this hackathon from Matthew Wilcut, a legal-aid attorney (and developer!) I met at a Startup Weekend competition in Greensboro a few years ago.)

Press Coverage

“App to aid migrant workers wins 3rd Hackcess to Justice hackathon” (ABA Journal)

“Code of law: ‘Hackathon’ gives birth to ideas for bridging the justice gap” (N.C. Lawyers’ Weekly) (Subscription Required)

Official Contest Site

Learn more about the competition, including the esteemed panel of judges, the judging criteria, and other entries at the official site:

Hackess to Justice (NC) on Devpost

(As a developer with a long history in and around the legal profession, I was impressed by each of the other entries – I could see any of them in production!)

Interactive Prototype

This was developed using rapid prototyping techniques and the Bootstrap JavaScript/CSS framework.  It will take you through one “happy path” of a user learning about workplace-safety rights and engaging contact with legal aid:

graphics, social media

The Great South Carolina Flood of 2015

It’s not every day that your home state gets flooded by a 1,000-year storm.

When Hurricane Joaquin and a few other systems converged to dump 3 or 4 months of rain on South Carolina in one weekend, the images of flood damage started pouring in. I would repost these on social media, mostly to let folks outside of SC (including old friends and classmates who were from there) know that something really serious was happening in the home state. After doing this a dozen times, I decided to organize the photos on a map:

SC Flood Map
Map of Images from Social Media Concerning the South Carolina Flood of 2015

I started the map mostly for my own benefit, but then made it public, figuring others might like to see it, and many did:

USA Metro Areas Viewing the SC Flood Map
MSAs Visiting My Flood Map

I continued to add links to the map.  After adding 100 or so of these images (and videos) , a few things jumped out at me:

1. Most of the Coastal Areas Flooded Badly

Charleston flooding is not news (because it happens so often), but the difference is how much of the coast was flooded — a huge swath of coastal area – the Charleston/Summerville area, Georgetown, Conway, Myrtle Beach — even up into Calabash and other North Carolina towns. (The southern coast, around Hilton Head Island, was spared.)  If this and nothing else happened, we’d have a major news story on our hands.

2. The Areas in and around Columbia Flooded Badly

SCFloodMap-Lakes-eci
Flooding was especially striking around the series of lakes just west of I-77. The lakes overflowed, and many dams failed. Look at the map at the houses (mansions, even) around Lake Katherine, Forest Acres, Arcadia Lakes, and in the King’s Grant neighborhood. I later saw photos of the interiors of some of these houses — living rooms with at least five feet of standing water.

Dramatic photos appeared from south of these lakes, where their water flows through Gill’s Creek — the intersection of where Rosewood Drive ends and Devine St. turns into Garner’s Ferry Rd. (An intersection, I’ve traversed thousands of times.) A pet store flooded, resulting in the loss of several small animals (thankfully, at least the dogs and cats were evacuated.) A building with an income tax service was completely demolished.

The canal downtown gave way, which severely impacted the system’s clean water supply.

The damage extended west into Lexington County. The Old Mill dam, near downtown gave way. Across the county, Saluda Shoals Park was completely submerged.

People were rescued from floodwaters by attorneys and even by the cross of Jesus.

3. Areas East of Columbia, All the Way into the Pee Dee, Flooded Badly.

A common scene on my virtual tour of the devastation was where a creek had completely washed out a roadBridges were wrecked everywhere.

Big Rig Stuck on Bridge
Big Rig Stuck on Bridge

If the town had a lake, it typically would be surrounded by city blocks of (rushing, then standing) water, such as near Swan Lake in Sumter.

(I’m still learning about other areas in the state: For example, I just learned that Newberry County has closed 30 bridges because of the storm.)

As of tonight, I’ve added 288 pushpins, each with a link to an image or video from a public news or social-media source. I spent most of my life in SC, and still visit regularly, so most of those images represent somewhere I have visited, especially in Columbia, Sumter, and Charleston. Putting this map together served as quite the bittersweet virtual homecoming virtual tour… I still have trouble digesting how widespread the damage is. This ranks near Hurricane Hugo, especially in some of the more severely affected areas.

The Aftermath

Many were spared significant flood damage; however, many lost a lot. Several died in the flooding, so their friends and families are in mourning. Others had their houses flooded, and they are sorting through what’s left of their water-soaked possessions.

An army of police, fire, EMS, National Guard, Coast Guard, and utility company folks; civil engineering types; and others have been out in the weather making order out of this chaos.  The government types have been governing, and the media – local and national – have been telling the story (albeit we’re not the national lead story anymore).

The organized charities are kicking into gear, and many others are volunteering and finding ways to help out. People are trucking water into Columbia. Benefit concerts are being organized.

South Carolinians are a resilient bunch: “while they breathe, they hope….”

graphics, process, ui, Uncategorized, web design

On Mockups & Prototypes

It is generally a good idea to show your client what an app or site will look like before you actually build the thing.

And one typically does that through the use of mockups or prototypes.

Mockups vs. Prototypes

I think of mockups as the simplest possible sketches, while prototypes fill in many of the details (colors, logos, fonts, etc.).

Both represent a balancing act — They need to be polished enough to convey your ideas to clients, but you don’t want to spend a lot of time making them.

There are tons of ways to make them — pencil & paper, Balsamiq, etc.

How I Do It

I have a habit of skimming over the mockup stage and just making prototypes — For anything more polished than a line-drawn sketch, it’s usually faster for me to code the HTML/CSS, render it in a browser, and then save a screen shot than to monkey with PhotoShop, etc. Plus, a lot of that code can be reused as the project goes forward.

But this skipping-the-early-mockup-stage approach usually assumes that I have a good idea of a way forward — what if I want to present several different ideas for a project?

Rapid Prototyping

My Stanford – Coursera MOOC course on Human-Computer Interaction has me thinking more about rapid prototyping. In this course, our professor Scott Klemmer makes a strong, research-backed case that it is better to develop multiple ideas in parallel. There are many reasons for this — the designer/developer doesn’t get “married” to any one design (“separating ego from artifact”), and having multiple ideas allows for better group dynamics as these projects go forward. (The real mind-blowing stuff from Professor Klemmer is that the mockups don’t matter nearly as much as the FEEDBACK that you get from your users.)

Get Your Free Browser Line Drawing Here!

So in order to produce more ideas more quickly, I’m back to sketching…. I need some structure for this, so I produced my own little line-drawn template of a browser window:

Browser Template for Mockups

browserTemplate

(Note that the file is in .zip format b/c WP doesn’t like .SVG for security reasons.)

(And, yes. Yes, I am a fan of Firefox. Why do you ask?)

Now I can print out a handful of these and sketch designs very quickly.

The next stage of my experiment will be to edit this SVG template into an actual prototype (I hesitate to do this, because I still think it would be quicker to do via HTML/CSS.)