Tag Archives: graphics

Picture Tweaks for the Web

These are the days of instant picture-taking and sharing, and as such, most people don’t worry too much about how the pictures look; it’s more about the subject matter than anything. But, if you’re a webmaster/webdesigner, pictures take on a slightly different meaning. They are not only photos, but visual representations of your website.

It’s easy to get daunted by all the image-creation and image-editing software out there. But I’m here to tell you there are quick little tricks to make your photos (and your website) a little more awesome for your users. Read on and discover!

Photos in a Range of Sizes: Convenience for the User

When dialup and slower DSL connections ruled the Web, thumbnail photo galleries were all the rage. They were the fastest way to preview tons of photos, because users could see at a glance which photo they wanted to click on and view in full. Downside? They took forever to make, because you had to select the most salient point of the photo to make it attractive to click.

These days, web designers trying to present tons of visual content do not have to resort to thumbnails anymore due to slow connections (for the most part). Instead, what is most helpful for the modern Internet user is a selection of various sizes for your photos and graphics, a la Flickr. Like so:


This is the small size…


…and this is the larger size!

This way, your users do not have to try enlarging or shrinking the photo on their own; instead, you as the webdesigner/webmaster provide them with a choice of sizes for their convenience. (And the more convenient you can make photo-saving, the better!)

The “Levels” Tool: Beautifying Even the Most Drab of Photos

Looking for a way to subtly enhance your Web-ready photos and graphics without making your pictures look fake? Then you might want to try changing the images’ “Levels” settings, in your favorite trusty image editor/creator. (I’m using Photoshop Elements 8.0; your program may differ slightly in how this feature is set up, or it may not have a Levels tool at all. More about how to work around that in the next section. 🙂 )

Let me show you the difference a few Levels tweaks make:

Before changing Levels: A pretty outdoors picture.


Showing the Levels dialog box alongside the picture, with no changes yet.


With slight rightward shifts to the leftmost arrow (the Shadow settings), then slight leftward shifts to the middle arrow (the Midtone settings), the colors appear stronger and make the picture more interesting.


End result: a MUCH better “pretty nature pic.” And yet, it doesn’t look fake–it just looks better, at least to my eye.

Small, subtle changes like this can make your photos more vibrant and captivating–and who doesn’t want and need that kind of draw for their website?

Brightness/Contrast: The Poor Man’s Levels Tool

Now, if your image editor/creator does not have a “Levels” tool, all is not lost! Before I got Photoshop Elements, I used a long-forgotten program that had only the barest of image “editing” wizards and tools. The most sophisticated editing tool it had was a tool called “Brightness/Contrast,” and in a pinch, this can spiff up the colors of your photos like the Levels tool can. The following example uses a recent picture of me to demonstrate. (Avert your eyes if necessary–I am no model. xD)

My picture, before changing any Brightness/Contrast settings.
The Brightness/Contrast dialog box, ready to make my picture AWESOME!
With slight changes to the Brightness and Contrast settings (Brightness +10, Contrast +20), the pink of my shirt looks more colorful, my hair looks a little darker, and my skin looks a little bit smoother (and if that ain’t a miracle, I don’t know what is!).
Finished product: a slightly more presentable me–always a good thing on the Internet. (And if you recognize this picture from my Twitter avatar, points for you! xD)

With Brightness/Contrast, you can make your pictures just a little bit livelier. Just don’t go overboard changing these settings, otherwise you will end up with fake-looking pictures. Like, more fake than me with blonde hair. 😛

PNG-8 Format: Smoothest Gradients and Truest Colors

If you want a lovely gradient effect for your website, these days it’s best to turn toward the PNG format, and to the PNG-8 format in particular for smooth gradients in a small file size.

Observe the difference when you save the same exact gradient in the three major Web image file formats:

This is a low-quality JPEG rendering, with obvious diagonal striations going across the image. (You CAN get a smooth gradient with true colors in a JPEG format, but the file size will be much bigger.)
The GIF file format, especially with “Restricted” colors like this one, makes a pointillist mess of the gradient. (The “Perceptual” GIF setting does render the gradient better, but still has annoying striations running through it.)
Ah, perfection! The PNG file format renders the gradient just as well as when I created the image, but contains it within a 33 KB size!

PNG-24 Format: Best Transparent Graphics Creation

On the other hand, there is a use for the PNG-24 graphics format: making truly transparent graphics. I’ll show you what I mean:

From left to right: GIF, PNG-8, PNG-24, all with transparency settings on. Which icon would you rather use in your webdesign?

To my eye, the PNG-24 format results in the best-looking transparent graphics, whether the graphics are small like icons or big like website headers. By contrast, the “fuzziness” around the GIF and PNG-8’s icons make them both undesirable for making true transparent graphics. While the file size may be a tiny bit bigger (the PNG-24 in my example is 618 bytes, as compared to 387 bytes for the GIF and 430 bytes for the PNG-8), the payoff is definitely worth it from a design perspective.

Dark Page Backgrounds: Show Off Those Beautified Pics!

Now, for the final question: How do you properly display your newly-spiffed pictures? Answer: with a darkly-colored page background!

Think this is too simple? It does work–way back in high school, I served on the Yearbook Staff for a year, and learned a similar trick of telling a “good” picture from a “bad” one. It seems that pictures just show up better if they’re against a black or dark-colored background, and it’s easier to tell if you need to reshoot the picture or if it’s worth using. The same goes for displaying pictures on the Web; a darker background can make the colors in an image pop a little more, or help the details show up better.

The following side-by-side example shows what I mean:

This is based on exactly the same picture, with no Brightness/Contrast or Level changes between the two. And yet, the one with the black background/border around it seems to have more detail and better colors than the one with the white background/border. Weird, but it works! Using a darker-colored background for your picture pages will make them show up just that much better.

