Work in Progress
I've known for a while that I'm happiest when doing web work that has a positive impact on the world—in other words, "using my powers for good". I've recently taken an exciting step in that direction by signing on with the Taproot Foundation, a group that pairs web professionals (and others) with socially-beneficial nonprofits. They're starting to create teams to tackle the latest set of projects, and I hope to hear from them soon. Now, I just need to find my cape & tights. :)
Welcome to Eyegravity.
This is the online portfolio for Steve McKiernan, a web designer/developer living in Oakland, CA. Work in progress is shown to the right, and completed works are listed below—just mouse over an image to learn more. You can also highlight completed works by type: both web design and web dev, just web development, just web design, or other (or even all).
Thanks for visiting!
Completed Projects
These samples cover my time at Health Net, Casper Design Group, and Scientific Learning, as well as my work as an independent contractor. You can highlight by type: both web design and web dev, just web development, just web design, or other (or even all).
Health Net Web Team 2009 Year in Review
In 2009 and 2010, I had the opportunity to design and construct the Year in Review page for my team at Health Net. Since these yearly summaries are partly designed to show off the team's capabilities, I packed the page with jquery (an extended version of javascript) so users could easily expand and collapse sections and scroll horizontally. It takes a moment to load that extra code, but it's worth it—particularly in "The Timeline" and "Statistics Central".
(Yes, that it is Latin text, and yes, it was originally in English. But I could hardly post an internal presentation to the web 'as is' :)
[Click the image to view the site in a new window]
Linda Graham, MFT Website:
I was originally hired by Linda to update her existing site: adding weekly quotes, monthly newsletters, and other time-sensitive content. After a few years of maintaining and expanding her site, she asked me to make some major structural changes. I suggested switching to the WordPress platform because it makes the editing process much easier for non-technical folks. Leaning on my knowledge of PHP, I was able to apply her existing visual design, while extending it to add new functionality such as rollout navigation and search functionality.
[Click the image to view the site in a new window]
Scientific Learning Website Concepts:
Prior to my current position, I was the Web Designer for Scientific Learning Corporation in Oakland, CA. During my tenure there, one of my most fun and challenging projects was the visual overhaul of the corporate site. Sad to say, the project stalled—but by that point, our team had reached the visual design phase, and I had created three divergent concepts for internal review.
[Click the image to view the redesign concepts in a new window]
Images copyright Veer Images and Getty Images
Thornhill Walkathon Shirt Design:
When a local elementary school was planning its yearly Walkathon Fundraiser, I was given the opportunity to design the all-important t-shirt. Since it was close to Halloween, the theme was easy enough. Striking the right balance was tricky, however: it had to be festive and cute for kindergarden girls but creepy enough for fifth grade boys (often the most active participants in the activity). The resulting design is eye-catching, graphically sharp and budget-conscious, making the most out of a limited palette.
[Click the image to view the design in a new window]
Alternate Universe MHN.com Design:
Recently, the Health Net web team (of which I am a member) was given the opportunity to redesign the website of MHN.com, a Health Net subsidiary. Three designers put forth their best, and in an alternate universe somewhere—but not in this one—mine was selected. To see what might have been, click this image, and then click on each page to advance through some sample screens.
[Click the image to view the design in a new window]
Images copyright Veer Images and Getty Images
SoopToGo Website:
Soop, a new takeout-only restaurant in Berkeley’s ‘Gourmet Ghetto’, wanted a minimalist, distinctive site that would help convey the artisan quality of their offerings. The owners also needed to be able to update it easily, since they had little time to manage the weekly changes in the online menu. The final site helped set them apart from similar businesses by emphasizing the hand-made, all-natural aspect of their soups. A PHP backend helps ease the update process, and a tables-free, CSS layout ensures fast loading times, clean code, and compatibility with modern web standards.
[Click the image to view the site in a new window]
Health Net QR Code Flyers:
Back in 2011, I was asked to create a tabletop poster and takeaway half-sheet flyer for the Health Net table at a medical conference. The purpose of these creations was to show off Health Net's eco-friendliness by giving visitors an easy, low-paper way to access a wide range of the company's web properties. By combining 'cool' QR codes with warm images of human interaction, I was able to convey the heart behind Health Net's actions—and 'speak for the trees', as well.
[Click the image to view the designs in a new window]
Images copyright Health Net, Inc. and Getty Images
Health Net Web Team 2010 Year in Review
In 2010, I was once again given the chance to design and build the Year in Review page for my team at Health Net. As with the 2009 version, the 2010 Year in Review contains plenty of jquery (extended javascript) to add visual 'zing'. In contrast to 2009, however, I built the 2010 version in a very modular fashion, making it easy to have various members of the team update different sections—and to make last minute changes to the timeline. Not that such changes were necessary, of course. :)
(This internal presentation has been latin-ized for your protection)
[Click the image to view the site in a new window]
Solectron 2002 Online Annual Report:
This project was one of my many opportunities to translate a printed, Casper Design Group-produced Annual Report into a web format. As Solectron is a technical company, they were amenable to the idea of making the online version a Flash presentation, provided it was easy to use and quick to download. They even supported the use of Swift3D, a three-dimensional vector animation tool, for added visual interest.The resulting site is compact, technically complex, and highly usable—like many of Solectron’s products.
[Click the image to view the site in a new window]
Images copyright Solectron Corporation
OneWorld Health Website:
The Institute for OneWorld Health, a nonprofit pharmaceutical company, came to Casper Design Group to help spread the word about their fight against malaria and other deadly diseases. I led the team that developed a site that was usability-focused but technically rich, including such features as database-enhanced pages and an easy-to-update Global Health News section. I’m happy to say that it’s helped them gather thousands of dollars in grant money for their cause and call attention to typically neglected conditions.
The site was recently redesigned by a different company, but please do visit www.oneworldhealth.org if possible and support their very worthy cause.
Scientific Learning Banners:
On the Scientific Learning site, the best way to draw attention to a special event was to create an eye-catching banner. The constraints were tight: typically .gif or .jpg format, small pixel dimensions, and close agreement with branding guidelines. Also, since the usual setup was for two banners to share the same space, alternating in and out through the use of javascript, animation is a no-no. These limitations, however, can make a banner project an interesting challenge. It means working on a micro, pixel-pushing level, but it also offers the chance to make something appealing and inviting on a limited canvas.
[Click the image to view the samples in a new window]
MPC Choir Major Work Spring 2011 Poster:
Over the past two years, I've been designing posters for the Montclair Presbyterian Church choir (see elsewhere in Completed Projects for more examples). Most recently, I created one for their performance of J.S. Bach's Mass in G. Trying to visualize Bach is tricky, like the music itself: there's tremendous complexity and repeated patterns, as different voice parts play 'catch' with the various themes. It occurred to me that fractal images would be an effective & eye-catching way to represent those concepts visually, and I'm pleased with the results.
[Click the image to view the design in a new window]
Montclair Presbyterian Church Website
The MPC website was more than a new site: it was also a cultural shift, moving away from a single site manager and towards distributed updates by many members. After exploring Drupal and Joomla options, I chose WordPress as the best platform for the project. The customized WordPress template I developed not only gave them a fresh and clean new look, but it also made it possible for users to easily post upcoming events and recent sermons. Added bonus: the pastor now has her own weblog!
[Click the image to view the site in a new window]
MHN Government Services Website:
The marching orders for the MHN Government Services website were simple: design and build a site, including extensive backend functionality, in 45 days. I did my part by creating the ‘look and feel’ and building standards-compliant, css-based HTML pages—complete with javascript enhancements—before handing it off to the dev team. Although the site has evolved a bit since then, I’m still pleased with the public-facing part of the site. The best part, however, is the post-login functionality I helped build. You’ll have to take my word for it, however, unless you have the right security clearance...
[Click the image to view the site in a new window]
Kailas Body Therapy Website:
I initially built the Kailas Body Therapy website for Eve Siegel, a contracting client of mine, a number of years ago. The visual design was created by an associate of hers, and it was my task to convert the photoshop design files into HTML, CSS, and javascript. As Eve's practice expanded, I was there to enhance her site by adding a visually-customized WordPress blog, incorporating Facebook 'like' functionality, and working with her office admin to add various free offers and the client-side code needed to support them.
[Click the image to view the site in a new window]
Health Net Carousel Graphics:
One of my more enjoyable small projects at Health Net has been the creation of graphic banners for use in the "ad carousel" on the corporate home page. Sometimes these graphics are simply text paired with stock images, but every once in a while I get to create images from the ground up: cloudy skies over California, seismic readings, and even two hugging snowmen.
[Click the image to view the samples in a new window]
OneWorld Health HTML Newsletter: The Institute for OneWorld Health called upon Casper Design Group for many projects, ranging from a website to a broad range of collateral. They also needed an effective online newsletter, partly to spread the word about global health and also to spur essential donations from the public. While their message was the same, we worked with them to modify the design and layout, moving towards a more abbreviated outgoing email in the hope of increasing clickthru rates. Besides developing the email code, I was the driving force behind the new, slimmer format.
Gwyn Kirk Website:
It seemed only appropriate that my design for Gwyn Kirk’s website should echo her story: colorful, natural, multifaceted, bold. The trick was making sure that the bright context didn’t overwhelm the thoughtful content; I feel good about the results. One of the site features is a Wordpress blog, complete with custom css and page code to blend it in with the rest of her site. Sorry to say, despite all her cool stories, she has yet to use it once!
[Click the image to view the site in a new window]
Gelco HTML Newsletter:
Gelco Expense Management (now Concur ExpenseLink) turned to Casper Design Group to revitalize its branding and collateral. As part of this effort we produced an HTML newsletter for them, aimed initially at their customers and prospects. The project evolved over time both in terms of focus (becoming more practical in tone and intended for existing customers) and platform (moving from straight HTML to ColdFusion). As a result, it is more effective in terms of reinforcing branding and customer loyalty while at the same time quicker and easier to produce from a technical standpoint.
Images copyright Gelco Expense Management
MPC Choir Major Work Spring 2010 Poster:
In Spring of 2010, the Montclair Presbyterian Church Choir performed G. F. Handel's Jubilate Deo as part of their twice-yearly 'major work' series, and I was given the chance to design the event poster. These performances are an important part of the church's outreach program, so it was important to come up with an eye-catching and engaging design. Researching the piece, I learned that it was written to celebrate the Peace of Utrecht, which seemed like a natural visual 'hook'—it gave me the chance to do something striking and even a bit humorous.
[Click the image to view the design in a new window]
Gelco Sales CD Flash Animation:
This introduction to a sales demo CD was created for Gelco Expense Management, a Casper Design Group client. My proposed design featured embedded video and a travel-oriented theme, reinforced through universal symbols and the selected video clips. The sales demo project was never completed, but the introduction still works as a simple but dynamic presentation of Gelco’s key service offerings. Note: this file is rather large (2.1MB) and does not contain a preloader, as it was not initially designed to be viewed online.
[Click the image to view the demo in a new window]
Video clips copyright Getty Images and Veer Images
Fusion Flash Presentation: Given the opportunity to introduce a Yahoo! executive at a conference about Fusion Marketing, the team at Casper Design Group decided to create a brief Flash presentation on the concept of Fusion. Text and images, sight and sound merged together in this combination conceptual piece and Casper promotion. I constructed the presentation working from a design developed by the Casper team. Unfortunately, the presentation is no longer available for viewing. :(
Fiona Brandon Website
A while back, I built a website for the Blue Oak Therapy Center in Berkeley. Recently, my main client contact for that project decided to strike out on her own—and I'm gratified to say she asked me to build that site as well. To keep it simple to update, I built it on WordPress; to make it Google-friendly, I added Search Engine Optimization (SEO) code and fine-tined the site with the YSlow website optimizer from Yahoo!. With her skillset and all that technology, I'm confident that she'll do just fine. :)
[Click the image to view the site in a new window]
Haas Jr Fund Flash Charts:
This nonprofit organization was updating their website and wanted every visual element to reinforce their themes of continuity and change. I was brought on board to design and build charts that would showcase the evolving, expanding nature of their community support. The resulting charts are attention-grabbing, but their real magic lies under the hood, where some fairly complex actionscript makes some fairly basic graphic elements dance and sing (sort of ;).
[Click the image to view the charts in a new window]
FCCB Website:
Creating the new website for the First Congregational Church of Berkeley was an interesting challenge. Since they hadn’t updated their site in years, they were looking for my guidance in terms of architecture, message, and design; as a result I became both a coder and a general website consultant. I helped them clarify their vision for the site ? and then developed it, using a parishioner’s design. The site features a database-driven events calendar and CSS-based rollout navigation, as well as other features intended to make future updates much simpler.
[Click the image to view the site in a new window]
MPC Choir Major Work Spring 2009 Poster:
In Spring 2009, the 'major work' for that season for the Montclair Presbyterian Church Choir was Gabriel Fauré's Requiem, and I was given the chance to design the poster. The piece is a setting of the Catholic Mass for the Dead, and the text includes repeated calls for mercy upon the dearly departed, but the overall tone is a hopeful one. Since it is framed as a direct appeal to heaven, it seemed appropriate to 'go vertical'.
[Click the image to view the design in a new window]
Chiron 2001 Online Annual Report:
In contrast to much of the (overblown) Flash work of the time, this Casper Design Group project includes Flash in an unobtrusive but effective way. I'm particularly proud of a brief intro I created that set the tone for the report. That part of the presentation wove together corporate images with audio from a recent Chiron corporate video. The images and voices ended up working together surprisingly well, producing a brief feature with strong emotional resonance.
[Click the image to view the site in a new window]
Images copyright Getty Images (licensed by Casper Design Group)
CoreCommunity Website:
Designing and building Bill Say’s Core Community website was an interesting experience. The content—including nonstandard topics such as work with coma patients—lent itself well to a serene, almost abstract design approach, with images and text seemingly floating out of darkness. As is often the case, beauty has a bit of brawn: the site is built on the WordPress platform, allowing Bill to easily update any page—especially the ever-changing Events and Classes section.
[Click the image to view the site in a new window]
Factorama Website Designs:
For several years running, I've designed the look and feel of a NCAA basketball "March Madness" bracket site called Factorama. It's always an enjoyable project; essentially, I'm creating a frivolous visual overlay to some dead serious .asp code. Previous designs have included a "Matrix" theme complete with animated green code, "Lord of the Hoops", iFactorama, and the latest incarnation known as FaceTweetOrama.
[Click the image to view sample designs in a new window]
Ashes Scattered Website:
At first, the idea of complete creative freedom on the AshesScattered.com website was thrilling. Once I dug into the design process, however, the challenge of depicting a cremated ashes scattering service without falling into cliches was almost too much. The final design—with its mix of serene imagery, formal serif text and a light fading into darkness—hits the right notes for a uniquely tricky topic. And of course, the code is standards-compliant, CSS-based and SEO-friendly. Just as nature intended.
[Click the image to view the site in a new window]
ALZA 2000 Online Annual Report:
The online version of the 2000 ALZA Annual Report, produced while I was part of the Casper Design Group team, made effective use of the printed version’s imagery, text treatments and line drawings. Following our designer’s vision also meant using a lot of creative coding in order to make it all fit in a tightly defined space. The final result is clean, compact, and informative.
[Click the image to view the site in a new window]
Images copyright Alza Pharmaceuticals
MPC Christmas Concert Winter 2011 Poster:
Montclair Presbyterian Church held their most recent Christmas Concert in early December, and I was fortunate enough to design the poster for the event. The hard part, of course, was conveying a sense of Christmas without being trite. It occurred to me that I should shift the concept to 'Christmas in Oakland', and was then lucky enough to find a wonderful, evocative picture of the lights on our Grand Lake Theater. After that, the poster practically (miraculously?) designed itself.
[Click the image to view the design in a new window]
MPC Choir Major Work Winter 2011 Poster:
In Winter of 2010, I designed the event poster for the Montclair Presbyterian Church Choir's performance of several settings of a biblical poem/song known as the 'Magnificat'. The tricky bit here was resolving the tension between the theme of the poem—boundless joy over pregnancy—and the style of the music, which is quieter & more contemplative.
[Click the image to view the design in a new window]
Blue Oak Therapy Center Website:
In 2008, the Blue Oak Therapy Center hired me to lead the visual design process for their new website and then 'make it real' by developing the underlying code. An interesting wrinkle to the project was that Blue Oak placed a high value on SEO (search engine optimization), so I ended up working closely with an SEO expert to make the site as Google-friendly as possible. After all, accepting the fact that you need help is only half the battle—you then have to find it. :)
[Click the image to view the site in a new window]
Aradigm 2003 Online Annual Report:
As work progressed on the printed version of the 2003 Aradigm Annual Report, I was given the opportunity to design and build its online counterpart. The trick was to take the minimalist, almost zen-like simplicity of the book and make it engaging as a web presentation. The final product has the same as the book: with plenty of quiet space, the message of Aradigm’s potential comes through loud and clear.
[Click the image to view the site in a new window]
Images copyright Aradigm
Health Net WCOE E-Newsletter:
Health Net's WCOE (Web Center of Excellence) is constantly churning away on improvements to the company's web presence. As part of that team, I was given the chance to design & code their monthly e-newsletter, so the rest of the company could be "in on the magic". It's a simple, direct, usable, repeatable layout, intended to convey information quickly and clearly—even when it's nearly too technical to put into words.
[Click the image to view a latin-ized sample in a new window]
