How UI Foundations Was Built to Teach Quality Design with Kyle Gill

Creating a course about design has its own unique challenges.

Design is an art, but that doesn't mean it's not quantifiable. With some caveats of course, there are rules you can follow and techniques that you can use to produce designs that are going to look good. Kyle Gill aims to arm learners with these design principles so that they are able to identify what makes up good design and have the ability to produce their own.

Creating interactive examples is also an interesting challenge. In a course about design you probably shouldn't just throw your learners into code challenges, your audience might not just be developers! Kyle has created interactive design examples that animate from a bad design to an enhanced one.

Kyle also chats about the difficulties with measuring learner success, the criteria a good quality course, and the technology behind UI Foundations.

Check Out

The Links


Full Transcript

[00:00:00] Joel: You are talented and interesting, and we've worked together on egghead and it's been like a pleasure to watch you go from an intern at a company to a professional software developer and educator and sharing your knowledge. And that's something that, that I personally enjoyed watching. And we're gonna talk about some of that.

[00:00:17] And specifically, we're going to talk about the course platform and course that you're developing, but the first thing I wanted to kind of kick it off with. How do you approach learning a new complex topic? Like when you sit down to learn something it's difficult, you know, you have a hill to climb.

[00:00:31] How do you approach learning something complex?

Approach to learning something complex

[00:00:33] Kyle: I think for me, my, my best learning is done by doing, which is, I don't think is totally unique, but. I feel like I, I hit walls when I'm trying to learn something and I, I spin wheels, just kind of reading or memorizing or it was the same thing for me in school, like going through university where I felt like I didn't learn until I did homework.

[00:00:55] So most of the time in class I'd sit there and do my homework while the teacher was lecturing. Cause I felt like I, I could actually connect the dots that way. And so that leads me to where. Yeah. When I'm interested in doing something I have to look up a lot of info, kind of do a lot of reading.

[00:01:09] That's like a preliminary step, but I don't feel like it's ultimately learned until I've like done something with the knowledge and, you know, if it's something physical using my hands and actually like touching and feeling, if it's, you know, writing code, which I do a lot of in trying to learn some new tool library.

[00:01:27] Language then I think I have to build something and it can't really even be something trivial either. It almost has to be something that I like intend to use. So I feel like I build a lot of small trinkets and gadgets and tools that have really helped solidify the things I actually feel like I, I learn and get better at, but Yeah.

[00:01:46] Joel: Do you reach for books or what's your research process? Like when you, you said you, you read a lot and I'm wondering, you know, like a lot, like there's the web and there's books and there's different ways to think about reading and research. And I'm wondering what

[00:01:56] Kyle: Yeah. I think I read a lot. I do read a lot of books. I feel like I, I want to consume from multiple mediums or multiple media, whatever the plural of that is. So yeah, if it's books I feel like maybe it depends on what I'm trying to learn, what I'll reach for.

[00:02:12] When it's cooking, I'm happy to watch a YouTube video because I can see somebody doing something and you.

[00:02:17] I can mimic the behavior. I feel like when it's a more like complex thing that I feel like will take a deeper dive. I want to, I wanna hear what, like four or five people have to say about something and that could be reading books, blog posts

[00:02:31] Joel: Are you much of a course taker? Do you buy like online courses and take them or watch them or read them or do them

[00:02:36] Kyle: Yeah. Yeah. I am definitely, and I feel like the value I get out of course is gen ends up being like, there's a couple gems in each one. You know, I think I'm also not unique in that I buy a lot and don't finish a lot of them. Cause

[00:02:49] Joel: I don't know that finishing is always the always do. I mean, it's finishing the goal, right? Like it's what you wanna get, what you need out of it. Not necessarily finish the course. Right.

[00:02:57] Kyle: Totally like same thing with the book.

