Building Blocks: XAML and HTML5 (Construct)

About this course

hey everybody welcome glad you're joining us today I'm Jeremy and this is Stacey we'll do formal introductions in just a second but let me give you a

little bit of grounding and let you know what we got for you today you are watching building blocks this is a building up to build basically right yep something like that totally building up

to build you're watching day to construct or construct yesterday we had a really good time we learned yesterday was initialized and we we had I think yesterday was kind of brace day we've

had a lot of angle braces a lot of curly braces a lot of code today's like color day I think today's just gonna be a little bit different yeah I think so I'm okay with that though it'll be fine

okay so let's do some introductions in case you weren't here yesterday my name is Jeremy Foster I'm a developer evangelist at Microsoft and I've been doing this for a couple years having a

really good time with it and you can find me online at code foster comm on twitter at code foster so I hope you follow me there and see what's going on in the world of Microsoft developer

stuff so Stacey who are you I'm Stacey Mulcahy I'm a Technical Evangelist out in New York City I like to tinker I like to play with a whole bunch of different things and you know I'm you can also

find me on the Twitter's I also run a blog and so hopefully you find me there and Stacy's got the coolest shirt in the world today her shirt says learn to Kern and it's it's

turned in correctly so I'm loving it I think I might just have to go it's perfect okay let's uh let's have a look at my slides here and let you know what where we're at in the course basically

like I said yesterday we had a lot of curly braces in our life when we were doing initialized today we're gonna be constructing we're gonna be doing a lot of UI there's gonna be a lot of colors a

lot of pictures a lot of graphics a lot of theory it's gonna be really good stuff some marketing and then tomorrow the day three is called extend and we're gonna be learning how to extend what

you've been learning the first couple of days with some extra libraries back-end online stuff that's just gonna make your life grand so it's a big world right now we've got websites we've got modern apps

we've got classic apps we've got SharePoint there's just so much stuff and there's a lot to learn and and of course we've got this exciting conference coming up next week so we're

building up to it we're gonna make it happen I see what you did there okay let's set some of your expectations for the day as far as a target audience we're looking for people who have a

building enthusiasm surrounding the inevitable overload of information that's going to be coming next week there's gonna be a lot totally a lot of information and and we want you guys to

be excited about that and and be using this time right now to prepare so if you're a beginner developer that's great if you're somewhere in the middle or even on the upper end hopefully you've

got stuff that you're going to be able to glean here but if you're trying to get a handle on the concepts that's really what this week is all about yesterday we were comparing c-sharp and

JavaScript really putting these two primary languages right next to each other and saying how did how do these compare and how do these lead into each other how do these work together and if

you're a c-sharp developer what do you need to know about JavaScript how do you map the things that you know into this other world and if you're a JavaScript developer what do you need to know about

c-sharp how do you need to map your skills into there and so we're really going to be trying to do all that mapping not really any prerequisites that you need to have for this you

kind of come in cold but if you feel a little bit lost that's what the chat rooms are for so go ahead and join us into chat rooms if you were here yesterday Christopher is actually right

back here behind the cameras and he's going to be in the chat room so he'll be answering the questions that he can and we'll do what we can a little bit about MVA and MVA community MVA we've got a

good thing going on here this is really fun Microsoft Virtual Academy free online learning it's tailored for IT pros and developers so whether you're the guy

maintaining the servers and making the developers life easy or you're the guy writing curly-braces you're gonna find some courses on MVA that are for you lots of registered users really relevant

training really really high quality presenters when you say I mean definitely I like you look high quality yeah absolutely you can also earn while you learn you get MVA points which are a

blast and you get 50 MVA points for watching this event so what you need to do is go to aka.ms/offweb is right there amazing a home and family yeah you gotta treat treat your children like their

cases yeah your friends so go to aka.ms/offweb layout style and then finally patterns and frameworks and what what is yesterday we were comparing c-sharp and

javascript today we're going to kind of be comparing the UI language that is in the Microsoft platforms zamel with HTML which is another UI language we're gonna be looking at a number of

things in both of these very popular languages so once again if you've been doing a lot of stuff in HTML and CSS and you kind of are comfortable there what about this world zamel how do you break

into that and vice versa so all right Stacy you want to take over and talk about design and UX oh yeah totally I'm all for this designing UX um it's one of the things we often really don't

think about you know we we kind of go when we try to build something and we think it's great and then we kind of forget about you know the functionality we have behind an app versus how do we

present it to someone and how do we you know have them trust that what we're building is actually of quality and it's you know easy to use and all those kind of things so we're going to go through

some design and UX principles today and we're gonna talk about a little bit at a high level you know some of the Microsoft principles and we're also going to break them down and treat it a

little bit more abstracted and so we're gonna think about those kind of things so modern design principles I heard myself in stereo is amazing sound like yeah which I try never to listen to so

thank you modern design principles so you know when we think about building on the Microsoft platform we think about modern design principles and so we're gonna just kind of do a quick little

run-through on what these are and you know how how we can take these principles and apply them because they're a little abstract and abstract in a good way so let's think about

modern design principles there's this sense of pride and craftsmanship and pride and craftsmanship is basically the idea of putting the consumer first and you want to pay attention to all those

