Introducing the Project2:36 with Nick Pettit
In this course, we're going to design a photo viewing app. Users have a bunch of files stored on a cloud service, but the company wants to create a new experience where users can view just their photos in a nice gallery and upload new photos.
- Material Design UI Kit for Adobe XD - This compressed zip file contains a UI kit for Google Material Design created in Adobe XD. It also includes the initial wireframe created in Adobe XD as well as sample photos that are used in the project.
In this course, 0:00 we're going to design a photo viewing app, the one that I described from earlier. 0:01 Users have a bunch of files stored on a cloud service, 0:06 but the company wants to create a new experience. 0:09 Where users can view just their photos in a nice gallery and upload new photos. 0:12 We'll create the photo app using Google's Material Design system, and 0:18 focus on creating the web experience for mobile devices. 0:22 That alone is going to keep us pretty busy because we'll be learning 0:26 a design system at the same time. 0:29 Although, in a production environment, 0:31 you'd probably need to create the tablet and desktop experiences as well. 0:33 There are many other popular design systems like the Apple Human Interface 0:37 guidelines, Microsoft Fluent, and more. 0:41 But we're just going to focus on one design system because, 0:44 as you'll see shortly, design systems tend to be extremely comprehensive. 0:47 For links to other design systems and 0:52 resources, check out the notes associated with this video. 0:54 To design things in this course, I'm going to use Adobe XD. 0:58 However, you should feel free to use whatever design tool you'd like 1:02 to follow along. 1:06 And that even includes paper and a writing utensil, let's take a look. 1:07 To help get us started, I've created a basic wire frame of the app 1:12 that's not specific to any particular design system. 1:17 A lot of things about this will change, there might be a different layout, 1:20 different colors, button styles, design patterns, and so forth. 1:23 But this demonstrates the basic concepts and features. 1:26 There's a gallery of photos and the middle. 1:30 Users can use the sidebar to filter out which ones they're looking at and 1:33 up here they can upload new photos. 1:37 This is a good starting point because, in a larger company, 1:40 you might receive some early drafts like this from a coworker or another team. 1:43 That's based on something like meeting notes or user research. 1:47 A design system to help bring some cohesion to the user experience. 1:52 Before we dive in, there's a few more things you should know. 1:57 First, we're leaving out a lot of platforms here, 2:00 we're not making an Android app or a Mac OS app, for example. 2:03 And, secondly, 2:08 while I'm going to do my best to follow the rules of material design. 2:09 It's extremely comprehensive, and I may break some rules by mistake, or 2:13 the design system could change after this course is recorded. 2:18 In most cases, that's fine. 2:21 While you should do your best to follow the rules of design systems. 2:23 You also shouldn't let it stop you completely from making your own decisions. 2:27 You know the experience you're trying to create better than anyone else. 2:31
You need to sign up for Treehouse in order to download course files.Sign up