IntroductionWelcome| 00:04 | Hi! I'm Jason Osder, and I'd like to
welcome you to OmniGraffle 5, Creating Web
| | 00:10 | Sitemaps and Wireframes.
| | 00:12 | This course covers how to use
OmniGraffle to create two fundamental information
| | 00:17 | architecture diagrams.
| | 00:19 | First, I'll demonstrate using shapes,
lines, and stencils to create informative
| | 00:24 | sitemaps that show you
the organization of content.
| | 00:28 | Then we'll use these sitemaps to go to
the next stage of the process, where we
| | 00:32 | create wireframes to diagram
the layout of individual pages.
| | 00:37 | Throughout, we'll explore
valuable and time-saving tools inside the
| | 00:41 | OmniGraffle interface.
| | 00:43 | The payoff is a clear economical
process, where key stakeholders can get on the
| | 00:48 | same page with the whole development team.
| | 00:51 | If you're an experienced information
architect, this course will help you make
| | 00:55 | the most of OmniGraffle.
| | 00:57 | If you're new to interactive
development but need to communicate your ideas
| | 01:01 | effectively and efficiently,
you're going to love this course.
| | 01:05 | As a media producer and information
architect, I'm excited to share with you
| | 01:10 | techniques that have helped
me build a successful career.
| | 01:13 | Now, let's jump in to OmniGraffle 5
Creating Web Sitemaps and Wireframes.
| | Collapse this transcript |
| Understanding the interactive development process| 00:00 | How do sitemaps and wireframes
fit in the overall interactive
| | 00:05 | development process?
| | 00:07 | Before we start making these
diagrams, I want to address that question.
| | 00:12 | Sitemaps and wireframes are part of
information architecture, which is basically
| | 00:17 | preproduction for web sites.
| | 00:20 | Like real-world architecture, the
idea is to create a series of diagrams, or
| | 00:25 | pictures, that describe the web site you're
going to build before you actually build it.
| | 00:32 | There are more than two types of
information architecture diagrams, but I find
| | 00:37 | that sitemaps and wireframes are two of
the fundamentals, useful in pretty much
| | 00:43 | any web site you may be building.
| | 00:46 | Remember that these are
process-oriented documents.
| | 00:50 | The point is not to make them all beautiful.
| | 00:53 | They are functional.
| | 00:55 | You want them to work as a
communication tool that helps your team collaborate.
| | 01:01 | The end goal of information
architecture is a streamlined economical process
| | 01:07 | where overages in design and coding are
avoided because good planning has taken
| | 01:13 | place at an earlier stage.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library, or if
| | 00:05 | you're watching this tutorial on a
DVD-ROM, you have access to the exercise
| | 00:09 | files used throughout this title.
| | 00:12 | I've already downloaded my exercise files,
and they're in this folder on my Desktop.
| | 00:16 | If I open the folder, you see that each
chapter has exercise files in a folder,
| | 00:22 | Chapter 2 through 6.
| | 00:23 | Also, there's a folder for
stencils with some OmniGraffle stencils.
| | 00:28 | We'll be using these, but you
never have to access this folder.
| | 00:32 | You'll access the stencils from
inside the OmniGraffle interface.
| | 00:37 | If you're a monthly subscriber or
annual subscriber to lynda.com, you don't
| | 00:41 | have access to the exercise files, but you can
follow along from scratch with your own asset.
| | 00:47 | Now that that's all clear, let's jump in.
| | Collapse this transcript |
|
|
1. Using OmniGraffle for Wireframes and SitemapsUnderstanding OmniGraffle's strengths| 00:00 | Why OmniGraffle for sitemaps and wireframes?
| | 00:03 | Why this tool for this job?
| | 00:07 | There are some great reasons to use
OmniGraffle for sitemaps and wireframes.
| | 00:11 | Let's quickly go over them.
| | 00:13 | First, OmniGraffle is a diagramming
program, not a drawing program, and that's
| | 00:18 | an important distinction.
| | 00:19 | It means that when you make a
shape or a line in OmniGraffle, it's an
| | 00:24 | object, and it's smart.
| | 00:26 | Lines can be attached to shapes,
and that attachment will stick.
| | 00:30 | They're not just pictures.
| | 00:32 | They're objects that are smart.
| | 00:34 | That means that building diagrams like
this in OmniGraffle is very quick to get
| | 00:39 | going, and it's very easy to
make changes if you need to.
| | 00:43 | That's really important for this type of work.
| | 00:45 | These are living documents that
need to evolve with your process.
| | 00:51 | Lastly, OmniGraffle is extensible.
| | 00:54 | That means that it works well with
items that don't start within the software.
| | 00:59 | This includes stencils which are pre-made
graphics that you can download off the web.
| | 01:05 | You can also import images like logos
and exporting different image types and
| | 01:10 | print outs is no problem either.
| | 01:13 | So that's why we're here.
| | 01:15 | OmniGraffle is a great tool for
sitemapping and wireframing.
| | 01:20 | In the movies that follow, I'll be
building on this central idea, but it is the
| | 01:26 | whole reason for this program.
| | Collapse this transcript |
| Using best practices in a sitemap| 00:00 | The idea of a sitemap is to represent
the content of a site in a way that is
| | 00:05 | organized and conveys the way the end
user will experience this content when
| | 00:10 | it is on the web site.
| | 00:12 | Rarely does the end user ever see a
visual representation of a sitemap;
| | 00:17 | rather, it's an internal guide for the
development team to really conceptualize
| | 00:23 | how the web site is going to function.
| | 00:27 | Here are some rules of the road to
keep in mind as you are creating sitemaps.
| | 00:32 | First, like a geographical map, a
sitemap takes a bird's eye view.
| | 00:37 | It's a big picture of
what the content looks like.
| | 00:41 | It doesn't need to convey every single detail.
| | 00:44 | Second, it's common to see sitemaps in
a hierarchical structure, like a tree.
| | 00:50 | This is logical because most web
sites have a single entry point called a
| | 00:54 | homepage that then expands out to other content.
| | 00:57 | While this is the norm, don't make it a
limiting factor in your web site designs.
| | 01:03 | Third point is that you should be able
to conceptualize and imagine a user's
| | 01:07 | path through the site on a sitemap.
| | 01:10 | This is another way it's
like a geographical map.
| | 01:13 | You should be able to look at it as
if you are going to plan a journey.
| | 01:17 | Last, the sitemap is often the
very first information architecture
| | 01:21 | document created, and it's a living
document that evolves throughout the
| | 01:26 | development process.
| | 01:28 | Sometimes you even make changes to a
sitemap once the site is live if new
| | 01:32 | sections are going to be introduced.
| | 01:36 | There's some high-level thinking to
keep in mind while you are making sitemaps.
| | 01:41 | There is a lot written about
information architecture theory a and lot of it is
| | 01:45 | quite good and quite useful.
| | 01:47 | But there are no strict rules, so I
encourage you, with some big ideas in mind,
| | 01:53 | to get into just making sitemaps in
OmniGraffle and develop your own tropes of
| | 01:58 | how to do this.
| | Collapse this transcript |
| Using best practices in a wireframe| 00:00 | Wireframes are a representation of
the layout of a web page, rendered with
| | 00:05 | structural clarity and without
design elements that will distract.
| | 00:10 | The idea is to denote how content and
navigation are going to manifest on an
| | 00:16 | individual web page.
| | 00:18 | If we use a comparison to regular
architecture, wireframes are a lot like floor plans.
| | 00:25 | That's the really big picture.
| | 00:27 | Here are some practical things to
keep in mind as you design wireframes.
| | 00:31 | First, there are certain things you
really need to avoid in wireframes for
| | 00:35 | clarity and top of the list is colors.
| | 00:38 | Color denotes style and
design, whether you want it to or not;
| | 00:42 | you can't tell someone to ignore the red.
| | 00:45 | It's just not possible.
| | 00:46 | So while color coding is acceptable on a sitemap,
you really need to avoid it on a wireframe.
| | 00:52 | Special fonts work pretty much the same way.
| | 00:55 | Stick to a really basic palette of fonts
and just use different font weights and
| | 01:00 | sizes to denote the
conceptual weight of different headings.
| | 01:04 | Avoid any special fonts.
| | 01:07 | Generally you need to make a wireframe for
each major template, or page type, in your site.
| | 01:13 | Complex interactions often require
additional wireframes to fully describe them.
| | 01:19 | Wireframes should always be
built-in a way that's easy to edit.
| | 01:24 | This is a process document and part
of the process is rearranging things
| | 01:28 | visually, possibly many
times, to try out different ideas.
| | 01:33 | It's important that you have
a flexible mode to work here.
| | 01:37 | Wireframes, more so than sitemaps,
are a functional document used by
| | 01:42 | other people on the team.
| | 01:43 | Once finalized, designers and coders
will use your wireframe to do their work.
| | 01:50 | Wireframes are extremely
useful if done correctly.
| | 01:54 | We are going to dig in on how to
execute these principles with OmniGraffle, but
| | 02:00 | I can pretty much guarantee that if
you follow these principles for wire-
| | 02:05 | framing, it will lead to greater
efficiency in your development process.
| | Collapse this transcript |
|
|
2. Common Techniques for Wireframes and SitemapsUsing shapes| 00:01 | If you really want to understand how
OmniGraffle differentiates itself from
| | 00:05 | drawing programs, one key
to that question is shapes.
| | 00:11 | There are several kinds of objects in
OmniGraffle, but shapes, in a lot of ways,
| | 00:14 | are the most fundamental.
| | 00:16 | So let's start by seeing how they really work.
| | 00:19 | Here in OmniGraffle, you see I have a
document open with several shapes out on
| | 00:23 | the canvas, and I also
have the shape stencil open.
| | 00:27 | We'll talk more later about
finding and using stencils in detail.
| | 00:32 | I'm using OmniGraffle Pro.
| | 00:33 | If you're using OmniGraffle Standard,
your layout may look slightly different,
| | 00:38 | but you should still be able to follow
along with most of the steps that I do.
| | 00:42 | As you can see from this document, shapes
can in fact be all sorts of different shapes.
| | 00:49 | Once a shape is on the canvas, you can
use the regular Selection tool to select
| | 00:53 | it, move it and also
manipulate it using these handles.
| | 00:59 | So shapes are very flexible.
| | 01:01 | When shapes touch each other, they
don't really interact with each other.
| | 01:04 | They'll never get stuck on one another
or, if you've used a program like Flash,
| | 01:09 | one will be subtracted from another.
| | 01:12 | They do have a layered order, and that's
based on the order that they're created
| | 01:16 | in, so one shape is
inherently in front of another shape;
| | 01:20 | however, you can adjust that by
moving shapes to the back or the front
| | 01:25 | with these buttons.
| | 01:26 | There are two ways to
make a shape to begin with.
| | 01:29 | First, there are stencils, and I often
just take a shape from the shapes stencil
| | 01:33 | or a different stencil and drag it
out onto the canvas to create a shape.
| | 01:38 | You also have a set of Shape tools up
here, and if you click once, you activate
| | 01:43 | a single use of the Circle tool.
| | 01:46 | So now I get a single circle, and I've
reverted to the Selection tool, which
| | 01:51 | will let me adjust it.
| | 01:52 | If I click and hold the Shape tools,
I get a menu of all sorts of different
| | 01:57 | shapes, and this is actually dynamic.
| | 01:59 | As you add shapes to your document, you
will see different choices populate here.
| | 02:05 | So I can pick something I want, like
Stars, and if I click a second time on the
| | 02:10 | tool, I get persistent use, if you
see the way the little 1 disappeared.
| | 02:14 | Now, I can make multiple stars
without grabbing another tool.
| | 02:19 | If I want to switch back to the
Selection tool, I have to actually click it.
| | 02:24 | So there you have shapes,
simple, but also powerful.
| | 02:28 | Every building starts with a brick, and
in OmniGraffle our bricks are shapes, the
| | 02:34 | fundamental unit that we
use for building diagrams.
| | Collapse this transcript |
| Using lines| 00:01 | When we think about classic
information architecture, the phrase "boxes and
| | 00:05 | arrows" comes to mind.
| | 00:06 | Those classic flowcharts that show the
path for a web site, and that's exactly right.
| | 00:12 | In OmniGraffle, the boxes are generally
shapes, and the arrows are generally lines.
| | 00:17 | So let's really see how lines work.
| | 00:20 | Give the Line tool a single click, and
that will activate it for single use.
| | 00:25 | Now, click a shape on the canvas,
and now we've started our line.
| | 00:31 | You can see as I move the pointer now,
the end of the line moves around, and if I
| | 00:36 | move to a shape, that shape becomes highlighted.
| | 00:39 | If I click that shape, I've now ended my line.
| | 00:43 | Also, we revert to the Selection tool because
the Line tool was active for only a single use.
| | 00:48 | Now, if I move either of my shapes
that are connected, the line moves with
| | 00:53 | them because it's smart. It's not
just a piece of the drawing; it actually
| | 00:58 | connects these two shapes.
| | 01:00 | If I select the line itself, it
becomes highlighted, and I also see a red and
| | 01:07 | a green dot, indicating the
beginning and the end of the line.
| | 01:11 | I can drag either dot and
change where the line connects to.
| | 01:17 | I can connect lines to shapes, lines to
other lines, and I can also just connect
| | 01:22 | a line into space.
| | 01:24 | To control the style of my line, I've
opened the Lines and Shapes Inspector.
| | 01:30 | This lets me control the thickness of
my line, the look of the line itself,
| | 01:34 | including a lot of choices for dotted
and dashed lines, and also the end points.
| | 01:40 | So currently, this line has nothing
on the beginning and an arrow on the
| | 01:45 | terminus, but if I prefer a heavy dot
on the beginning, I can create that heavy,
| | 01:50 | dark dot, and we see it there.
| | 01:54 | Lines and shapes are core elements of
OmniGraffle, and they work together nicely.
| | 02:00 | This is a real key to
good sitemaps, in particular.
| | 02:05 | There's more to learn about
manipulating these fundamental elements.
| | 02:10 | And for more detail, make sure to check
out the OmniGraffle Essential Training on
| | 02:14 | the lynda.com Online Training Library.
| | Collapse this transcript |
| Working with text| 00:00 | Information architecture is primarily a
visual mode of communications, but in no
| | 00:06 | way does that make text irrelevant.
| | 00:08 | In fact, textual content can be a really
important way to convey information on these diagrams.
| | 00:15 | OmniGraffle has a robust set of text tools.
| | 00:18 | You are able to have stand-alone text
elements, as well as text that is embedded
| | 00:22 | on a line, or in a shape.
| | 00:24 | Let's see how these text tools work.
| | 00:27 | I have a simple example here, for starters.
| | 00:29 | I have a nearly complete sitemap, and I
just want to add a title to the top to
| | 00:34 | practice getting used to
the text tools in OmniGraffle.
| | 00:38 | Click your Text tool on the toolbar,
and that activates it for a single use.
| | 00:43 | Now, click once on the canvas and start to type.
| | 00:46 | The name of this document is
the Hansel & Petal Sitemap.
| | 00:56 | Hansel & Petal is the
name of the flower company.
| | 01:00 | So now we have a text element.
It's going a little off to the edge of the page,
| | 01:03 | but that's okay because we can select
it and move it around with the regular
| | 01:07 | Selection tool, much like any other object.
| | 01:11 | You can change nearly anything about
this text, but there's a few tricks using
| | 01:15 | the keyboard that I
really like about OmniGraffle.
| | 01:18 | First, you have Command+Plus and
Command+Minus, and that will make your text
| | 01:23 | bigger and smaller with just a quick keystroke.
| | 01:27 | And then second Command+B for bold works, as
does Command+I for italic, and they will toggle.
| | 01:35 | Those two are really handy because
they're consistent with what you find in
| | 01:38 | other programs, and they let
you style your text very quickly.
| | 01:42 | But to get deeper you, need
to go to the Text Inspector.
| | 01:46 | That's over here along with the
rest of the Style Inspectors on top of
| | 01:50 | your Inspectors window.
| | 01:51 | Here, I have control of alignment, and
I also have access to full-fledged
| | 01:56 | palettes that will be familiar to
users of other Mac applications,
| | 02:00 | Fonts - which gives me
complete control - and Colors.
| | 02:06 | If I wanted different color for my text,
I can just go to the color wheel, or any
| | 02:10 | of these pickers, and color the text.
| | 02:14 | As you would expect, we have the
controls over text that you would find in most
| | 02:18 | other visual programs.
| | 02:20 | Remember that we also have a line labels
that function a little bit differently,
| | 02:24 | and we'll cover them later in this program.
| | 02:27 | It's true that wireframes and
sitemaps are both information architecture
| | 02:31 | documents that are visual in their
nature, but clear communications also
| | 02:36 | requires the use of text.
| | 02:39 | You don't want to overuse text in these
diagrams, but when there's a need for it
| | 02:43 | you want to use text in a way that's
effective and fits with your document, so
| | 02:48 | get comfortable with these tools.
| | Collapse this transcript |
| Using stencils| 00:00 | Stencils are pre-built graphic sets
for OmniGraffle, and they really expand
| | 00:05 | what you can do with the program, because they
are available to fit so many types of diagrams.
| | 00:11 | In this movie, we are going to take a
look at how the Stencil palette works,
| | 00:15 | because it really unlocks
some power in this program.
| | 00:18 | I have a blank document, and I have my
Stencils palette open, and I've got the
| | 00:23 | Africa stencil selected.
| | 00:25 | If you are not seeing your Stencils
palette, you may have to hit the Stencils
| | 00:29 | button here to open it.
| | 00:31 | The top part of the Stencils
palette is simply where you find stencils.
| | 00:35 | The Stencils Library are the ones
that ship with the program plus the ones
| | 00:39 | that you have installed.
| | 00:41 | You also have a couple views at top,
and that affects how your stencil is
| | 00:46 | displayed down here in the Stencil area.
| | 00:48 | So one view mode shows all of the
shapes in the stencil assembled - in this
| | 00:53 | case into the continent of Africa - and the
other view mode shows each of the individual shapes.
| | 00:59 | We also have a search box, but we are
going to look at that in the next movie.
| | 01:04 | Once you select a Stencil shape, you
see details about it in the Metadata
| | 01:09 | pane at the bottom.
| | 01:11 | You can also drag shapes from either
view out onto the canvas and start making
| | 01:16 | a diagram with them.
| | 01:17 | At the bottom of the Stencils palette
is a small style palette that relates to
| | 01:22 | the specific shapes in the stencils.
| | 01:25 | That means if you have a shape but you
want its style to match a different shape
| | 01:32 | in a stencil, you can select that
shape and then drag any of the individual
| | 01:37 | styles to the shape you have created.
| | 01:41 | That's all you need to know
about the Stencils palette.
| | 01:45 | But the power of stencils is really
unlocked when you start to recognize the
| | 01:49 | great variety of stencils that are
available, all for free. You need to find the
| | 01:54 | best stencil to meet the needs of your
project, a sitemap or wireframe, and we
| | 01:59 | will be seeing that
coming up in an upcoming movie.
| | Collapse this transcript |
| Finding Stencils| 00:00 | How do you go about finding
the best stencil for the job?
| | 00:03 | Well if you use OmniGraffle like I do,
this is no small question because the
| | 00:07 | stencil that you choose will go a long way
to determining the look of the final diagram.
| | 00:13 | I always take my time at this stage,
and also sometimes I take an existing
| | 00:18 | template and augment it to fit my needs.
| | 00:21 | Sometimes I also make a custom
stencil to save these changes, but these are
| | 00:26 | things we will cover in later movies.
| | 00:28 | For now, let's just look deeply about
how to search for and review stencils that
| | 00:33 | we are thinking about using for a diagram.
| | 00:36 | I have still got my Stencils
palette open, and I want to return to the
| | 00:39 | Search box that's up top.
| | 00:41 | Just pull down this small menu here
because it shows some interesting things.
| | 00:46 | This choice right here to search
Local or to search Graffletopia is really
| | 00:51 | important because there is really only
two places that you are going to find a
| | 00:54 | stencil: One is it's going
to be on your local computer
| | 00:57 | because you created it, or you downloaded
it already, or someone sent it to you to use;
| | 01:03 | or Graffletopia, which is the online
repository of OmniGraffle stencils.
| | 01:09 | So let's choose Local because I just
want to search our hard drive for now.
| | 01:14 | In the Search box, I want to
type "web flow" and hit Return.
| | 01:20 | This yielded a search result for me
called Web Flowchart, and if you have
| | 01:25 | downloaded the exercise files, you
will also get this result because the Web
| | 01:29 | Flowchart stencil is in that package.
| | 01:31 | If I select the Web Flowchart stencil, I
now see a selection of what's available
| | 01:37 | to me in the Stencil window,
| | 01:39 | but I also see something
special. It says Install.
| | 01:43 | You will only see that the first time
you use a new stencil, and it's telling
| | 01:47 | me that the Web Flowchart stencil is on my
computer, but it's not yet installed by OmniGraffle.
| | 01:54 | This is really easy to deal with
because you just seem to hit this button, and
| | 01:58 | it will install itself.
| | 02:00 | When you see this in the future,
I won't have to install again.
| | 02:05 | Now I see my installed Web Flowchart.
| | 02:09 | When you install the stencil, a
copy of the stencil was made.
| | 02:13 | That means a copy is still sitting in
the Exercise folder, and a copy is in the
| | 02:18 | library where installed stencils live.
| | 02:22 | That's why I see two search results right now.
| | 02:25 | This Web Flowchart stencil is now ready
to go, and you can see that it has a lot
| | 02:30 | of shapes that will be
really useful for sitemapping.
| | 02:35 | I do want to also do a search on
OmniGraffle, so that you can see everything
| | 02:39 | that's available there.
| | 02:40 | If I pull down this menu and I change
over to Graffletopia, and I do maybe a
| | 02:45 | more general search, like just "web," we
are going to see a lot of results from
| | 02:50 | the online library.
| | 02:52 | You can see that when you search
Graffletopia with a general term like web, you
| | 02:57 | get a lot of choices, and some
of them will be useful for us.
| | 03:01 | If we click one of these choices, you see
a very small display, and if you want to
| | 03:06 | see more, you need to download.
| | 03:08 | Let's take a look at iPhone Wire Frames,
because that's something we are going to
| | 03:13 | use later in this course.
| | 03:15 | If I want to take a closer
look at it, I need to download.
| | 03:20 | Now the Stencil has been downloaded,
but it's not yet been installed.
| | 03:24 | So I can't drag objects out to use them yet.
| | 03:27 | But I can see what this stencil offers,
and if it's something that I am going to
| | 03:33 | use, I now will install and start to use it.
| | 03:35 | There will always be times in your work
that you want to build shapes from scratch.
| | 03:40 | But stencils are extremely powerful
because you have available to you so many
| | 03:45 | shapes that will be useful
for wireframing and sitemaps.
| | 03:49 | This is an important part of the process,
so when you're starting a new project,
| | 03:54 | you really want to take your time and
search and shop for the stencils that
| | 03:59 | will fit your needs.
| | Collapse this transcript |
| Aligning and distributing | 00:01 | Do want your sitemaps and
wireframes to look really professional?
| | 00:04 | Well an important key is
alignment and distribution.
| | 00:08 | That's just getting all of the objects
to line up in nice straight lines and
| | 00:12 | getting the spacing between them nice and even.
| | 00:15 | It seems like a small thing, but it does
a lot to add professionalism and just a
| | 00:21 | good look to your diagrams.
| | 00:23 | I have got a really basic sitemap here.
| | 00:26 | We probably have the tools at this
point to draw something like this, and it
| | 00:30 | does convey some important information,
but it doesn't look particularly neat,
| | 00:34 | and that's what I want to work on.
| | 00:36 | There's a couple of ways to work on
alignment and distribution in OmniGraffle,
| | 00:41 | and one that I like is called snapping.
| | 00:44 | Observe that as I move items, you'll
see snapping lines. You see there is that
| | 00:49 | blue one, and sometimes I will see a pink one.
| | 00:52 | The pink Snapping line always
indicates alignment to the canvas.
| | 00:56 | So right now this HOME shape is directly in
the middle, and that's great - right where I want it.
| | 01:03 | I also see snapping lines
when things align to each other.
| | 01:07 | There is a blue line when I
have contact aligned with ABOUT.
| | 01:11 | I'll move BLOG up between them, and we
will also notice, as I move side to side, I
| | 01:19 | see Snapping lines for distribution.
| | 01:21 | You see the measurement between
the shapes showing me that they are
| | 01:26 | evenly distributed.
| | 01:29 | Snapping really helps get things
aligned, and you can select multiple shapes,
| | 01:35 | this time with a lasso selection as I
drag to select multiple things, and then
| | 01:41 | that will also snap.
| | 01:42 | So here is all four - boom - right in the center.
| | 01:46 | Look how quickly my site map cleans
up just using this type of snapping,
| | 01:53 | alignment, and distribution.
| | 01:55 | There is more to it, however,
because you may reach a point that you need
| | 01:59 | greater control, and that's
found in the Alignment Inspector.
| | 02:04 | The Alignment Inspector is here.
| | 02:05 | It's at the bottom of the Inspector window,
and it's the fourth one over, Alignment.
| | 02:11 | This lets you align
exactly and distribute exactly.
| | 02:16 | So if I want all four of these aligned,
this time shift to select all of them, and
| | 02:22 | then this button will align to their centers.
| | 02:26 | Similarly, I have Distribution
that will give me a measurement.
| | 02:29 | So if I want each of these to be 1/10
of an inch apart, now they're perfect.
| | 02:37 | I like a combination of snapping
and the Alignment Inspector to get
| | 02:42 | everything perfect.
| | 02:43 | I use snapping throughout my process to
get things basically neat, and then for
| | 02:48 | final tweaks, I often use
the Alignment Inspector.
| | 02:52 | These tools are surprisingly
important for sitemaps and wireframes.
| | 02:57 | Your job as an information architect is
to render things so that they look neat
| | 03:02 | and clean, easy for people to understand.
| | 03:05 | With that as your goal, alignment and
distribution are important tools for
| | 03:10 | you to achieve it.
| | Collapse this transcript |
| Grouping and locking objects| 00:00 | What do you do when your sitemap or
your wireframe starts to have so many
| | 00:04 | elements that it's hard to keep them
organized and hard to work on one part
| | 00:09 | without disturbing another part of the diagram?
| | 00:12 | This is where grouping and locking
objects comes in really handy, and that's
| | 00:17 | what this movie is all about.
| | 00:19 | Here I have a classic
opportunity for grouping and locking.
| | 00:23 | I have built a browser window, kind of
generic-looking, to be the background for
| | 00:28 | my wireframe, and now I want to start
building on top of it, but this is really
| | 00:34 | just a collection of shapes itself.
| | 00:36 | So if I were to start working on top
here and dragging and moving things,
| | 00:40 | I'd constantly be moving these shapes apart
from each other and breaking my background.
| | 00:45 | I am going to use Undo;
| | 00:47 | Command+Z to correct these obvious mistakes.
| | 00:50 | What I need to do is first group this,
so it acts like one object, even though
| | 00:56 | it's made up of separate shapes.
| | 00:58 | I am going to select everything
currently on the canvas, and I am going to do
| | 01:02 | that by dragging a big lasso, or
marquee, around the whole thing.
| | 01:06 | You see how as I start to drag that
box just gets everything it touches.
| | 01:11 | Now I have got everything selected,
and I want to turn it into a group -
| | 01:17 | big Group button right there. Once I
turn this into a group, it functions
| | 01:24 | like one big shape.
| | 01:27 | Pretty much everything that you can do
with the shape you can also do with a
| | 01:31 | group, including connecting lines
and aligning basically everything.
| | 01:36 | So I do want to align this
centered up. I'll use snapping.
| | 01:41 | Pink line for horizontal center, and
now this group that is the browser window
| | 01:45 | is exactly where I want it.
| | 01:48 | So this is part of the equation,
because now everything will stay together.
| | 01:53 | But I still run the risk of
dragging that off-center. Whoops. Undo.
| | 01:57 | So the last step is to lock this in place.
| | 02:00 | So I am going to select the group and
then lock it, and you see how I get these
| | 02:07 | gray Xs and if I try to select it, it
selects, but it selects in a way that
| | 02:11 | tells me, "No, it's locked."
| | 02:14 | Now I've created a background and
locked it in place, and I can just start to
| | 02:18 | build my wireframe on top of it,
which is exactly what I want.
| | 02:22 | Now don't worry; all of
these steps are undoable.
| | 02:26 | Once something is locked, the same
button unlocks it, and once something is
| | 02:30 | grouped, the same button un-groups it.
| | 02:33 | That means if we need to, we can still
manipulate the individual pieces inside this group.
| | 02:40 | When doing this type of work, it pays
to put extra care into little steps, like
| | 02:45 | figuring out what gets grouped together
and how it can be locked in as a layer.
| | 02:50 | This keeps all of your work organized,
and it leads to wireframes and sitemaps
| | 02:55 | that communicate information better.
| | Collapse this transcript |
|
|
3. Building a SitemapBuilding your first sitemap| 00:00 | It's time to apply the tools to the task;
| | 00:03 | it's time to actually make
a sitemap with OmniGraffle.
| | 00:07 | In this movie, you'll start to see
the real benefits of OmniGraffle and
| | 00:11 | its ease of use and flexibility with how
quickly this initial sitemap comes together.
| | 00:16 | I am starting with a blank document
here, and this is both a frightening and
| | 00:21 | exciting thing: the beginning of the process.
| | 00:24 | I'm going to make a really
straightforward, even simple, sitemap.
| | 00:29 | I am going to use shapes, not any sort
of fancy stencil, and I am going to focus
| | 00:34 | on process and just describing the content.
| | 00:38 | I am going to start by dragging one
shape out, a rectangle with curved corners,
| | 00:44 | which I like, and typing HOME.
That will make the very simple shape model
| | 00:49 | for all of my pages.
| | 00:51 | This sitemap is going to diagram a
small personal web site for a creative
| | 00:56 | professional like myself.
| | 00:57 | I am going to Option+Drag to make the
next layer of pages and then fill in
| | 01:08 | the appropriate words.
| | 01:14 | CONTACT looks a little
funny, so I'll extend it up.
| | 01:19 | Now, to keep working quickly and focus
on the ideas, I am going to click the
| | 01:23 | Line tool twice, and that's going to allow me
to connect all of this first round of pages.
| | 01:30 | Because I've clicked twice for
persistent use, I may want to click HOME, click
| | 01:35 | BLOG, and just sequentially set up
all these lines very, very quickly.
| | 01:43 | Back to the Selection tool, and I am
going to do some quick snap alignment
| | 01:47 | to keep things neat.
| | 01:49 | Just snap those together and
maybe center up the whole thing.
| | 01:56 | I need one more layer of content under WORK
for the different types of work on this web site.
| | 02:01 | I am going to quickly hold Command
while I select the three pages that are
| | 02:07 | already properly sized, and I am
going to Option+Drag those down for
| | 02:12 | another layer of content.
| | 02:14 | Now, I'll fill in the
different types of work that I do:
| | 02:17 | IA for Information
Architecture and then VIDEO work.
| | 02:24 | Again, a little snap distribution
and a second click on the Line tool for
| | 02:31 | persistent use. Just that quick, a
sitemap starts to come together.
| | 02:42 | It's not the most beautiful thing in
the world, but it really does start to
| | 02:46 | describe the organization of content,
which is the purpose of the sitemap.
| | 02:52 | It may seem totally simple;
| | 02:54 | it is totally simple, but information
architecture is all about process, and
| | 02:59 | this is the first step of that process.
| | 03:02 | OmniGraffle is so quick to build this
style of sitemap and from here, you can
| | 03:07 | continue to augment it, add styles, add
content, and play with the organization.
| | 03:14 | It's in this play that you find the
heart of information architecture.
| | Collapse this transcript |
| Quickly building a sitemap with a stencil| 00:00 | Do you want to make a sitemap that
looks a little more professional,
| | 00:03 | something that you would actually
present to a client as opposed to just used
| | 00:07 | internally with your team?
| | 00:09 | Well, that's what this movie is all
about: using stencils in OmniGraffle to
| | 00:13 | quickly create a sitemap that
has a style, or a look, to it.
| | 00:17 | Let's see how it works.
| | 00:18 | First, I am going to start in my
Stencils palette, finding the exact stencil
| | 00:22 | that I want to use.
| | 00:23 | Start in the Search box,
searching Local, and search for "web flow."
| | 00:32 | Now, if you've downloaded the
exercise files, you are going to have a
| | 00:36 | Web Flowchart stencil.
| | 00:39 | If you've installed this, it will
look like it does here; ready to use.
| | 00:43 | If you've not yet installed it -
this is my uninstalled copy - you'll see
| | 00:47 | the Install button.
| | 00:48 | So, if you haven't
installed it yet, click Install.
| | 00:51 | If you have installed it, just go to be
installed one, and we can start working.
| | 00:56 | Take a look at the shapes
available in the stencil.
| | 00:59 | You're in no way stuck with these
colors or exact shapes, but they give you a
| | 01:03 | valuable guideline of what
you might want to work with.
| | 01:07 | I usually start with the
stencil and then adapt as needed.
| | 01:11 | In this case, it suggests dark blue
for the Home Page, and I don't see any
| | 01:15 | problem with that, so I am
going to start there too.
| | 01:20 | I need a homepage, and this is going to
be a web site for an online flower company.
| | 01:26 | They have got several
types of items that they sell.
| | 01:29 | They need some submenus.
| | 01:31 | Now, this orange color is called Alt Page,
but I am going to harness it to be my submenus.
| | 01:39 | The first of these is for flowers.
| | 01:45 | Once I have one page made, and I need other
similar ones, I like to use Option+Drag for the others.
| | 01:52 | Option+Drag one and Option+Drag another,
and now I'll have a section for plants
| | 02:01 | and also events, which is the last
thing that this company handles: the flowers
| | 02:07 | and plants for large events.
| | 02:09 | Now, I've got these three, and I've
already started to play with color coding -
| | 02:16 | not exactly like they have it here,
but orange for these submenus, because I
| | 02:20 | know they are going to lead
to other things down below.
| | 02:23 | I need a few more pages, but
they're not really submenus.
| | 02:30 | This site is going to have a
news blog and also a contact page.
| | 02:39 | Now, I have established the light blue
for my actual content pages, and I want
| | 02:48 | to do the same below each one of these
submenus, to indicate the different types
| | 02:54 | of flowers, plants, and events available.
| | 02:56 | Once I have something on the canvas, I like
to Option+Drag to keep using the same look.
| | 03:05 | Plants and Events are also submenus,
and they also have pages under them.
| | 03:11 | But, for the moment, I am going to save
time on those and just draw my lines, so
| | 03:15 | that my sitemap starts to really come together.
| | 03:17 | I do two clicks on the Line tool for
persistent use, because that's going to let
| | 03:24 | me quickly connect these.
| | 03:26 | Notice that this stencil has these pink
dots, and they are what's called magnets.
| | 03:31 | They sort of anchor the lines.
| | 03:44 | Looks like that guy didn't quite - there it is.
| | 03:48 | Now, we have the
beginning of a stylized sitemap.
| | 03:52 | Already, using the stencil, this
looks a lot more professional.
| | 03:56 | I've also started to really
work a color coding system:
| | 04:00 | dark blue for the homepage, orange
for the submenus, and light blue for the
| | 04:06 | final content pages.
| | 04:08 | From here, I need to add the rest
of the content and also start to
| | 04:12 | distribute this sitemap both to my
team, and once approved by my team, back
| | 04:17 | to the client for their approval.
| | 04:20 | You can see that a good-looking,
professional sitemap comes together rather
| | 04:24 | quickly with the help of a
good stencil in OmniGraffle.
| | 04:28 | From here, you'll want to add more
content and perhaps customize some of
| | 04:32 | these shapes to really meet the look
that you're looking for, but we are
| | 04:36 | off to a great start here.
| | Collapse this transcript |
| Customizing stencil shapes| 00:00 | So, you have a good stencil picked out that
has most of the shapes you need for a sitemap,
| | 00:05 | but maybe there is just some object that you
need to represent that's not quite on there.
| | 00:10 | Well, it's no problem;
| | 00:12 | it's just time to customize that
stencil a little bit to meet your needs.
| | 00:16 | I am going to show you
exactly how in this movie.
| | 00:18 | I am starting with a blank document, and I
am going to good drag out one of the shapes.
| | 00:23 | It's this Database silo, and that
comes from the Web Flowchart stencil.
| | 00:28 | If you have questions about how to
load and access this stencil, that's been
| | 00:31 | covered in previous movies.
| | 00:34 | Drag this object out, and this is a
pretty standard shape to represent a
| | 00:39 | database, or some sort of disk, or just data.
| | 00:42 | I am going to go down here, and instead of 100%,
| | 00:44 | I am going to go up to 200%, so we can a
really close look at what we are doing
| | 00:50 | here on a single shape. That's great.
| | 00:53 | If I want to use the Database icon,
but I want to augment it a little bit -
| | 00:57 | let's just say that I've got more
than one database in my site, and I need
| | 01:02 | to differentiate them -
| | 01:03 | so I am going to select this, and as
it's selected, I notice that in fact it's a
| | 01:10 | group, and I can tell that
because I have the choice to ungroup it.
| | 01:15 | That's telling me that different
items here are combined in a group.
| | 01:19 | So, if I ungroup them, I can now select
them separately: the text is one item,
| | 01:25 | and the shape is another item.
| | 01:27 | That's going to let me have more
flexibility as I augment this and change it.
| | 01:32 | The next thing I want to do is as if
we pretend that we have two databases -
| | 01:37 | one that holds Flash content, and the
other that holds video content - I need
| | 01:42 | to differentiate them.
| | 01:43 | So, I am going to get just my little
Flash badge, and I am going to place it
| | 01:48 | here, and I am going to make this my
Flash database. If I want, I can do that
| | 01:53 | with other badges to
differentiate these databases.
| | 01:56 | I also have control over
all of the visual aspects.
| | 02:00 | So, if this pink doesn't work for me, I can
select the shape up in my Styles Inspector.
| | 02:06 | I need to go to the Fill.
| | 02:08 | It's already set up as a gradient fill,
and I'd like to change the colors of the
| | 02:12 | gradient; make it more of a blue.
| | 02:15 | Different pickers here. I like the
crayon box myself, so I can shade from a
| | 02:21 | medium blue to a light blue. Medium
blue for the top, and light blue for the
| | 02:29 | bottom of my gradient.
| | 02:32 | Now, I've made a blue silo with the
Flash badge for my Flash database.
| | 02:38 | The last step is to select all this up,
and now it is the words at the bottom,
| | 02:43 | the new badge, and the colored shape and
return them to a group, so now they're
| | 02:48 | all going to work together.
| | 02:49 | You see that I've added on to the
established style in the stencil using the
| | 02:54 | existing shape and the existing badge to
make a new icon and then coloring it to
| | 03:00 | set it off a little bit.
| | 03:02 | You can use this technique to
customize shapes with a stencil to your heart's
| | 03:06 | content and really meet
the needs of your project.
| | 03:10 | I think you can see that customizing
stencil objects can be a great way to
| | 03:15 | maintain everything that's great about
stencils, stylized looks, and consistency,
| | 03:21 | but also not be painted into a corner,
or have your hands tied, if not everything
| | 03:25 | you need is available;
| | 03:27 | just take the parts that
exist and make your own.
| | Collapse this transcript |
| Aligning and grouping for sitemaps| 00:00 | Do you want a quick way to make your
sitemaps both more attractive and more functional?
| | 00:05 | The key is aligning and grouping, and
you want to do them in that order, and
| | 00:11 | very strategically.
| | 00:12 | Let me show you what I mean, because
it's really helpful for good sitemaps.
| | 00:17 | I'm starting with a sitemap, and it's
maybe getting close to all the way built,
| | 00:20 | maybe 80% of the way there, but
it's not looking very neat at all.
| | 00:25 | In fact, it looks like things were
dragged all around while building this, and
| | 00:28 | haven't really been put back into an
attractive place, and that's what I want to work on.
| | 00:34 | If I start at the tertiary level, the
bottom, I'm going to start to align these
| | 00:39 | using snapping, and when I am as close
as I can get easily with snapping, I'm
| | 00:45 | going to switch over to my Alignment
Inspector and make sure they're exact, and
| | 00:50 | also I'm going to check their distribution.
| | 00:52 | I'm just going to try this at zero,
and you might notice what that looks like
| | 00:58 | more than zero space, but you can see,
actually it is zero space between the
| | 01:03 | groups which are represented
by the far edge of the text box.
| | 01:07 | So, I'm actually going to put in a negative,
and align these to negative 0.2 inches.
| | 01:15 | Let's see what that does for me.
| | 01:17 | Yup, I think that's going to work.
| | 01:20 | So, once I have those aligned, I select
all three, and I make sure that they're
| | 01:25 | aligned to their parent page, the
orange one, Flowers, and you can see the blue
| | 01:31 | alignment that now goes straight
down through Flowers to the group.
| | 01:34 | So now, I've perfectly aligned that
whole section, and it is a meaningful
| | 01:40 | section on the content.
| | 01:41 | It's the Flowers section.
| | 01:43 | Now that everything is aligned within a
section, I'm going to select the entire
| | 01:48 | section and group it.
| | 01:50 | That means this alignment will stick,
and I can move the whole section.
| | 01:54 | I'm going to repeat the process on the
other sections, because then I can move
| | 02:00 | them around as objects themselves.
| | 02:02 | So, align, distribute, group, align,
distribute, got to make sure also aligned,
| | 02:17 | and I'm going to just snap for the
height distribution, so that everything looks
| | 02:22 | nice and clean, and one more group.
| | 02:28 | Now, I have these groups to work with,
and I can use additional alignment tools -
| | 02:34 | Snapping or the Palette - to get them lined up.
| | 02:40 | Much better already, and if we continue to use
these tools, I think they'll get better still.
| | 02:45 | Flowers is a little high up,
but there is time to work on that.
| | 02:49 | Also, in a more complex sitemap,
this becomes more and more important.
| | 02:54 | This map has three levels of content,
but if you had six or eight levels of
| | 02:59 | content, that would mean
more nested levels of grouping.
| | 03:03 | Grouping sitemap elements is both the
way to keep things looking neat, but it
| | 03:08 | also has an organizational
function in your sitemap.
| | 03:12 | It's not random that the Flowers
section has been grouped together.
| | 03:16 | It's a real section on this sitemap.
| | 03:18 | I encourage you to think strategically,
not just aesthetically, when you make
| | 03:24 | these groupings on a sitemap.
| | Collapse this transcript |
| Using automatic layouts for sitemaps| 00:00 | Alignment is definitely important for
sitemaps, so that they look nice and clean
| | 00:04 | and they communicate effectively.
| | 00:07 | Do you want to try an advanced technique
in OmniGraffle that allows you to align
| | 00:11 | your diagram in one step?
| | 00:13 | It also has some creative
possibilities that I'd like to explore.
| | 00:17 | This movie is about automatic layouts,
which allows you to do both of these things.
| | 00:21 | Let's take a look.
| | 00:22 | I'm starting with a sitemap here, and
it has a good deal of content, but it's
| | 00:26 | not very neat-looking.
| | 00:27 | Things that are on the same hierarchical
level are all spread out and not really
| | 00:31 | evenly aligned, and we've already
seen how to deal with that using various
| | 00:35 | Alignment tools, but now I want to
deal with it using Automatic layout.
| | 00:40 | Watch closely, because this
is going to happen quickly.
| | 00:42 | Over here in the Inspectors, I've got
my Diagram Layout Inspector, and I want to
| | 00:47 | turn on Automatic layout. Did you see it?
| | 00:51 | Look how quick it laid
everything out and aligned.
| | 00:54 | Now, you may not think all of this is
perfect, but it is one step to neaten things up.
| | 01:00 | You can now adjust from here if you
prefer, say, the heading to be centered
| | 01:04 | directly over the middle and
adjust these lines and what have you.
| | 01:08 | There's actually more going on with
Automatic layouts though, because you can
| | 01:12 | change, numerically, the Rank Separation.
| | 01:16 | That's the - in this case,
the vertical hierarchy.
| | 01:19 | So, if they're not too far apart,
I can make it 1.5 inches and
| | 01:24 | everything adjusts.
| | 01:26 | Object Separation is about the lateral,
or horizontal, separation of the items.
| | 01:31 | So, if I take it down to
zero, it squeezes together.
| | 01:35 | Remember, each one of these is a group,
which is why they're not actually touching.
| | 01:39 | Zero is from the edge of the
group to the edge of the group.
| | 01:43 | There's other possibilities
available with Automatic layout as well.
| | 01:47 | For starters, a
hierarchical layout can be directional.
| | 01:50 | So, it's traditional to go top-down,
but if you want to see what bottom-up
| | 01:54 | looks like, there it is.
| | 01:57 | Now, obviously our line connections
would need a little work to make this look
| | 02:00 | good, but you get the idea.
| | 02:02 | You can also go side-to-side,
but top-down is standard.
| | 02:07 | Just one more thing here, which
is the other layouts available.
| | 02:11 | I like these not because they
frequently work for a final sitemap, but because
| | 02:15 | they allow you to look at your content
in different ways, which I think can be
| | 02:19 | useful as part of your process.
| | 02:21 | So, look at these other layout types;
| | 02:23 | Force-directed, and you have different
controls with each, so I can make the line
| | 02:28 | shorter and bring this in.
| | 02:34 | This is what's called a Circular layout,
and you can control the line length,
| | 02:41 | and you also have a Radial layout.
| | 02:44 | So as I said, these alternate looks are
probably not as useful for sitemapping
| | 02:48 | as the traditional hierarchical, but
they are a way to play with your content
| | 02:53 | and your sitemap to see if it looks
better a different way, or even just teaches
| | 02:57 | you something about the weight of your content.
| | 03:00 | Automatic layouts are a great
way to make global layout tweaks.
| | 03:04 | They don't give you as much fine
control as alignment, but they interact with
| | 03:08 | the entire diagram, setting up
different layouts in one step.
| | 03:12 | I find this extremely useful in
my sitemap development process.
| | Collapse this transcript |
| Using visual design for excess content| 00:00 | It's a goal of sitemaps to diagram all
of the content on a site in a single page,
| | 00:06 | but what about when the content starts
to grow, and you don't have enough room
| | 00:11 | to have a shape for
every single page of content.
| | 00:14 | This is a very typical challenge
in site mapping, and in this movie,
| | 00:18 | we're going to look at a couple of
ways of dealing with that challenge.
| | 00:22 | We're starting with the sitemap that's
in progress, but it's not completely done.
| | 00:26 | The section on small flower
arrangements has six product pages that are
| | 00:30 | building, but you can see that
we're headed for a problem here.
| | 00:34 | First, what if there's
more than six arrangements?
| | 00:36 | But even if there's only six, we
already can't comfortably fit six smalls, six
| | 00:41 | mediums and six larges.
| | 00:43 | And of course, we're not going to
limit how many flower arrangements we sell
| | 00:46 | based on how big a piece
of paper our sitemap is on.
| | 00:50 | It's okay, because site mapping is a
creative exercise, and we're going to look
| | 00:54 | at, visually, how we can
indicate more items and save space.
| | 00:59 | The OmniGraffle techniques are not difficult,
but it speaks to the creativity of sitemapping.
| | 01:05 | I'm going to start by Option+dragging
one of these arrangements to start a new
| | 01:09 | one, and I'm going to build out
our flowering plants for sale here.
| | 01:22 | Now, if we have six or eight flowering
plants, one option I have is to use some
| | 01:27 | text, and that's what I'm going to try first.
| | 01:32 | I'm going to click twice on my Text tool
because I actually want two text elements.
| | 01:37 | One is going to be just an X for times,
and then I'm going to click my Text
| | 01:43 | tool once, and I'm just going to make
an X down here for times how many, and
| | 01:48 | then I'm going to activate the Text
tool again, because I actually want two
| | 01:51 | separate text elements.
| | 01:54 | That's going to come in handy later.
| | 01:56 | Make that a 7, so there's 7 of them, and
now I'm going to size these up a little
| | 02:01 | bit. Actually, you know what?
| | 02:02 | Let's zoom in, so you get a
better look. There we go.
| | 02:07 | Command+Plus to make that a little bigger
and Command+B for bold, and I like to
| | 02:13 | have these separate, because that
means I can size them separately and
| | 02:17 | basically treat them as design elements, big
numbers as opposed to a flowing piece of text.
| | 02:22 | So, see as I drag these around, I
get all the benefits of snapping and
| | 02:29 | alignment, and it's really easy to indicate,
nice and big and graphically, how this works.
| | 02:37 | So, instead of this mess, I now
have a much simpler treatment.
| | 02:41 | I like to grab all these
and group them together.
| | 02:45 | Now, it's going to move around like
one object, and I can connect it in a
| | 02:50 | way that makes sense.
| | 02:57 | Something like that.
| | 02:59 | So that works fairly well in a lot of
situations, but I want to look at one
| | 03:03 | other visual technique, and you can use
it separately or actually in combination
| | 03:07 | with some textual numbers.
| | 03:11 | In this case, I'm going to
Option+Drag again to start my edible plant
| | 03:15 | arrangements. Just for consistency
that one should be... wonderful, and this
| | 03:28 | time, I want to break my group apart,
and I'm going to move my text out of the
| | 03:32 | way and then just select my shape, and
I'm going to use Command+D to duplicate,
| | 03:38 | and do it a few times.
| | 03:40 | So, this gives me a neat stack, to indicate
more visually, that I've got more than one item.
| | 03:47 | I'll often bring my words back
into relation with the images, maybe
| | 03:53 | continuing to work on the layout.
Because if I stack these, they can sort of
| | 03:58 | be there in association.
| | 04:01 | Now, I take everything and group it,
and there's really one more step for how I
| | 04:07 | like this to work, and it has
to do with how the lines connect.
| | 04:11 | If I connect this with a line now,
it's going to want to connect to each
| | 04:15 | individual shape, and the look is
going to be somewhat compromised.
| | 04:23 | Undo that one, select the group and
then, in the Properties Inspector and the
| | 04:29 | Magnets tab, I want to simply tell it to
connect to the group, as opposed to the components.
| | 04:38 | Now, if I make the line, the whole
group is connected, and I can work on my
| | 04:46 | alignment. I might do the same thing
with this group as well, and now we have
| | 04:59 | two attractive options for dealing
with more content than there is space for,
| | 05:04 | and I think both of these look better than this.
| | 05:08 | I also think that this is effective
because it's visual, but there is nothing
| | 05:12 | stopping you from bringing in a number
as well to put in this area over here.
| | 05:17 | Running out of space on a sitemap is a
really typical problem, and the goal is
| | 05:22 | not that you need to have a shape
for every single page of content.
| | 05:27 | You need to represent the content.
| | 05:29 | So, this looks pretty good to
me now. Well, there are two options.
| | 05:33 | I haven't necessarily decided which one,
and I want to zoom out so we see the
| | 05:36 | whole thing and can see our new work in context.
| | 05:39 | So, down here and back to 100%,
and we can really see everything.
| | 05:45 | Running out of sitemap is a really
typical problem, and there are lots of
| | 05:50 | solutions to it, but don't get locked
into thinking that you need a shape for
| | 05:55 | every single thing, and then your
sitemap gets incredibly jumbled.
| | 05:59 | Be creative and use a method that
represents the content without necessarily
| | 06:04 | taking up too much space, and I
think you'll be on the right track.
| | Collapse this transcript |
| Using subgraphs for excess content| 00:00 | When sitemapping, it's typical problem
to run out of room for all the content
| | 00:04 | that you have to display.
| | 00:06 | We've already looked at some visual
ways of dealing with this problem, but
| | 00:10 | OmniGraffle has another tool called
subgraphs that actually lets you take
| | 00:15 | separate objects and collapse them
down in to an object called a subgraph.
| | 00:21 | It's just another way of dealing
with this problem using interactivity
| | 00:25 | instead of visual design.
| | 00:27 | Let me show you how subgraphs work.
| | 00:29 | This sitemap is being built, and we are
starting to run out of room with these
| | 00:33 | six different options under
the small flower arrangements.
| | 00:37 | Now technically, they all fit, but if we
add any more, or if we start adding six
| | 00:43 | to Medium and six to Large, we're
really going to run out of space here.
| | 00:46 | Instead of fixing this visually, I am
going to select all six, and then I am
| | 00:52 | going to make them in to a subgraph.
| | 00:54 | So that is Arrange > Group as Subgraph.
| | 00:56 | So that's what a subgraph looks like, and I
can change its name to something appropriate.
| | 01:07 | And right now it just looks like I've
put all of my content in another box, but
| | 01:12 | in fact, I've done something greater,
because if I right click this subgraph, I
| | 01:16 | have the option to Collapse Subgraph.
| | 01:19 | And now we see the real power of subgraphs.
| | 01:22 | All of the individual objects are
inside there, and I can collapse it and then
| | 01:28 | expand it again when I
want to look at the details.
| | 01:32 | There is one more thing I like about
subgraphs, which is that they are style-able.
| | 01:36 | So if I collapse it again and I want
it to look more like these content pages
| | 01:43 | that are inside of it, I can select
one of the existing content pages.
| | 01:48 | Notice that this is ungrouped when I
select it. I am selecting just the shape,
| | 01:53 | which is what you need to select if
you're going to get all of the style details
| | 01:57 | down in the style palette.
| | 01:59 | Now I can just drag this style to the subgraph.
| | 02:03 | And now not only does it contain all
those pages, it matches them visually, also.
| | 02:08 | Running out of space on your
sitemap is a constant problem.
| | 02:11 | It's nothing to worry about, just have a few
tools in your arsenal, how to deal with it.
| | 02:17 | We can deal with it visually, which
works great for printouts, or we can deal
| | 02:22 | with it with subgraphs, which works
a little better if you're presenting,
| | 02:26 | because it lets you move around in
your diagram, expanding the parts that you
| | 02:30 | want to talk about, and then
collapsing them again as you move on.
| | Collapse this transcript |
| Making a legend| 00:00 | So your sitemap is all finished, but
all this careful work you have put in to
| | 00:04 | color coding things and making
different styles of lines and making every thing
| | 00:09 | perfect, well, it might make more sense
to you in your own head than the people
| | 00:15 | that are going to look at
your sitemap for the first time.
| | 00:18 | A good key to bridge this gap is a legend.
| | 00:21 | And legends are a good idea on any
sitemap that gets beyond the most basic, in
| | 00:27 | terms of complexity.
| | 00:28 | As long as you're using different styles,
a legend is a great idea just to let
| | 00:33 | your end user know what
you're trying to communicate.
| | 00:36 | In this movie, we're
going to make a quick legend.
| | 00:39 | Start your legend by making a
nice big box where you want it to go.
| | 00:43 | I am going to use my Shape tool and
just drag out an area where I have got some
| | 00:48 | space and I think I want to put it.
| | 00:51 | I am going to double-click and type
"LEGEND" in there and, of course, I can't
| | 00:57 | have that just sitting in the middle of the box.
| | 00:59 | It's just a label for the whole box.
| | 01:02 | So in my Text Inspector I want
to align it so it's top and left.
| | 01:09 | That's going to look good and leave
me room for the actual legend content.
| | 01:14 | Now I am going to lock this, because I
don't want it to move around underneath
| | 01:18 | the other things I am going to put on it.
| | 01:20 | And I can style it more, but I think it
looks good with a little bit of a drop shadow.
| | 01:24 | That's good.
| | 01:25 | Now, I am going to move around my
sitemap, identifying the things that I need
| | 01:30 | to put in the legend.
| | 01:32 | And I am just going to Option+Drag
them, creating a copy for my legend.
| | 01:36 | I need the whole group, so let's make
sure it's grouped, and then I'll take that.
| | 01:44 | And that's not contact in legend;
| | 01:47 | that's any form is red.
| | 01:52 | Every normal page is this light blue,
and I have to unlock it and drag it down
| | 02:00 | in there with Option, and
that's a content page. Unlock.
| | 02:12 | Option+Drag.
| | 02:14 | And by the way, it is a good idea to have
your objects locked in a near-finished sitemap.
| | 02:19 | These are our submenus.
| | 02:25 | And now I need to get one of these
purple pages as well, but they are sort of
| | 02:29 | deeply embedded here in these other
groups, so I am actually going to return to
| | 02:33 | my Stencil and just get a fresh one.
| | 02:40 | There we go; we can move Stencils out of the way.
| | 02:44 | It's not an Alt page;
| | 02:48 | it's a product page.
| | 02:50 | So we're getting close to
relating all of the content that's on our
| | 02:54 | sitemap, but there is one more thing I need to
relate in the legend, and it's this dashed box.
| | 03:00 | Clearly it's there for a reason, but
without some explanation some one looking
| | 03:04 | at this sitemap wouldn't know what it is.
| | 03:07 | So I am going to start by unlocking that one
and also Option+Dragging just that dotted frame.
| | 03:15 | Its way too big, so I am going to size
it down so it's close to our legend size.
| | 03:21 | It doesn't need to match the pages
exactly, because it's not a page;
| | 03:26 | it's a different type of indicator.
| | 03:29 | So that will work, and then I am also
going to briefly ungroup this, Option+Drag
| | 03:35 | the text so it matches perfectly.
| | 03:37 | I can make a new text element, but then
I would have to mess around getting its
| | 03:41 | size and weight just perfect.
| | 03:43 | So if I Option+Drag, it gets that and
I'll like to regroup that up, and the
| | 03:50 | meaning of the dotted line is that
it's managed by an external resource.
| | 03:56 | So I am going to say Managed Externally.
| | 04:06 | And that should also be grouped.
| | 04:11 | And we're real close here.
| | 04:13 | All of our grouped objects
can now quickly be aligned.
| | 04:22 | I'm going to do that in the Canvas Inspector.
| | 04:26 | Let's close something else to make some room.
| | 04:29 | Alignment and align their tops,
position them on the legend.
| | 04:35 | I'll like to unlock the original box, so
that I can then put everything in a group.
| | 04:43 | And now I have a legend, and that fact
that it is a group means if I decide it
| | 04:47 | belongs here, that's no problem,
although I still think it belongs there.
| | 04:51 | When you've decide its place, just lock it
like the rest of the elements, and we are all set.
| | 04:57 | Every detail matters on your sitemap,
so don't leave details out there
| | 05:02 | without explanations.
| | 05:03 | A legend is away to go around and
collect up all of the little conventions that
| | 05:07 | you've created and communicate them
well to the person that is going to be
| | 05:12 | using your sitemap.
| | 05:14 | Don't neglect this communications opportunity.
| | 05:16 | It's really quite important.
| | Collapse this transcript |
| Presenting sitemaps| 00:00 | The sitemap is done, and it's
time for your big presentation.
| | 00:04 | OmniGraffle has some great tools that
will help you really show off your work.
| | 00:08 | Let's go through them in this movie.
| | 00:11 | The first thing I want to do is add a few
things that create kind of a frame for this sitemap.
| | 00:16 | First, I'm going to place our client's
logo in the upper left-hand corner, just
| | 00:20 | to sort of mark it as their brand.
| | 00:22 | It's really easy to bring
images into OmniGraffle.
| | 00:25 | I'm just going to go File > Place Image.
| | 00:28 | Then in our Exercise Files/Ch03,
we've got our logo as a TIF image.
| | 00:37 | OmniGraffle can accept many
common image files, including TIF.
| | 00:43 | Okay, there's our logo.
| | 00:45 | It's a little large.
| | 00:46 | I'm just going to hold Shift to
lock our aspect ratio, as we make it a
| | 00:51 | comfortable size for this
document. That looks good.
| | 00:54 | You're not always going to put
your client's logo on the sitemap.
| | 00:58 | It really depends on the presentation.
| | 01:00 | In this case, I think they're really
going to appreciate seeing it branded by them.
| | 01:05 | The other thing I like to do is just a
little bit of textual information up top.
| | 01:10 | In particular, people need to
know what they're looking at.
| | 01:13 | Then with all of this work, it's
always a good idea to version things, so I'm
| | 01:19 | going to make this Version 1.0.
| | 01:24 | Make that slightly bigger, but not too big.
| | 01:27 | We don't want it to overwhelm the
other things going on here and just kind of
| | 01:32 | tuck it away there.
| | 01:34 | In this area, you might put more
information such as the date or the contractor
| | 01:39 | who's doing this work.
| | 01:41 | It's our little identity block there.
| | 01:43 | Okay, already things look more
professional with a little bit of branding and
| | 01:48 | also identifying information.
| | 01:50 | From this point, you can certainly
print this diagram and hand it out at your
| | 01:55 | presentation, but you also may
want to put it up on a big screen for
| | 01:59 | projection and talk about it.
| | 02:00 | You can reach that point through
exporting as an image and bringing into a
| | 02:05 | PowerPoint or Keynote, but it's also
worth noting that OmniGraffle has its
| | 02:10 | own Presentation mode.
| | 02:11 | Let's take a look at how that looks.
| | 02:14 | It's simply View > Start Presentation.
| | 02:18 | In the case of a single sitemap, we just go
to fullscreen, and we can see everything.
| | 02:23 | The other thing about
Presentation mode is it will highlight items.
| | 02:27 | So as I move around, and I can talk
about the homepage and highlight it or the
| | 02:31 | connections between things, and if
this heavy red highlighting is not to my
| | 02:36 | liking, I can go into Preferences and
change exactly how the highlighting looks,
| | 02:41 | so this can be effective speaker
support when I give my presentation.
| | 02:46 | Sitemaps need to be seen and discussed.
| | 02:49 | Their purpose is not to just exist in
one person's head and be a pretty picture.
| | 02:54 | Their purpose is to be handed out,
projected on a screen, talked about,
| | 02:59 | marked up, changed;
| | 03:01 | it's a living document, and
it's a communications tool.
| | 03:03 | So don't neglect how you're going to
share your diagrams and how you're going
| | 03:09 | to make your sitemaps look as
professional as possible when you do that
| | 03:13 | presentation.
| | Collapse this transcript |
|
|
4. Building a Homepage WireframeDefining wireframes based on the sitemap| 00:00 | The sitemap is done and approved.
| | 00:02 | It's time to move forward into the
next stage of development: wireframe.
| | 00:07 | To move forward, we're actually going
to start with this sitemap and use it to
| | 00:11 | define what wireframes we actually need.
| | 00:14 | I'm going to show you exactly
how that works in this movie.
| | 00:18 | Here, I have our completed sitemap.
| | 00:20 | This next step can happen as easily on
OmniGraffle as just on a sheet of paper.
| | 00:25 | Often I just have a printout of this,
and the steps that I'm about to do,
| | 00:29 | I'll just do with a pen. But for
right now, I'm going to do the same steps
| | 00:33 | inside OmniGraffle, just
to show you how it works.
| | 00:36 | So basically, I need to analyze this sitemap.
| | 00:39 | I'm going to start from
the top with the Homepage.
| | 00:42 | You always know your homepage
is going to need a wireframe.
| | 00:45 | Every major page on your site is going to
need one, and you start with the homepage.
| | 00:49 | So I usually mark a little 1
next to my first wireframe.
| | 00:53 | So I'm going to use the Text tool and
just make a 1, but that's not really going
| | 00:58 | to be big enough to stand
out and do the job I want it to.
| | 01:01 | So I'm actually going to
style the text a little bit.
| | 01:03 | I'm going to give it a bright red color.
| | 01:05 | I'm going to size it up, Command+
Plus and then Command+B for bold.
| | 01:15 | Now I've got something that you can't mistake.
| | 01:17 | That's our number 1 wireframe.
| | 01:20 | From here, I'm just going to designate all
of the other wireframes I'm going to need.
| | 01:26 | I'm going to talk through this,
so you know my thought pattern.
| | 01:29 | I know the orange ones are submenus, and a
submenu almost always needs its own wireframe.
| | 01:35 | So actually, now that we've stylized
this text, I can make my Text tool sort of
| | 01:39 | obey, so I'll select my big red
letter A. Then I'll click a second time for
| | 01:44 | persistent use, so now we'll
just stay with the Text tool.
| | 01:46 | I'm just going to number these, and I
might give some little detail from time to
| | 01:51 | time, so 2 is going to be Submenus.
| | 01:58 | I might switch back to my Selection tool, just
to place these, so they don't get in the way.
| | 02:06 | Then back to text, our blue Content pages.
| | 02:10 | That's a page of content, as defined in
this site. So I'll say 3, Content Pages.
| | 02:18 | That's going to need its own wireframe for sure.
| | 02:24 | These purple product pages,
they're going to need one as well.
| | 02:29 | I'm still in the Selection tool, so I
think I'll just do Option+Drag and then
| | 02:34 | double-click in and change this to 4,
Product Pages. That looks good.
| | 02:46 | I've covered a lot of
what we need to cover here.
| | 02:49 | You don't always know for certain from
the sitemap everything that you're going
| | 02:53 | to need, but you want to give yourself a
good indication of the major wireframes
| | 02:56 | you're going to need.
| | 02:57 | These are going to be
separate templates on your site.
| | 03:00 | So I know the homepage needs some
different requirements than the submenus, the
| | 03:05 | content pages and the product pages.
| | 03:08 | The only thing I'm not quite
sure about now is this Form page.
| | 03:12 | Generally, when you have a form, at
some point the coder is going to need a
| | 03:17 | little guidance on how that comes together.
| | 03:19 | I wouldn't call this a full-fledged
wireframe, but at this stage, what I'd
| | 03:23 | actually do is put a little asterisk by
it, just a little reminder that I'm not
| | 03:30 | considering this a major wireframe, but
at some point I want to return to it and
| | 03:36 | mock up what that form is going to look like.
| | 03:38 | Information architecture is all about
process, and process is very important
| | 03:44 | right now, because we are in the
cusp from changing from one diagram type,
| | 03:48 | sitemaps, to the next diagram type, wireframes.
| | 03:52 | Process dictates that we lock one stage
in before we move to the next, so we can
| | 03:58 | use it as sort of a foundation
to inform what comes after it.
| | 04:02 | Steps like this are very important
in a process, because you're really
| | 04:06 | codifying what you've done to
take it forward to the next step.
| | 04:10 | Take your time and be
careful when you do this stage.
| | Collapse this transcript |
| Setting wireframe background elements| 00:00 | How do we start our wireframe?
| | 00:03 | Well, a big, blank page can
be a little intimidating.
| | 00:06 | I like to put some background elements in
and lock them in place, just as a starting spot.
| | 00:12 | Let's see how that works.
| | 00:14 | Here's my blank document.
| | 00:16 | The first thing I'm going to do is
to actually change its orientation.
| | 00:21 | This is what's called portrait mode,
meaning the frame is taller than it is wide.
| | 00:27 | I prefer to do wireframes in
landscape mode. So that's easy.
| | 00:32 | It's just File > Page Setup, and we
want to move its Orientation to landscape.
| | 00:39 | This is pretty typical of a
lot of software. There we go.
| | 00:43 | I might also do Fit in Window.
| | 00:46 | Now we're looking at the blank page
all ready to add our wireframe elements.
| | 00:52 | Next, I need to choose a
stencil that has the objects we want.
| | 00:57 | I should say I'm going to choose a
stencil, because you could find these
| | 01:01 | elements at other places.
| | 01:02 | I just like to use stencils in OmniGraffle.
| | 01:04 | So I'm going to go up to my Stencils
palette, and I want to search locally, and
| | 01:09 | I want to search for "wireframe."
| | 01:12 | Now wireframe is the name of the
stencil that's in your Exercise Files.
| | 01:17 | So if you've downloaded the Exercise
Files, you're going to see this come
| | 01:20 | up just as mine is.
| | 01:22 | If you select this, and it's the first
time you're using the stencil, you have
| | 01:27 | the choice to install it, which is
exactly what I'm going to do to use it.
| | 01:31 | Now that this stencil is installed,
it's ready to use, but if you want to look
| | 01:35 | for more stencils, you could also
search in Graffletopia to find more
| | 01:41 | permutations, or you could
build your own background elements.
| | 01:45 | This is going to work for us, however.
| | 01:47 | I'm just going to take this pre-built
browser window, and I'm going to drag it out here.
| | 01:51 | Now, I'm going to position it so it
takes up most of the screen, because all of
| | 01:56 | our content in the wireframe is
going to take place inside this frame.
| | 02:01 | I am going to leave a little room around the
edges, so I can have room for a title up here.
| | 02:07 | Then I might need some room for notes or
comments that could go off the edge, so
| | 02:11 | I don't want to take this
all the way to the edge;
| | 02:13 | I just want to basically fill up
the space with a comfortable margin.
| | 02:18 | The next thing I like to do is
actually write a URL in here, just to give
| | 02:22 | the client an idea that we really are
thinking about their project, and it's not random.
| | 02:30 | There we go. It's the URL. It looks a little funny
centered, so I'm just going to justify it left.
| | 02:37 | Now it looks like the beginning of a web page.
| | 02:40 | By the way, some people like to use
more colorful backgrounds, and they might
| | 02:44 | actually do an image capture
with a logo from a browser company.
| | 02:48 | I don't really favor this unless you're
actually doing architecture for that company.
| | 02:53 | You know, if you're doing wireframes for
Apple, you could use Safari or Microsoft.
| | 02:57 | You could use Internet Explorer.
But for my two cents, if you're just making a
| | 03:02 | regular wireframe, use something generic;
| | 03:04 | there's no reason to brand it in that way.
| | 03:06 | So we're also with our browser window here.
| | 03:10 | I like, at this point, to give this a simple
title, so people know what we're looking at.
| | 03:13 | Let's just position that and maybe bold it.
| | 03:22 | Okay, we have a background, and we have a title.
| | 03:25 | I want to lock them in place.
| | 03:27 | I'm going to use Command+A to select all and
| | 03:30 | then lock everything on the screen.
| | 03:32 | That's not a throwaway step at all,
because as we start to work over top of this
| | 03:37 | browser window, you don't want it
to be selected or to move around.
| | 03:40 | You want to just work with objects on
top of it, which is what we'll do next.
| | 03:45 | Setting the background elements for
your wireframe is an important step.
| | 03:49 | It's easy to do, but take your time
and select these elements, place them
| | 03:53 | carefully and lock them, because this
is going to provide the background for
| | 03:57 | not just one wireframe document, but
probably several, as you wireframe your
| | 04:02 | entire site.
| | Collapse this transcript |
| Choosing wireframe content styles| 00:00 | How do we decide the look of our wireframe?
| | 00:03 | Now, I don't mean the layout of our web page.
| | 00:05 | That's the work we are
going to do with the wireframe.
| | 00:08 | I mean the look of the
actual elements for the wireframe.
| | 00:12 | And we know these are
going to be fairly generic,
| | 00:14 | but the question is, exactly how are we
going to represent the pieces of the web
| | 00:19 | site in the generic visual
language of the wireframe?
| | 00:22 | That is what we are going to do in this movie.
| | 00:24 | I am starting with a document that has
been prepared with a browser window, and
| | 00:29 | it's all locked into place.
| | 00:31 | This is ready to work right on top
of, and actually start wireframing.
| | 00:35 | I also have a stencil open.
| | 00:36 | It's the wireframe stencil
that came with the exercise files.
| | 00:41 | If you are not sure how to work with
stencils, or find them, I recommended that
| | 00:45 | you go to our previous movie in this
course, or also check out the Essential
| | 00:50 | Training course on OmniGraffle.
| | 00:52 | So now I am going to just decide, what
are the major elements that I need? And I
| | 00:57 | am going to identify parts of the
stencil that will work there, and I will
| | 01:01 | probably augment some things as needed.
| | 01:03 | I know my homepage is going to need a headline,
and this creates sort of a baseline for me.
| | 01:08 | I am not going to adjust
the size of that at all.
| | 01:10 | That is going to become the
biggest text on my page, and I will base
| | 01:13 | everything else on that.
| | 01:15 | I know I am going to need at least one
image, if not more, and I have got a few
| | 01:19 | choices for wireframe images.
| | 01:22 | Now some people like using these
cartoony ones, but I really don't.
| | 01:26 | I think they start to indicate a look,
or indicate content that I don't
| | 01:32 | necessarily want to indicate at this stage.
| | 01:34 | So I am actually going to choose just
the box with the x through it, because I
| | 01:38 | think that's the safest
representation of an image.
| | 01:42 | I am going to drag it out quite a bit
bigger, because I am pretty sure that my
| | 01:45 | homepage is going to
feature at least one large image.
| | 01:49 | We might need more images, but
that will represent the style for now.
| | 01:53 | I am going to need a secondary headline,
and I have been told by the content
| | 01:58 | people that it might be a subhead or
might be what's called a deck in print
| | 02:04 | terms, which is sort of a long
subhead that might have several lines.
| | 02:08 | So I bring out headline 3, and I feel
like the difference between the sizes
| | 02:14 | isn't quite enough for what I want to indicate.
| | 02:16 | So I am going to use Command+Minus to
knock down the size of that a couple of times.
| | 02:21 | Also, while Headline 1 is accurate
enough for now, Headline 3 is really meant to
| | 02:26 | represent a subhead or a deck.
| | 02:32 | And I think this kind of generic
language is really good on wireframes, just
| | 02:36 | writing in what it is that the thing is called.
| | 02:39 | And because it's a subhead or deck, I
want to indicate that it might be a bit
| | 02:43 | more text than this, so I am
going to copy and paste a few times.
| | 02:48 | Again, it's not about the content, or
even about exactly the size of the text box;
| | 02:53 | it's about showing that this might not
just be a few words, that this style is
| | 02:57 | able to do, in the case of a
deck, multiple lines of text.
| | 03:03 | I'm just rough placing these.
| | 03:05 | I'm not really wireframing the placement yet.
| | 03:09 | I am just deciding on the elements.
| | 03:10 | It's a little like putting your paint
out on a palette before you actually
| | 03:14 | start to put it on the canvas, just figuring out,
metaphorically, what colors I am going to use.
| | 03:20 | And I do mean metaphorically, because it's a
wireframe - I am not going to use colors at all.
| | 03:23 | Here I have a text block, and I
know I am going to need some body copy.
| | 03:27 | I think that size is going to be fine for now.
| | 03:30 | Now I have many of the major
elements I am going to need for my homepage.
| | 03:35 | One that's missing is I know I am going
to need a corporate logo, and putting in
| | 03:40 | a branded corporate logo is sort of one
exception from the rule about no design
| | 03:45 | or colors on your wireframe, because if
you already have the logo, and it really
| | 03:49 | is for that company, they usually
want to see their logo on there.
| | 03:52 | It's part of the design.
| | 03:53 | I am going to import that logo; it's an image.
| | 03:56 | That's easy. Just place image.
| | 04:00 | There is the logo. It's a bit large.
| | 04:04 | I am going to hold Shift as I scale it down.
| | 04:08 | This isn't final scale or final
placement, but I do have a strong feeling that
| | 04:13 | logos usually go top-left, so I am
pretty comfortable just putting it there
| | 04:17 | for the time being.
| | 04:19 | These are pretty much the elements that I
think I am going to need for my homepage.
| | 04:23 | It's not a big deal if you have to add an
element later or duplicate or tweak something;
| | 04:28 | I am just trying to sort of define the
look and feel of things before I really
| | 04:32 | start to massage them into place.
| | 04:34 | There is one important thing that is
missing to this point, and that's a
| | 04:37 | navigation bar, and I am just leaving
that for its own movie, because it's sort
| | 04:41 | of a big deal, and I want to focus on it.
| | 04:43 | What we have accomplished here is
deciding on the fundamental units that will
| | 04:47 | dictate the look of our wireframe.
| | 04:50 | If this were a jigsaw puzzle, it's a
little like taking all the pieces out and
| | 04:53 | just turning them face up so you
can see what you are working with.
| | 04:57 | It's an important step, and it's
better to make this decision going in, than
| | 05:01 | to be moving things and changing
styles when what you are really trying to do
| | 05:04 | is place elements.
| | Collapse this transcript |
| Wireframing a navigation bar| 00:00 | We are making some real progress on our
wireframe, and we have reached a crucial stage.
| | 00:05 | It's time to build the persistent
Navigation bar, and navigation is a really
| | 00:11 | important part of information
architecture, and it manifests for the first
| | 00:15 | time on the wireframe.
| | 00:17 | Now there is plenty to think about and
talk about when it comes to navigation,
| | 00:21 | but if we build this carefully in
OmniGraffle, it is going to help our process
| | 00:26 | later, because it is going to
be flexible and easy to change.
| | 00:30 | So anything that comes up, we should be able
to deal with it, if we just build this smart.
| | 00:34 | I am starting with a diagram that's
already been started, and we have a
| | 00:38 | background layer that's locked in place,
plus a number of content elements that
| | 00:43 | have sort of just been thrown
out there to work with later.
| | 00:46 | They are not really placed yet.
| | 00:47 | I need to add the Navigation bar as
the final element that will let me place
| | 00:51 | these things, and I am going to
build it starting with a simple shape.
| | 00:56 | I like that rectangle with the curved
corners, and I am going to double-click it
| | 01:00 | and write my first
navigation term, which is FLOWERS.
| | 01:06 | Now Command+Minus will take the size
of the text down until it's comfortable,
| | 01:11 | and I just wanted to get this
basically to sort of button dimensions.
| | 01:16 | I might take down the Corner Radius to
about 5, and that looks like one button.
| | 01:25 | Now what I need is five buttons, and I
know that from referring to the sitemap,
| | 01:30 | and the way I am going to achieve
that is with a table in OmniGraffle.
| | 01:34 | So select the button and
then Arrange > Make Table.
| | 01:40 | Tables in OmniGraffle are really
useful for navigation, because it builds in
| | 01:44 | that flexibility for later.
| | 01:46 | So you will notice now that it's a table,
I have got a different looking handle
| | 01:51 | on the edges than the corners.
| | 01:54 | This is a table handle, and if I drag
it, I don't resize; I add rows to my
| | 02:00 | table, to a total of five.
| | 02:02 | Now, I can just double-click on each
one and add the proper navigation word.
| | 02:07 | That is pretty close.
| | 02:11 | I am going to work on the visual
elements a little bit, because I feel like this
| | 02:15 | is visually heavy right now, and I
don't really want to imply these hard edges;
| | 02:20 | it's really just structural.
| | 02:22 | So I'd like to just knock the
thickness of the rule down. There we go.
| | 02:28 | You see how it seems lighter on the
page now that I am not implying anything
| | 02:32 | about the design? And from here, if I
need to add more buttons, I can do that with
| | 02:38 | our table handle, but I can also use
the corners and adjust the size of the
| | 02:43 | entire Navigation bar.
| | 02:45 | For now, I am going to make it take up
the space between the logo and the edge.
| | 02:50 | Now this isn't final navigation.
That's a big point, because this can be
| | 02:55 | massaged quite a bit.
| | 02:56 | But for my first sort of stab at the
navigation here, I'm going to go for
| | 03:01 | something like this, and
my thinking is as follows:
| | 03:05 | I want the logo to be the Home button.
| | 03:07 | I don't think we need to say
Home on any of these buttons.
| | 03:11 | I think it's convention these days that
if you click the logo, you'll go Home.
| | 03:15 | But I also want that logo as Home
button to be in line with the rest of the
| | 03:20 | navigation so it can sort of be part
of the navigation, but also a design
| | 03:25 | element, the logo, and that's sort
of a theory on my part, something I am
| | 03:29 | going to take to the team and say, do you
like this as my first rendition of the wireframe?
| | 03:35 | Well, navigation is truly
at the heart of wireframing.
| | 03:39 | It's incredibly important to make
these decisions as good as possible now,
| | 03:44 | because changing something like the
number of buttons on your persistent
| | 03:48 | navigation later in the design or
coding phase is going to be much more
| | 03:53 | expensive, and deciding things ahead of
time is the key to architecture, so that
| | 03:59 | you have a smooth process.
| | Collapse this transcript |
| Positioning content elements| 00:00 | Wireframing is really about problem solving.
| | 00:04 | At a certain point, the content lands
on your desk with a big question mark.
| | 00:09 | How does it fit on the page?
| | 00:11 | In this movie, we're going to look at
initial positioning of content on a wireframe.
| | 00:17 | We're starting with a diagram that has
all of the elements present, but no work
| | 00:22 | has really gone into
placing them on the wireframe.
| | 00:26 | I've also gotten some more
information from the client.
| | 00:30 | The big heading on their
homepage is really a seasonal heading.
| | 00:33 | It switches out once every season, which
totally makes sense for a flower company.
| | 00:37 | They do their promotions four times a year.
| | 00:40 | The sub head actually goes
with the seasonal heading.
| | 00:43 | And I'm going to go ahead and move that
up, so I just remember it and just keep
| | 00:47 | them visually together.
| | 00:49 | And then this body copy actually
does not go with the seasonal material.
| | 00:54 | This is more general copy for the company.
| | 00:57 | I'm going to remove that away from the
others to start having a sense of
| | 01:01 | visual consistency.
| | 01:03 | Okay, that's all the information I have,
and now I get to the problem-solving
| | 01:06 | phase. How am I going to put these
pieces together so they'll fit reasonably
| | 01:11 | well on the web page?
| | 01:14 | And I consider this an initial
placement round, because if we know one thing
| | 01:18 | about architecture is the first way we present
things to the team is unlikely to be the final.
| | 01:24 | So I recommend you get used to that
idea and work efficiently rather than
| | 01:28 | hemming and hawing over something
that's probably going to change anyway.
| | 01:32 | So from here, I've already thought
some about my navigation placement, but I
| | 01:37 | really just want to make sure that
it's fairly consistent and believable that
| | 01:43 | the navigation is in relationship with the logo.
| | 01:47 | So I really want to see the logo and the
navigation together sort of span the screen.
| | 01:54 | I think that really does it for me, and
I'm sort of hoping that this connection
| | 01:58 | works once it's designed,
that this will go together.
| | 02:01 | So next, I want to put together all of
our seasonal stuff, which is a headline,
| | 02:07 | this deck copy, and a large
image, which will also be seasonal.
| | 02:12 | And I think I'm going to try,
because of the nature of it,
| | 02:17 | I have this idea that I might put the
heading at the bottom, giving us a lot of
| | 02:23 | nice space for a big picture.
| | 02:26 | This is like a seasonal promotion,
and I need to leave some leeway for the
| | 02:30 | designers, but I need to leave enough
real estate so they can really work.
| | 02:35 | And now I like that, but I'm running
out of space, so I'm thinking something
| | 02:44 | like this is starting to approach a
little area for my seasonal promotion.
| | 02:51 | This is still in the way, but
remember, wireframing is about real estate.
| | 02:57 | And with this set up, at least for the
moment, I have this whole top area for the
| | 03:02 | seasonal promotion: a
headline, a deck, and an image.
| | 03:06 | Now, I'm left with a copy
that's more general about the company.
| | 03:10 | And I like that that would be below
this, because I think the seasonal promotion
| | 03:14 | is more important, but nothing
about this makes me particularly happy.
| | 03:22 | So I'm going to come out with a
solution that I've to pitch back to the client,
| | 03:26 | and it goes something like this.
| | 03:27 | It goes, hey client we need some more
pictures, because this is going to look plain.
| | 03:32 | I need some pictures to go with
this, and they can be smaller.
| | 03:35 | So I'm going to go ahead and wireframe that.
| | 03:38 | Wireframing is cheap, and if they say
there's no photos, it's easy to take them away.
| | 03:41 | I'm going to make a small image, and then
I'm actually going to duplicate my body
| | 03:49 | copy and make two smaller chunks.
| | 03:54 | And I'm going to suggest to the client
that when they get to their boilerplate
| | 04:04 | about their company that we find a way
to introduce some images and some smaller
| | 04:11 | chunks of copy, because,
architecturally, I like the idea that this general
| | 04:19 | information about the company
would be on the bottom here.
| | 04:23 | Something like that is starting
to approach my initial positioning.
| | 04:27 | And remember, it's not final;
it's going to be a discussion piece.
| | 04:32 | I need to bring this solution to the
client and see what they think about it,
| | 04:36 | but I can't bring it to the
client just by talking about it.
| | 04:39 | The purpose of a wireframe is to show
your ideas, and that's what I've done here.
| | 04:44 | My ideas might get shot down, but at least
I'll be able to show them, not talk about them.
| | 04:50 | Placing the content on the page is
one of the big mandates of wireframing.
| | 04:55 | It's literally what we're here to do.
| | 04:58 | What we've done so far is done a
placement, an initial way of setting this up
| | 05:03 | that we think will work,
| | 05:05 | and now is ready to go to the next
stage of the process where we show this to
| | 05:09 | team members, take feedback,
and make changes to perfect it.
| | Collapse this transcript |
| Iterating a wireframe based on feedback| 00:00 | To iterate something means to repeat a
process, with the goal of reaching a final end state.
| | 00:08 | And iterating a wireframe is a
really important part of the process.
| | 00:12 | The idea is that once we initially
position things on the wireframe, we need to
| | 00:19 | take the time and have the discussions with
important stakeholders to really get it right.
| | 00:25 | I caution you against falling in love
with your first wireframe layout because
| | 00:30 | it is bound to change, and
that's what this movie is about.
| | 00:34 | I've a roughly positioned wireframe here,
and it could be done, but it's not done.
| | 00:41 | It could be better, and I think it
could be better, but more than that, the
| | 00:45 | client and the team on working
with have ideas to make it better.
| | 00:49 | So iterating is a lot like a
conversation that takes place on a wireframe.
| | 00:55 | The first thing that happened in
this conversation was pretty important.
| | 01:00 | They dropped one of the navigation elements.
| | 01:03 | So better to have this happen at the
wireframing stage than any other time.
| | 01:07 | About has been lost, and the logic
was that after we laid out this About
| | 01:13 | information down here, the feeling was we
didn't need a page for the same stuff again.
| | 01:18 | It would just live on the homepage.
| | 01:20 | So I'm going to contract the navigation
by one column, and I'm going to type in
| | 01:25 | Contact because that's the remaining page.
| | 01:29 | So that was the input from the
content people at the client.
| | 01:34 | But then I also had a really good
conversation with the visual designer there.
| | 01:38 | This is someone who's going to be
maintaining the web site and also setting up
| | 01:43 | these seasonal promotions.
| | 01:45 | And two things came out of
that conversation - both important.
| | 01:49 | The first looks like this.
| | 01:51 | The designer said, "I want more space
to design the seasonal promotions," and I
| | 01:57 | said, "But what about the headline?"
| | 01:59 | And the designer said something very smart.
| | 02:02 | She said, "I'm going to lay the headline
out with the image, and it's all going
| | 02:07 | to be the same thing."
| | 02:09 | And we talked some about design,
and we talked some about process.
| | 02:14 | And when we talked about process, we
realized that the most important thing for
| | 02:19 | updating this, on a quarterly basis, was
going to be the size of this seasonal
| | 02:25 | plate that will be replaced every four
months, and the designer really favored
| | 02:30 | adding the headline in any other
language right on top of the image so that she
| | 02:35 | could have a full design process.
| | 02:37 | So that was the next iterative change,
and then there were two more important ones.
| | 02:43 | Once we got down to four navigation
elements, the designers said, "I'd like to
| | 02:48 | move those out of the way
and create more white space."
| | 02:52 | And white space is a design term
that basically means open space.
| | 02:56 | And the suggestion came back like this.
| | 02:59 | Let's move it up and to the right.
| | 03:02 | Let's eliminate any lines around it.
| | 03:10 | Let's take it down slightly smaller -
Command+Minus to make the text smaller.
| | 03:16 | And then make sure to use the corners,
not the edges of the table, but the
| | 03:21 | corners, for resizing.
| | 03:22 | And this is a different, but
important, design change to the navigation.
| | 03:28 | I like when designers speak up and
make suggestions, because I'm liking
| | 03:31 | this better and better.
| | 03:33 | And at this point in wireframing,
you want input from different voices
| | 03:37 | because they'll come up with different
ideas, especially design and marketing
| | 03:41 | and content voices.
| | 03:42 | You want to have this discussion.
| | 03:44 | So we were having this discussion, and
we step back and looked at it, and we
| | 03:48 | were nodding yes, we like this, and then the
designer said one more thing that I loved.
| | 03:53 | She asked me, "Could we just extend the
image all the way up to the top, so that I
| | 03:59 | have this entire area to play
with for my seasonal design?"
| | 04:05 | And I said, "Yes, I think that's a
wonderful idea, and all we have to worry about
| | 04:10 | is that our navigation can still
appear on top of that, and that you incorporate a
| | 04:15 | logo into every design."
| | 04:18 | And the designer said, "Yes, this
is exactly how I'd like to work.
| | 04:21 | This means that every three months, I
can design this big plate and give the
| | 04:26 | site a different look."
| | 04:27 | And this is where we really
landed in our iterative process.
| | 04:31 | I think you can see from this that
iterating the wireframe is not a trivial step.
| | 04:36 | This is fundamentally
different from where we started.
| | 04:39 | We have the same elements, but
they've been massaged, and they're closer to
| | 04:44 | being ready to go to a design phase.
| | 04:46 | In this process, it was important
voices from other team members that helped me
| | 04:51 | reach the point where we
can finalize the wireframe.
| | Collapse this transcript |
| Adding comments| 00:00 | One of the nice things about
information architecture is that the rules aren't
| | 00:04 | very strict, and very rarely are
communication tools taken off the table.
| | 00:10 | So, while wireframing is primarily a
visual mode of communication, it doesn't
| | 00:15 | mean that you can't tell
people things when you need to.
| | 00:18 | It doesn't mean that you can't
write a little note or a comment.
| | 00:22 | And that's what this movie is about:
putting comments on a wireframe.
| | 00:26 | So here I am with a, more or
less, complete wireframe.
| | 00:30 | And the wireframing is done, but I
just want to put a little note, so that the
| | 00:35 | people who read it will
understand exactly how one part works.
| | 00:39 | I also have my wireframe stencil open, and
it includes this little blue box for notes.
| | 00:46 | And I'm going to go ahead and use that, just
going to pull it out right there to use it.
| | 00:51 | Now a couple thoughts about that.
| | 00:53 | First of all, you don't
need to use a stenciled note.
| | 00:57 | You can design something
that just works for you.
| | 00:59 | It's not a very complicated shape.
| | 01:02 | Second of all, obviously, it's blue,
and this is one of the exceptions to the
| | 01:06 | rule about no colors on a wireframe.
| | 01:09 | In fact, I think it really helps to
use a light blue or a light yellow color,
| | 01:14 | colors that are sort of evocative of
post-it notes, because I think this sets
| | 01:18 | off the note, because what you want to avoid is
confusion between what is a note and what
| | 01:24 | is part of the content.
| | 01:25 | So this works really pretty well for me,
and I'll just type in the content of my
| | 01:30 | note, and you always want to
be clear and concise about this.
| | 01:32 | That's what I want to say, that the
seasonal promotion changes four times a
| | 01:46 | year, and no reason for more space than I need
there, give it just enough room to breath, great.
| | 01:55 | And I like to place this in proximity
to what the note is about, in this case
| | 02:02 | that's the headline, the
subhead, and also the image.
| | 02:06 | And I don't like to leave it somewhere where
it looks like it could be part of the content.
| | 02:10 | I actually like to offset it, so maybe
it overlaps with the edge of the browser
| | 02:16 | frame, further indicating that this is
not part of the design of the wireframe,
| | 02:22 | but just a note meant to set it off.
| | 02:24 | We can go little further down to be in
close proximity to the headline. Yup!
| | 02:29 | That's looking pretty good to me.
| | 02:32 | Remember, adding comments to your
wireframe is perfectly permissible.
| | 02:36 | Just do it in a way where it won't
interfere with the content, or it can cause
| | 02:41 | confusion between what is
content and what is a note.
| | 02:45 | Always be clear and concise when you write
these notes, and don't overuse this technique.
| | 02:50 | If you find yourself putting notes all
over your wireframe, it's probably an
| | 02:55 | indication that you haven't wireframed
it well enough, because you shouldn't need
| | 02:58 | to note every little detail.
| | Collapse this transcript |
|
|
5. Completing the Wireframing ProcessConverting a homepage wireframe into a template| 00:00 | Wireframing requires that we diagram
every major page type for our web site,
| | 00:06 | but many of these pages
will have elements in common.
| | 00:10 | This movie is about how you create a
template from the elements that will be on
| | 00:14 | every page, so you can reuse the parts
that you don't need to change, and not
| | 00:20 | have to rebuild them.
| | 00:21 | Let's see how it works.
| | 00:22 | I am starting with the complete
wireframe here, and a number of elements are
| | 00:27 | locked, like the background.
| | 00:29 | But there are also elements that I
put on top of that background to make
| | 00:32 | the homepage wireframe.
| | 00:34 | What I want to do now is to determine
which of these elements will be persistent
| | 00:40 | on every page of my
wireframe and which ones will change.
| | 00:44 | Anything that's going to change I am
going to get rid of it for now, and just
| | 00:48 | save the things that will
be on each and every page.
| | 00:52 | I want to point out that at this point,
if I was in a regular process, I would
| | 00:57 | do a File > Save As.
| | 00:59 | What I mean by that is if this is
your finalized homepage, you don't want to
| | 01:03 | start stripping elements off of it.
| | 01:05 | You would want to save it with the
informative name that has template in the name.
| | 01:09 | I've already done that.
| | 01:11 | This is the one I am going to strip
down for my template, but you want to
| | 01:15 | remember it in your own work.
| | 01:17 | Now, I'm going to determine which
elements are going to be persistent.
| | 01:22 | I know that every page is going to
have this persistent navigation, so I am
| | 01:27 | going to select the navigation bar,
and the only other completely persistent
| | 01:31 | element is the logo.
| | 01:32 | So, I am going to hold Command, and
I am going to select that as well.
| | 01:37 | With the two persistent elements
selected - and I'm not counting the background
| | 01:41 | because that was locked in earlier -
| | 01:43 | I'm going to use the Lock
button to lock those two.
| | 01:47 | So, now not only is the background locked,
but so is the navigation and the logo.
| | 01:54 | The rest of making this
template is really quick and easy.
| | 01:57 | I am going to use Command+A to select
all, and I notice that this got selected
| | 02:03 | in blue, not the locked purple color.
| | 02:06 | So, I do want to maintain my title,
so I am going to lock that as well.
| | 02:11 | Now, I can select all. Everything I
want to maintain is in purple, everything
| | 02:17 | I want to get rid of is in blue, and
one stroke of the Delete key, everything
| | 02:23 | not locked is gone.
| | 02:25 | In this movie, I've taken a complete
homepage, and I've stripped away all of the
| | 02:29 | elements that make it all homepage down
to the elements that will be persistent
| | 02:34 | for every page of this site,
| | 02:36 | making this a new template that I can
now start to build on top for the other
| | 02:41 | page wireframes that I need.
| | Collapse this transcript |
| Using layers to organize your wireframe| 00:00 | Like a lot of software, OmniGraffle
has a Layers feature that helps us to
| | 00:05 | organize our content on the page.
| | 00:08 | In this movie, we are going to see
how to apply layers to wireframing.
| | 00:13 | I'm starting here with a wireframe template.
| | 00:16 | It has my background, my logo, and my
persistent navigation that have all been
| | 00:21 | defined from earlier stages.
| | 00:23 | I want to start to build on top of this
an additional wireframe elements, but I
| | 00:28 | want to use layers to organize that.
| | 00:31 | The first step is to hit the
Canvases button here, which will reveal the
| | 00:36 | Canvases sidebar, which is
also where we find layers.
| | 00:39 | There it is, and we see that we have
only one canvas, which is sort of like a
| | 00:43 | page, with only one layer.
| | 00:46 | Because this layer already contains
all of our background, I'm going to
| | 00:50 | double-click it, and I want to
name the layer BG, for background.
| | 00:56 | Additionally, I want to lock the whole
layer because there's really no reason
| | 01:01 | that these elements will change at all.
| | 01:03 | I've probably locked all of the
individual elements already, so maybe this
| | 01:07 | is redundant, but that doesn't matter.
Locking, the layer is actually more important.
| | 01:13 | Now I've locked it, and you see the
little line through the pencil tells me it
| | 01:16 | cannot be written on.
| | 01:19 | Next, I want a new layer, and this
layer is going to be for my content elements.
| | 01:24 | Down at the bottom of the
Canvases sidebar, I click New layer.
| | 01:27 | I am going to name this layer Content.
| | 01:34 | With the Content layer active - and
I know it's active because I have a
| | 01:38 | little pencil there -
| | 01:39 | I am going to pull out some Content element.
| | 01:42 | Now, I know the look of these content
elements from the earlier work I've done,
| | 01:46 | but I am wireframing a new page so I
am just going to get some elements out
| | 01:50 | there, and this time they are
going to be on the right layer.
| | 01:53 | That's the look I use for pictures, for
headline, body copy - that's enough for now.
| | 02:00 | In a more complex wireframe, I might
open the wireframe that's already been made
| | 02:05 | and copy and paste elements, if they
have been customized heavily, and I don't
| | 02:09 | want to redo that work.
| | 02:10 | But for right now that's enough, and
they're all on their own layer so they're
| | 02:15 | not going to interfere with the other
elements that are in the background.
| | 02:19 | I want one more layer to work
with, and that's for my comments.
| | 02:22 | So, I am going to make one more layer,
and I am going to call this one comments.
| | 02:30 | I don't really have a comment to make.
| | 02:32 | I am just preparing for later.
| | 02:34 | So, I am just going to drag out the
look of my comment note and kind of put it
| | 02:39 | down out of the way.
| | 02:40 | I am not going to write anything in it, and
then I'm actually going to turn this layer off.
| | 02:44 | So it's just going to be
there for later when I need it.
| | 02:48 | That's the whole setup, and it
starts to get you thinking about layers.
| | 02:52 | I've named them, and I've organized them
for BG, Content and comments.
| | 02:57 | I've also turned comments off, and
that's very useful. Even when you have
| | 03:01 | comments on your document, real comments,
| | 03:04 | sometimes you want to turn them
off so they're not distracting.
| | 03:08 | As your wireframes grow more
complex, layers are a valuable feature for
| | 03:13 | organizing these documents.
| | 03:15 | In this example, I have three layers,
but in a complicated wireframe, you
| | 03:19 | might actually have more.
| | 03:21 | I encourage you to use layers
because they bring another level of
| | 03:25 | organization to your diagrams.
| | Collapse this transcript |
| Using canvases for multiple related wireframes| 00:00 | Canvases are OmniGraffle's word for pages.
| | 00:04 | It's just a way to take your document
and divide it up into multiple pages
| | 00:09 | that can hold content.
| | 00:11 | This is particularly useful for
wireframes because it almost always requires
| | 00:16 | multiple wireframes in order to
fully describe the pages in a web site.
| | 00:21 | In this movie, we'll see how
to apply canvases to wireframes.
| | 00:25 | I'm starting with a complete homepage
wireframe, and it's been broken out into a
| | 00:30 | few layers for Comments,
Content and then the BG.
| | 00:35 | In order to convert this into multiple
canvases for multiple wireframes, I'm
| | 00:40 | actually going to start
by creating a shared layer.
| | 00:43 | The shared layer is going to allow me
to have the background elements on every
| | 00:48 | canvas and have it being shared such
that if I make a change in one place it
| | 00:53 | populates to the other canvases.
| | 00:54 | I am going to start by just
making a New Shared layer.
| | 00:58 | I am going to call this Background.
| | 01:04 | It will be the background, and that
differentiates it from the BG layer.
| | 01:08 | But eventually, we are going to just
eliminate the BG layer and only have Background.
| | 01:13 | Now, I'm going to turn off the Content
layer, and that's just going to make it
| | 01:17 | easier to select the things in the
background that we want to be shared.
| | 01:22 | Now, I can select everything here, and I
want to make sure it has a blue outline,
| | 01:27 | not purple, which would indicate locked.
| | 01:29 | Now, I am actually going to Cut all
these elements, but only so I can paste them
| | 01:35 | on to the new shared layer.
| | 01:39 | Now, with the new shared layer
active, I'm going to paste them.
| | 01:45 | Okay, there's all of the elements, and
you can see the highlight is now orange,
| | 01:49 | indicating they are on a shared layer.
| | 01:52 | Now, I can eliminate the BG
layer, just by going Delete layer.
| | 01:59 | Okay, those are our preliminary steps
with the layers, and now I am going to
| | 02:03 | turn the Content layer back on.
| | 02:05 | I am going to duplicate the Home canvas
to start making our wireframes for the
| | 02:11 | other page types. Duplicate Canvas.
| | 02:16 | The new canvas is not Home 2; it's
going to be a submenu. And for the moment, it
| | 02:24 | still looks like a homepage, but
we will do that work in the future.
| | 02:27 | One more, duplicate, and
this one is for Content page.
| | 02:37 | So, we definitely still have some work
in front of us to actually make this a
| | 02:41 | submenu wireframe and actually
make this a Content Page wireframe.
| | 02:46 | But for now I just want to demonstrate
the effectiveness of the shared layer.
| | 02:51 | Here I have the shared
background, on all three canvases.
| | 02:55 | If I needed to change something, and
here's a really common change, a new version,
| | 03:03 | now, I've got version 2.0, and
I've got it on each and every canvas.
| | 03:10 | I think you can see that dividing an
OmniGraffle document into multiple canvases
| | 03:15 | that function like pages is
very useful for wireframing.
| | 03:20 | It lets you makes the multiple
wireframes that you need and have them be
| | 03:24 | separate but also still exist in one document.
| | 03:28 | The added advantage of shared layers
means that a change that you put on one
| | 03:33 | canvas will populate through the other ones.
| | Collapse this transcript |
| Adding pixel dimensions| 00:00 | There is one important place where the
work of wireframing meets right up with
| | 00:05 | the work of designing and the work of
coding in a really tangible way, and it's
| | 00:10 | the actual pixel dimensions
of the elements on the page.
| | 00:14 | Now, different shops have
different systems for this,
| | 00:18 | but in a lot of places one of the last
things you do on a wireframe is denote
| | 00:23 | all of the important measurements
that the designer will use later.
| | 00:28 | These are measurements of what is on
the screen, and they must be expressed in
| | 00:33 | pixels, so they become pixel dimensions.
| | 00:36 | Don't try to do them in inches or
centimeters, because that's just simply not relevant.
| | 00:41 | I am starting with a
finished wireframe of a homepage.
| | 00:45 | It's all done, and all the elements
should be locked. Let's just check.
| | 00:49 | Yup, the little Xs tell us that they are locked.
| | 00:52 | That's important, because we might have
to do some work over top of them, and we
| | 00:55 | don't want to interfere with anything.
| | 00:57 | The idea of pixel dimensions is that
important aspects in the layout will
| | 01:03 | actually get denoted with
dimensions right on the document.
| | 01:06 | I am going to start with the height
of this image, because I know that the
| | 01:10 | designer is going to have to frequently
replace this image plate, and the exact
| | 01:15 | size of that is going to be important.
| | 01:17 | I am going to get the Line tool, single
use, just one click, and I am going to
| | 01:23 | click once at the top of this, and then
I am going to hold Shift, because that's
| | 01:27 | going to keep me vertically locked as I
go straight down, and you see I actually
| | 01:31 | get a snapping line at the bottom.
| | 01:33 | Now I am going to double-click, and I
need to double-click to end the line,
| | 01:37 | because it's not attached to anything.
| | 01:40 | There we go, now I have a stand-
alone line, and I need to style it.
| | 01:44 | It's already measuring, or stretched out
to indicate the dimension I want, which
| | 01:49 | was from here there, but it doesn't
look how I want it to look, and part of
| | 01:53 | that is the end points.
| | 01:54 | I need to use a specialized end point.
| | 01:57 | So up in my Lines and Shapes Inspector, I
am going to pull down the end point, and
| | 02:04 | this is the one I want. It's all the way down here.
| | 02:08 | There it is, with the little line and the arrow.
| | 02:10 | We will take a better
look after I designate both.
| | 02:17 | Now you can see those,
but they are not very big.
| | 02:20 | This kind of line ending is always used
for this type of dimension measurement.
| | 02:26 | It really indicates that this line is a
measurement, from here to there, and that
| | 02:32 | is exactly what we want.
| | 02:34 | I do want to style it a little further.
| | 02:36 | So if I select the line, I'd rather it
was thinner, because I don't want it to
| | 02:40 | interfere with the heavier lines that
are actually part of the wireframe, and
| | 02:43 | then when I do that you see that
the arrows get very, very small.
| | 02:48 | The reason for that is that the arrows are
expressed as a percentage of the line width.
| | 02:54 | So as I make the line thinner, I make the
arrows smaller, but I don't actually want to.
| | 02:58 | So let's beef that up to 250%, and
that's pretty much the look I want.
| | 03:05 | I am missing one really important
thing, which is what is the actual
| | 03:10 | measurement? And to add
that, I need a Line Label.
| | 03:12 | I am going to click once on the Text
tool, and then with the Text tool, I click
| | 03:17 | once on the line, giving me a special
type of text element, called a line label.
| | 03:23 | In this case I just want to designate
that the height is going to be 380 pixels.
| | 03:31 | That looks pretty good to me. Maybe the
text is a little large. So one click and
| | 03:35 | the same shortcuts work, Command+Minus
to make it seem to go with the size of
| | 03:40 | the line, and then it's interfering with
the wireframe, so I am just going to grab
| | 03:44 | the whole line, and I am going to use
the arrow key to nudge it to the right,
| | 03:49 | until it stops interfering.
| | 03:51 | Adding pixel dimensions is not a
necessary step 100% of the time,
| | 03:57 | but if you are in a specific process
that requires that you put these dimensions
| | 04:02 | on your wireframe, you do want to use
the conventions here, including this style
| | 04:07 | of line head and making these light
enough and small enough so they don't
| | 04:12 | interfere with the wireframe itself.
| | 04:14 | It's also a good idea to put these on
their own layer, so you can turn them
| | 04:18 | on and off again.
| | Collapse this transcript |
| Wireframing a multistep process| 00:00 | These days a lot of web sites have
multi-step processes that require a user to
| | 00:07 | go through a set of steps.
| | 00:09 | Clear examples would be signing up
for a new account, or making an online
| | 00:13 | purchase. When faced with a challenge
like this in wireframing, it's often a
| | 00:18 | good idea to sketch out each step in
the process so that other team members
| | 00:23 | will have a really clear guide as to how
this is going to look and work for the end user.
| | 00:29 | In this movie, we will see how to do just that.
| | 00:32 | The idea here is we are now in
the process of buying a flower
| | 00:37 | arrangement online.
| | 00:40 | This wireframe indicates step 1, and
the canvas is called Online Purchase 1.
| | 00:46 | Step 1 is selecting the arrangement, and
down here I have wireframe elements that
| | 00:52 | indicate there will be a picture of
each arrangement and a short description.
| | 00:56 | The next step is I often find that the
user benefits from knowing where they
| | 01:02 | are in the process.
| | 01:04 | So I am going to wireframe the steps
themselves for the user to know where
| | 01:09 | they are in the process.
| | 01:11 | For the wireframe, I am just going to
do this with text, even though there will
| | 01:14 | probably be some design work that
comes later to make it look good.
| | 01:17 | I am going to select the Text tool, and
right below select arrangement, I am going
| | 01:23 | to type STEP, and then I am putting
multiple spaces in between these, just to
| | 01:33 | have them spread out.
| | 01:39 | Okay, that is the beginning, and I
want this to be just a little heavier in
| | 01:44 | weight, so that it feels like
it's really part of this heading.
| | 01:47 | So I am going to select it and use
the keyboard Command+Plus to size it up,
| | 01:53 | Command+B for bold, position so it's sort
of right in association with the headline, and
| | 02:01 | then I like to lighten it to a gray
color, so I am going to go up into my Text
| | 02:05 | palette > Colors and just make this a
little lighter in color, which will make it
| | 02:11 | a little lighter in weight. Maybe
something like that or right there.
| | 02:16 | I don't want this be too noticeable, but
just a little different than what comes
| | 02:19 | above it. And in addition, I am going
to leave my color palette up, because I
| | 02:24 | also like to use colors.
| | 02:25 | I am saying colors to really mean
grayscale colors on my wireframe.
| | 02:30 | I also like to indicate which step is active,
so as Step 1, and turn the one back to black.
| | 02:37 | Now we are really starting
to indicate my intention here.
| | 02:40 | It doesn't have to look fancy, but we
need everyone to understand that this is
| | 02:44 | an indicator for the user
going through these steps.
| | 02:49 | This is looking good to me, and now I
want to duplicate the canvas itself so
| | 02:54 | that I can start to make the other steps.
| | 02:57 | Select the canvas and duplicate it.
| | 03:00 | I want to look at all of the layers, and
the first I want to do on my new canvas
| | 03:07 | is simply to make this STEP 2.
| | 03:10 | So that means I need the 1 to go back to the
gray color, select the 2, and make it black.
| | 03:18 | Secondly, Step 2 is not select
arrangement, but Step 2 is designing the bouquet.
| | 03:26 | Likely, I'm going to have some more
choices down here as well, and they are
| | 03:30 | going to be more visual for the bouquet
designs, so I am going to eliminate some
| | 03:34 | of the text, and I am going to be left
with six thumbnail images, which are in
| | 03:44 | fact buttons for different bouquet designs.
| | 03:47 | So this is step 2 of my process.
| | 03:50 | Steps 3 and 4 look pretty much the same.
| | 03:54 | We duplicate the canvas,
| | 03:56 | make sure to change the number and the
headline, and then just wireframe the user
| | 04:02 | interaction that is
going to happen at this step.
| | 04:05 | Sometimes we need a Submit button, at
times we might need a form to put in here,
| | 04:10 | whatever it is that the user is going to do.
| | 04:12 | We are creating a guide so that the
designers and programmers can imagine this
| | 04:17 | whole process while they
are designing and coding it.
| | 04:20 | In today's worldwide web, multi-
step processes are everywhere.
| | 04:25 | It's the rarity that we see a static
web page that just displays information.
| | 04:31 | Much more frequently, users
are interacting with web sites.
| | 04:35 | So when the concept is a multi-step
process, the wireframing approach should be
| | 04:41 | to get in there with the details
and wireframe this whole process.
| | Collapse this transcript |
| Wireframing for mobile devices| 00:00 | These days a lot of people don't
use a computer at all to surf the web.
| | 00:05 | They just use their
phone or their mobile device.
| | 00:08 | So for wireframing, we need to think
about diagramming for these new devices,
| | 00:13 | and that's what this movie is about.
| | 00:16 | I'm starting here with a blank canvas.
| | 00:18 | All I've done is changed it to
landscape mode, a little wider than it is high.
| | 00:22 | That will give me the space I need to do this
type of wireframing in the way I like to do it.
| | 00:27 | The next step is to shop for the stencil I need.
| | 00:30 | I'm going to do that in the
Stencils palette and the search box.
| | 00:35 | I need to make sure that this is set to
Graffletopia, which is where I shop for stencils.
| | 00:40 | Now I'm going to pick a search term,
and I could pick mobile, but I actually
| | 00:44 | think I'll get more
results if I use the term iPhone.
| | 00:48 | So now I've searched online, and I have
several choices for an iPhone stencil.
| | 00:55 | I'm going to try this one.
| | 00:58 | I can only see it really small, so I'm going to
go ahead and download it to get a better look.
| | 01:03 | That looks good to me.
| | 01:04 | It has all the pieces and parts that I
think I'll need to do this wireframe.
| | 01:09 | Because I want to use it, I'm going to
go ahead and install, but in no way am I
| | 01:13 | might paint it into a corner.
| | 01:15 | If there's something I need down the
road that's not here, I can either build it
| | 01:19 | myself or look at additional stencils.
| | 01:21 | There's no problem mixing and matching.
| | 01:24 | Now to get started, I'm going to drag
this iPhone frame out onto the canvas.
| | 01:29 | It's a little big to me.
| | 01:31 | Now what I'm going to do is scale it down,
because I like to actually fit two on this page.
| | 01:38 | I think that it's a little silly to
make a mobile wireframe a whole page big,
| | 01:43 | because in the real-world, it's not that big.
| | 01:46 | I think that's going to be mis-informative.
| | 01:49 | So I need to make two.
I'm going to Option+Drag to create the other.
| | 01:53 | If I hold Shift, it won't move
up and down, and I'll keep them
| | 01:57 | vertically aligned. There we go.
| | 02:00 | Two frames, which will let me have
plenty of space around them if I need any
| | 02:04 | notations, or things of that sort.
| | 02:07 | Now I actually want to give them
two separate names, so I know what I'm
| | 02:10 | wireframing at each place.
| | 02:13 | In the first instance,
I'm going to wireframe Home.
| | 02:17 | That's a little small to be a title,
so keyboard commands, Command+Plus
| | 02:23 | and Command+B for bold.
| | 02:27 | That's looking like a good title.
| | 02:29 | I'm going to Option+Drag it over here.
| | 02:32 | If you see the way I'm using this
snapping, nothing even comes out of alignment,
| | 02:36 | and so I don't even have to
worry about aligning it later.
| | 02:40 | This one is called Choose City.
| | 02:45 | These are going to be the first two
wireframes for my mobile application to
| | 02:50 | order flowers online.
| | 02:53 | My Home state is really just going to
have the logo of the flower store, so I
| | 02:58 | need to import that.
| | 02:59 | That's easy: File > Place Image,
| | 03:03 | find the image that I want, open it,
| | 03:07 | then I always hold Shift when I scale
something, especially a logo, because we
| | 03:12 | want it to look all perfect.
| | 03:18 | That's step 1 of my wireframe.
| | 03:20 | Step 2 of my wireframe - and we do
need to keep in mind that that with
| | 03:24 | less screen real estate, we need more
separate screens, and therefore more
| | 03:29 | separate wireframes.
| | 03:31 | For Choose City, I just need to
get a picker out of my stencil.
| | 03:37 | I'm going to allow this box to resize
pretty liberally, so it fits in there.
| | 03:48 | Then I'm going to put some cities in
here, so it makes a little more sense.
| | 03:57 | The text is a little big, but that's no problem.
| | 04:05 | Now we have our next wireframe.
| | 04:08 | Remember, unlike a web page, it's
really typical to only have one function per
| | 04:14 | screen on a mobile device.
| | 04:16 | From here, we just continue the process.
| | 04:19 | We're going to need more pages,
and each page will have two screens.
| | 04:24 | When wireframing for mobile devices,
| | 04:27 | a lot is similar, but there is
a few things to keep in mind.
| | 04:30 | First, shop for a good stencil that's really
going to fit the look of what you're doing.
| | 04:36 | It's going to make everything about your
wireframe just look and feel more realistic.
| | 04:41 | Second, be liberal with multiple wireframes.
| | 04:45 | A mobile device has less screen real
estate than a computer, and designing for
| | 04:50 | mobile devices requires thinking
about all of the steps and stages that are
| | 04:55 | going to reach your interactive goal.
| | Collapse this transcript |
| Presenting wireframes| 00:00 | A big part of information
architecture is presenting your ideas.
| | 00:05 | Your wireframes are really not that
effective if you're the only one who looks
| | 00:09 | at, or understands, them.
| | 00:11 | So sharing these with other people
is absolutely part of the process.
| | 00:16 | OmniGraffle has several good
tools for presenting your work.
| | 00:21 | There's a full selection of print
choices that are pretty typical for any
| | 00:26 | program that prints.
| | 00:27 | You can also export your wireframes as
images that will allow them to come into
| | 00:32 | other presentation programs like Keynote
or PowerPoint. But OmniGraffle also has
| | 00:39 | its own Presentation mode, and
that's what I want to focus right now.
| | 00:43 | I've got a completed wireframe here,
and you can see that it has multiple
| | 00:48 | canvases: Home, Sub menu and a Content Page.
| | 00:53 | To initiate Presentation mode, I
just go View > Start Presentation, or the
| | 01:00 | keyboard shortcut is
Option+Command+P. Now I'm in Presentation mode.
| | 01:07 | You can see I fill up the screen, but
more than that, I can advance through
| | 01:12 | the canvases using the Spacebar. So that's
my Sub menu page, and that's my Content Page.
| | 01:19 | Also available to me is a highlight
function, where anything I mouse over
| | 01:24 | will get a highlight.
| | 01:26 | So if I want to move around and say
each page will have a key image, I can
| | 01:30 | highlight what I'm talking about.
| | 01:32 | Each page will have an informative headline.
| | 01:35 | I can highlight it.
| | 01:36 | I'm going to move out of this for a
second and just show the preferences
| | 01:41 | associated with Presentation mode, so you
can fine-tune the way this looks for you.
| | 01:47 | I'm going to open Preferences, and
then here are my Presentation Preferences.
| | 01:54 | They're in the middle of the five panes.
| | 01:57 | So I have a choice between
highlighting objects by pointing - that's what was
| | 02:01 | just happening where everything
| | 02:03 | I rolled over got highlighted - or maybe
I need to click them for a highlight, or
| | 02:09 | I can turn off highlighting
altogether, if I don't like it.
| | 02:13 | I also can decide exactly
the color of that highlight,
| | 02:16 | so if I prefer yellow instead of
pink, and how thick is that highlight.
| | 02:22 | So you'll notice it was
really pretty heavy, the highlight.
| | 02:26 | So if I put in those preferences,
and then I again initiate Presentation
| | 02:32 | mode, everything is the same, except
the highlight is maybe a little more
| | 02:37 | attractive, or to my liking.
| | 02:40 | Presentation mode in OmniGraffle
probably doesn't replace Keynote or PowerPoint
| | 02:46 | for all of your presentations, but in
the event that you're really presenting
| | 02:50 | something that you built inside
OmniGraffle, especially a wireframe with
| | 02:54 | multiple pages, Presentation mode
can be really effective because you can
| | 02:59 | advance through your pages, and you
can also use the highlight function to
| | 03:03 | indicate what you're talking about, when.
| | Collapse this transcript |
|
|
6. Advanced TechniquesEnhancing diagrams with interactivity| 00:00 | Actions are
OmniGraffle's word for interactivity.
| | 00:04 | It's a way of making objects clickable
and different things, or actions, to happen
| | 00:10 | when that object is clicked.
| | 00:13 | This is not a traditional way of doing
information architecture, but when you
| | 00:17 | have the opportunity, adding a little
bit of interactivity with an action can
| | 00:22 | really add something interesting to
your diagrams. Let's take a look.
| | 00:27 | I'm starting with a complete sitemap here,
but there is a feature that's not indicated.
| | 00:33 | It's the idea that there is
a booking process for events.
| | 00:38 | And there is a layer here
called Detail, but it's turned off.
| | 00:42 | So I'm going to turn it on
so you can see. There we go.
| | 00:46 | That's the extra bit of content that
we have Events Booking, and that this
| | 00:51 | is reachable from the Contact page as well
as any of the pages in the Events section.
| | 00:57 | It's also important, and worth
discussion in meetings, because the client has
| | 01:01 | indicated that getting more people to book
events online is a goal of this web site.
| | 01:07 | So when I reach this point in my presentation,
I really want to talk about it in detail.
| | 01:13 | To help set it off in that way, I'm
going to use an action so that when I
| | 01:17 | introduce the concept it's
going to be really dramatic.
| | 01:21 | Here's how it works, technically.
| | 01:23 | I'm going to select the Contact page,
because that's what I want to use as the
| | 01:28 | button to activate this
layer that has Events Booking.
| | 01:33 | Now I'm going to go to the Action Inspector.
| | 01:36 | It's in the Properties section,
and it's the third one over.
| | 01:40 | That's the button, if it's not active.
| | 01:42 | You see that currently clicking with
the Browse tool - and we'll look at the
| | 01:47 | Browse tool in a second - does nothing.
| | 01:49 | I want to change that to clicking with
the Browse tool shows or hides layers.
| | 01:55 | The layer I want to show or hide is
the detail layer, and what I want to do
| | 02:00 | with it is to toggle it.
| | 02:02 | And toggle means that it won't just
show or hide; multiple clicks will turn
| | 02:08 | it on and off again.
| | 02:09 | So I'm going to switch it to Toggle.
| | 02:11 | I've now built my action, but to
test it I need a special tool that we
| | 02:17 | haven't seen before.
| | 02:19 | It's actually in the Extended Tool palette.
| | 02:21 | So I need to click my divider here.
That gives me some more tools to work with,
| | 02:27 | including the Action Browse tool.
| | 02:30 | So I select the Action Browse tool.
| | 02:32 | I'm going to click it again, because I want
persistent use, not just single use with the one.
| | 02:37 | Now, I have persistent use, and I
can see if my action is working.
| | 02:42 | The first good indicator is when I
roll over, I get the big badge. That's telling
| | 02:47 | me there's an action here.
| | 02:51 | Sure enough, with multiple clicks, I
can now turn my layer on and off again.
| | 02:57 | So that's effective, and it's what I
want, but I also need to be able to use
| | 03:02 | this when presenting the work.
| | 03:04 | So I want to check this in
Presentation mode. That's easy.
| | 03:08 | I can just go View > Start Presentation.
| | 03:13 | There it is, and my
highlight and my badge come up.
| | 03:16 | I can change that in the Preferences
if I want this to be more undercover.
| | 03:21 | So I can turn the highlight off, so
when I click it, the action just happens.
| | 03:25 | And sure enough, I can toggle.
| | 03:29 | Let's go back and tweak it, so it's
just perfect, exactly what I want.
| | 03:33 | So to have exactly what I want, I
really want to start with it off to create
| | 03:37 | that sense of drama.
| | 03:38 | And then if I go to the Preferences, I'm
going to turn off Highlights, because I
| | 03:44 | think that gives away the trick.
| | 03:46 | So now with that reset, let's try it
one more time. Start Presentation, and now
| | 03:52 | I'm going to be talking along, and
I'm going to say something that would be
| | 03:56 | really dramatic like, "but
we've added a new feature."
| | 03:59 | And then when I click, I'm going to
talk about this new exciting feature that I
| | 04:04 | know my client is primed to hear about.
| | 04:08 | Actions may not be a traditional
element of information architecture, but I
| | 04:13 | think if you use them sparingly and
really think about their purpose, especially
| | 04:18 | in the context of presentations, they
can really add a bit of flair to your work
| | 04:24 | on sitemaps and wireframes.
| | Collapse this transcript |
| Creating a custom wireframing stencil| 00:00 | We've seen how useful OmniGraffle
stencils are for the jobs of wireframing and
| | 00:05 | sitemapping, but what if you want all
the convenience and consistency of a
| | 00:10 | stencil, but you want to use
objects that you've customized?
| | 00:15 | Well the answer to that question is
just to save your own customized stencil,
| | 00:19 | and I'm going to show you how in this movie.
| | 00:22 | I have a document open that has several
objects that are custom to the work I've
| | 00:27 | been doing for this client.
| | 00:29 | I've got their logo available, and
I've devised a couple of ways to stack
| | 00:33 | multiple items, and also a
couple of custom database icons.
| | 00:38 | So these were all things that I want to reuse
for a sitemaps and all across this organization.
| | 00:44 | So I want to make them into a custom
stencil, so they will be available to
| | 00:48 | myself, and I can share them with others.
| | 00:51 | To do that, I have to go up to
File > New Resource > New Stencil.
| | 00:57 | As you see, that's a new document, and
the only real difference at this point is
| | 01:01 | it says Stencil up here.
| | 01:03 | It's also unsaved at this point.
| | 01:05 | I'm going to select everything in this
regular OmniGraffle document, copy, move
| | 01:13 | over to the new stencil and paste.
| | 01:17 | You could just start building your
stencil items on your new stencil as
| | 01:21 | well, but it was quicker for me to
build them in a different document and
| | 01:24 | copy and paste them.
| | 01:26 | Now, there's really only one more
step, which is to save the new stencil.
| | 01:29 | And that's just File > Save, but
something special is going to happen
| | 01:33 | because it is a stencil.
| | 01:36 | I can give it a name, and notice that
it's automatically going to be saved in
| | 01:42 | this location:
Library/Application Support/OmniGraffle/Stencils.
| | 01:48 | That's important because it's that
location that's going to make it available
| | 01:51 | to me as a regular stencil. Now, click Save.
| | 01:59 | I can close the stencil that looks
like a document now because it's actually
| | 02:03 | available to me in the stencil.
| | 02:07 | We can also see it here in Recent
Stencils, and it will always show up in
| | 02:12 | our Stencil Library.
| | 02:15 | As you can see, it's now a live stencil,
already installed, and I can drag things
| | 02:20 | from the stencil area and
make as many of them as I need.
| | 02:24 | Custom stencils are really powerful
| | 02:26 | because they let you have all the
flexibility of a stencil, but not be locked
| | 02:31 | into the graphics that someone else has made.
| | 02:33 | Especially on larger jobs and working
with larger teams, making your own custom
| | 02:38 | stencils is very, very useful.
| | Collapse this transcript |
| Creating a custom sitemap document style| 00:00 | Diagram styles in OmniGraffle are a
great way to style your documents, because
| | 00:05 | they define not only the look of
individual objects, but the hierarchy itself.
| | 00:11 | I want to show you what I mean and
then also how to create custom document
| | 00:15 | styles that are
particularly useful for sitemapping.
| | 00:18 | I'm starting with a blank document,
and at first, I want to use one of the
| | 00:23 | built-in document style, so
you can see how they work.
| | 00:25 | I'm going to go up to Format, and
I'm going to Choose Diagram Style.
| | 00:30 | I'm going to choose the basic one.
| | 00:33 | There are others available, and you see
a lot of them refer org charts and other
| | 00:38 | types of diagrams you might need.
| | 00:40 | I'm going to use the basic one, just
to make an example, so then I can make a
| | 00:44 | custom one for sitemapping.
| | 00:47 | Nothing happened yet, and to really get the
idea of diagram styles, you need the Diagram tool.
| | 00:53 | That's it right there. Mine is
already selected, but if you don't see it at
| | 00:57 | all, you might have to click the divider.
| | 00:59 | So open up the divider and click
twice, because I do want persistent use.
| | 01:04 | The Diagram tool is very much
dependent on the diagram style,
| | 01:08 | because now when I click, I get a shape
that's defined in the style, and I click
| | 01:14 | again, I get a line and a shape,
and it's a child of the original.
| | 01:19 | I can also click the original, click
again for a child, and I'll always get the
| | 01:25 | child of the active shape when I click again.
| | 01:30 | If I click one of the children and I
want a sibling on the same level, not
| | 01:34 | another child, I can hold
Option, and I get a sibling.
| | 01:38 | So you can see two things here.
| | 01:40 | The Diagram tool helps you very
quickly make the style of diagram.
| | 01:46 | But also the style is defined by the
diagram style, and this one is awfully plain.
| | 01:53 | What if we want this convenience of
the diagramming tool, but a diagram style
| | 01:58 | that fits better with the look we want?
| | 02:00 | Well, that's going to take a custom
diagram style, and we start that by File >
| | 02:06 | New Resource > New Diagram Style.
| | 02:11 | This is going to force us to pick one of
the built-in styles to build on top of,
| | 02:16 | and that's no problem.
| | 02:17 | We'll just choose basic again.
| | 02:21 | Now this document looks like an
OmniGraffle document, but really, it's a diagram
| | 02:25 | style that we're building.
| | 02:27 | You can see that at the top.
| | 02:28 | Even though we started with this very
basic look, I don't think we need any of
| | 02:32 | these shapes, so I'm going to delete them.
| | 02:35 | Now I'm going to use my Web Flowchart
stencil to drag out the pieces that I've
| | 02:40 | been using to sitemap, and the
hierarchy that I've been building.
| | 02:45 | So that means the dark blue homepage
is the top of the hierarchy; orange has
| | 02:50 | been used for sub-pages, so that's the
next step of our hierarchy - and I'm going
| | 02:55 | to connect them with a line;
| | 03:01 | and I've also used the light blue as a
Content Page, and then I create two of
| | 03:08 | those, just indicate that
there's often multiple content pages.
| | 03:14 | And you'll also notice that the
objects are rearranging themselves because
| | 03:18 | Automatic Layouts is on.
| | 03:21 | And Automatic Layouts comes on when you
set a document's style. So there we go.
| | 03:27 | I've defined a hierarchy and visual
styles: dark blue at the top, orange is the
| | 03:33 | next step down, and the
children of orange are light blue.
| | 03:37 | And that's the look that I've
really been using for sitemapping.
| | 03:40 | There's only one more step, which is to
save the diagram style, and that's just
| | 03:44 | a normal File > Save;
| | 03:47 | however, it's already assigned to
go to a specific location: Library/
| | 03:52 | Application Support/OmniGraffle/Diagram Styles.
| | 03:56 | That's important if you want to
access it through the palette where you
| | 03:59 | pick diagram styles.
| | 04:02 | Let's call this web sitemap and
save the style. I can close this.
| | 04:12 | It's not important anymore.
| | 04:14 | And I'll return to the document that we started.
| | 04:16 | I'm going to take my Selection
tool and just remove everything.
| | 04:23 | And now I want to set my
diagram style to my new custom one.
| | 04:27 | Format > Choose Diagram Style, and now
if I scroll down, there is my web sitemap.
| | 04:34 | That's the one I want to use.
| | 04:37 | You can see that it's the one that I just built.
| | 04:40 | Once we apply it and return to our
Diagramming tool, now I'm using the
| | 04:45 | Diagramming tool to actually
sitemap in the style I've chosen.
| | 04:49 | First click is the dark blue homepage,
next click is a sub-menu child, and the
| | 04:55 | next click will be a content page.
| | 04:57 | If I need another content page,
click the submenu, and if I need another
| | 05:02 | submenu, I click here and there.
| | 05:06 | I think you can see from this example just
how useful custom diagramming styles are.
| | 05:13 | You can have all of the efficiency and
convenience of the Diagramming tool but
| | 05:18 | still maintaining the specific style
that you've chosen for your sitemap.
| | 05:22 | I encourage you to experiment with
this technique, especially for larger
| | 05:26 | projects and working with larger teams.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you for spending this time with me
building sitemaps and wireframes with OmniGraffle.
| | 00:06 | I think you can see that these
techniques are really effective in solidifying
| | 00:11 | the design of a web site before you
move into the more expensive visual
| | 00:15 | design and coding phases.
| | 00:18 | This is a quickly evolving field, with
room for advancement and creativity.
| | 00:23 | I encourage you to study more about
information architecture theory and also to
| | 00:29 | jump in and try new techniques with OmniGraffle.
| | Collapse this transcript |
|
|