little details that elevate an experience from something to be good to exceptional and you know I'm talking about those little details like oh they pre filled in a form for me that was so

handy or that little animation or that transition really made sense and it made it easier to use you know all those little things that we want to put into an experience that kind of create a

sense of delight for the user right you you don't want the user to walk away and be like that's frustrated I'm frustrated I'm never gonna use that again you want them to feel that sense of like oh wow

like you know and in that little moment where kind of recognize something is a really important one so pride and craftsmanship in terms of modern design is a really

big point we want to talk about things like fast and fluid and what does fast and fluid mean and and fast and fluid is one of those things of we want you know all of our interfaces to be very

reactive and and we want them to be you know fast and fluid you don't want the user to wait you know you want to simplify that that interface so that you know it can inform the user in an

efficient manner so they can finish their tasks you know quickly you know you want that experience to feel like they're almost like a stop and shop for a certain you know they can get in get

their information and leave or if you want to engage them for a longer time like if you're doing a game but you're doing that in a way where you engage them right off the bat so you know then

we think about something that's authentically digital and this is kind of one of those ok what does this mean you know essentially digital I get it and if we look kind of even at the

background graphic it's the idea that we really embrace digital we don't need to use metaphors from somewhere else we don't need to worry about how do we convey certain UI elements and bring

them from life we really embrace simplicity and we embrace flat design and we kind of take our keys from there and we embrace you know the platform that we're working on and we really use

those kind of points of simplicity and flat design and we embrace that and so we get back to after you know you've you've thought about the little details and you're talking about how performant

and fast and reactive it is you know and this beautiful simplicity and design do more with less is another one of them and do more with less it's very much about just stripping out everything

that's not needed we've all seen those interfaces right where you go and it's just like so many options and you're you're overwhelmed right and where do I click what do I do you know do more of

less as the idea of stripping it out you want to focus on the video let the user focus on video you know maybe hide the controls that kind of thing so it's we don't want to

overwhelm people we want them to come and be able to do what they're supposed to be doing I feel like the last 15 years there was this fear that that we don't we want to make sure that

nobody is ever more than one click away from anything right likes pack it into the first view so everything's there and they all they ever have to do is click one time and if they have to click two

times it's just a terrible thing dashboard right like everything became a dashboard but a dashboard that was just crazily overwhelming it's like trying to go in to fly an airplane and you have no

idea what you're doing where do you start what does this mean like you know and you start to freak out so you know it's just about reducing the user interface and making just a little more

simpler and then we talk about when is one and when is one okay what is what does this even mean and and it's one of those things about you know you embrace the platform you embrace the the things

that we have on the platform and you kind of say these are the mental models we have for the user here's a user experience that's been put forth yours the design principles I'm

gonna adhere to them because as soon as you start to kind of you know I guess break away if you could use that term you won't break away from the design principles put forth by a platform you

start to confuse the user and the user goes to you know Windows platform they understand certain things about how to swipe they understand that gestures they have all that mental model you want to

stick with it you don't want to kind of like totally change it now to innovate it and to build upon it good thing for sure but to totally break away from it and do something else that's where you

start to confuse the user and the users start to be like a sense of anxiety tough balance to be innovative and yet not paradigm breaking I mean that's and that's a paradigm being the MVA points

do I get using repair yeah no you're challenging me I'm just gonna be like talking about synergy all day long but but you know it's definitely one of those things where it yeah innovating

that it does become difficult and it's and it's one of those things that's why you see a lot of them you know UX patterns are innovated I say a little bit slower than other

things because people understand something they get used to it personal yeah yeah totally and especially with all the devices and all the platforms coming out you know it becomes one of

those things right it's yeah you're right it's a great thing that is in your pocket and in your hand you're gonna use it everyday and interact with it while you're on the bus

and trying to catch the bus and trying to make decisions quickly and trying to email your mom like that's personal yeah yeah you know that resonated right there yeah thumbs trying to email my mom she

doesn't understand the idea of autocorrect so it's really interesting she should like this makes no sense and i was like i think that's like fodder for nice good social pictures you know

anything right gifts yeah this gets gifts from now on um so yeah you know thinking about those kind of things and when we think about designing UX a lot of people a lot of Ella pers feel

like design is one of those things that's very separated from them I'm a developer I'm a designer there's a silo between the two I can never cross over and you know just like coding is a

learned can be a learned skill I mean we've seen you know for example these kind of courses all sorts of courses for coding the same goes for design and design can be a learned skill now it's

the same thing you might not be have that kind of natural nature to pick it up really quick like like code for example or or vice versa but you know there are some things that you can kind

of apply in terms of design and and teach yourself and learn and and appreciate and your own work as a developer and so when we talk about designing UX the two things you really

really need to think about that just you know right off the bat are unity and consistency you need to think about these two things and and everything should be unified and consistent because

if something is consistent you're setting a user expectation and this is both about design and both about UX so how something works and also how something looks so unity and consistency

will kind of come back as a theme throughout and you'll see how how incredibly important it is and how just by keeping what you're doing very unified and consistent you're already

kind of reducing that learning curve for the user and you're kind of increasing that transfer of trust right because design transfers stress and at the end of the day you might see something and

