Posted by: Peter Andrease

Posted on: June 13, 2012 8:14 am

-
  1. Open up photoshop. The latest edition is CS6 but most of the points in this tutorial will work back to CS4. When picking your document size I usually design in 960px width, so I’ll usually create it at 960 setup guides for the edges of the page and then add extra padding to either side, maybe an extra 100px each side.
  2. Set up your guides if you haven’t already. There’s an action I like that creates a 960 grid in multiples of 12, 16 and 24. You can find it here. It does help speed up the whole process.
  3. Now you’ve got your canvas, you’re ready to start designing. Hopefully you’ve got some idea of what you or the client wants. It’s a good to have content, branding, images and a spec before you start. I usually sketch out a wireframe of the site I’m going to design first and refer back to it while I’m working in photoshop. Pencil and paper is much faster for jotting down new ideas and designs so it’s good to have one to hand.
  4. I’ve got into the habit of picking my fonts first and I think it’s good to be in that habit. As you’re designing for the web you need to make sure you’re using web safe fonts, check my article here. There’s some great alternatives to Arial and Georgia so don’t feel like you’re stuck with these.
  5. Next I’ll probably pick my colour pallete. My favourite place for this is kuler. Its simply brilliant for colour matching. If you’ve got a colour already then kuler will match it or if you’re looking for a new colour pallete then there’s literally thousands to choose from.

Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Authors
Categories
Archives
Blogroll