Sources of Inspiration

[00:00:00]
>> Sarah Drasner: So let's go to Give n Go. It's a curated gallery of dribble shots reworked as interactive code pens. So basically people take what's on dribble and they recreate it, so a lot of times people are posting gifs and things on dribble but they don't really know how to make it in code and so people will take that and remake them in code.

[00:00:20]
And some of them are pretty good practice for front ends who want to learn their skill, test their skills. And some of them are pretty interactive, as well. I really like this one. Where is it? This one here. That's really nice. Here we go.
>> Sarah Drasner: So that's pretty different because he's actually using material design to get that done, but it's a real thing that you can really play with and really check out the code of.

[00:00:52]
So you can kind of explore this site and see all of these different people taking stuff from Dribble, and you can actually even submit your own so you can say like I used this Dribble thing and I recreated in code. Check it out and may add it to the site.

[00:01:06]
So that's pretty cool.
>> Sarah Drasner: We talked about Swiss Design and how I liked it earlier. I actually used Swiss Design for the first time I practiced grid. So I started to learn grid by doing that grid garden thing. And then I made this thing, which I added some animation bits cuz that's who I am.

[00:01:29]
[LAUGH] And so then it reconfigures for responsive, and the grid changes. For each different version we talked about min/max. You can still use media queries with grid too. The code for this is probably not the best code in the world, this literally the first time I ever tried grid.

[00:01:48]
But taking some of those Swiss Designs, and they are just like so ripe for practicing grid on, I think. You could take one of them. And definitely in the Code Pen I give credit to the original design. I have a picture of it and say where I got it from and stuff.

[00:02:08]
So you can put in the detail section. Hey I'm working from this source. Clearly like the first one wasn't animated, right? That was all my reinterpretation of stuff. But it's really good practice. You can learn through play. My friend Miriam Suzanne, the one I mentioned before, who made suzie css framework.

[00:02:28]
Was also working with grid and she was learning view as well. So she started to learn transition groups by making this like battle ground scene and like made all of this. Somebody asked if you could put grids inside grids, she definitely did that with this pen. And it's really cool, I mean you can change the size of it, the grid gap, the number of invaders, she's got that cool hover effect on stuff.

[00:02:54]
So that's, pretty awesome. So you can kind of learn through play as well, depending on what you wanna make.
>> Sarah Drasner: This is like a really really cool thing if you wanna work with a design really quickly and kind of get up to speed really quickly. There are UI kit out there for purchase.

[00:03:14]
So you can use them absolutely. So you can go to something like Shutterstock or Istock photo, write UI kit, and a bunch of stuff like these comes up. And granted, they're not all gorgeous and amazing, but some of them are a pretty good place to start. Like, some of these I might not use right out of the gate, but I might say, like, that's kind of what I want.

[00:03:37]
Let's take that, buy it for $40 or whatever, and change all the fonts around and change some of the layout around and add different photos and stuff. By the end, it's not the UI kit, right? By the end, if you haven't really used the UI kit exactly the way that it looks.

[00:03:55]
But you're even allowed to cuz that's what they're for. They're literally online for that purpose. So if you wanna start from something that's not starting from scratch that can be a really good way to do it, too. If you want to work with Photoshop, and create, take an image, and make it fantastic and do all sorts of stuff, there's a, Instagram, and filters, and things like that, but there's also on places like Creative Market, Photoshop Actions.

[00:04:24]
So these actions will do any number of things to your images. So if you wanna do something more spectacular, or whatever, you can click, you can load it in as a plug-in, and click the button. And then it will create these bright whites or a stroke affect or half tones and all sorts of stuff that can take a normal image, that's just from unsplash or something, and maybe make it posterized or give it some sort of stylistic difference that is different from where you started from.

[00:04:57]
And then even if you're using something from unsplash and someone else's used it, yours is just quite different. And it can communicates a different thing. I don't know if you guys have seen this before but Codepen has a patterns section, so if you go to Codepen, actually let's go to Codepen, so we can go there and they are like accordions and menu icons and grids and star ratings and tabs and breadcrumbs and buttons, so we are going to buttons.

[00:05:26]
And there's all sorts of cool buttons in here. Like all of them MIT licensed. [LAUGH] So you can really reverse engineer things and learn how things are done, or even try them yourself. And there's tons of stuff to learn. From reverse engineering and checking out other people's styles.

[00:05:53]
This is not a hover style I would have ever thought to make. I would not have thought to do that. But it's kinda cool, I might look at that, sleep on it, and make something else tomorrow where there's some sort of curve or return, and it's not theirs.

[00:06:09]
It's just this concept, that when you hover, something turns, something like that.