Summary

You don’t have to be a photo whiz (or a Photoshop ninja) to make your pictures look awesome for the Web. All you need are a few quick and subtle tricks to spiff up those photos for their Internet closeups, and you’ll have a much better collection to show off!

Are Gradients Passe?

While doing a search about various web design topics (for this very column), I came across an interesting phenomenon, regarding gradients and their use in web graphic design.

There were tons of articles about proper and beautiful gradient usage online, of which the following five are but a chip off the iceberg. From just reading these articles, one would gather that using simple gradients in one’s site design is still on-trend.

InspirationTi.me: Gradients
WebDesignLedger.com: 55 Inspiring Examples of Gradients in Web Design
SixRevisions: 25 Great Examples of Using Gradient Effects in Web Designs
1stWebDesigner: Beautiful Gradient Effects on Web Design
TheDesignMag: 28 Excellent Examples of Using Gradient Effects in Web Design

But there’s an important caveat here: these articles are from a few years ago, and some of their sources have changed their styles, as I noticed when I began to click through the various lists of examples. Actually, a lot of their sources have changed their styles, to be honest.

This raises a question: are gradients passe? Are they no longer “in vogue” on the Internet, but instead going the way of the animated GIF and overly-enlarged RSS icon? Have we and our users become too accustomed to them?

The Verdict: Not Quite

As I toured the various example sites and saw how they had changed their designs since these articles were written, I came to a conclusion. Gradients are perhaps not as hot as they used to be in web design; the simple “one color blending into another color in a simple linear fashion” seems to have gone more or less extinct.

But the technique of using gradients is still visible in today’s web designs, just slightly updated. The current style now seems to favor a much more subtle and complex gradient, involving more than two colors blended together, or such a slight change from one color to another that it’s merely a 3-D look rather than an official “gradient.” Some examples, below:


PlayInTraffik

Features:

  • More than two colors blended together (orange, gold, red, gray)
  • Not just a one-directional gradient–it’s an overall effect
  • Gradient includes soft shapes in the background
  • Gradient effect extends onto logo of site (top left)

Features:

  • Very, very soft and subtle gradient–hardly there at all
  • Acts as background shading for the content, rather than a huge, obvious color shift
  • Works with shades of the same color rather than two different colors

BluePixel

Newism

Features:

  • Not just a plain, smooth gradient–has streaks in it
  • More than two shades of color (range of purples)
  • Background streaks mirror logo’s angles
  • Radial gradient (bottom center) as well as linear (top left to bottom right)

Making Gradients New Again

Though the days of making simple and smooth gradients may be behind us, you can still use them for newer effects. Here are some tips for modernizing your own gradient look:

Use more than two colors, or strange two-color combinations. You might find a surprisingly lovely emerald-green shade hidden between a deep gold and muted teal shade, like this example at left.
Try subtle background patterns along with a soft gradient to give even the background of your page a little more visual interest, like this miniature sample at right.
Mess with the texture of your gradient; don’t be afraid to have sharper transitions of color, like the modern “streaked” design example at left.

What’s Your Angle on Gradients?

What do you think of using gradients in webdesign? Is it a past fad, a graphic design necessity, or a design style that hasn’t been thoroughly explored yet? Let me know in the comments!

Hand-Drawn Graphics: Yes, They CAN Be Good Enough

Contrary to popular Web belief, Internet graphics don’t have to be sleek ‘n shiny like technology. In fact, in this age of lookalike layouts and cookie-cutter designs, landscapes of reflective images and shadowed text, hand-drawn graphics can give a touch of rustic personality to a page. A hand-drawn layout, icon set, avatar, etc., can make your page feel homey and intimate–truly “handcrafted.” What’s more, it can make your site seem more down-to-earth.

But not all Web designers are handy with a pen or a paintbrush. (I know I certainly ain’t the world’s best. LOL) It can be daunting to try to put your own artwork on your webpage for everyone to see; you can be paralyzed, thinking “What if it’s not good enough? What if I work really hard on it, and it ends up looking like I used it for toilet paper?”

These are some of the real thoughts and feelings I had about doing my own hand-drawn layouts…and I finally just decided to go ahead and try my hand at it, literally. The following are some of my results:

Examples of Hand-Drawn Graphics

(For each example, click on the image to get a full-size screenshot.)

The Network Look


This, my network page, was my first try at doing a hand-drawn layout. With this layout, based on a real tree I used to climb when I was a kid, I placed buttons and links as if they were flowers and buds on living branches, with my sketch as a simple background image.

I added no color to the actual sketch–I wanted the buttons to be the spots of color in the design, like trees’ natural flower buds and blossoms. (Plus, whenever I add color to my sketches, they automatically turn from “pretty good high-school art class” to “kindergarten art class mess”. Every. Time. xD)

The Domain Look


My domain layout featured a big, sheltering tree like the ones all around my house, its soft, cloudlike branches overhanging the content on either side of the “trunk.”


The “trunk” of the sketched tree stretched down all the way to the bottom of the page, where I had the “roots” of the tree in my footer, seen here. This is probably my favorite footer design to date–it really looks like the “end” of the page, the “ground” rather than just an arbitrary bit of code stuck at the bottom.

This sketch also received no color, because I knew I’d be using large areas of various shades of green in my CSS styles; I didn’t want the actual tree to clash. I also cite my previous difficulties with adding color to my sketches. It just never works out quite as I intend. LOL

The Fanlistings Look


This “flowers & ribbons” design literally framed my joined fanlistings page, and was difficult to code but looked beautiful on the page. For this one, I added a golden color to the flowers using Photoshop, and the overall layout looked much better as a result.

