Continuing with what we did in class, create a series of thumbnails for the homepage of your redesigned New Jersey State Parks website.
Introducing the Thumbnail
Thumbnails are quick sketches completed in the early stages of a project with the goal of helping you work through a new layout or design. They are one of the keys to ideation, or the process of generating ideas. Why? Several reasons, but first and foremost, they are quick and relatively intuitive, meaning your creative mind has free reign to explore, make connections and piggyback concepts.
Most designers make at least a couple dozen thumbnails before settling on a direction. This may seem like a lot, but each typically takes less than five minutes (definitely less than 10). By the way, if you find yourself laboring longer, you’re in the wrong mindset. Thumbs are all about a free and open association, man! This is not the right time to be locking down detail.
Thumbnails Save Time, Money, the Cheerleader and the World.
Wait, why do thumbnails save time? It’s another step, right? Yes, but it’s a step that can quickly sort good ideas from bad ones. Sometimes what looks great in our head does not translate to the real world (or, in this case, the pixelated world). If you jump straight to the full-on mock up stage, you may not realize a design isn’t working until you’ve sunk a lot of can’t-get-them-back hours. D’oh!
Whatever, I Do What I Want!
But what if you have an amazing idea and you’re ready to lock it down NOW? Nope, you should still make thumbnails. The reason is that we often get what seems like an epiphany level idea (“Eureka, I have found it!”), but it’s not the best solution to our design problem. These flashes-of-inspiration sometimes flash because they’re not really original… our subconscious mind has picked up vibes from the ether or letters from the sky or something, but our conscious mind doesn’t remember. Thus, the concept seems fresher than it is.
Doing thumbnails usually leads you to better stuff. In fact, most designers end up working with a concept generated relatively late in their ideation process. This is because each idea tends to naturally build on the last, while simultaneously sparking new brainstorms. Remember what ol’ P. Picasso says, “Inspiration exists, but it must find you working.” (Well… said. It would be a little creepy if he were still saying it).
Of course, sometimes the first thought turns out to be the best one. It really IS a glorious decree from on high! If that’s true for your initial idea, hey, it only took a few extra minutes to do thumbnails and you ended up not only right but proven right.
You Want Me to Do HOW Many?!?
For next week, you need to make a minimum of 10 thumbnails, and, ideally, you will produce more…as many as necessary to get a genuinely exciting, well-functioning layout. Remember, designers typically make several dozen for a new project, particularly if it is complicated. And the NJSP Website is nothing if not complicated. I believe the technical term is “hot mess”.
To make a thumbnail in Photoshop:
- Create a new document. Use the settings we discussed in class
Width: 1024 px
Height: 768 px
Resolution: 72 dpi
Color Mode: RGB 8 bit
Color Profile: Don’t Color Manage
Pixel Aspect Ratio: Square
- Make sure you’re working in the Essentials workspace. From the program menu at the top of the monitor, choose Window>Workspace>Essentials. If it’s already on essentials but things look wonky, choose “Reset Essentials”.
- Use the tools in the toolbar to block out a composition.
- The rectangle shape tool can be used to stand in for photos, text boxes, menu buttons, etc. Set the stroke to black and the fill to blank (red slashy line) or perhaps a mid-gray depending on what the box represents. Do this via the tool menu at the top of the Photoshop workspace.
- The move tool located at the top of the toolbar can, well, move things. Niftily, it can also be used to resize. With the tool selected, click the toggle for “Show Transform Controls” in the tool menu at the top of the Photoshop workspace. This will give you resizing anchors around objects on your selected layer. NOTE: You must hit return after transforming an object, so Photoshop knows you really want to make the change. The program won’t let you do anything else until you either confirm or hit “esc” to exit the transform tool without making the change.
- Once you are satisfied with your composition, choose File>Save As and name your creation something like “thumb1”. Choose jpg under the “Format” pulldown menu.
- After saving, keep the original file open and modify the layout based on what you learned from the first thumbnail and on any other ideas that pop up as you work. The changes may be small or large. Either way, go with it. This is the time to try, not to judge.
- Once you are satisfied with this second composition, File>Save As “thumb2”.
- Rinse and repeat. You can easily view your entire suite of thumbs using Adobe Bridge in “filmstrip” mode.
Very Important Considerations
- Don’t just cover the document with shapes willy nilly. This is about generating a viable redesign. Study the sitemap you made for your revised site to get an idea of what needs to be prominent on the page. Consider also the elements and principles of design.
- Look to other websites, especially those with similar content, to get ideas about what works and what doesn’t.
- Go with the flow. Allow yourself to follow ideas that pop up as you’re working.
- Don’t be afraid to try something a little wacky. Who knows, it might work. At the very least, it will baste the brain with savory creative juices.
Tune In, Turn in
Once you have completed your thumbnails, take a little time to look them over and think about them. We’ve been working on analysis skills with regard to web design: use what you have learned. What layout best serves the content, audience, client and visual demands of the site?
After you have pondered for a while (I recommend at least a day), choose the thumbnail you think works best, and e-mail it to me with a brief explanation—a paragraph or two—of why you think it is the design for you.