[00:02:58] Like I don't finish tons of books. I don't. Unless they're like fantasy books. I want to get to the end. But I tend to like read, to get the ideas. I feel like I was there for, and once I feel satisfied with those, like move on to the next thing and yeah, I'm kind of like antsy to

Qualities of a good course

[00:03:12] Joel: I was gonna say, what are the, like the qualities of a really good course when you take one? And you're like, wow, that was great. What are some of the qualities that, that you've noticed?

[00:03:19] Kyle: The I really notice like the small details and I think it's like really intentional thought into the content. I mean, the content is really what I'm there for. And if it's been well thought out, I feel like there's like a logical flow of ideas where I can start at the beginning, go to the next thing and kind of.

[00:03:41] Piece together, like, like I'm following, like building a Lego and it's step one, step two, step three. There's complex ideas that aren't like numeric steps. But I think a good course, like somebody that really knows the material can turn it into something that almost becomes that for you where it's like, step one.

[00:04:00] It's like, oh yeah, that's easy. Step two. Oh yeah. That's easy. I just take one and add two. Oh, step three. So if I like take a course and. And I feel like, oh Yeah.

[00:04:07] this is kind of easy. I think like it's done its job for me. And that maybe is different by every the level of the learner taking a course.

[00:04:17] But when I'm following something, if I like feel smart doing it, I think maybe it's stroking my ego a little, but it, I think it also shows that like an expert has made something complex, simple, and really knows what they're doing.

What are learners trying to achieve from UI foundations?

[00:04:31] Joel: So you've built UI foundations and it's a design course specifically focused on building beautiful UIs and you that's what you're teaching folks how to do. And when somebody comes to that, when a learner. Comes to UI foundations. And they're interested in what you have to offer.

[00:04:47] What are they trying to achieve? What do you feel like is the difference in their lives that they're trying to accomplish?

[00:04:52] Kyle: I would hope that somebody who comes to UI, foundation's kind of the target audience of what I've been building for is almost like the vague, ambiguous parts of design that you almost like can't point at. And like, we can point at a homepage of a website and say like, oh yeah, that looks good.

[00:05:08] But it's almost hard to like, quantify why I think what I'm hoping people learn. As they go through the content and can like interact with it is that there's stuff that you kind of can quantify. There's like rules that you can and lines in the sand. You can draw that is like this is good.

[00:05:27] Most of the time with some caveats, always in design, cuz it's an art. And if you follow this, like you're probably gonna end. Looking pretty good. And if you follow this, you're gonna, this is a good input to your output. If you kind of take these inputs and understand some rules about like how colors work together and how spacing and, you know, contrast and all sorts of these like design principles that kind of make like little pieces, it's almost like trying to arm learners.

[00:05:56] With a bunch of, I mean, I named it foundations because I think that it's like pretty fundamental stuff. It's not like super new and novel. A lot of like the design principles I'm trying to like teach, but I'm trying to make them like practical and give like some actual opinions and rules to say, like, do this, don't do this.

[00:06:14] And if you do, I'm willing to bet what you come out with. If you're trying to design something yourself will look pretty good.

Creating interactive examples

[00:06:21] Joel: I think one of the cool things that you've done is created this kind of interactive environment where you're not just, it's not a book. And it's not a video course, but you've given people an environment where they kind of can get in there and touch and feel the design process in a way that feels pretty, pretty real.

[00:06:35] And I'm wondering, you know, like how is that approach helping people achieve their goals and why have you kind of chosen to take that extra effort to make those interactive examples?

[00:06:44] Kyle: Yeah.

[00:06:45] I think for me it felt like a pretty natural fit to say that if I'm teaching design it's, you know, you can look at it, you can see it. You can see a design. That's good. And I can look at a design and I can see that it's bad. And there's like this in between state. Like, how do I take it from bad to good.

[00:07:02] And one, one of like the most. Common interactive things I have throughout, like the course is this like little example pain that I have where I put like a UI inside it and I like throw some bullet points next to it. And when you click a button, it'll animate from like a bad state to a good one. And it's not necessarily always like bad and good that's, it's kind of subjective, but there's like that ground in between.

