Episode 133: Inspiration, jQuery Knobs, Design Principles

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse show, your weekly dose of Internet 0:01 where we talk about all things, Web design, Web development, and more. 0:04 >> In this episode, we'll be talking about inspiration jQuery Knobs. 0:07 >> Design Principles and more. 0:12 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is this wonderful website called Call to Idea, 0:20 in the biz we call that CTI, it's just like Call to the Actions, CTA. 0:24 No, that's, that's totally a complete lie, but 0:29 they do have these really cool components here, and they call them Components. 0:32 I would call them design patterns though. 0:36 You can click on any one of these such as Logins, 0:38 and you can see lots of examples of log in windows. 0:43 So this is basically a pattern library. 0:48 And it loaded in all of those images there. 0:51 It looked like they probably could've used some lazy loading. 0:53 Oh. >> Mm, go check out the previous episode 0:56 of the Treehouse show for more info on that. 0:58 >> Hey, hey. 1:00 And they have lots of examples of log in windows, so 1:02 let's click on another one, maybe tabs. 1:07 We're gonna load in eight, nine images here. 1:10 >> Oh, really got to keep tabs on these to see when they're loading. 1:14 >> And then, once they're all loaded, 1:17 well, you can look at lots of different design patterns for tabs. 1:18 So. 1:23 >> This is all about inspiration right? 1:24 >> Exactly. It say-. 1:25 >> When I need inspiration I just look at a picture of you. 1:26 >> Wow. That's really sweet Jason. 1:29 That's actually a nice thing. 1:31 It's what we talked about, complements. 1:33 >> I know. No, we're working on it. 1:36 >> But anyway, if you're designing website, 1:38 which if you're watching this show you probably are. 1:40 >> But like not while you're watching the show-. 1:43 >> Right you gotta-. 1:45 >> just probably gonna watch-. 1:46 >> don't want to multi-task-. >> And then there's a-. 1:47 >> You gotta. Focus 100% then this is 1:47 probably pretty useful. 1:50 You can look at different pieces of inspiration for 1:52 all sorts of different design patterns. 1:56 So you can say, hey I got to solve this problem. 1:59 I bet somebody else has. 2:01 Already solved it and you can check here and figure it out. 2:03 Get inspired. 2:08 >> Did you see all those sections on there? 2:08 See that on the bottom? 2:10 There's one under profiles. 2:11 Wizards. Do you think we're in there? 2:13 >> I don't know. 2:15 >> No. 2:16 >> Hm. >> Mm, 2:17 we'll submit a poll request I guess. 2:18 >> Yeah, different kind of, different kind. 2:19 What about under players? 2:22 >> No, no I hate that. 2:24 >> Oh, okay. 2:25 >> I hate all those. 2:26 Not under players either. 2:30 Okay. Weird. I was thinking of something else. 2:31 >> Next up we have a jQuery plug in called jQuery Knob. 2:33 This gives you touch and mouse wheel and keyboard sensitive events for knobs. 2:37 So. Here, let's go ahead and 2:44 check this out over on the left, see this, this little knob right here, 2:45 I can grab that with the mouse and 2:48 as I move it around you can see that >> Woah. 2:51 >> it does a complete turn and revolution and fills up. 2:53 Now this will also work with touch events or, or keyboard or scrolling even, 2:57 I'm just scrolling right now, see how the mouse remains. 3:01 Stationary. 3:04 That's just, that's just me scrolling. 3:04 I know it appears like I'm doing a lot more there. 3:06 But no, that's it. 3:07 Now, there are a bunch of different options. 3:09 You can see that in cursor mode it will increase the value in the center. 3:10 And they're controlling it. 3:16 With these different data attributes to get a little dial here. 3:18 So this one goes from 76 to negative 54, oh wow look at this, 100 all the way down. 3:22 Boom. 3:28 >> Wow. >> And then you can 3:29 also display the previous value if you want to. 3:30 Totally up to you. 3:33 We're not the boss to you. 3:34 You know, you do, you do what you wanna do. 3:34 So anyway, got a bunch of different things that you can do here. 3:37 Angles, offset and archs, five digit values with 1,000 steps? 3:39 That's, like, a lot of steps. 3:44 >> Wow, it's like a thermostat for, like, the sun-. 3:46 >> Yeah. >> Or something this huh. 3:48 That's pretty cool. 3:49 >> Is that temperature in Kelvin? 3:50 I don't know. 3:52 >> Wow. 3:54 >> Yeah. So anyway. 3:54 Check this out. 3:55 An unreadable futuristic clock. 3:56 You can do that on the webpage if you wanna. 3:57 What time is it? 3:59 It's time to go to the next segment. 4:00 >> Next up, we have this wonderful, blog post I guess you could call it. 4:03 It, or maybe it's a, a library? 4:08 I don't know. It, it's the internet. 4:10 And it's a bunch of design principles. 4:12 >> Design principles, huh? 4:15 >> Yeah, design principles. 4:16 And you can click here to start reading, or 4:18 if you just want an overview of the major sections, you can scroll down here so 4:22 there's Axis, Symmetry, Hierarchy and Rhythm. 4:27 So let's just, let's just click on, let's click on Rhythm here, 4:32 let's click one of these. 4:37 And this is going to tell you all about rhythm in designs. 4:38 So Rhythm is the movement created by a repeated pattern of forms. 4:43 Now here's the first one, Pattern, 4:51 so it says the best way to understand Rhythm is to think of a song. 4:54 Songs have rhythm and when a piece of the song repeats well, 4:58 that's basically what you have here in design, 5:02 when a piece of the design repeats over and over again. 5:04 So that's sort of a basic definition of rhythm and then, in-between, 5:09 you have different breaks so it says a break in rhythm will appear my hieracheal. 5:15 So, thinking about a song again when the rhythm is broken, 5:22 something quite special usually happens, so right here, it lets you know that. 5:27 Well that's a maybe special part of the design, and 5:32 that's where things get broken up. 5:37 So anyway, there's a couple of other sections here for 5:40 design principles, and if you're familiar with the. 5:43 Principles or elements of designs. 5:49 This is going to be pretty analogous to that. 5:52 So, if you're maybe a developer and you're not too confident 5:54 in your design abilities, definitely be sure to check this one out. 5:59 >> Next up, we have a project called accounting.js. 6:04 This is a small JavaScript library with no dependencies. 6:07 That lets you format numbers, money and currency. 6:11 This supports full localization and has zero dependencies. 6:15 So let's go ahead and check out the demo right here. 6:20 Now the nice thing about this library is that you can give it this 6:23 format money method and then you can also pass it the symbol, 6:27 the different separators and customize all that. 6:32 So you give it any number and boom, 6:34 you get currency formatting right out of the box. 6:37 Now you can format the symbols you can also pass in value, 6:40 symbols, anything like that. 6:46 So give to you bunch of different options for formatting. 6:48 You can give it fixed rounding for 6:51 floating point numbers if you pass in a floating point number. 6:54 Now you know, depends on how specific you want to be. 6:57 With your currency formatting, 7:01 people might get a little bit upset if you are just rounding up or 7:03 down their money, so something to keep in mind if you are using this library. 7:06 And you can also unformat a currency string in case you want the. 7:11 Actual number of money instead. 7:17 So, that is about it. 7:20 It works really well with money.js and 7:22 the open exchange rates if you're doing something like converting currencies. 7:25 Anyway, very, very easy to use. 7:30 Check that out. We'll have a link in the show notes 7:31 right below this video. 7:33 >> Well, that is. 7:34 That is so money. 7:35 >> Oh. 7:37 That's a, that's a good pun. 7:38 I stopped accounting those earlier. 7:39 >> Hm. 7:42 Can always count on you for puns. 7:43 Next up we have this wonderful blog post over on CSS-TRICKS by Chris Coyier. 7:46 And it's called Dropdown Menus with More Forgiving Mouse Movement Paths. 7:51 Well that sounds a little bit complicated. 7:56 What the heck is he talking about? 7:58 >> No idea. 8:00 >> Well when you use a dropdown menu, 8:00 often times a website will require you to follow a mouse path that looks like this. 8:03 So here's the game plan. 8:09 We're gonna come over here. 8:10 Then I'll hover over this drop down menu and we're gonna come down here and 8:11 go straight across. 8:14 And then you'll come down to the menu item. 8:16 >> Is this a treasure map or a drop down menu? 8:18 >> It is, it is a game plan. 8:21 So, right here is a mouse movement pattern that users might take sometimes. 8:23 And they'll go over to the. 8:29 Drop down menu, they'll come over to this thing, and 8:31 then when they go to a sub item they will cross over this little corner here and oh. 8:35 >> Oh, it's gone. 8:40 >> The menu will disappear cuz they actually hit right here with their mouse. 8:41 Well, how do you fix that? 8:47 That's exactly what this article explores. 8:48 There's a couple of different approaches. 8:50 And actually on Code Pen, Chris took a pretty basic approach. 8:53 But it seems to be pretty effective. 8:58 I haven't had any problems with their menus. 9:00 Definitely be sure to check them out. 9:02 It's a CSS based approach. 9:03 So you hover over a menu item here. 9:06 And he's using pseudo elements. 9:10 before and after, and they're sized as such, they're color in red here. 9:13 So if you come down to a menu item and 9:17 you say, that is the menu that I need, you can just go [SOUND] and 9:20 hover your mouse over maybe the help or the asset manager here and 9:25 you'll be just fine because your mouse actually will be hovering over. 9:29 This pseudo element. 9:35 So that is one approach. 9:37 Now there's couple of others listed in this article. 9:40 They are pretty cool. 9:44 One of my favorites though is something that Amazon did and 9:45 they have this crazy JavaScript driven triangle so. 9:49 They don't actually render this, but 9:54 when you hover over an item it will create this invisible triangle. 9:56 And if you move your mouse at, I think, a certain speed, you'll still be okay. 10:01 It'll. They'll keep that menu up. 10:06 So pretty impressive stuff, and 10:08 something that solves a really annoying problem with a lot of drop-down menus but 10:10 this actually makes drop-down menus on the web at least pretty useful. 10:16 [MUSIC] >> Mm-hm, so 10:22 that's about all we have time for this week. 10:22 Nick where are you at twitter? 10:24 >> I'm @nickrp. >> And I'm @jseifer. 10:26 For more information on anything we talked at. 10:27 Talked about, check out the show notes right below this video. 10:29 Thank you so much for watching, and we will see you next week. 10:32 [MUSIC] 10:34

You need to sign up for Treehouse in order to set up Workspace

Sign up