August 10, 2018 • Web

Bringing notebook sketches alive (and scaling them for memo pads as well)

Website: SPJ Fight Page/SPJ Ethics Week
Client: Society of Professional Journalists
Technologies used: HTML, CSS, JavaScript
Contributions: Built and designed the pages.

Demos: SPJ: Fight With UsSPJ Ethics Week

Every once in a while, SPJ needs a site that’s part of SPJ.org but also its own thing. As if to say, “everything on SPJ.org is a big deal to us, but you should really really look at this big deal right now.”

The sites vary in terms of functionality (like this one) and design (like this one), but occasionally they’re dead simple display pages meant to compress a lot of related but disparate information/calls to action in one or two or three pages. Typically, for these, I’d get a rough sketch and a note saying, “Can you make it like this?”

Spoiler alert: I can make it like that. The tricky part usually comes in making sure it looks like the sketch on a computer but also looks similarly well-organized on the smaller screens. But if you speak fluent HTML and CSS, there‘s always a way.