Archive for the ‘UI/UX’ Category

File Under: UI/UX

Information Architecture Tutorial – Lesson 5

Visual Design

By now you know a number of things about your site:why you are building it, who the audience is, what will be on the site (i.e., the content), and how the whole thing is structured. You are now ready to work on the visual design, which is often the most satisfying aspect of site design.

One of its main purposes is to provide users with a sense of place. They need to know where they are on the site, where they have been, and how to get to where they want to be. A good site structure combined with an effective visual design enables users to construct a mental map of the site.

The goal of this lesson is to take the site’s structure and map it onto the visual design. A number of tools are useful in creating the design. The first step is to make layout grids that define the structure and organization of the site as it will show up on the page level. Then design sketches will establish a general look and feel. Layout grids and design sketches together lead to page mock-ups, which in turn lead to the construction of Web-based prototypes.

At this point, you’ll need the help of graphic designers, art directors, and creative directors, as well as your production crew.

Continue Reading “Information Architecture Tutorial – Lesson 5″ »
File Under: JavaScript, UI/UX

Live Thumbnails

This is the JavaScript example from the Webmonkey tutorial Make Images Grow and Shrink With JavaScript. This script will allow you to put “live thumbnails” of images on your website. The thumbnails will grow and shrink when users click on them.


Continue Reading “Live Thumbnails” »

File Under: Multimedia, UI/UX

Use Filters in Photoshop

OK, you’ve created your own weblog and your hands are shaking with excitement and terror. You just posted an excellent new piece that details your grievances with that jerk Kelly at work, an essay that is by turns insightful and thrillingly alive with a kind of erotic frisson. But where are your readers? Where are the hits? Why aren’t people falling over themselves to get at your sweet, sweet words?

There are many possible explanations, but one is that people are shallow, crass, and easily distracted by shiny objects. If they come to your site and just see a page full of text, their eyes will glaze over and they’ll head right on back to the Nude Animated GIFs site.

But, but, it’s the content that’s important, right? Shouldn’t your razor-sharp writing be enough to keep their attention? Wouldn’t dressing up the text with pretty pictures almost be an insult? Isn’t it what’s in here (gesturing toward heart) that matters most of all?

Yes, truly, but in the real world people like to see their content all gussied up, preferably as sextastically as possible. Sure, you can give them a few well-cropped and color-adjusted photos. But your blog also needs its fair share of arty, distorted, eye-searing pictures! And what about a zany logo?

Enter filters!

Continue Reading “Use Filters in Photoshop” »
File Under: UI/UX

Mulders Stylesheets Tutorial – Lesson 1

Building Web pages with HTML is like painting a portrait with a paint roller. Only truly determined and tenacious souls can achieve the exact result they want. It’s just not the right tool for precision and flexibility.

Anyone who’s used HTML for more than a week knows it isn’t a very effective tool for making Web pages. That’s why we sometimes resort to making large GIFs when we want just the right font or layout. That’s why we’re forced to use convoluted table tags and invisible spacer GIFs to push things around on a page.

It’s ridiculous, really. Our code gets too complicated, our GIFs too numerous, and our final pages too bandwidth-heavy. It’s not exactly optimal Web page construction.

But in late 1996, stylesheets quietly entered the scene. Officially called cascading stylesheets (CSS), it was an elegant cousin to HTML that promised:

  • more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
  • a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
  • compatibility across browsers and platforms; and
  • less code, smaller pages, and faster downloads.


Despite lukewarm support from many of our favorite Web browsers, CSS is starting to make good on these promises. It’s transforming the way we make Web pages and is the cornerstone of Dynamic HTML.

We’ll spend the next five lessons taking a tour through the land of stylesheets. You’ll learn the basics of how to create and use cascading stylesheets within your Web pages as well as what’s possible with fonts, typography, colors, backgrounds, and positioning.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 1″ »
File Under: UI/UX

Photoshop Tips for the Web

It’s difficult to think of an electronic gadget that’s changed the way I look at the world more than my digital camera. I held off from buying one at first, but after a year of researching and one particularly hefty tax return from Uncle Sam, I made the plunge. Roughly US$500 later and I was staring down a convex lens at my life. Suddenly, every sight was a picture waiting to be taken! Every scene a perfect composition begging to be snapped up and stored on a memory card. After some advice from my pro photographer friends and a whole lot of practice, I officially became the annoying guy with the camera at the crowded party.

The truth is that digital photography is actually rather difficult. Not the taking pictures part, that’s easy. It’s the creation of a perfect end product that’s the sticky part. Taking a raw JPEG or TIFF file and crafting a digital image that looks beautiful on all the different monitor types is a process that transcends art and borders on science. Some photos turn out almost perfect from the get go – never underestimate the power of good natural light! – but most of your snapshots are going to need some gentle persuasion in the right direction before they are ready to wow the New York gallery scene.

Don’t panic, because Webmonkey is here to impart advice on creating that sharp, bright, and well-balanced image that you can show off on your site, your blog, Flickr, Zooomr or anywhere on the web. We’ll be using some tools and techniques that will be familiar to you if you’ve ever spent any time messing around in Photoshop. I’ll also be covering some basic rules about file handling, monitors, and display options.

Continue Reading “Photoshop Tips for the Web” »