WD4PD: Unraveling The Web
Let’s Get the Party Started!
As a print designer (freelancer or part of a marketing team), your clients love your work. You want to keep as much control over the brand and identity materials you have worked so hard to create and sell to your audience. Now your boss/client wants you to design their website. Maybe it’s a comprehensive overhaul or just time for a refresh – at the end of the day, it is time to make sure the (web) drapes match the (print) carpet, so to speak.
When a client asks you to design their web site, there are not many places to turn to get a quick-and-dirty introduction and resource of things to keep in mind for designing online. Additionally, building the design in a fashion that can then easily be handed off to a development team can cause additional headaches and potentially lead to excessive re-work, lost profits, and blown project schedules. Nobody wants that, right?
So let’s break it down.
User Environments
It is the age of green, and paper seems like a less-than-sensitive way to express ideas and creativity, and possibly not in the best interest of our tired environment. Yet, ask any print designer why the medium is so addictive and they will tell you that looking at your design on a screen is one thing, but seeing it take shape and become a tactile piece of expression is a whole different form of satisfaction.
It’s nice to be romantic and wish that print design will enjoy its pride of place forever. The reality is that almost everyone’s world is slowly floating into the web, and if that’s where the audience is, then designers will have to follow suit if they hope to do their clients justice. Even if this were not the case, we think it’s nice to be able to express your ideas via more than one medium, cuz’ it’s cool to be able to speak many languages.
While we aren’t the self-proclaimed torch-bearers for Web vs. Print, the one sphere in which the web has an undeniable advantage is the extent of its reach, not to mention the saving on printing and mailing charges in case you need a little convincing on why it might be time for you to get your fingers into designing for the web. Making a smooth transition from paper to screen can be challenging, but what’s life without a challenge? By tweaking your existing skills a little, you will literally open yourself up to a world of new possibilities and audiences.
The good thing is that in general, designers who began their careers with the print medium tend to have a solid understanding of effective layouts, typography and how design elements can play nicely with each other on a page. All of this knowledge can definitely be used in layouts for the web, albeit with some restraint. Think of it as having to color within the lines.
The other great thing about print design is consistent user experience. A book cover looks the same all over the world, no guest at a wedding feels less special because they received a different looking invitation, and signage relies on this same visual consistency to make branding impactful.
You may wonder – how different can designing for the web be? The site is going to be viewed on a computer screen, and all computers show pretty much the same thing, right? The answer sadly is, “no”.
Many things influence how a design layout translates into effective web design. The most important of these is the user environment. Starting with where in the world the user is, what speed his internet connection is, what browser (and version of that browser) the site is being viewed in, to what resolution your user’s computer screen is, can all affect the way your design looks and operates. Translated this means exponential variations in the way your site can be viewed and your user’s experience affected. Good times.
The latest screen resolution breakdown:
Most computer resolutions are now at 1024×768 or higher. Here is the breakdown from last year according to www.W3Schools.com
| Date | Higher | 1024×768 | 800×600 | 640×480 | Unknown |
|---|---|---|---|---|---|
| January 2009 | 57% | 36% | 4% | 0% | 3% |
There’s bad news and good news. The bad news is that unfortunately, there is no sure-fire way to predict that your design will hold its ground in every single user environment, but the good news is that there are steps and measure to make sure that for the most part, your site affords a consistent viewing experience to anyone who wants to use it – oh yay!
In our following articles, we’re going to try and expand on some of the parameters that affect the overall design and user experience of any site – color, fonts, web browser dos and don’ts etc. and give you some tips & tricks to get you started on your way to building an effective and reliable site. While we’d like to cover it all, we don’t want this blog to get boring so just shoot us an email with any questions you might have, and we will be happy to help you out!
A Browser By Any Other Name…Stinks!
An exciting part of the print process is being able to choose the size and shape of your design. You can even incorporate folding, cutouts and other cool things to make your piece unique. Any design on the web however, is restricted to the browser window, and dealing with this beast requires patience and diligence. Two things that scream “fun”! Not.
It would make sense to have all browsers programmed to read code the same way – which is exactly why this is not the case. Every browser – from IE to Firefox to Safari to Opera and even to Google’s new Chrome – reads code differently. For example, margin and padding settings do different things on IE and Firefox. Firefox (our current holy grail of browsers) usually reads these settings the way it is expected to, so this is a good standard to compare the other browsers against.
There’s no limit on the amount of artwork or images in a print piece. At the most, you’ll have a hard time emailing it to the printer, but there’s always yousendit.com to fix that. With websites though, image overload is frowned upon. Using heavy artwork and images slows down the site, and let’s face it – time is money, so you don’t want a heavy site costing you valuable traffic that could bring you good business.
Some versions of the most used browsers don’t handle transparency well. They like a certain amount of concealment. This comes into play with images that have rounded corners, or if you want to use a graphic that has a complex shape, but you don’t want it on a white background. There are various image formats like JPG, GIF and PNG that are compatible with web browsers, but since their relationship’s kinda complicated, we will devote a whole chapter to figure these guys out.
Because of the above issues, it is very important that the design is tested/viewed across multiple browsers to make sure it will look the same no matter what browser the site is being viewed in. You might need to put in “fixes” depending on the browser, to make sure that the end result looks the same. It’s probably a good idea to start doing this right at the start, when you begin building the design framework of your site. Usually, testing with IE and Firefox should cover most glitches waiting to happen, but if your machine is equipped with other browsers in addition to these, go ahead and test on all.
The latest browser breakdown: According to www.w3schools.com the vast majority or users are still on IE and Firefox.
| 2009 | IE8 | IE7 | IE6 | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|---|
| December | 13.5% | 12.8% | 10.9% | 46.4% | 9.8% | 3.6% | 2.3% |
As you go along filling in the blanks, loading content and images, you will hit tiny speed-bumps with the way these elements render on different browsers, but not to worry, Google is standing by and it’s more than likely that someone else has had the same problem as you. If you can’t find a fix, you can always find a forum to complain on before trying a new route.
SO WHERE DO YOU BEGIN?
- Get Your Browsers Locked and Loaded.
Make sure you have a downloaded all of the latest versions of browsers for your testing arsenal. Pick your favorite site and view them in each browser to see how things like forms, fonts, and layout vary.Here are some helpful links for downloading:- Firefox: http://www.getfirefox.com
- Opera: http://www.opera.com
- Safari: http://www.apple.com/safari/download/ (Windows too!)
- Google Chrome: http://www.google.com/chrome/
- Internet Explorer (IE) v7 http://www.microsoft.com/windows/internet-explorer/ie7/
- Internet Explorer (IE) v8 http://www.microsoft.com/windows/Internet-explorer/default.aspx
- Pay attention to the “you-ser”.
Remember, at the end of the day someone is going to have to use this site you are designing so make sure you pay attention to common placements web components like logos, navigations, calls-to-action, etc live.- How would you use the site you are designing?
- Is it intuitive?
- What kind of content will it showcase and in what order/heirarchy should that content be showcased?
- Find inspiration.
The best thing about the web is that if it can’t be done, people aren’t doing it, so you can usually rest easy knowing that if you have seen it on another site, a talented developer can usually make it work. Find a group of sites you like and add them into your creative blender for inspiration. You don’t have to like the whole site – take a search bar from one, a button design from another, and even find out which fonts look the best to you online. - Push the envelope – just a little bit more each time.
At the end of the day, graphics on the web have to be some form of rectangle or square when cropped, so figure out clever ways to break outside of the box with curves, layers and textures. As you design more and more sites you will start to get a feel for what is and isn’t possible and you can slowly take the web-cuffs off.
Next Topic: Color Me Tricky
