Live UI/UX Design for Video Games with Nick Slough & Ian Wall 1/3

[Music] [Music] [Applause] [Music] hi everyone we are back with Nick and Ian we're still plugging the computers you know we are in a big building hardly at the headquarter in San Francisco and just plugging some MacBook Pros and then we will start this huge design UI session with something I'm very excited about because you work in the very specific field an industry you know what I will let you introduce yourself sure and run this show ok ok no problem no problem no stress I mean it's a company Nick and I started do UI and UX design for games I've been doing UI design I'm sorry step you know very simple very intuitive right yeah like I made a lot of mine but yeah I've been doing UI design for about 20 years and been doing games for a little less than that and yeah worked on world Warcraft EverQuest way back in the day spoke games yeah small games never heard of those right planetside was at Sony as well yeah that pretty much runs the gamut and now we're doing this thing everyone I'm Nick Slough other creative director of a beholder or UI UX studio for our games I have a similar background Ian but a little different um I started out traditional art doing comic books that sort of thing then transitioned over to advertising and that's where I learned and kind of cut my teeth on graphic design gone into Photoshop Illustrator and then transitioned over to gaming about nine to ten years ago and I've been doing that ever since the games I shipped it Blizzard I should Starcraft 2 worked on Diablo 3 Starcraft 2 heart of the swarm and Ian and I really suck our teeth in together as a team for heroes of the storm that was that was the game we worked on the most that coverings us up to date okay plug in this stuff here so do we have video can video game players into chat by haha let's see we the other industry people put up stuff on behance all the time yeah you have for a bit yeah we all live on events this week Nick and Nick got started on B hands before I did pretty sure yep I put up my initial hmm your initial portfolio miss your portfolio is f on well my scene really early days of behance I put my portfolio up there and I started with Starcraft and Diablo stuff up there so it's 3-4 years so the concept of the show because this is also the first official atom II live stream on Behance because now we'd be live every week right yeah this week it's about UX design next week about graphic design and yeah caching within two weeks about illustration digital painting which is also super important in the video game industry and so the concept is that okay we have the theme we have these apps and we invite the top coaches and we just ask you to create something over three days because it will be live with us today two hours two hours tomorrow in two hours on Thursday so what is your plan what do you have in mind so well I guess one thing is we'll talk a little bit about how the UI process in general works for games versus what other people kind of perceive as UX or UI process traditionally across web and mobile and things like that because they differ drastically so one of the main things is like will will get like a brief or something like that from either if you're working in the industry you're gonna be at a big game studio or small games you might be in Google whatever you get like some kind of design brief or like your game on Steam it's just if I just put that on the right just one of those Steam games one of three hundred thousand of them whatever but usually working with other game designers and and so it's a very collaborative experience in terms of the UI isn't necessarily the star of the show it's a part of a concert and in a way part of the orchestra I guess and the that that process in general is a lot more I guess iterative and you'll you'll build prototypes you'll build mock-ups things like that right yeah we're still setting up as where uh as we're kind of here and we had to go for for two seconds grace because I've been running it to be life for a very you the first time we have these mobs no haha yeah actually am I the only one of the only reasons I have that is because I left - yeah I would have brought my razor but I actually left mine at home so I had to pick up this one I need extra buttons just like the size of my brush and for exactly I don't actually have a map because this is like a brand new Mouse so this is all like completely so we start with a brief yeah so we we kind of open a liberal a little short one so obviously this is made up this is not a real thing we're not actually gonna make this game we did we made up we've made up a game from scratch just for this so kind of filling in the gaps of what a client would typically is so this is we're calling gobstoppers it's don't name a game that too terribly but we just used this together for fun so it's kind of like a Halloween adventure game because it's Halloween so why not so it's like an action RPG so it's kind of like Diablo kind of ask okay obviously none of this is is actually real so it's like we're we're kind of hand waving the game design a little bit although we both have done game design in the past you so it's we're just doing a really lean thing so we can get some screens together so yeah this is like the idea is that's an action RPG so you've got the standard tropes of like an inventory screen and you're looting stuff and collecting candy in this case and you're trying to defeat the gob which is the bad guys right okay hence the name so yeah this is basically kind of like a overview of like what we want to build so we want to do go and put together a UI kit and a main menu and an option screen the splash screen the loading screen like all the pieces the first experience yeah the first experience and then all the way into like an inventory screen like and so we're not gonna art everything because we don't have time but we're gonna are some six hours is a good amount of time but it's it's it's so we're kind of we'll do a little bit of the UX stuff and talk about it and then we'll do some of the art stuff and talk about it and we'll kind of go back and forth and okay no I have this song of ghostbusters yeah right before Christmas oh no yeah come on raiveer so this is like generally like we would normally get this from a client or we this would be like a design overview for what would be given to us or we have a meeting with a game designer and have this conversation and kind of overview the game and it's co-op or it's not and so in this case we're doing like a co-op type of game with like three other friends and you do couch co-op or online play or whatever and so we'll have representations of other characters status and stuff on the inventory or UNAM name program the hub screen things like that so graphic designers you know like through the inspiration going to have to read a lot of magazines and stuff yeah so in your case comes the games yes yes yeah we play a lot of games and some of them I mean poor us some of them we don't really like very much we were like even the genre we're not interested in but they might have something very interesting for us to take away from it available and the thing that's interesting is some of these games have deep systems in them that you only really get exposed to if you are 5 10 15 20 hours into the game so sometimes we have to we have to dive into the game and spend about 20 hours playing it and analyzing it's kind of like when some of the first things when I worked in advertising like once you work in advertising all commercials are burned for you like it's kind of it I'm not saying that all games are right I love playing games but definitely as we work on games and we're playing them you analyze them and pick them apart in a different way that isn't the same way that you just sort of blindly enjoyed them beforehand now you're kind of looking at them and you're like and then and then you find yourself saying things out loud that you're just sort of like now you should just be sitting down having fun playing the game and I'm like oh they didn't really integrate that system in very well and I don't really like how this is but you start over analyzing yeah interactions and stuff or you kind of see the behind the veil a little bit too because especially if they're using particular engines you have an idea of how certain things get implemented and and so it takes a little bit of a mystique away so you kind of know how the cookies made so it's less impressive I guess then if it's just materialized from nothing so yeah Jenn Wilson yeah we have a green screen behind us yeah we don't have that robot behind us huge board really crisp no perspective distortion is pretty impressive Helen is saying so Helen is an animator mm-hmm she has a semi shoe when she watch your movie yeah oh right yeah oh yeah you see it working cycle yeah usually in CG movies every once in a while you see like hands click through something or something like that which is a very common thing in games like it's very difficult to make stuff not cliff like if you play Warcraft like armor and horns and hair and cloaks and all that kind of stuff like clip into the model because it's very difficult to build all that stuff so there's a lot of math to not have it expensive on computers right yeah or just tons of prep and all the models because those things all get bill is one piece so like every armor piece gets built onto the character and yeah it's it's a lot of stuff to track and keep perfect but yeah so this is just my honor thank you okay so how do you want to dispatch the work so I think what we're gonna do is we're gonna give kind of headwaiter overview of like like ian talked about some of the some of the the brief overview of the client and I kind of like like what we typically get from them and then we're gonna talk about generally what we give is deliverables and then we can work through those so and we we can kind of depending on if if people you know chatting in want to see certain things on that like we can stop we could spend a lot more time in this I would say that for it for a UI UX stream there's gonna be a decent amount of illustration and painting and Photoshop in it as well because in games is really hard to get away from that okay but so we can if if people are interested in that we can dive more into that mostly the division all that's not hunt percent Ian's gonna be handling a lot of the XD and wire framing work yeah and I'm gonna be handling a lot of taking it and bring it into Photoshop and and and sort of polishing it up and you can kind of see the interactions that we have in between passing it back and forth and and we sort of kind of where we kind of find that balance so yeah we can start really wherever someone's just saying in chat they just reached local thousand and here's of the storm oh my god holy crap yes grats that's that's a crazy amount of time and yes you know it could be like every week on behind that that /dr so this would be a to be live show so it's on Tuesday Wednesday Thursday every week pretty cool okay so yeah so you want to jump into mood boards or you want to jump in bug example directory set up the project let's jump into let's just give a break we saw the brief but let's just do a brief overview of kind of like what someone give us so in this example we talked about gobstoppers and go ahead don't steal the name it's awful yours if yours happy so you know traditionally we you know I would be sitting down on our first day of work and we we go okay what do they need and there's Louisville pearls are they need a logo they need a creative and art direction for their UI so a lot of the times games will have a creative an art direction an art director will be there but they wanted UI that meshes and works with the game world so the environments and the characters themselves have a look and feel to them and typically when they come to us they want those to have a very magic and feel that also kind of is usable so we'll probably usually at this point break off in tandem I'll break off and start funneling in our direction in a great direction and if there's UX work which typically clients come to us for both typically Ian will start breaking off and working with the system designers and the designers of the game and start breaking up what's the experience that someone has walking through that so typically at this process client let's say it has nothing they don't even have a logo some and that actually happens a lot more than not like there'll be a certain stage into a game of models they'll have environments they'll have design and may even have a playable game for us but they don't have a logo they don't have a look and feel for basically have a demo also yeah they might we've done that for clients as well where they they're actually actively pitching a game to a publisher and they don't really have anything they don't have any of the marketing materials ready and they're in the act of of polishing what's considered a vertical slice if you're not familiar a vertical slice is essentially a version of the is a very thin version of the game but it's it's vertical because it has the system's active so if you can open inventory there's an inventory if those crafting crafting is there it doesn't have all of the crafting things built but it lets you experience that aspect of the game so it's built in a way that is done relatively rapid and it's it's built to demonstrate the full breadth of the game without actually building the entire game because you can't do that in a really limited time so it's a tends to be a very contained experience but it attempts to give the user the ability to experience all the independent systems that they want to build in the game eventually and so oftentimes people are busy building that which is a lot of work and they don't have the UI setup or they don't have marketing materials like logos or things like that or sometimes any presentation material to complement the demo itself right like it's like this is rough and you're playing through it but this is kind of our vision of where it's going right and so that's like the more glass sometimes they say previews in convention and yeah into picture vision yeah and those can actually even be separate sometimes they can have very little game and just do a sizzle cg real and like kind of you know what the beep for people who are excited about franchise are excited about that type of game it's also a good point to basically bring up the differences but probably between traditional app and web development and difference in game development game development so coming from blizzard 2 years actually short game development cycle but two years is like a considered like a decent game development cycle for like a typical call duty game or something this triple a that level or two years is also fine if you're a small team and you have to put together a small game - it takes about two years to kind of put all your stuff together and during that process you have to learn to not love anything you're making because they will play test it they will put it through the gauntlet it will be destroyed rebuilt reimagined so if you hear us talking about a lot of thrash that's basically we're - is like game villain has a lot of thrash to it so you you you get a thick skin really quickly in game development as far as like not falling and like if you find yourself falling in love of the design you have you almost have to break that emotion up a little bit until it feels like it's in the game and it's solid and it's been tested and we have a lot of bodies in our wig good way of putting it so yeah I think probably starting to jump into what we're doing our process I'm guessing that we can it depends on how you want to format this we could start doing things in unison and you could go back and forth because obviously as we're doing things because you like like we can assure you book like both queens at the same time or switch from one to another one we can do a where you I think we can switch back and forth I mean just talk about process and sometimes we go yeah you want to start with some XD stuff and kind of start start writing out some screens and we should start the beginning oh yeah which should be mood boards these setting up viraja so I so I have an example directory here that I just don't real quick so normally this would just be like come on say it again my lover supposed to be precise so we'll name the directory and this is our project so this is generally kind of how we lay stuff out there's a usually we're working on Dropbox so there's an assets folder which is stuff from the client usually so if they have a logo already or they have screenshots they want us to you know or whatever we'll dump them in there we usually share that so they can just upload stuff and Brad is s king what tinkerer best is the date Arriba like what do did either at the end of the project at the end of a project yeah it depends on the client but generally our deliverables will range from finished logos and vector or raster including sometimes depends on the style of it depends on style on the client and xD files actual raw XD file along with JPEGs of all the wires should be so they understand the flow everything type with the with the flat one we pretty also build in Dropbox has a wiki esque type of software color paper like so that yeah it's great and so one of the things is widely used for the like the new video teaser we have you know at the beginning of the show yes made by Othello's motion designs alright and to redo the design we use yeah it's it's a really simple tool yes very simple just like XD it's very simple which is one of the reasons why we like it yeah so we'll end up dumping out JPEGs of all of the content for the wireframes and we'll put those all up in paper and then document any additional designs it's got annotations and stuff like that so we just build those in paper usually yeah if for some reason we can't use Dropbox or whatever we have to deliver that stuff actually on the wires I'll just build annotations into the wires actually I can show an example what it's like but usually I'll take a version of the the wire itself and then duplicated on a new artboard that's wider and then just to have a gutter that just has all the annotation documentation in it and then I'll just dump out JPEGs so there's a documentation version of it and then just a still with nothing else the Dropbox has kind of eliminated the need for that document yeah and drop and then people can comment on the annotations and stuff and it's it's very it's it's an interesting way to be very collaborative in a very distributed fashion because we don't actually have to be sitting in a meeting with clients and stuff like that they can just go in and like bang out a bunch of like I have this concern I like this or don't like that and we can have dialogue in the comments and it's all backed up and everything to you which is nice and then for the art stuff I pretty much I'll deliver PSD s yeah I mean it's and those PSD s it really depends I don't use artboards because clients don't understand artboards it's not because they aren't a useful feature I use them myself interesting but I found out that when I've delivered artboards the clients they got confused they get how you navigate they get they get they get confused especially if someone's old-school of Photoshop and like hey I was in Photoshop it's quite new now I mean two years is pretty new when it comes to Photoshop considering how long it's been around so I I'll typically just do layer groupings in in a large Photoshop file and hide and when I hand files off to two clients they're usually very well very well organized and layered and and I cut out all the garbage that isn't used that you're telling me that you you never mend your layers never layer 7,000 for actually I was very organized it's very organized it's very organized but nothing's labeled I had one HUD file that was when I was working on here as the storm that was when I went and make a new layer in that file it said layer 2570 yes so there's when because I'll go back and we'll be working on the design right and I'll be doing wires for something initially but eventually art comes online and and the screens are arted up and it looks nice and everything and it's a lot more work to go back and recreate changes in in art in wires again so a lot of times we'll just go into the Photoshop documents and then just chop them up and like edit them and say okay this new button is going here and it generally looks like the style anyway but I brought that up because a lot of times that means me going into the next Photoshop files and trying to find out what layer 3462 was because I do like labeled eventually yes but they've labeled eventually but yeah pretty much we give fonts we give we give PSD s we give the style guide stock I can be done usually on Dropbox and those are usually our standard deliverables yeah and and occasionally we do like UX brief type stuff as well but that's a rare occasion there's a UX in the gaming industry is a little bit weird wool I should say it's it's very prevalent in mobile because and and web and things like that because the UI is the star of the show for the most part they're so same is the UI right and that's not as much the case in PC gaming and so yeah also they're mostly monetization free-to-play monetization models which require a lot I think and usually require a product designer and they're a little more involved on the UI end than a non free-to-play non monetization model game the business is there they do a/b testing there's a lot there's a lot of we do in games as well it's just the pipeline for like pushing out patches and things like that is a lot more complicated than pushing out a patch to the App Store for example somebody is asking what we use to make the style guides I think usually just Photoshop I used to use Photoshop I use Dropbox paper now yes I used to just kind of style them up real nice in Photoshop but Dropbox paper kind of does that work for me I don't have to think about it and it makes my edits quicker about everything else is Photoshop so you wanted to show that well yeah so we don't have anything in there yeah that's all just empty reference would be like stuff that we do from using for reference to go oh we kind of like this become like that source is our files and then share is where we would deliver milestones I see yeah instead of source is PSD s and wires and then we'll break these up by screen or whatever we feel is necessary and then they get reorganized into milestone drops that end up going into the share folder that's generally how we set this up and yeah from here usually we start talking about like for for this particular project we start talking about fonts we want to use and you're gonna step back from that like like I think and we're about to transition and we sit down we talk to the client we look at what their game currently at and then of course we ask them questions about what what games what games do you just like and you'd like the look and feel of because we might as well start with the the palliative games that are out there so just start building mood boards it's the first thing especially if they're hiring us to do create direction we absolutely do move boards and it's part of the style guide yeah okay I don't know if you wanted to go through them I could like to book to them yeah you want to flip through them and just talk about kind of stuff we like sure where were those they might not be I might have them on mine and they're the main I think no I put in 10 reference files okay so typically like I said we'll lay these out in on in a Dropbox file and the client will go in and basically give thumbs up thumbs down this I like and sometimes they'll type a little thing going I really like because of this and which really gives us a little bit of tooth so we're gonna kind of it's just a little bit of an interesting thing because we're gonna kind of play the client and the designer which is all of them and open them up it'll you can cycle through them that way there we go now you should be able to page with your keys all right so we we grabbed a bunch of references from games and from logos and the client might go ooh I really like how the the stylization of the Deathproof logo is but I don't really want the contrast II black and white okay cool um like some of the some of this might be just reminding us of there we go you're gonna listen some of this might just be reminding us of something that like a tone we want to hit right like like if this feels a little Ghostbusters II we're in a good spot Goonies this is yeah this logo is fantastic and I think I think you see like as I'm already starting to flip through four images where this is going right we're starting we're starting to get like Tomorrowland and we you know we grab something since this is a Halloween trick-or-treating game we had some characters we're we're gonna be some sometimes as color tones like for this I like the color tones and it just so happens we have balloons we do have a pinhead kind of character in our game so there's also that as well Impossibles a couple different references of that some of these like I said we might go oh that art style is interesting or maybe just the thematic we talked about one point if you go back to that Jax though isn't one we talked about in the main logo having like characters running underneath it yeah I think we ended up abandoning that that approach but what I think is really interesting it's kind of about this if I was talking to client I'd be like here's look at these shapes and I really start pulling in like like well first of all we're two toned I like that a lot you know we got a little bit of shading going on but then we've also got these really like distorted like like literally I took the marquee tool just and started making some some great shapes in there those are the things those when a client goes those are the kind of things I like that's gold for us because then we can kind of latch onto those and and and and play around with them yeah Friday 13th this is just a Brad poster you can see like the back yeah every year a new beginning a new new beginning and this is just a cool like you just love the contrast of that poster and so you know for us is just getting those inspiration points if loves it like the yes single color like it's so cool the two-tone it's obviously we're pulling more two-tone posters horror themed it's really cool again Nightmare Before Christmas plants person Ami's garden warfare actually this has you know in a sense of if you if you've played this game before it's got a real accessible chunky UI and that's definitely something if you built this thing a client we go like we want this to be accessible we don't want this to just we don't we're not building a super hardcore game it's for a broad audience so you know we could pull things in like this and discuss it fiction for some of the two tones and some of the thick fog chunky chunky fought we like chunky phones Saturday morning fever all this stuff is just yeah the cartoon vibe like obviously stranger things it's just it's just now we're copying from copies right things just copying from Stephen King and we're popping from that and mom so denna is king when you have big game plans like these are instant do you have any closes about design iteration Oh in terms of like how many iterations we do because imagine you have the customer she's asking they don't really know what they want right so you go back and forth and you can take forever so how do you there's a couple ways to do it one one way is just have an open it like we can do like a discovery phase where we're just doing exploration there's not a hard deliverable okay that's an official face yeah it's it's it's a we're trying to determine you know what what style direction they want to go into they might not even have designs laid out and they might be working through specific design iterations where they're like we think we want to go this direction and we might say okay well here's here's a couple examples of how that might work and here's some problems with that design or this design or this aspect of it and eventually we'll hopefully get to a point where they have a more solidified design and then we'll have another round of content creation which is scoped at that point because now we know what we're building right now it's now it's like yeah we need 14 buttons and 400 icons and all this stuff right and so then we would go from there and then there there's other ways where we end up doing funneling which is kind of part of our process with mood boards where we start with mood boards and maybe some initial wires and we're funneling design and art styles to a specific direction so we start with a lot of ideas that are like half-cocked they're not completely flushed out but it gives some flavor direction and then from there though you know the client can say well I like this and I don't like that and then now we have a smaller selection and we can refine those a little bit and then we get a smaller selection and refine those till we have the thing that we're going to build and then go from there and sometimes that's just you you've refined it to the point where the wires done and just go in to make part and start flushing out that that concept or that design some more we want to have think we want to start at the cheapest things to throw away and then it gets more expensive to throw it away as we get if we narrow it down we're funneling like that's that's why I always is the thing you can't like changes that happen at the bottom of the funnel are just they're they're they're completely disruptive if you if you're wanting to go in a completely different direction not talking about mile pivots pivots happen all the time you know creative director would be like oh this is really not working or it's really not changing their mind you know we got to work with a game director art director creative director whoever our our point of contact is at the game studio so on this one I I paused on because well first off it's one of my most favorite logos of all time The Venture Brothers logo I love how they worked but if you just screen your eyes you can see the logo and then you're like I've got the high five in the middle and then for the nose and then knock out the teeth it's just it's so brilliant and we stopped on this and went alright this is actually a key inspiration image miss we have not for the colors but for the fact that its execution execution to town so we kind of through tones yeah to tones to tones it and we ended up actually going to tone with a little bit of yeah and so this is a little bit of a shorter we have about 23 images typically they'll go from about forty to sixty images for mood boards and then we'll drill it down to our like five dislikes five likes it's pretty good I'm not saying that's the hard rule but that's kind of where people land like they're like these are the five these are why with boy inspiration I hate these because of these reasons gives us a really great place to start moving on to our next step which is typically in this case we are doing a logo we are doing a creative direction and we are doing game design so at this point I would peel off and go the I take the right fork in the road and I would start putting together a font selection and a logo and color sets and Ian would go ahead and start putting together wireframes and loose stuff and as we kind of do this will show you Ian will update as wires based on art direction that I get we don't do it all the time it really depends on which which stage in which the client decides to start kind of like client might also go I'm not we're not ready for design we want to get the art stuff taken care of first and then move on to design in that case I'll be like Ian I've got a font I've got a logo for you and well I'll give him grayscale versions of that that dump into wireframe so that it looks a little more accurate and we have a little bit more of an idea of exactly where things are gonna fall on the page so right now we can go off and start doing both of those and you can either put both screens up or flip back and forth depending and ask us questions so but I think right now we'll both just start start doing work and we can kind of go from there I don't fire up the old XE so let me inspiring boxty I'm gonna go in and I'm gonna show you the font that we picked so we picked this font Called Quest's Tyrion crystarium so chunky fine it's surprise it's also a good starting base when I'm doing a logo and I'll kind of show you how I'm gonna go about that too I'm gonna probably be doing something that's a little weird yeah I was just gonna say NYX logo creation process is a little crazy and off the beaten path but it's brilliant in its own right so it starts by opening this program animate okay so I use flash for all my vectors I've always drawn all my vectors in flash I'm sorry animate getting used to that it's right for me it has grid drink to it I love the brush I know it the brush tool the smooth tools it's the and I'll show you kind of how I hack things apart and break them apart it's just I got used to it I actually started on illustrator I started Illustrated before they had colors in it it was just black and white in gray scale tones using the pen tool and then I used when it was back on this flash since flash 2 or 3 when they had actions when they just introduced the actual script to point out so I that's why it's hard for me to move to the term anime because it's just been ingrained in my brain for so long I started using Photoshop before there was layer 1 load selection 1 save selection yeah everything was done in channels it was rough uphill both ways in the snow no shoes so we have a lot of questions also about like we have people watching they want to jump into the design video game industry you know like and they were asking like someone was asking I want to do an internship at Ubisoft should i market myself as a UX designer for gaming do you think there is an opportunity there or if you really want to work for the studios like what the best it depends on what you're into you really I mean if if you're if you're interested in UX design you're interested in UI design there's definitely opportunities there and the gaming industry is very is kind of an odd duck because UX literally every studio that I've worked with that I've been at you UX design means something different in every snow day so you have to be a little bit cautious about what you're getting yourself into and make sure that you're both on the same page because those things end up being can be very different things UI design tends to be pretty understood in terms of you know you're gonna put stuff on the screen and it's gonna be art you know usually it's a you a UI artist position there doesn't tend to be a lot of UI designer positions which if it is a UI design position that tends to be a lot of UX stuff so it gets a little you I artist it's a banty it's a lot of digital painting in and I'd be a 3d experience panel assets sometimes it's 3d there's a guy that we worked with at Blizzard he did a lot of mock-ups using element 3d and After Effects ok and then basically those would get deep like they would get built on top of UI and they would get deconstructed by the actual 3d artists and rebuilt so we would use it as a mock-up tool essentially and then they would get rebuilt an engine with you know models that are engine compatible and and with textures or effects that are built in the effects engine instead of rendering out videos or things like that although you could still do videos if you want to it's just less flexible if you want to use that effect again somewhere else switching that the color and now you have to render video so I I'm just building a little flow chart here because I just do that in XD for sanity and because it's it's not amazing it it floats hurt so buddy gets the job done pretty straightforward just boxes and arrows so broad B I guess because you open animate yeah are you expected to help with the animation transitions and building how elements interact on the screen typically no it's so animation when the so we have been tasked with animating transitions but they're more reference they're not something that's final that can go into the game typically that's all done in game engine whether it's unity or unreal whatever game engine you choose so if it's to help convey an idea someone great okay then we'll go ahead and do some animations and I have a background in animation know how to animate I know I did character animation I actually did when I went to college I actually did hey oh do traditional cel animation I paint on cells I'd layer them take the one shot yeah layer them take the one shot and then you'd send it off to be printed on 16 millimeter film and you'd wait two weeks and you'd see your abomination come back that was just absolutely not at all what you expected with animations I think like this finger prints and like paint smudged because you're not you're like I don't need the white gloves today it's not you know I don't need to be careful the hair being between the cells cuz its acetate and it just attracts every piece of dust and hair so it I when computer software started coming around that I could animate it and it was like it was a breath of fresh air because I have to wait for film to be developed I'm no more there part of that is that I am a little old and some of that is also that the the the program that I was at and the college I was at wasn't exactly the most advanced so it's not exactly like it's a combo of the two I did learn a lot from that though because you kind of learn how to not make mistakes early on because they they're costly and timely to kind of correct them so Ian's doing some flows okay just doing a little choice tree basically like do that I think it's not mistletoe gene for tech management ah with you yeah where you do it's as old as industry yes it's right up there with Gantt charts I noticed right oh is it related the 30th anniversary this year oh wow he was 30 yeah illustrator older than Photoshop yeah yeah Photoshop I think he's like 28 I mean it's very it's very close its younger yeah this is I'm just doing like a what happens when person goes to the homepage and the splash okay there's the button to start whether or not they have a save game or not is gonna be two different screens so so I'm just kind of branching that out now so that we have like an idea of like how this works I'm bad with hotkeys to you so if you're looking for hotkey god mode this is not the string they're asking about the UI of w3 yes yeah yeah I did know this age was very polished why thank you that game I think was in development for something like 10 years it was the development ever since diablo ii finished so the fact that I was on it for two years feels like baby mode the amount of time it was being developed but I didn't work on the console version of it that's using is a chat about carrier changes so you have a very since my singer and and bar with a print design now I'm moving two days and so like unique like you you had completely different background like you started with any pure animation or it was just part of the school I started with Asian comic book you know comic book inking and then I and then I went to to go to animation so I have a very traditional more traditional art background and then I kind of got more into design as time went on but it's one of the top things I tell anyone who goes into how do I become a UI UX designer in games nowadays don't just be a UI UX designer okay code draw art do something because conveying your ideas doesn't always happen in in XD format it XD is an amazing tool but it's sometimes you need to use some of your other skills together cuz like other people are like you understand it and you understand how to how that how the screen works and how the box is moved but someone else may be happy in this happens all the time like they can't see it unless it has like visuals to it this is our game Orton to have an immersive experience compared with the I'm so new and so when did you realize that you wanted to draw flowcharts or your life weeks ago yes exactly I actually started as a you yeah I was I started out doing web websites for games just websites in general and then I was hired by Sony and was doing a web design for games at that point and I transitioned from doing webs webs doing you a art for a web into UI for games yeah I was at Sony though yeah plant side and EverQuest one were the first to you eyes that I did and then from there I ended up becoming a 3d artist started doing a 3d character design on EverQuest one so today did they have their own 3d brothers or you know yeah yeah it was yeah like there's a there's a is that EverQuest at the time was because two story it was a two-story building the team was a cropped split across two two floors all the designers were on top all the artists were on the bottom and yeah there was one side of the pit was animators and effects artists and environment artists and then the character guy is all set on the far end and the art directors were nearby but yeah that was a lot of old-school game design and stuff because that engine was pretty old so what I'm doing right now just to kind of go into this is I'm I'm taking I took all my my font I broke it apart I'm good and then I so I broke it apart and then I broke each individual one apart into just just vectors oh and then I regrouped them so so and the reason I'm doing this is one I'm not gonna have fallen to issues if for some reason you know but that's not the main reason the main reason is that I I plan on going in and altering the points of these and kind of making a little fun and kind of skewing it a little so going in and doing this is just kind of prep work for for kind of I missed and it's not something I do for every time I start doing a font I start doing silhouettes I think another thing that's missing from this process is that I when I do when we do brands redo fonts I'll do like five of these I'll do like five silhouettes and real quick and I'll get them in front of a client right it's like anyone who's done branding or done font work like they understand that like obviously you do the funneling right you start off with like kind of super simple silhouettes client picks a couple that they like maybe they're like a little from column a a little from column B merge them together and then you kind of like like this and they go yeah and then you can kind of start going deeper and deeper deeper into refining the font in this sense the demonstration I'm basically I kind of know exactly what we're gonna go into and what we kind of want to accomplish and in this case we'll just say the clients like just go with it I know it I know we're out we're on the same page let's just let's just let's knock out one and seek on where we're at so for the sake of the sake of the stream I'm just basically gonna hand wave that a little bit you can yeah it's that's more useful painful building flowcharts an XT it's not built for that but I just do it anyway because it's it's not that much slower than and we're talking between like normally this is like a five minute thing by the way we have a contest going on for the people watching us they can actually use XD to create and share with us prototype the theme of the day is travelled okay so to tomorrow it will be another theme and they can share it with us in the chat and I will feature some of the prototype they have created today and at the end of the show will you ask you which one you prefer okay okay and the author of this prototype would win a critical subscription nozzoli oh man yeah we get to be judges yeah sorry guys so that's really fine I can start by showing you a five of them okay the turbine chair today so there is a flight path mm-hmm I'm discovering the app with you also okay let's see what's going on okay plan okay explore why do you want to go keystone of course that's nice like three screen experience and it works go out travels okay this is completely different with Claire de Lune oh it's fun so I guess it's made by a French guy let's see okay thank you that was funny this one looks more professional like what I'm gonna do see results oh you should go to Barcelona to play it looks beautiful pressure in my package nice we have the cruise nation very you said like what you want to enjoy and you select your cruise it's crawling at too fast yeah really like that one yeah nice experience mm-hmm and you had to be trouble oh don't be travel huh it's a new stuff New York Golden Gate oh nice these are things transitions yeah that's it's clean yeah it's very clean yeah keep sharing is that behance blue yeah so I'm just dropping this in here right now as a placeholder we already decided what our point was you did prep before this and have all the stuff preps so if things look like decisions are being made yeah very quickly it's it's just for the timeline so that we can get through the process so this is a little bit weird I find that setting the especially for these things these are like fullscreen images I'll just set a box in the background as the color oh we have some jerseys yeah fantastic what do you lose this February Hey lime lime or a pink one it just says pink pink is that a flavor taste pink thank you I'll take just just throw it at me I'll probably throw okay pink pink you got pink yeah this is tasty yeah oh yeah it tastes pink so pinky if you could taste pink hmm that's what penguin I'm ready to go for the next 15 minutes so one of the things that I like you can change artboard color right and click the artboard so part of problem is is if you have 50 art words yeah you have to go and select every single words if you want to change the colors across yeah so one of the things that I started messing with was I just made this assemble and yeah yeah now I can just change it Hillary changes all the colors and artboards so I if I don't if it's too dark or too light I can just change it and changes everything not have to click anything just one single little shortcut protip so we'll make this white because why not so do you do a user tasting is it part of your mission um usually if we do its we do it with an external company because there's so much stuff to like and there's so many variants of user testing like you could do like personally one of the types of user testing that I really find the most useful is doing like in-house studies where you actually sends a computer or just a webcam and all the equipment to the users house they play a game from their home and then they would normally play in and they and they do like video journals like they have to do like video journals like a 10-minute journal they have to play like certain number of hours a week and they're just doing it in their home or in their dorm or whatever and you get a lot of really great feedback because there's no one there it's just been talking to a camera and whatever so they're just gonna be blunt and a little more yeah it's that's a thing that we have done at other companies but there's there's external companies that basically will set up all that stuff and I have and everything like it would be very expensive to like just do that on the client for client basis and have to buy all that gear and then go find people that they have testing groups of people that they can ping and they they know their market groups I think it's also important to note that we were spoiled by Blizzard because those are such a large gaming company that we would and yes we did do this we would patch you would we would have like a basically an alpha patch and everyone not everyone but people who were really tenacious about playing the game would go online twitch stream it and you want to talk about no-holds-barred unadulterated like straight unfiltered feedback people hate stuff they just click around like this sucks these people should be shot you're like what why we didn't do anything and so like you would kind of get the raw end of it but and you have to definitely digest and parse what is good and what what is good feedback and what is bad I also put your feet again put your feelings aside of like oh well you know that I worked on that system a really long time but four out of these five streamers hate it and you're not gonna get any more raw feedback than that if them just being like don't do it that way which is another thing phrase that we bring up in gaming which is the best UX isn't always the most fun game that's true which is we each I'm not gonna say it's just with gaming but it's definitely something that's prevalent in gaming where we'll do what is actually the appropriate user experience for someone to walk through it goes through this step this step to step it's most clean sometimes someone just goes I lose the theme like with with games everything has they they kind of pierce this veil of going into the game and the theme kind of surrounds you and sometimes taking people out of that if there's a user experience that takes people out of that even though if it's the most clean way to do it people are people don't warm up to they don't like it so you have to do actually something that's a little less efficient but it's just more hey you think they were fun because it's not quantifiable you can't like like but something sometimes you do something where it's just kind of counterintuitive and and and it's just because people are like oh they want to stay in the theme and even outed surprise your wife so we should happy birthday to making the chair birthday Nicholas thank you that secret was kept for about 45 minutes another I all so I have a built a file for doing wires for console games um that is just all the buttons and stuff that you need for demonstrating those so generally they're the only things that like a light kit for yeah so yeah I just got like PlayStation and PlayStation today and this is super helpful because I'll end up you know basically some of the processes I'll end up taking his wires and just overlaying them on screenshots or things that I've started and then just cutting it up and moving it into the exact right locations and then basically sometimes I'll trace on top of it sometimes I'll get his wire and it looks awful and art like if the wireframe didn't translate to the art is like a lot of times the wires are very focused on functionality and we're not doing as much part in the wires mainly because if you start making the wires very artistic it can be a lot more difficult because what will happen is someone will be like yeah well now levels go to a thousand instead of a hundred and if you did like really nice containers and things like that everything else now you have to redesign all this stuff and it's easier just to draw a box right like so it is a little bit of pushing and give there but I mean Nick and I work together for like six five years six years like that now so we kind of just know where the other ones gonna fill in the gaps and just kind of work that way somebody's asking him curse is there you are you decision where some crazy food apps have rounded corners and although apps don't wait it's a question for me like somebody be apps such as XD mm-hmm and if you know there's one bit corners like but it is traitor yeah is no Rhonda Cowan right yeah are you guys going to the rounded corners is that it's wrong so they get rounded corners if they they are part of the with the next generation of credit cards gonna get to with the cloud services collaboration oh I see and and also super fast light like XD dimensions anyone yeah we have the rounded corners the new Lightroom cc yep that we are unveiled last week is only cloud-based so yeah Photoshop isn't light but Photoshop Photoshop is are you all it is because well it's Photoshop is the toys because that you can do everything because of that everything in it yeah it's one of those it's a double-edged sword right yeah it does everything but it also has everything in it I think those ones you load all the plugins you all the features every time yeah okay how'd you deal with it and aunts employment and render 3000 layers yep exactly 3236 but at the end of the day it works which is amazing yes I think you are in even with high resolution pictures first sure the stuffs all centered so I'm mom grab these and I'm making candy now because ya gotta have the candy so I some of these logos that we had from our mood board had some like nice little personality elements in them were like the negative space was knocked out so what I want to do is just go yeah like the skull and and that's a genius logo I wish I could I wish I could do something that was that was of of that that level I think it would take some some time in iteration to get it close to that but right now what I'm doing is is I've kind of blocked out in the shape of the logo and I've kind of I haven't gone in and kind of tweaked and altered it but I have just rotated and scaled just the basic font and filled in the O's because I'm gonna put I'm gonna put candy in in the O's I think that would look kind of kind of neat oh yeah light-hearted and you have two O's I have two O's um I I will say that when I first started doing this cuz we did prep for this and kind of knew what we're doing but I started off with eyes and they're too far apart so like they didn't realize they just looked this really bad circles in the O's like they didn't read sister and I I think that's one of those things where it's like well maybe it would work to us animated because the eyes could go back and forth but you're never gonna have that luxury and it printed out or anything so I think we decided to kind of peel it back and just just because this is a trick-or-treating game so it would be kind of good to put put some candy in there and bring the freeing theme in so build a little option screen I also notice all my wires are labeled with 0 0 0 1 0 a 2 a 0 to be beat I do that so that when I spit out JPEGs they stay in order that way I don't have to go the folder out or rename them and that way also it so that in case I forget what screen supposed to go to what when I'm doing prototyping I'm like oh yeah this is supposed to link to that this is legit yeah there's a branch to branch 3 you later so one thing I like about illustrating in flash as if I want a shape I pull up my line tool oh yeah and you just click to remove them yep and even if I have like I've done this before this this this is totally right I have a bunch of shapes I want to make and these are just random shapes and I fill them all sometimes go like this just so I can go like that it's it I'll attach all the lines so I can double click and remove them it's this one it's really strange and someone's like well you could do it that better in Illustrator I'm like yeah but I don't know illustrator as well so and this is really really quick when you how to draw in a flash or animate I mean you can be super fast it could be super fast because like you were talking about cel animation like you have a lot of animators these to use animate for a friend by frame animation yeah many to do cartoons today like a lot of cartoons that you see on TV are still using animate because you can export now 4k videos from animate yep or a PNG sequence that's some sweaters oops candies groupings and you'll have to excuse me I am I bounce back and forth from PC to Mac depending on the week and what software music I am so I was on I was on a PC all last week so I'm doing that I'm hitting called a lot as opposed yeah and it's just a nightmare when you transition yeah it's it's it's just whatever is most efficient ways to transition also from the QWERTY keyboard oh god no yeah either it's and there are some programmers that would swap from QWERTY to Dvorak devorah yeah because they for whatever reason they preferred Devore because they type faster on it or whatever and but they had a QWERTY keyboard they had a switch that remapped all their keys to Dvorak and when someone else they would do away with jokes and but with people right to be like hey can you come and look at my code or whatever and they'd sit down and they would try to type something and it's just garbage like what is going on practical jokes engineering jokes yeah exactly yeah they're they're dead jokes basically that's possible okay so can you deliver so Kathy Kayne is Ice King and he has a provision to do read lines and stay at whatever protein in it okay so I think it's part of the handoff process so actually after Nick and Ian we will be live in about 45 minutes with Talan who is the lead designer of Adobe XD packs and you can talk with him about the handoff process so handoff is you you design you prototype you get user feedback and now how can you can you share your XD file with a developer developer who will extract the assets understand the positions of your elements so we're definitely working on something and maybe tan tan in will be able to share more about it but today it's not available like today what usually what I see in agencies is that you just give to the developer so either you export all the visual assets or you directly give him the HD file yep I'm doing this oh yeah don't rip it it's the best Oh so repeat grid is the most satisfying it's so good it's like because when you need it well you mail it just you feel like you just stole time yeah you're like now we have bars done it's a little bit harder the lines also another thing that I do that may be kind of weird is when I do scaling I always use scale and rotate I think it was a habit I got into and the keyboard shortcuts just mashing your fingers and a triangle on the keyboard and coming up a scale and rotate and I I do everything with Oh with that I sometimes I'll go and tweak and use the transform tool but I know I'm at a point where I think 115 percent or 90 percent it's just enough a little down or a little of that I can just go ahead and I can and it since it saves my last keep somebody prototype Saturn now someone wants that for a year can't buy own flattery will get you everything oh I see what should you okay yeah so I'll just I'll do that just go your step up yeah yeah and it's because they used to have a lot of animation in flash and the easiest way for me to do it without having to like putting a keyframe you know it's doing yeah I just put and it it's really fast a lot of a lot of what Ian and I do with processes were constantly trying to just use the software or use the process that's the fastest to to just get in and out of I mean that's what flash it would be reason to use flash for effective drawing is I think you were saying it too once you kind of sorry animate time in that let's use animate to once he went to use it you get really used to it quick it doesn't have the the toolset that your house I'm not going to be doing extensive pen tool and pathing ending yeah it's just it just doesn't so it's not a replacement if you use those heavily and what you do i my style tends to actually not do a lot of things on curves and pass I tend to do a lot of blocky shapes even when I'm doing I'll cut up things that should be mathematical I do them by eye so they have a little bit of natural like that you look at them they look right but no but sometimes I'll go in and I'll just tweak them a little so that they feel mathematically Center but they aren't mathematically Center and I do that with everything that I do everything's got a little bit I even I even stay away from grids when I'm first starting to do things just so I can kind of go you just trust your eyes I trust my own eyeball a lot of stuff and I go really quick because in the end if someone if they like something I can go tighten it all up I can get it onto the grid I can get it make sure that like everything is kind of head like we're doing a correct rule thirds were we're sitting you know our gutters are nice and and but in the beginning if a client wants to change all of it I just did all that mental cognitive load of moving everything to the exact pixel and I have to not throw it away and start over so I tend to I tend to stay really loose in the beginning and sometimes it stays that way all the way to then it's it's perfectly acceptable it's imperceivable to to nearly everyone unless they screenshot it pull it into something and show that which actually happened on a buzzer game once someone went yeah you have a one extra pixel on your button from here and I'm just like how did you like how of all the things with the game that was what that's what stood out that's what spit out no so it does happen you get to one star review yeah one yeah bracelets King ways the most creative you are uux you've done for a game the most creative interesting besides epi boat design Feinberg right which basically has no UI probably some recent clients that we can't talk about for under NDA but they had more integrated UI and stuff like that where like because like it's it's difficult to prototype in world UI and XD where you have a lot of 3d objects where things are moving or swiveling around the character but usually we'll do them flat and then we'll just bring in the flat XD wireframe into Photoshop and skew it in in a 3d environment or or render or whatever we fake it right but that kind of stuff is a lot of fun I find that to be the most creative because the spatial needs that you have to worry about in terms of building the UI so it's readable but it's far from the character if it's not flat on the screen and it's a lot more difficult but it looks so much cooler right like it's just a lot more fun because it always has those in world effects where things are emanating from a wristwatch or or whatever and you can do you can do a lot of fun stuff effects wise and stuff like that it's not the most clean or robust like UX experience because you're making a bunch of compromises for the immersiveness of the experience so you have to trade functionality sometimes or you have to trade haven't the amount of stuff you can cram into a screen because you're limited by so many other factors of legibility and stuff like that so yeah I mean most of the other stuff I think both Nick and I have worked on or like pretty traditional flat - DUI here's the storm was a lot of flat - DUI world-war faff is a lot flat flat T DUI ever bust was definitely all flat TTY there's no three neither at all yeah but Nick and I were talking about this earlier that like we it seems like we always wanted to do the really integrated like crazy you eyes and we always end up on projects that aren't doing and for some reason or they it's some art direction reason where we don't end up going there hard it's it's the more you are you remove each piece that you removed gets harder and harder I think a good traditional a great example no one would would the question would be dead space yeah the space is just one of those like you have no HUD everything's integrated its survival horror game and they do that on purpose there's a purpose to the design and a purpose to the end functionality it's it's meant to the games meant to terrify you at points so having HUDs and you eyes up actually make you remind you you're playing a video game so there's this like they want to immersion is a key element of that so it's like how do we take these things and integrate them like how do we how do we make it that there's no gun counter in the for how much ammo I have in the corner well why don't we pull the camera in when he points and we have the gun ammo on the gun and holographically displayed you know this there's things you can do it that takes people see that that's easy I was like no that's really do it requires a very disciplined group of people across multiple disciplines to kind of collaborate in a very fluid way pull those things off because if system design or gameplay changes radically it's very difficult to pivot because you have all this entrenched development required to even get it to a point where you can use it and play with it in the game so here here I'm using things like the smooth tool I used to smooth to all the time to just I select sections I'll smooth them out to this tool it's the best smooth tool it's great it straightens great too if I just need to like kill a point and what I like about that is that I'm not going into the pen tool and and working with nodes all the time yeah there are there are moments when I think that's really really helpful to do but if I don't have to I don't like to play and here all I'm doing is I'm tweaking corners so that when you're reading the logo left to right the corners all kind of guide you from letter to letter it's just it's just this this font is actually really a fantastic sand base I feel like feel like it's it's it's already kind of mostly there I just have to tweak it the things around we're starting to get actually a logo that it's like okay I think this kind of has that Ghostbuster ease feel it has sort of that Venture Brothers feel I think I can condense this up a little bit but for the most part I think this is getting pretty close and at this point I would probably start putting in some colors so I'm probably gonna if you have black and white you can talk you can knock those candies out of there and then just drop me a ping copy that sucker in here yeah just let me make sure this syllabi is working I wanted to share with you five more prototypes sure absolutely by our friends so we have my trucks as you move about your trip will track your moves okay start 9 am active make a wave a current run tracker yeah I guess this is what you did and you can share it with your friend cool okay yeah yep nice the explorers go and explore okay Nick Deventer join us no program okay yeah that's a nice I guess one of the first prototype for seven years XD nice get the principal yeah welcome to Singapore yeah nice typography mm-hmm Chinatown the foot straight into nori Wow okay yeah a lot of prototypes to the you know like use the map in return yeah yeah as a way to express me that's you then travel who's Freddy there is even a loading screen yeah yeah but we'll be fearless in the persuades next on boarding welcome to travel okay let's login and where can wake and go maybe that's it oh no I can go and have a coffee going up but you can't go to Saturn but this one and get smarter Davies Mauritian discover a create and share okay well tutorial yeah little pips onboarding yeah what completely no oh okay that's it so far yes cool yeah that's good little onboard experience there was a get it straight to reload oh see by good iron yeah he's really wanted to go to seven yeah have a nice that's that's pretty good with architecture on say I really want to know from retirees current ring count yeah okay keep sharing yeah that's it's really nice that you can just you know upbeat here Steve type whenever right it's really great I do that with Nick all the time because we don't work in the same office together I work in Austin he works in terms of skills yeah it's nice just to be yeah just reload this thing I'm just putting in some buttons don't just want to paint yeah you could just please fit into Photoshop yeah I'm just gonna get it into Photoshop just put it into exporters pain okay someone using HD for the first time okay so quickly share my screen because someone is asking how to use Gretchen cynically and I have to admit this that the most intuitive are you I I have tried it I use some we will tell tell you metrics yeah I use some tricks with radians actually so with graduates so you should go and fill color so this is where you can change the feel car you have to click here yep it's not super green and then you have to do this it's like the other one you can put more dots if you want yeah like you're doing extra step which is warmer and once you get there you can start playing with your Gretchen's rotate it you can like at any time and when you fight it's not easy to find I agree thanks for using eggsy for the first time let's go go go back to your desktop Wednesday here we go chose bed get six of nine yeah I really old really always really bad super frustrating so this this would be kind of a classic example of RIE and I've kind of finished the silhouette of the logo clients kind of approved that and then I'll dump it over I'll stump an image to him so that you can kind of keep that up to date in the XD wires oh you gave me a PSD I know so your Rams gone you have a lot of allocated RAM to it and I probably do too dee stop so now we got this you can use crate for libraries them huh the credit called libraries oh yeah we should be demoing that I've used those a couple times I had for a while the reason I turned them off I had a work account and a personal account for a while and it was mess this everything it was it was awful but now that probably go back to that give me a new PhD but this is a shape layer give me a new PSD with this is a shape layer just right-click and rasterize it I don't want to cross strands it's already mastered just gives you this well me to export out of flash that you want a vector yeah yeah just paste it into Photoshop and then make it a shape later because I want to steal the candy shape out of everything okay will do let's see I can just select it the truth nope doesn't do shape a brand no we can't hear the music brand there's a music I was there is music let's blaring rates you know artists from really ok and drew up his buddies I'm gonna have to SVG it and then bring it in because he has a copypasta that's okay you want to keep the vectors I would say right there yeah you shut off I'll use the I'm just doing this SVG under legacy export that's I need those vectors you can't open that you can't open SPG's you have to open the illustrator export copy montefeltro yeah I would definitely taking support well baby you never switch up I think I said just the DL like you can say that you kind of exactly can't ever close like the rabbit just because it means just because you forgot the AC I'm going so Jake is asking why are using any made to make a logo because you love to drink tools yeah anyways you can draw an image you can draw an XD your straighter can draw yeah anything that I will prefer adult icons that in XD that we copied into Photoshop and then just done layer of exercise and whatever is fast yeah I was like oh yeah I forgot there's another menu item in here this was to be a game Generico that's King with all the difference between the oh nice dress or file and SVG file SVG files just not there you file it's an XML description yes straighter you have more informations about layers appearances aspects like what this traitor can consume when it resists you just made to be consumed by a web browser making yeah but it's the only export option that's left for vector today it's a good standard XD is consuming SVG you can't break them apart that's one of the reasons why I bring this type of stuff into Photoshop because I'm terrible with shape layer and then I can just go in and select the like oh oh I'm gonna go in there and select the inside of the candy piece and extract it and save it as a separate pain oh yeah it's nothing I can use it as an asset for myself deal with the roster it's not exporting vector at all I don't know if there's an issue with I'm just not here Watch I'm just doing it straight to my desktop logo SVG say Christophe is asking about the frontier between the UX design and UI design refresh or go into your desktop folder I might be there it's not back yep weird so let's not dwell on it you don't get candy right now sorry I'll just trace it I'll just trace it inside XD it'll be fine I can also pull up my other file and I'll just do this yeah I don't know it's probably it honestly if my computer problem just needs to restart you know things happen so even you're creating a start screen and we need one of those so it's gonna require some illustration so I'm gonna go ahead and just illustrate that maybe it's work on accent yeah haha yeah so I'm just get rid of this guy yeah when you cook your base from what I brought to another one each we save the position yeah yeah I really like that which is nice because I can just go like this and go although I could just go I'm just gonna go in I antarcticine justice in here just merge it all in the best finder right George in about five minutes now we show you five more prototypes and we have to choose their own you can choose one perfect for one of them we have a candy there tonight he's asking like when you want to customer to a data wire your friend like you usually starts in black and white you feel it's enough for I I usually do grayscale and I don't usually use color use most of the time and sometimes I'll go back and do color stuff it's just a pen it depends on sometimes if I do use color I'll use it just to call certain things out like this or health bars or things like things that need to stand out visually as a particular element so that people can recognize what that is so if it's just a bunch of gray scale bars or whatever it might not be very useful it also depends on the design sometimes they if it's a big grid of things you might need some color in there just to be able to tell what's going on it might not be obvious or things are color coded like in the case of like class colors for example if things are colored for class color or whatever you probably want to put that in your wires just so that people understand that that's the intent of that design for this like mix kind of start busting out some stuff and doing color stuff for that and sometimes I'll go back in and we update stuff with colored backgrounds a bit and stuff and then just do black and white over the top it just depends really on like the game series s Kings their way to use video and audio files in HD no today you cannot import videos if you want to vote for these features because I I know it's a list of features it's on xD Adobe XD dot user was calm and and animated gifs are just something to show and have animated spinners and or just nice backgrounds things like that oh yeah stick them behind the border frame would be nice too yeah so I'm just doing like a little and I'm just basically right now I'm just illustrating a sort of backdrop that will be eventually our Start screen for the game I know days of the tentacle yeah it has another like classic goes in super close to close so these will be like pretend insane games tomorrow in on Thursday by the way you have a new host for the show all right and the new host on Teddy B life her name is Samantha Warren and she okay she's an experienced designer acondo be perfect that would be we'vewe've we built this our dealer we've built this rapport and you're just gonna ditch out yeah already I just want to be a vegetarian just let me make sure you had a loading loading screen yes no I feel good it's fine we're not getting a second date tomorrow okay it's time I assure you all right more prototypes and you have to choose between the 15 I was showcasing so good night check now whoo that's pretty I have breakfast whoo again checked everything not sure he has to deal with trouble but a tripod okay how I would do you want to go to the Turtle Bay Resort which one would you like ooh shelters sorry it's very painted like your drink yeah listen my drink yet very tasty trip today okay sign in Oh he's using the background blur yeah yeah you can tell yeah zoom in here oh nice you can close this tip for that is to make the art board a darker color so that your blur doesn't yeah doesn't my painting on the edges that you can use the you can use it with the background blur yeah yeah there you can ducking yeah oh yeah that's right you can take me home that's a yeah nice let's see if there is Saturn whoo nice picture yeah this guy went went deep on space trip yeah and Explorer nice nice that's by screen yeah nice shoes and trouble door oh that's nice say mean it's yeah okay that's providing click okay now you have to choose we had my tracks okay we had explorers with the red dots my cherry Chinatown we had very nice this one which was it trouble with this loading screen yeah it's pretty nice to share okay we have flight paths with insulins now has been a big service at the top travels with the Haroon with the plan using Adobe stock that's good hmm Barcelona which which one was it eeeh like you select what you want to do insist oh you should go to Barcelona and then you can check out we had the cruise nation I liked the cruise nation yeah that was nice to continue nice you sub or logos nice and we had better be trouble yes the Behance fun it's also very nice yeah really nice yeah yeah lot of screens detail there yeah which one um important I'm there so I like this I like the one with the what was the one with the little nice little logo at the top of the center it was like two before three crews nation yeah crews nation travel and then the Adobe travel one I think let's go with I would go with either Cruz nation or the the travel one okay yeah that one yeah that one had the nice onboarding experience yes but they do we travel one windy I like that one in the cruise nation those are my just my two so you have one that overlaps that and that's the winner I'm picking two out of the three and then if you pick two out of three we won and the travel one as well yep yep is trouble travel exam okay yep good job to the other of the trouble app it's nice and boarding experience and all they've got subscription these guys know nothing charlatan keep sharing in tomorrow there would be a new theme okay you think your game tomorrow no I won't tell ya of course have your your your date you see Nick way you shouldn't use a full read when your nice dream oh geez oh well just ship the red it's a bit than you yeah yeah my gun big it green yeah that's gonna be better no it's not the same frequency so it's right it's gonna be deleted anyway so yes Helen to marry their new theme we have more chances to win new theme unfortunately same judges lost myself to the punch [Music] guess we have four minutes left all right see if we can either wrap up let's see if we can get to the end of this just splash screen from today cuz that would be that's kind of where we wanted to end we have three screens and so it'd be kind of so it's kind of the front end flow there okay so you've got press any key button just hit that and you'll go into here and then got new game options those this screen you'd actually hit this if you didn't have a safe if you already had a save game then you get continued organ start a new game or you can load a game obviously if you have no saves you don't need load there so it just didn't have it there so continue then take you to your load screen so this would be art or what a view in the background options would heat down here to options and then just likes this stuff and go back and teach it back so we could go in and just kind of like go in the prototype right and grab these guys and say game off over there exit feeling there's nothing vague to do press any key with the key here sometimes I view this too so there's kind of a problem right I have two paths here I've got the screen oh yeah that's a start screen and this they occupy the same space yeah because you would go here if you present a heat so what do you do sometimes I'll just do this as the other screen sometimes I'll go back and design into the design and I'll just create a little secret button over here oh okay so yeah it's just a hit zone but it doesn't actually have anything there it's just a box and then you can go into prototype and go crank that everybody so now if you just preview this right like Oh that's for sure thanks Nicholas so yeah so now some reason the hitbox is watching usually yeah I'm so used to exporting to the web and not anyway yeah so continued users can go over here and maybe gonna get unique where you're at yep dispensed gave so III have started the Start screen and I'm gonna I'm putting together this landscape so this is again based off this just very silhouette II stuff that we kind of started doing and so I've got this kind of house with kind of in the woods got my logo with the candy in it so I'm at this point I'm pretty happy with it I could also go ahead and show you sort of I can either continue with this next stream adduce come some colors on it or I could show you kind of what what applying some colors because I know we have 50 seconds left so I could I could just jump to that if you want to see it what the colors look like on it so we can see it tomorrow tomorrow okay let's do that to be a good start yeah so add some cars add some colors thank you guys yeah tomorrow same time same time ya know and we'll still be alive so we'll be back in about five minutes with tanning and Danielle so they work in the XD team designers turning is actually the lead designer of X D so if you want new features if you want to back some stuff so we should have grass here we can we just chat on the couch there to him as those whole of science teachers okay thanks everyone and see you in five minutes on behinds octets that's life we will be back with a live show bye thanks [Music] [Music]

Channel: Adobe Creative Cloud

Views: 46,770

Keywords: Adobe Creative Cloud, Creative Cloud, Adobe CC, Adobe Cloud, Adobe creative suite, #MakeAdobeCC, #AdobeCC, #ACCTags, adobelive, live stream, ux design, adobe xd, prototyping, livestream, adobe live, blizzard, diablo iii, heroes of the storm, video game design

Id: zZKC8DHS45I

Length: 110min 28sec (6628 seconds)

Published: Tue Oct 24 2017