Visual Rhetoric, Monday March 10, 2014

100 %
0 %
Information about Visual Rhetoric, Monday March 10, 2014

Published on March 9, 2014

Author: AlexanderMSU


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

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

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

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

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

There are also web apps, like (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. 

Add a comment

Related presentations

Related pages

Understanding Visual Culture: Rhetoric of the Image by ...

Monday, 31 March 2014. Rhetoric of the Image by Roland Barthes ... so the rhetoric of the image is all the visual elements within an image that ...
Read more

Daily Links For Monday, March 10th - Posted On The ...

Visual Lizard is dedicated ... Daily Links For Monday 03.10.2014 Link. Visual ... Contributed by Julian Moffatt and Wil Alambre over the course of March ...
Read more

Visual Rhetoric | LinkedIn

View 1733 Visual Rhetoric posts, ... Monday Night Visual Rhetoric, Feb 17th, 2014. ... Monday Night, March 3rd, Visual Rhetoric.
Read more

The Latte Salute: Visual Rhetoric America's President by ...

... Visual Rhetoric America's President. ... Monday, February 17, 2014 Vol XCIII, ... (March 28,2001). Power visuals: The rhetoric of the U.S. presidency.
Read more

Visual Rhetoric

Tuesday, March 11, 2014. ... Visual Rhetoric and Operant Conditioning. ... Monday, November 5, 2012. Anthropologie Visuality.
Read more

Acephalous: Visual Rhetoric

Visual Rhetoric Monday, 10 September 2012. ... (This being another one of those visual rhetoric posts.) ... Monday, 26 March 2012.
Read more

Writing Rhetoric - Prezi

Writing Rhetoric's public prezis go to profile page ... by Writing Rhetoric on 14 March 2014 ... by Writing Rhetoric on 10 October 2013
Read more