Designing a Video Sharing App with Brent Davidson – 1 of 2



good morning everyone it's so good to see you all welcome back to Adobe live where you can tune in for all of your daily creative inspiration we have different guests from different creative fields each week and this is day one of two in our UI UX livestream and I'm joined here by Brent Davidson and we're gonna be doing I'll let you explain it in a little bit but something very exciting so we're gonna be here for two hours I'm your host Andrea hock and I'm starting to see some of you pop up in the chat or already we're here watching all morning hello everyone let us know where you're from if it's in the morning or night for you if you're working on something very exciting right now we'd love to hear so be sure to stay active in the chat we'll be doing a chat and win a little bit later in the day oh raaah fell from Mount View Bay Area oh pretty close from Nepal sorry oh wow all over the place today so we've got a full schedule today this is actually the last livestream of the day but let's go ahead and look at that schedule it'll pop up in just a second so first thing we had was the Photoshop daily creative challenge with Kathleen that was from 9:00 to 9:30 and then the very talented Kyle was on at 9:30 he was doing a Photoshop as well and previously with me we were on a little bit later at 12 but we'll be back to our regularly scheduled session tomorrow at 11:30 for the XD daily creative challenge and right now we are on for two hours with Brent Davidson so don't forget to go to the challenge let's take a quick look actually at today's challenge just so you guys can be sure to work on that and we'll be reviewing these a little bit later in the day about 30 minutes before we end so today's challenge was to create some icons and buttons for a music rish net so be sure to be working on that I would go ahead and turn it over to you Brett so why don't you tell me just like who you are what you do and what you're gonna be working on for the to two hours sure awesome well everybody my name is Brent Davidson and I am a product designer and I work here at Adobe actually I work on a product called Adobe spark which if you're not familiar is actually three apps it's Adobe spark post page and video and post is what I'm working on right now which is an awesome simple graphics editor everybody should go check it out adobe spark post pages for making simple websites and video is an easy to make video tool that's online as well as in an amp cool yeah very nice so how long have you been with Adobe you mentioned uh yeah come on past year and a half so you know and it adds up time flies it feels like I just got here yeah awesome so your what's your technical title you are an experienced designer right yeah this is a good question for people who are trying to figure out you know what is a design role in especially in the tech world yeah and my job title is experienced designer here at Adobe gotcha in my previous job I was a product designer and you know now it's trending a lot towards product design yet which is the screen but also you know what's the product do for people what's the business around it awesome yeah all right cool well let's go ahead and dive into what you're gonna be working on today sure yeah so I've got a cool concept for you guys today it's related but a little bit different from your actual my day-to-day yeah sure it's gonna be a social video app and that's for making social videos you know portrait vertical capture on your phone pre make stories for Instagram you know we see a lot of brands and influencers making this content in Pro Tools and you know we want to look at how do you make it in simpler tools okay I chose this one because I'm familiar with it but also because there's a couple of good interactions challenges that I want to kind of take your interesting yeah cool all right okay so did you want to start with you got some nice wireframes yeah up here do you want to start with that or do you want to jump index let's jump in with us I'll jump in on that in one second okay so you know quick note on process everybody starts at a different point right here I've got some sketches probably not gonna get through all of these but I think it's really great to go and just see what different work deliverables look like and you know this is just pen and just a marker you know it's a drawing marker but anybody who wants to be doing a lot of you iodine you really only need like two weights of a pen and maybe two grades of a marker that's nice and maybe one color mm-hmm and they don't have to be expensive yeah it's a good question so like I actually couldn't find my narrow way pen but you know you want to draw your border for your frame and you can print them offline – there's really great templates for saying you know iPhone or Android or tablet or whatever I just drew roughly you know phone shape and that heavy weight and then if I had my thinner weight marker you know I'd start on your pen I'd start in on sort of you I pieces what I used the marker for was things that are gonna maybe be actually I just want you all are reading this upside down good good yeah let's do this wait no those right nevermind okay sorry it almost feels like it's upside down there yeah okay uh we got a great studio team here they're really pros making sure we got everything right so you know markers super good here for if my whole area here was basically my you know video screen the marker is nice to kind of say that's overlaid and then here where I've got the word controls written you know I want to swipe in controls you can also use the marker for you know just making it more clear what's building yeah so I'll get into these details I'm calling the canvas is your image mm-hmm and then you know these are sort of UI buttons that's such a good tip I I feel like I know I just used the same pen but that's a really good way to like call out the most important pieces of screen sense yeah yeah just makes a little follow like you know you can tell that here on this top left one that you know maybe these are buttons there's something different about these ones sure and so these are the thumbnails you know on your home screen for your different projects and these are really basic you know if you google like wireframe drawing there's some really impressive artists out there who are really great product designers and you know you can you can feel impostor syndrome pretty fast yeah oh you're impressing me with your different markets that's something it's better than just doing like the X you know like for all the icons and stuff you're differentiating it exactly and a lot of design even like the visual design side even though she's a much better visual designer than I am oh my god oh come on amazing portfolio if you haven't checked her down you gotta go see it the a lot of it's just about building contrast and so just having those two different line weights ya can give you a lot of different options so yeah that's kind of a quick little run down we'll get into these details here what we're looking at but I wanted to cover a little drawing very cool and I actually want to show your web page really quickly you've got a cool one up here and maybe just like do you have a few like two favorite things that you want to talk about like this one looked really cool yeah let's dive into that one okay yeah so before I worked at Adobe and I was at a startup called air wear and a wear made software that controlled drones for commercial surveying and so this is basically fly a drone up over a really large building or like a mining site or something that's really you know unimaginably large in that area and you know the idea is that you'd get better data faster sure so our design challenge was how do we take this sort of complex process this phlex robot and make it approachable so that anybody you know on the mining site or building maintenance or insurance people could go and fly this wow that's cool this was a really fun project aviation something that's really close to my heart a big passion yeah I saw you've done what are those called glider plans yep so I fly a glider airplanes you guys can check out my youtube channel here it's not a ton of design stuff down here but it's all outdoor adventure ya know we like to you know find out the personality of the designer today that is true yeah awesome okay we'll check out his beat hands too and his web site you got a lot of great work there and this one you were just mentioning spark as well yeah cool guys fun stuff well do you want to dive right into your design sure I'm gonna say hello to uh Henry Schein design team here – what's that Victor Thanks thanks for doing that and yeah awesome just back from lunch yep it's about right around lunchtime right now – yeah got Sam Peterson we got Howard hey guys thanks for joining us everyone um don't forget that in about 30 minutes we're gonna be doing the chat and win and that's where you type away in the chat and then after a minute we'll choose someone that's super active in the chat and you will win our prize which is a hundred free stickers from sticky mule so stick around for that as we OH 15 minutes sorry a little bit shorter alright so stick around for that awesome cool and there's a Instagram when it's Brent dot Victor yesterday I'm pretty big one once the head over there is more action photos and I just posted a story from behind the scenes oh yeah you can see if you actually go to the Instagram story that Brett Victor you can see what we're looking at here I just before well I've put that on it's kinda we're gonna like alright let's go ahead and switch to our GoPro right here and I'm just gonna walk everybody through a little bit of a setup and the area that I want to focus on for our app here today so I know that everybody starts a different point you know some you can take the whole app and say here's the ten things I need it to do and make that whole flow out I think those are great things to do especially if it's an area that you're less familiar with for this one I had an interaction problem in mind and I'm going to kind of dive in a little bit so probably a little bit more tomorrow we'll be filling out the rest of the app mhm but today we're gonna dive in on this one here awesome so everybody I'm sure disclaims their terrible handwriting [Laughter] exactly I don't even teach cursive in like grade school I learned yeah and then I forgot it yeah but not too often alright well no curse is your only prayer yeah alright so I'm just gonna walk through these screens kind of one by one here sure and talk a little bit about what they're trying to do and then you know areas where they succeed in areas where they don't mm-hmm and my goal here is have to help bring everybody along for how do we as product designers think from that conceptual level it's really easy to get distracted with amazing things on Behance and these finished products but it's really important to remember that there's a lot of really big decisions that go into what kind of menu was it how was the up put together and understanding that each of those pieces of process are just important so that's the goal here even though these are like gray ugly screens no but that's the important part really diving into the features before we go into all this and you feel free to keep me honest on time if I should jump for it alright so what we're looking at here is on this title says full screen canvas and controls and just quick vocabulary what I'm saying is the canvas is basically your picture so this is a social video app and I want to be able to see the that I took and then I need to use controls to do something to that so that could be basic things like brightness that could be adding text that could be you know changing other parts of the image text adding graphics whatever and basically we have those are the two things that are going to come down to everything that we do on screen here so I think we need the the GoPro back here on screen all right so I'm gonna be talking about how does the canvas relate to the controls in every single one of you okay first one here it's pretty simple you know this is my phone frame this is my image just picture whatever your favorite whether it's cats or dogs or mine's gonna be surfing we're gonna get to that in a minute and then controls down here so this is very conventional it's very straightforward you know I don't need to do anything crazy to transfer between the two these but we're gonna quickly realize two problems one this is very small like why is there all this extra space it's wasted area and what if I want to do a whole lot of text controls I'm gonna need more space than that sure so pros and cons of that one move over here this here in the center since canvas this one basically picture your Instagram story it's your full screen for the canvas then you've got controls up here and controls down here another good use of the marker because this markers may be kind of implying that this is you know transparent over the top kind of controls like that so this is nice I get my full image but we're putting controls on the image so you know maybe that's competing with some different elements and then it's kind of thin I can't do too many controls otherwise it gets sure it's gonna get too big too busy yeah so right away you can already kind of see where I'm going with these things this next one what if the controls kind of came over the screen that's nice maybe we'd want to think more about how we could shift those so sometimes they get more control sometimes I get more screen mm-hmm this one's like very much control a lot of controls and you see how much smaller that screen gets especially when it's vertical you know if this was a square that'd be fine we'd still have a lot of a lot of space but if this is you know for Instagram snapchat stories Facebook stories yeah I'm gonna gonna be gonna be going vertical all the cool kids are vertical nowadays cuz it takes up more of the screen so you're you're on that image longer yeah and I'm curious in the comments where people will find themselves sharing if you if you find yourself posting on a story you know that's gonna be vertical or do you share like landscape design on on a Facebook group or something post in the comments and just let us know where your is you're sharing personal posts design work so even though I said verticals for the cool kids yeah and then this last one here this one's trying to think a little more dynamically so what if we had this as our full canvas our fullscreen area we had maybe some easy controls and then something could slide in from the side here so we could like swipe these in yeah so we can look at I mean that's kind of a good rundown of like you know how we think about some of these things we can peek it at two other pieces here okay so let's say that I've got awesome picture it's like gonna be like the latest dog meme and I want to add some you know text over it sure I have to think okay I'm into whatever this is like my editing view controls view I've got my whole picture here maybe one of these buttons is text and if I hit it what happens you know how do I get into that menu sure so again I'm this case I'm making this screen smaller got all this border area maybe I've got you know controls for text controls for color different fonts stuff like that it's important to think at this high level how do these pieces to come together yeah instead just throwing stuff on a page and like going yeah so yeah because we all kind of know that like wireframing is a step yeah but like why and you know none of you I bet I think you know amazing gradient Wow what floor setting is that shadow yeah you know because we're just not at that level yeah yeah how are we doing on time shake you go yeah you can go ahead and hop over into XD if you stir over all right we've got about 10 minutes until the chat and win so okay yeah so I started a little bit on this and what we're gonna do is actually just bring what I just showed you on paper over into XD okay and that can start answering questions you know maybe there wasn't a clear winner maybe it was like I kind of like a couple these contracts and Britney and XT is gonna let us be more realistic with the exact space you know now we're in the real phone environment do you like to prototype while you're doing wireframes or you do you more wait until you're in the visual side of things you know that's so this is a good question and Rea just kind of asked me when do I like to prototype and with prototyping it's all about what are you trying to learn mm-hmm and so you know if it's gonna be important to me the swipe feel yeah if I swipe up is too much stuff moving on the screen then absolutely I want to be prototyping sharing that here if this is maybe more straightforward and I just need to decide between like squares and rectangles for a list mm-hm you know I probably don't need to you know make sense so like the bigger features sort of yeah yeah yeah you wanna think of one of those big questions is you need to figure out as you're going through yeah make sense yeah cool looks like we got some vertical posters here on there and a question here have you thought about some sort of onboarding or we'll do that later the main thing I think I'm focusing now on is this sort of core interaction challenge in the app onboarding is a huge huge huge part of that and so you know we can get to that if we have time I think a lot of people cover onboarding and different things I wanted to take out to get into some more details yeah I like that it's a good question now so keep him keep him coming yeah we're seeing a lot of vertical vertical insta stories Rachel said my year was the last learned curse of an elementary school yet they still told us that they'd use it every day not every day you wanted to write my thank-you notes for the wedding but that's about it what's more for fast but I'll be honest my mom writes mostly in cursive as I've got older I can't write I can't read your handwriting oh sorry should give me chores list I'd pretend I couldn't read it you know which was actually true you only speak an icon um okay so I'm just gonna go ahead and recreate you know a couple of these I know it's not the most exciting thing ever to be looking at you know it's important boxes yeah but it's important and I think you'll see kind of quickly how we see okay you know maybe these aren't like it'll help us kill some ideas and sometimes that's the most important thing is what are directions we don't them again so here was the first one I looked at and I should have right on here let's just I'm being all technical same canvas so let us say image controls here okay Oh a dobby spark is supporting you in the chat all right that's um Oh cookie emojis thanks guys this morning on discord I was like hey discord folks send me a cookie if you're coming from discord so hi YouTube adobe spark all of you guys are joining adobe spark let us know which office here and we're all we got a couple which crew we got here Steve Peterson is he on your team there's a Dobby spark in the house all right okay so we're looking at just a basic one here you know you can imagine some icons down here like control different stuff this I did take the time this is actually a 9 by 16 you know the actual aspect ratio you can see there's a whole lot of wasted space here you know maybe we'd want to put it down here so we could fit the status bar which is what iOS calls you know your time your battery life all that kind of stuff but overall I'm not super crazy about this one so let's keep going on to the next one and again these will just be the same couple that we walked through and then we can kind of do procom evaluation here so this one's not the one that's kind of like Instagram and so if we said okay maybe there's you know some controls on top controls on bottom you know and when I think about if I'm in the state where I'm trying to edit this image I guess I'm really confused as to why there's controls up here mm-hmm sure you know if I've got some you know again our dog meme content I'm trying to find you know to add text why should I have to go up to the top oh yeah my thumb's at the bottom there's gonna be a lot of stuff at the bottom and then also you know let's say I was doing this as an influencer I really want to be sure of what my whole image looks like right and now I've got stuff over it those are overlays exactly yeah and we could go and sort of change I don't think I had any transparency you're not gonna notice a huge difference because you know design them yeah yeah so yeah I don't know I mean you know one thing that I talk about with some co-workers is have we made the trash pile big enough to say that we can move on sure I'm just gonna go ahead and group that so it's a little easier here to move together so you're the next one that we had let's kind of get a little spicier we're overlaying some controls down here I think I actually had it set in you know you see a lot of cool designs that leave I'm talking about screwing up wire framing but that cool that leave like the nice little border and okay this one makes me like a little intrigued you know what I want to know in higher-fidelity sure how would this transparency come across by putting icons you know how does that one kind of work and then I said I did take a sneak start at this one this one took a second longer to it drop over here so I've got about four minutes until the chat and win so stay tuned for that got Christopher he's eager to play around in the program now good good I'm glad how long have you guys been using XD let me know in the chat I'm interested I mean it hasn't been around for like too long a couple years I think but I think I've been using it pretty much since the beginning what about you yeah I have been we're gonna do and a half but actually I over a year prior to that when I was working at the startup we needed to choose a design program and I promise I didn't I'm not saying this because I work here but I chose Adobe XD yeah because you could just plug a cable into the GG laptop and then on the other hand have your device and immediately have it yeah and what we really needed was to convince a lot of people inside the company of different ideas and do testing with them on those ideas and having it go through some of what the other competitors use like web sink all this stuff it was just too cumbersome yeah so now it's funny because I sit down the hallway from XD team yeah yeah small crashed on the X DS you were putting it out there in the universe so this one's kind of fun okay maybe I could like swipe some controls on and I want to go ahead to your question about prototyping and I'm gonna go ahead I'll separate these are parts because this can get a little confusing yeah but I've got this little edge here mm-hmm and I want to link it to this one and when I go over to my interaction panel and let's try drag on that some kind and oughta animate so this thing should come over this is quick and dirty I'm not sure this will work perfectly so we've got a couple layer issues there that this controls when I had copy and paste is let's just delete that we'll get into more prototyping stuff tomorrow but you can kind of see here okay maybe that's kind of a cool way you can imagine now maybe I've got a whole bunch of font selections that are really beautiful I've given myself a lot of screen space yeah and then I can just close that loop but I see I'm dragging over from my controls back over here and it's gonna X D is gonna inherit the same previous transition controls I've used so now I can start good yeah so like I know that could be kind of cool we could refine that more you can have a lot of sliders and just a lot of buttons a lot of details on that page which I like exactly and you really could see how I very quickly could go and say oh man I just want to do you know on the bottom here really quick stuff and then BOOM drop some sweet funds grab some sweet graphics get a giffy in there you know we have any question – we're about to switch over to other thing but with three minutes or so left if you have any questions about wire framing now's really great time maybe we'll get to me out after the next activity but just drop them in the in a chat I want to see everybody thinks this is the unsexy step it is the foundation of everything if you've you know if you don't take the time to think about these things you're gonna run into the problems when you're in visual design your user testing the you're gonna realize you totally missed an opportunity to do something else okay so we've got about 30 minutes or 30 seconds till the chat and win so this is where we have one lucky winner that will win a prize if you are active in the chat so be sure to chat away and I like to give you guys a question to answer so you have something to chat instead of just like a bunch of random letters and numbers and I think our question is gonna be what's one thing that you always have on your desk with you while you're working mine is coffee personally definitely snacks yeah I can't go very lot of that snake I know I alright guys let us know in the chat we'll be back in a little bit we'll play a little video and then we will randomly pick one of you guys and the winner will get a hundred free custom stickers from sticker meal all right oh you guys are going crazy your phone a notebook coke cats yes that's an important accessory headphones sticky nuts with things to do water oh and I said plants galore books awesome I love it guys at chatting away these are good answers your wallet and inter-gold sometimes a beer yes yeah these look like things that I always have snacks and I found a lot all right we're gonna see a name pop up here pretty soon to see who's the winner let's see BBC radio Oh radio that's a good one you'd serve we've got Hellena we've got a seed quotes you say in both clothes all right we've got a winner oh it's you Tom congratulations you saw yay all right so we will one of the moderators will message you on B ants – how you can get your your prize but don't worry the rest of you can still get a discount um you can go to snick sticker mule calm slash Adobe live 19 right up here and you can get ten stickers for a dollar so don't worry if you didn't win you can still still get that coupon all right congrats eats off all right so we're back we're back on the wireframes all right you guys it's still Chetan water-bottle Pantone book okay I haven't used one of those in a long time actually a Pantone book Oh coke more coke Lipton tea all right I'll let you get back to your designing now all right well we had a couple of good questions on wireframing come through there and I took a second to jot a few different so sorry I didn't write them fast enough to write who asked what question but we have a question on what colors you can use in wireframe weed question on D I start in whiteboards and then one you stuff in India and this is making him get up and go to his desk to design even though it's 127 of them okay let's talk about either either one first we do wireframe colors or whiteboards first I think colors is interesting okay so you're uh you're a blues kind of guy yeah all right all right why so I have blue eyes it's my favorite the short answer is color doesn't matter at all yeah you see a lot of people doing black and white black and white it's awesome I like throwing a little bit of color in because when you get a whole bunch of wireframes you know you could be looking at 10 15 different ideas for different flows you can be filling up your XD document yeah if you color code you know like I've started color coded here images the baby blue and controls you know we could add in another piece to this which would be and I'm picking the one that I said I like the least but we'll just forget about that you know we could add in another one different color that would be what's a good one will keep with this sort of bluish tint kind of thing that we've got going here you know we could add another one here that would be oh man layer order I feel like I'm cheating by doing all these hotkeys and you guys can't see what I'm doing but I just put the word the layer where the word is on top so it got confusing because the Purple's transparent you know account settings or whatever you know this would be like your profile picture in your hamburger menu and maybe the name of the app and so this way if I have a whole bunch of these you know I can then step back and see okay this is you know the design where we put the header up tyrita we put the profile up top for this when we put controls here on the side et cetera so it's up to you use whatever you want I was just like looking at color yeah yeah the second question was around you know do you start on whiteboards you can do the same thing I'm doing right now on a whiteboard I'm doing the next D because you get one step closer but as you noticed right there I got confused on my layer order oh shoot the text was under the transparent layer hey you know in a whiteboard you're just it's the pure idea and obviously a whiteboard is really great for collaborating if you're in the same room with somebody sure you know you can get in you know XD now we've got these cloud Doc's trade things back and forth you know if you've got remote co-workers that's true you know there's definitely cool stuff yeah got that you can do I see another question here and the wireframe step be done straight on the artboard in the design process yeah the answer is yes we're in an artboard right now so this is pretty small on the screen here but you see it says iPhone six seven eight this is my artboard title and so I'm actually in the art board which gives me some advantages of prototyping like so if I was not in an art board those prototyping steps you saw me do earlier those wouldn't work so they're just our board tells XD that hey this is a screen yeah make sense yeah let's do one more question when Z said 1:30 in the morning is prime design time like that so true for all of you fellow procrastinators like it now let's do one more question low fivers hi-fi wires yeah it's a good question and so you know there's like block-level wireframes like we're doing here and then there's I've made my interface black and white but it's actually full res the whole like however you define those it gets down to who are you showing them to yeah what are the questions that you're trying to answer and what's gonna be the right level fidelity to do that yeah you know I just have to kind of measure the situation as it is exactly okay like I'm not gonna take what I've got on screen out to Starbucks and ask people to use your test it it's not gonna make any sense yeah but you know I can go out and ask somebody with a higher fidelity but still black and white yeah and what I've noticed you know hear people talk about this is that the more finished something looks the less likely somebody is to give honest feedback about it that's true because even strangers don't hurt your feelings right no strangers sometimes I cry yeah yeah yeah user testing can be rough yeah get those feelings mixed up in there and that's where you know product design gets away from some of the other creatives that we have on the set you know with with this we have an objective you know to do a checkout flow or account signup these are very unsexy things yeah but you know you got to figure out what's that right pieces to get it and you know you got to go and test there be a hi-fi lo-fi it depends on where you're at we're really high level right now I'm staying here and I feel like I generally do more like lo-fi wireframes if it's just like people within my own team cuz like you said they already know what's going on you you know you're just trying to get ideas down on the paper but you know if it's people that have never seen it before like users you might want to do something that's a little more higher here fidelity because they have no context as to what this is totally yeah and I'll train when we get to that point where I would kind of maybe take it out of the office I'll try to remember because that's that's really a great question yeah yeah thank you I don't remember who asked that but that was a good one ah my wreck yeah there we go cool all right well let's get back to doing some awesome wire framing here we sound so excited let's get back to doing stuff like I feel sorry guys just look at boxes all right that's good too let's recap a little here so the last one we had looked at was we had our image here some really lightweight controls you know I couldn't put a filter on or maybe drop some text in and then I had this nice prototype interaction here where I can auto animate slide in my menu from the side and this could have like I said you know existing lock us with lock ups of text it could have a whole library of graphics maybe it has you know other photos I've taken in other videos I don't work I've created all kinds of cool stuff and then so that's where we left off that's the idea what off the iPhone I want to get to another one though which was we can stay on the XD screen but I'm looking at my notes here look quick let's D take this one some people keep their you know XT I can't super organized I'm kind of somewhere in the middle I like to just make sure I'd write the idea down when I have it and then kind of come back and and organize a little bit more so we've talked about we've kind of got this dual goal we want to have our image as big as possible help you guys remember here we got image we want to have our image as big as possible but we also want to make sure that we have you know access to doing things to our project and you can quickly see here even just these side by side you know in vertical that's a lot more image and your phone's not that big so you know you're trying to do these selections you're trying to drag and drop and rotate very true and people have big thumbs sometimes exactly exactly and yeah everybody's experienced you know when you're trying to push a button yeah that's too small on the phone so let's just like you know I mean let's say I have a mental block and I just want to say what are the two things I'm trying to do here sure so this might be the first thing I'm trying to do and then the second one that I might be trying to do is like okay I want to make that image a lot smaller I don't I have a lot you know more control here and now you know back in the day before we had awesome tools like X D and really powerful phones to do all kinds of stuff you maybe have to choose between one of these you'd be looking at like pagination or like I got to go in and out of the edit mode but what if I could do something like this I'm gonna switch over to prototype because this is gonna allow me to merge these two ideas and I'm gonna click on our bottom box here bring it over to my next artboard go back up to our interaction pallet here on the right which is new that's in the new release so make sure you guys have the new one download it just from like a few days ago that's true this is hot off the code presses yes and if you're not on the latest one that's fine these functions are still there with just a little differently you just have to click on the little grab handle here to get these options for the trigger of drag action of auto animate that's just default that's what we used last time and so again cross your fingers this should work but if I go and I drag up on that now I've created this sort of dynamic relationship between my image and the controls we're gonna go back and then just close that loop again so I'm dragging from my controls area back over to the art board and I'll start from here so you're like awesome dog photo gotta add some sweet stuff you know add my text okay I want to go back to my big image manipulate it here you can see how that piece is kind of coming together I love auto animate so yeah so that's that one feels pretty good that I think that one feels a little better then where did it go then this one mm-hmm um you know this is nice because I take the fullscreen but I cover the whole yam and Lucy it worked so it's a little you know I think we'd have to get into it these are the leaders for sure don't you think so how many do we have we have how many options do are here let's go organized okay yeah I don't help me kind of visualize things and let us know what you guys think – yeah so far so we've got Oh is he a surfer image yes thank you yeah we're gonna do okay yeah there's some people are very regimented with their organization I'm kind of fix it fix it later okay so we've got yes let us know which which one you like and actually I should say let not judges put option A or B just say something about why that'd be that'd be great yeah I'm actually think a little bit yeah so option a here is kind of this full screen swipe and then option B is kind of coming up from the bottom it's like I said I like option B a bit more because it allows me to keep the image you know fully on screen while still having yeah um I can be as well but what do we see that everybody thinks in the comments here once they're talking about other stuff what is good see Mario says I love Adobe but in a design way Marco's is saying they're just asking like what type of programs they like best catalina says editing a hi-fi wireframe after feedback is time-consuming that's true but it depends on your client I agree with that yeah yeah this is cool yeah I like option beef I think yeah I think city and the sneaker reason is because we could probably take this even farther if you wanted to hide the surf image and actually go full screen on this one and or we could leave a like a little peak at the top and then maybe you say we do make this transparent yeah you could have like different variations of just depending on how much how many like sliders and everything that you'll need exactly so you're like okay this is maybe where most of my things happen but then if I want oh we got to hook it up but then if I want to I can still have okay I'd have to do something actually slightly different to get that to click over there but you see we're where we're going where you can sort of blend these ideas and just to kind of recap here a little bit of wire framing they're saying option B is the best – all right get some option B fan we shouldn't have told them ours because now they're probably just gonna say option B this is this is biased user research so to kind of recap a little bit on wire framing here we think about how many potential apps we just kind of walked through I'll zoom out all the way see even though it's disorganized at the top you know think about how different if we went from one of these and we went forwards think about how different that would all look you could end up with a completely different application so you could still find that as we go deeper into what was looking like option B that maybe some of these other components we want to pull out but it's awesome to them look at the two that we had is kind of leaders and say even these two apps have very very different feels that's true yeah you could be like a totally different app at the end if you ended up going with option A or one of the others exactly and so you know there's nothing wrong like I can look at these screens and think you know okay visual design wise I already have different ideas sure there's nothing wrong with doing a little gut check you know do single screen or something but we're still kind of in that that structure phase yeah so well we've got about 40 minutes until we're gonna review some of your designs from the daily creative challenge so we'll be checking those in discord so be sure to if you want us to review any of yours give me feedback be sure to submit those in discord got the link right up here if you just want to share a screenshot or if you got the link on being ants either are great and we'll both give feedback so from a pro I'm looking at omar's question here Omar's asking question about option a can you bring controls over the next screen like adding controls then overlay over the full-screen image and I think that's maybe I'm misunderstanding that the question but I think that's kind of what we're doing here because we've got our full-screen image and then with our drag control in XD prototyping the darker the purples you know our controls and then the image is our blue here and so that's that is kind of idea to be able to try and combine yeah yeah did you get that online did that make sense it made sense to me yeah so like the darkies an option a fan we got a battle Rumble the jungle we vote we always have to have a devil's advocate yeah well I think so this is good that that we've got sort of advocates on both sides because I do think their strengths to both yeah knowing where this goes I'll say that I think we're a succeeds is in giving you a big library of things to pick from so if I've got a you know text is a good one because maybe I want to have a full sentence preview and that takes up a lot of space but do I want to be going into this fullscreen menu that's really heavy every single time I might want to change font or had type you know maybe not so option B when you think about your your majority actions and this would be another good thing to do in your on paper is like write down all the different actions you have to do yeah and this is really you know it's the really structural core stuff of how apps come together is like I have to add content and then below add I'm doing bullet points with my hand you know they're below a DS cut yeah text photo video stickers you know at mentions Instagram yeah other stuff we haven't thought of yet that's gonna be really cool yeah and I think it's also like worth thinking about well who's the target audience for this kind of app because if it's more of a pro maybe then we would go with option a because the pro would want more more of those settings but maybe someone who's more of a beginner or doesn't need all the like full functionality they would maybe prefer option B so yeah totally yes I think this is kinda like for influencers okay um who are not you know video pros they want to spend time with the content they want to have something that's ready to go on their phone from start to finish you know shoot on the phone mm-hm stay on the phone edit share yeah so yeah kind of somewhere in between yeah so I think option B is a few more options good cool this is a good discussion everybody on the on the chat and think somewhere is that awesome question Kristen likes B because the image is still shown for editing absolutely I would get hidden yep Catalina I also like ception a yes well I wish you continued with your design inin all kind of some of these I know this is us I don't normally have a feed of people maybe that's the next app we should make I'm doing the series on automation so yeah I know just like I'm streaming your work all the time I like it um okay we're sorry where we at on time we've got about 37 minutes thanks yeah so what do you want to jump into now let's do okay so we've talked a bit about this particular challenge of how do we balance you know showing the image with the controls let's talk a step back the whole app and sort of say what are some other pieces that we might want here and I appreciate everybody rolling with diving into the details because I wanted to make sure that we had time to do that but everybody loves blue boxes so much we're just flying right through so alright let's pull our option B and I've just just so everybody knows I'm working in a fresh document here so I can go in any direction I want both spatially and you know concept wise I'm just gonna pull these down here and we're gonna title this like this is where you do most of the work so I mean the phrase that I use at work is like project editor it's kind of it's like kinda lumpy is a project editor very serious video changing station video manipulation Anna well go is so is this you're trying to think of the title yeah no this is just the I just want a title where these artboards are gotcha so I stay kind of organized in my so this is kind of like an in-between you're saying yeah the wire framing individuals I think we're just trying to start to lay out the Apple oh okay from a structure standpoint so like let's just make these blank and then I'm gonna say like homescreen so home screen and you know some people end up doing especially when it's for sharing online they do like Start screen you know as a product designer I would say you should pressure your engineers to make the darn app load faster so you don't have a Start screen yeah I know you got you know to do the the job that idea if to think about these things from all angles so let's go ahead and get rid of that Start screen and I love that you made it that good out of their starts yeah so and you can ask the same question about home screen okay it's not an engineering problem but everybody has home screens and it's kind of like why you know you think you guys want to get back into the main action yeah so you kind of justifying that so you guys think like we used to have back in the flash days we would have you know the intro animation of the whole webpage you had to enter yeah enter wizard lair okay these things were not that user it actually splash screens like messed up all this yeah so no one could find her was that too so I think we we need some kind of home screen but it's probably gonna be more about with let's make this more descriptive let's say like project list slash home so at least that gives us a little bit of carapace because it would be kind of weird if every time you open the app you open right in to write your last project that's true so here you can like browse through all of your projects like that you've previously worked on maybe is that really yeah that's good yeah throughout will just browse my projects what else do you think uh maybe start a new start a new class maybe see if the community is working sure yeah are you reading my mind uh but [Laughter] Sarge makes that you're adding those titles I think that's a good idea – cool just like totally use the the pasteboard I feel like a lot of people think like how it everything has to be super clean but like that's what it's there for exactly actually I someone threw out the idea one time of calling all of those little pieces like the remnants it's like your artboard Chrome which is like here you know you're making a mess making the design and then you have all these crumbs and I think it'd be interesting to use like make something out of your crumbs at the end you know I totally have you'll end up with like the icon scrap pile yeah I like all these shapes that you yeah and all these pieces since you're commenting on the artboard one thing that that we end up doing on my team is we'll just take like a sable do this and I'm gonna rotate it so it's like kind of a page where I guess maybe they can't rotate our board I here we go there we go we'll sort of have you know the whole design flow listed out here and then we'll actually write just some notes about the project and you know I like to talk with people who are getting into design about like closing the gap between you know Behance and like how that work happens you know and a big part of that is let's say we'll come up with a name shortly but the video app yeah and then let's know if you guys have ideas there's really good about titles app ideas and so we'll end up you know I'm not gonna do this whole thing here probably cuz I don't know where we're going with this but um you know like this app is for making videos just like you know hit put on this to have the top of the head you know we are going to support you know whatever 4k videos and you just like start talking about what are your requirements it's gonna be really boring if I just make these up on the top of my yeah this document gets kind of detailed but you know you're never doing these things alone you're at least with the engineering co-worker you know if it's a team of two yeah but you're more likely at least with you know two or three developers and maybe marketing person and if you give kind of a home base to where that project is it's really helpful yeah okay so we're gonna have like a home screen and then Drake came up with some awesome ideas so we're gonna stew communities work and then if is this is a video app we're probably and we wanted people for influencers to stay in it we're gonna need the camera mm-hmm so he price and fastening the camera let's put the camera over here so this is like kind of an Instagram style app where you can actually you know do video or camera within it not just like uploading your own great yeah I think you know if we were really getting down to the real app a lot of influences are shooting with you know small mirrorless cameras we maybe think about how do we help them you know do that connection I don't really know off the top of my head like how the you know every cameras a little different a lot of my like has the Canon app for the Sony up but you know iPhone and Android cameras are getting so good yeah so yeah when I slide and I just use my my iPhone like and it's no one can tell really it's pretty amazing yeah okay cool so you know this gets there was a question earlier about onboarding you know this gets a little bit donburi I think you have to have we're like not quite there yet to think about what's the specifics of that experience but we're thinking about where do you drop in to the app and you know the other questions like why do you need onboarding is there something that's too complicated you know I don't need an onboarding to figure out how to like open a door you know but sometimes I need to onboarding for like a light switch or the classic one is the shower handle because they all work differently it's like which ways hot cold more water less water yeah see you kind of I think you know is onboarding just covering up or something or is it that like the Apple isn't saying the same thing there or is there a way you could invest maybe in fixing the app and having it work a little better that we need XD when you do this infinite this is like AI featuring do this in from your camera it like sprinkles no yeah sprinkle like so just some design magic yeah when I was like 5 p.m. I'm done with work yeah yeah or like the solitaire cards or something okay where we go with this so we got a home screen it's a touch on keys work camera what should we let's do the home screen here okay so I'm gonna cut it because that's the closest related chair so usually have yeah let's switch back to the GoPro we could switch over to our document camera here and so on this I've held a steady for you guys I just did a couple quick sketches on you know the home project screen and this is a good example like to ask the question of should it be a vertical list a horizontal fullscreen square thumbnail grid you know I don't need to be on the computer to do that these are like pretty big high level differences and we're getting some pro tips here for document help and so it's great to be on it's great to be on paper because these are super quick to draw up so just go through again kind of same thing we did before like pros cons you know this one fits the most projects but they're also the smallest thumbnails sure this one you get really great project for you but we're basically looking at one a time this one's kind of in between but these are widescreen which is kind of weird so but I guess your videos well if you have yeah well if for if are like goals this Instagram story creator pretty much everything is gonna be vertex true that's true so then I drew this one on purpose to like point out that you'd be taking this little slice so you kind of got to think about how does your content mix with with that is I kind of like this one you know these projects like I don't think you're gonna have like 3 6 9 12 15 20 that's a lot of projects yeah you know probably just make it look last year and maybe if we need we can add a filter or something if you need to search earlier them those are called good problems to have on version 2 if you have that many users using it okay cool so let's key into the second one here back over in XD so I got about 25 minutes until the deadline for you guys to submit your challenge designs so be sure to do that on discord and we'll be reviewing that during the last 20 or 30 so minutes of the stream today awesome and we can with that's a nice timeline I think we can pick it up here I've been talking a lot about wire framing we can jam a little bit circuit we need the image we us are gonna need a name just start to kind of let's like get some more stuff on here I want to I want to start getting to the problems of how do I organize all my projects and whatever we're gonna need some navigation because remember so this is our home screen and we're gonna need to go to our camera well let's pick a different color for these guys let's pick a deep blue so these are just placeholders for my icons we're gonna need to go home which is where we're at a camera I'll see your new project that's gonna be another button probably and then maybe browse the other other people's projects so again you know I want to make sure that we have space for these iswe head and group them so that I can click and drag them easy around so this is all about getting more realistic about what do we need to fit in here you know we could maybe make these a little smaller so I get more of a kind of peek of what that next project is I don't need no let's go something like that it gives a little more space maybe app name something like you know at this point I don't know if we there's place settings or something mm-hmm it's always good to keep in mind for like a hamburger button it's true maybe a logo let's make these a different color cuz these are kind of different these aren't like so you'd say maybe the nav at the bottom is like the first or maybe the second layer of hierarchy so you want them to look at the big image first and then the nav at the bottom and then like those two icons at the top what you say yeah that's super good that's a really good call some actually make these a little bit smaller and so what anter is getting at is actually really awesome and you know I'm sure everybody's heard designers talk about hierarchy before but you know the location the size the color of all these pieces give some indication of what there and how important you know each of them are so what she's saying is like how I have it laid out right now this is the most important means we probably can also make project name a little smaller here to you because I probably know what this project is yeah you know the sign me image yeah maybe the name is kind of like a backup in case I don't and I need to maybe know where to go next so okay so like I like this one the I think we you know I have to be fond of so if I've got like one two three four five six projects like that's still nice then maybe we can say that kind of max yeah yeah and that's not a thing that you know that when you're just online checking out people sweet single screenshots you're not thinking about all the cases so what if you know like we said before if somebody has a hundred projects like that's gonna be very different right right so okay so let's kind of keep going on this one yep name project image and then it's like a good transition between I'm just trying to think of what's a good way to sort of segue between getting past this sort of wireframes to like let's bring it to a level with the timing of left let's bring it to the level where I'd maybe think about getting feedback from somebody okay super informal so I'm gonna go ahead and get that surf image saying more of a higher fidelity higher fidelity wiring yeah so I'm gonna go ahead and bring this image for yourself I'm sorry ferry yeah okay yeah aspired by real life right by real life yeah so I went on Adobe stock and just got a image of a surfer here and and then what I'm doing here is called masking and so I just copied a copy and pasted a rectangle here at our vertical screen size and then I want to get just kind of this crop of that image but I want it to be exactly that so I highlight both of them and then command shift and there's probably a way to do it through the menu as well and then you've got this nice little mask so let's bring that over here way Drago sorry if I'm butchering that he said I'm really learning a lot from guys tonight and he's really glad he didn't go to bed early today thank you also where let us know where you're located at what time it is all right so we've got our I call this do you guys Sirsa but you go on vacation everyone all right it's not greater trains too small yeah all right XD team surf retreat I don't know laughter yeah I just if they do do one that I just invited myself because even though I'm on spark team I just yeah yeah yeah just get in there yeah okay and now because we want to polish this up a little bit and kind of fast let's go over to our design system file here okay yeah so you know one thing we wanted to talk about in this stream was how to use a design system and how do you keep components linked across our boards all this stuff so real quick from the top this is like our guidebook yeah for how to keep our design in a certain mostly visual direction there can be interaction portions of these too we're just gonna be talking more about visual stuff today so the first thing they've got here are some colors so there's a couple different ways to link these with the documents I just copy and pasted that these should be here we're actually gonna change that slightly back to my documents so I'm just gonna make these components here and so that will keep myself a linked Howard's probably own there's a different way that we want to demonstrate this but we're gonna do it this way and so I'm gonna bring these over and that way once they're linked you know if I change the color that'll nice yeah say you want to be able to have that main separate file let's say you're working with other designers on your team and they can change the colors from that main file and then your file will be updated exactly exactly and so I'm just taking my boxes here and then hitting this color button and now I've got those colors exactly right here how I have them and then I can just delete those actually so yes okay so we've got some colors I'm gonna go ahead and make my artboard background let's keep it as white here for now but I want to go ahead and make my buttons a different color here so let's go ahead and make him this kind of dark color and then maybe these ones let's go ahead and make those dark to you but I'm actually gonna make these fill color our border we're gonna just grab our eyedropper here because like we said before those are sort of less prominent mm-hmm and then I don't have a second image handy so let's just repeat that that's fine we get that crease filled it in yeah you know we can go get more awesome images okay like even just with those couple changes we can see we've coordinated the colors we can put an app name somebody said with an app is named vine [Laughter] I think there were some names further up in the in the feed I don't know if you can scroll back up or not yeah sir vid vid XD alright food sob is on fire tonight alright vid XD next e surf team retreat let's go back over to my design document here or i sorry our design system because I've got icons and this is where I really want to be using that component feature so these ones I did already go ahead and make them components you know you can go to like Google material design it's got really great public icon system hundreds and hundreds icons use all across Google and Android it really really robust you know this is something that say we knew that we wanted to go with these icons styles what do we need here we need our home icons some select that one and we need our camera so hold shift and Syria we don't have a hamburger but we can make that real quick if we want and we need to probably add like to create a new project so let's grab those and start there get those paste it in here someone said vid wizard for an idea for your app title um we need some more ideas guys you guys are normally so good at these ideas and vid XD Adobe XD in there that one's nice and short yeah let's grab one more icon I think this is supposed to be the feed icon so we're gonna grab grab this one as well like a order II probably think home should be first a lot of times you see the new project creation 1 the the plus button kind of in the middle but with 4 icons we can't really make a middle one because then you know the even number that's true yeah so please from our design system they look decent you know there's sort of spaced evenly I actually left a couple things about that icons I don't like we're not quite to the visual thing but I'll I'll I'll just jump in here does everybody notice how much thicker the stroke is on this home 1 then kind of the rest of our our icons you know that one stands out a little bit as could be tweaked but that's like a final designer that's like we love this app the user testing is great we're gonna ship it we're not at that stage yet totally we're super far and we're like on the edge of we want to show this to a stranger so we probably should put some some icons in here hamburger I'm just gonna draw a real quick one you know it's a super simple icon grab that icon car that we're using he's my repeat grid 12 minutes until you guys can submit your design feedback or if you want to get feedback for your designs that you've created for the challenge earlier today so make sure you submit those in discord will be looking through and giving you some feedback during the last 30 minutes in about 12 minutes and then what's the second house maybe I don't know settings profile we'll leave it for now you're honest yeah I don't really know I just thought it looked cool yeah it's kind of grabbing my attention a whole lot this I'm actually gonna take that stroke and again I'm cheating neck because we're getting into like visual design thing right but alright so like really quickly we went from a wireframe to actually what I should do alright so I didn't make a copy but we're gonna do this is like risky so I'm gonna put that in my clipboard so the design is in my clipboard I don't recommend this and then we're gonna pay their debts boom okay I don't recommend that because if you click anything on your on your project you will lose so really quickly we can see our before yeah it looks really different after and you know this one on the right like we're not that far away from being able to post that online as a portfolio kind of thing yeah there's visual stuff we don't want to do but how long did that take not very long because we segmented and we were only thinking about how do we make it just a little polished and we weren't thinking should this be a left-to-right scroll or a grid or all these things we'd already answered those questions that's that's a good delineation between like almost something between you think of normally just like wire framing and visuals but I think there is that important step in between my okay we're still we're still kind of working on the wireframes but we're totally not ready after that all the branding totally that's important stuff that we always miss and I tell you there's a whole lot more we can do from you know visual and interaction perspective on this app here but we've got it a state where I could plug you know my phone into an XD I could add a couple of click interactions I could go out to Starbucks where all the surfers hangout no no depends on where you are you know and get some some live interaction with ya that everyone in the chat is saying like I nearly got a heart attack I only did it we could have redone that since I'd already made the decision yeah good I don't ever do that when it's more than you know a minutes worth of but it's good to see that yeah yeah do you think we have time for like one or two more screams yeah oh yeah let's do it be a meme someone making me move I'm doing that I like that I'd be pretty blown I would definitely post that if anybody made a meme of me while designing that's going on the Instagram yeah sure alright so ahead of time I make a copy of these we're gonna put it over here let's get to this first let's take nine minutes and get to this first one here so if you remember we had I don't know if I still haven't hooked up but you could click on your project and then go into the view here so between these okay I'm going to delete this start from scratch here one quick tip with settings up for prototyping to animate between the boards the artboards each of your components that you want to animate need to be the same name so I should name this image let's just do that see we've got projects image copy and paste it project image so that's that on both that is true even if you're like one letter or number off you change it XD won't be able to realize that okay we need to change this from small to large or something totally and especially even grouping to if it's like down a bunch of layers or like in a sub where it won't recognize it so exactly and you sometimes just need to restart yeah like I'm group like to start having problems yeah it's not working okay so we're gonna go over to our icon pack here I'm gonna want that one and we'll get into that more later but we're gonna put two icons for controls down here but we're dude we know we're gonna add some text and we also want to do some sweet and magic stuff whatever that stars for keep everybody in suspense okay so let's go ahead see let's make a prototype link between this and this one I want to do is tap but I still want Auto animate and there's some other things on here that we've an accounted for so let's see how it looks tap awesome so that thing grew close the loop here another tap would bring us back here enemy there we go so we've got okay so look at our plus button here so that's featured in both so it's moving in this weird way I'm just gonna give it a different name I'm gonna say add content and this one is new project and now it should just fade away like the others nope still doing it there might because it's a component in trouble she's chat but with a couple different clicks I'm just gonna um group that try this again here there we go so with a couple clicks you know there's more I'd want to do to this to make it like ready for developers you know even visual design aside prototyping we can do more threat of typing but this is plenty to give us a quick idea of how does this app feel what do people think it's for yeah what features what expectations they have from it yeah you know user research gets into like a whole nother and we could do days of discussion about user research but this is a great point to pause and go you know ask your friends of what they think about the app and yeah what do you think it does and all this stuff yeah awesome great what do you guys think Zubair says the home screen looks amazing yeah you've got seven minutes to get those challenges in so we're about five now actually I'll see you oh maybe we can fit a question in here or something yeah any tips on the best way to present UX project on B hands great question so I would say first and foremost is like think about what you want to get from the experience I think a lot of people are trying to replicate things that they see yeah and which i think is fine at the beginning like you're just learning yeah and that's a good way to learn it's like every creating things but yeah after a few years you know you learn your own skills and try to do your own thing totally yeah yeah sorry that's important recreating what you see is actually a great thing to do to practice the skills yeah I should clarify but when you're thinking about like what's your online presence you know think about if you just met somebody at a design event what would you want to show them what would you want to say about it and and you want to make sure that's like authentic to you and their projects that make sense to use that's that's the first one more specifically to how you present user experience like a lot of what I've talked about you don't see well I like to show you definitely not dribble you see them be here yeah so I think that you can go kind of step by step and you also can look at like the portfolio project that we looked at with the drone software you know I talk about the business challenge the user challenge and the steps that we took it's really about explaining that story so you recommend really like writing all those things out totally yeah yeah I think employers really like to see that to visually read like how your brain works exactly 180 I be yeah screen on its own you know could be amazing but it's not worth them a lot yeah it's it's where does it fit in the product and where does the product fit in a person's life in a business's world again nuggets of knowledge here yeah all right we've got three minutes let's see all right so this isn't a question but can you add some shadow to the images on the home screen so yes 100% we could but we're just not at that point where that's the thing that we want to learn about what we want to learn about is does somebody think that this is an app for making videos or consuming videos or do they think that it's a surfing dating app you know have we like put the pieces together in a way that that we want that's true yeah I guess because there is a lot of the dating apps there like swipe left and right but I think once we start adding the visuals you'll be able to really differentiate between like all the other apps yeah yeah we can throw we can try to get the drag thing going here too so lets and I like to touch on tools a little bit I mean we only have two minutes but I've been eyeball on your mouse over here that's beautiful I have the same one but I haven't seen that shiny version so this is the MX master right it's like you're doing like a beauty yeah yeah here we go and ladies and gentleman here for $9.99 we have the MX master by us this is not cute asleep so what do you like about this mess I like that has a bunch of controls like for the thumb and stuff and it's very you it's just very comfortable but I have to charge it all the time do you find that uh no no actually yeah maybe you click more than I do minimalist yeah only when it's desperately needed yeah instead of like I mean obviously you've got your MacBook Pro um I've gone back and forth I mean you know people on our team have you know I'm head pro with different drawing after and that's a great place to start I got nothing wrong with paper yeah if you're collaborating you know again two people at different locations especially on some forthcoming you know really cool stuff ah let's say you know there's different ways to collaborate that are pretty cool yeah the biggest thing for me is just posture you know making sure that you can sit at the desk for a long time yeah yeah yeah switch that up you know making sure that your monitors at eye level so you're not crying your neck yeah yeah yes these are eyeglasses they are prescription but they also have like this blue tint there's no one's gonna show up in the camera but it screens out some of the extra blue light that she get from a computer and it helps yeah good idea yeah any other tools there those are the main ones for you it's just yeah I mean you know if you get the screen at the right height the desk the right height and a mouse that's comfortable you're not gonna have issues in the second you start feeling you know carpal tunnel and then just ice it and you know go serif or something Thank You Carla all dice's got a surf Allah yeah hey boss we go yeah okay guys well um the deadline has ended for looking at submitting your designs for feedback so but don't worry if you didn't submit you can still submit them yet tomorrow we'll be back here for a few days so I'm gonna go ahead and switch it over to discord so we can look in this design feedback channel we'll come back to your design in a little bit just so we can wrap up in a few a few minutes but um let's go ahead and look and here let me skip this over so you can look – so we're just looking for the design challenge screenshot so the challenge this week has been creating a music creation app and today the challenge was creating icons and buttons and yesterday it was to create a home screen so we can give some feedback for you guys and just take a look at what everyone's creating so what do you think about this one cool so just recap for me and for everybody on the stream the goal here was kind of a music app yes a music creation app so not like a music like your No yes so it's more like okay okay cool awesome yeah so we'll just kind of jump in from the top you know I think that so I'll try to do you know a strengths of the screens and then also you know opportunity to improve I think strengths right away this is awesome visual design you know I love the colors cuz they're blue like we were just looking at blue purple is Gray's really strong contrast on creation tools like a lot of times people are choosing is really weak Gray's to make their text and you here took the confidence to say like these are creation tools I'm paying black on white shirt really grabs my attention in there and it's accessibility friendly which is nice yeah super high contrast if you don't know what contrast ratios contrast ratios are just go ahead and Google contrast ratios there's minimum things that you have to meet to qualify it's it's um it's important and you know there's a lot of people with different different abilities out there for reading and contrasts all that stuff and different screens Android phones you can't you don't know what they're on that's turn old laptop so yeah that's super awesome in terms of opportunities to improve I think the hierarchy is strong at creation tools and then as you go down the screen I'm not really sure what's important here yeah because it's it looks like there's some cards exactly sure which is most important because they're all like this super or like bright purple color which I love but yeah what you're saying I'm not sure is the searchbar most important or is it like this instrument instruments area or is it like this icon I'm not sure exactly yes I would think about like Andres said what's the most important thing to be doing this screen and maybe this is actually like three or four screens that would be super strong on their own and then you just have to think a little bit about navigation between oh yeah yeah well that one was from Dharam Paul thank you for sharing that will give you a little yeah Oscar share will give a cookie to the ones that we have looked at from pixel Oh all right now I'm starting to see some of the pieces that everybody yeah this is a great a great compare and contrast especially with the similar elements pretty similar you know feedback for that where it says creation tools you know that gives me my I you know spot to land on really great contrast ratio they're black and white it doesn't get any better than that I kind of feel like I'm like in the iPhone home screen right now yeah this looks like that circle button you know and like this looks like some of my apps so I kind of don't know if I want to see three across do you know what I mean yeah it's just like too familiar to the iPhone I go I think the question there is what about the layout of the screen tells me what the pieces are gonna do mm-hmm that sounded very confusing in my head as it came out no I like what's actually going on here yes actually so what about the layout lets me know it gives me a ques of what are these things gonna do because I can see like that keyboard 1 I could see getting a keyboard noise yeah I could also see it opening a keyboard sure and then if I hit instruments down below I guess I'm not sure like right what's different about instruments versus like than the keyboard yeah what's like these are more important mm-hmm there's also a keyboard down here yeah maybe it's just a matter of like using choosing the right icons I guess and then if this is navigation we also have navigation on the mouse is really fast you know if this is navigation in the middle then down here's also navigation and like I assumed that this would allow me to go somewhere to chow yeah it's like a lot of navigation too many roads to pick from room say yeah think about what you're trying to achieve with what's the main thing again that should happen great job picks yeah cookie I hope all right yeah the chip cookie mafia all right let's see this one so this is from Dan p.m. oh you use the waveforms yeah all right all right so this part is looking really strong to me because I get that okay this is from the community and everyone's posting their own songs for me to listen to or give feedback on touched you're great okay yeah what do you think again Oh what do you think about this thing I think this is a little stronger in terms of like hierarchy to me um cuz like I look up here first and these seem like okay these are the quick access points maybe this is like I don't know what what the designer intended but this is like okay I'm actually gonna layer some some of my instruments together this is like choosing all the instruments and then down here these are like some of the lesser important elements maybe I can search through their instruments to start mixing those down here but like this is what's really kind of an area of opportunity as you said maybe I don't think I need this like big title to tell me what to do especially since it's the home screen I think people are like they're gonna click around a little bit they don't need to be like hey click here now click this yeah that's my initial initial thoughts I would say also maybe like you don't need this little search bar just because it's kind of tight with the padding with the icon up here I would say maybe once you click the search bar maybe this could fly out afterwards but it's just a little it draws my attention since this is like the only white thing on the screen and the whole rest of the screen is dark that makes sense yeah I agree with all that I think one thing that helps this page a little and maybe the other ones had it but the help I can clearly see that home is indicated yeah so at least I have some understanding where I'm at that's true and then yeah I think the community songs section is super super strong I don't know what instruments would do maybe like sorts the community section but that could that could be improved that visual relation and then the top it looks like keys to a keyboard regular low and that's true that's what I thought is yeah and same theme like titles and there's actually a question here in the chat around needing a page title and you know words shouldn't explain the interface like the the pub the joke the line is that you know interfaces is like a joke if you need to explain it yeah you know how the page is laid out should tell you what is right there you say yeah cool welcome go Dan cookie Oh cookie I don't forget the cookies important things ok ooh this one's from Deema she said quick going before going to my job what do you think oh yeah well we'll catch it on the replay so hopefully good day or Tina hashtag Adobe cookie that's amazing okay so this is cool I mean we're seeing you know some of the things we commented before I think are straightened out a little bit in this yeah the hierarchy is a little bit clearer this this trend in area you know this is very clear I understand what I'm getting here this is plain maybe this is other people's music or something I guess I'm a little unclear what trending means so maybe a title of the track and who's who created it yeah it'd be cool my DJ toolkit instruments this looks like a creation area probably both of these I love the DJ tool toolkit title I think this is actually a great example when a title does work just because those those icons might be a little ambiguous yes yeah yeah I agree it does give me a better idea of like what's what's going on top DJ's it's like a professional DJ oh I get that yeah I think this one's this one's got a lot going for it I'd say chunk out in some way this kind of creation area and and maybe it's just that like I need just one call to action here to create a new project sure or maybe I very explicitly get a way to make a sound and then from that like a sound wave comes up and I can clap I can calm you a project or something in there yeah I'm black is challenging I think the contrast works pretty well here yeah the darker background so it's unique you know yeah I have heard that like straight solid zero zero zero zero zero is a little bit jarring to the eyes so you like always kind of want to take it down even a few yeah even to 98 or like 95 or something I mean that's super picky but I feel like it does help now that's a good so my background is I came into the design sort of through user research and then interaction design and so visual design is kind of in the last thing that I've like added in the order of learning yeah and yeah I went for a long time without that like total black yeah it looks weird because it doesn't exist in the real world that's true yeah see I like this one yellow and she may have done this besides I was gonna say that yeah there's always an exception Google like Google search if you know that this is Google vantablack hits with a V and it's like this crazy carbon structure that absorbs all light you like I actually can't see it basically you can buy the paint now oh really yeah it's like super expensive but yeah let's get on that Adobe why paint a whole ball so yeah in closing on that yellow one it needs a feed and to the you can actually take like a super dark almost black yellow and that that's like a nice we can show you next to you okay but like black with a little bit of yellow oh yeah you know you don't I'm talking about okay yeah all right so this one is from ratenicz skied okay I like these icons here that like off grayish navy color behind the like bright kind of neon colors really really popping for me um let's see this is interesting I wonder like I want to see what this screen goes to yeah that one's like really important I like that I like I know we've seen that heck on it's actually twice here on the screen but yeah that one in the red you know the white strong contrast the placement is kind of cool it's it's like unique placement from navigation perspective so I'd want I don't want to make sure that that interaction was really nailed and very like high value because it does take me a second to you just as a person like it's something unfamiliar that's true I'd say I'm seeing not like a super solid grid structure here because here I have a column of like one two three four with the padding and then this is a column of like you know well this is four okay so this is 2 this is 4 then we got like seven down here so I like to try to always line things up so I mean maybe I have three up here three down here I think community song since it's running off the page and you're like scrolling through that'd be fine um but just like that all three of these aren't lining up it's kind of throwing me off a little bit that's why would you suggest kind of trying to win something stuff on here what do you think yeah I think similar one thing that jumps out at me this seizes kind of this like inlaid gray area it's dark on the top dark on the bottom and like that's fine I think it's effective I think we're pretty close for the iPhone 10 you actually have a little more room you could tighten this up but it's kind of like okay there's a purpose of separating that visually whereas like the previous one was all black I thought it was still pretty successful yeah so with with each piece that you add you know visually or interaction you kind of have to have a justification for it that's true and I guess right now I'm not totally seeing a justification for that I do think it works but in terms of like tell me why there's gonna be a flat background sure I I don't have an answer for that yeah yeah it's kind of like 2015's because I feel like you don't see a lot of headers anymore at least yeah I have a solid background now like footers for sure but maybe not headers but yeah okay any other comments yeah same I think so I noticed you know we're dealing a lot of similar elements here and I didn't check out the exercise this came from us but I think like just as a person who's seen it for the first time you know I'm still not really sure and this has been the case with all of them kind of exactly what I'm gonna get to you because I feel like instruments should be a subset of my creation tools so I feel like on all these screens and maybe I missing something but if I can always screen some confuse my instruments show up yeah because I feel like it should be a subset of hey look into mixers exactly yeah you know maybe like this waveform one I can record my voice maybe this one gives me a keyboard maybe this one like starts me off with retro vinyl sounding tracks you know yeah so yeah from a structural standpoint us yeah sure you will give you a cookie oh this is a different one yeah just really kind of go out there like do something totally off the board I actually really like this this is exactly what I just said actually really I think so because you get like your creation oh I should use the mouse you your creation mode up top here and then as a subset I get my instruments right and actually this doesn't pop up until you click something up there maybe it could be yeah and it's actually real interesting because we said that about you know if you need to explain interface like maybe it's not if you took away the word instruments I still have kind of an idea of what's going on here you know trumpet like that's a pretty culture universal and and probably the drum that's a pretty culture universal icon I don't know if that's a Macarena or a microphone or micro neither my crane is advanced yeah all right after that what was the meme after I get me man I got to do the mic I think it's I think so yeah so yeah this is like combination of the the visual hierarchy where you kind of set into this like lower depth shadow the size the icons are pretty similar the treatments the same so you could think about varying that maybe to show that instruments are like a subset of this creation and actually I don't know which mode were in right I think we should something should be highlighted more or just some kind of indication that okay we're on instruments right now yeah whatever one of these it is and in like with the neon what a great opportunity to have like on and off you know super bright neon and then more like yeah quieter and then we have to talk about so I don't know why music makers is here I think this is a really strong in your face but the music makers piece it doesn't really fit with what else is going on here yeah and it could be like you know you came from a screen that had it on there but just animate it off yeah yeah cuz right now it seems like it's part of instruments since it's in this kind of underneath area um so yeah I would maybe just remove that yeah unless it's like oh I want to tap on that person I don't want to use their instruments that's true but the treatment isn't correct here I think because it's too visually different like it's not using neon there's no hue I connection really between between those yeah those are really standing home that's great yeah I haven't seen a Pat a long time that I think is like scheme or FX but also appropriate right cuz like DJ's very like yeah electronic yeah yeah so I think it works here it's cool nice job how's it going okay I maybe like one more all right at the medley maker yeah nice the first thing that jumps out at me is these are like huge I would probably make these a little bit smaller just cuz the piano ones a little jarring like how big it is you tell what the icon is icon itself yeah I think the the square around it is would be okay as long as these like have a lot of hattingh yeah I mean I'm liking up here like the search community songs I'm not sure why these are over here though kind of like hidden off of the screen if you're supposed to scroll to see more I'm not I'm not sure yeah this one's I think there's some really good pieces to this I think it's like trying a couple different things and if you just took like just the red area and built the interface off off that and not have it separated red and white or if you took like just those four buttons yeah it's funny there's like each piece on its own is decent but together I don't understand how it's all coming together I think because the gradient also is very different than like this color yeah so I think at least if you had the same cup like shade of red for this this and this and this little button it might seem like it's more cohesive yeah a couple of things like I think this is supposed to be some kind of home button but it's basically the same it's really competing with that's true icon and I don't know if this is part of the kit or not okay guys I said I dig that yeah search here it's not clear what I'm searching I could be searching community songs or instruments or yeah I see that I've probably got I guess I'm not sure if this is three pages of people or if this is three pages of the red area and if it's three pages of people and this is from one of the people like there would need to be a selected state that's sort of unclear I think yeah if you just took like one of these pieces in your XD file and tried to try to build off that one at a time they'd be cool yeah great job Sousa let's give you a cookie I think that's about all the time I got one one oh yeah this there's a gradient on the bottom and it's flat white up top for the background and that's really throwing me off again so you've got like silver gradient app red intense app white minimal app and then kind of unclear like UX connection between those elements so they're good individual pieces but they're not they're not put together completely sure awesome thanks guys so much for sharing those I love love seeing what you guys come up with okay so let's take a few minutes and just kind of do a recap of what we worked on today and maybe what your plans are for tomorrow tomorrow stream yes so we'll go to the GoPro here and just kind of recap some of these drawings of you like that so we said that we wanted to do a social video maker and we talked about how we need to be able to balance having some image area with controls area we went through a whole bunch of different ways to do that and I can promise you especially the two of us together we could have taken this entire session yeah to come up with different ways to do these so quick reminder just on how important it is to go through you know these initial steps this is as much designing an app as is getting to the final you know visual design step for sure talked about using markers saw some different designs and then over in XD we ended up with a messy document but we started with doing just the wireframe versions of that mm-hmm and kind of talking about what are some of the strengths of these you know like putting controls over the image making the controls area to be or like bigger and smaller image talk a little bit using colors and wire framing had our battle between option a and off B for option B came up with some other areas of the app like camera the community's work project list and then we kind of covered I'm pretty pleased with where we ended up here on understanding this kind of three levels of wireframe fidelity that still call this one a wireframe sure but it's a minimal style that works then low fidelity but not quite super a little bit more than high fidelity yeah agree that didn't make any sense well it's like it's like a super minimal Scandinavian app that happens to basically be a wireframe yeah but notice we haven't like curved our corners or we have it like added other colors it's basically still black and white besides like real quick if I were to do this and let's do that to you like hey that feels like a wireframe yeah so you know the images the images kind of bringing it mm-hmm together and we ended up today in a pretty quick amount of work where we could go and get some feedback and questions that we'd want to ask would be like hey I saw this new app can you tell me what you think it does yeah all right well I think we got a lot accomplished today that's good what we pick up with tomorrow so that's about it for our stream thank you guys so much for watching we will be back here again at our regularly scheduled time tomorrow again for two hours and thank you so much for joining Brent oh yeah this is fine bye guys hey thanks for watching see you later

One Reply to “Designing a Video Sharing App with Brent Davidson – 1 of 2”

Leave a Reply

Your email address will not be published. Required fields are marked *