Category Archives: web design

Pace of Change

Has any other career field seen as much change as web development — especially the kind of open-source front-end web development the cool kids are doing?

Many of the in-demand tools, such as Angular, didn’t even exist a few years ago. (And it’s still changing — in the time it took to type that sentence, Angular was made obsolete by Angular 2.)

So what does this mean for front-end web developers like me?

It means an absolute ****-ton of new stuff to learn.

In this video, at 8’49”, one of the Digital Ocean folks, Joel Califa, presents an abridged list of some of these things: https://youtu.be/N470hsHKXNc?t=8m49s

As he mentions, the list really is much longer — what about Ionic, Cordova, JasmineJade, SASS (not the old syntax, but the new one)/LESS, TypeScript, etc., etc., etc.?

It also means a kind of identity crisis. I’ve considered myself to be one of the rare, hybrid, “purple unicorn” web designer-developer types he described in the first part of the video.  In 2009, I went to Midlands Tech to study both coding (Java, SQLJavaScript, HTML, CSS) and the Adobe Creative Suite Tools (PhotoShop, DreamWeaver, Flash, etc.). . . . Yep, Flash.

. . . . However, since then I have worked for two years in a LAMP shop and then another two in an enterprise .NET shop.  I’ve coded and deployed a native Android app, and have configured my own Linux VPSs from scratch.  My interests lately have been in exploring full-stack web development using Mongo, Angular 2 (and React), Express, and Node – the so-called “MEAN” and “MERN” stacks. . . .

. . . . So am I still a “front-end” web developer?  My web certificate was in “web design”, but am I really a “designer” anymore?

Thankfully, he does give some solid steps for prioritizing a learning path and saving some sanity (apologies for the potty mouth).

There comes a point, too, where one has to not worry about titles and labels. . . .  (Years ago, I tried to explain/sell myself as someone with the “T-shaped” skill set mentioned in the video, and no recruiter or hiring manager had any idea what I was talking about.)

. . . .But, rather, just get to the business of building elegant, useful digital things that live on the Internet. . . .

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

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:

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

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.)

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

Have I Found My Palette?

One day I’ll do a proper* post on how to pick a palette, but for now I just need to vent think outloud.

After several weeks of strategic napping careful thought, I think I have a palette for this portfolio site of mine.

Voila**!

Palette for eidc3, version 4

Palette for eidc3, version 4

https://kuler.adobe.com/#themeID/2292827

So How Did This Palette Come About?

For giggles In order to align with the contemporary Zeitgest on color theory, I started by researching for this year’s cool colors. Inevitably, that lead me to the official Pantone Color of the Year: Emerald.

So Why Do I Give a Crap HootSuite Hoot About Pantone?

The PANTONE® name is known worldwide as the standard language for color communication from designer to manufacturer to retailer to customer.

http://www.pantone.com/pages/pantone.aspx?pg=19306 OK, so the folks at Team Pantone seem to know what they’re talking about.  According to them, “Emerald is the new black” or something like that… I’ll humor them by choosing Emerald — hex code #009872 — as the basis of my new palette. What next?

Kuler’s color tools have some interesting controls — It can generate an entire five-color*** theme from a base color.

Emerald Palette Analogous Rule

Emerald Palette Analogous Rule

OK this would be fantastic if my client were**** Sea World, but it’s not — it’s me.

I looked at some of the other Kuler defaults — Monochrome — all green….

Kuler Emerald Palette Mono

Kuler Emerald Palette Mono

… Triad***** — very interesting, but a bit too garish:

Kuler Emerald Palette Triad

Kuler Emerald Palette Triad

At this point it’s like mixing paints. The fuscia color was pretty interesting, but I thought it would be more powerful if I amped it up to make it brighter. I’m using it sparingly, like a spice — only for hovering over links & whatnot. Deepened the forest green… Also, I reduced the vomit factor on the ocre by greatly reducing the saturation. Finally, the brown was just too strong — I knocked the saturation, etc. down on it and — voila! — a new palette for eidc3******.

*Yeah, I speak in British-isms: http://www.bbc.co.uk/news/magazine-19929249

** I knew my five years of French language study would prove useful one day.

*** It’s implied that all my palettes have black and white included, so I guess that’s seven colors.

****I think a post on the subjunctive mood would send this blog over the top.

*****Not to be confused with the Piedmont Triad — Greensboro, High Point and Winston-Salem — of North Carolina.

****** “eidc3” means third version of the Edward Ingram Dot Com site, but you knew that, right?

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)