it's a crazy interface and you may say oh like I don't know looks a little sketchy or it's you know it doesn't look like it's very polished let's see how this works

but you might see that exact same thing super polished looking you know you know and all of a sudden it looks like a valid platform or a valid program for trust you're just like boom I get it

like I think this is gonna work well so with unity and consistency are you saying that it's okay for me to make my app look terrible as long as it's consistently terrible I mean it's like

spelling if you consistently spell it the wrong way maybe that maybe that's how much yeah yeah hey if you're if you're consistently making it look bad maybe that's what you're going for I'm

all for that as well so let's talk a little bit about just you know unity and consistency across the board in terms of user experience and user experience is one of those kind of phrases right now

you know it's really come to light in terms of building for the web and native applications and you know everyone knows the term very few people can kind of wrap their head around exactly what it

means you know and what does it mean to you as a just a developer working on your own little like passion project right so we're gonna go through just a couple things that kind of happen and

user experience and user experience what we kind of want to work on are things like user centric design I'm gonna walk you through the typical UX process and you know just designing for touch and

and some things that you really need to consider because you know touches a whole new world it's got a different kind of input and you need to make special considerations for this so we're

going to talk a bit about that so for you six user centric design what does this mean it's you can go and search this and you will see this everywhere and there's blogs about it and there's

all sorts of information about it but I mean and it's very core it's about putting the user first and so when you go to build your app or when you go to build your game you really want to think

about putting the user first what what did they want what do they need to do and I know I don't know if you feel this way Jeremy as a developer but I know sometimes I'll like put in a feature and

I'll be like that is so cool look what I did I've been being compiled yeah you know and I'm so proud of myself but it's something that no one else is gonna use

or probably appreciate right so I just put in eight hours of time to go and put in that feature that probably no one's gonna use when I could have probably thought about the user I thought about

what they're gonna actually do or use or try to perform on my app and try to put in those right and so that that becomes a different mind shift thinking about a user versus you know thinking

about kind of like what you want to put in so you know you've got a in order to think about the user you got to kind of develop an understanding of them like where are they coming from where can you

find them what kind of tasks do they have you know what environments are they going to be using your application and you know so sometimes you're sitting at home and you're watching a TV show and

you're and you're you know you're you're pursuing one of your apps another time you know you might be on the bus and you might be running trying to get something done trying to answer you know you have

all these different contexts and you kind of need to think a little bit about that too because they really inform how a user is going to use and what they're going to try to do at a specific time so

let's think about typical UX process right and UX process kind of changes across the board you know some people will say there's different things you do and different deliverables and all those

kind of things but the typical u.s. UX process kind of has a sense of like you're gathering requirements and then you're going to analyze and then you're gonna figure out a plan of execution and

then you're gonna try to execute it in a way that's very low five low fidelity right and this is simplified so you know you user experience person might be like no you have these steps you have this

kind of thing this is just it kind of like you know just a very baseline way that you might approach something and this is something that you as a developer can approach and in a way you

kind of do this already just by being a consumer so let's talk about requirements gathering so oops sorry um so requirements gathering is the idea of going through and and figuring out

where your users are what's what's a demographic you know how are they going to be using this am i building an app that's a you know a to-do list for very busy families that it's going to be

shared am I am i building something that's um you know more for you know kids and it's got a little bit more for gamification and a fun feature so you got to go through and kind of you know

do all your requirements gathering and that's not just about user it's also about business you know it's also figuring out you know how you're going to actually

achieve all these things how you can execute how you're gonna plan so just getting the requirements for your project and then you want to kind of go to

analysis and so for analysis usually what you're doing is you're looking at the user and you're looking at tasks and you know you're analyzing basically okay so you know in terms of the user here's

the two or three things that they really want to do and so you might be working like again I said on an app this I get to do lists let's share it of you know across families that's how you see that

kind of prime target let's say um you know you want to kind of go and figure out who who are these people how many people will be there how are they going to use it differently what's the major

problem this is gonna solve you know what what kind of things do they care about so does a very busy you know parent care about something that's very different from children so it does a

parent want to see a week for you for example you know for a child who might only care about the day at hand my you know not might not even think about the future and so you want to start to think

about both the user and both of both the things that they're going to try to accomplish and you want to kind of roll those in and figure out okay based on these users and what they're trying to

do what kind of stuff am I going to actually put into this app and that's where you come in to you know function allocation how is it going to function what are the kind of things that I need

to build out what are the primary tasks so usually when you get an app and you know people been saying for a long time a you know an app does one thing really well or you know that's like smaller

kind of little kind of like caspase apps do one thing really well so you think about your primary task and then you kind of think well they might also want to do these things you know because for

example you know Twitter probably never expected that people would be announcing births on it or that people you know would want to do all sorts of other things that they're doing and so you got

to start to think about the primary task and then the secondary kind of tasks um and so that's where you come in to a function allocation and you're just trying to figure out okay what am I

going to do here what makes the most sense and then sorry we get into the good old time of wire framing and why our framing is the step that I mean beyond the rest of these most of us

don't do and it's probably the easiest thing to do have you ever wireframes an app sat down and kind of thought about it before you started building or you like because I I'm a bad bad for going

right in and being like code right yeah okay and so you know you're not as efficient when you do that no of course because you're thinking about everything the whole like you have

