Today

1) Checking in2) The shift to the web, part 1: Wireframes and you3) Some considerations4) Happy action work time5) Homework

To start…

… remember that you have publicity docs due next Monday and a tag due just after spring break.

We will spend some “all around” work time at the end of this class where you can work on those if you wish, but are there any questions up front? Any concerns?

Design task 7

For design task six, all you had to do was make a version of an existing meme. I hope that went quickly and didn’t cause you too much pain.

The big trick, of course, is understanding what the meme is supposed to do before making your own version.

Design task 7

So for design task seven, I want you to take it a step deeper and create YOUR own meme. To do this, you’ll need an image (or more than one) and you’ll need to somehow establish the “rules” of the meme so that people can replicate it.

Here’s my example.

Design task 7

Design task 7

Design task 7

Design task 7

Design task 7

Design task 7

Design task 7As you can see, mine isn’t rocket science. I found a picture of Hulk Hogan looking shocked. I then asserted that various things “shocked the Hulkster” (humming “Shock the Monkey” by Peter Gabriel in my head). It’d be easy for someone to replicate and reproduce.Will anyone? IDK. But that’s your goal. Make a meme someone else could deploy. You’ll need to do at least two, though six might be overkill (we need to see the pattern).

On to the web!

For today, you should have done some readings on wireframing. Wireframes (or wire frames if you’re nasty) are abstracted, grid-based starting points for creating web pages.

Here are a few examples.

Why WireframeWireframes are useful for a number of reasons:

1)They allow designers to organize their sites with simple tools (maybe just pencil and paper)

2)They serve sort of the same purpose as an outline for a piece of writing– arrangement before execution

3)They are easier to mock-up and share and/or compare than full sites

4)They are valuable tools for figuring out what the site requires in order to do what it needs to do

How to WireframeThere are numerous ways to wireframe:

1)Pencil/pen and paper

2)Cut/paste with paper

3)Photoshop, MS Word, Illustrator, etc.

4)Wireframe specific software

A quick sketch, like this one, can be an effective wireframe. This allows the designer to think about the design without needing, in the moment, to figure out precisely how to make the layout work (leaving the technical details for later). This could be done anywhere one has a pen (or pencil) and paper. You could scrounge up the supplies in the room, I bet.

Some designers like to wireframe by cutting and pasting (you could do this with photos, for example), or like the sample to the right, some use post-it notes to design sites (particularly sites that will be modular.

The advantage of using post-it notes for a modular design is that you can easily move the pieces around (just as you will, in theory, be able to online later).

I usually wireframe in Photoshop, because as I have shown you

previously in class, I often usePhotoshop to build my graphic

elements into a mock-up that I can then work from. The shape and text

tools in Photoshop allow for quick wireframing, particularly if you are

already comfortable with the software.

There are also web apps, like Cacoo.com (above) that allow for wireframing entirely in a web browser window. These can be easily shared online, and allow for collaborative work. You can login to Cacoo through Facebook (and it opens a little chat window for you so you could, in theory, share a wireframe and chat with the person you’re working with/for while you both look at it).

It doesn’t really matter HOW you wireframe. What matters is that you go through that stage of development and work to understand the site before you begin the act of coding.

You should use the wireframing technique that lends itself best to your process. If you are comfortable drawing, use pen and paper. If you like a particular piece of software, use that. Do what feels “right.”

A step deeper is a “mock up,” which will often include color and some graphics. The next slide is a very, very bad mock-up I used years ago to teach how to turn a mock-up from Photoshop into a web page. We will do a similar activity the week after spring break, but I’m going to try to make something less ugly for us to work with.

For our next class, I want you to do two things:

1.Do the readings listed on the website.

2.Build your own basic webpage based on the readings. Bring it with you.

I also want you to start thinking toward your second, larger web project, the personal web presence. I want you to create (not for next week, but within the next several weeks) a style sheet for yourself.

The rest of class is work time. You have, now, a total of five projects you could be working on (the tag, the brochure, the publicity doc, the web page or the web presence). You should, of course, check in with your team and make sure you’re on schedule for your work plan, but the rest of your time is yours to do whatever you’d like from your work.

Please use the time, and please ask questions.