Designing a Social Media App with Sally Tugendman – 2 of 2



hello everybody welcome back to Adobe live I'm your host today Daniele Morimoto and I'm a senior experience designer here at Adobe and we are joined for day two with Sally – ghemon yes you got it yeah so let us know where you guys are all tuning in from we are live in San Francisco right now at the Adobe office and how are you feeling for good and excited – see ya so we'll be recapping what Sally worked on yesterday so don't worry if you missed out on that but welcome back if you are rejoining us to see the progress that sally has for today's designs she'll be designing live in Adobe XD and working on the app that she started that was in lo-fi and sort of bringing it forward so Cindy Anna Richard everybody hello welcome back to the stream we have some people joining from czech republic reno i saw earlier on the chat normani yeah so today we have a great schedule where the last stream for today right now but we had at 9 a.m. the Photoshop daily creative challenge and then the graphic design live stream was on after that and Sam just introduced the XD daily creative challenge so today during our stream we're going to be reviewing your submissions to the daily creative challenge so make sure that you are checking out what that has in store and we can go into more detail also of how you can submit to that but we'll just be looking through discord which is how you can submit and we can provide feedback for you guys so it's a great way to kind of just get into a little bit of quick design challenge and get some feedback from Sally and myself later in the stream and 30 minutes in we have a chatting win so you have a chance to win a hundred free sticker meal stickers and I'm actually gonna point in the correct direction today automatically yes so that will be happening 30 minutes and so make sure that you're engaging on the Behance chat with us today well so without further ado I'm going to hand it off to Sally what we did yesterday so yeah so let's kind of just quickly recap these are the wireframes that I did yesterday I'm gonna kind of just explain also if for anyone that didn't watch yesterday what we're doing basically this is like similar to Instagram so it's a social media like photo sharing platform but more specifically for people in the beauty and makeup space we're making it easier to tag the products used in the photos and also the ability to add affiliate codes affiliate codes are basically when a brand partners with a makeup artist with a very large following and they give them a code where their fans can use that code for some money off at checkout and then the makeup artists also get some money and those codes are used so that's kind of a brief overview of kind of what we did yesterday and so kind of just show you what we did so this is the main feed this is the profile view I made the photos a little bit larger for more detail and the notification screen pretty self-explanatory this is the affiliate codes page where you would go right here where those that link is and this is what it would look like to post a picture with adding your affiliate codes and the products used and then this is the detail photo page and then I also realized I didn't do like a login page yesterday so I kind of just gonna say a little something new yeah yeah so that's super super simple I realized that I didn't do that yesterday so well yeah and I see on the shame we had like Benji Keyes design which is saying like new design new UX UI designer and so yeah whether you're like newer InDesign or like more of the you know experienced designer will be going through like some tips and tricks and things like that I also see my friend Chelsea Turner who's tuning in from Boston's a little shout-out to Chelsea um yeah but yeah yesterday started all the way from sketches so that was like sort of the process was starting from sketching out what she might want to design and then coming in and making these screens and like low fidelity yep exactly all right so I kind of I don't really have a set color palette or any typography set so I kind of wanted to get some feedback from chat on that today I had some ideas this isn't gonna be super color heavy because it is you know social up and if you notice on Instagram they don't use a whole lot of colors there's pops of colors here and there so I do want to use you know color here and there but it won't be super heavy because obviously there's photos and those are gonna be filled with color so yeah I feel like generally with like photo apps we find like what photo editing apps or just absolutely rounds like centering around photography usually the UI will be super like really clean like not as much color like very monotone just to let the cuff like the images speak because I'll be like white or like a gray or a block or something like that yeah yeah so it's gonna be a lot of black obviously the font or the yeah the font is gonna be black the icons are gonna be black stuff like that but I do have a few ideas mm-hmm for colors like for this login screen and obviously we want to use a color maybe a gradient I like gradients I know some people don't but I think they're cool yeah yeah exactly and then yeah so also for the profile page this kind of hero image I'm thinking the idea would be like you can upload any photo you want there but maybe like a nice gradient up there with the photo with your with a user photo there well something like that yeah so I have a few color ideas maybe I'll just kind of input them in the login screen to kind of just see how they look but if anyone has any cool gradient colors or ideas awesome yeah let us know in the chat if you have a preference between some of the color choices and then sally has up in the top our like how you guys go about finding colors or choosing those and we can talk a little bit more about colors in general yeah feel free to vote off of sort of the top one yeah that's going on um I know for me color can take me a really long time to figure out sometimes cuz you're just want to get it perfect and a lot of times yeah I'd kind of sit there and I'm like sitting there for a really long time trying to figure it out so okay let's try this purple one first which is kind of similar to the color that I had for my beauty book app which was an app that I had kind of a sister up to the one I'm doing today which was more of like a beauty review app so you could review makeup and skincare and that kind of used a heavy purple-ish gradient purple blue gradient yeah if you I don't know like on my screen I have a Sally's website and I mean I aren't there's like the beauty book yeah you kind of get a feel for that look and style which is sort of the inspiration or something you talked about the inspiration for getting into this design so yeah case study see the gradient see gradients guide yeah kind of a fan I just love color yeah so this is a good look and feel to get a sense of and I've gone through this before so it of like the problem and the solution you talked yesterday about your process of like doing user research and gathering data and having personas and things like that so feel free to check out Sally's website we won't go too much into detail but just like to give you a sense of the context of the beauty book app she's been describing yeah exactly thank you for that yes okay so so yeah obviously you can see this one's kind of similar it's lighter on the second color it's not as bright I'm I'm not sure if I want to keep it with the same kind of color scheme since it is kind of a sister app or if I want to change it up so it's oh yeah Tim saying if you assign like a number or letter didn't like any of those then we can like take a poll that's a very good idea let's do that Julia sighs love gradients awesome okay so let's make this now see I'm not even sure if I fully like these 100% let me change this color sorry this one is not a gradient it's no way which one is not I think yeah this one that's how so yeah the top button is yeah so we could do maybe one non gradient so one two three pretty subtle I don't want it to be too crazy of a gradient neither purple and pink I agree I wasn't sure if pink was it it was a good choice I kind of thought about that – let's see what purple and pink looks like I also didn't want to make it too feminine either because it is a beauty up but also there are you know I don't want to just close it off for one gender but maybe we can get kind of when we serve purple you pink nice that's nice yeah thanks fatima for the job Estefan asks for a beauty app would you go for a gender-neutral color or something more targeted towards your audience hey Stefan that's my boyfriend actually yeah yeah so that's a good question um I think it's best to tart yeah I mean it you don't want to close it off for a full gender but also being that it is kind of a colorful beauty like makeup app I think these kind of colors work for that I'm not sure if it's super it could be super gendered or not but I wouldn't want to use like all bright Pink's or anything like that yeah and I think it's a good point to make just when you use it like picking colors there are certain associations like whether you're designing a beauty app or something else like sometimes people have certain associations with whether it's like gender or something else colors do you have a lot of meaning so being very mindful of like what your audience is and what you're designing for and what people might associate those colors with when you're disaster yeah yeah totally okay yes a fifth color so one two three four five ten is like are you sorry about it so let's just I actually kind of like this one so let's see I think you mean any poll trying again Thanks soon oh I think also when it comes to color and just like some tips on color so I have up Adobe color which is also a great place to come if you're just exploring and trying to figure out like you don't have a base and you're just trying to play with color you can go through and sort of choose like oh I want triad or shades and you can start to find complementary colors or just like start to explore with you know a color palette so this is a good place to come you can also explore just kind of like what other people are using in their artwork and pulling colors from that because Adobe color also has an app so you can use it and when you're out in like the real world you can like capture color and in real time so if you like see a beautiful sunset you know you can hold it up and like it'll look like like you know five colors from like the scene that you have and then it'll save to your library and you can just use it across the Creative Cloud so that's also like a fun little color tip yeah yeah that's awesome okay so maybe I'll just make a few of these with the different color choices or the pole so Tim says looks like the fifth gradient is in the lead okay I kind of like this one yeah cool and then I kind of like works with the beauty book out too because that kind of pulls in the the same kind of colors although this one kind of does too but okay let's go and yeah so Adobe color is the website but it's the one that you download is called Adobe capture the Adobe capture app and then it has the color aspect in it it also has like you can live capture typography and like much like what kind of like what fun it is and you can also capture images and then like it'll live create vector objects for you so you can use them in Illustrator and just bring them in so a lot of fun like capture elements awesome okay so let's go with this one again it's not going to be used a ton what I'm thinking of doing you know kind of similar to what Instagram does is like adding a circle or you know that color around the circle like that cool so now that we've gotten that I'm gonna start on typography I have one in mind that I sometimes use because it's works well for these kind of things if anyone has any similar kind of looking typeface to this work sans is really nice I think it's not too bulky it's not too you know serif II but if anyone has any suggestions or similar ones you know do you have a place that you typically go to fine fine um yeah I actually really like Google Fonts oh my yeah that that's a pretty cool place to go they have a ton and it's pretty easy to search search for them it's too much and that should probably be he just one color not the gradient since it's too small button yeah we have our tratan win countdown going on so in less than 10 minutes we'll have that section and answer a johnson's question about what it is it's your chance to win a hundred free sticker mule stickers so you just have to be active in the chat especially during the time of chat and win portion and you could potentially win yeah it's very easy yes hundred free stickers is awesome yeah so I'm gonna download some icons for these in a second this is a I showed this yesterday it's kind of my favorite icon place oh yeah you went through a lot of my own stuff we always try and find similar icons which can be kind of difficult you know what the yep definitely yeah if you're not making your own and you're going out and you're trying to find a couple icons to use you like find one you really like but then finding something that don't look and I think finding ones that just like the thickness or the styling Zac you know so it's like when you're looking at all of them together it doesn't like one isn't just like catching your eye more than the others or they don't look like really wonky um can take some time yeah so hopefully doesn't take too much time today that seems like a similar thickness Johnson got so excited when I said their name on the truck so I had to say it again yeah let us know if you guys have any questions around like anything that Sally is working on career questions does not general design system questions we're here to chat with you guys while we're on the show do you ever use the assets panel for like collecting colors and using those across and I find especially useful when using my gradients yes and you don't like having to match the exact same gradient you just have it already in the assets panel like I'm just green realized that I didn't do that yeah so it's really simple if you just add it to your assets panel then you can use it across and like when you select another object you can just select it from that color panel and you'll have it really quickly and then you can also make really large changes so if you change that color it'll change across the entire part board which is really awesome actually I can show that off really quickly on my screen just you get a sign so in here I have like my assets and I added colors you can also add like typography so like as she's working on finding all of her fonts then like if you decide and you go through your entire design and then you realize oh shoot I want to change like all my header styles you don't have to go individually into each one so basically to add it you just like select you know your object and then you hit the plus button and it'll add into this assets panel but the really cool thing is basically if I decide I want to change you know this color that I've been using if you right click and then select edit you'll see that oh here we go I'm gonna move it to a maybe is it this I'm gonna pick the right one first and foremost as I changed my colors apparently I don't have this one across my entire art board let's see which one this is there we go all right so how's that then as soon as I change that color it changes everywhere that I have it so I don't have to go into each one individually if I decide that I want to change it to a different color so that's a really like easy and nice hack of having all those and then also like components like if you have buttons that you're using consistently like I would maybe make that a component and then that way if I make any changes it'll change across my entire artboard very cool yeah nice you're gonna go in and a little icon next to hmm-hmm let's take give it a little bit more something there so Johnson does have a question around I'm a professional graphic designer how do I become a UI UX designer Germany thoughts on like switching sort of within the design fields but kind of going into a different area yeah I think that's that's really interesting I think it'll probably be I don't know easier word but yesterday when I kind of introduced my background and stuff I was talking about how I started off in sales which is very different I did have like a background in photography so I knew that you know art was really interesting for me but it was definitely a totally different things so coming from graphic design where you probably already have you know a good sense of design in general I think you'll probably be on a on a pretty good you know foot there but just learning the process is I think UI or in UX processes doing a lot of user research and really understanding that I did a bootcamp I know there's a lot of people that do boot camps that come from graphic design backgrounds so I highly recommend doing something like that if you really want to actually do that as a job that way you can learn all of those you know all those processes that differ from graphic design yeah I actually studied graphic design but I didn't examine an experienced designer now yeah I feel like yeah like looking into different inspiration places that people are creating those like excuse our experiences and then what their process is like Sally said and I would also say just kind of trying to do it like we talked about trying to work on passion projects or side projects if you have it's like hard to find the time but trying to make that time to practice and to like go through the flows yourself is really useful and especially for if you're trying to get a job in that field then if you are making stuff that you can show sort of like how you started to think about creating those larger experiences and thinking through like who your user is and maybe some research and again like what the process would be then it might be a bit easier to have those conversations with someone that would want to hire you yeah sure what just happened there alright so this would also be a good place to actually have the name of so that's the other thing the name of this app what I was thinking since my last my last app was called Beauty book I was thinking Beauty look but oh if anyone has any better names in that in chat okay yeah so no new thing in chat yes vote for we have Beauty look yes what should we name the app Beauty look option one and then any other suggestions open suggestions let us know in the top beauty look yeah okay stand off Beauty bucket yeah yeah and that's like you're posting looks right looks oh yes a good note in the chat would be they're saying changing the kyun icon with the past to the password one and the oh my gosh I just walk there duh thank you guys good looks yeah perfect timing we are now going to head into the portion of cotton wind so make sure you're heading over into the B hands chat and being active letting us know what you think we should name the app and this is chat and win we're back and it'll make sure you're being active in the chat oh okay we have get glamorous as a potential name for the app any other suggestions coming on in would be great to hear if you guys have ideas or just again like let us know where you guys are tuning in from like we want to know you guys are all over I saw someone was coming in from India as well so I know there's a big time difference from San Francisco to yeah I don't know what your yes Beauty Castle oh that's global book mmm what softie okay a lot of names coming in these are good suggestions glam on better than mine there's not a lot of suggestions a lot of potential options here yeah name for the app that Sally is designing yes right now and congratulations to our chattin win winner Britney Chopin is our winner today so you have just won a hundred free sticker meal stickers which is very exciting and someone will be messaging you directly on Behance to let you know how you can actually get your prize for today and for the rest of you don't be too sad if you did not win because you can still get 10 stickers for $1 using this code every time I like how I hide out down to the earlier today good yes coming back around no you can still get some awesome stickers and this is a great deal and then also there will be more streams later on in the week and I'm sure there will be more chances to win stickers to win different prizes so tune into Adobe Live later on in the week and win more thing yes and congratulations Brittany yeah awesome Kratz it's awesome okay so let's see here and then the title or the yeah the name will go here nigga nom yeah so did we have again we had a couple good ones there was lookbook mm-hmm sudden name of something or do you just sounds so perfect glam on was one softy yeah Wow we had people Marissa from Austin Julia from Sweden Oh awesome Africa we had people from all over the world thanks for tuning in for those of you who may be just joining Sally is designing live in Adobe XD and working through a passion project of creating a beauty app that sort of like a social app to post products and sell them or purchase them so that is going on in today's day two so she's working through like the higher-fidelity going through color and fonts and making it beautiful yes ooh sparkle Sparkle that's good okay yeah um kind of like glam on anyone else any other ones that they had posted earlier I'm forgetting what some of them were but let me make sure the blush that's good Britney's on a roll one no stickers popping okay yeah plush kind of nice I choose like overwhelmed yeah it is so it is one of those things to like when you're looking for a name of an opera or something like that there's so many things to consider nowadays of like domain name right like just sort of like does it already exist someone you have it can you like buy you know someone already have just like the website for it you know or something like that and if it's like a good fit for mm-hmm your app would be so hard to decide I feel like it's like getting a tattoo I could never get it well hey I have a really big fear of needles I would never know but I feel like it's one of those things that's just so permanent is a permanent in order to decide totally once again absolutely should this be I feel like there's a lot of white space here I'm not sure I'm going back to that okay um you have just a couple year to sign between and you want people to vote on or yeah so I really like blush Britney good job glam on was another one what a so maybe between blush glam on and what was your original one Beauty look Beauty look maybe vote between those three let us know in the chat between those three options blush glam glam on and be look which one you think would be a good fit for Sally's app and then we will pick the one that is most highly rated and named that video yeah okay so in the meantime let's just start on another one so we can keep going seeing it's crazy like we talked about low fidelity versus high fidelity a little bit yesterday but it's crazy like it's hard when you're in love fidelity sometimes you feel like oh like these like don't look very good but it's really just by getting all of your ideas and like all the content that you're gonna want on the page and you'll consist like start changing those like as Sally was going through the visual design like those already started to change drastically I mean you'll continue to like make a lot of changes but and again like deciding one to show things to clients like that's why I usually tend to find that it's so hard to show them something that's low fidelity because they have a hard time sort of imagining still what it'll be and they're sort of that gap but like higher fidelity is just like a bit cleaner easier for them to get on great so people are voting starting to vote we have a couple votes for blush so far one for glam on blush blush claim on well so keep those coming and then well we'll see what you guys think is the that's a tough one okay so this is the feed I'm thinking that it seems like a lot of people are voting for blush right now okay just do the blush might be the way to go cool blush it is thank you thanks everyone for voting okay so I'm not gonna make a full logo because I am NOT an illustrator or good at logos sorry so we will try and pick a font maybe that looks better than this okay now this is the hard part mm-hmm any what it what do you think should it be kind of I kind of want it thin like this or it could because if you do like a cursive II font I feel like those can be kind of too much sometimes do you have any good script I feel like dad trying to pick just like a few fonts that go well together like across your app like you don't want to have like a ton like you know like ten different fonts that you're using yeah across the board like suck because you all we also have all of your weights like you can use like within one font you have like options to have it be like thin a regular medium or bold or you know condensed bold or like you have all those options and then you can also play with whether it's like your topic or whatever right so there's a lot of different options within one font yes Chelsea good catch as well there's also all cats thank you that's it yeah so depending on like the look and feel that you want like if you want something that's a bit softer you can maybe do lower case if you want something that's you know like a lot of like active like sports things kind of have like those more like sharper edges or something like that's they might choose all caps or some things right so font set adobe.com slash collections yeah so fonts love different like packs also that you can might quickly download if you're looking for inspiration on what type of fonts to use so Adobe fonts is also a great place yeah and it's all like you just have to like click sync and it will automatically sync to all of your applications in the Creative Cloud yeah Britney on fire yes seriously we're gonna have to do another poll and see if you can like at three for three like yeah okay so what are we thinking I did kind of like it lowercase them for this one yeah see what it looks like and I will say today we set up Sally with a mouse from the start yesterday on the stream I wouldn't have a mouse struggling so thank you I kind of like the thinness of that I think that kind of works well for what we're doing yeah I think lower case yeah I think lower case probably works a little better and it goes to show like there's so many iterations that you can do yeah and you can always come back and like adjust things later or like you know so you can spend so much time just designing new one really can yeah I usually have like a couple artboards sent and sometimes I have to like walk away sometimes yes I can't live on the streets of it like a couple of the options up and I just really can't decide so I'll move on to something else I think can't look at them and then I come back to like the view of all them like okay quick I'm just like oh do I like this one definitely isn't working absolutely so this is another thing that I could probably spend a lot of time on but I don't have forever so people in the childlike and is saying oh like I love the name blush now I kind of feel like the gradient needs to be in the blush color baby Alvin like the first font maybe it was a like softer more posh and I said it could be more unique with the purple I think you know you have a little bit of that pink coming in which is fine yeah it's just one screen so you never know what that another elements will be yeah these are good suggestions keep them coming in the in the chat I think since I know I could probably spend 80 years on that I'm gonna just leave it for now and then always like you said you can always come back and be like oh wait this looks better doing we don't have 80 years yeah so okay good to know that would be insane all right so let's start on the feed I have this cool plugin I think I showed people yesterday oh I love it cool yeah adobe has like Adobe XD has some great plugins this is what is the name of this one specifically this is literally just called user profile user profile yep so it'll just plug in random profile pictures so you can get like that really quickly instead of having to like yep look for them all yourself individually and drop them in so as Sally goes through the rest of that I do want to make a note for about 45 minutes out from the daily creative challenge just give you guys a little bit more info on that so I have up the page behance net slash challenge slash XD and this is the daily creative challenge that we have going on today so if you come down here you can see that for July 30th we have design for mirth multiple screens so design the details page for a car purchasing experience on both mobile and web consider how the call to action differs between services so Sam Anderson was on before this giving a little bit of instructions but again you can just quickly click get started there's instructions all in here I do have the actual file so when you download it it looks like this it'll give you some resources some inspiration and you can quickly get started so download this and if you are able to get it done in time then upload it to discord and in under 45 minutes Sally myself will be going through the discord channel and we can provide feedback and take a look and showcase the work that you guys have been doing for today's challenge yeah so make sure that you're getting involved with the XD challenge for today now can you describe the sections yesterday but those are the stories portion yeah sorry that's it does it like the stories portion exactly Thanks that's all but you're using the gradient right I like that yeah it was just a one-time thing see out what I feel like there should be a little white space around is that too thick this one so you're trying to decide and you're thinking through having the color attention directly on the photo versus having to space yeah but I've been nice to have a little bit of white space between us because depending on depending on what the photo is yeah you it might blend a little bit like with that first one there yeah probably looks a little better maybe I can make it thicker but it can come back to that too one around these now I would do and I mean like the guy loves the seeing like the color and them in for the stories mm-hmm oops yeah yeah these photos are a little bit darker the ones that they put in our a little bit dark so that's okay and so in the chat there was some conversation going on around the differences between UX designers and UI designers and sort of what that means and you have any thoughts on that yeah I think they obviously go hand in hand a lot of times right that's why UI UX designers UI is more obviously user interface space so more of what I'm doing right now more designing the interface and then the UX is probably more of you know designing the experience as a whole I am I'm technically a product designer so I mainly focus on UI components inside that yeah yes a little bit more of like the visual elements and the design systems maybe in pieces like that those principles and then for the experience a lot of kind of like what that flow is going to be and the user journey if they go through the entire experience yeah great question yeah and today so like right now we're in Adobe XD and we're in the design mode so you can see at the very top of the application it says design and it has a little mark underneath that and right next to it is prototype so later in the stream hopefully get to prototyping it up so that is you know hooking up you know when I actually click the sign up button then it takes me to the next screen and then within that screen you know with the user clicks here then this happens so actually thinking through how all of these individual pages actually connect to make that full experience I mean it's really easy and like fun it's nice like see it come alive so quickly when like prototyping so and there's a lot of interactions you can play with it so it'll be fun to get to that portion too yeah so so now I'm gonna use I downloaded a few Adobe stock images beforehand um and I thought this was really cool and you download them to your library you just go here to open CC libraries and they're all in there let's use I saw as a watermark on it but that's okay yeah so we talked about this earlier like you just go to Adobe stock and you can search for different images videos templates and then Holly found some that she liked and there's a couple different options like you can download it directly to your desktop or you can save it to your CCC library which is what Sally did and then like you just she didn't have to purchase these because they stole the watermark on them and what's really nice about it is that you can drop them in your design and actually see if they work or not because sometimes like you would be horrible to have to purchase a photo you start using it and then when you actually make your design you're like oh this actually isn't working opposition of the colors or whatever so you actually are able to use it and then once you have it in your design you can also just simply in Creative Cloud libraries if you right clicking on the photo brings up an option to license and you can it'll just erase the watermark like immediately you know stay in your design so you don't have to do anything else so I'm feeling this is a little this is too big Kimber icon yeah that looks often yeah yeah it's pretty big I think now that you had like the font in that you use so we talked about this a little bit yesterday also but I saw he's going through and like feel like playing with the sizing of the fonts and kind of like how bold it is or thin trying to decide if it actually feels like it's the right size or not we talked about actually looking at it directly on the device the sort of a tip yesterday so there is the Adobe XE app that you can download as well and there's an Android and iPhone version and then on the iPhone version there's like live updates so if you update the design if it's plugged in you can see it in real time update on your phone as well um but it's a good way to actually like feel like does this feel too small on the actual device because when you're designing on this screen like you're zooming in and out it's hard to really tell what's gonna feel right but it's a good way to just sort of double-check oh yeah like this is way too small make it not it's already starting to like come so much more life when you start adding in all the photos and yeah the colors and everything yeah that's looking better okay I think I'm just gonna keep going and then I always come back and like just fix stuff because I want to take too much time on just each and every page what's next let's do for a voltage yeah I'm just gonna go in order so doesn't work on the mouse so Sally just made that component really Ali so now you can see there's like a little mark in the top left corner sometimes that you'll see that like will notify you that it isn't our component so it is system adjuster component right now master yep and it's awesome that you can just edit each one individually without going through a lot of processes this would probably be the username but I don't feel like coming up with okay cool so I'm sure we could come up with the username really good yeah yeah anyone's username sure it's an easy thing to come up with Brittany come on what's our username gonna be this is our third not putting you on the spot on the tab I mean oh wait I mean you just put your your last name I can never pronounce it correctly chicken mint to Goodman yeah dude am in except I have to kind of like give it a little something cuz otherwise I'd lose it yeah I'll just use my name when we do that I'll just use my name like I always Sally [Laughter] that's kind of weird I could hear maybe you can show what it's what it looks like to add yeah how you brought those into the mill yeah great so this is obviously Toby stock and let's think of a good this could be a good here I'm image what type of image are you looking for so I'm looking for this top image here Oh for the banner yeah there beyond our image sorry I mean even the makeup tools ones are kind of cool oh that's a good yeah totally and so you just library yeah so you can either save to library which is good solid a which goes directly into your CC libraries across all your apps you can download a preview which will just download it you can download directly to your desktop or open and you give you some options like which application you want to open it in and that's not like purchasing it yeah it's just kind of so with the watermarks you can test it out Brittany for the win Sally beauty supply job pretty and even when you drop us and you can still like double-click in and like adjust exactly where you want it where it's being cropped or not yeah that's awesome that's really awesome alright so rajesh the chat Wow 20k followers already and only following 500 people very exclusive yes very Sally knows a lot of people like me yeah yep they don't even have Calista does her name Sally there we go last name there's my last name to say that there's I don't think it's like fully distributed evenly and maybe do that like you don't even still look slightly awesome yeah I think you know I use the distribution tools – oh there you go I knew that's yeah it's cuz my name is it looks a little bit awkward with the last name being so long yeah that's that's a fill so it is nice I feel so the eyedropper which you've been using consistently it's like something that we've had and like a lot of other Adobe applications but it took a little bit for like the xqt it's kind of relatively new in Adobe XD but that's because like the team thinks through literally every single feature that's added like they read even though it's kind of like iconic and all the other apps or something they rethink like is it the right way being is it being done the correct way or like you know how can we rethink this tool for like this application and a reminder like yesterday I showed off Adobe user voice calm but again like this is a great place to go to see the types of features that are being worked on and also to vote for the ones that you want to see within Adobe XD the application the team takes a look at this and you can up vote on the ones that you really want to have in the application and you can see whether they've started the feature or if it's under review and just start to make sure that this application is meeting like the needs that you want a really trying to hear from you guys of like what you want this app to become and the features that you need when you're designing so a great place to check out Adobe user voice calm well yeah and Tim just sent it over in the chat so you can take a look too so see so Julia asked which programs are about to do transition animations between different screens created in Adobe XD when we get to like the prototyping portion of this I'm in just a little bit then I think you can see that there's actually animations and transitions in prototyping mode so as you select oh I want this button to go to this page you can select different types of transitions if you want it to like slide in from the left or sliding from the right like very simple transitions to more finessed ones as well so there's a little bit more power to it as well if you want to get fancy with it so stay tuned and we'll get into the prototyping mode soon – yeah and yeah jib proto pie is also an animation tool if you want to get really into like micro interactions so since it's on this page you want to highlight that that's the page that it's on kind of want to get rid of this box when it comes to sharing your prototype after have you ever played much with the like sharing feature in Adobe XD I honestly I I don't do a lot of prototyping in general I primarily am designing a lot of you know static like components and stuff for for a dashboard so I actually really haven't used it much so I mean yeah yeah I find because a lot of times I felt people would like to share their files generally yeah and like how your team works and stuff I usually put them in Zebulon or something like that for the engineers to take a look at yeah well I do want to show off that since you like the tight sort of talking a little bit about prototyping and animations right now so I have a file open just to go back to this one it's not very interesting file but in prototyping mode I have a couple of these screens hooked up already so you can see these transitions here and all I did was selected it and then drag this handle over so that basically just shows that when I click on this artboard it goes to the next one you can also get as specific as you know double clicking into a specific element so an object and then having saying oh when you click here specifically it'll go to this screen but I really want to show off the share feature so there's a couple different options when you share XT files so you can share for review which will just you can you know add a password and all of that and create a link and this will allow you to share a link with you know your co-workers with friends whoever it is that you want to share it with and when you take a look at this link this is what they'll get so you can share this web link they can add comments and like pin it specifically to like places to give you feedback on the designs and then it's also hooked up here so you can click through and it'll give you like hints like they're clicking in the wrong section that this is like the next clickable area and they can actually walk through your prototype so this is really good features No and then the other cool share feature is instead of clicking share for review their share for development so you started to talk about like sharing files with engineering and this one is basically like to share it helping to share like specs and things like that so like I sometimes have had to redline I don't know if any of you guys on the chat have had to redline any of your designs before and they can be a pain but sharing for review has this specs mode so you can toggle between these two so this spikes mode basically I didn't do anything except for share for review and it has now pulled out all of the colors that are in my file with like the hex code like radiant amount all of that all of my character styles that I've used it's pulled out and then it also notes all of the interactions so all of the prototyping transitions and everything that I use so this is great for like handing it off to someone who wants all those details for like a little bit of that transition with engineering and again they can like click through this entire thing and sort of see and then also like hovering on the actual artboard it red lines the whole thing for you so you can like in real time kind of see where all of these spacing is like in your designs so you know some engineers still want like your actual hard files and like like to go in but this is also like a great easy way to share yeah so I just went and added a few more pictures perfect obviously this is not all the same person but that's maybe Sally's one of those like Instagram people that's just like a general you know party yeah yeah you like to make up look they take photos of other they do makeup and they take photos their client ease other people exactly um cool so like are we talking about you in third person oh I know it is kind of weird all right so that's the general idea I think for now and this is what I usually do right I usually try and get most of the elements on the page and then be able to just nitpick things later we have a lot of pages or screens and my on my wireframes I just want to make sure that I get the absolute like most important done so I think notifications like you know what that kind of looks like so maybe we'll just do the code snow yeah the codes aspect of your seems like a kind of a part of the idea he's up there what are you thinking through as you're moving needs um so I just wanted to have like a list I just kind of look it make it look a little bit nicer facing me those Arabs do not look good come on just a quick reminder that in about 15 minutes we're gonna be checking out your Adobe XD daily creative challenge submissions so if you have any work that you're doing on those just be wary of the time and make sure that you're sending them through on disk or journal and Sally and I will be taking a look at those in a little bit yes excited to see those yeah we're super excited to see what you guys been working on and today's challenge is the designing for a car oh yeah one that Sam was showing off yeah purchasing a car that's right hmm okay guys gonna do someone these girls are not nice so maybe I will job meet honcho sorry if I butchered your name Kim belly thank you for joining us on the chat and Sally and this is day 2 she has been designing live in Adobe XD and is working on a passion project in the beauty space and we're getting through sort of going through the typography and like color choices right now how close you're getting to this I really looked up and I was like where are you going I got to look at you in real life always fun watching people basically I have the issue where so I told you how I don't I have like a full monitor that I have at my desk and I could plug into that but I never really do but when I do I don't take full advantage but then I think I'll have I'll just use my larger monitor to like put my like Finder windows or like a couple like elements I just grabbed from so it looks weird cuz i all i will use this keyboard like on my laptop but be looking at the fingers yeah and people have come up to me and been like what are you like this you look kind of like my god man I realize I had forgotten to redo the bottom laughing yeah Sal he's probably gonna get started like on the bottom nav let us know in the chat if you have any ideas around how to make that bottom nav specific – like which sections you're in so like if we should like if you're on the feed like if any of those like for profile like how to make it so that it's clear like that she's on the profile section like whether it's adding more color or making the icon you know bolder bolder or something like that if you have suggestions let us know definitely Jennifer hi thanks for joining us on the track um another like things with just like you've been using a lot of rounded corners I don't know if you guys have thoughts on like those fully like round like pill shaped buttons versus like harder like sharp corners or anything like that it is really not like using the rounded corners like you can either like on an actual rectangle like real time like adjust the corners for everything or in the right-hand panel yes it has like those little marks there or on the right-hand panel there's the section where you can adjust like all the corners or if you hit the one on the right side next to it it breaks it out into every single corner so you can actually just have like maybe at the top to be round and the bottoms be like sharp edges which are nice sometimes for like card style designs and things like that so a lot of little tip features on that so brittany suggested maybe for it like we've been talking about the bottom knob suggestions maybe icon turns purple when it's on that specific we can see if that's i'm i think i'm just wondering like if it'll be like bold enough like clear enough cuz it's you might still be a little subtle but i think that is a good way color is definitely a good way to differentiate yeah that's a good idea that's gonna change everything huh there's so many different ways to like show off selection I feel like some people use like a little hair line sometimes it's above a section or they might have like the entire background of that one icon like the little square section become like a darker kind of like more selected color or something like that or you can just do like the icon like Sally Stein and I'm just like just making the icon of a different color mm-hmm yeah Mac said maybe a small underline under the icon so maybe like a combination of some of the things to you might be helpful yeah Natalie I think I think that's bold enough because you don't want to draw too much attention to that small icon but yeah is this I see work have a brand guideline or like four buttons or things like that is there like a standard uh filing so we are kind of it was actually kind of my job to start creating like a style guide um which I did when I kind of first started I was actually the first product designer and brought on to the team yeah full-time product designer so we didn't really have anything like that but we and we also have it's kind of different because we have a lot of different we have like a core product and then we have like a totally new vertical product so a lot of things are different but for a core product yeah we have like a general kind of components and style guide type thing sighs sometimes I feel it's fun also like it makes it really easy when your company or the place here working has like a style guide because you can quickly just kind of input all of those pieces but it's also fun sometimes to do like passion projects like this where you don't have like any guy like like you can kind of go a little crazy and like play with some more funky styling or something too and get creative with it because you don't have like those restrictions or that's even like client work you know you're getting feedback from them so working on like a project for yourself just like for your portfolio or for fun gives you like a bit more freedom you don't like anyone telling you what to do so I'm gonna make this of like a fill yeah it looks better nice I could probably spend some time fixing them or just downloaded I was there any other probably like five minutes then we'll do the feedback stuff and I want to make sure to you can get a chance to kind of show off some of the like click through just like how to type clearly thing too sure what do you think I'll just keep them for now maybe just that bottom on the bottom ones like I'm like a slight I think not quite so annoying like maybe just that one I'm not connecting but oh Jesus Jesus my heart yeah me too no but I was that was everyone do anything yeah he was like just off slightly yes slightly enough for I was like it's nice to be changed yeah good yeah it looks looks pretty good let's do you know you don't have too much time yes we're under the five-minute mark we're gonna be transitioning soon to take a look at the daily creative challenge submissions that you guys have been working on and we'll be providing feedback so Solly's gonna go through and kind of finish up this design and then we'll also like I need to prototyping after yes yeah none of the heirs are straight they are not straight at all we know first think of time I yeah they're bothering me too don't worry so which room is this one so this is going to be the how you post a photo so it's going to show kind of how you would add your affiliate codes and then how you would tag the products used as well there's gonna be a little search option here that would have like he would start typing and be like predictive text download pictures that CH siege Catholic I'm sorry guys the arrows are super annoying I know it's all part of the process yeah well so we can you know we can definitely transition now because we're at the zero countdown about that one now it is easy opposite side directionality and very about it okay so we're gonna take a look and transition into the Adobe XD daily creative challenge so there were instructions on here we're gonna actually take a look at some of the submissions for the quiz design section so creating a flashcard app I'm having like progress bars or motivational messages different inspiration in that so for those of you who submitted to discord we're gonna take a look at a couple of these and then provide some feedback so GD p– i pronounced that correctly created this plan win big participate daily a new quiz and you can win daily new surprises all right so let's play this animation just like the first one i'm submit hmm you can see the progress I like seeing the progress bar at the top so you kind of can see when your completed yeah nice yeah this is great it's cool to see like kind of the full flow kind of having a beginning screen with like when you start to having all the way through to this end like you've complete like completed the entire thing here's your overall score and a way to go all the way back homes you kind of thought through like that full the full flow experience yeah yeah I think they only like and just like for like detail things I think that the only thing that's interesting is it's hard with having like this text here when you start to have like part of the bar here I saw like you tried to use lighter like font a lighter color on part of the word but then like some of the letters are so dark just which makes sense because you have like a really light part of it and really dark part of it I almost would prefer just to have all of it be one color like maybe moving that text somewhere else or like putting it below the progress bar so you don't have that issue at all of having to deal with the text no I like the colors to actually the background color is cool with the green the font is it a little big this submit is pretty big but yeah I think I think it looks really cool I liked a little micro action system – yeah I also like how you thought through like when someone's gets it correct right and someone gets it wrong yeah and the Green is like very commonly like the colors like like good go like you got this right and like the right that's a nice red – that goes well with the other colors so I think the colors look really good awesome thank you for submitting this one it's great to see we're gonna take another look we're gonna take a look Misha I already have this one up oh my child I think submitted the other day as well because we saw this same sort of sign up to on Behance which was nice having a little description of what it's gonna be this one's called lingo cards and then has a nice like mock-up on the actual phones which is really nice to see also and then the prototype video so let's take a look like this one I like all the buttons kind of transition oh my talking so fast I don't even know these cars I mean it it's really bold like really clean I feel like in the design mm-hmm oh for whoever's asking who's MacBook is going into space that's definitely mine mine is powering up right now I'm trying to keep it on the table but I react quiet yeah I think this looks really clean yeah yeah I like the bold colors I really like the beginning to where they had the list oh here yeah and that you could press more for more rather than just automatically having a super long list of yep items so that's cool yeah I think this looks really great I think just like for when we were watching it again like going through this later section here it went through it like really fast so just thinking about also like when you're I know like you know your app really well so you're like kind of clicking through to show it all but I wouldn't even slow down a little bit because then I can kind of get a set of a better feel for it like being someone who isn't as familiar with it but I think that it looks awesome yeah thank you for submitting to the daily challenge we're gonna take a look at one more and give some feedback so this is Claire bears submission great username yeah quiz quest first to the moon speaking of launching wins whoa oh my gosh I'm sold all right it's a race first to the moon wins there's single double pick a topic answer questions to get your flag on to the moon so club learn more about the universe there's earth questions between questions and then you know launch not sure where I should click next there's single so it selected single and then the next thing is I would do launch and again transitions how old is the universe in years ooh any uh what do you think ten billion here we go this is the game portion of today how old is the universe in years I mean ten billion the eighteen billion or see three billion five hundred thousand dollars I'm gonna go with the oldest but I I don't I honestly don't know be eighteen billion is that your final answer it's like really old all right all right question to how many planets are in the solar system eight nine or eleven I like how the hover kind of gives it away woohoo I love I think like just the detail of some of these like fun little animations yeah it looks very cool really like great to have and also like the detail this idea of having like the launch which is coming through again in kind of like instead of having just a little progress bar you kind of use this launching note illustration to come across which is fun what is the smallest planet in our solar system Venus mercury or Saturn I'm going to phone a friend him is it Venus mercury or Saturn smallest planet in our solar system do you know the answer that put you on the spot yeah I was gonna say music actually yeah and these middle like tips here are fun as well oh oh yeah okay I think you might have actually known that I don't know but the timing of timing already can't do question for ya I think it's really clean and having the illustration where you do and like the background is nice because keeping the cards just like really playing Wyatt like a lot of open like white space is clean as well although I think there is text here like underneath quiz quest that is just super tiny like I can't read I can't read that at all so that would just be kind of like my only thing it looks like at any time you can go back home because I think you put a lot of questions in here so we won't go through yeah the entire thing yes I only I would just probably say like because you do have some of these specs here just this quiz quest there's like a little bit of legibility issues because there's you can see like some dots kind of right behind not you there and like at the top of this II oh and there is yeah this little like first to the moon wanes tax is so small so I would probably either just like totally get rid of it cuz you do have it here as well and maybe just bump this quiz quest down or move get rid of like these two dots or move those but this is this is really fun to see as well yeah great submission really good Slayer bear coming in strong well so for those of you who weren't able to submit in time today or are interested in checking these out these are the daily creative challenges they unlock every day so you can participate and if you want feedback on them or be featured on the stream you can just submit them into discord and whoever is on the stream that day will take a look so thank you all for submitting today's it was really awesome know now we will head back over to sunscreen man game show portion was so fun so let's keep going with this I use the same in here and also an option to add more because obviously you might not just have one so yeah I feel like yeah it's always been going through each of these main screens that she has from yesterday with the low fidelity and then making them about higher fidelity with like choosing colors and fonts and kind of adjusting as we called I feel like this is like that loss like main screen never want to try and get through and then we can kind of like this thing up with a prototyping mode and see it come to life so be super fun all right so easier to look at Stinkum game shows any game shows that you watched that you may like any new ones no no do you I watch bad TV yeah i watch all the no I well the doc Shepard has that new like the big wheel like you spent it's like a wheel it's like 40 feet tall or I think it's very preposterous like there's no reason it should be that large oh my gosh I'm kinky Salieri's my other new favorite show not really a game show but kind of is holy moly I haven't snuff in curry any of the warrior oh yeah I mean yeah and it's like a mini golf no tournament thing or like competition I should say yeah it's really describing it because I cry a lot during game so there's the wait at it yeah I feel like I would want if I had a little more time I'd try and add something here to show how to add more codes um but that's the general idea I think yeah I can't wait help me a doobie life design game show we should make that a thing I agree I also will put my hand up right now to say I love to be a host of the game show I think that should rise though Oh No yeah hundred percent i Unruh smite and very quickly yeah how we have we cos in certain streams we also have the we do like a portfolio review so people can submit like their Behance portfolios and then people will give reviews and they head off into space so we put like helmets on it's like super fine I feel like game show is the clear next uh-huh section that we should have and we'll get a 40-foot wheel nosegay budget is not a question it's fine I'll make my own bring it in stephanie's your ways to do this but I mean it's coming along we're almost yeah we're pretty close yeah I just realized I don't need this much space I think that's the basics of it yeah I would definitely yeah I definitely would I probably will refine this but we can start parties I think on the hooking it up sweet yeah I think just the last one I think it's the the NAB's at the bottom is a little bit higher so you'll probably want to just copy paste the one next to it is thank you just because we just switched that last minute again so yeah so we can prototype this I'm gonna probably you know I kind of want to tweak this and like make it look a little bit more refined and also maybe finish the case study after the stream so if you guys want to check out how I finish it it'll be up might be Hansa so let's do some prototyping this one's pretty easy so when they click sign up you want it to head over fully into the feeds the feed usually I'd have a couple more pages on what it would look like when they enter their actual username and stuff that the font will change colors to be like a purple or something but this is just the original text there and then yeah four times it gets crazy because we only have so much time on this yeah but it is like like Sally said like there's this will get the concept across really well cuz you got like those main screens but then there's always like details that you can go in and add later if you want to show like every single action like there's a bunch of steps in between of like they type their email address and then you kind of show that transition or it was a username exactly but this like it's at least you have sort of those main screens Andrew what are the what's the automatic transitions that they have on those if you click on the they have some on the side or on the actual blue part they're on the arrow I think I can also see do they not have them on this sometimes I don't know if this mouse is like I'm just kidding man yeah I thought I guess they have interactions now it's contextually yeah like this is what yeah yeah so that is the way like like there's automatic ones in there so the transition right now would be that it would slide to the left and then the timing is ease out or its easing out and then the duration like you can adjust that to be slower or faster so what you know once we hook the whole thing up you know kind of feel out different things and you can start to play with those transitions as well there's obviously a few steps before this screen as well and I guess I didn't really get to yeah so I didn't really get to this portion which is not codes but this is like the regular view if you were to like select one of these pictures mm-hmm and then from here where the products are so it says ten products used you can still hook it up yeah finished design so I guess actually these are codes so it's just dazed here is that everything think so and try yes it has a little oh my god making it the first home screen so let me just quickly go see so yeah it kind of slides in and the profile this maybe it wasn't I mean disconnect it and then we can flip yeah you might just be on a since is an icon on the little yeah yeah cuz that's the full and that one husband you I just grab that handle and remove it the other one oops yeah and then grab this new one and it got a home oh yeah very strange maybe I'm not sometimes a trick to when I have van hit spaces is okay a rectangle right and then removed like order and fill and then that allows me to have like a let me talk zone like it sometimes I want like a larger section to be like the hit zone and not just like on the icon itself or something I want like the whole like a big square area or something around it so that's sometimes like a little trick let's do that cuz I don't think it's picking up this the moment of truth it doesn't like you how do you let me do the demo gods are not with you oh yeah so we can start from here ah Thank You Raphael in the chat I think your transition might be a drag instead of a click I mean the transition might be the wrong transition oh yeah thank you there we go that was pretty obvious I guess yeah so drags are good when you want to have sort of that swiping motion because cards are like Scheels like photos if you want to animate that transition there drag is great for light yeah okay so let's try that one more time maybe would you want to start from the very beginning yeah just like the full idea prototype and then you're gonna create a new one yeah you could write your caption no caption and then affiliate codes and all that and yeah basic quick very very quick prototype inside the same app nothing you don't have to do anything else super awesome yeah yeah and there's so many like like that was so quick just to show a quick example if like I click through that you could do and again like there's a ton of different triggers and animations and like timing transitions that you can play with if you want to get fancy with your animations or you have more time obviously we just not a little bit of time on the stream with Sally so there's only so much that we can get to but yeah it's been awesome having you on the stream it's been really past 2 days yeah absolutely it's been an awesome experience definitely very cool yeah and we appreciate all of you who have joined us on the chat and during our live streams yesterday and today there are more live stream events going on tomorrow and Thursday it'll be switched up so there's a lot of new content but thank you for turning tuning in and have a great day

2 thoughts on “Designing a Social Media App with Sally Tugendman – 2 of 2

Leave a Reply

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