iNoobs: Top 12 Web Design Guidelines (For Print Designers)webdesign Wednesday, July 27, 2011
iNoobs: Top 12 Web Design Guidelines (For Print Designers)
Welcome to another edition of the iNoobs series – where we teach you how to become a web developer (and how to grow lots of body hair and shoot omega beams from your eyes – because ya’ll know that’s the only thing that can defeat Superman).
Comic book geeky-ness aside I was asked the other day to help a friend get into web design…
“Holy f$%k,” I cursed at my grandmother… “I can combine two loves, kill two birds if you will. I can help my friend (aka my grams) and write a great post for the iNoobs series…”
(Is he already calling this a “great post”, sometimes I like his cocky writing style… sometimes it’s just too much. And is his “friend” his grandma?)
Yes… and… the parenthesis means YOU’RE thinking it…
On to the design juice…
Top 12 Web Design Guidelines (For Print Designers)
I know a lot of you out there are fantastic designers.
You can mouse through photoshop, clickety-clicking like there’s no tomorrow.
You can draw vectors in Illustrator like a boss (sometimes spelled BAWSE for effect).
You can layout stuff out in InDesign that would give any typophile a Times New Roman Orgasm. (Is that a font joke…?)
“I’m not sure, just stay with me.”
But you want to know more about web design.
Well, if you’re like my friend – as well as a few designers I’ve coached while working at an ad/marketing agency – you’d like to create some sweet designs for the web, but have some questions like, “Where do I begin?“
Unfortunately, I’ve tried simply telling designers to “open your eyes” but that never seems to work – but let’s start there anyway. Before we get to our bulleted list goodness:
OPEN YOUR EYES (BTW I’m saying this in a sultry Penelope Cruz voice)
As you move throughout the web pay attention to how everything is layed out. Pay attention to everything that has been taken into account (or haphazardly mashed together by the devs). Look at the margins, the size of the site, its behavior as you scroll, the consistency of titles, and boxes, and advertisement space and… EVERYTHING.
Then I would start by replicating the design of one of your favorite sites. That’s how I started. Just go find a beautiful site and… do it again, in photoshop or your application of choice (oh shit, I used the word application – when I used to use “program” apple is taking over).
Go recreate and enhance it. Add stuff and play with things. You’re a designer you probably have a good eye for design (and hopefully beautiful eyes in general) and will be able to move through your changes tossing the chaff and keeping your delicious wheat.
But, if you must have a complete break down here are my… Top 12 Web Design Guidelines (for Print Designers)
Preferably work/design in Photoshop (or export final design to a photoshop friendly format).
We coders like this because of layers. Layers rock for design, and for cutting up HTML/CSS.
While working within Photoshop or other software make sure colors are set to RGB and the resolution of the document you’re working on is 72DPI (but these are both defaults). It’s important to make sure to keep your design file organized (if using photoshop, keep your layers organized) using groups, and naming. Part of the next steps of cutting up a design into HTML & CSS require that we get to very specific portions of the design and organization helps reduce that time.
2) Design Resolution/Image Size
When considering the size of the website almost 100% of the time we go with a fixed width (set number of pixels) and centered design. If you’ll be following this same recommended path you’ll need to then set a maximum size for the design (boundaries for which all of the content falls under. For smaller screens 760px is recommended, however with larger and larger screens more readily available the de-facto is currently 960px as it allows lots of design freedom, as well as space for advertising and multiple columns worth of content.
Additional Resources – http://960.gs/
It’s important to illustrate in the design how the background will be handled so that it can be coded properly. There’s a number of different options here:
- Static Background (simple color or image)
- Tiled Background (vertically or horizontally)
- Static Background (an image that stays in place despite scrolling)
The main site navigation should (in my opinion) almost always be positioned at the top – and only in extreme situations to the side of the site. If you must put it on the side – position it to the left. The site navigation should be one of the most prominent elements on the page and should be consistent across the whole site.
It’s important to understand that photoshop by default will anti alias text (make it look rounded and pretty onscreen – this is the “strong, sharp, etc.” setting) and has a host of EXTRA fonts unavailable to most users.
Additionally, when converting the design into HTML, we’ll need to make sure we have the same fonts (in the cases where fonts are to be implemented exactly) should you want to use a custom font.
Much like the fonts consideration it’s important to consider headers. Any titles on the site (big areas of text usually signaling a page title) are considered “headers” being consistent here (using a similar font and style) will help in the conversion process.
Although the fancy images and colors are important the single MOST important thing is your content (text!) – it’s probably the most space any single element will need to take up, and will take the most time of your user (reading) so consider the type/font, the contrast between the content and the background it sits on, as well as secondary elements (for example a blog/news section will typically have a comment section, a box listing the author, date, etc.).
Often the best designs are very simple but with consistency and very specific tiny details. For example just adding a slight border and drop shadow to a box can make a world of difference. Great web design is all about those kinds of tiny details, both on the home page as well as throughout the site.
Because of screen discrepancies and considerations for eye site problems it’s recommended to contrast your colors as much as possible, particularly links. Although this is ultimately an esthetic decision, contrast can really help ease the use of a website.
If additional graphics are to be provided it’s important to consider file size, we try to compress all graphics as much as possible when posting to the web. For example JPG’s are typically compressed to 60% (good balance of size/quality), but Gif’s are used in places where not a lot of colors are important, and PNGs are used when transparency in an image is necessary. Because the design is to be provided as a PSD this is a moot issue unless other graphics/images are to be sent or uploaded to the site later on.
For each page being designed it’s helpful to sit down and come up with 3 goals (with a major goal on top) for a single page and then design so that you feel those goals are met easily and simply conveyed to a new visitor.
Then test – have a friend come over (perhaps your grandma) and see what the design communicates to them. Remember everyone is different and will have an opinion so although use cases and surveys like this are helpful – stick to your own gut. And seriously, old people make perfect test cases – they are rarely extremely computer savvy and typically get angry quickly so you’ll be able to tell if your design is not “up to snuff” (that’s an old person saying right?) by the fact that there’s now a keyboard lodged in your monitor.
JK – I love old people.
Be consistent in the overall design, particularly the navigation, title, and page elements. Although typically a homepage will look much different than internal pages consistency is important in communicate the flow of the website.