Username:
Password:
FileMaker Pro 10: Intermediate Tutorials

Interface Design / Field Outlines pt. 2

Subtitles of the Movie

So it looks pretty good but I actually chose the wrong color here. I don't want these to be the same. This should have been a different color here. So what, I've got a problem here, I've got to fix the top one. It's the second one from the bottom on the second column. So, you know, mistakes happen. We'll just come in here, go to our Line Color and choose the second one from the bottom. Now, that gives a lot better difference here and you can see how this represents the top. We can also see that the line's not sneaking out, looking out from the edge here and there's not any more from here, so this is actually the perfect length. Once we've got that perfect, then we can duplicate this. We want to duplicate that object; 123456, move it down until it gets to the bottom and then on this one, we're going to choose the third from the bottom. So now when we go to Browse Mode, we have a pretty good-looking interface; darker, lighter and in between on the sides. And I'm going to go back to the first record so we can see what it's looking like and you can see that the text is actually up here towards the top of the field and I don't really like that. Especially if you decide for cross-platform reasons to make this field a little bit bigger because on the Mac, the fonts are a little bit smaller. So typically what I do is I make it a little bit bigger, maybe a couple pixels bigger on the Macintosh if I'm designing there, so when I go over to Windows, the descenders don't get cut off. But when you do that, when we move this stuff down, I'm just kind of getting this all to kind of perfect here. In fact, I'll spend some time here and make that a capital C there. As we do that, you see that it looks more at the top here. I want it to be right in the middle. So we're going to go into Layout Mode and this is something I always do for cross-platform considerations. I come up here, go to format, I align text to the center vertically, not horizontally, vertically. You can see how it's jumped down there in the middle. It's going to look much better and then I don't want everything crammed up against the left side. I want it to be in a little bit. So we can go into our format and into our text and we can hit paragraph and if it doesn't say pixels here, you can cancel this and change it right here and then come back. We're going to type in two pixels here, just for the left indent and you see how it's starting to look really nice. So we'll go back to Browse Mode. See how it's floating right there in the middle? It just looks really great. So we're going to do this once and never have to do this again. So if we get it right the first time, it's going to make everything look very professional. So here's a good time to talk about colors. We have only really one color here. We will get more but you don't want to overwhelm the user with so many colors. The human mind can only handle a handful of colors at once and those colors should really attract people to important things and this is eventually going to say what view we're in. And this'll be the other views here and when we click on this, this'll turn blue and this one will turn gray. We want to use color to attract people. If you look at the interface, you can even see on FileMaker there's not a lot of color except where you want to attract people; over here, there's some on these buttons, there's on the scrollbar. Attract them to what's important. Otherwise, use neutral colors like black, white and gray. And you can use those very well. You can actually, you can see how we have a white background on our field and it's very important to have that because that's what people are used to. Black text on white background. Do what people are used to. Don't put a black background with white text. It's hard to read. I mean, there are reasons, exceptions to every rule, but in general just follow what people are used to and it's going to be much easier. They're going to go oh, that's where I enter information. It's just obvious right now. So don't worry about that there's not a ton of color on here. Most good interfaces don't have a ton of color. They use it wisely. Another thing I want to do is when we click in here, I want it to select all the contents. So we'll go into layout Mode again and we'll click on this and we'll go up to Format, Field Control, Behavior. Select Entire Contents. We'll see what that does. You'll see as soon as we go into this field, it highlights everything and we can start typing over it. Somebody can click again and put their cursor in there, but I kind of like that feature and I want it to be on every single one so I might as well set it up on my original fields so that everything that's duplicated off this will have the same characteristics. So let's go into Layout Mode again. We'll move this field up here, right about here. We can always change this location. And I'm going to duplicate it a whole bunch of times. So we'll come up here and duplicate once, 123456, there we go. Move it down a little bit. Get it just in the right spot and then we'll keep duplicating. I'll use the keyboard command here. And just put a whole bunch of these on there real quick and the idea here is don't worry if you have too many. We're just going to come through here and go OK, this one should be name first. There we go. Click OK. Change the title to First Name. Go to the next one, change that to name last, click OK and that should be Last Name. So your job, your homework is to go through so I don't have to show you this tedious task and change each one of these fields for all the billing fields and then put next to them all the shipping fields. So once you're done with all the billings, duplicate this whole thing over here, line it up and then change them all to the billing versions. And so do that offline and I will as well so when we come back, you'll see this all completed here.

Tutorial Information

Course: FileMaker Pro 10: Intermediate
Author: John Mark Osborne
SKU: 33926
ISBN: 1-935320-19-X
Release Date: 2009-01-05
Duration: 15 hrs / 177 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 81,350 Video Tutorials (20,800 free)
  • Video Available as Flash or QuickTime
  • Over 782 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available