Teaching Graphic Designers About The Web
I was listening to episode #53 of SitePoint’s podcast when they mentioned that old “should designers code?” debate. While I don’t want to beat a dead horse, SitePoint made a great comment – that perhaps someone should figure out how to write a book on how to teach graphic designers how to do web design. After all, merely telling them to look at the code isn’t going to help them.
This got me thinking. I would love to write this book considering that I was trained to be a graphic designer in college, have been coding since middle school and worked as a web designer for a few years. Who better to write this book that someone who’s been on every side?
Unfortunately I’m pretty busy so I don’t think I’ll be writing one any time soon. So I thought I’d spend some time today thinking about some advice I’d give a graphic designer who wanted to move into the web. Here goes.
The Grid is More Important on the Web
Graphic designers love using the grid, so a web-based grid shouldn’t come as a surprise to them. However, grids for web design are much more different than a regular design grid.
Unlike print design, you never have set dimensions. For example, a print designer might be doing something on an 8.5×11 sized paper. On the web however, some people might have 3″ screens, or they might have 30″ monitors and you have to cater to both. Also, there’s technically no limit to how long a web page can be, unlike a real page of paper.
You also run into coding and browser issues when designing off a grid. When designing a website, remember that coded elements can only be rectangle shaped. A developer can’t code a rounded element.
There’s More Than One “Printer” On the Web
When designing for print, you need to know the printer you’re going to use’s type of paper, ink and requirements for files. That’s it. One the web however, you have to remember different screen sizes, different browsers, even the same browser on different operating systems. Plus now we have mobile devices like the iPhone and the *gay* Droid and larger mobile devices like the iPad. Your site should ideally be able to work on all of them with or without mobile versions.
Don’t Squeeze
Unlike print, you don’t have to squeeze every bit of info on one page or in one area. You can set multiple pages in a site, dropdown menus, sliders and tabs to hold extra content.
This means that the website also isn’t static. Unlike paper you can have things moving around, you can change the appearance on the site based on page load or type of browser agent.
Too Little Decoration Please
In print, everything costs extra. Even colors. A two color print costs much less than a 3 or 4 color print. Embossing, gloss, even the type of paper you choose in your design can add up quickly in cost. This isn’t necessarily true in web design though. You can add all sorts of cool effects and decoration to the site design-wise and it won’t cost any more.
Because of this, I’ve seen a ton of print designers who pile on every rounded corner, gradient, swoosh or anything else they can. Please stop!
You Thoughts
What’s some of the advice you’d give to a graphic designer who wanted to move into the web?
image by Ross Catrow
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
Some nice tips there but – “A developer can’t code a rounded element.” – can we not?
It’s also very important to teach them what can’t be done as well!
Technically no we can’t. We can do rounded corners, but all elements are always rectangle. When we do rounded elements it appears rounded to the user, but is still based on a rectangle grid. IE all divs, images, ul, li, a, etc etc will always be rectangle shaped, regardless of their appearance to the user. Does that make sense?
Yes, I see what you mean now. Say if they were corner to corner, they couldn’t actually touch without extra positioning rules. It’s like having an invisible rectangle encapsulating the rounded edges.
Great article! (as usual). One thing I noticed though was the following:
“You can add all sorts of cool effects and decoration to the site design-wise and it won’t cost any more.”
That’s not really true – though the cost is measured differently on the web: bandwidth.
Right, I meant cost as more of actual money. In print design, everything done to the amount of text and colors cost more money to add.
Nice article, but *gay* Droid? What are you implying? Do you dislike the Droid platform?
Oh yeah, I was wondering that too. I tend to feel the opposite way (love Android: iOS = meh, just more of apple trying to tell me what I can and can’t do).
They don’t tell you what you can and can’t do. Have never been told I couldn’t do something.
I’m guessing that means that your app development hasn’t gotten far enough along to get to the app store approval process yet…
Also, no apps that duplicate iOS functionality (IE, no gmail – no other browsers) or that apple doesn’t approve of (no porn, though that’s not an issue for me – no emulators – no ‘offensive’ material). That’s telling me what I can and can’t do.
Granted, I’m not saying that Android is without it’s flaws (the app store is a mess) – but at least it’s open (just like the web!).
Just reread this and realized my first sentence comes off as offensive – i just meant that I’ve read a lot of horror stories about the app approval process.
I’m not sure what you mean. There are definitely porn apps and gmail apps in the app store.
http://boredzo.org/killed-iphone-apps/
http://blog.laptopmag.com/apple-officially-rejects-porn-apps-puts-bikini-apps-on-notice
http://news.cnet.com/eight-reasons-we-still-need-an-iphone-gmail-app/ (non native apps don’t count).
Strange because there are definitely porn apps and gmail apps, I promise. I downloaded a few for some giggles. I think they rescinded the no-porn policy last year.
For giggles huh?…
cough cough
yes I dislike the droid. Pure knock-off and bulky.
Sure. We all have our own opinions about different platforms and that’s fine. I just felt that the use of *gay* in your article was out of context and a bit derogatory.
It was a joke…..lighten up some k’s?
I agree with Belmont. Your use of the word *gay* to describe something is rather offensive even to me as a heterosexual. I’m sure you wouldn’t like it if you found a post that referred to something stupid as *Jewish* or *blond*, and you were told to “lighten up k’s”.
It’s interesting you’re “offended” and it doesn’t even apply to you. And yes, I do get tons of Jew and blonde jokes. I get that from watching 5 minutes of South Park. And I find it hilarious as it’s obvious the creators mean no harm at all.
Grow a sense of humor. The “political correctness” of the liberal left is laughable and fake.
I understand it was a joke, but that doesn’t hide the fact that it can be perceived as derogatory. Some people take offense to small jokes, it’s almost unstoppable. Just always be clear that you’re joking if people perceive it negatively.
Also, it is unwise to bring politics into this. The design/development community is diverse politically, so to keep the readers from fighting with each other, I wouldn’t bring politics into this.
I think humans are past the point of being offended, and saying gay or fag just makes you come across as uneducated and uncultured. The list of words you could have used in place of gay is a mile long, and would have got the point across the same without making you look like you’re in 10th grade giggling at a sexual orientation jab.
Don’t stop saying gay for political correctness, for the “sensitive liberal left”, or because you’re pandering to your potential clients, stop saying gay because you’re smarter than that.
And that is where you’re wrong. You assume I use the word gay to make fun of homosexuals. I don’t. I don’t even connect homosexuality with the word gay. Ergo my point – get over it and stop being offended *for* people.
I have to say, Scott brings up a valid point. Though you are not using it to make fun of homosexuals, it is used by 13 year-olds to insult others, thus making the use of it immature.
I know, and others know, you’re much smarter than that Amber, that’s why Scott makes a valid point by advising not to use those words because it comes off as uneducated and immature.
We all went through our 13 year old phases and I don’t think we want to relive it xD
Gay means “happy” and not so long ago girls were given the name “Gay.” Really, people, sticks and stones! If you want to get all hot and bothered over something, do it over something substantial, not a word. Amber’s right, get a sense of humor. How do you survive in this world without twitching at “offensive” words? You decide how you feel. If you don’t want to be offended, then don’t be. Take power over your own emotions.
I just turned 30 and I’m still in my 13 year old stage…
I’m *gay* and your typo “One the web however” was more noticeable than the word “gay” in that paragraph to me. I use the word gay to describe things every once in a while (I rarely use it to describe myself). I think any one that has watched a channel such as LOGO knows that gay people tend to clown themselves more than the other crowd. Or if you are ever around a gay person you would realize that too. I don’t really agree that Droid is gay though. I would describe it more as another piece of made-out-of-jealousy crap just like Google Buzz
Anyway, I love your blog. I’m just unnecessarily defending you days later.
Sorry, I had to comment after I saw the 37Signals post from yesterday where you reference this. (I purchased rework last night by the way) I could care less about the word choice but I’m going to have to disagree with the pure knock-off and bulky comment. As someone whose has used both the iPhone and the android, I’d have to says the android is by far superior. I do agree that the new android phones with hdmi outputs are quite bulky and hdmi seems a bit pointless on a smartphone. However the Android picks up where the iPhone left off…lack of flash support, inability to tether without jailbreaking, removable microSD storage, inability to turn your phone into a wireless hotspot…just to name a few. I do have the iphone to thank for getting me more clients though. More and more people are now beginning to realize that flash isn’t the idea format for entire websites. It comes as no surprise that the market share for android phones recently surpassed that of the *gay* iPhone. : )
Nice idea for an article. You are right, people talk on this subject all the time without ever trying to offer a solution.
My advice for graphic designers fall to conventions. When designing a web mock up, a designer either:
-tends to conform too rigidly to reflect what their idea of a web design should be (ex. banner, topnav bar, side panel, content container)
or
-falls to what feels comfortable, that being more of a magazine or poster layout with little to no thought of navigation and usability, etc.
I would suggest using web design conventions as a loose model for usability sake but to not let it restrain your creativity.
My second quick advice tip would be to design with interaction in mind. Have hover, active, dropdown, etc. states included in the mockup. The web is not all presentation like it is in print, it is presentation and interaction.
Was this article written for me? Personally, I like to make my designs as complex as possible – then drop it in the lap of the coders and say something like, “now make this work!”
It’s always good for a laugh.
Speaking as a graphic designer for the web, it’s very difficult to learn how to code for some of us, so anything that can bridge the gab between designer and coder is a good thing. Even if that bridge is a little book with colorful pictures.
I think you should definitely write the book. I’d buy it, because so far, I haven’t found a great coding book for designers.
I want to write a book so bad. Started on a WordPress book, but tech articles always bore me. Want to write a freelance book but I’ve written everything I know already in blogs…although most writers take their books from their previous blog posts so maybe it would work.
Great read. I was also trained in print and am currently in the process of moving to the web. Mainly, because I never get a quote request for print without web design coming first. I’ve learned a lot, and your note about adding everything because I can was sooo true in the beginning. I added everything I could. “What else can I do?” Now it’s what else can I take away? And I’d help you write that book…
LOL! at the *gay* Droid. Good read as usual.
Just read some tutorials on web design on the web?
I’ve worked with print designers who don’t understand why the web works the way it does. Designers who dont know simple html/css tend to assume code>web is like ai.id.ps>print. They don’t understand the structure and restrictions because they are working in a medium that allows them to layer up graphics all over the place. If more designers pushed themselves to learn simple web design then at least then they would be able to wrap their head around rectangle elements.
As someone who has been coding since high school and designing after learning to code, I think it’s important for a “web designer” to know what actually works on the web, and what’s an impossible pipe dream. Because I know what will be easy to code and what will be a nightmare, I can design accordingly. Websites need to be efficient, well built, and clean coded. Having an impossible design never helps.
yeah, my first job out of college was with my current company…. designing for the web. had NO clue how to do it or make the transition. it was almost a year before i really started to discover the web community (smashing, drawar, etc…) a book like that would’ve helped me IMMENSELY. it’s taken me way to long to get to a place where i’m starting to be proud of my work (or at least… the work that exists before clients play there own version of designer with it).
still can’t figure out my own portfolio though. i’m really my own worst client.
@Ben Thank you! Do you know how many Jew and blonde jokes get thrown at me everyday? People get all ruffled up for nothing.