Look-and-feel is about the feelings a site invokes. One site could be fun, happy, and relaxed. Another could be precise, sharp, and businesslike.

Look-and-feel depends on:

1. Colors
2. Fonts
3. Page layout, especially white space
4. Interactive elements, like morphing menu items
5. Photos
6. Language, like funny error messages

In Drupal, the first four depend on the theme, as you learned earlier. The last two are about the content you put on each page.

Choose look-and-feel words

When people use your site, what look-and-feel words do you want to pop into their heads? Write them down.

Your company has an image it wants to promote. The Web site is part of that, if it’s a site that customers use. If it’s an internal site, you can go “off message.” A site about your company’s health plans might have a different look-and-feel from a customer-facing site.

Choose a theme

Unless you have $, pick a Drupal theme, and use it as is. You can have someone design a theme from scratch, but it will cost you.

There are bazillions of Drupal themes out there, so you’ll find one you like. D.O has free themes. There are companies that sell Drupal themes as well. Themes are cheap; most sell for under $100.

Many businesses already have logos, standard colors, fonts, and so on. Often they’ll work for the site, too.

For tech humans: Tweaking themes

(You can skip this section.)

You can tweak themes by changing the CSS. Be careful! Changes that don’t affect layout, like changing an item’s color, won’t cause too many problems. Layout, though, is hard to get right, especially since it has to work on mobile.

You can change the HTML templates themes use. Again, be careful. Test thoroughly.

You can add JavaScript for effects. If page layout isn’t affected, it’s not too hard. When elements appear and vanish, often they do change page layout. Be careful.

On this site’s home page, a script added unicorns and rainbows. They’re in a layer on top of everything else, so they don’t affect page layout. Except for one effect that messes with the text on the page.

To be honest, I have no sense of style. For me, a shirt with buttons is haute couture. I trust other peoples’ judgements on visual style more than I trust my own. I pick a theme, and don’t change it. When in doubt, I go with Bootstrap.

Photos

Photos are good feeling makers. Choose photos that match your look-and-feel words. Unless your look-and-feel is “serious, rational, no emotion.” Then flush the photos, except for one or two of people in suits.

Should you use stock photos, or real photos? Depends. If you want your site to feel authentic, use real photos of your own people, places, and events. Add captions, so viewers know the photos are real.

Stock photos will look better, but are fakey. There are good free photo sites out there. My fave is Pixabay.com.

Language

Use short sentences. Like this one.

Don’t waste time with marketing blather.

Welcome to our Web site! We’re so happy you’re here!

Our company is passionate about pencils. We think about them when we wake up, through the day, and when we go to bed. We can’t wait to serve your every pencil need! In fact, serving your pencil needs is the best thing we could hope for in life! Oh, and at low, low prices, of course! The highest quality, at the lowest pries, because we love you!

Our sales people are wonderful, too! They want the best for you and your family. Because we believe that children are the future. We are nurturing, caring pencilers. But we’re tough on our suppliers, so we can get the lowest prices for you, our best friends! We’re tough on ourselves, too. Yes, we want to be the best pencilers in the world! No, the universe! At low, low, rock bottom prices. So, again, welcome. We love you.

Instead:

You want pencils? We got ‘em.

Another tip: if you want a casual feel, write the same way people talk.

For tech humans: 404 pages

(You can skip this section.)

You know those 404 Page not found messages? Drupal lets you make your own.

Make a page you want to show when there’s a 404. Go to /admin/config/system/site-information (that’s Configuration | Site information) and enter that page’s URL. That’s all there is to it!

Try this page that doesn’t exist.

Summary

Look-and-feel is about the feelings a site invokes. When people use your site, what look-and-feel words do you want to pop into their heads?

In Drupal, much of the look-and-feel depend on the theme. It’s best to pick a Drupal theme, and use it as is.

Photos are good feeling makers. Use short sentences. Don’t waste time with marketing blather.

Next

Let’s see what the team does for Adopt-a-Dog’s look-and-feel.