I used the boxed-in design as a way to stretch my design boundaries–the style succeeded with a little image slicing and creative use of HTML tables (yes, I used tables because aligned divs hate me). In this layout, the hand-drawn images define the space but do not detract from the content, like a good area rug in a living room.

The Update Blog Look


My update blog featured only small-scale sketches (a big leaf, a tiny multi-petaled blossom, and a growing flower on its stem). I used the leaf and blossom on the top part of the layout, and the flower-and-stem image in the footer, as seen below:

Using little sketched images in strategic places on the layout (and, again, not adding any color to the sketch itself, but using blocks of color in the layout code) gave it an airy, organic look. Plus, using fewer sketches meant more space for content, should the design need it; I wasn’t sure how much the various tag clouds and category spaces would need, so I went for as much visual space as possible.

Weaknesses of This Design Style

While this does look down-to-earth and homey, it can also look amateurish. (I fully admit mine are not the best in technical execution, but they were the best I personally could do.) In addition, hand-drawn designs can easily be misaligned, angled oddly, or leave crooked lines on a webpage; you can correct many graphical sins with Photoshop, but not everything!

However, if you’re skilled doing pencil-paper sketches (or sketches on a tablet computer with a stylus), you might be able to turn a hand-drawn design into a sleek-looking layout; it would be a worthy challenge! It’s just a little bit harder to get the perfect straight lines and shiny details we’re so used to with the Web these days.

Where Can You Use Hand-Drawn Designs?

In my opinion as a designer, hand-drawn designs are generally better for small personal/informational sites and the like, not big corporate or commerce sites. Any site where you need a personal touch, a more casual layout, etc., a little sketch (or a big one!) can work.

How to Make Your Best Hand-Drawn Graphics

You Will Need:

  • Pencil
  • Ink pen
  • Coloring medium (if desired; paint would need to be let alone to dry and might not scan well)
  • Ruler (if desired)
  • Printer paper (clean and uncreased)
  • Scrap paper
  • Scanner/copier/printer & computer, linked together

Directions:

  1. Sketch out your ideas on your scrap paper with a pencil–much easier to work with your design when your lines can be erased (take it from me).
  2. When you have something you’re satisfied with, take up your pen and printer paper, and begin transferring your sketch(es) into finalized form, using a ruler as necessary.
  3. Make a couple of copies of your uncolored sketch to see how well the machine picks up your lines, and make any lines darker that don’t show up. (Also, it’s good to have a few copies of your sketch on hand just in case something happens to the original.)
  4. If you want to color in your hand-drawn design by hand, do so now. Alternatively, you can add color digitally with an image-editing program once you scan it in.
  5. Scan in the image–you may have to adjust the contrast, brightness, and other image settings so that the pen lines or hand-added colors don’t look distorted. (I ended up with one sketch that looked like a photo negative because I messed up the image settings…LOL)
  6. Once it’s scanned into your computer, you now have an image that you can use as the baseline for any web project!

Dress Your Page

I’m probably the last person who needs to write a blog article equating web design with fashion design, since my own fashion style isn’t exactly “runway” quality. I choose quality looks over trends any day. Who cares if something is “so last season,” if it fits and it looks good? I’m usually not “up” on new trends and don’t care to be.

But I do something similar with my web designs. I like “classic” web-design looks, but for me, “classic” means sometimes reverting back to tables instead of divided layers, and sometimes doing really small graphics in order to help the page load faster. As with my fashion sense, my web-design sense likes simple and fitting designs rather than designing to fit the latest trends.

The two fields are really quite similar, but web design is often seen as something too technical to understand, too detail-oriented and encrypted with strange code. This blog post seeks to show even the newest web designer how to truly “dress your page” as if you were dressing yourself.

The Role of Color in a Web Page

Color on a page, just like color in your outfit, draws attention or deflects it away. A black business suit paired with a white shirt underneath looks clean and trustworthy on both sexes; change that white shirt to a red shirt and you’ve instantly got a different vibe, of ambition and boldness. Wearing a brightly-colored shirt with a neutral-colored pair of slacks draws attention to your upper half and to your face, while wearing the neutral color on top and bright color on the bottom draws attention to your lower half instead.

In general, bright colors attract users’ attention, and muted colors fade into the background; you can use this to your advantage in a web page. Bright colors are best for accentuating new features on your site, such as a new article, a new page, or new functionality. They also infuse freshness into your site, like a fresh change of clothes.

But bright colors can also look too “young” and frivolous for a web page that needs a stable and solid look. Just like brown, deep green, navy, burgundy, black, ivory, and white lend solidarity to your look (and to doctors’ and lawyers’ offices), they can make your page look sufficiently important, sufficiently knowledgeable.

Using color on your site is partly about knowing where color needs to be placed, and which colors to use. If you have a personal site that needs to speak of your personality and your love of life, a selection of two or three bright colors, combined with one or two neutrals, might be just the spice and excitement the page needs. And if you have a business site that needs to maintain its professionalism, for instance, you can use a brighter version of one of the main colors to draw attention to new information without making the page look too colorful to be taken seriously.

Does Texture Matter? Surprisingly, Yes

Just like cotton, silk, and leather feel differently to the wearer, texture also appears on web pages, but not in a tactile sense. But don’t underestimate the subtle power of textures in a webpage.

For example: Ever visited a web site that only had solid blocks of color as its design? No patterns in the background, no patterns in the header or footer–just solid blocks of color? It might have looked neat, but it likely felt a little…bland. No visual interest existed except the play between colors. (Okay, okay, I admit it, my designs are like this more often than not. What can I say, it’s a “safe” way to design.)

Sadly, visually boring sites don’t get visited often because they seem like they’re old news; there’s nothing to set them apart from other sites, nothing to keep users returning. That’s what I struggle with in most of my sites, all in the pursuit of making a design that looks uncluttered and easy to read.