no plan yeah you're just like oh yeah I'm just gonna like code this out and I'm gonna have a couple features and then and then what and it just takes so long to walk down the wrong road for a

little while and then come back and walk down a different road if you're working in your coding environment instead of just working with a pencil yeah I I mean I come back to wire framing all the time

it's one of those things that I force myself to do sometimes it's just you know paper and a pen sometimes I'm depending on what I'm building you know and if I need to share it with other

others it might be a little bit more documented but wire framing is super super important and there's a bunch of ways that you can kind of wire frame out so sketching we talked about sketching

is a really good one you know paper and pen brow your screens just figure out you know sometimes that just helps you figure out the scope of what you're building more so than the actual

functionality behind it kind of gives you a sense of how many screens you might have right or that kind of thing and if there's gonna be enough room on the screen for everything right and and

you know do you need to kind of change how some of these things are gonna work or or you know it gives you that nice you know overview and some people use sketching as as a deliverable almost

like it's something that's just final and it's you know perfect and it works in that way too but for me I know personally I like to use it as like whoa okay this is actually bigger than I

thought it was and here's kind of here's kind of the flow that might happen it's really nice to have it down on paper because then you can scan it into your computer put it in your file and it's

just there for antiquity now when you have this app that's actually in the store you're gonna later on be able to go back to the wireframes and see it in its conception well yeah and it's and

especially when you start off this way and then you see exactly like where you ended up I mean there's always a divergence you're never gonna follow that plan just like bang bang bang bang

but you're always gonna be like it's really interesting just to look and be like okay so that's how I thought I was do it but this is actually how why does that make more sense what did I learn

from that right so sketching is a really good way so I've actually done sketching on you know just pulled some paper out of the printer and sketched on white paper many times and I got kind of

frustrated that I didn't have all my proportions just baked and so I made a document that I use all the time I basically just print this two-sided and you guys are welcome to it as well it's

at code foster comm slash design sheet and it's just a PDF file go ahead and download that and that URL is gonna be printed on your your design sheet so when you run low on them you can just go

back to it and print some more so hopefully this is helpful and on one side it gives you this navigation which we're going to talk about later and on the other side it just gives you a

standard base 1366 by 768 with the the unit squares on it so that you can kind of just get everything lined up and follow the guidelines more easily yeah I mean it totally makes sense you want to

have a sense of you know before you start your app like where where is it gonna live and you know you want to kind of adhere to those kind of platform standards right going back to what we

said earlier there's also you know wire framing in terms of wire framing there's a bunch of tools that you can use out there it really depends on how you want to do it and what you're most

comfortable in you know for example I might I might choose something like Visio or PowerPoint sometimes you know it's even HTML but you can use a bunch of these and it's just a file quickly

laying out items and showing you know how they could work and that's all it's about it's not about design it's not about layout you don't want to focus about like the little aspects here of

like how good does it look if you do that you're focusing on the wrong things you're really just trying to focus on how's it going to work information architecture how am I going to navigate

between these kind of things and just concepting what your application might be at this point and so there's a bunch of tools that you can use and once again it's just whatever is a quickest for you

is probably the best solution and then we get into prototyping and prototype is actually where you take that wireframe and you kind of make it work and and you know sometimes prototypes become living

products and sometimes they become toss-away you know things that you never use and so for prototyping once again there's a bunch of things that you can be using you could go right into the

platform and just build something really really quickly I tend to do that quite a bit you know instead of having actual images I'll just use like a fake image and you know use it all over the place

instead of content I use lorem ipsum you know why people use lorem ipsum I don't know why so people use lorem ipsum because if you put actual text on the page and you're just trying to show

placement lorem ipsum it's it's you can't really read it right laughing so you're not focusing anymore on what those things aren't saying so you're not going to nitpick about how the text is

wrong or it's out of date or it's you you're gonna focus on layout I see so that's usually why people use that and so for prototyping once again rapid prototyping get up and

quick and just get a sense of like how it's gonna work usually take the things that are the most problematic and figure out those first and then you're good to go with those kind of things and paper

prototype so once again I said you know you could just go and build a little html5 app or you know c-sharp nice animal however you want to do it a lot of people use sticky notes I love this I

love this process more than anything I also have little magnetic stencils that I can kind of move around and for a paper prototype it's just like once again you know you have your sticky

you know you're putting your stickies down and then oh I forgot about that screen let's move this one over and it becomes a very efficient way of kind of figuring out all those kinks so you're

doing a login process oh what about if the user forgot their password and come back okay new screen uh you know but you're not worrying about copying pasting moving things over you're just

worrying about Boom Boom Boom and then you can kind of lay it out and say okay here's my paper prototype if you touch the screen you get this screen and you can kind of walk through it so low

fidelity right low evident yeah no effort not necessarily authentically digital no definitely not definitely stickies no but it does give you it does get you there quicker so designing for

touch and designing for touch has a whole bunch of different considerations and when we think about touch we need to think about the fact that we're using this we're using our finger and our Fe

girls have various sizes right depending there's this really great clip from The Simpsons that I wanted to show and it's basically when Homer gets really fat and you can't dial anymore and he has like