[00:07:31] A bad design and a good design where people will throw up their hands when they're looking at something and say like why does it look good? Like, what's my problem here. And if you have a book, you can kind of show like a good and bad side by side, but sometimes it's not always clear exactly.

[00:07:46] . You know, it's almost like you play the game of like circle the differences between these two examples and I'm almost. Playing the game for you when you click a button and can kind of animate the difference between good and bad and emphasize some text and put some more color in somewhere. And then you realize like, oh a different shade of a tinted background actually like breeds some life into this.

[00:08:08] And all I need to add was that one thing. And I hope, and my goal and it seems to resonate in land with a lot of people. Is that. It makes it a lot, like faster to kind of digest and get the gist of when you can see, okay. Here's where we started. Here's where we ended. It does look better.

[00:08:25] And there wasn't all, that much that had to change. It was a little tweak here. And then I just kind of categorize those into different rules and principles and yeah.

[00:08:34] Joel: I noticed that you don't cuz in the ones, in the examples that I played with it wasn't like good or bad. It was like less and more. So you're adding more to it and maybe this is too much, and this is too little. And then there's kind of that Goldilocks in the middle where it's, this is the sweet spot, but like, based on preference, you could move it a little

[00:08:50] Kyle: a hundred percent.

[00:08:51] Joel: this way, and you're not gonna ruin it but you could, if, when you're ex at the extremes, then it's, you know, like that's not probably it.

[00:08:57] Right. And it pops back into the middle. And I really enjoyed that. Like I thought that was a thoughtful

[00:09:01] Kyle: Cool. Yeah. I'm glad. I'm glad you did.

How people going through the course meet their goals?

[00:09:04] Joel: How do you know when somebody's interacting with your site or they're a learner is going through the course. Do you have any way to, to know when they've been successful? Have you I know you're still very in progress with this, but like what have you learned so far in terms of learner success and people going through it to meet their goals?

[00:09:18] Kyle: I really wish I this is something I've been thinking about and I think I need to find a better mechanism for gauging it. I have some like pretty rudimentary tracking inside of it, just to say like when stuff is marked as complete, I. I have like some analytics in the background where I can kind of look at, I have some like quizzes inside there and kind of see when people are marking the wrong answers.

[00:09:39] Almost like a teacher could kind of check a bunch of tests and see the grade distribution on like particular question. So, I would hope that those are over time going to lead me to say like, oh, apparently this content leading up to this question, didn't explain it. In a way that led people to the Right.

[00:09:55] answer most of the time.

[00:09:56] So I think that's going to be very interesting over time is more and more people go through the content and kind of interact with it. I have had like a pretty one on one lines of communication channels with a couple people going through that have, you know, I've just sat down and talked about their feedback and gotten responses about what they liked.

[00:10:16] Didn't like, That won't be scalable in the long run, but I really don't have what I feel like is a good mechanism to say they made it through and it was worth their money. And I think that's a failure on my part. I hope that by the end they get to a certain point, but I don't feel like I have a great way of measuring that yet..

[00:10:36] That I've quite landed on.

[00:10:38] Joel: I wouldn't call it a failure, Kyle, I would say like you're in a learning process yourself, right? Like I think that's, what's interesting because you are creating something and you're selling it, but you're also learning. As you go, right? Like this is your first course and course platform, correct. Like you haven't created course platforms in the past and this is kind of an effort.

[00:10:56] And I think that's great. How you said you were talking to people like learners as they go through in a handful of them. How has that feedback affected what you've made if it has at all?

[00:11:05] Kyle: It's made me realize that I apparently can't proofread my own work. Cause there's,

[00:11:09] Joel: Yeah, I feel

[00:11:10] Kyle: of issues in there. The first thing I've learned. Apart from that . I've realized that, you know, everybody really is different stuff That

