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″ »
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″ »
Continue Reading “Live Thumbnails” »
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?
Continue Reading “Use Filters in Photoshop” »
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″ »