this little wand yes not like a dialing wand because his fingers are too fat so it's like you're mashing the buttons right but that's the truth is is that you know our input is now variable right

and it's also not as precise so you know when you come to your mouse you can move really quick you've got a very good sense of precision when you're dealing with touch you don't have any of that

you know sometimes you're clumsy I always call it the fat thumb you know when I'm trying to text or something and ends up just being like blah blah blah it's exaggerated when you're trying to

use a browser and it's zoomed way out and so the links are just microscopic and you're trying to hit the right link and so you have to think about what where is it detecting is the touch point

here is that the middle of my finger like where exactly do i touch that link in order to hit it well and the fact that even when you do that and if it's like that you're probably covering what

you're trying to even navigate feelings you know so you don't even know what you're you're just like mad clicking thinking it's gonna be one of those links because you don't even you're

covering it you don't you're gonna include it yeah points do I get for a clue Oh 35 okay seriously guys I am behind in 17 years the word bingo here I got it like I said precision I think

that's pretty good there you go but you know you gotta think about those things when designing for touch and so you know touch you know small controls are really difficult to use with your fingers and

so this becomes almost you know when you're working in in platforms like ours it you know support touch we've we've taken this into consideration for you it's it's inherently built into what

we're doing but you're you know if you're coming from different technologies and you know you're trying to use them you gotta really think about this especially if you're doing like

HTML Javascript you got to think about when you're doing that design how big of that control you know and so there's variable sizes that people say that you need to make a minimum button size some

say it's 40 by 40 you know some some say it's bigger sometimes they have the idea of icicles which is actually look smaller but it's detecting kind of like a bigger bounding box so you have those

kind of ideas but you want to make sure that if someone's going to you know be using your app and they're going to be using it with touch because they are that's just touches what we're doing now

that you know that their fingers not going to include something that they can easily tap it that you're forgiving and that your interface is affordable for those kind of mistakes you want to keep

tasks very local so if I'm you know operating in this corner and I click something and it's going to bring up something or context menu I don't want to have to go all the way to the other

side right and so you know context menus come up where you're at he's like a Mancha's away can be so far it's just well you know so you ever heard of them the term gorilla arm no so

it's one Oh so many so many good phrases say coins for gorilla alarm that's got to be like how many yeah so gorilla arm is when you kind of hold the device up and you're using it and you're kind of

doing this right so you see all these images and people doing that or people you know taking a photo with their tablet or that kind of thing don't be that guy don't don't be that guy cuz I

will take a photo of you and then post it on Instagram with your regular camera or phone exactly exactly oh oh New York has so much of that um but you know you have that sense of you

know body fatigue right and and that's also something to consider touch you have a different kind of fatigue and you know depending on how someone's posture and how they're holding it up in the

context that they're using in they could get very easily fatigued so you really want to think about keeping tasks loathe goals so they're not navigating all over the place and feeling like they're

dragging stuff you know it's a digital experience not a physical one right you want to avoid dependence on hover and I've said for years hovers dead hovers dead like don't even think about hover

and so any kind of any kind of you know hover over something and something pops up that just doesn't work in in in context of touch yeah so you got to really rethink about that and think you

know that is a functionality that I'm going to provide and I'm only providing it for certain types of input ie mouse you know what are you gonna do for touch and why are you making them necessarily

different yeah so you need to think about those kind of things um number one thing I hate doing on a touch enabled device form input text input drives me nuts like you got to sign up for

something like a meet-up or something you're like typing in a whole bunch of stuff and by the time that you've done it it's the most on efficient process of all time and so when it comes to touch

you really want to reduce text input and you want to think about there are other options that I can provide or if you know there's no choice because sometimes you guys just put in your email for

example you know how can I make it easier for the user and sometimes if you're filling out a form and the users been there before if you can pre-populate it things like that so you

really want to think about text input and selection selection is really really really hard it's just you know touch is super hard to go and select something and get coffee and that you know I mean

even if it is easy it's a very time-consuming process so once again reduce text input right fingers are far less precise and we're you know much more variable than a mouse design so

we're getting to the good stuff design are you still here he's still away because it's been good already you're still listening to me it's impressive design I'm gonna just cover you know for

kind of basic principles and we're gonna go through maybe some exercises as well and when we talk about design we're gonna talk about mostly in this context layout and usually when I use a word

design I don't use it just as layout because design is not just layout design is the overall experience you never want to say that a designer can you just lay that out you know designers think about

things I think about information architecture they think about placement design is more than just um you know making pretty pictures as much as us like to kind of categorize it in that

way so I'm gonna go over some basic kind of design principles so if we're looking at the idea of a grit right and a grit design is a really big thing in design it kind of allows you to you know slot

out where things should be and how they should be aligned alignment is a huge one if you come to an app and something's misaligned you might not notice right

away that there's you know ten margin here and there's only eight here you might not like right off the bat notice that but something might trigger in the back here

head and immediately you have a sense of like Oh like and maybe you can't articulate why but you you do visually kind of notice those things you know what that's like is probably most of you

have seen films that are done with CG and in in the CG world you know you have animators that are determining the mechanics of how everything in the movie is moving and if something doesn't move

according to physics or according to human or monster Anatomy you you might not be it might not be above your threshold of awareness so you don't consciously notice but subconsciously

