GRISAILLE, a blog


Building a complex information site

June 6th, 2010

I just finished a project that highlights some of the cool things you can do with PHP and databases.

Karamcguire.com is the personal site for Kara McGuire, a personal finance writer and speaker. She is a columnist for the Minneapolis Star Tribune, writes for local magazines, and frequently appears on public radio and local television.

Many features are visible to visitors, including:
• Home page displays her latest Twitters, blog posts, newspaper articles and magazine articles, using both local databases and RSS feeds;
An interactive “Ask Kara” feature, allowing users to post questions and then see both the question and Kara’s answer. The home page promotes this feature with an “Ask Kara” box that displays a random question from the “Ask Kara” archive. Clicking on the box takes visitors to the “Ask Kara” page, where the question is shown along with the answer.
• http://karamcguire.com/multimedia.php where users can listen to audio or view videos.
An integrated Google Calendar containing both Kara’s schedule and personal-finance items of general interest.
• Tab-like navigation links that provide a sense of dimension to the site, making it feel like a stack of tabbed pages.

But some of the most interesting stuff is under the hood.
The newspaper RSS feed was limited and malformed. So I had to write some custom code to parse it correctly.
• Automatic archiving. Whenever a new article appears in the RSS feed, the site automatically stores it in a database so Kara has a complete archive of her work. It also protects against broken links and speeds up the display of stories, because all the internal pages pull articles from the database, not the RSS feed. Even if stories age off of their original site, Kara will still have them available.
Display of the stories is customized. Clicking on a newspaper article less than a year old provides a three-paragraph summary of the story, with a link to the full article at the newspaper’s site. For articles more than a year old, the full text is displayed.
• A web-based content-management system that lets the client add, delete and modify articles, videos and questions without knowing any HTML.

The design delivers an information-rich site that requires minimum effort by the client to maintain. The most frequent content — newspaper articles, blog posts, tweets — is updated automatically. The client’s only responsibility is to add content that appears less frequently: magazine articles, audio and video. Keeping the site up to date requires only a few hours a month, despite the density of information.

Color and perspective in Photoshop

April 28th, 2010

I recently had to create a mockup of a customized trailer for a marketing piece. This was a piece intended to launch the product line, so the first trailer had yet to be built. All we had was a picture of a similar trailer:

trailerbefore

My task was severalfold:

1. Remove the door and put an ATM in its place;
2. Add lettering to the front and side;
3. Change the color while retaining the underlying reflections and texture.

First, I removed the door:

trailernodoor

Here’s the final result (the image is a little forced on screen, as the colors and saturation were adjusted for print):

trailerafter

Removing the door involved careful use of the Clone Stamp tool, both to make it seamless and to replicate the rivet lines.

To add the ATM, I used a picture with a somewhat similar perspective and adjusted it to match using the Vanishing Point filter. Then I threw on a subtle drop shadow oriented to match the prevailing lighting.

For the color, I drew a path, knocked out a hole for the sticker in the bottom right, and filled it with orange. I gave the layer a Soft Light blending option so the underlying rivets, texture and reflections would show through. Then I replicated the layer four or five times to get a deep enough orange.

For the type, I combined the previous two techniques. I rasterized the type layers, then used the Vanishing Point filter to match perspective.

I couldn’t just apply a Soft Light blend to the rasterized type, because it would blend with the orange background instead of giving me the mostly white color I was looking for. Further, I wanted the letters to reflect a little less than the orange background.

So with the magic wand I selected the type outline, and used that to copy the underlying part of the original picture and move it to its own layer, which I inverted using Image->Adjustments->Invert. That gave me a non-orange background for the type. I then gave the type layer a Soft Light blending option and duplicated it several times. That gave the white lettering a slightly different hint of the underlying texture.

I’m pretty happy with the result. The technique of using multiple layers of color lets you build up some pretty dense tones while allowing a lot of texture to shine through.

Content Management System, continued

March 13th, 2009

cmseditimage
The client accepted the CMS system, and it’s now installed and running on their site, Kathleen Runice, Visual Artist.

I’m continuing to improve both the look-and-feel and functionality of the system. I just released a new upgrade today, with a big piece of added functionality: A user can now change the text on their site’s static pages, eliminating the need for most sorts of “site maintenance” agreements. If you look closely at the screen shot of the page-editing interface, you’ll see that it incorporates a WYSIWYG text editor, so users can do some basic text styling (bold, italic, strikethrough, etc.)

Beyond that I added some interface tweaks and security improvements.

Screen shots attached.

cmseditpage1

cmsaddimage

Content management system

March 5th, 2009

I recently finished building a content-management system (CMS) in PHP. It’s designed for use with an image gallery. Among the features:

1. Dynamically generates gallery pages. Can be set to show any number of images per page, and generates dynamic links to the additional pages.

2. Users with admin access can add, edit or delete both image and gallery types.