[00:11:17] resonates with some people doesn't with others.

[00:11:20] Like things that I've sometimes have gone through like three or four iterations on some of these little like examples. I.

[00:11:25] Made that I've kind of embedded inside blocks of texts to make stuff more interactive. And some people just say like, you know, I didn't really get this one or I thought it looked about the same between both states.

[00:11:37] Right. I didn't quite get the point. And Yeah.

[00:11:40] It's a little bit harder than I thought where sometimes the things in my head, I don't quite get out into, the. Format to explain it well or write or, and that's been a challenge. I think for sure there's a big variety of people that have kind of signed up in little like pre-release period that come from kind of different backgrounds.

[00:12:02] And I think it was a bit of a. At first, I was almost like firing darts at the wall of like, what kind of developer or designer I was targeting if it was really more developers or more designers. And I think I've landed somewhere in the middle and those people come with different backgrounds and I've assumed some knowledge in places that, you know, a different kind of learner just doesn't have and needs.

[00:12:27] Like, I need to give more context some places, but not give too much context to bore other people. And a lot of those things have become challenges, but they're interesting challenges. And they, I've liked having my own course platform to find nice ways to solve them where I can hide context inside tool tips and dropdowns and, you know, let people skip content when they need to.

[00:12:50] Joel: Yeah. You get that. You get that control.

[00:12:52] Kyle: Yeah, hard to fire wide, but great. To have the control, to know that I can like adjust the levers where I need to.

framework for thinking

[00:12:58] Joel: Do you have any sort of approach to instructional design that you've been taking or is it just kind of taking your knowledge and applying it

[00:13:04] Kyle: I don't think I've really had much of a framework for thinking. I think a lot of it's been a bit of like intuition I've started gaining from. Like writing docs and tutorials and content and stuff like that over time. And yeah I've kind of trusted my gut, that the stuff that I've learned well with other people hopefully resonate with and followed an approach where I try and deliver things a couple ways.

[00:13:31] And with like a couple examples, I would say that's like one kind of core philosophy in trying to follow is rehashing stuff, a couple ways you know, introducing a principle and the first module and then a couple modules later kind of bringing it back up to like nail it home. Like this is where that idea and this idea synthesize.

[00:13:51] And then, yeah, hopefully having enough good examples that, you know, something sticks.

Why not use an existing platform

[00:13:58] Joel: You touched on this a little bit. And I'm really curious why not use an existing platform like a teachable or a podium or something that, that you could just go and you didn't have to bother with all the kind of technical stuff in terms of building your

[00:14:08] Kyle: Yeah. I considered it, but I think part of the thing that I love most, and I think the thing that the really like the killer feature, the thing that I feel like is most valuable about what I've been building is that it. It can be, there can be a lot more in a little, like less can be more in, in what I'm able to build, where I've done like screen casts and I've written long form content and stuff where you can embed things in and it's good.

[00:14:38] And you can explain things well I don't think it's a bad approach, but I. I felt like all of the design content and things that like I had learned from like blog posts on medium YouTube channels that teach this stuff like websites with, you know, this kind of content. It. I learned almost more like tweaking around with like color tools on the internet than I have, like reading a blog post about color theory.

[00:15:03] And I felt like there was some hybrid of it that I couldn't get, like building on teachable or just recording a bunch of videos and, you know, putting 'em wherever that I hoped would make the, like the learning journey, a little. More, it's kind of like a bit, the egghead idea of like, let's make it short to the point and respect the time of the person learning.

[00:15:29] I, I think that you can learn a lot more with one really nicely done example with some knobs you can tweak. Because you know, I get to pull as the learner, I get to adjust the knobs. I get to look at the things that I don't understand and be like, well, what does that change? And move a slider one way and watches like this.

[00:15:46] graph changes and.