Then there’s the opposite problem: the “pattern overload.” Not only is there a tiling background pattern on the page that’s all zigzaggy, but there’s a pinstripe pattern on the header, and a crosshatched pattern behind the navigation. Add in some curlicues on the Links page and some polka dots on the footer and you have a very confused page. This is visually overwhelming to the user, and it makes it hard to enjoy the content when your eyes are swimming in patterns.

When you have a visually confusing page, users don’t even get to focus on the content because of your design, and it may turn them off from revisiting your page later. Having an interesting page is great, but does absolutely everything have to be sparkly or moving text?

So, how can we as designers use texture well? Do as the fashion designers do–put your most interesting pattern on your smallest feature. Ladies carrying snakeskin purses or wearing plaid shoes is a classic way to introduce pattern, because it’s just a “POP” of pattern rather than an oversized coat or dress screaming its pattern to the skies. Likewise, web designers can use pattern to draw attention to new features, to grace just the tops or sides of their pages, or to float lightly in the background, adding visual interest without overwhelming the content.

Also, if you’re nervous (like me) about using texture in your web page, just do a tone-on-tone pattern based on the background color of your page. Something I could do easily with Crooked Glasses’ background is to do a thin, diagonal pinstripe pattern with a lighter blue-green and a darker blue-green, alternated back and forth. It would be simple, possibly too subtle for most users to pick up on, but it would be just a little hint of pattern. It’s all about experimenting–if you don’t like the effect after all, there’s no harm in trying again!

Bejewel Your Page with Icons

As I’ve mentioned in a previous post, icons are great, but they can easily overwhelm a page, just like too much jewelry can literally and visually overwhelm a person wearing it. Too many bangles, rings, necklaces, earrings, ankle bracelets, belts, chains, and toe rings, and you end up looking like you robbed a jewelry store but forgot a bag to carry your loot in. Similarly, web pages with too many icons on them look busy and hard to read–who wants to hover over each of those icons trying to figure out what to click on?

One way web designers can display icons is to be selective about which icons they display. If you’ve got a link to every single social profile you’ve ever owned, that’s great, but you may not want to display them all on the main page. Such a list might be better if it was sorted into various categories and listed on a separate page instead. If you absolutely need to display some on the front page, have just a small, “most-important” icon list there, and then link to another page with more of them.

Also, you can arrange icons into a graphic shape (triangle, circle, diamond, or star pattern, for instance), and display them that way. (You could either make them all into one image and use an image map to do the links, or you could position them all using CSS–I much prefer the image map, though, since it’s static and won’t change with the different padding and margin “interpretations” between browsers. Looking at you, IE and Firefox. XD)

Whatever you do, be sure that at the end of your design process, your icons decorate but don’t over-decorate your page. You want your users to make sense of them, after all. And you might even remove an icon before you publish your page, just like moms used to teach their daughters to take off one item of jewelry before leaving the house.

Styling Your Webpage’s “Hair” — The Header

The header of a page is the first thing to load, and it’s the first impression of our site that users get. Yet, users don’t spend much time looking at the header while they’re on our site–they’re focusing more often on the content. It’s the same way with hairstyles–our hair makes an instant, initial impression on someone, and then that impression fades into the background as the person gets to know us better.

Hairstylists and web designers both spend a lot of time on making their creations give off a positive statement, and yet not too strong a statement that it is distracting. They also both work to make their designs memorable (though I’m not sure those crazy beehive ‘do’s should be that memorable). We as designers should work to make our headers just like good hairstyles–framing our content (the “face” of our site) rather than getting in the way.

To do this, we make headers that clearly state our site name and subject matter, but do it in a cool way (either through images or text). Whatever else your header has to offer (navigation, affiliate buttons, announcements, etc.), make that clear, as well, but don’t crowd it with information. Leave most of the information to your content area and sidebar(s) instead, and keep your header styled but not over-styled. Too many colors and too much text in your header is like too much hairspray and too many hairpins–it ends up being a mess atop what could be great content if people could get past the top of the page!

Fitting Your Footer Into Great Styles

Footers, like shoes, come in all sizes, all colors, all styles…and all heights. Some shoes are laughable because of the height of the heel; some websites’ footers are laughable because they seem to want to cram all the site’s information into a 300-pixel-tall space across the bottom of the page.

Now, I don’t have a footer fetish, but I like to see a well-designed end to a web page. I used to never pay attention to it, and I still style mine very simply, but I like to see what other people do with the footers on their web pages. A page without anything concrete at the bottom of the page to “anchor” it to its site feels a little naked, or unprotected–not even a “Back to Top” link? Sad!

Now, if it looks like an encyclopedia entry is included in the footer, it looks way too complicated for most users to mess with. If, instead, there is some author info and maybe a few pictures (or info feeds from other sites), it looks tidy while still being informative. If you can, try to avoid large blocks of text in your footer, and instead do a bulleted list or just provide a few links to pertinent information. Other content, like icons, thumbnails of relevant pictures, social media connections, or even comment boxes can be great in a footer.

Also, if a footer is jammed with colors and patterns that have nothing to do with the rest of the site, I’m often confused–“wait, what site am I visiting again?” You don’t want to confuse your users with a footer that doesn’t seem to match, even if all you’re putting in it is a couple of links. You want to make sure your footer blends in with the rest of the design.

A fashion example would be wearing red shoes with blue jeans, a green shirt, and a gold bracelet or watch–the shoes don’t match anything else in the outfit, so it looks strange. Instead, if you echoed the gold color of the jewelry in your shoe color, it looks a lot more cohesive. Echoing one of the colors of your site in the footer or one of the patterns from another part of the design pulls it all together without making the header and footer complete copies of each other.

Summary