3. When uploading an image, the system automatically copies, resizes and renames the images, and places them in the proper locations to show up in the gallery.

4. Error checking to make sure you don’t accidentally overwrite another image or unintentionally delete something you shouldn’t have.

5. Uses passwords and sessions to control access to the CMS pages.

The system is currently undergoing final testing by the client. Once they sign off on it, I’ll post a link to the site so you can see how it works from a user perspective. Later on I’ll set up a test site so people can play around with the CMS side as well.

I’ve already got a list of improvements for Version 2.0 — mostly broadening functionality and taking care of some housekeeping stuff that is nice but not necessary for the system to work properly.

Insights 2009

February 19th, 2009

How dare you assume I want to parlez-vous with you?

Every year, the Walker Art Museum hosts Insights 2009, a lecture series on graphic design.

This year’s series starts March 10, and appears to be well worth attending. The theme this year is typography.

On March 10, the series kicks of with local type designer Process. Besides doing custom type for publications such as the New York Times Magazine, their fonts have been used for brand-identity purposes by the likes of NBC and Nokia phones.

On March 17 we’ll hear from David Reinfurt, a New York-based designer whose low-fi, avant-garde designs inform his work for O-R-G and Dexter Sinister. Like him or hate him, he’ll get you thinking about the purpose and meaning of design.

On March 24 it’s Experimental Jetset, a Dutch firm that has practically fetishized the use of Helvetica. They did the word balloons at the top of this post, but a better example of their simple-but-eye-grabbing work is shown below. You can read about the design here.

Poster designed by Experimental Jetset for Akademische Mitteilungen, a German magazine.

Poster designed by Experimental Jetset for Akademische Mitteilungen, a German magazine.

Finally, on March 31, comes Ellen Lupton, a Baltimore-based designer who, as director of the Graphic Design MFA program at Maryland Institute College of Art, curates exhibitions intended to introduce design to a broader audience. She teaches a course on “design writing”, intended to develop the skill with words that so often gets overlooked by our visually-oriented industry.

A series ticket costs $70 ($48 for Walker/AIGA members), or you can buy a ticket to an individual lecture for $20 ($15). If you’re a student you can buy individual tickets for $10, which ends up being cheaper than buying even a discounted series ticket. Click on one of the Walker links above for details.

I’m planning on attending at least two of the lectures, depending on my schedule. So if you’re going, drop me a line: we can meet up and say “hi” either before or after.

New freelance job web site

February 14th, 2009

Here’s another place to look for freelance work: GraphicDesignFreelanceJobs.com.

Founded and run by several graphic designers, it similar to competing sites such as Lime Exchange or FreelanceDesigners.com — but unlike Lime Exchange in particular, you won’t spend so much time competing with cut-rate firms in India.

Further, it aggregates job listings from multiple sources rather than a small pool of registered users, and you don’t have to create an account to use it.

2009 One Show awards

February 14th, 2009

It’s early 2009, and that means awards season, where designers submit their best work of 2008 in hopes of recognition and maybe some cash.

The One Show, now in its ninth year, is a well-regarded advertising and marketing award with a separate category for design. The deadline for entry is Feb. 27.

The entry fee is steep — $300 for a single entry, $500 for a campaign of 3-5 ads — but the payoff in recognition if you win makes it a worthwhile effort if you’ve got something truly kick-ass.

How clients see designers

February 13th, 2009

Entrepreneur.com has an interesting series called “What I’ve learned”, where business owners talk about some of the lessons they’ve received from reality.

The latest one describes one woman’s experience with web designers.

The bullet points:

1. Learn as Much as You Can On Your Own.

2. Don’t Work With Friends.

3. Find someone Who Has Been Around and Isn’t Going Anywhere.

4. Make Sure Any ‘Extras’ Purchased Are Under Your Name.

5. Ask Your Designer To Note All Changes, Folders, etc.

6. Pay by Project, Not Hourly.

7. Be Clear On Your Expectations.

8. Keep it Business Focused.

9. Watch Your Spending.

A lot of that is obvious. But it’s worth keeping in mind that the client’s understanding of what you do is a lot different than your own. Not only do they think complicated things are easy and easy things complicated; they’re a lot more emotionally and financially invested in the project than you.

Given that, the only way to avoid disappointment is clear, constant communication. Tell them what you’re doing and why, what it will cost and how long it will take. Make sure you’re both clear on what is expected. Describe the alternatives so they know the consequences of their choices.

Welcome!

February 13th, 2009

I’ve set up this blog both as a collecting point for my thoughts, and to demonstrate how you can seamlessly integrate a blog into your website. In this case I’m using Wordpress blogging software, running under my own domain, with the PHP, HTML and CSS tweaked to match the rest of my site. Cost? About six hours of installation, HTML recoding and content setup.

Anyway, welcome to the site and I hope you find items that interest you!