you realize that something's not right yeah it's real yeah it's not real exactly and at the end of the movie you're gonna say it was all right but it just didn't feel right

yeah because everyone understands physics we know what it's like to drop a ball we know what someone looks like when they're running we've learned it when we were very young and fell out of

our crab right yeah inherently yeah same kind of same kind of thing visually right and so when we look at something like our platform and we're looking at the idea of a grid a grid is a way that

you can kind of collect and gather information how you kind of you know tell the user what's more important so in terms of like a visual hierarchy you know those kind of things and so always

kind of keeping in line with a grid is a really good idea because it automatically kind of sets you in place for some good design decisions if we look at tools and resources and you're

looking at just the idea of like creating different kind of grids and grid layouts there is a bunch of tools and resources for grids so I I mostly work in HTML and JavaScript and CSS when

I'm designing sometimes I'll go into Photoshop really depends on what I'm building and there's a whole bunch of tools and resources that you can use for those kind of things there's plugins

that you can use there's a whole bunch of tools in terms of HTML and CSS that we'll talk about later that will give you a sense of grid design and how to adhere to grid design and why it's

really important and once again the importance about grid is unity and consistency always maintaining the same margins always having things aligned having you know if you this is your main

focus it should be wider than this one keeping in that sense of a grid yeah so we're going to talk about hierarchy and placement and once again like I said a little bit more abstract kind of design

concepts that will bring back and hierarchy and placement you know kind of helps define what's important on a page and where do you put it and so if you look at hierarchy and proximity and

you look at the example that's kind of on the screen you can start to see how proximity really helps you group things right so it's like a series of comments on a comment like on a blog and you have

a comments at the bottom they're all grouped together so that you know that they're within that thread and maybe maybe if that thread has one major item the other things are tabbed in but the

proximity tells you that they're related and so proximity is really really important so if you look at the first you know far left you'll see like there really is no hierarchy and the proximity

is all the same so all this content is kind of the same and then when you go to the next one you'll start to see groupings occur so you kind of almost have like a two column layout there

where some columns here and then some columns on the right but once again hierarchy wiser you know they're kind of equal to each other you get to the third example some things are smaller than

others they're all grouped together it gives you a sense of hierarchy and then again you know to the right another example so you can start to see how sighs when you're doing design and

layout and you start and see how placement really really does matter once again this example of the boxes and just the idea of if you look at the first one you'll see that the content

that we're supposed to be looking at or it has the most focal point or that is most important to us it's gonna be you know the far left big box you go to the next one it's you know it's where that

big box is so that's where your eye travels to because you see oh sighs so that's often when you're viewing a screen logos are put in the top left right or main kind of navigational

features yeah because that's where your eye goes to and an imprint it's often in the Zed pattern or z oo Canadian isms coming out um yes presenting yes my homeland but you know on a screen it's

not actually kind of an F pattern so we still do start in this corner and then we kind of go this way you know so once again just understanding where people start to look what's most important size

and placement is a really really big thing and so visual hierarchy it's just being able to look at a page and saying based on size maybe based on color based on placement you know I

understand what's happening in this page and what's important so an HTML page for example that you do and before you apply any CSS and if you're using H ones and you're using h2s and you're using

sections and all those kind of things it kind of gives you that hierarchy right so this is the same idea you're starting to get that hierarchy um and once again just the same idea colors sizes they

give you that visual hierarchy and if you start to look at our screen again you start to see okay start buttons on the left you start to see that it's aligned with the user that's up on the

right you know you start to see the groupings of icons and their size so you know you can go and change sizes and stuff like that so you can figure out what is your own visual hierarchy so

hierarchy and proximity I'm gonna give you a challenge okay I'm gonna take it I'm gonna let you do this one you have four boxes I'm going to give you a couple of things I'm gonna ask you to

evoke a couple of things basically boldness show me draw four boxes and show me how you try to depict boldness okay let's see about this can I can I kind of draw on my screen here and I

have four boxes to work with yeah and I'm trying to evict and vicked VOC baldness I want you something I want you to this should say bold boldness all right and I force it can the rectangles

or squares four squared or square four squares memory square can they be concentric not concentric but embedded oh man serious for a head alright you make the wrong I'm just trying to do it

okay I'm gonna do kind of uh you know what scratch that one oh here we go I'm gonna do like one gigantic right one and then I'm gonna put some smaller ones behind it as if as if these ones are

growing and kind of going in your face yeah totally exactly bold okay I mean that's great should be right there in your face how about we'll do one more

awkwardness everyone awkwardness how do you vote awkwardness just by placing out proximity in hierarchy okay awkwardness oh boy this is a tough one

okay I'm gonna say there's kind of an elephant in the room and then there's these little things down in the corner that are like maybe out of place yeah that's good yeah yeah I might have like

actually took a couple of those and I might have like kind of rotated oh that's oh yeah but yeah so hierarchy and proximity can really give you a sense of you know just by placement what are you

trying to tell the user yeah right and in that case we took some random emotions but you know that kind of idea so let's go to typography real quick typography typography is a hard one a

lot of people really love fonts what's the font you should never use the font you should never use Comic Sans it's been it's banned across the board right um there's a little phrase that's like

