Posts Tagged ‘tips’

Tips for print designers about web design

Posted on: June 14th, 2010 by Fransgaard 4 Comments

Fact:
web design requires both more skills and intelligence than print design!

…that is ofcourse not true… but the two disciplines are increasingly growing further and further apart and I firmly believe you cannot be awesome at both and have so far not seen any proof of the opposite.

While I come from a print design background I would never attempt to make professional print design as I don’t think my rusty Quark Xpress 3 skills would take me very far.

Vice versa print designers struggle with digital concepts such as low resolution fluid and flexible layouts and the dreaded navigation.

Still once in a while I receive web designs made by print designers who grab such as opportunity as a fun break from their normal tasks, a chance to add another tick to the CV: Web design.

I have yet to see a design from a print designer which can be translated painlessly to the digital space and often it is the most basic stuff that is lacking.

So here are some things to look out for as a print designer designing for web:

Software:

  • Only use Photoshop or Fireworks.
  • Do not use inDesign.
  • Do not use Quark.
  • Do not use vector-base software such as Illustrator (unless you pull the illustrations into Photoshop).

Colours:

  • Only use RGB.
  • Do not use CMYK.
  • Do not use Pantone.
  • Make sure your Photoshop is usingĀ correct colour settings. Check with your web designer.

Resolution:

  • Use 72 dpi.
  • Do not use high-res of any sort.
  • It won’t work online.

Document size:
If in doubt work with a document that is no more than 960px wide. This will work in most screen sizes. The most common screen size is currently 1024px wide and 768px high. using 960px gives room for browser chrome such as scrollbar.

Height is less important but for pages that are designed to work as sign posting, such as homepage and landing pages, aim to keep most important stuff within a height of 550px.

Information architecture:
Use pen and paper to scamp out the structure of the site. Some times it helps writing each element of the site on a PostIt note and move them around on the table until you have a grid that you are happy with. This is especially a good exercise for homepage and landing page designs.

Scalability:
Make sure your design can scale. This is one of the more difficult concepts about web design. nothing is fixed on a web page. Everything can shift around at the users whim. Things to look out for is:

  • Don’t design elements to have parts outside the screen unless you have a plan for how this will look in both smaller and bigger screens
  • Don’t design text boxes to have fixed height. It won’t work. The font-size can be changed by users and the amount of text can change as well. Aim to create text boxes that work with both font-size twice the size of your designed font size and half the size of your designed font size.
  • Don’t assume anything will stay exactly where it is. Keep the position of design elements loose and flexible.

Navigation:
This is the most important feature of a website. Without it the site fails.

  • First of all make sure you design a navigation. (Yes, I have seen designs coming through without).
  • Do not think linear about a website. Users will not go from page 1 to page 2 etc. They will jump randomly around between content. As such all content should be able to stand alone.
  • Make sure the navigation is clearly marked as a navigation.
  • Make sure it stays in the same place on all pages.
  • Aim for approximately 5-7 main navigation items.
  • Make sure to include the most basic navigation items such as Homepage and Contact Us.
  • Aim to include a search box

Legibility:
Due to the massive variation in screen quality you cannot rely on everybody seeing the same as what appears on your 27″ Apple screen so make sure your web design is legible. Check the following things:

  • Good, basic typography. Tips here: webtypography.net.
  • Big enough font size. As a rule of thumb you should be able to scale the font size down twice in a browser and still be able to read it.
  • Good enough colour contrast. A good tool to measure this is the Colour Contrast Analyser.

User testing:
Take a break while designing and force yourself to think like a private, non-professional individual and ask you this:

Would you use this site at all? Or would you go to the competitor?

Ask people around you the same question and encourage them to be honest but also ask “why?” if they reply with negative comments. If you ask people who fit the site’s actual target group then the better, but anybody is better than nobody.