>> Arjmand Samuel: First some of you that have been working here since December you may
remember Corrina Black. She talked to us about the best practices designing the Windows
Phone applications. Tonight she will tell us and show us how to prototype the first phase of the
Windows Phone apps and good enough. You take it from there.
>> Corrina Black: Okay. Thank you. So I am Corrina Black. I have spoken here before. Was it
way back in December?
>> Arjmand Samuel: I just checked. It was December of 2011
>> Corrina Black: Oh you just checked, okay. That was a while ago. I'm from the Windows
Phone Design Studio and Darlene Wong actually did a presentation last month on the Metro
style design principles so it might be some good background information for you guys. Today
I'm going to talk about prototyping. Prototyping is excellent for Windows Phone applications,
excellent for user testing purposes and stakeholder feedback purposes to make sure that you
are optimizing for the right solution for your users. You can get back feedback, do iterations
quickly, so prototypes are really excellent. I am going to be prototyping in Silverlight using
Expression Blend. Clearly it is going to be a Windows Phone prototype, and let me just start
with a little introductory information. I'm sure you guys all use Silverlight. It is clearly an
application framework for writing and running Windows Phone applications. It creates rich, it's
optimized for rich immersive experiences, rich graphics, rich animations and transitions, rich
media. It is one of the two frameworks available for creating Windows Phone applications.
There is also XNA which is often times used for games, not solely for game development
purposes. Silverlight applications are created in Visual Studio or Expression Blend; correct me if
I'm wrong [laughter]. Both of them are great for creating application experiences and you can
do it from start to finish in either one. Expression Blend, in my opinion, is really optimized for
the design experience, for creating those rich immersive interfaces. Visual Studio is great for
that as well. It does him have additional capabilities that allow you to debug and do
performance analysis and performance testing and optimization of your applications, so it has
some really great functionality as well. Developers are very familiar with Visual Studio
oftentimes and it's optimized also for code editing. I'm going to do the prototype in Expression
Blend. Expression Blend has all of these great features that I've listed here. You'll see more
here in a moment. Project templates, great design surface, XAML editing, I might show a little
bit of code behind if I have time. There are also all of the great SDK controls that you get by
default and you can use the toolkit controls as well, so you can have access to additional
controls, some of that great, to add some of that great experience to your applications, and
functionality. Let's just jump right into this and take a look at the prototype that I'm going to
build. Again, what I'm going to show you is I'm going to create a prototype obviously. You can
also create forward-looking applications using the same process for the most part, so please
keep that in mind. This is the application that we’re going to build. It is a weather application,
optimized for the form factor. On the first screen you're going to see the five-day weather
forecast. It's going to use your current location; you will have to imagine because it is a
prototype to present the weather for your location. There are also alerts, weather alerts for
your current location and imagine the capability of also being able to add additional locales
where you might want to track weather. Let's say you're traveling a lot, you're going to
Amsterdam or New York or LA, it might be nice to include weather details for those locations.
In this prototype I'm not going to cover that, but the experience could be a lot more expansive
than what I'm going to show you. So with that, this is the target UI, let's go ahead and build this
experience, and I am going to try to touch on many of the design principles as I'm working, so
I'll try to call attention to them as I'm working along because we have to keep those in mind
when you are building your prototypes and of course your real experiences, applications that
you're going to deploy to the real world, so you'll see a little bit of that. With that, let's just go
straight to Expression Blend. In Expression Blend there are a variety of project templates. I'm
sure many of you have used it. How many of you haven't used Expression Blend? Oh my gosh,
there are some. All right. This will be good for you. I think I'll have some tips for the rest of
you as well and some things that you might learn and if not, come up and teach me something.
Afterwards I love to learn from you all, but there are a lot of great project templates that are
terrific starting points for your application development. I'm going to start with this empty, this
Windows Phone application template which is essentially empty. There is also a data bound
application template. This one here, which shows how to utilize sample data and to, it will also
demonstrate how to do basic page navigation so it's kind of a nice starting point, a nice learning
point for those purposes. Two of the core application patterns in Windows Phone are
panorama and pivot. There are two templates to get you started in those directions, again,
really useful, and there is also this Windows Phone control library. It's very useful if you want
to create reasonable controls in your applications. Then I have SketchFlow in here, but I'm not
going to talk about that. That's actually a separate application. So with that let's go ahead, I'm
going to name my project for creating a weather application. I'm going to call it Weather Bag. I
like that name. It is again, I'm going to start with the most empty project template of all. It is
the Windows Phone application template. I'm hitting control zero to zoom out. All right so let
me step back to the slide deck real quick. I want to talk a little bit about what we have here.
The application, the core basic application pattern that we're seeing here is a panorama.
Panorama is really optimized for those immersive experiences. Typically you won't see an
application bar. I'm just going to mention a few things here. It's optimized for portrait viewing
and very often you won't see the system tray. On by default, again, immersive experiences
really draw the users in. I'm going to keep that in mind as I get started in Expression Blend
here. The first thing I want to do is I'm going to turn off the system tray and make sure that I'm
viewing the application in portrait mode. I'll talk a little bit about the tool window that I'm
using here and the process that I use is I'm designing and building my applications, and I do it in
a variety of different ways as you'll see in a moment. First thing I'm going to do is I use the
object and timeline tool window quite a bit. I also do XAML and design service split view quite
a bit, because I work interchangeably between the two oftentimes and the property window is
also very essential. It is used very often in Expression Blend. I have all those open. I'm going to
search for system tray. I just type SYS in the search field and I can turn the system tray off as
you can see. The next thing I want to do is search for supported orientations. I type SU and I
get the property for supported orientations. It's already in portrait, so I'm good to go.
>>: Can you talk about the implications of hiding and not hiding the system tray?
>> Corrina Black: The implications?
>>: Yes. Does that mean if I turn it off and I take advantage of the full screen is my app going to
be covered up by system tray if the user brings it down?
>> Corrina Black: Uh-huh, it will. It will drop down over the top of your application, yeah, and
it's the title in the panorama that it would drop down over the top of, and it would be under
the users control, so of course, they want that information it will go away after a period of time,
so I am thinking that it is probably the right experience for users. Again, very often if you look
at our native applications they don't display the system tray by default. Some do; the majority
don't because of that, it's really optimized for that immersive experience. I'm going to go to
full-screen view so you guys can see everything that I'm doing now. The next thing I want to do
is I want to remove the contents of my layout grid because I'm going to drop a panorama
control in there that's going to be the base of my application. One other thing I'm going to do is
in this particular template there are two rows in the grid that you get with the template. I'm
going to remove those. I could do that in the property grid. I actually think it's easier to do that
directly in XAML, so I'm going to do that and get rid of some of the comments. Again, as I
mentioned, I kind of work interchangeably between the design surface and the XAML view. I
am going to go full XAML view again, so I have kind of the clean slate on which to build my
application and now I'm going to drop my panorama in here. I'm going to go over to this asset
library in the tool window and I'm going to type panorama, or pan, and it brings up a panorama
control. I select it and you see it here. I'm going to make sure my layout grid is selected,
double-click to add it to the design surface, right-click to autosize and fill the panorama in the
available space. Now I'm going to name the panorama and get rid of the panorama item
headers because I'm not going to use those in my application if you recall from a PowerPoint
slide deck. To do that, I'm going to delete my search term and go over here, select my
panorama and expand some of these fields so I can see the title, and I'm going to type Weather
Bag, which is the name of my application. Hit tab and the name of my panorama has changed.
I'm going to select each panorama item and delete the header for each and tab away, and as
you can see the header disappears exactly as I want. The next thing that I am going to do is
when I'm working and I would recommend this in objects and timeline tool window which I
oftentimes work with, I name things always so I know what I'm interacting with and working on,
so I'm going to do that. I think it's good practice when you are using Expression Blend, so this
first panorama item is my weather panorama item. The grid inside is my weather grid. The
next panorama item is my alert, not alet. I can spell. The grid is alert grid. Let me just build
real quick so we can see the current state of the application. Very basic right now, but headed
in the right direction. I have my panorama with the proper title, Weather Bag. It's totally
empty. Now we're going to add content and style that content. In Expression Blend what I'm
going to do now is pride and craftsmanship is one of the core Metro style design principles and
use of our grids; Windows 8 has a specific grade that they use. Windows Phone also has a
specific grid. I'm going to bring in that grid that we used to design our native applications into
Expression Blend and it's going to help me align my content, group it llogically, add appropriate
negative space or whitespace and really make my interface elements look nice and aligned and
beautiful. That is pride and craftsmanship. So I right-click on my project and I'm going to add
an existing item; I have it in my assets folder here. It is a PNG. It's in my project. I'm going to
quickly lock my panorama in my objects and timeline tool window so I don't accidentally move
anything. One of the nice features of Blend and simply select my layout root, double-click on
that grid. I'm going to do it twice to make it a little bit brighter so you can hopefully see it, and
now I have the grid that is going to help me align things in my interface. Next I need the data
that I can design around, so I'm going to add sample data. I'm going to show you a method for
doing that. In Expression Blend there is this data tab. It is really, really powerful for adding
sample data. If you click on this tab there are a variety of ways that you can add sample data.
You can add it from a class. You can use that class definition to stub out your sample data set
for you. You can do it with XML or you can do it with this new sample data set, or new sample
data command, which is what I'm going to do. It's very straightforward and simple as you will
see here in a moment. I'm going to create two data sets. I could create one, one for weather
and one for alert, so I just like the distinction between the two. First one I'm going to call
weather data. I want it available for the project and at runtime. I'm going to add one more for
my alert data, alert data. Let's go ahead and start customizing the collection items, starting
with weather. For weather I want my weather description, the day of the week and the high
and the low temperature. The first two of the title are the weather description and the day of
the week are strings. The next two, the high and the low temperature are numbers, so I'm
going to go ahead and specify those here in this data tab. I can add additional data set items by
clicking on the little plus that you see here, so I'm going to add two more. I'm going to name
them first. The first one is going to be the weather description. I'm going to call it description.
The next one is day, the next one, high temperature. I will just call it high. The next one low
temperature, call it low. Again, the high and the low temperature are just numbers and I'm
going to go with length two; I could do three if I want to, but I'm just going to stick with two
because it's easier. I'll do the same thing with the low temperature, make it a number of length
two. For my day I want it to be a string of length one and eight for the word length is
appropriate. It will work, string for the description. I want it to also be of length one, max word
length of eight is fine. Now for my alert data I want two items in there. I want alert title and
the alert description. Both of them are strings so since I have two items in this collection by
default, I'm just going to rename them and make sure they are both strings of the proper
length. I click twice and the first one is I'm going to call it title. And it is a string and I want it to
be a string of length two. The next one is description, and this is also a string and I'm going to
go with length of 100 and max word length of 12. And Blend is going to generate ipsum lorem
greeking text for me, so it's super powerful. I don't have to do anything other than set up the
data set description here that you are seeing. So my data set is set up and I'm going to add it to
the design surface so that I can start designing around it. To do that let's start with our weather
collection. I'm going to select the collection item and drag--I have to unlock my panorama,
otherwise I couldn't add anything to it. Drag and drop the collection onto this weather and
then I'm going to right-click on it in the design surface. I could also do that in the objects and
timeline tool window and say autosize to fill. Next I'm going to select my alert data collection,
drag and drop it onto the alert grid and again right-click on it, autosize to fill. Let's see, zoom in
just a little bit so we can see a little bit more. One last thing I want to do really quickly. Again I
like to name things consistently I do that all the time so I'm going to quickly call this list box that
was automatically generated whether LB for weather list box. The next list box that was
generated from my alerts information alerts LB. So I have it set up. I have all the data set up. I
could go with it as is. One last thing that I want to do is I actually want to customize the data
and make a little bit more realistic so that I can design around it and get a better feel for how
my application is going to look. I can do that. Let's start with the weather data. In the data tab
I'm going to click on this little tab next to the collection and it brings up an editor. I want, as I
mentioned the five day weather forecast in this particular prototype, so I'm going to set the
number of records to five. I'm going to put realistic day data in here starting with Monday, hit
return, Tuesday, Wednesday, Thursday and Friday. For the description, I'm going to be
optimistic and I'm not going to spell sunny wrong. I'm going to do it one more time and it's
going to be sunny. Let's all hope for sun, jeez, I can spell. There we go. [laughter]. Let's go
with cloudy, ah. All right, and sunny and how about let's just be realistic and we will just do this
last one rainy. I'll go ahead and leave the high and low temperatures as they are. I think that's
fine. I just wanted to see realistic descriptions and realistic days of the week. Actually, I take
that back. I'm going to make all of the low temperatures 32 so that I can quickly identify low
temperatures. I'm just typing in the numbers, hitting return and it's filling in the information.
So now if we take a look at my weather data set, it is a little bit more realistic, sunny weather.
It's Monday with a high and low temperature. I'm going to do very quickly the same for my
alert data. I'm going to leave my description which is 100 words as is; Blend is automatically
generating that Greeking text for me. I am going to change the number of records and the
titles. I'm going to, let's say, high humidity. I think I'm thinking too much here. How about high
winds? I will just copy that and paste that into each of these. All right. That's not working.
High winds, high winds, there we go. So I have a somewhat realistic sample data in here now.
If we look at the alerts information we have our high humidity, high winds, high winds, so I'm
satisfied with where I am. I think I can design around it now, so let's start with our five day
weather forecast. I would run it, but let me do a little bit of designing here and make it look a
little bit better and it will only be about another 10 minutes. So I'm going to go to the
properties tab, bring that into focus and I'm going to start with this weather data again. The
weather list box that was automatically generated is what I'm going to go into and I'm going to
access the item template for the items in this list box and I'm going to customize the style for
that item template. Blend allows you to customize the appearance of all controls. You can edit
the templates for them. I could edit as you see here when I right-click on this list box, the list
box template. This isn't what I want to do. It would get me, give me access to the frame of that
list box, the background of that list box, the scroll controls of that list box. I could thoroughly
customize it. There's no need to. Again, what I want to get into is this item template that is the
style for the items that are displayed in that list box. I'm going to edit the current, the
generated item template. When I drop the sample data set onto my design surface and again I
work interchangeably between XAML view and the design surface for various reasons as you'll
see here in a moment. This is the item template that was generated for me. As you can see it
is a bunch of text blocks and I don't know what I'm working on, so again the first thing I'm going
to do and I'm going to use the binding information here, is I'm going to copy from XAML into my
objects and timeline window, so I know what I'm working on. I'm just simply copying and
pasting in place in the objects and timeline window and I will do it for each of them. So now I
have descriptive information there and I know what I'm working with. The next thing I want to
do, actually I'm going to zoom out just a little bit so I can see more, there we go, of the
information that I'm going to design. Move that up a little bit. So I want description to come
first and I can drag and drop any objects into the timeline tool window to move the things up
and down in the hierarchy. I also want the low temperature to come before the high
temperature, so I'll just set that basic structure up as you just saw. The next thing I want to do
is there are system resources that I can bind to for colors which is really great in the case of
colors, for instance, if I bind to the system resources for colors across the board in the proper
way, my application will seamlessly respond to the user's theme preferences or theme settings.
It can provide a good experience for users. So I'm going to do that and here are the color
resources. I selected all the items in the objects and timeline tool window. I'm going to bind to
the Phone foreground color. It's white. I'm also going to change the system resources for
fonts, font sizes, font faces, margins; you'll see that here in a moment, so I'm going to leverage
those as well. For the font size I'm going to go with fun font size normal. The next thing I'm
going to do is actually I'm going to set the font face as well. By clicking on this little square that
you see here, it's giving me access to this context menu and I can get in there and I can utilize
those resources in the system resources menu item. I'm going to use semi-light. Next thing I'm
going to do is I want to make the description, the weather description a little bit bigger and I
want to use the accent color for that weather description, so I've selected it here and I'm going
to go to the color resources and select the Phone accent color. The next thing that I want to do
is I want to make it much bigger, so I'm going to play with the system resources here. Extra,
extra large, not as big as I want, 54 point as you can see here. I'm going to change the system
resource for fun font size huge. That's way too huge. I want something a little smaller, so I'm
going to convert back to a local value and I'm going to use 84. 84, try that again. There we go.
84, that's the size I want. So next thing I'm going to do is, as you saw from the PowerPoint I
want the high and the low temperature to orient horizontally right below the day of the week,
so I'm going to set that up, so I'm going to do some grouping and some alignment of elements
that you'll see here in a moment. I do that once on the item template and it applies across all
of the items that are rendered in that list box, so it's pretty powerful. It may take a little bit of
fiddling but the grid really helps me align things properly as you'll see I will reference that a lot
here in a moment. I'm going to start with my high and my low temperature. I'm going to rightclick and I'm going to say group into a StackPanel. I'm going to make sure that StackPanel is
auto sizing for width and height, and I'm also going to set the orientation to horizontal. The
next thing that I'm going to do is grab the day of the week in the StackPanel that I just created
and I'm also going to group those into another StackPanel, make sure that they are auto sizing
both again in the height and the width and vertical orientation for those two items is fine. I'm
going to expand that. I'm going to select my day of the week and I'm going to make the font a
little bit bigger. I'm going to set it to Phone font size large, so it's a little bit bigger. I'm going to
grab this StackPanel for my high and my low temperature and I'm going to move it up a little bit
closer to the day of the week, and now I'm going to style, I'm going to add a slash in between
the high and the low temperature and degree symbols for both of those items as well. I find it
easiest to work in XAML for this. The name is backslash symbol and add my slash. I'm going to
control click and drag. I didn't mention that before, to duplicate that slash symbol. And I'm
going to use that for my degree symbol and I will call it and tag one and I'm going to use a
lowercase o for the degree symbol; I could use the real degree symbol, but I don't know the
keys for that, so this works just as easily. I want to make the size little bit smaller, convert to a
local value and I'm going to set the size to eight, and as you can see it's looking a little bit like a
degree symbol. I'm going to control click and drag in the objects and timeline window and
duplicate it so that we have the degree symbol by the high temperature now. The next thing
I'm going to do, I don't know if you noticed, but I had a vertical line behind beside the day of the
week and the high and the low temperature. I'm going to add that and also position it a little
bit more precisely on this grid. Let me zoom out a little, there we go. Let's go ahead and
collapse that. I'm going to select the day of the week and the StackPanel with the high and the
low temperature and I'm going to group into another StackPanel. Again, I want it to autosize
height and width, vertical, actually I want horizontal orientation and did I do something? Let's
try that again. Okay. One more thing my negative margin on my high and low temperature
disappeared so I'm going to add that back. Do I have two StackPanels here? That's all right. So
what I'm going to do to create that line, there are various ways that I can do it. I'm going to use
a border and I'm just going to stroke one side of that border, the left side. Again, there are
various ways to do this. I find this to be a perfectly fine way to do it. I'm going to drag it up in
the hierarchy, select my StackPanel because I want my orientation to be horizontal. I'm going
to set the width to 2 and the height to 40 and before the appearance again, I only want the left
part of the border to be stroked, so I'm going to set the stroke everywhere else to zero, and for
the border brush I'm going to buy into the system color resource for Phone foreground and I'm
also going to add a little bit of space between that line and the text information. Let's do it this
way. I'll do it on the StackPanel. There we go. One last thing, a little bit more tweaking here, I
am going to move this StackPanel up slightly, give it a negative margin with my day of the week
and the high and the low temperature, so it aligns more, much nicer to that line you will see in
a moment when I move it over. Now I am going to position it a little bit further to the right and
to do that I'm going to select that StackPanel, set horizontal alignment to left and then I'm
going to set the left margin to 235, so it's positioned where I want. Again, I'm going to make
these edits to these item templates one-time and it's going to apply across all items in that list
box, so this effort that I'm putting in is going to be worth it. I'm going to get a really nice effect.
The next thing I'm going to do is I'm going to actually set the height of the weather description
text box. I want it to be 135. It's clipping the descender elements as you can see here slightly,
but I like that effect, so I'm going to go with it. One last set of things, as you can see this text
isn't aligning nicely to the grid here, so am going to have it align nicely on the left and right. I'm
going to set a left and a right margin of six on this StackPanel and things move over and are
aligning better to the grid. The next thing I'm going to do is I'm going to set a -40 for the top
margin and I had these numbers; I actually played with these numbers a little bit previously so I
can move a little faster. You would have to play with that little bit more. It's not magic. So I
did play with a little bit and so I set that -40 margin on the item templates and then I also
moved the list box up slightly and as you can see the baseline of each weather description is
aligning nicely to the grid and that's exactly what I want. Actually I'm going to go into the item
template as you'll see here in a moment and I'll fix these items because these are not doing
exactly what I want. I want every item to align nicely to that grid on the baseline of the
description text. I will select my weather list box one more time. When you go into an item
template you get these breadcrumbs, so I can step in and out of the item template using these
breadcrumbs, so I'll just step right back into it using the breadcrumb because it's pretty easy,
and select my StackPanel and I'm going to do, I'm going to try a -36 and it works perfect. I have
the alignment be exact way that I want it aligning nicely to the grid and now I'm going to do the
same thing to my alert information only I'm not going to walk you through this process. I'm
actually going to use a resource dictionary were I've already done this process and I'm just
going to apply that, the template for the list box from that resource dictionary as you'll see here
in a moment. One thing though, I'm going to use the toolkits wrapped panels for the item
template in the toolbox or the items panel rather in the list box that describes how the
information is stacked in that list box. By default it's stacked vertically using a StackPanel.
Again, I want to use the WrapPanel because I want two columns of information and to do that I
need to add a reference to the toolkit. I've already installed the toolkits. I'm going to right-click
on my project and, I'm sorry. My references, and I'm going to select add reference, go to
program files, Microsoft SDKs, Windows Phone and go into the toolkit and select the toolkit and
if I rebuild will quickly I can now use the WrapPanel. So I'm still in my item template. I'm going
to step out of it using my breadcrumb, and I'm going to my alerts grid and I'm going to rightclick on the alerts grid and then go into this edit additional templates menu item. This time I'm
going to select my items panel, create empty and the defaults here, actually I'm going to select
application. That's fine and I'm going to go into this asset library and type WR so I can access
WrapPanel and there is, select it, delete my StackPanel, double-click to add my WrapPanel. We
don't see anything happening yet, but we will when I apply the template from the resource
dictionary for that list box. I'll step out of the items panel template and the next thing that I
want to do is add my resource dictionary. It's an existing item in my assets folder and it is this
research dictionary here which just filled real quickly. Again, I'm going to right-click on that
alerts list box, it additional templates, select my item template and I'm going to apply a
resource. I want this alerts item template and as soon as I did that it applied the style that I
created previously and it's perfectly aligned to the grid. I went through that process you just
saw a moment ago for these items, the finessing to get it to align perfectly to the grid; that
pride in craftsmanship really will shine through. Let me get rid of the grid so you can take a
look. I'm not going to need it anymore, so I'll just go ahead and delete these items and run the
application briefly here. Things are aligning nicely. It's looking really balanced and there is a
nice use of negative space. It's looking really good. It's also as I mentioned I'm leveraging the
system color resource, the accent color for my weather description and you're seeing that color
light up in the weather description information, so it's kind of fun. Okay. Now, does anybody
have any questions before I move on? Yes?
>>: Basically because you used two different mechanisms to do this. One you actually went
through step by step and created the entire [inaudible] template and the other one you applied
the dictionary, so I'm assuming that in XAML does look differently, right? One, you've got a
whole lot of XAML in one place and the other one you've just got a reference how to do it, your
dictionary. Is that right?
>> Corrina Black: Exactly. Yeah, so the resource dictionary that I added has all of that mess,
that load of XAML. I have page transition styles there. Here is my weather item template
which I actually have a copy of in here. This is not the one that I, I actually created that one
from scratch. Where is it? The alert side template, oh look, it's very simple. It's right there,
very simple. It's actually not a lot of XAML. But the XAML for the item template is up here and
the resources part of main page.XAML.
>>: Okay.
>> Corrina Black: So it's a combination.
>>: At some point you would then say okay, that's a lot of XAML [inaudible] you would just
want to package that up and…
>> Corrina Black: I would, yeah.
>>: Pull that off into another dictionary.
>> Corrina Black: Yeah. I think it would streamline things a little bit, so yeah, that's exactly
what I would recommend. Yes?
>>: More questions. Are there any benefits of using this system [inaudible] styles. It's more
like a [inaudible]?
>> Corrina Black: I really think there are, I know there is a benefit to using them. We know like,
for instance, the smaller size is actually usable and readable on the phone form factor because
we've done that testing. The other sizes actually map to many of the styles that you see in our
native application so you can replicate our native applications probably a lot faster by using
those system resources for font faces, font sizes et cetera, and then we also have as I
mentioned resources for margins and the other items as well, and so it actually is really
beneficial. Yes?
>>: I am just wondering is it really easy to put [inaudible] life tile from here?
>> Corrina Black: Is it really easy to what?
>>: [inaudible] things on the life tile?
>> Corrina Black: So life tile, no, you actually have to do that programmatically from what I
understand, so I will if I have time I'll show you how you can do that, one method, a really
simple method. I'll try to show you, but you can't do that in Blend. I can do that in code in
Blend as you'll see possibly in a moment, here in a few moments. Now what I'm going to do is
I'm going to add a page, so I'm showing as you can see here, I'm showing little snippets of my
alerts information. It's very likely that you're going to want to read the full alerts details so I'm
going to add a page to display the full alerts details. I'm also going to add an application bar. I
think it might be useful in many cases to share this alerts information maybe with others,
maybe you're going on a family vacation and you are traveling along and you notice some issue
in the weather or you look at your application and you notice some issue that may interfere
with your travels and you might want to share it with your family members. There are other
reasons that you may want to do it as well. It could be a useful action to perform in this
interface and the application bar is the appropriate location for that. I'll show you how to do
that really quickly. I'm not going to hook it all up, but that's the next set of steps that I'm going
to do. I'm going to add a new page. I'm going to right-click on my project and I'm going to add
a new item, phone, Windows Phone page. I'm going to call it alert details, and control 0 to
zoom out and I'm going to make this consistent with the other one. I'm going to turn the
system tray off by default. I'm going to leave all of the basic information that I have here in
place. It's a good starting point. It's a very simple UI here. I'm going to control, click and drag
this text block at the top here. I'm going to utilize that to create my weather description
information. I know from experience that text wrapping is off, so I'm going to set wrapping to
on in the property window, and delete my search term, and I'm going to scroll down to the
bottom and I'm going to do data binding now. I'm going to bind the text to the sample data
that I created. I want to bind it to my alert information, the description. I'm going to say okay.
The next thing I'm going to do is I mentioned these margins that are also available using the
system resources if I click on the little square again I get the system resource, so I'm going to
use phone margin and it nicely adds the appropriate padding so things seamlessly align which is
kind of cool. Then I'm going to select my page name and I want that to bind to the alert title, so
data binding again. I'm going to select title and the last thing I'm going to do is I'm just going to
double-click on the title of this page, make it all caps and I'm going to title it alert details. That's
static and doesn't need to update based on what I select, so, all right, so I have my page
created. The next thing that I'm going to do is I'm going to add the navigation to that page from
that alert list box and I'm going to use behaviors to do that. I'm going to go back to my main
page [inaudible] XAML, select my alert list box. I'm going to go into this asset tab. I know you
can't see it very well, but that is in fact the asset tab and I'm going to select behaviors. I could
also go down to this asset library down here and have the same information. I work kind of
interchangeably between that asset library fly out and this asset tab. I'm selecting my behavior,
node and I'm going to go down to Blend has a behavior for navigate to page. I'm going to select
that and drag and drop it onto my alert list box. I could use this to navigate to that page that I
just created. I would have to go through a process of updating the data appropriately based on
my selection in that page, so I created a behavior. You can do that to. And it will do all of that
for me. So I'm going to delete the one from Blend and I'm going to load my behavior really
quickly by right clicking and adding existing item from my assets. It's this page navigation,
quickly bold, so I can use it. Go back to my assets, behaviors, and here's my behavior, just drag
and drop it into the alerts list box and I'm going to select my page which is this alert, excuse me,
alert details and I'm going to go ahead and build so that we can see it's actually working. It's
kind of nice to see at every step that things are working. So if I move over, click on one of
these, I see high winds, so let's go back. Here's high humidity, high humidity, so everything's all
hooked up and it was pretty seamless using my behaviors, so if you're working with designers
you have to create behaviors for them and allow them to quickly, rapidly prototype. It could be
useful obviously in prototyping situations of various sorts to utilize behaviors for encapsulated
functionality that you might want to reuse, so I thought that would be really useful to discuss.
So the next thing, let's add the application bar. In Blend it's actually really easy to do. I can
search after selecting phone application page for app, or APP, or type AP and I get the
application bar property. When I click new, you'll see it reserve space down at the bottom of
the page for the application bar. I can add menu items. There's a menu items collection. I'm
not going to do that. I'm going to add a button for sharing and my buttons are here. I'm going
to click on the ellipsis and choose add another item, the application bar button, and there are a
set of icons that I can choose from. I can also load an icon that I've created myself if it was
more appropriate. It just so happens that there is a share icon in here so I'm going to use the
share icon and I'm going to type share for the command in lowercase and say okay, and my
button is in place. Of course I would have to hook it up with code. I haven't done that, but it is
very useful. This is where the page commands go. If the actual page elements themselves are
not interactive, most elements on the screen are deemed interactive, you know, in interfaces
like the phone or slates. There are cases where you need additional commands and the app bar
is where those additional commands would go. Yes?
>>: Are those [inaudible] both light and dark?
>> Corrina Black: They will react automatically for you, the ones that you get by using
Expression Blend. Yes?
>>: Are there any built-in buttons just for like sending an e-mail so there would be a mailing
app already, so you could just use it without having to [inaudible] the behavior…?
>> Corrina Black: Is there like encapsulated code for that, is that what you are asking for emailing items?
>>: [inaudible] resume there is a mailing app [inaudible] an e-mail button [inaudible]?
>> Corrina Black: Not that I'm aware of. I'm not aware of anything that you could simply drop
on the design surface that would have encapsulated code behind that would do that for you,
although that would definitely be nice, but nothing that I am aware of. The next thing I'm going
to do, I just want to mention really quickly is that by following the UI model that you see in our
native applications as part of this win is one principle, it's really good for users. They don't have
to relearn how to interact with the interface. They learn from one application. They can take
those learnings to another application. This application bar is again where the commands go,
very often if the elements on the screen aren't interactive by default for users. I just want to
quickly mention that. Now I'm going to add animations and transitions. These are available in
the toolkit and you can leverage them obviously as well. They are available in the toolkit and it
is really part of this alive and in motion principle and adds that life that immersive quality to
your experiences. Animations do that as well as they can really guide the user and help them
understand how to interact with their applications as you'll see here in a moment. Let's go
ahead and do that. I'm going to add page transitions first and to do that I need a reference to
the toolkit on all of my pages, so I'm going to do that really quickly. I would need to do that at
the top here by adding the namespace. I know a quick little trick to add the namespace
automatically. That is to go into your page, drop something from the toolkit onto the design
surface and delete it and it generates the namespace for me. I don't want to type it. So I'm
going to do that for all of the pages here really quickly. So it's set up. For page transitions I
need to go into app.XAML.CS and use the transition frame included as part of the toolkit, not
the phone application frame that comes by default with the project templates. I'm going to do
that real quickly. I'm going to go into app.XAML.CS and go down to my frame which is
somewhere. There it is. And I'm going to change this to transition frame, save it and go ahead
and close that. I'm going to close my resource dictionary. Let's just go ahead and close some
items so that I'm not distracted. The next they'll want to do is I need to add XAML for those
transitions into my page. I created a resource for that. XAML details are available on code Plex,
you know when you download the toolkit. Again, I've added the XAML to my resource
dictionary and the really cool thing about that is I can just simply right-click on my phone
application page and edit the template, apply resource and I'm going to use the turnstile page
style transition. That's what I named it. That's not the name that anybody else came up with.
So I will do that for both pages. Add a template, apply resource, turnstile, page transition, and
one more thing that I want to do. In my alert list box not everything on the interface is
clickable. You're not going to click on the weather details, on the first panorama item page and
navigate anywhere. To help users learn how this interface works, I'm going to add an effect
that when they press on something that it tilts. You'll see that on our native applications and it
will hint to users that they are going to navigate to another page, so I'm going to add that and
that effect is in the toolkit is well. To and it I need to go into XAML. It's very simple. I'm going
to type toolkit and tilt effect and is tilt enabled, and I'm going to set it to true and I'm going to
hit F5 and build and will see that I have everything in place. So I have my tilt effect and if I
actually clicked on it and let go, or press on it, I navigate to the page. You see the nice turnstile
effects. When I click the back button you see the back transition again. It really is immersive.
It's engaging. It's also adding, helping users interact with the interface and making it fun. Any
questions? The next thing that am going to do is I'm going to, what am I going to do? I'm going
to add--how much time do I have left? Do I need to be done now? [laughter].
>> Arjmand Samuel: You've got a few minutes.
>> Corrina Black: Okay. I'm going to add an opening animation and I'm going to customize this
splash screen, but before I do that, does anybody have any questions? Okay?
>>: Can you customize the panorama title?
>> Corrina Black: You can.
>>: Okay.
>> Corrina Black: [laughter]. You can do that the way that I do it is--and I'm not going to
actually do it because I like it the way that it is, is I would go in here and delete this title. I'll
undo it, but I'll do it real quick. Controls, controls…
>>: Oh, I see inaudible] controls?
>> Corrina Black: Yes.
>>: Okay.
>> Corrina Black: Okay, go back. What's going on? Let me just delete and add that back. The
computer is not very happy with me for some reason. Yes?
>>: [inaudible] search done to [inaudible] to find the grid that you use?
>> Corrina Black: You can actually find it on Arturo Toledo’s blog. It's UX…
>>: Arturo…
>> Corrina Black: I think it's UX.r2.tv, yeah, and we'll make it available as well. But if you want
it now, that's where you can find it. Actually I'm going to call it Weather Bag, so, and I use
keyboard shortcuts all the time, so if you see things changing it's because I'm using keyboard
shortcuts, control 0 to zoom out, control plus and minus to zoom in and out. Now, I'm going to
add an opening splash animation and I'm going to customize the splash screen. Right now it is
the default that you get with the project templates. It is for the splash screen that little clock.
It's really not appropriate for your application, third-party applications. You're going to want to
customize it. I'm going to show you a really simple way to do that. Let's start with our
animations. I'm going to lock my panorama so I don't mess with it. The next thing I'm going to
do is go into my asset library and I want the pop-up. There's the pop-up. I'm going to doubleclick it to add it to the layout root. I'm going to right-click here and I'm going to autosize to fill
for both the pop up and the grid inside that pop up. Autosize, fill, I'm going to set, delete the
search term. I'm going to set the grid’s fill color to the Phone background color resource. Then
I am going to add two text blocks, just double-click to add two text blocks and I want them to
stack rather than set right on top of each other, so I am going to wrap them in a StackPanel. By
default it's vertical. The next thing I'm going to do is customize the style for each of these text
blocks. Let's bring up common properties and I want first text block to be all uppercase
weather, tab, I want the font face, actually I will just leave it as is. I want to font size to be
huge, literally. Yeah, let me autosize that because I clearly have a problem. Another issue, a lot
of these items that you drop on the design surface, they might wrap, like your text blocks, I
don't want them to wrap in this case so I'm going to set it to no wrap and so I kind of have the
effect that I want. Delete my search term and select my next text block. I'm going to call it bag
because that's the name of my app and I'm going to set the font size to extra, extra large. Now
I'm going to reposition elements in preparation of creating my animation and I'm hitting the v
key to bring up the arrow cursor and I'm going to try to reposition, but I have things in a
StackPanel and so they are trying to align in a certain way using margins and padding and it's
really difficult to position them for my purposes right now using a StackPanel or even a grid, so
what I'm going to use is a canvas which will allow me to position things freeform. I'm going to
right-click on my StackPanel and I'm going to change the layout type to a canvas. Once I do that
I can position elements freely wherever I want. I'm going to select these items and kind of
position them like that. Let's go back to our pop-up, so that's kind of how I want it to look at
the beginning of my animation, so now I'm going to create my animation in the objects and
timelines window so if I click the plus and create an animation, I'm going to call it open and let's
give myself a little bit more room to work with. There we go. I'm going to select, I'm going to
go out to one second; it's a bit far but I'll do that. I'm going to add some keyframes using this
little Keith brain thing. I've selected both of my text blocks. I'm going to go to one and a half
seconds, add another set of keyframes and then I'm going to move the text to where I want
them to be and at the end of the animation at these ending set of keyframes, because that's
what it's going to look like at the end of the animation and then it will interpolate in the middle
for me. I'll select this first text block. I'm hitting the V key so that I can move the text block.
Oops, shoot, bear with me a moment; let me go back to my pop-up. Open my animation, select
my text block again and what's, not the ending keyframe, and let me just position at like I said
where I wanted to be at the end of the animation. Same for the bottom text block where it's
bag. The next thing that I want to do is I want the background of the grid to kind of fade out a
little bit, so I'm going to select my grid and then I'm going to add a keyframe close to the end of
the text animation, move out a little bit past the end and create another keyframe and at that
point in time I'm going to set the opacity of that background color to zero. I need to do one
thing that I forgot to do. I have to set pop-ups. Pop-ups by default aren't open so I need to go
back to that control and I'm going to search for is and I'm going to set it open by default
because I want the animation to happen as soon as this page is loaded, and then I'm going to go
back into my animation and I'm going to select my pop-up and at the very end of the animation
I'm going to set is open to false. It's going to close the pop-up and I won't see it again without
opening animation as I'm navigating around which is exactly what I want, so I created my
animation. Let me just run it so we can take a look at it. I want to do one more thing. You
notice, I mean it animated kind of the way that I wanted. There are these easing affects that I
can leverage to make the animations a little more lively and I'm going to do that for my text
elements. I'm going to select both text blocks and get rid of my search criteria here, go to the
ending keyframe for both, actually I'm going to select the keyframes and I'm going to choose
one of these easing functions. I want it to sort of start out slow and animate quicker towards
the end of the animation, so I'm going to select this particular easing effect or variety that you
could choose from. This one is most appropriate, and then let's check out our animation one
more time. It's a little slow and snappy. It's kind of a little bit more lively, the effect that I want,
so let's hook up the animation and I will click out the little x to get out of the animation area of
Blend and I'm going to select my pop-up. I'm going to use one of those behaviors again in the
asset library and there is one for control storyboard action, so I'm going to select that. I'm
going to double-click it and it to the pop-up. I'm going to have it play my animation, open on
loaded and I'm going to hit F5 and we will see my animation. It's getting there. I want to fix
that splash screen. I want it to look like the opening part of that animation so it feels a little bit
more seamless and to do that it's very easy using our emulator and the tools, the other tools.
I'm going to first of all I'm going to, let's just turn this animation off. That is not going to run on
loaded, so that will see it and I'm not going to do mail center; actually mail center is bad. Let’s
do pop up closed. It's not going to close because the animation hasn't run. I'm going to run the
project again in the emulator, and I'm just going to see that opening screen once the animation
loads or the page loads, and what I want to do is I want to take a screenshot and using the
emulator I can do that. I'm going to go to the screenshot screen and you get a little notification
down here because I don't have my emulator running at 100%. When it's taking my screenshot
I wanted to run at 100%, so I'm going to go back to the emulator and click on the magnifying
glass and set it at 100%, go back to the screenshot tab here and click capture and save. It's
saving it as a PNG; I need a JPEG, so I'm just going to save it as one on my desktop and I'll go
ahead and close this dialog and put the emulator size back down to 75% so I can see it, and I'm
going to use MS paint to change that PNG to a JPEG. Open on my desktop my file called one
and I'll just save as a JPEG into the folder for my project if I can find it. Let's see. Which one? Is
there one called web? Oh, it's W, Weather Bag. There we go. I'm just going to copy over the
top of my splash screen image that I get the project template. When I do that, go ahead and
replace, yes, close MS paint, go back to Blend, hit F5. It will feel a little bit more seamless. Now
this is my splash screen and when my application loads, I don't see my animation because I
haven't turned it on. I need it to run on loaded, so let's change it to run on loaded and hit F5
again. Ta da! I have this kind of seamless opening experience. You will want to play with your
opening splash screens and opening animations if you choose to do that little bit more. This is
just one simple method. It might be a nice starting point to learn from. I have a, yes. I will take
questions before I move on. Yes?
>>: Sorry, so is there any chance that phones might have a different form vector or resolution
so that your splash screen might actually look a little bit stretched or different and then when it
actually transitions into the controls…
>> Corrina Black: No. You're not going to encounter that. Correct me if I'm wrong [laughter].
>>: All of the phones right now are 800 x 480 resolution.
>>: All of them?
>>:. Yes. They are all 480 x 800, [laughter].
>>: Did I say it wrong?
>> Corrina Black: I said it. I was just making sure as I was saying it that I was saying it right, so
[laughter], the slowness.
>>: Is that part of the spec, actually, that the phones should be the same?
>>: Yes. That is correct.
>> Corrina Black: Yes it is. So anymore questions? I have a couple of options. I can show you
how to really quickly create a live tile or I could show you how to create my method, my
shortcut method of creating application icons and start page icons, so which one are you guys
more interested in, start page or… Start page? Tile?
>>: Tile.
>> Corrina Black: Okay tile. Okay [laughter]. Maybe I can do both. Jam it in, really, really fast.
I'm going to do the quick and dirty way of update, making a live tile, as you see here in a
moment, and I'll talk about the other options as well. You'll have to do a little bit more
research into that but there are plenty of resources on the web. Let me go into the code
behind for made page.XAML. I'm going to add a namespace; I think it using, in Microsoft. In
Visual Studio it's actually a little bit easier in my opinion to do code editing, so I may be a little
bit slow here and I apologize, but Microsoft.phone. I think it's system, no, shell, shell, and let's
just add a loaded, not language, dot--this is definitely not the way you would code it but you
can probably imagine from the example that I'm going to show you here. I've added a loaded,
event handler and in here I'm going to update the tile and make it live. As live as I can quickly,
so I'm going to do shell tile, t, equals, sorry I have my cheat notes here. Shell, tile, dot, active
tiles.first if t, which I shouldn't call t, should I? But I'm going to. [laughter]. Equals null
[laughter].
>>: [inaudible].
>> Corrina Black: Return and then I'm going to do, shell; I think it's shell, tile data, data. Okay
I'm not going to [laughter] data equals new, not that. [laughter]. I'm struggling a little bit here,
sorry. Data, is that what I want? Yeah, yes, and then I'm going to do st data, dot, that's the title
that I want looking at my cheat notes here. Actually I want shell, tile data, data, um, actually,
I'm sorry, st, data, data, dot back. Why can't I get back? I might have to actually, see I'm really
struggling because I really need IntelliSense and it's not doing something wrong here, just give
me one moment.
>>: [inaudible].
>> Corrina Black: What's that? I have shell here.
>>: Doesn't recognize the [inaudible], but…
>> Corrina Black: Yeah.
>>: You need to pass the t into the shell title [inaudible].
>> Corrina Black: Maybe it's the name. [laughter].
>>: Which name [inaudible]?
>> Corrina Black: I thought it was in shell. Let’s, that's a very good question. I thought it was in
shell, but this isn't lighting up. Shell, shell, title, Microsoft shell.title.
>>: Are you looking for [inaudible] data instead of…
>> Corrina Black: Yes, thank you. Starter, tile, dot, oh my goodness, sorry. I may have to like
give up here.
>>: Standard, tile, data.
>> Corrina Black: Say that one more time.
>>: Standard, tile, data.
>> Corrina Black: Standard, oh my God, standard. Tile, oh, oh, thank you, thank you, thank
you. Standard, got it. I'm with you now, standard, tile, data, thank you. This guy, okay, this is
going to work. Okay, that's it, I'm good. So now I can set the back content as well as the back
title which is what I want to do for my simple example which isn't looking so simple [laughter].
I'm going to set the title to, I'm going to set it to, we are in Seattle, so it's going to be Seattle
and then for data dot back content equals, I'm going to say, weather is 79 and sunny, and then,
I'm being positive, come on, [laughter]. And then tt dot update equals, I'm going to fill it with
my st data, okay. This will work.
>>: [inaudible] tile [inaudible].
>> Corrina Black: Yeah. You're right. Go away, go away. Thank you.
>>: [inaudible] to the right, no, yeah.
>> Corrina Black: Thank you. Do I want shell tile? I want shell, tile, yes. Now it will work.
Thank you. Okay. Let it load. I'm going to go to my start page and what I'm going to do is as a
user because this is the best application in the world, I'm going to pin it to my start page and as
you'll see in a moment, let's say I pick up my phone and I'm glancing at the tiles and instantly I
can see my weather, which is really nice because I want to know what it's going to be like this
morning. I just woke up. If I wanted to see the five day weather forecast, I could see that as
well and as we were discussing this application would make sense to potentially show weather
for various locations that you might be traveling to, so if I wanted to go into the app I could see
that, but if I want to instantly know what the weather is like I get that information on these live
tiles, so it's really powerful. Definitely, you're going to want to take advantage of it. You're not
going to necessarily want to do it the way I did it here. This is one way that you could do it.
There are background agents that you can leverage to have the tile information for your
application update in the background, and I am sure we can provide some resources to learn
more about that. With that, we created our prototype. Many of the steps that you just saw me
go through could also be used to create a real application that we could deploy in the
marketplace. I did discuss some of the things that you're going to want to consider to take
advantage of our Metro-styled design principles, use the grid. Pay attention. I actually didn't
call this out, but I was using, I was making fonts various sizes in the interface to draw attention
to the important information adding that hierarchy. I added animations and transitions to
make it more live and dynamic and immersive. The live tile does the same. I mentioned that
it's important to utilize many of the application patterns that you see in our native applications,
the principle of win is one is really about that, to help users not have to relearn how to use your
application. With that, does anyone have any questions on the last 6 minutes? Okay. Thank
you.
[applause].
>>: I actually do have one question.
>> Corrina Black: Okay.
>>: This is great for English speaking architects. As the store goes into global markets, how do
you do the design for multiple languages?
>> Corrina Black: That is an excellent question, and I don't honestly--I haven't done it myself,
but I know, the question was how do you design for different locales? There are, there is, Ben,
maybe you can help me. You probably have more information there. You could store all of the
strings…
>>: I know how to get the local resources. When you are designing how do you think about it
for multiple languages given the [inaudible] different sizes and how it's going to feel for those, I
mean what considerations would a person have to take?
>> Corrina Black: Yeah, that's an excellent question. In this particular example, you’re probably
going to pay more attention to the size. I made for instance, the weather description
information quite large. That may not work as nicely. It's going to get cut off in German for
instance so I might want to make a little bit smaller knowing that, let's say I was also targeting
Germany. In the case when we were looking at the alerts information even on the opening
panorama, it was fine. It was getting cut off anyway, and then you go into that page to view the
details and in the details we can add a scroll viewer so the user, as the language gets longer, I
think it's roughly like 30 or 40% longer in general, we would add a scroll viewer so users could
get to all of that information. Those are some of the considerations that I might make in this
particular example, and of course, if that were something that I was concerned with, in the
prototype I wasn't, I would probably think more deeply depending on my particular scenarios.
So yeah, yes?
>>: [inaudible] to play with the data source you put in and say I wanted to put that into the live
tile or in terms of getting it into the code [inaudible] files?
>> Corrina Black: So the question is how would I bring live data or sample data actually in? I
would imagine you actually want live data from a service somewhere, a data source
somewhere or your data source, if you happen to have that in your application. I would just-and how do you do that? How do you bring that into live tile? I would just reference that, you
know, that particular data source object and get into the data, so I just type the string. Of
course, maybe I won't a string, but I would also for the temperature in this particular scenario
point to the actual object and then the type or whatever, I say that. I don't speak code very
well [laughter]. To get to that actual data. You can totally do it. I have an example where I've
done it. I just can't talk to it very well [laughter].
>>: [inaudible] resources [inaudible].
>> Corrina Black: What's that?
>>: Going back back-and-forth between the expression and…
>> Corrina Black: Going back, working, you are asking about what's it like to work between
Expression Blend and Visual Studio?
>>: Are there resources for that?
>> Corrina Black: Actually you can have, I will just show you really quickly. I can work with
them both simultaneously, so I can edit my, it's actually right click edit in Visual Studio, and
work simultaneously in video studio and Expression Blend and as I'm doing that, as I'm making
changes in Blend and save and run my project, if I pop back over to Visual Studio it's going to
say hey, there have been changes to this project; do you want to update your project to accept
those changes or view those changes. So it will work seamlessly; it's actually a very good
experience from my point of view. Yes?
>>: [inaudible] how you set the data context [inaudible], was that [inaudible]?
>> Corrina Black: Actually I did that in the behavior [laughter]. I can share the behavior that I
created with you so you can take a look at it. I did that a while ago. I don't remember the
specifics of how I did it, but it's definitely possible. There are many ways to do it. I'm sure
there are better examples out on the web as to how to do it, but yeah. Sorry. Yes?
>>: It's more kind of a conceptual question. Different from the concept of a beta approach
type, something that typically you develop and eventually you validate to give it concept and
then you [inaudible] to later on develop, but it seems here that you actually consider and
suggest using all of these toolsets for actual development, not just for prototypes.
>> Corrina Black: I think actually the question was, if I think I can summarize, can you use
Expression Blend to create full working applications. Yes, I mean depending on the complexity
of the application, depending on how big your team is, depending on if you need source code
control, you need to take those into consideration. It depends. A very simple example like this
I actually built a full working version; I accessing [inaudible] data and I can't remember the
name of the weather service to pull in live data, I did this years ago. I just never deployed it. I
created it all in Expression Blend and Visual Studio anytime I do code, I do tend to do it in Visual
Studio. Of course debugging, I think you have to do it in Visual Studio. You have to do it in
Visual Studio, so…
>> Ben Lower: I would actually answer that little bit differently and say Expression Blend is a
production quality level tool. It is not a prototyping tool. It is a tool you use to do real work but
it also does prototyping really well. So what I was hearing in your question was oh, is it a
prototyping tool but it can grow up a little bit from that to do something more. I would say that
that is the wrong idea, but it is an awesome tool. When I shipped my app I had a multi-monitor
environment to go to your question back there. I always have Blend on one, Visual Studio on
the other end I'm going back and forth and back and forth all the time.
>>: Thank you.
>> Ben Lower: And really prototyping I think is SketchFlow which we didn't show it is a great
way to do prototyping and there are some great resources out there. You can go watch some
video on how do you SketchFlow to prototype a web site, Windows Phone app and it's very
quick and dirty way to do a throwaway prototype.
>> Corrina Black: And it's sketchy, which is really good. I just want to add on to the SketchFlow
discussion topic here. The nice thing about SketchFlow is that it's sketchy, so people think they
are a little less harsh and they focus maybe more on the interaction as opposed to the
positioning of elements and the visual finesse, which is good because particularly in the early
phases you want to focus on the interaction and work that out and SketchFlow is really good for
that, because it is the sketchy appearing interface, so like I said, people focus typically on what
you want them to focus on more readily. I would actually recommend for early prototyping, I
would, I do do it in phases. Honestly, the first thing I do is sketch with pen and paper or
whiteboard depending on who I'm with. If it's me I do it on pen and paper. It's always pen and
paper. And then I will take it into SketchFlow if I need to share; it has some nice sharing of your
prototype features. You can capture notes and such with your stakeholders. You could also
use it, I've used it for usability testing, for cognitive walk-throughs, if you know what that is
[laughter]. And you can use a more full fidelity prototype as you're getting further along and
finessing user interactions such as I've just created here. Again, for usability testings,
stakeholder feedback, cognitive walk-throughs, heuristic evaluations, all of these things to
really start finessing your user experience and optimizing it for your users. As you can see, it's
really fast. Granted, I know the tools, but, you know, once you get into it you can become quite
proficient with it as well and it's really powerful. It can help you design really great experiences,
bring that grid in, absolutely. I mean the grid is essential to creating great designs. It really
does help you aligning things. Even if things are just slightly askew it affects the overall quality
of your application and if you have something to align to it makes it a lot easier and faster to
create something that is great. And then pay attention, don't be afraid to go big with fonts,
smaller with things that are maybe less important to really distinguish and a hierarchy to your
user experiences. I mean seriously don't--I've seen people when they are trying to go play with
fonts, they are oftentimes afraid to go big. Don't be afraid to go big and you've seen with our
interfaces in the native applications, text gets cut off. It does. I mean it gets chopped. In
panorama, the panorama title is chopped until you pan over, right? It actually encourages
users to pan, for instance, in panorama, and it can encourage users to scroll if text gets cut off
as well, and it can actually add to the usability and help users kind of figure out how to use the
interfaces. I'm kind of rambling, but [laughter], so, thank you. [applause].