never use it unless you're writing a poem about unicorns or something like that it was really great but you know typography we see it everywhere it's every day every day in life and so when

we start to talk about typography you really want to start to think about the fonts and you have sans and you have serif right and so violence usually fall into

these kind of two points and when you're you know dealing with typography typography can really evoke what you're trying to say really evoke the tone of your design and so you know a big curly

thick kind of font might be a little bit more playful a big scripty font you know we see those in weddings for example angular or something that's a little bit more angular pixel is a little bit more

game friendly for example so fonts can really help you kind of come across your design what you're trying to say or what kind of aesthetic you're going for evidenced by the range of emotions that

one goes through when browsing through a large list of yes yes no yeah you go through this it's like listening to music yeah it's I uh yes I mean for some people they love that for me I'm kind of

like oh yes and so when you're thinking about far the one thing to think about is that a lot of fonts I mean they've been around for years and Muslims are meant for

print but when it comes to digital for fonts to look really good on the screen they have to be able to be shown in a very small size and so that means they have to be hinted really really well so

one of the most expensive free fonts out there that most people don't even want to look at is verdana and it's it's incredibly hinted and supports all these amazing amounts of alphabets and so when

you're choosing a font just be you know be really considered about how does it look at a smaller size and it's you know if it's going to look good it's gonna be because it's properly hinted and often

that means that if you're going to the free fonts some of those free fonts might not have that for example and so the other thing about typographies readability you know you look at my

screen and already I'm tired it's a big long paragraph that goes across the whole entire thing like I don't want to read this you know it's too long and so you want to start to think about

readability if you have a lot of content and you want to start to think about how can you improve this and so you know that's why a lot of newspapers have multiple columns so you know you have

only a certain number of characters within a paragraph line and you kind of keep those chunks right and so you know just right there that's it that's a huge improvement I mean it could be way

better and you can start to think about things like line height and line height a lot of us when we deal typography we don't want to deal with any of the little details but we want to start to

think about line height and lines just increasing the line height usually it's like 1.5 so if you're thinking and line height again this is a space between you know the lines you know by default often

you'll see 12 you know 12 pixel font or 12-point font with 14 line height if you increase it to 1.5 of that already it becomes more readable color we're gonna talk about color quickly and color we're

gonna try to cover all the colors no too many but I'll give you a little little quick intro to color theory so colors evoke emotions whether or not we want to admit that right you know I tend to wear

a lot of black I could wear black all day long um it's a little goth girl hidden inside of me I guess but you know when you come when you come

to color color really doesn't feel commotion so when you're thinking about what colors are used and why you know you can start to think about color theory a little bit so you know we're

looking at yellow it's you know it's all about creativity and warmth it's also very hard hard color to deal with on the screen you're talking about orange that's often using calls to action it's

very alert it has a lot of confidence you know you talk about red I mean red is about stimulation it's bold you can ignore it you know all these colors dude do you know why blue is one of the top

colors used for logos I don't so blue is the one color there's a couple things behind it so blue is one color that females and males can both agree on we both kind of say so gender wise we both

kind of say yeah blues okay color cuz I mean I'm sure you're gonna be like purple pink mm and I'm gonna be like brown you know so you know it's one of those colors we can both agree on it's

also blue and green have the most amount of shades that we can kind of decipher oh so we you know so that's why you see so many logos these days of blue and different shades of blue and they're

just a little bit off right so you start to think about those things and and for example black if you think about black used we're thinking about brands like you know Chanel or or that kind of thing

that's all about on sophistication and luxury so colors you know they there is a reason why people choose them right and so you know you're thinking about red and you think about all these logos

red is about excitement but it's also about increasing your appetite like it makes you feel hungry or more hungry so often you'll go into a restaurant and they might have a couple walls painted

red or you'll just see all their logos and their logos will be all full of red right and then you'll have you'll have you'll have blue logos and and blue logos often are blue right so you know

you'll have a Skype you'll have a word press a lot of Airlines so a lot of those companies are trying to evoke security and safety and and and you know that kind of emotion I use blue um so

when it comes to color palettes you can kind of separate your brand versus a user interface function and so sometimes you might have a crazy color in your brand you might have pink

and you might not use that for your interface and that's completely okay so you know the idea of a color palette is choosing you know four or five colors you try to keep it a little bit low you

might have one that's your primary color and the other ones are your secondary and they're used for accents and you use them consistently so if you're going to use an orange for a button you're going

to try to use orange across the way for a button if you're going to use a green for a link you're gonna try to use green you want to kind of make those connections to the user that this color

means this so you're building up that mental model for the user so if we look at something like Foursquare app and you're starting to look at the colors they're using you know primary color you

can see is blue we see it everywhere and then you start to look at okay they used orange and why would they use orange there because they want to draw my attention to this offer they have a

couple other colors like gray and they have green and those are accent colors and they all kind of go together and they're harmonious but they also draw my eye to where they want me to be looking

at right because if they had made that orange special offer you know blue or a shade of blue it wouldn't draw my attention in the same kind of way don't know how to build a

color palette totally okay there's a whole bunch of tools out there and one of my favorite is cooler from Adobe and you can just go in and you can start playing with it and pick a main color

