Hiearchy + Ideation = Braggadocious!

Web Design Homework Due 10/06/16

You have two tasks for your homework this week, my cheerful Web Designers.

Read this chapter on design hierarchy from “Design for Hackers” by David Kadavy. Good stuff!


Using your rough wireframes PLUS what you learned about layout in class and from Kadavy, make at least 10 visual design ideations for your redesigned home page for popsice.com. You will be ideating the home page only, because its design will set the precedent for your other pages in your final mock-ups.

Now then… visual design ideawhatsit?

Ideations! Ideations are rough designs that help you work through… you guessed it… ideas. The process of ideation is crucial to a designer because it helps you generate innovative solutions. Although it’s tempting to skip the ideation process and just go with the first design idea that pops into your head, initial ideas are often blah and banal. Only by ideating can you get past the barely adequate to the truly creative and effective.

For more on the importance of ideation, I highly recommend you read this post on thumbnails, one of the key methods for ideating. In fact, what we are doing this week is, in essence, a form of thumbnailing. We’re just adding a bit more finish because it’s easy to do working digitally and also because we’re nearing the final stage of our design process.

So what exactly do you do to create ideations for the visual aspect of web design? Well, the unadulterated good news for Project 1 is that you have already done a lot to establish how your redesigned site should function. This includes your work with visual analysis, research, site mapping and rough wireframing.

Better news still, your wireframes do start to suggest some aesthetics even though they’re really about functionality. At least, they establish basic layout possibilities. Therefore, you can use wireframes a jumping off point for more visual-based ideation. Think of your wireframes as the skeleton that you will now build up with juicy muscle-and-flesh visuals.

Start by using your favorite wireframe (or two or three) as a guideline for rough color designs in Photoshop. This is what we did together at the end of our last class. Your goal with these ideations is NOT to create a finished, perfected home page but rather to add just enough visual information that you are able to get a solid sense of whether the design is working. This may mean incorporating shapes, colors, heading and navigational text, placeholder body text and photos.

From these initial wireframe-inspired ideations, you can create variations by shifting the layout or changing colors or other ornamental effects. Don’t be afraid to experiment and go where the creative thinking takes you, even if that’s far far away from your wireframes. You will, of course, need to keep functionality in mind, but, since changes can be made quickly in Photoshop and each variation can be saved as a separate file using the Save As function, you’ve got pretty much nothing to lose.

As you build, alter and save as ideations, keep your workflow clean by storing your files together in a folder. Give them logical names such as yourlastname_ideation01, yourlastname_ideation_02, etc. Keep a copy of each ideation as a psd, since it can easily be altered. You can also save a jpg if you wish, which will help in the long run since you will required to submit ideations in jpg format as part of Project 1.

Some reminders on setting up your Photoshop file:

  1. Work in a file with an sRGB color space and color management off.
  2. Set the document resolution of 72 ppi, the width of 1280 px and the height as determined by your design.
  3. Create a logical organization of layers and layer groups corresponding to the parts of the website you want to build.

Thats all for now. I’m looking forward to seeing what you come up with!


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s