Material design is useful for its simplicity and tools available in both the design and developer space, but every project requires its own research and material design might not be a good fit for the project or your client. Learn how to perform design research, starting by discovering some inspirational tools.
- [Instructor] Although you have assets ready to be used for Framer, I want to spend a few videos to introduce my process of research before using a specific design or style for a project. Personally, I really like material designed for its simplicity and tools available in both the design and developer space. But every project requires its own research and material design might not be a good fit for other projects or your client. So let's do some of that design research together and start with inspirational tools available to us.
The first one I always go to is Pinterest. If you don't have an account with Pinterest, feel free to create one and then follow along. But what I do when I go to Pinterest, depending on the type of projects that I'm doing, I will do a search for web application first, always to kind of get some feeling of where the design or the UI or the UX interfaces are going and then I'll be more specific, so if I'm creating a CRM like what we're doing, I will do more research around CRM specific designs.
So I'll start with CRM and then I'll see, okay sometimes it's not really specific to mobile or design so let's go and do more specific research. So CRM design or CRM UI will give you something that's more specific to what you're looking. When I see things that really are appealing to me, then I will click on it to kind of see a little bit more and then save it to a board. So that's kind of the research that I do with Pinterest. You can go even deeper, so you can go on designs, you can even go on colors, to see if anything will come up.
But first start at the top layer, so CRM. If nothing comes up, then you can go deep into the colors, to the UI, to specific even functions that you want to have in your CRM and I'll give you an example. In our CRM we want to have a specific contacts, so CRM contacts, and then you will see something that looks more like what we're looking for. So this is a design that has been done around contacts. Maybe a good idea to do it that way. If you like it, then you can save it to your board.
Another thing that we could do is do CRM companies and see if anything comes up. And in this case it doesn't really show anything that's relevant to our research, but you could find something that's more relevant. So this is how I do my research initially in Pinterest and I create a big board with tons and tons of references. So when you start with your research, don't block yourself with anything, just grab anything that really is appealing to you and then put it on the board and then start filtering down to what specifically you want to do.
The second tool that I use to do that kind of research is Muzli which is an extension that you can install on Chrome, so if you don't have it installed, you go to Muzli Chrome, and then go to the Chrome Web Store, and install the Muzli extension. So what that will do is, whenever you open a new tab, Muzli starts its screen of inspirational content. And you can also create a new tab by just simply clicking on the M extension here.
So what does that tool provide us is basically a good reference of all the websites that are design related. So you can actually do searches inside of Muzli, so for example if we do the CRM and then click on Muzli, it's going to provide us with a lot of results related to the key word CRM. And what's really cool about Muzli is that it goes through all these different resources to find content that we're searching for so even places where you wouldn't think of researching, such as Hacker News for design stuff, I wouldn't think about that, but it does reference it all for you and offers a lot of good...
For example here we have a lot more stuff than Pinterest. So these are the research tools that I use. So the last thing I want to show you before we move on is the actual design that I've done for this course. So go into your exercise files. Go into resources. And scroll all the way down to CRM and you'll see we have an Affinity Design, an EPS, a PDF, a PSD. So if you want to use any of those, if you have Affinity Design installed this is where I actually designed the CRM.
You can use any of those. So in this case, I have a PDF open because I think this is what most people will use and this is the design for the CRM that we're going to use to build a prototype and in fact the same design that we'll use to build, in another course, the actual application. So if you take a look, this is material design. I have a lot of colors that are greenish to follow a lot of the LinkedIn colors we have a black, bluish black here, and then if you scroll up you can click on the add contact view and see some of the designs that I've done for that particular prototype.
The next screen is the company list and the last one is the detail list. So this is what we're going to use and all the assets are built from this particular design to build our prototype. So these are great ways to find inspiration and this is the official inspiration for this particular prototype, so let's move on!
- Researching UI colors, styles, and fonts
- Using assets available in Framer
- Creating views
- Adding navigation
- Using classes and loops
- Importing a module to extend Framer
- Creating inputs
- Adding a detail view
- Adding final interactions
- Animating a popup
- Animating a function