(guitar music) – All right, welcome to this month’s edition of a Skuid App-etizer, we do them every three weeks, I think right? So sometimes we’ll have two in a month I’m not gonna worry about it Time doesn’t work the same way it used to work anyways So, thank you for joining us My name is Matt Brown, I’m a Product Manager here at Skuid I’m really excited to be with you all today This is a series of Webinars that we do looking at all the cool things that you can do with Skuid Hopefully wet your appetite a little bit, hence the title of it being an app-etizer and getting you to think about what’s possible Start to think maybe, we could do this And this edition of our appetizer is very much along those lines, because we’re talking about some things you can do with modern web design, with your business apps Now that might be back office apps but really, really gonna be important for front-facing, customer portals, partner portals, that kind of stuff as well So let me go ahead and share my screen and we’ll get going I’ve got a few slides here today to get us started and then Chris Stern Senior Pre-sales Solutions Engineer at Skuid veteran of showing what Skuid can do is gonna be getting into this Well Chris is very aesthetically minded I like aesthetics, but the stuff that Chris makes looks a lot better than the stuff that I make typically, but I like to dive into design trends and that’s what we’re gonna be talking about today is some trends with modern web design, mobile and desktop and specifically, we’re gonna look at it in the context of Salesforce Experience Cloud Now, if you’ve been following Salesforce, then you know that they just rebranded communities and they are tying it in both in terms of marketing messaging, and then also under the scenes or under the hood I’m sure as well, tying these products together that are more kind of front-facing So communities, Salesforce, C-M-S, commerce cloud, they’re really leaning into that because we’re talking about COVID-19 2020 You need to be able to interact with, that front-facing technology in a much more scale-able way, you need to be able to get out to your users, to your partners And we’re gonna look at some of the things that you can do with that Related to that is Salesforce technology around what they call a mobile publisher And that’s something that we’ve been playing around with for a while And using mobile publisher, you can wrap up a Salesforce Lightning Community and deploy it as a mobile app And you can do it with communities You can also do it with internal apps as well Really, really cool, let’s you do some really great things with push notifications, stuff like that A lot of really cool technology there And so, we’re gonna look at some of that today and how to do that, but let’s talk about where we’re going in terms of design So we’re gonna look at five modern web design trends that you know shamelessly scraping from all the design trend blogs that are out there There’s so much good stuff I spent a lot, we all spent a lot of time on media looking at what you know designers are doing And what we wanna do is go look at some of those things that you see in consumer grade, public facing sites and starting to think about how you might use those with a back office application where might use them in a portal or a community So we wanna get into some of that stuff And what I wanna highlight is, the way we think about things, if you ever work with folks in our services group, we kind of think of things in terms of four steps First is utility The things the app has to work, then is efficiency or usability, It needs to work well And then it needs to be intuitive, easy to learn and then finally you want it to be delightful And so a lot of these things are gonna be in that user delight category And that’s really, really important when it comes to building trust and user loyalty It’s amazing what those little touches will do in keeping your users around it in your system So what are some of the things that we’ve been seeing and starting to start? What have we been starting to incorporate in Skuid designs? All right, big one Dynamic colors So bright colors, gradients, translucency and opacity
I’ve seen that on a lot of different blogs, We wanna talk about how we can do some of that in Skuid today Second one UX writing So we’ve got a number of folks at Skuid and Skuid alums that have gone on to some pretty cool things in their career that love to talk about how important UX writing is And when you think about the flavor of being in an app and having that user experience huge part of it So if you use Slack, if you use a productboard, a lot of these things will give you a little bit of flavor text when the page is loading, that goes into your brand feeling, but it also gets into things like what Salesforce is doing in-app guidance Okay, how do you guide users? How do you tell that story? And Salesforce has really focused on this from the beginning with Aloha speak We’re not gonna use all that corporate jargon We wanna use things in plain words so that in human words, so that you understand what you’re doing and that’s another trend that we see So we’ll talk about how to use that Micro-interactions, all right so, we, Oh and by the way, we’re gonna to put some links in the chat for where we’ve gone to see that So if you want to get some inspiration, there’s so much good stuff out there on web design, we’ll put a couple of those posts and articles in there So that UX writing, one place I saw that was Christian over at Wolfpack Digital, some pretty, pretty cool stuff there And then Vamsi Batchu – UX Collective was writing about micro-interactions And basically what we mean when we talk about this is they’re like any other interactions with devices is what he says Use to communicate meaningful feedback to the users because the user wants to know what happens when an action is performed So communicating meaningful feedback, that’s everything from subtly changing colors to kinetics and getting some motion in your design We’ll talk about how to do some of that in Skuid All right, here’s a big word Neumorphism This is coined by Michael Malewicz I’m sure I’m saying that wrong, but again, we’ll put the link there in the chat So if you’re familiar with skeuomorphism, that’s this idea which you see in material design where it looks physical, it’s tactile And so neumorphism is, someone described it as a love child between the material design, which Google has and then a flat design So it’s physical, but it’s a little bit more subtle You get this kind of embossed look, if you’ve seen it on dribble or any of those design blogs So it’s pretty cool It’s a great fit, I think possibly for mobile where you’re actually touching the screen So if you want to indicate to the user, Hey, this is something that you’re interacting with that can really help And I wanna give some credit here We’ll get into the details of this later, but Tyrick Christian on our design team at Skuid and then our engineering team have given us a ton of controls about how you can control shadows in the DSS, which is how we’re gonna be able to do some of those cool things with Neumorphism or Neo-skeuomorphism All right and then – well Matt real quick, there’s a link in the chat Our colleague Annie is crucially dropping in links in the Zoom chat so you can check it out I’ll be honest for a second Matt I saw (chuckles) I saw Michael Malewicz and I there was a split second was like, Oh, my word, he’s on the call and he just posted the link to himself, but though I got really excited, but it’s actually just Annie being clear and saying, here’s the details on this guy So sadly he’s not maybe one day he’ll be on our Webinars – We really appreciate your contribution – Really appreciate it, yeah – All right and then finally, the dark mode returns So it really needs no introduction We’ve all used dark mode for different things, Apple, Reddit, all that stuff And Salesforce released this last year, but they disabled it, I think about seven months ago because of performance issues and stuff like that So if you want to build some apps, whether it’s for your communities or for back office apps, you can do that with Skuid And I threw a dad joke in there starring Christian sales app Annie has some really good ones too, Robert App-inson will be the new Batman apparently And Ben App-leck was the other one So we said come for the Dad jokes – we were not joking there All right, so those are five trends that we’re seeing Chris, do you want to show us how we can get these Skuid? – Yeah, absolutely – All right – So let’s start from the top where we’re gonna get into some of the dynamic colors and gradients and that kind of fun stuff So let me share my screen and yeah, I should be seeing a mobile like ordering device Are you seeing that, Matt?
Is that coming through for you? – It’s coming through – Beautiful, okay – Pretty cool – And so what I’m gonna show here is before we get to gradients, which I’m really excited about, but this is, this is where Skuid in the Design System Studio We let you create these things called style variants and basically it is a couple of different versions of the same thing So we’ve got the gray card right here that you can see around the various menu items and what we’re gonna do is apply style variant condition that whenever I add an item to my cart, we are going to change the style to be a blue card So if I add an item, we’re gonna change the card to blue We are also gonna change the price to a little bit more visually attention grabbing, basically wanting to indicate to the user, hey, the state of this has changed This is a selected state, so on and so forth And what’s really fun about setting this up in Skuid is if I pop over to our Design Systems Studio So here we go – Well you doing all of this without code? – All without code, yap, great point Matt, yeah – No CSS your just doing this using our declarative configuration in the Skuid’s Design System Studio cool – Exactly, so in the Design System Studio, and this is a centralized place, we were able to organize all of your different brand, your colors, like your different fonts, your font sizes, you can see over here at topography So spacing, shadows, capacity, borders, all those fun things We are able to create variants of them So multiple versions of borders to fit the type of look and feel that you’re going for And so for those cards that I made for the ordering app, I have my light purple blue color, which I’m using as the selected state And I have a grey further down this list, this light gray, really creative naming there on my part, and then going to the wrapper So these are all I’ve switched from variables to components up here in the top left And these are all the ways that you can present data to the user These are all kind of the UI elements that you can style leveraging the things that you’ve created in your variables So if I go to my rapper, got a lot of different wrappers in here that I’m using I’ve got my light blue background variant And the way that I style that is I just brought in further shade of blue that I wanted to be that particular background I’m drawing from all the variables that I created So this isn’t, you like pasting random hex codes around all over the place This is a really nice way to keep it consistent design and not stray outside of the temptation a little one-offs – Now that’s great, so let me, let me stop there for a second, because this is one of the, one of the themes that we’re talking about is bright colors. okay So we can add our colors as a variables to our Design System Studio, and then those colors are available for us to use them throughout the rest of the DSS when we’re creating these variants and so in your app, you’ve got those bright blue buttons It definitely has a bright, a bright feel to it And we’re able to make sure that we’re using those same colors And we aren’t slightly off here having to remember which, which hex code and stuff using those colors as variables in the DSS All right cool so those are colors You got some bright colors there and gradients was one of the other things How do we do gradients and Skuid? – Yup, so shameless plug for CSSgradient.io – Yap – This is a really cool tool where you can paste in a bunch of different hex codes that you want to have it generate a gradient, like kind of through all of those different colors They’ve got some great ones here to kind of get you started You can take away or it’s super flexible And it’s, I actually got really distracted on this thing, just creating cool gradients, but what’s neat about it is, so if you can also change the angle that it’s coming in at so far When you switched that to 90, then it’s gonna adjust and it’s certainly waiting to 85 – No, No, no, no You’ve got an ’80s vibe with the – Oh eight yeah, I was like – How we trunk grid behind it and then like some like metal, (Chris laughs) metal plated letters across there and their making me on that’s good – Yes, nice – I made it 85 too, because that’s what I heard that sounded cool It’s generating though the definition down here below So it’s as you’re adjusting and making tweaks here to what you want your gradient to be, it’s generating that definition and so I’m gonna, Oh, that’s cool I noticed that it applies to the gradient to the hover state that’s wow that’s actually really awesome, man – Yeah cool so you can just copy that – I’m copying that and then what I’m gonna do is, so the thing that I’m interested in
is just that bottom piece, this linear gradient And so I’ll hop over back to my Design System and I wanna create a new color now that is that gradient And so I’ll create this, I’ll say awesome gradient, and I’m gonna throw in – Which soft maybe even radical – That’s a great point And so when I paste in that definition that in this awesome website kicked out – Love it I’ve got that now and to Matt’s point, like I’m able to leverage this in other places So now that I have awesome gradient, if I wanted to go and maybe create a button like how they did for that hover state Let’s create a button really fast and we’ll make this button nice and tall, So we get a nice, yeah, make this rather large And actually I’ll just copy it right away So Skuid gives you a ton of control again, without any CSS for buttons, they have focus and hover and active and selected and disabled States And so for the hover state, I’m gonna copy exactly what I just saw on that website, which was awesome gradient So we’ll do that and now if I hover over my button, – Woow – The awesome gradient – It I just a portal into (Chris laughs) – Yeah, it’s something – That’s Pretty cool, all right That’s awesome so in order to get bright colors, gradients, opacity and all that stuff I need to know how to Google and I need how to do some copy paste And then I just need to go put that in here – Yeap super, super complex stuff – Quite awesome All right, so moving on second one here, we’ve talked about UX writing and microcopy, storytelling driven experiences That’s a big part of how the brand feels So what do you have here? And that lines up with those things? – Yeah, so what we’re doing here is, I’m gonna hit cancel order and it’s gonna take us back to sort of the welcome or starting screen as I’m working for this app – And the gradient – Yes and we you’ve got a gradient coming in Cause those are awesome and so microcopy here, we have an example of just get that grub, which is more fun than create order or start process or something along those lines I mean the full disclosure, – I’m now hungry – Or go ahead, Matt sorry – I’d just say I’m a little bit hungry now – Yeah, Oh absolutely, 100% – Yeah – I’ve been staring at this menu for ages prepping for this and it’s killing me The grilled halibut looks better every time (Chris chuckles) but the microcopy here, it’s just, as Matt was saying, it’s kind of that more, almost the language of your brand and sometimes more of that wit or whimsy or just something to like make a user smile and just be like, Oh, that’s cooler than saying save or submit order or create or something along those lines And what’s really cool about this microcopy in my opinion, is that because Skuid is again, we’re like UI UX focused What we can, one of the things that we can do with that is dynamically bring in just a bunch of fun labels for that button they don’t have to exist in your database We call those UIMI fields – Yeah – And what that allows for is, so if I cancel this order and go back, I think we’re gonna see a different, fun little message right there And so you have to build this, yeah, you don’t have to have these things sitting in a database somewhere We just created a couple UI only fields And then we set up an action framework where if the user, ever goes back to that screen, basically just flip through them and see some different things So there’s FaceTime (chuckles) get that grub you put in whatever you want But yeah, just a good example of how do you make these apps feel more human and more personal and more fun too, so – Hey there’s a good question in the chat What mobile emulator are you using there? – Oh, nice I am just using Chrome’s so – Oh It’s built in so if you just do it inspect and then– – inspect and then down here in the bottom left, you can toggle the device toolbar and then they give you several different devices that you can choose in terms of like what the screen size is And I don’t think it’s on by default, but if you want to see like the actual device frame, you can view on the right – Oh very cool – And you can add the device frame to it I’ve got mine on So it says hide that’s how you do that – Great awesome – Awesome okay so, all right so you’ve got some microcopy in it Yeah, I want to just take a brief second there again, the way that you do that is you can create a UI only model, or you can be on a normal model with Skuid and you can set up a UI only formula field But the point is you can store those kinds of variables and then use them anywhere you want You might use it as a label on a button You might use it in some texts displaying a message to the user But the point is Skuid gives you these tools to do things
you can just do what you need to just by conditional display logic with your components Okay, that’s awesome That’s a great example Now, when we talk about some of these cool things with kinetics and motion design, making something, feel like it’s moving, that’s where we start to get into, wanting to be able to extend Skuid just a little bit further so yeah What are you showing us here? – Yeap, so again, shout out to Wynn who put this together These are just a couple of examples of where we’ve extended, some of those components with like with extensibility and I’ll show you that in that in the DSS kind of, where you bring that in So here’s an example of where the card just kind of pops on hover There’s a bouncy checkbox, which is fun Just a little – Yeah totally – Yeah, I like that And then a blurred background, which is a really nice design pattern as well Just make things pop a little bit And so we’ll show you for today We’ll just really quickly run through and show kind of how you can extend with a little bit of code here So let me grab the – Right so as you pulling that up Yeah, so we want Skuid to be incredibly powerful for no code developers and low-code developers, but there are gonna be times where you come across specific design requirements where it just didn’t make sense for us to do that kind of feature in this component or yet like not enough people have requested it, but we wanna make you give you the options to go add that So yeah here at the Design System Studio, you can go to your component variant and then you extend that component variant with just the little bit of code that you need to do kinetics or motion design So what are, yeah, what do you have here? We’ve got the bouncy checkbox – Yep, so this is what you need So over here on the left is kind of what you’ve got available to you in terms of modifying And then over here on the right is what I’ve pasted in So I’ve hooked into the checkbox checked state, and then I’ve created sort of my animation for how, what that’s gonna look like when it’s checked and you can see that little bounce right there that it did Maybe I want it to last a little bit So I’ll do like 0.75 So it’s a little bit easier to see, and there’s a nice little balance And so that’s all you need to do for the in that case it bounces and actually there’s another – The Pixar lamp would be proud – Oh man, great reference (Chris laughs) Yeah, that’s that’s awesome So I’ll call this the Pixar switch actually That’s really good, Matt – Well we can’t we call it that Yeah, that’s true – I just call it bouncy switch, or something like that – I didn’t capitalize it So maybe that’s fine, but this is the same This is the same idea, right? So if I paste in my properties the, well, this is gonna need to be a switch So I’m looking to switch on as my test here So switch on, let’s see, five, Oh, that’s cool Though, actually it looked better Let’s change these to X ’cause the switch is moving left to right and so let’s make this – okay, cool – Look a little bit cool, live demo here so let’s see what we’ve got So I’ll turn that off That is that’s honestly pretty cool – Men yeah, it feels – slowdown – Like it’s just really moving fast I love that (Chris chuckles) – Yeah, that’s fun, nice – We should go make like a Dr. Seuss app style where it’s just like, there you go not Pixar switch That’s great, okay cool So motion kinetics related to these micro-interactions feedback all right okay so just two more Let’s keep it moving Big word, Neumorphism, Neo-skeuomorphism What do you got? Okay cool, so there’s that embossed looking field – Yes – This is another one of those websites where you can go to generate the code you need, right? – Yep, this one is really awesome So what I did here is you can drop in any hex code that you want I’m actually gonna do a different shade of green ’cause that’s what I had prep for And then really conveniently they’ve given you several different ways in which you kind of changed that 3D look So you’ve got sort of a rounded top, the insert or recessed right up, dimpled, all that kind of stuff And then you can mess with the sizes and then it is also generating the definition of those two shadows that you need to get this look And because Skuid’s Design System is super awesome for our shadows and I’ve gone ahead and created these, but you can add multiple shadows really easily
And so all I did was I pasted in, I had my shade of green I grabbed the definition that it kicked out And then I replicated that here with my colors and then put that in a Skuid page and so here’s the Skuid page There’s a little pop right there and I did an insert one is well, which yeah, if you want to do insert, you the tick the box that says insert and it switches it to inset so really easy But what’s cool about this is this also is a little bit of an interaction, so slide to see insert card So if we move this, I’m gonna change the style variant to now show the insert shadow variant of that same card – Did that animate to why does it, what does it how many variants are you got in between – Two, the animation surprised me Matt I genuinely didn’t expect that, but it did that, yeah – Actually worked – Yeah, it was really (chuckles) actually looked really cool – Very cool – Yeah – So that was fun to discover, but yeah, that’s a little bit of Neumorphism or skeuomorphism or whatever you want and just mostly just fun to be able to see like, yeah, you can do it a ton of flexibility with what you can design and again no CSS or code to create this – So it might be a fad, It might be gone in a year, but if you wanna try it out for a couple months, you can And it’s wow (Chris chuckles) Very, very cool Okay, so there is one more thing that we wanna show you, which where did it go? I lost my browser here I don’t know, all right here it is That’s why, okay cool Yeah, so the last thing that we wanted to show is, – I stop sharing so go for it – All right, is our return of the dark mode, all right? This is not a great dark mode I would love to spend some more time It’s not as beautiful as the Neumorphism that you just showed, but using the design system, you can go and create variance of those components So I’ll go ahead and zoom in here, but I can go to my form or my table component And we’ve got kind of our default styles for the Design System, our font sizes, all that stuff and that’s great And then using child variants, I can create a child variant and say, I wanna use inherit, all the font styles, the size, border width, all that stuff I just wanna change some of the colors And so I can go in and change the background color and the font color and stuff like that And then I can apply this variant, which I’m calling default dark at the composer level and now I can say, hey, I got a dark mode and I can even make that something that responds to user changes So they could have one of those fancy switches and toggle between light mode and dark mode if they want So really basic, I’ve got just a list here with a fly-out panel, but we do still have a lot of light up there with the Salesforce, a header And I want to point one last thing out when you build a Skuid page It’s gonna work the same in visual force or lightening So I can go to this page in visual force if I want to blow everything out and just have complete control over the page and do something like that, which I might want for a dark mode experience And it’s the same Skuid page We’re just changing the environment that we’re in So, okay mile a minute, that was a whirlwind probably bit off more than I could chew, picking five design approaches (Chris chuckles) to try and cover in 30 minutes or so Well, let’s stop there Any questions before we finish up today, we covered a lot – The last thing I throw in Matt as we’re waiting for any questions what’s really cool about this is not only can you deliver like really awesome designs with a ton of flexibility and kind of match whatever sort of style guides or branding, or just cool stuff that you wanna do really, really easily But this is really powerful when it comes to accessibility too, because oftentimes like different sided Ness has different needs So when you think about like color contrast, or like size of typography or things like that, Skuid lets you really quickly and easily design applications that maybe the field labels on forms are larger and have a stronger contrast to the background on a screen So you can really take in a lot of, you can take in a ton of consideration for accessibility with also not only matching branding and styling, but also making things much easier to see and comprehend from an accessibility standpoint too, which is really exciting and a great use case – Yeah, now that’s absolutely true And I’ve seen some really, really cool use cases for that as well All right, I’m not seeing too many questions
If this is interesting to you, we’d love to hear about it If you get a chance, check it out The community is just community.Skuid.com You can go there and see what Skuid builders are doing The questions that they’re asking there’s, there’s a lot of great stuff, troubleshooting knowledge bases all that stuff But yeah, if this is interesting to you, go there, ask questions, show us what you’re doing We’d love to see it, but thank you everyone for joining us today Let’s see, last week or last time we did one of these John, Susan, and I, we talked about ditching spreadsheets , automating processes That’s available on all the Webinars, If you want to go check that out We also did a recent Webinar with Eric Walbert over a new Mary Ann Liebert publishing He joined us at the, with some folks over at the app exchange hour Webinar That was a great time We talked about some of the things you can do with related lists Coming up in December, we will be doing one with Rob Hatch, another product manager like myself here at Skuid He is a big data nerd No, not again, he’s a big nerd about data That’s December 3rd, we’ll be talking about, I think it’ll be holiday theme I think we might talk about decking the halls of your app And there may be a Santa countdown or something like that with a rest API I’m sure it will be fun We might even throw some Christmas sweaters on it will be after Thanksgiving at that point so we shouldn’t make too many people angry with that But anyways, yeah, please join us for that View the Webinars are on the website, join us on the Skuid community Thank you, Chris This was awesome, really, really cool to see you and thank you everyone for joining us We will see you around – Thanks everybody, thanks Matt Always fun have a good one (guitar music)