Archive for the ‘UI/UX’ Category

File Under: UI/UX

Information Architecture Tutorial – Lesson 3

Site Content

Now that you know what your site is going to be about and who it is for, you are ready to pinpoint what it will contain. Everyone around you is starting to get ideas, and some of them may even have a mental image of what the site should look like. You need to harness this creative energy and channel it into a productive process. You already have an agreement on the goals and audience, and you will be using the process that everyone is familiar with by now.

The point of this part of the information-architecture process is to gather the pieces for creating the structure and organization of the site. You will need to answer two questions:What pieces of content does the site need? What sorts of functionality will be required? Think of it this way:If you want to build a spaceship out of Legos, you need to pick out all of the pieces you will be using. These pieces represent the content. If you want your Legos to do things, you need to choose which motors and processors you need (yes, Legos are computerized in this exercise). These pieces represent the functionality.

In order to harness all the ideas about how the site will work, create a list of the content and functional requirements. Then reach a consensus on how this content will be grouped and labeled. A side effect of this process is to create a content list or inventory, which is the basis for the site structure.

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

Information Architecture Tutorial – Lesson 4

If you’ve followed the first three lessons, by now you have a good handle on your site’s goals, who the audience will be, and what kinds of content and functionality you’ll need. It is now time to define the site’s structure, which is the foundation on which you build everything else.

Think of the site structure as a skeleton that holds the body together. Without it, your site will be a jumbled up, confusing mess – kind of like an amoeba. Do you want an unorganized, hard-to-use, crappy site? No! You want an evolved, highly structured, and easy-to-use site that can walk upright on its own two legs.

After creating a good site structure, everything else will fall into place. It can’t help but do so! A well-designed structure makes it easy to define a navigation system, and the two together make designing page layouts and templates a snap. This is the last step before you can actually get into building things.


Continue Reading “Information Architecture Tutorial – Lesson 4″ »
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” »