0
Today
1)
2)
3)
4)
5)

Checking in
The shift to the web, part 1: Wireframes and you
Some considerations
Happy action work t...
To start…
… remember that you have publicity docs due next
Monday and a tag due just after spring break.
We will spend som...
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 ...
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
n...
Design task 7
Design task 7
Design task 7
Design task 7
Design task 7
Design task 7
Design task 7
As you can see, mine isn’t rocket science. I found a picture
of Hulk Hogan looking shocked. I then asserted ...
On to the web!
For today, you should have done some readings on
wireframing. Wireframes (or wire frames if you’re
nasty) a...
Why Wireframe
Wireframes are useful for a number of reasons:
1)They allow designers to organize their sites with simple to...
How to Wireframe
There are numerous ways to wireframe:
1)Pencil/pen and paper
2)Cut/paste with paper
3)Photoshop, MS Word,...
A quick sketch, like this one, can
be an effective wireframe. This
allows the designer to think about
the design without n...
Some designers like to wireframe by
cutting and pasting (you could do this with
photos, for example), or like the sample t...
I usually wireframe in Photoshop,
because as I have shown you
previously in class, I often use
Photoshop to build my graph...
There are also web apps, like Cacoo.com
(above) that allow for wireframing entirely
in a web browser window. These can be
...
It doesn’t really matter HOW you wireframe. What
matters is that you go through that stage of
development and work to unde...
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...
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 b...
The rest of class is work time. You have, now, a
total of five projects you could be working on (the
tag, the brochure, th...
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Visual Rhetoric, Monday March 10, 2014
Upcoming SlideShare
Loading in...5
×

Visual Rhetoric, Monday March 10, 2014

312

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
312
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Visual Rhetoric, Monday March 10, 2014"

  1. 1. 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
  2. 2. 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?
  3. 3. 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.
  4. 4. 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.
  5. 5. Design task 7
  6. 6. Design task 7
  7. 7. Design task 7
  8. 8. Design task 7
  9. 9. Design task 7
  10. 10. Design task 7
  11. 11. 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).
  12. 12. 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.
  13. 13. 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
  14. 14. 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
  15. 15. 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.
  16. 16. 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).
  17. 17. 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.
  18. 18. 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).
  19. 19. 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.”
  20. 20. 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.
  21. 21. 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.
  22. 22. 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. 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×