2. Today
1)
2)
3)
4)
5)
Checking in
The shift to the web, part 1: Wireframes and you
Some considerations
Happy action work time
Homework

3. 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?

4. 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.

6. 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.

7. Design task 7

8. Design task 7

9. Design task 7

10. Design task 7

11. Design task 7

12. Design task 7

13. Design task 7
As 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).

14. 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.

21. Why Wireframe
Wireframes 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

22. How to Wireframe
There 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

23. 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.

24. 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).

25. I usually wireframe in Photoshop,
because as I have shown you
previously in class, I often use
Photoshop 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.

26. 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).

27. 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.”

28. 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.

30. 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.

32. 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. 