Styling your web pages is not as difficult as some guides make it out to be–in fact, much of our graphic design skills are skills we practice every day when we stand in front of the closet piecing together an outfit. While it’s nice to stay informed on trends, really simple guidelines are about all you need to make a page look like a supermodel clothed in CSS.

Using Music to Inspire Your Web Designs

musicinspirewebdesign
As an avid musician and composer, I find that music, like writing, permeates the other areas of my life, and that definitely includes web designing. I often use music as a background when I am in full “Photoshop mode,” sometimes assembling a full playlist of particular moods and flavors of songs, and sometimes just letting iTunes Shuffle dictate what mood I’ll hear next.

Some of the more memorable designs I’ve churned out over the years have begun with music. For example:


deeppurplelayout
The clock-like notes and soaring guitars of “Alone” by Heart inspired this deep, space-like violet image, studded with faint stars. This became the background for one of my early personal sites’ splash pages.


softbluelayout
Wispy vocals and an ethereal music box sound in Britney Spears’ song “Everytime” helped me create this handmade gradient of soft blues and sunny white. I eventually used the image as the fixed background for a contact page.


darkoceanlayout
“Saltwater” by Chicane had such fathomless depth and rain-like rhythms that I was inspired to create this energetic swirl of blue-green and black. Later, this became part of a header image for an early fansite.

Where These Images/Color Selections Come From

Since I listen to the songs while I’m creating the images, I believe a lot of it has to do with my sound-color synesthesia, which I’ve referenced in other blog posts. The choices of colors and shapes often have absolutely nothing to do with the music videos, album artworks, or the artists themselves–it seems instinctual for me.

From doing this process over a number of years, I’ve discovered that hard rock, metal, or generally angry songs usually lead to harder lines, violent streaks of bright or vivid color, and harsh delineations of visual space in the resulting layout. By contrast, Celtic, New Age, or generally peaceful songs leads to soft gradients, less delineation of space on the layout, and more pastel/muted colors. Love songs of any type have almost invariably led to monochromatic designs with soft lines and yet defined content/sidebar/menu spaces on the layouts.

This is likely a result of the emotional content of each song as I experience it. But what about your own experience?

Try It For Yourself!

  1. Pick a song, any song, from your music library, and start playing it. You’ll likely want to set it on repeat for this exercise.
  2. Open your favorite graphics creation program (mine is Photoshop).
  3. Immerse yourself in the music. What colors and shapes would you associate with what you’re hearing? Does that funky guitar riff sound like a series of stretched-out triangles looks? What about that lovely glissando on the harp? Does it remind you of ripples in a pond? Let your imagination stretch out on this, and go with whatever comes to mind–don’t try to control the result too much at this stage.
  4. Whenever you’re ready, choose some colors and start creating. Anything goes at this point–remember, if you don’t like it or it doesn’t fit your vision, there’s always an Undo button!
  5. Once you’re satisfied with it or finished with it, whichever comes first, save your work.

Can’t Use It Yet? Don’t Worry!

You may never use this created image for anything–but on the other hand, it might become the basis for your next web design, or it might inspire you to create a totally new image a few months from now. If you can’t use your created image for your current project, save it for inspiration later!

The Lowly Transparent Shim

transparentshim
You probably read this post title and thought, “Shim? What’s that? And why is it transparent?” Well, in the days before CSS padding and margins, transparent shims were a godsend to webdesigners…but they can still help out our modern pages! Read on to find out how!

A Little Shim History

Transparent shims borrow their name from their wooden companions in the carpentry and construction businesses. These thin wooden pieces, often made from scrap wood or plywood, can be used to fill awkward gaps or spaces, help separate a couple of pieces of material, or make something fit more snugly and more level.

In webdesign circa the mid-2000s, a “transparent shim” image was about the only way to precisely position elements on your page. For instance, need an extra 30 pixels of horizontal space between your HTML form’s label and its text entry box? Then you’d just put in a little image tag linking to your shim image between the form label and text entry box, like so:

<img src=”shim.gif” width=”30″ height=”1″>

Or, if you needed more vertical space between your header image and your content, you’d put a little image tag like this between header and content:

<img src=”shim.gif” width=”1″ height=”50″>

Because this image was transparent, it could be stretched to any dimensions using the width and height measurements without the layout looking strangely colored. And, because it started out as a 1px-by-1px GIF file, it loaded quickly and didn’t clutter up slower connections.

These Days: Less Shim, More Padding

With the advent of easier-to-code CSS padding and margins, however, transparent shims have been less and less needed. No more need to call for that shim 50 or 60 times in a page when a couple of well-coded properties in a stylesheet can handle it all, right?

…Well, MOSTLY. There are a couple of instances where transparent shims can still help out:

Shim Situation #1: CSS Padding Rendering Differently Between Browsers

Sometimes Internet Explorer, Firefox, and Chrome will disagree on how to interpret CSS style rules such as “margin: 3px;” or “padding: 1px 10px 1px 10px;”. (CSS box model problems with IE, specifically, have been widely documented for several years.)

Shim Situation #2: Disobedient Layout Elements

Sometimes, an element on the page just will NOT position itself where you want it, and no amount of finagling, debugging, pleading, or shaking your fist at the screen will fix it. Whether text isn’t wrapping like it should, or whether some floated element is somehow “un-floating” itself, display bugs can ruin your webdesign day.

Enter the transparent shim; they act as little peacemakers, going across platforms, being equally accessible and understandable. All you have to do is put in that little image tag wherever you need it, and work with the pixel measurements to your heart’s content.

How to Make a Transparent Shim

  1. First, open an image program that can make images as well as edit them, and that can make images transparent. Adobe Photoshop Elements is the program I use; Microsoft Paint won’t do it, and neither will most really basic photo editors. Free applications that can make transparent images include GIMP and Pixlr.
  2. Choose to create a new image rather than edit an existing one, and make sure its width and height are both 1 pixel. Also, choose the “Transparent Background” option (could be in a dropdown list or a checkbox).
  3. Once you’ve created the image, save it as a transparent GIF or PNG-24 file. (JPEG format doesn’t recognize transparency.) Make sure you click the option to save it as a transparent file, otherwise it will just render as white. (For instance, Photoshop Elements has the “Save for Web…” option, in which you click a little checkbox reading “Transparency” underneath the file format option box. Your image program may be different–check every option before you click “Save!”)
  4. You should be done! To test transparency, load your new image, sized at 50 pixels by 50 pixels, on a basic black-background web page. If no 50×50 white block shows up at the top left corner, your image is indeed transparent!

Summary

Transparent shims are relatively easy to make and work with. If you have an awkward form width, an odd spacing, or even a fairly okay layout that needs just a little adjustment, try placing a shim, and see how heroic 1px by 1px images can be!

Icons Are Like Candy

iconslikecandy
Due largely to the advent of apps, many webdesigners are choosing to do more of their site’s navigation with the help of icons rather than text. After all, doesn’t it look so much cleaner just to use an icon in place for an RSS feed, or for a Twitter account, than to spell out “RSS Feed” or “Twitter” in text?

Well, yes and no. Icons can look clean and tidy–that is, until you have tons of them on the page. Too many icons can make your site look more like somebody’s cluttered desktop. Plus, if every single navigation link on your page is an icon, users can get easily confused about what to click or tap to navigate your site.

Just like candy, small doses of icons are best, so that your design looks sleek and doesn’t suffer from icon overload. But how many icons is too many? It really depends on how you organize them on the page. See below!

Think carefully about where you place and arrange your icons.

Considering your layout, how and where would your icons be best placed? For some layouts, a small table of icons might work best if you only have a tiny bit of space on your sidebar, in your header, or in your footer in which to display them–see an example below:

But if you have a small strip of space across the top or along the side of your content, you can place icons there, as seen below:


Horizontally-aligned icons can look cool as part of a navigation bar…

…and vertically-aligned icons can look neat on a sidebar.

Give at least 10px of space between your icons.


Visual spacing around your icons is hugely important. Whether you choose to arrange them in a table, like the example above, or whether you choose a vertical or horizontal strip, leave a bit of space around them. This will prevent them looking all crowded together and unreadable. The icons in my example above are spaced 10px apart, giving each one enough space to be clicked on and understood as separate entities.

Be ready to reduce the number of icons.

Take a hard look at all your icons–if they’re collectively taking up at least 200px of vertical/horizontal space, you might have too many. One way I get around this design issue is to design my icons’ display, leave it alone on my hard drive for a few days, and then come back to it with fresh eyes. With time away from it, I can better tell if there are too many even to my eyes. In that case, I pick out the most important ones (the ones I really want my visitors to click on) and put the rest on another page, well-spaced. Try this–your users’ eyes will thank you!

Make use of alt and title text.

For some layouts, you may not want the added clutter of text displaying every time you hover over an icon. For that, you can use alt text in the <img> tag and title text in the <a> tag to stand in for the text hover labels I showed how to do earlier. See how the alt and title text works in the icon table, below:

(Optional) Make a text “hover label” for each icon.

Whether you choose to do a mouse cursor hover effect for desktop users, or a “tap-to-reveal-text” effect for mobile users, it’s important to make it clear exactly what the icon represents before your visitor clicks on it.

There are plenty of dynamic script-heavy ways to do this (like using Foundation), but if you want to label your icons the old-fashioned way, here’s my hack:

1. Put link text below each icon; make the a:link and a:visited text color the same as the background color, and make the a:hover text color a strongly-contrasted color, like the examples below:


For this, I put each icon into its own table cell, and then put a line break between image and text within the link, like so:

<td valign=”top”><a href=”http://www.facebook.com/”><img src=”facebook.png” border=”0″>

<br>facebook</a></td>


For this example, I gave each icon its own table cell and row, and just put a few non-breaking spaces between linked image and linked text, like this:

<tr><td valign=”top”><a href=”http://www.facebook.com/”>

<img src=”facebook.png” border=”0″>&nbsp;&nbsp;facebook</a></td></tr>

Remember that you can have multiple lines of text displaying underneath or to the side of your icons in this format (just using HTML line breaks), as shown below:

The size of your icons is your choice–but think it through!

Icon size is a personal choice, but it also depends on the grandness of the layout you’re designing. If you have a very simple layout, small icons might look sufficiently different enough for users to notice them; if you have a very detailed, graphics-intensive layout, you’ll likely want bigger icons so that they stand out more.

(Also, for responsive layouts meant for mobile designs, big icons are easier for fingers to tap. This message brought to you by a girl with big fingertips. :D)

Summary

Adding icons as part of your site’s navigation is up to you–just remember that a few pieces of icon “candy” go very far on a web design!

The Difficulty of Pricing Design Services

pricingdesignservices
Doing web design as a career and not just as an (expensive) hobby is something I’ve been tumbling about in my mind for quite some time now. Instead of watching money go down the drain every month for hosting, and every year for my domain name, why can’t I use my skills to monetize my sites?

But it’s a harder decision than that. There are, as I’ve unfortunately found out, many roadblocks to making a success of yourself in web design, not the least of which is the knowledge required to do it. But for those who wish to pursue it as a career, there’s one final hurdle to jump: how to price your design/development services?

Today’s article focuses on the 4 most important concerns any would-be designer/developer needs to figure out before jumping into a career:

#1: People need economical services, not exorbitant prices.

As much as you might think you’ve trimmed costs, somebody will always want the price lower. These days, most people can’t afford to pay a web designer/developer much money unless they are part of a corporation. You have to find the balance in pricing between “selling yourself too short” and “never getting any clients.”

I found this very difficult when I was trying to price my designing abilities. I generally overshot what most people wanted to pay for maintenance services, and undershot the original layout and development price. Finally, I took to writing it all out: what I valued my coding skills at, what I valued my graphic design work at, etc. I came up with a list of prices I could live with:

HTML/PHP Coding (Page Coding Structure)

  • Each Page of Content: $10.00
  • Main Page Layout Coding: $12.00

Graphic Design of Page (Visual Layout)

  • Each large image (layout pieces): $20.00
  • Each small image (icons, buttons): $10.00
  • Full layout (1 page, with images and appropriate coding): $35.00

Layout Mockups

  • Each mockup beyond the first: $7.00

Are these prices exorbitant or economical? To be honest, I’m not sure. But I have strong reasoning behind each of my prices. Given that it takes me about 30-45 minutes to put together a fully-debugged page of anything, and 45 minutes to an hour to make small images of any good quality, I reasoned that 10 bucks covered that time investment that I put into creating a quality product. I then scaled up the prices on large images, full layouts, etc., using these price baselines.

You’ll need to determine what your own prices will be for yourself, taking into account how much money you need to make and how low on prices you’re willing to go. Since I want to help individuals and maybe a few small start-up businesses, I wanted to make sure my prices would be accessible; your price reasoning and money goals may be different.

2. How much work do you want to put in?

When people say “I need a web designer,” they sometimes mean that they need a little HTML-driven personal site, and sometimes they mean that they need a huge database-driven multi-user site. You have to determine for yourself what kind of work you want to put in. If working for the “big guys” fires your engines, then by all means go for it! Just remember that it will be a LOT more work than likely any of your personal web design projects have been.

You also have to take your lifestyle and current available time into consideration. If you want big-money projects, but web design is only a side business for you, you will likely run into trouble trying to keep up your time commitments. Web design is one of those things that you can dip your toe into or dive in completely and still be okay; however, you have to take on the jobs that are sized for your time allotment.

For me, personally, I am not experienced enough yet in design to where I’m comfortable pitching my skills to corporations and the like; likely, they would not even look twice at somebody like me who’s completely self-taught in this field. I’m more comfortable working with individuals who need personal sites and perhaps small business sites because I simply don’t have the knowledge yet to do large-scale sites. Neither do I have the time allotment in my schedule as of yet to completely devote myself to a web design career–I have many different interests and am enjoying pursuing them all. Thus, smaller projects work better for me overall.

3. Do you do design, development, or both?

This is one of the huge stumbling blocks I found when first trying to decide on pricing my designs. Did I want to do just layouts, icons, and buttons, or did I want to do just HTML and PHP coding? Or, instead, did I want to offer both types of design services?

For people who do one or the other very well, you may be better off to go ahead and specialize in either the graphic design side or the coding side of web design/development. If you have wonderful visual design skills, then you might have a great career in web graphic design awaiting you. Conversely, if you’re a “code ninja” and can make sites that function beautifully with scripts and databases, you can easily specialize in web development with no problem.

Now, if you’re a designer like me with some skills in both web design and development, you’ll likely want to offer both design and development services, so as not to shut out clients. I don’t do awesome digital illustration, nor do I write my own super-sleek web applications, but I can write HTML/CSS and design a page. These skills are still marketable, regardless of the methods.

4. Don’t sell yourself short—make a contract!

When trying to figure out how to price design services, don’t let anything slide by for free. Some unscrupulous customers may want you to do more than you first bargained for, such as saying “Well, I thought icons and buttons would just come with the layout design–can you go ahead and make me some?”, or “Hey, can you add about 5 more pages? I just realized I need more pages about these other topics.”

That’s why I suggest making a contract beforehand, so that both you and the client know exactly what needs to be done and how much money it will cost. Getting the contract in unalterable writing, either on paper or in a PDF file, keeps anyone from falsifying the contract terms later. That way, if the client wants you to do something extra that’s not on the contract, you can simply refer to the document and say, “I’ll be glad to do this for you, but we’ll need to add this to the contract and re-total up the price.” Clients changing what they want done is okay–it’s just that you need to be compensated for extra time and effort investment.

5. Paid by the hour or by the project? I think it depends on the situation.

There’s a big debate in the web design world about whether you should be paid according to the number of hours you’ve worked on a project, or whether you should be paid according to the size of the project you did. I thought that I was solidly on the side of “by the project,” until I started trying to price services myself. Now, I think it depends on the type of work you’re doing.

For One-Time-Only Projects, Get Paid by the Project

If you’re doing a one-time-only design/development project–say, if a client wants a layout and coding to go with it–then I’d likely choose to get paid by the project. Since you’re not going to be doing ongoing maintenance, and assuming you’re going to complete the work in as quick a time as possible, asking for payment based on the number of images you made and the pages of code you created seems to be a better fit than asking to be paid based on hours you worked.

For Ongoing Projects, Get Paid by the Hour

However, for continuous maintenance job on a website, I’d personally get paid by the hour. Since you’re likely doing daily to weekly maintenance, you need to be compensated for that time you spend each day or each week. It’s not really a “project” in and of itself–it’s keeping up the quality of the project by checking in on it and making sure things are still current.

This is, however, a personal decision that each web designer has to make for himself or herself. These are simply my reasons for choosing which type of payment style works best for me.

Summary

If you want to do web design/development as a career, you need to consider methods of payment, client relations, type of work done, and contracts. This all goes into how you want to price your design services. I hope this article has helped jump-start your own thinking, and given you some food for thought!

JPG, GIF, or PNG: This Is The Question

jpggifpng
Most beginning web designers have some difficulty with file formats, especially concerning images–I know I certainly did when I was starting out. There are three separate formats for images, and it’s hard to know which format is the best for saving image files that you’re going to display on your website, either as part of your layout or as part of your content. You don’t want the images to take two days to load, but you don’t want them to look like you used them for toilet paper, either. What is a web designer to do?

JPG: Best for Photographs, Not for Graphics

When I first started out, I read a few tutorials here and there about image saving, but I really took to the JPEG file format because it saved my images in such a small kilobyte size, which was and still is important to me. I was very impressed with how JPEG compression packed the image into such a small space that it transmitted well even over a dialup connection, so I began using .jpg format for all of my layout images, content, everything. It’s sort of the same principle as admiring someone who’s managed to pack a ton of stuff into their suitcase–you sit there wondering “How’d they do that?” Little did I know how much JPEG had left out of my images–like people leaving half their outfits at home to save space.

I don’t claim to know how JPEG compression works, but for the most part, it tends to leave a good bit of information out of your image, especially when you save it as a JPEG and choose “Low” or “Medium” quality. The blown-up versions of the two images at the first of this section show you what results from saving an image at “Low” or “Medium” JPG quality:


From left to right: Low: 2.70 KB; Medium: 3.74 KB

As I’ve heard it described, JPEG, especially low- or medium-quality JPG, is a “lossy” format–it’s like your image’s “suitcase” has a hole in the bottom. It sure is lighter when you get to your destination, but there’s a reason for that–the style of compression leaves out some of your image’s pixels to make the file smaller. The JPG file format doesn’t work very well for layout images and small icons because it tries to make up for all the pixels it left out, leaving your image rather pockmarked and subtly polka-dotted with oddly-colored pixels. Once you go up the quality scale, however, you get much better results, but you’re going to have to have a bigger file size, as shown below:


From left to right: High: 5.99 KB; Very High: 8.72 KB; Maximum: 13.7 KB

The blown-up versions below show how much better the image is constructed:


From left to right: High Quality, Very High Quality


Maximum Quality

But do not despair–JPG is absolutely wonderful for photographs, for some odd reason. I’ve taken to using JPG sparingly or not at all in my layout designs unless the layout features a full-color photograph or two, and if I have lots of pictures, I’ll use JPG to compress them without losing too much. (I find that JPG “Very High” quality blends the best of both worlds–smaller file size and good-looking product.)

GIF: Best For Icons and Little Graphics

I used to never touch GIF files except to make random little animations. I thought the file format was overly bloated–certainly its files were usually twice as big as JPG files of the same item. Little did I know, the format was actually going to prove quite useful to me! It may not be as good as JPG at compressing files, but it is great for making your layout tick.

As you can see below, there are four different sub-formats within the GIF format type. Again, I don’t claim to know how each of these works, but I have noticed that “Perceptual” and “Selective” generally turn out the best results; “Adaptive” and “Restrictive (Web)” make me die a little inside, as a web designer, because of the loss of colors. These formats generally correspond to how many colors make up the palette that the image is created from; “Restrictive (Web)” pulls from the smallest palette.


From left to right: Perceptual: 5.77 KB; Selective: 5.75 KB; Adaptive: 5.83 KB; Restrictive (Web): 2.49 KB

For certain, GIF files are terrible when it comes to full-color photographs. But they are wonderful for creating tiny layout graphics that would have otherwise been mistreated by the wrong end of a JPG format. I have used the GIF file format to make some of my first semi-transparent images, as well as the well-beloved transparent “spacer” image. Also, I still use GIF format here and there to make small but readable icons, as well as some of the infographics for my articles.

PNG: Best for Big and Detailed Graphics

Now we come to the file format that is my favorite for web designs as of late. It used to be that I couldn’t even open PNG files on my computer at all–it would load an error message if I went to a site that had PNG files as part of its content or layout. But that was in the dinosaur days of design, I suppose–nowadays, PNG is the great beautifier of the Internet, doing well at saving fully-colored graphics with an even smaller file size than GIF usually can.


PNG-8: 5.43 KB

This image is exactly the same as the GIF image, but PNG saved it with a few less bytes than even the smallest of the quality GIFs (excepting “Restrictive”, which is tiny file size at the cost of a good-looking image). Again, not sure why there is this difference, but I like it–anywhere I can save on file size without losing quality is great for creating a fast-loading and good-looking website.

It also seems to me that PNG does a better job of maintaining the colors I use in my designs. Sometimes, when I save a layout’s pieces in JPG or GIF (and especially GIF for some reason), the colors in the image change, just slightly, just enough to throw off my CSS color codes and make me have to go back and resample the image for my colors. Now, with PNG, I find myself more able to go straight from Photoshop to Notepad to code, and not ever have to refer back to my image for colors, because they’re right on target!

As for using PNG-8 versus PNG-24, I find that PNG-8 does most of what I need it to do. However, if my image just HAS to be highest quality or has transparency in it, I choose PNG-24–it may add half again to the kilobyte size, but it produces the smoothest-looking image. Compare the two below:


From left to right: PNG-8: 5.43 KB; PNG-24: 11.7 KB

Lastly, PNG seems to be better than GIF at handling transparency and not having strange chippy pixels on the sides of the supposedly-“transparent” image or icon. See evidence of this goodness below:


From left to right: Perceptual GIF, Selective GIF, Adaptive GIF, Restrictive GIF


From left to right:  PNG-8, PNG-24

Summary:

If you’re not sure what kind of file format your images need to be in, remember that JPGs are best for photographs, GIFs are best for simple web graphics (icons and the like), and PNGs are best for detailed web graphics (big layout pieces). These simple tips will save you tons of time working on and saving your images!