DAY 8: THE ART, SCIENCE, and FUN OF VISUALS
Estimated time requirement: Varies depending on the number of images and how
much fun you are having with it (smile)
In the dinosaur days of websites, things were pretty dismal out there on the Web.
Designers (like me) were limited to....text. We could use red text, black text,
yellow text, green text. It could have a background color behind it. It could be
italicized or bolded or underlined. Oh, and we could make it blink. Shudder.
Nowadays, your options for design are so numerous it can be utterly
overwhelming trying to figure out how you'd like the website "container" to look.
In The 90-Minute Website, we've created some frameworks for you to choose
from that keep your brain from hurting from all the options, but still let you
customize it in a way that's beautifully you. We'll show you those soon, but for
now let's have a little fun with colors and imagery.
1. "Doing your colors" ...90 Minute Website style
The colors of your website not only have to feel good to you (like the colors of
your living space or office do) but they also have to create the right feeling for
your audience members. Colors set a mood and an intention.
For example, if you're a bank, in most cases you won't want a site that's all pinks
and purples. If you're a massage therapist, a site decorated in front-office steel
blues and grays probably isn't the right fit. So just how do you come up with
colors that work for you - and your audience? Here are some starting points:
A) Start with your logo, stationery, business card, book cover, flyers, walls,
signage, or even a photo of yourself you particularly want to use.
If you don't have some colors in mind already—for example, colors you already
use in these kinds of materials, and they're working for you—your work here may
be done already! You can tuck some color examples into your WEBSITE folder
and we can pull colors from it.
YOUR TURN:
Write some notes here on the colors you want to use that you already have in
existing materials:
B) Start with a new photo or a piece of art or graphic you like and want to
feature on your site...and extract some colors from it.
With the site we created for the unique hospice http://www.ensohouse.org/, we
wanted to capture the natural beauty of the place, so we started with a photo and
used the colors from within it. If you look at that site, you'll see a video on the
home page, and as you scroll around the page, note that all of the colors exist in
that video...the deep greens, golds, and creams of their surroundings.
Some clients feature their own artwork prominently in their sites. In this client's
case, we extracted tones from her paintings to make a vibrant color palette that's
simple, vibrant and clear: http://primetimerevival.com/meet-marilyn/
Do you have a favorite photo, piece of art, video, or other graphic that contains
colors that match the "mood" you want your site to have? Tuck it into your
WEBSITE folder and write down the colors you're drawn to here:
C) Start from scratch! Experiment with an online tool to look at some
different color schemes.
Slightly more technical, but not overly so. There are some nifty tools online that
let you try on different colors and see them all together.
https://color.adobe.com/explore/most-popular/?time=all
When you arrive at this link, you'll see a page of different color palettes that you
can scroll through to see if anything leaps out at you as particularly nice.
OR TRY
https://color.adobe.com/create/color-wheel/
Choose "Custom" from the "Color Rule" menu and drag the arms and dots on the
screen around to try making a palette for yourself. If you want to save your
creation, you need to create a free Adobe ID. BONUS! See the little camera icon
in the upper right? Click that to upload a photo and it will make a color palette
from the photo's colors.
There are also:
http://www.colorsontheweb.com/colorwizard.asp
http://paletton.com
https://coolors.co/
Each of these will have some sort of "Save" or "Export" feature, or you can just
take a screen shot of the final colors you like and tuck that file into your
WEBSITE folder.
Oh and be sure one of your colors is white or a light background color.
From color.adobe.com
2. Where to find images
It's possible to make an interesting site without a single photograph, but a
website is almost always more engaging, and attracts engagement better, if there
are photos or graphics that bring the text to life.
A) Things you may already have:
You may want to consider looking through your files for graphics such as:
--Your logo, masthead, or other branding materials you've had created
--A good photo of you (see Day 5 for my suggestions on that)
--Photos of your product(s), OR, if you are a service business,
--Photos of you with clients or fans, doing what you do best
--Your own art or photographs
--Photo(s) of where you do your work, especially an inviting studio or office
space, or photos of
B) Graphics you can find online:
--Atmosphere shots, such as natural scenes, happy or intriguing people,
interesting shapes and closeups
--Stock photos that simply capture the feeling you want to give, or interest the
people you are trying to talk to.
Here are a few sources for photos online that you may wish to explore if you
don't have a ready supply of your own, from inexpensive to pricy:
http://www.123rf.com/stock-photo/
http://bigstockphoto.com
http://shutterstock.com
http://iStockPhoto.com
They all have a "Search" box into which you can put search terms appropriate to
your site. Think of your keywords and keyphrases, for example, or images you
know you'd like to have. Examples: Journal writing, yoga, business coaching,
sports medicine, tarot, florist, brewpub. SIft through the results and jot down the
image numbers you'd like to have, OR save a shortlist of possibilities.
These sites require you to have a free account in order to store images you find
in your explorations - usually called a Lightbox or Likebox. But it's a great way to
save them all in one place, and share them with others (like your web designer!)
without purchasing until you've decided on the finals.
See the following page for a progression you might follow to find images
appropriate to your site.
ENTER A SEARCH TERM:
SIFT THROUGH THE RESULTS:
LIKE AN IMAGE? ADD IT TO YOUR LIKEBOX/LIGHTBOX:
GO BACK AND DO IT AGAIN WITH OTHERS YOU LIKED.
3. What size/quality image should you get?
There's no one-size-fits-all recommended photo size. Some will be used across
the full width of a page. Some will be small accents to a page.
So a good rule of thumb is to start with the photos/graphics being as big as
possible, and shrink/crop/edit them to the size we need.
In terms of purchases, or choosing the right sizes, for maximum flexibility—to be
able to use the photos in all different kinds of situations and widths—choose
images that are at least 1500 pixels wide.
We'll take 'em from there.
Breathe.
At the end of all of this you should have some nice colors in mind, and a handful
of images you feel good about. File this worksheet along with any screen shots,
color names, photo files, and other materials from today away in your WEBSITE
folder. When we get to our 90-minute session, we'll put it all into play.
Tomorrow, on Day 9, we'll talk about the framework that will hold all of your
words and pictures, and you'll get your first glimpse of the skeleton of your new
website.
Almost there!
Questions? You can write to us at [email protected] any time.