[00:15:47] And teaches you something. And some of the knobs I can ignore in a video, I feel like you have to watch every single one of the knobs be turned and four out of the five knobs. I already knew what they did. And by the time I get to the fifth, I'm bored of the video. So I think in that regard it puts you in control a little bit as you're going through.

[00:16:05] And I didn't feel like I could get like a super fine grained, Controller like a handle on that, unless I did it myself, which is, you know, like

[00:16:15] Joel: It gives you just the full control and. Right. Well, I mean, you can, so that, that's one thing because you have the technical capabilities to do it. So I did it cuz I can, it's actually a pretty, pretty solid answer in general, but then you get complete control and you're able to design something more, more related to your customers and the vision you have of teaching the

[00:16:31] Kyle: Yeah, definitely. That sums it up pretty well.

Surprising challenges for building platform

[00:16:33] Joel: Has there been any surprising challenge like technical or otherwise as you've built your platform and delivered it that you've run into or has it all been pretty ordinary for you?

[00:16:42] Kyle: Technical challenge. I don't think I've run into anything too. Like surprising. There have been small challenges and places where I start putting my engineering hat on and go too far in the weeds on how to start building tools. Fix my other tools. I've tried to keep it simple. I knew that I would get distracted if I spent too much time building the platform versus writing the content and so I've definitely cut some corners intentionally knowing that I would get off topic.

[00:17:15] If I spent too much time building platform too little time building content. And,

[00:17:21] Joel: So that's something you've had to be consciously aware of too. I assume, right. Like how do you balance that? What's the balance between, I need to make progress, cuz the course is in, in flight and you're building a platform. So how do you balance that when you sit down to work.

[00:17:33] Kyle: Yeah. When I sit down, I think it helps me that a lot of the content I'm building is like very invigorating, like technical work.

[00:17:42] Like the examples I'm trying to build are. Are fun interactions that sometimes are like kind of math heavy and that engages my brain the same way building a platform would.

[00:17:50] And,

[00:17:51] Yeah I definitely spend a lot more time building content now. I wanted to get the platform just to a point of saying, let's somebody pay for it, log in, track their progress and click next, next, next, and go all the way through. And I achieved that. And then. Have really put minimal effort back into flushing out some pieces of the course that I would really like to, I'd love to go like design a nice splashy landing page for each module and some fun, cool icons that animate and go with it.

[00:18:19] That's what my brain wants to work on, but I don't think that's the most important part. And

[00:18:25] Joel: Just by the nature of the content, it sounds like you're scratching some of your brain's desires by cuz it's

[00:18:30] Kyle: Yeah. Yeah.

platform features that you would love to have

[00:18:32] Joel: What are some of the, you know, like thinking about just platform features that you would love to have what would you add to it?

[00:18:38] If you could snap your fingers today?

[00:18:39] Kyle: I would love to have a lot of really great interactive courses. I've followed have like good embedded programming inside it with like little exercises because the nature of the stuff I'm teaching isn't too closely related to that. I haven't bothered

[00:18:53] Joel: needed it.

[00:18:54] Kyle: Yeah.

[00:18:55] I think I could have benefited from it in some places, but I've also tried to like, keep the foundational goal.

[00:19:01] Like, you know, a lot of these people coming in here, won't be people that are writing code or wanna know how to write code. They may tangentially glance off the surface of like some HTL and CSS, developing websites and stuff, or. Interacting with web developers, but it's not everyone though. I think exposing people to that could still be very powerful.

[00:19:22] So I would've loved to have some good tooling. If there was something I could just install that got a lot of that done, where I could have a program.

[00:19:31] Joel: So not to spoil it, but you should check out sand pack

[00:19:34] Kyle: Yeah, I've started looking and yeah, I,

[00:19:38] Joel: not to ruin your weekend, but.

[00:19:39] Kyle: yeah. Yeah. That's the thing it's like, I couldn't look too close because I knew like, oh brother, I'm gonna I'm gonna spend another weekend building tool, not

