The Impact of Graphic Design on Software Engineering

As a software engineer, it’s easy to think of graphic design and text composition as afterthoughts. They’re not functional. I make the software work, somebody else figures out what it should look like, and what it should say. But good writing and graphic design can actually have a big impact on the engineering task.

Previously I described my solution for getting around a problem with text truncation using the new CSS3 text-overflow:ellipsis property. The property works great, making text truncation much cleaner and more elegant than it used to be – in all browsers except Firefox, which doesn’t support it yet. And there’s even a nice technique to get the effect working in Firefox as well. But that technique comes with some constraints: the block of text to be truncated can only handle very simple markup. Essentially, the entire text must be uniformly styled, because it can’t have nested HTML elements. So if you want part of it to be black and part to be red, you’re out of luck.

My company, Kachingle, has a JavaScript widget (the “Medallion”) that needed just such color variation to highlight important words in a truncated line of text, and I tore my hair out trying to find a way to get the text looking like it was supposed to in Firefox. I did manage to succeed, finally, and wrote that long post about how to do it if you need to. But today I learned that it’s possible to avoid all that pain.

Kachingle is working on a rebranding, so I’m working with our new designer, Frédéric Ranft, to rebuild that Medallion from scratch, to match his new site design. Frédéric does beautiful work. He designs visuals with impact, and then realizes them in HTML and CSS that are a joy to read, because they’re extremely simple and clean. I have to translate this into a working PHP template and sprinkle with JavaScript, and I couldn’t be happier than to work with his code.

But I’ve been anticipating some pain when the moment comes to make sure, once again, that the overflow text renders correctly in Firefox. Even now that I know the solution, there was still going to be a trial-and-error process to get it just right. But today I was looking over Frédéric’s HTML and it suddenly struck me that it’s going to be trivially easy this time. We’ll still need the special trick for Firefox that I had to dig up on the web, but we won’t need to fight with it this time – it’s going to just work, simple as that. Why? Because we’re starting from a better, cleaner design.

Now, when you get down to brass tacks, there’s nothing earth-shattering going on. The relevant difference is simply the content and layout of the text in question. In the old design, the highlighted text was embedded into a longer phrase, so it needed to be differentiated from the surrounding text by its styling; this is what caused all the trouble. The new design is less wordy, and the same text now stands by itself, so there’s no need to apply complex styling. But what gave me pause about this small change is the way the simple, clean writing and graphic design, expressed in simple, clean markup design, led to a really easy coding job for me. (So easy in fact that he can do it without me. I couldn’t have it any easier!)  The thing is, Frédéric wasn’t going out of his way to design around the truncation and styling problem. I’m sure it wasn’t even in his mind. But what he produced will be problem-free. This drives home for me the importance of the graphic design as an input to the engineering. I can easily see how a designer could make something pretty but in doing so, give engineers a big headache. But if it’s done right, the pretty display can be a gift to the engineers instead, having repercussions throughout the project.

I can’t show you the new design yet, of course. But check back later. When the rebranding goes live, those Medallions over in my sidebar and down in the footer will magically change to the new design. The ones in my original blog post were just screenshots so those will preserve a bit of history. It should make for an interesting comparison.

This entry was posted in Web development. Bookmark the permalink.

4 Responses to The Impact of Graphic Design on Software Engineering

  1. Adam Luzerio says:

    Agree with you, i just want to say that Being a software engg, always try to remember the client satisfaction. The software also has the designing part which may or may not be web based. Graphic design is the main way to get the desire texture.

  2. Liked the post, first post i have read about relationship between graphic designing and software engineering.

  3. Peter Sousa says:

    As a Graphic Designer, I really Enjoyed this…
    Thanks from slow

  4. Pingback: terrance