and they'll give you all the other shades that go with it um so cooler is one of those things that's just a great if you don't know how to start with color you pick your

favorite or what you think you're going for and then you run with it so I was gonna do a quick little quiz on color palettes and get a sense of toned because color palettes really apply to

your user you want to pick the proper color palette for them it's another quiz it's another quiz it's for you all right okay so you're looking at the top left you've got greens and blues what kind of

app would you you know who do you think what kind of app would that before well I would that rails there you go exactly right like yeah yeah like re-add exactly right a little bit more mail

right go to the you know top right okay so I'm thinking aquatic photography it's like you prepped for this or something it's really amazing yeah okay okay bottom bottom left okay this is slightly

feminine but not entirely feminine but it's pretty sophisticated and pretty bold and I'm kind of thinking I'm kind of thinking kind of a bold online jewelry shopping I I could totally see

that I can see maybe a social network aimed more towards teenagers there you go you know or that kind of thing yeah far right boy that's a tough one yeah I feel like the shades of gray in

combination with the blue make it fairly modern and then there's just the splash of real bold red and so I used correctly I think it would be very good for a kind of a modern high tech company yeah yeah

thing like that yeah corporate green green blue very corporate and Reds just enough to be like take you over the edge yeah yeah and when I try to apply that to the

other ones I can see how blatantly they they don't fit if I try to think corporate and look at the one on the bottom left it just does not fit right exactly yeah perfect

so we were going to go through a couple of demos of great design and UX I think and and you know do it fairly quickly and give you a sense of just you know a couple apps out there that I think I

mean you I'm sure you have your favorites as well that are doing some really great design in UX and so I'm just gonna bring up let's see great British chefs have you seen this up no I

haven't oh that's beautiful so once again using non traditional non standard fonts right a whole bunch of images they're using a really great grid system here and you know you can start to see

so once again look they're animations they bring you from screen to screen they're transitioning you as a user you can see you can drill down and it's just not sliding things over it's it's

building that like you've actually navigated I'm going to kind of change this experience for you and then build back up and so you know you can start to see you

know every time you're clicking you're always moving the same way because you're drilling down in information and big beautiful pictures I mean these are gorgeous it looks amazing on my screen

and you know just simple little animations like that little drop-down comes down you know you can view the recipe you know that kind of idea so you know something like this once again a

lot of love paid to the attention and details animation is really used here to help the user Tran transition between you know different types of information and different levels of information good

use of fonts and it's simple there's really nothing on the screen here that's taking away like when you think about food you're thinking about oh yeah I want to be eating that right now and

they do a really really really great job at that so then I'm going to show oh come on all right I'm going to show quickly I'm gonna show Hulu and Hulu does something that's once again you

know you're browsing content I'm sure you use Hulu who doesn't I don't use it you don't know you know who are you where did you come from Hulu is my life I love hulu hulu you

know i mean it allows you to go through and it's embarrassing because you're kind of seeing what i watch right now shows a little too much about me hopefully you don't see all the

housewives in here but you know you can kind of go through and they've done some really interesting things like this this drop down a flight you know they're they're using that user convention and

you can bring it down and you can see all of these categories but they do it in a really nice way it's not always there cuz it's almost you know two-thirds of the screen and so you know

the fact that you can bring it down and take it away when you need I love that drop down nav it's I mean it's a really great kind of way to go and navigate those items so you know Hulu does a

really great job of those kind of things um can I share one yeah absolutely so I found this one that I really like I don't actually use this app on a daily basis because I'm not necessarily a

journal or but this one is kind of a daily journaling app that makes the whole process nice and easy it's called seven-day and I just feel like the the design is pretty standard

you know we've got kind of the typical Windows 8 design but they've obviously put a lot of thought into the their use of typography and layout and when I go in and actually fill out one of these

daily things and take notes this is what I did today and I add some photos you know it uses the photo picker but the way that it's laid out just kind of feels right feels

good so it's a really simple example but it's one that I like yeah I mean that's and that's exactly as I mean I think you said all the right things I used it it feels like this is what I should be

doing what I'm doing that yeah it totally made if I was a journal or this is the way I think right it's the way I think right and so that's totally how you want to be feeling when it comes to

those kind of things so I think uh I think that's kind of what I've got for you know in terms of just showing some apps and and and giving a sense of design and UX once again just kind of

like a brief you know overview there's some really abstract exercises yeah but you know it does give you a sense of why the choices are made that they're made whether they're in our platform or any

other platform and it gives you a sense of how to go and build your own kind of things and take away even just a couple of those kind of tips yeah do you want to give us just a kind of an elevator

pitch on what we're gonna be looking at next with marketing and module 2 oh yeah marketing marketing the thing that no one understands and no one really does that's how I phrase it cuz it's such a

vague umbrella term but I'm gonna talk about you know you're your developer you need you build an app and you are starting to think about things like how do I get the word out there how do I get

more downloads and so it's really aimed towards you know someone who's just got an app or game in the store and and they want to kind of follow a couple little processes or things that they could be

doing that might take some time or might not take some time and you know well I get questions about that all the time so I know that there's a lot of interest so I I'm looking forward to it so let's

join back up after a short break thanks for joining us for module one and module two is next we're gonna talk about marketing yay