As you have probably know, most online readers don't read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader's attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast.
In HTML, if you don't specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it's list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.
For those who don't know, I'm also the guy behind Best Web Gallery and N.Design Studio. In 2006, I started Best Web Gallery as a gallery site where I feature the best CSS and Flash sites. I'm glad that I started the project because it gives me the opportunity to keep my design sense up-t0-the-trend. In the past year, I've seen a lot of sites from the submissions (some are great, some are horrible). As 2007 is wrapping up, I would like to share the best design sites with you. Here is a list of 50 websites hand-picked from Best Web Gallery — Best of CSS Design 2007.
Last year I did a free Christmas icon pack for fun. They are still looking fresh and cute. So, I just want to announce again in case you missed it last year. The pack included 49 icons in various formats: GIF, PNG, ICO (favicon purpose), and vector EPS (print purpose). It is free. You can use them for any purpose — commercial or personal. Only restriction is you can not resell/redistribute them (ie. upload to istock or offer download on your site). If you like my icon design, you can check out my stock icons.
Someone emailed me and asked how did I do the illustration background on Next2Friends. It inspired me to write this article. He asked "Did I do it in Photoshop or Illustrator?" Well, it is a mixture of both. First I created the artwork in Illustrator, then polished it in Photoshop. Here I will unveil all my secret techniques. This tutorial includes 9 Photoshop techniques that will show you how to add more depth, color, contrast, and texture into your vector art.
What do you think of the recent PayPal redesign and the new PayPal branding? In my opinion, I think the new design is very unprofessional and lack of consistency. My very first reaction to the new PayPal redesign was "What happened to PayPal? Got hacked!?" PayPal has made such a drastic change that it doesn't even look or feel like PayPal (the PayPal that we used to). I think it will take us a while to adapt to the new design. Don't get me wrong, I'm not saying change is bad. Changes are good if the results are positive. Here are my thoughts on the new PayPal design...
Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS