Explore Design Resources When Building a Website
When you sit down to explore different web-design directions, you’re not on your own when it comes to tracking down the assets and resources you’ll need to complete your designs. A number of online design resources can come in handy during the creative process.
Stock photography and illustration
You can find virtually any kind of photo or illustration that you need for a project (even video and audio clips) at one of the many online stock-media companies.
It’s very inexpensive to purchase web-resolution images to use in your comps, and it’s well worth the money. Fortunately for web-design purposes, you only need one of the smaller images (each image has a few size options). What you do not want to do is utilize the free trial versions of images that have the copyright notice emblazoned on them. That is such a distraction to clients, and it makes your designs look unpolished.
If you do download the free placeholder versions of images just to make sure they’ll work for your designs, generally each one comes with an image number in its filename. Keep that code number in the filename! If you do need to go and purchase the image later (or a higher-resolution version of it) you can search for it by its code.
Digital photography and scanning images
Have an iPhone? It has an amazing built-in camera that, in a pinch, can capture great-quality images that you can e-mail to your desktop machine, adjust and resize in Photoshop, and plop into your web design in minutes. High-end digital cameras are great too, but just have the added step of hooking up the memory card or attachment cord to get the images out of the camera. Or, if you engage a professional photographer, you’ll usually get a DVD of all the images to sort through. The good news is that because you’re working with just 72 dpi, digital images are pretty fast and easy to work with.
The other option is to scan images using a desktop flatbed scanner. For desktop scanners, always scan at roughly twice the resolution you need. For web graphics that need to be 72 dpi, scan the images at 150 dpi. This way you capture enough detail to make editing easier. You can zoom into detail you need and crop away the rest, and you can always shrink it down, which eliminates the scan’s graininess. (Scaling down images causes them to lose detail, including detail that highlights imperfections.)
When creating web-design options, it’s best to use “greek” text as a placeholder for all body copy. You do not want a client focusing on reading text within your comps.
For decorative headlines, try out different fonts at Veer. You can type in your own phrase, adjust the size and color, and see how it looks in an assortment of fonts. What’s even better, if you right-click (PC) or Control-click (Mac) the custom text you create in Veer, you can save the sample as a transparent PNG file. Notice that when you do so, the font’s name is included in the filename so you can keep track of which font is what. You can then place the text into your web layout and see how it works, even change its colors or apply effects to it. The text itself is a bitmap image, but this is a great way to “try before you buy.”
Photoshop excels at allowing you to create unique textures and effects to use in your designs. You may think that you need to download these textures as images from stock photography companies, but actually there are a ton of free and inexpensive Photoshop brushes that you can download online that create virtually any type of texture from splattered blood to Disney pixie dust. If you simply do a Google search for “Custom Photoshop Brushes,” you’ll get a wealth of websites to choose from. Or you can search for specific brushes like “pixie dust Photoshop brush.” Of course, you still need to invest a lot of money to purchase Photoshop first!
Widgets are standard components of computer and browser interfaces — scroll bars, system buttons, radio buttons, cursors, check boxes, and such. You’ll often need to represent these in your web designs to indicate components that will be system-generated. Rather than taking screenshots and cutting out the pieces yourself, you can use some online resources that provide widgets already cut out on transparent backgrounds, ready to be placed in your designs.
If you need help getting ideas or getting started, a number of online resources offer free or pay-per-download web-design templates of varying quality. There are so many sites offering these templates that if you just do a Google search for “web-design templates,” you’ll be well on your way. Even if you don’t buy online templates, they are a great resource to get design ideas. These templates are generally Photoshop layered files that are already set up in terms of resolution and dimension, and now it’s just a matter of tinkering with them and customizing.