[00:19:47] Joel: Sand pack is from the people that make code sandbox. And it's a, an embedded code tool that you can kind of pop into these sorts of things. And it's pretty cool just for anybody that was curious about that one, but it is a rabbit hole. It isn't a snap your fingers, but it is very cool.

[00:19:59] Kyle: Yeah. Right, right. Yeah.

What technologically went into building the course

[00:20:01] Joel: What is the tech stack?

[00:20:02] How did you build this? What went into like tech technologically speaking? What has gone into building, building your.

[00:20:08] Kyle: I would say the secret sauce was, I mean, MDX, I feel like is the most important piece. I can have markdown content. That's pretty easy to author where I can drop in react components. I want and write whatever react I want to drop in. Which is really great. And I've been able to do some really nice.

[00:20:28] Nice things that make it really easy to author. Great examples thing, render things side by side, render things that can animator and that helps me like kind of build it fast and make a lot of these examples. I feel like the other key piece that makes it made it possible. I saw like super base early on, was catching some eyes and it looked like it delivered a lot of things that I wanted. Which was basically really easy authentication and gated content and a database managed for me. And, Yeah.

[00:21:02] so that I think I got like a super base instant set up in like a couple hours and had an app I could log into. And I was like, great. That was one of the biggest pieces I needed.

[00:21:11] Joel: It's a wonderful

[00:21:12] Kyle: Handles a lot of that for me.

[00:21:13] It is, it I've been really impressed and have started to become this evangelist for it. When I see people need help on Twitter, I'm like, let me tell you.

[00:21:20] Joel: product, actually. Yeah. Yeah, it's really good.

[00:21:21] Kyle: And yeah,

[00:21:22] Joel: Are you using any sort of no code de visual kind of programming tools to run any of this?

[00:21:27] Kyle: not right now. No,

[00:21:29] I, yeah.

[00:21:30] I've considered some kind of like no coding tools to build some like tooling for me. Like maybe hooking up some like feedback gathering or. Potentially like managing some like of a, the customer businessy type stuff, but nothing to help, like actually develop the course yet.

[00:21:47] Joel: I think the closest I saw when I went through it and purchased maybe like gum road, I guess, where you're going in there is for like this actual sales component.

[00:21:55] Kyle: that would count

[00:21:56] Joel: It wasn't like a direct Stripe integration or something, and it seemed like it would be pretty smooth

[00:22:00] Kyle: Yeah, no.

[00:22:01] Joel: it take hours instead of days to, to implement.

[00:22:03] Kyle: Yeah. that's true. You could probably consider that. Yeah. The payment processing that's another important piece. I actually spent a while waffling on that.

[00:22:10] Joel: And you can go a lot of different directions too and varied complexity, right. When you wanted to start going down that road.

[00:22:16] Kyle: Yeah.

[00:22:17] Yeah. I started with Stripe and ended up migrating to gum road to allay the tax burden and. Just, you know, be done with it, but definitely went down some rabbit holes there and I'm hoping that I don't have to go out on them again.

[00:22:31] Joel: Well, Kyle, I gotta say I'm your target audience. I've really enjoyed it. I've actually learned and spent a little bit of time with the course and learned a lot. And I really appreciate you putting it together and taking the time out to chat with me today. Thank you so much.

[00:22:42] Kyle: You bet. Thanks. Appreciate that a lot. It's been a pleasure talking with you.

[00:22:46] Joel: Cheers.

Lets work together on your strategy to design, produce, and sell your course online.

You're an expert with an idea for a course you'd like to sell, but don't know where to start.

You've got a full internet of options for designing and selling your course.

Narrow down your options and get on the right path to successfully selling your course.

Get direct expert feedback on your course idea by entering your email below.

Subscribe Form image

There's no obligation. This isn't a sales pitch. We respect your privacy. Unsubscribe at any time.