a bit on wireframing and some Q and A

2. Today
1) Your questions-- answered
2) Packing up those IMS Web files
3) The shift to the web, part 1: Wireframes and you
4) Some considerations
5) Potential Extra Credit

3. To start…
Your questions, with answers.

4. Q: what projects do we have left?
A: You will have design tasks starting again next week,
but no more reading responses, and in terms of major
projects, we just have finishing the tag and the Web
project UNLESS the client wants revisions to your
client work.
The client project isn’t “over” until class ends.

5. Q: Is there any one big thing that
accounts for most of our grade?
A: It divides up pretty evenly. I would like to talk with
you about flip-flopping the 200 point assignment from
the client project to the web (or making them both
150) to be fair to you.

6. Q: What’s my grade?
A: Grades are right now up-to-date (unless you
negotiated a late submission and I haven’t gotten it
recorded yet). As I warned you early on, due the
projects mostly coming at the end, the grades are sort
of incomplete right about now, but after next week
you will have a client project grade and a tag grade,
too, so then you’ll have a good sense of where you
are. You’re up-to-date on Canvas, though.

7. Q: What’s my grade?
A: Grades are right now up-to-date (unless you
negotiated a late submission and I haven’t gotten it
recorded yet). As I warned you early on, due the
projects mostly coming at the end, the grades are sort
of incomplete right about now, but after next week
you will have a client project grade and a tag grade,
too, so then you’ll have a good sense of where you
are. You’re up-to-date on Canvas, though.

8. Q: I’m a little worried about web
design…
A: Don’t be. I mean yes, it will be interesting, and
maybe a bit challenging, for each of you, but there are
degrees of work you can do (which we’ll talk about
later in this class). You will have to learn new skills,
but the web unit is going to move toward you, too. I
don’t expect all of you to be master coders.

9. Q: I am worried I’ll have too much
work…
A: You’ll be fine IF you work along the way. If you try
to wait and do the whole web project at the end, you
will be sorry. Follow what we do in class and think of
the activities as steps in completing the assignment.
You’ll be finished right on time.

10. Q: I am worried I won’t have enough
work time in class to complete the web
project
A: You won’t.
I hope none of you have been working this semester
under the impression that class session time should
be enough time to complete your projects. I do give
quite a bit of work time, as I like for you to collaborate
and to talk to me about your work, but these projects
take hours and hours. You will have homework.

11. Q: Are you a Game of Thrones fan?
A: Almost embarrassingly so. My fiancé and I have
matching Khal and Khalessi mugs, and she regularly
sighs at me and tells me that I, like Jon Snow, know
nothing. We’re huge nerds.
I am bummed that Martin announced that the show
will spoil the end of the books, though. Dude needs to
write faster.

13. Q: What’s a good way to look for jobs
related to what we’ve done in class?
A: The single best way is to intern. Internships build
networks and open doors. Look for people who need
this kind of work done. There’s an internship with
Butler County Special Olympics right now, for
example, that would require gathering video and
building some small-scale web content (for a
webmaster– not entirely by yourself).

14. Q: Will we be graded on our group
work for the client project?
A: Yes. On Tuesday, we will start class with a 20-
minute-or-so memo writing process where I’ll ask
some specific questions. Based on those documents
and what I observed in class, I will grade you
individually on the project based on your amount of
work done and value to your team.

15. Oh the things we’ll do
At your request:
1) discussion of mobile/different monitor sizes
2) Content organization/management
3) Some additional Photoshop tasks/training
4) Visual Rhetoric and Advertising
5) More rhetorical analysis of the visual (any one have
specific things you’d like to look at?)

16. The web assignment
You will design:
A personal portfolio or if you don’t want/already have
a portfolio, you will build an online “presence” for
something/someone.

17. Where it’d go
You could use:
1)WordPress
2)Google Sites
3)Weebly
4)Wix
5)Hand code that puppy

18. Where should I go?
It depends on what you want, how you want to look.
•If you want to look professional but not scream “I’m a coder,” I
recommend your own webspace with a customized WordPress
(like my site, kind of).
•If you want to be seen as a coder, you need to build the thing
yourself.
•If you don’t care if you look like someone who has no coding
skills, the WYSWYG pages like Wix are fine. Those telegraph to
an employer/grad school that you can’t code, though.

19. It all starts with wires….
Let’s talk wire framing.
A bit of advice. I won’t act naïve. I know some of you didn’t do
some of the early readings. I highly recommend you do the
readings during this web section, since there’s no web Lynda
stuff for us. You will be lost if you don’t have something to
transition you into what I talk about each day.
To the frames!

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

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

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

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

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

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

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

33. 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. It’s important as a proof of concept, but it’s
ugly.

35. Some Design no-nos
Now finally, mercifully, retired, I give you the
worst website ever:

36. Why…
Would someone ever do that?
The answer is that sometimes people get a little
obsessed with what the web CAN do. There’s a fine
line between what is possible and what is… good.

37. Graphic intensive…
Doesn’t mean good.

38. And a grid…
…doesn’t save you by itself.

39. Artsy…
Doesn’t mean good, either. .

40. Some try to fix theirs.
Old New

41. But lovely things..
Can, and do exist.
The secret is not to leverage every single thing
you COULD do.
Instead think about what you’d like the audience
to see and figure out how to get there with the
tools you have. You don’t need to use every
single trick. That actually makes it worse.

42. Simple and elegant.

43. Again, simple.

44. Functional.

45. Your goal
Is to create a home on the web that allows
you to deliver your content in a clean, crisp
fashion.
This may sometimes mean not being “as”
stylish as you wish in favor of functionality,
but that’s okay. Remember the words of
Frank Lloyd Wright: form follows FUNCTION.

46. On Tuesday
We will revisit logos for a bit– this time far
from Cleveland and closer to home. We will
talk about how to “brand” yourself for this
project, and hopefully you’ll be able to create
something like the next slide.
No readings, but you might want to look back
at the logo stuff if you didn’t read closely.