Tim Draper walks through building interactive mobile mockups in InVision for landing pages. The session covers flat design colors, typography that matches your brand, and exporting screenshots with clear calls-to-action and social links.
Chapters
Along with colors, so nowadays the whole craze behind the color is to have flat. Do you guys know what flat colors are? It's pretty much just no shadows, nothing. It's just plain. And it looks really clean. And some resources I use are called flaticonpicker.com and also flatiui.com. Do you mind going on there real quick?
Yeah.
Yeah, so if you go on that site, You think of what color you want, and then it gives you a whole palette of flat colors you can use. And then from there, you click on it, and it gives you a hex code that you can then use in Photoshop or Illustrator or whatever. Yep, that's what it looks like.
And then let's say we pick this. It tells you— oh, OK. It's just like a paintball.
Yeah.
Huh.
That's cool. Let's see if it— yeah, and then this is the Adobe color picker, so you can pick out any color that you want, and it tells you the complementary and tertiary colors for it. What's the difference between complementary and tertiary? So complementary is, on the color wheel, it's generally like, On opposite sides, and then the third color is, I don't know how they mathematically figure it out, but it's like a third color that falls in the same hue and vibrance. I couldn't tell you how they exactly figure it out, but here, so here's the complementary one. See, it's right across the color wheel from each other, and then the triad one is like—
Right here.
It's kind of like in a V pattern, like at the different sides of the color wheel. But complementary is just back and forth, and then the other side, I don't know how they actually figured it out, but it's the third, the triangle type of thing. So that's a good tool. And then, I'm flying through this just for time. Style should suit the company. So, this is the University of California's logo. It feels authoritative, it's an emblem, they can put it on stuff. And then they did a redesign recently where they changed it to this. Where it tried to be more of like what you were talking about, like a flat icon, but it also lost the authority of it, and people didn't really take well to it. They actually boycotted it. I mean, it's not terrible, but it also doesn't really give me University of California. The U is kinda there, but it's hard to see, and the C also is kind of not really there. They could've done a better job. And it doesn't really fit like a high-class university feel to me. So this is also another one. These are 2 different food things. They're both food and wine festivals. Does anyone know what this top one says? Epcot?
Epcot?
Would you say Epcot? I think it is kind of Epcot. I don't really remember what it was because I made this presentation a while ago. But the point being is that you need to make sure that your brand is Easy to read. So, the top one is confusing. There's 3 different fonts going on. The images are not clear at all on the lettering, compared to this one where they have— you can see that this is a fork. It's also bottles of wine. It's a great example of a good logo. And it's got the same font on all 3 levels. So, you want to make sure that your typography is consistent and readable. That EPCOT thing just bothers me so much. So summary is balance, size matters, clever use of color, design that suits your company, and typography. And then usually we make logos, but we're not gonna go into that today. Now we're gonna talk about product screenshots.
Yeah, so obviously this is a part of your website where you show— yeah, you show, not tell. You show how your product works. And for this, I recommend, like I mentioned earlier, using InVision. And I just wanna show you guys what it looks like real quick.
Has anyone here used InVision before or knows what it is?
Yeah, we've done our first prototyping.
Yeah, it's a rapid prototyping tool that lets you take screenshots and string them together in a way that it makes it look like a real app. And then you can actually download it onto your phone. So if you go to an investor and you don't actually have something made yet, you can show them your product and have them understand it without actually having the product built.
Yeah, InVision. So this is what it looks like.
Yeah, it's called invision.com.
I think just for mobile apps. I think you can do web pages as well.
Yeah, you can do web pages as well.
So my designer used this. And what he did is he uploaded every single screen for our app here. And say you want to edit something. So you go here. And you can see what it looks like, right? It looks and feels just like a real app. Here, you can set different points for when you click and have it connect to a different screen. So here, my designer had it link up to— let's see— the navigation bar. Right? So let's go here. And bam. It takes me to the navigation bar. And you could do different transitions as well. And like I said, you can click around. It feels just like the real thing. And then from here, you can also just take a screenshot of it and put it on your website. Also, another way you can make a screenshot is— a lot of times there's templates online. So say you're building an iPhone app. They essentially have this thing here. It looks like this. What you do is you click on this right here. It takes you to this screen. And then from here, I can take this screenshot that my designer gave me. Drag it on over, put it there, press Save, and then there it is. I just saved this as a PNG and then added it to my website.
Is this sort of printable?
No.
That's what our designer uses for the nav. And that worked pretty well. I think it gave a bit more flexibility than InVision.
Oh, really? OK.
It's called Principle.
Is it free?
I'm not sure. I think so. I have to check.
OK.
You guys can also try out Adobe. They just released last year towards the end Adobe XD. And it puts InVision as well as Sketch together. And it's super cool. Like designing apps on there. You can hook it up to your phone to the computer, and whatever changes you make on the actual computer will reflect on the phone right away, so you can play around with the designs immediately.
Right.
So yeah, once you save that, there it is. And if you guys want some— if you guys want that Photoshop file that allows you to do that, I can send it to you guys. Talk to me after.
Cool.
So, this is, this would be an example of a mockup that someone could create in InVision, and then you could throw it right on your landing page. You've got your headline, your supporting text, and then what this is missing is some sort of call to action. Remember, that's the most important part of your landing page. So, adding social media buttons, easy ways to allow potential customers to connect with your brand. Underneath your call to action, you can just put Facebook, Twitter, Pinterest, Tumblr, whatever you got, so that potential customers, in addition to signing up to your brand, can also like and follow you for updates from your social media. SEO, we're gonna go to, into a little bit in the growth hacking thing. But are you guys— is everyone pretty familiar with SEO and what it is? We have the lecture from the master.
Yeah, we can call on him.
It's funny, I actually deleted that because you guys had it here, but we can go into it.
No, no, no.
Oh.
He's talking about you. You guys are funny.
Tooting your own horn.
Yep. And then, so that's the end of the landing page thing.
