• Annonces

    • Olivier Devriese

      Nouveauté du forum, les blogs !   30/04/2016

      Envie de créer votre blog FileMaker ? Ca ne peut pas être plus simple qu'avec cette nouvelle section du site FM Source qui est désormais plus qu'un simple forum mais un vrai centre de ressource. Vous pouvez aussi facilement l'alimenter en le liant avec le flux RSS d'un autre blog que vous possédez déjà.
  • billets
    10
  • commentaire
    0
  • vues
    623

Billets dans ce blog

Designing FileMaker

Previously, I wrote about how to convert your solution away from the Classic theme. In this part, I discuss five FileMaker 14-exclusive changes you might want to make while updating your solution. These interface features will add professionalism, usability, and—dare I say?— “glory” to your solutions.

Converting From Classic Glory

Read Part 1

Now that you’ve decided to update your layouts to a modern theme in FileMaker, there are a few things you might want to do at the same time, that don’t require any major changes to your layouts. Since you’re already touching every layout in your solution, why not take advantage of some of the new features in FileMaker 14? It makes sense to get the most bang for your buck. Here are…drumroll please…Five Things New in FileMaker 14 That Will Improve Your Interfaces (in no particular order):

1. Hidden Scroll Bars

Readers of this blog know I like scrollbars! I’ve written about them before, probably because they can be one of the most distinctive elements of a layout, and in FileMaker there is very little about scrollbars that can be styled. So choosing the look of the scrollbars is a major portion of deciding on a new theme. And no other theme’s scrollbar is exactly like the Classic scrollbar style. So finding something to replace it with is a bit of a challenge. Here is the layout after switching from Classic to a custom theme based on Cool:

Before

Well, instead of styling the scrollbar, how about hiding it altogether? This new feature is an option on fields and portals, and allows you to only show a scrollbar slider when the user’s cursor is actually scrolling. It’s the same way that scrolling works inside the FileMaker window itself—you only see a scrollbar slider when you activate the scroll wheel or perform a scrolling gesture on the mouse. This is the standard way scrolling is done on the Mac, in fact.

Limitation: Make sure that users have scrolling capability on their mice, or this feature won’t work.

2. Button Bar

The new button bar object is awesome! Buttons are one of the most complex objects to style, with all the different parts and states they can have. The button bar drastically cuts down on the number of objects you need to deal with across potentially many layouts, and can even be conditionally or dynamically populated if you want. (Here’s an article from Digital Fusion describing how to create an abstracted navigation system using the button bar object.)

Now, rather than managing a row of individual button objects when creating a navigation bar, for instance, you can use a button bar instead. A single object can take the place of five or six separate objects. Be sure to go through all the button bar parts and states and make sure they are set how you want—There are a lot of them and the format painter transfers hardly any styles from a button object to a button bar object. There may be inactive, in focus and hover states inherited from the theme that you probably will want to change to match the previous behaviour, so you’ll have to do some work setting up the first button bar.

You can also mix a button bar with a regular button. In these examples, the Menu button is its own button, placed beside the button bar.

Limitation: You can dynamically set a button label, but you can’t conditionally specify an icon. Also, all the buttons in the button bar get the same width, no matter how long or short their label might be. So you have to set the button width to accommodate the longest button label, including some white space on either side. This might mean that short labels (such as the “Print” button below) end up with more space than before. So make sure you are okay with buttons possibly being more spread out, and have the space for them if you switch out individual buttons for the button bar.

3. Top Navigation Part

The new top header navigation part keeps the most important objects (like primary navigation) accessible at the top, where users need it most. It helps prevent users from getting lost, and provides them a quick way of getting around with a minimum of window scrolling. Don’t forget to check the style for the top navigation part, it may have a fill or border that you may want to change or remove to match your layout.

Limitation: Any background colour you set for a top navigation part stretches across the whole layout, even the inactive part (seen when the user stretches the window to the right). However, when objects on it are anchored to the top and left, the body background colour ends at the edge of the active part of the layout. When you pull the body part down with the mouse, a gray (or default layout background-coloured) gap opens up between the top navigation and the body part.

Top Navigation Gap

You can mitigate this by anchoring objects in the header to stretch between the left and right edges of the window. Or, create a rectangle the exact size of your top navigation part and send it to the back, and then remove any background fill colour on the top navigation part. This way, your top navigation will appear to end at the edge of the layout when objects are anchored to the top left, just like the body part.

Neat Edge

White rectangle is placed at the back of the top navigation part

One final alternative is to anchor the body objects to the middle. In this case, the white body background fills the screen and no “inactive” colour is seen.

Centered

Body objects are anchored to the center of the layout

4. Placeholder Text

Who hasn’t wanted to dispense with field labels at times, especially on obvious fields, such as addresses? The user needs a text label to guide them when they’re entering data, but once a record has been filled out, it’s clear where the Street Name, City, Prov/State, and Zip Code should go. You don’t really need to devote layout space to them forever and ever. And yet, creating inline placeholder text has been too much work to maintain in the past, so I often didn’t bother with it, except when really necessary.

Now, placeholder text is an option on the field itself. You can have field descriptors show up inside an empty field without creating a separate text object. You can even set this text dynamically by calculation if you want.

Placeholder text

Placeholder text is also helpful in cases where you want to guide the user to a field, without cluttering the layout with field borders, which can be distracting when there is a lot of data. Placeholder text subtly cues the user to the text entry location, without disrupting the layout once all the data has been entered.

Limitation: Don’t do away with field labels completely. You’ll still likely need some field labels under certain circumstances, such as multiple phone numbers (e.g. home, office, mobile), or numerical data which needs to be identified to be understood.

After

5. Custom Theme Colours

This is such a useful update to the colour palette! You can now drag a colour to the theme colours grid, located directly below the hex picker colour swatch. FileMaker will store the colour, and automatically create both a lighter and darker shade. This is a super easy way to create a range of hues to represent different button states (e.g. lighter on hover, darker when pressed) with literally the click of a button. You can reorder the colours by dragging the swatches around the colour grid.

Limitation: You can’t directly remove a colour from the colour grid. You can replace an existing colour by dragging a new colour onto it, or you can drag white onto it to “clear” it (although you’ll get gray as the top colour as a result).

Custom Theme Palette

Conclusion

Using or implementing one or more of these new features will definitely improve your solutions and make them more usable and polished. Whether they’ll make them glorious or not—well, that will be up to you!


Resources

New in 14:

Hidden scroll bar feature
https://community.filemaker.com/docs/DOC-6266

Button bar
https://community.filemaker.com/docs/DOC-6263

Navigation parts
https://community.filemaker.com/docs/DOC-6262

Placeholder text
https://community.filemaker.com/docs/DOC-6265

Custom theme colours
http://help.filemaker.com/app/answers/detail/a_id/14417


Afficher la totalité du billet

Designing FileMaker

Over time, one collects bits and pieces of knowledge about different corners of development. Features that are a little more difficult to discover, or shortcuts that can help out in a pinch. Some of these nuggets can make developing faster, easier, or more accurate. Here are five helpful features you may or may not already know about, but which I’m thankful we have available.

5 Things

1. Multiple Inspector palettes

I think we can all agree that the Inspector palette is indispensable. But did you know you can create more than one Inspector window at a time? It’s found in Layout mode under View > New Inspector. I sometimes do this to cut down on the amount of switching between tabs when creating styles, for instance. You can keep one Inspector on the Appearance tab so you can modify fill, line and other attributes, and the other on the Styles tab, to easily manage and create styles as you go. There are also lots of other situations where having multiple Inspectors is useful. You can even make one of them quite small and tuck it away in a corner. If you find yourself switching panels in the Inspector a lot, it might be easier to open a new Inspector instead.

wpid-MultipleInspectors-2015-11-3-16-00.png

2. Change measurement units

Let’s stay with the Inspector for a moment. Have you been stuck designing in inches because you didn’t know you could change the measurement units? You can change them by clicking on the unit label in the Position area. I’m not sure who showed this to me, and I’ve known this forever, but it’s not necessarily obvious to everyone. I often change units when switching between designing interfaces (where I generally use points), and designing reports (where I sometimes use inches or centimetres to measure printed pages).

wpid-ChangeUnits-2015-11-3-16-00.png

The other way to change units is to show the Ruler ( View > Rulers) and click on the units at the origin.

Change Units Ruler 2

 

3. Shorten merge fields using Position

When you place a merge field on a layout, the length of the field name (including any relationship) determines the space it takes up on the layout. However, in some cases the data it is intended to contain is quite a lot shorter. I sometimes have long relationship names, so this can be an issue. If you simply try and drag the handle to make it shorter, the text wraps to the next line, possibly throwing off the baseline alignment or encroaching on nearby objects such as portal rows or tab panels.

wpid-MergeWrap-2015-11-3-16-00.png

However, you can shorten a merge field using the Position area of the Inspector. Simply type in the desired width, and—ta-da! A short merge field, no matter how long its name happens to be.

wpid-MergeShort-2015-11-3-16-00.png

4. Show Sample Data

Sometimes you want to see how record data will look while you’re still designing in Layout mode. Rather than switching back and forth between Layout and Browse, there is an option to show data from your records in Layout mode (View > Show > Sample Data). This will show you data in Layout mode from the record you’re on in Browse mode. If there is no data to show, then the fields are filled with lorem ipsum text. You might want to navigate to a record that has lots of text first in order to see how it will look as you adjust field lengths and so on. It’s a useful little feature that I sometimes forget about, but does come in handy from time to time.

wpid-ShowSampleData-2015-11-3-16-00.png

5. Hiding/showing sub summary parts on a single layout

Like that super-cool minimalist coffee table that opens up to reveal a personal lap pool underneath (just kidding!), interface elements that do double duty are always welcome. Here, we can take advantage of the fact that sub-summary parts on a layout only show when the data is sorted. That means we can have as many sub-summary parts as we want, and they will only show if the user sorts the data. So one layout can have multiple purposes, cutting down on overhead.

wpid-SortbyClient-2015-11-3-16-00.png

wpid-SortbyPayment-2015-11-3-16-00.png

Conclusion

I hope you found one or two useful things here to help you solve a problem or make your development a bit easier. If you have any favourite hidden features that you’d like to share with everyone, please leave a comment below!


Afficher la totalité du billet

Designing FileMaker

Many of us who have been working in FileMaker for some time have solutions built on the Classic Theme. “Classic” sounds good, doesn’t it? Who wouldn’t want to build something “Classic?” Well, fellow FileMaker developers, in this case we do want to clear out that old classic, Classic Theme. In this article, find out about a 2-step process to update the meat of your layouts to something leaner, faster, and better-looking than the good old Classic solution you have today.

wpid-ConvertingFromClassic_Guts-2015-08-6-18-02.png

The concept of a theme was introduced in FileMaker 12, providing developers with a coordinated set of layout objects. Each theme is a collection of styles that can be applied to objects, specifying the fill, line, font, padding, and other attributes for each type of object on a layout, including its various potential states (active, inactive, hover, pressed, in focus, etc). Some objects are more complex and have more attributes than others. Lines are fairly simple, while button bars have many different components you can customize. (You can read a previous article about themes and styles here.) Styles, once defined, can be reused for similar objects across layouts in a solution that share the same theme. This saves both space in the solution and developer effort in specifying attributes for objects.

FileMaker 12 Starter Solution

FileMaker 12 Layout Mode

 

FileMaker 13 added the ability to save your own custom styles and themes based on an existing theme, as well as some theme management tools, such as the ability to import a theme into another file. It also increased the number of attributes exposed in the Inspector, such as inner/outer shadows and text padding.

FileMaker 13 Layout Inspector

FileMaker 13 Layout Mode

There were some minor updates to themes in FileMaker 14, such as the new Minimalist themes. A number of FileMaker 13 themes were deprecated (although any layouts built on those themes will continue to work), and some new ones were added. Finally, the Classic theme was removed as an option for new layouts, although any layouts created in Classic from previous versions remain.

What’s up with Classic?

Once themes were introduced, any layouts that were created in FileMaker 11 or earlier were labeled “Classic,” to differentiate them from the new, optimized themes provided by FileMaker. This doesn’t sound too bad, except that Classic comes with a number of inherent drawbacks, which are only magnified with each new version of FileMaker.

Because the Classic theme predated FileMaker’s current themes and styles feature, the only styles it contains are “default.” Chances are that you changed line attributes, fonts and colours in your layouts from the defaults in Classic, so those objects are likely to have lots of local styling (meaning that objects don’t share any styles, so attributes are defined and stored behind the scenes on an object-by-object basis). This can exact a significant performance penalty, especially in WebDirect.

Speaking of WebDirect, the Classic theme is strongly discouraged as it will not render properly in WebDirect. Some built-in Classic behaviours are simply not supported on the web, and are likely to cause visual or functional problems. Even in FileMaker, Classic has a number of undesirable behaviours you can’t control, such as dimming inactive tab controls and the inactive tab size change.

You can save changes to a style on a Classic-themed layout, but FileMaker 14 will not allow you to save any changes to the Classic theme itself, nor will you find it listed as one of the choices for a theme in FileMaker 14. It will persist in the file if it already exists from a previous version, but you can’t choose it for a new layout in 14. You could customize the Classic layout and save it as a new theme, but because of its inherent drawbacks, that is not recommended either. (FileMaker remembers your base theme in the CSS that runs behind the scenes.)

In short, the Classic theme is meant as a way for you, the developer, to transition to one of the newer, more modern themes.

Choose a new theme

So now that we know why Classic needs to go, what do we do? We may have legacy solutions built entirely on this theme. Personally, I have invested significant time and effort making Classic themed-layouts look good in solutions originally built in FileMaker 12 or earlier. (See below.)

ClassicThemeLayout1

In any case, it’s time to roll up our sleeves and get to work. Don’t worry, though. Here’s a strategy for converting an existing solution away from the Classic Theme, so that you can make the most of what FileMaker has to offer. Once you’re done, you’ll be rewarded with smaller files, faster layouts, and a much easier, organized and more efficient way to build new layouts in the future.

First off, you have a decision to make. You can:

A) keep the sizing the same as what was used in Classic (best if you want to do as little revision as possible to the design of your layouts),
or
B) choose to do a little more work and change to a new theme that has different default field height, scrollbar width, and other size differences.

You should select option A if you want to do as little work as possible to transition away from Classic. In this case, choose one of the Classic Refined themes as your base theme. The default object sizes are the same as those in the Classic theme, so your layouts will undergo minimal changes when you switch themes.

You may, however, want to take the opportunity to redesign and update the look of your solution at the same time as converting, in which case choose one of the other available themes. If you are touching every layout anyway, now is a good time to do a facelift. If you’re planning to do a lot of heavy customization, choose the Minimalist theme. It contains no styles other than the defaults, freeing you from having to remove a lot of stuff you don’t want from the theme later.

When choosing a new theme, pay special attention to the style of the theme’s scrollbar and drop down menu, as these aren’t exposed in the inspector and can’t be changed in FileMaker. Make sure to choose one you like, including the colour of the scrollbar.

Controversy alert: Note that you may be able to tweak the CSS using a tool such as Theme Studio, however this approach is not recommended by FileMaker, as their CSS interpretation could (and likely will) change without notice in the future.

It’s unlikely you’d lose any data as a result, but you could potentially experience FileMaker overwriting, changing, or ignoring your CSS tweaks and ruining your carefully-crafted design. On the other hand, I have heard the argument that CSS is a standard outside of FileMaker’s control so whatever changes they make must comply with CSS rules. Consider yourself warned and proceed at your own risk, knowing that any tweaks you make directly to the CSS are unsupported and not recommended.

One last note about scrollbars: There is a new option to use inline scrollbars in FileMaker 14. This only shows a scrollbar slider on a portal when the user is actually scrolling, which looks very slick and frees you from the issue of how the scrollbars look in a given theme. It does require a scroll wheel or scrolling capability on the user’s mouse, so make sure that your users are equipped appropriately if you choose this option.

ShowScrollBarWhenScrolling

Do the work

Step 1. Create a custom theme layout

  1. Navigate to an existing Classic layout that has most or all of the objects you plan to style on it. Select all the objects on the layout and copy them to the clipboard.
  2. Create a new layout (name it “Theme” or something similar) with the new theme of your choice. I like to delete the header and footer and enlarge the body part so that I have enough space for everything. Paste the copied objects onto the layout.
  3. Select an object and save the changes back to the style, or create a new style (see below) where appropriate. You actually only need to save one object type for each separate style you have, e.g. one main header text, one secondary header text, one default text field, one 2-line text field, one default portal, one default tab, etc. You can delete other copies of similarly-styled objects from the layout. Make sure to specify a “default” for each object type, since that is the style all your Classic objects will inherit. This will lessen the amount of work you’ll have later in selecting objects when you convert your Classic layouts.
  4. Save the changes to the theme, or save it as a new custom theme (I recommend saving it as a new theme so you know definitively that it’s the one you customized). SaveAsNewStyle1

Step 2. Change your existing layouts

  1. Navigate to an existing Classic layout.
  2. Change the theme to your new custom theme. All the objects will now have the theme’s default attributes for their type. This will be perfect for the majority of objects on the layout, but some others will require you to assign them a style.
  3. Before doing anything else, immediately select Edit > Undo Style to preserve any local styling you may have on the layout. Anything that was changed by the theme will change back as a result of this step.
  4. Select each object and make sure it is assigned one of the theme’s styles. If you missed an object and need to create a new style (and you very likely will), then make sure to copy and paste it afterwards to your Theme layout for future reference. You may want to delete any styles that were part of the original theme, that you aren’t using. (In BaseElements, you can find these as an Alert on the Style.)

Watch-outs

  • Name your styles by function, never by colour. It will make it easier to keep track of what is used where, especially if you decide to change colour schemes in the future.
  • Beware of using the Format Painter. Even if the original object has a style, it paints the target object with local styling, which is to be avoided. [Update: Apparently the Format Painter will paste the style to the target object, but you must still save the object to the style after pasting, or it’s considered locally styled. An extra step, but it works.]
  • Make sure you have every object assigned to a Style. You can find locally styled objects using BaseElements or Inspector Pro. In BaseElements, it’s found as a Performance Alert on the object.
  • FileMaker 12 can read but not edit custom themes. So don’t make a custom theme in FileMaker 13 or 14 and then try and edit those layouts in layout mode in FileMaker 12. Because it’s a feature that it doesn’t understand, FileMaker 12 will revert all your changes and your hard work will be lost, even if you reopen it in FileMaker 13 or higher. Ideally, migrate away from FileMaker 12 completely if possible.

One last wish

The only desirable thing that the Classic theme has that the others don’t, is the ability to change the line and fill colour of the scrollbars. I fervently wish for this attribute to be customizable in a future version of FileMaker! (Scrollbars are a big issue for me, clearly.)

Conclusion

Transitioning from Classic to another theme is definitely an investment in time, but you can be confident it’s worth it. Being able to use themes and styles is a huge advantage in any development you do going forward, and you’ll be rewarded by quicker performance and more efficient use of resources for the continuing life of the system. Put on your favourite music to help you push through all the copying, pasting and selecting, and go for it with gusto!

 

Stay tuned for Part 2 of this article: Converting from the Classic Theme – The Glory

 

Additional resources

Here is a collection of resources about themes and styles that you may find useful. The FileMaker Community (DevCon) links require a free membership to access:

Layouts, Themes, and Styles
Andrew Paulsen, DevCon 2015

Real World Theme & Style Planning
Bob Shockey , DevCon 2014

Custom Themes and Styles
Adam Ward, DevCon 2014

WebDirect Under the Hood
Vin Addala, DevCon 2014

Style Picker, Style Editing, and Theme Saving in FileMaker Pro
FileMaker Help

 


Like this? Sign up to get blog updates by email



Afficher la totalité du billet

Designing FileMaker

I had a great time presenting for the first time at DevCon on the Psychology of Interaction Design in Las Vegas. It was FileMaker’s 30th anniversary year, and the 20th DevCon as well.

RoadTrip

I spoke on Thursday to a packed house (standing room only) and people even laughed at my jokes. I’m already thinking about what I should speak about next!

Watch the video of my talk

My life has been consumed lately with preparing presentations (and animating a little car in Keynote), so now it’s back to writing articles for the blog! Stay tuned, and welcome to new subscribers.

Check out the video I made (my first ever!) of my time in Las Vegas.


Afficher la totalité du billet

Designing FileMaker

devcon_feature_graphicI’m pleased to announce that I’ll be speaking at the 2015 FileMaker Developers’ Conference in Las Vegas for the first time, on the psychology of interaction design. In other words, what do we need to know about people in order to design effective applications?

The session will cover aspects of cognition, memory and learning, vision, and user testing, among other things. The goal of the session will be to help you see and correct potential problems in your design, so you can improve the experience for your users.

Click here for the official session description.

I’m looking forward to seeing you there!

[Update: If you missed it, you can watch the video of my talk in the FileMaker Community resources.]

 


Afficher la totalité du billet

Designing FileMaker

Enter for a chance to winIt’s been one year since I published the first article to the blog. (Yay!) Thank you to everyone who has read, shared, liked, followed, commented, submitted articles or shared resources to the blog in its first year. I’m so grateful, because without you, I’d just be talking to myself! And that’s just weird…

I’d love to learn more about my readers (that’s you!) so I’m taking this opportunity to ask if you’d share some of your thoughts with me in this short survey.

As a thank you, once you click “Submit” you’ll be redirected to my Amazon giveaway page to for a chance to win a copy of the Color Design Workbook (open to those in the US only–sorry to everyone in the rest of the world! An extra big thank you if you still fill out the form!).

[UPDATE: The giveaway has ended. Thanks to all who participated!]

 

Want to stay up to date? Sign up to get blog articles by email



Afficher la totalité du billet

Designing FileMaker

The fourth in a series on the basics of visual design for FileMaker. Colour is one of the most important elements of a design. Since vision is our most dominant sense, colour has an enormous impact on the feeling of a design. But it’s easy to overdo colour, so use it wisely! Here are some important facts about designing with colour.

COLOUR-1

When creating a design, choosing colours is one of the most important aesthetic decisions you will make, because it is one of the first things people will notice about it. You have the power to attract or repel users with your use of colour. (I hope you want to attract them, in which case, please read on!) Despite its importance, or maybe because of it, using colour well can be tricky.

My overarching advice is when in doubt, use less colour, not more. It is better to risk looking boring than repellent, and a well-executed monochromatic colour scheme can be very appealing, if subtle. Save pops of colour for where you really need it, like for buttons or warnings. Keep colours consistent throughout your system, unless there is a good reason to change them, in which case this should be obvious to the user with a minimum of explanation.

Colour does not add a pleasant quality to design—it reinforces it. -Pierre Bonnard

1. Perception

Colour doesn’t really exist, except in your head. What you experience as colour is in fact different wavelengths of light hitting the red, green, and blue receptors in your eye and being interpreted by your brain. The range of light we can see is called the visible spectrum. You know it as the colours of the rainbow: red, orange, yellow, green, blue, indigo, and violet. Other spectrums of light exist, like infrared and ultraviolet, but we can’t perceive these with our eyes.

 

Rainbow

We can also perceive black (the absence of all colour) and white (all the colours reflected into the eye at once). As humans, we depend more on our sight than a lot of other mammals, so our eyes have evolved to be very sensitive to colour. Some sources say we can see up to 10 million different gradations of colour.

At the most basic level, colours are divided into light and dark. Red is the next most easily distinguished colour, appearing even in languages that have only three colour words (i.e. light, dark, and red). Languages with four or five colour words will add either green or yellow, and languages with six will add blue.

2. Purpose

The main purposes of colour are to aid in recognition, draw attention, reinforce hierarchy, clarify meaning, and add interest to a design. In marketing, it’s said that the use of colour increases brand recognition by 80%.

Colour makes an object stand out, helping people to notice and remember it better. There should always be an obvious reason for it standing out otherwise users will wonder why. For example, on websites, the sign-up button is often a different colour, encouraging visitors to click on it. In a FileMaker solution, though, you might want to make all your action buttons the same colour, or co-ordinate their colours from a palette you develop.

Buttons

Too much colour can be distracting, as the elements start to compete with one another and the user becomes confused about what they are expected to pay attention to, or try to decipher what each colour means. Because our eyes are so sensitive, a small amount of colour can attract a lot of attention to itself, so it’s best to use colour sparingly.

Too Much Colour

3. Colour models

Backlit monitors like computers and smartphones work with the additive colour model (RGB). Red, green, and blue light rays are emitted from the screen. The various combinations of each of these colours produces the colours we see. It’s called the additive model because when you add all the colours together, they produce white. In FileMaker, we typically specify colours as RGB values, unless we’re producing printed reports where colour accuracy is important.

RGB additive colour model

In contrast, the subtractive model is used to represent colour on paper (like the CMY(K) used in printers). Colours are created by mixing cyan, magenta, and yellow inks. Mixing them all together makes black (sort of, in reality printers add pure black—represented by the K in CMYK). You may be familiar with it as this is where the so-called primary colours red, yellow, and blue (RYB) come from. When we are developing colour palettes, we often use the subtractive model to determine pleasing combinations.

SubtractiveColor.svg

The main practical consideration between the additive and subtractive models is that in the additive model, light is sent directly into your eye, whereas in the subtractive model, light from the environment is reflected to your eye from the page. Because of this, reading from a screen is more tiring than reading on paper. Increasing readability to reduce fatigue is an important consideration because people can spend many hours a day looking at a FileMaker application on a computer screen. Among other things, this means keeping bright colours to a minimum.

4. Colour properties

While colour interpretation happens in our brain, we can still describe the physical properties of any particular wavelength of light. One way is to describe its hue, saturation, and brightness values (known as HSB or sometimes as HSV). The HSB description is based on the additive RGB colour model. You’ll find HSB and RGB adjustment sliders in FileMaker’s colour palette. You can adjust the sliders to develop a range of colours you can use in your design.

HSB Sliders RGB Sliders

Hue refers to the colour’s position (wavelength) on the visible spectrum. We tend to describe hue in terms of the colour’s name (blue, blue-green, red, red-orange, etc.). Saturation refers to the intensity of the colour, or its “chromaticity”; that is, how pure it is (the width of the light wave), or the amount of white added to it. As saturation decreases, colours seem paler or washed-out. As it increases, colours seem more vivid. Brightness refers to how much energy output is received from the source of light (the wave’s amplitude), or how much black is added to it, what we see as the lightness or darkness of a colour. People in general tend to be more attracted to bright colours.

5. Describing colour

In FileMaker, HSB is only one way we can pick colours, there are many options you can choose from. However, I find the HSB or RGB sliders to be the most convenient when I’m developing a colour palette. Although I personally don’t use the actual sliders much, I derive the HSB or RGB values from a sample and then I can dial them into my FileMaker colour palette.

Keep in mind that RGB calibration (which includes HSB) differs from device to device, so colours may look one way on your laptop, but different on someone else’s display. If you’re really concerned about this, then stick to the standard 216 web-safe colours, which are more reliable on different devices. In the majority of cases, it won’t matter too much, so don’t worry about it.

On the web, hexadecimal (“hex”) codes are commonly used to describe an RGB colour. The hex code is simply a way of specifically communicating a particular colour to the computer using a 6-digit code. Because FileMaker themes are written in HTML, they rely on CSS to describe their presentation properties, and so use hex codes to describe colour. You’ll need this if you plan on creating a custom theme. Right now you can’t specify hex codes directly in FileMaker’s colour picker, but it would be nice if you could, as they are fast becoming ubiquitous.

Acorn Palette

6. Colour sampling

FileMaker uses your operating system’s default colour palette. On the Mac, this means you can use the magnifying glass to hover over any item on the screen and sample its colour. In practice, if you want to sample an object that’s not in FileMaker (say, a photo), before you click on the magnifying glass you’ll have to go to FileMaker and then close or move any FileMaker windows out of the way first. Otherwise, as soon as you click on another program, FileMaker—and the colour palette along with it—are hidden.

To get the hex code for any colour, I use Acorn, a Photoshop-like program that includes a colour picker that uses hex values. On the Mac, you can also use the Digital Color Meter program (found in “Utilities”) to find the RGB or hex values. (If you’re not on Mac, here are some other colour sampling tools for different platforms.)

DigitalColorMeter_Hex

Once you’ve sampled or dialed in the colour, you can drag and drop it into a colour swatch (one of the little boxes in the colour palette at the bottom). Because they derive from the OS, these swatches are local to your computer, and transfer across programs. So you can sample them in one program, and they’ll be available to you in FileMaker.

FileMakerColorPicker

7. Colour theory

Colour theory is the study of how colours are perceived by people. In user interface design, the ideal is to create harmonious, pleasing colour combinations, because these attract the user and support learning and remembering.

Colour theory dates back to Leonardo da Vinci. The influential book, “Interaction of Color,” by Josef Albers, is based on the idea that human perceptions of colour change depending on the amount and proximity of other colours. It’s important to experience and experiment with different colour combinations in order to understand how to combine colours effectively. Also considering checking out the “Color Design Workbook” by AdamsMorioka and Terry Stone for a detailed discussion of colour in design.

One of the most widely used colour wheels is the 12 Step Colour Wheel, otherwise known as the Subtractive Artists’ Primary Colours (RYB) wheel. It shows the primary, secondary, and tertiary colours you may have learned in school.

BYR color wheel

When choosing colours for a design, the goal is to create colour harmony. Here are some common types of harmonious colour combinations drawn from the colour wheel (screenshots from Adobe Color CC):

  • Analogous – Colours that are next to each other on the colour wheel. They have similar wavelengths and so tend to go well together, as long as you choose colours with enough contrast. One colour will be a primary or secondary colour, and will tend to dominate the other two.Analogous colour scheme
  • Complementary – Two colours that are directly opposite on the colour wheel. These colour combinations are exciting as they have the most contrast possible. However, they can cause visual vibration and are not good for text, so be careful.Complementary colour scheme
  • Monochromatic – Shades and tints of a single colour (hue). This colour scheme has the least amount of contrast, and can be very subtle but effective.Monochromatic colour scheme
  • Triadic – Three colours evenly spaced around the colour wheel. This provides a fair amount of contrast. Choose the triad carefully, as the ones based on primary colours can be loud.Triadic colour scheme

8. Choosing a colour palette

You don’t always need to choose a lot of colours. You may only really need to choose a background, base, and accent colour. When you are browsing around the web or using software on your computer, train yourself to notice what the colours are and how they are being used.

There are a number of websites that can help you create a coordinated colour palette:

  • Adobe Color CC (formerly Kuler): Allows you to choose a type of colour scheme (analogous, complementary, etc), and then adjust the pointers to get something you like. You can also browse colour schemes created by others, as well as create a palette from an uploaded image.
  • ColourLovers: Create a custom palette or explore palettes created by others.
  • Paletton: Similar to Adobe Color CC, lets you choose a type of colour scheme and then generates various shades for the palette.

Sometimes colours are divided into warm and cool colours. Red, orange and yellow are called warm, and blue, green, and light purple are considered cool. They may be divided like this because red is at the edge of visible light, just below the infrared spectrum (a type of heat radiation not visible to our eyes), whereas objects at a distance tend to appear bluish.

Visually, warm colours tend to advance, while cool colours tend to recede. Keep this in mind when developing a palette, as one based on warm colours will stand out more, and one based on cool colours will blend in more.

If you are developing a palette, try a Google image search or a Pinterest search for images or a pre-made colour palette that you can sample.

PinterestBlue

9. Colour meanings

We ascribe meanings to colour (based on our gender, age, personal preferences, and cultural associations) and in turn seeing certain colours affects us psychologically. Teams that wear red uniforms actually win more often, for instance. Red is associated with fire and intensity, while blue is associated with the constancy of water and the sky. Bright colours convey energy and excitement, while soft pastels are calming.

There are many resources available to help you determine the broad associations with colour. The excellent site ColorMatters has loads of information on colour and its impact on our lives. See also David McCandless’ colour wheel for a visualization of how colour is perceived across cultures.

Color Emotion Guide

Avoid some colour combinations altogether. About 8% of men are red-green colour blind, the most common kind of colour blindness (women are less affected), so red-on-green or green-on-red are to be avoided. Also, it’s best to avoid putting a bright colour on top of another bright colour, as these are hard on the eyes and can make the colours appear to vibrate. Please don’t do the following:

Vibrating Button Colours

10. Colour and style

Colours should match the personality or emotion you’re trying to convey. Think of one or two dominant personality traits, physical attributes, or concepts you want to associate with your application (e.g. fun and energetic, or dependable and trustworthy), and then do a Google search for that term and see what colours you see most. A green, earthy palette will convey a different feeling than one using bright primary colours.

Ocean Palette

Country PaletteForest Palette

Futuristic Palette

Colours can and do go in and out of fashion. While colour fashion over time might seem random, in fact the Pantone Color Institute sets colour trends for the coming year. Because colour and fashion go together, certain palettes can evoke nostalgia for specific decades.

Sixties Psychedelic

Seventies Orange

Eighties Neon

Colour in application design is often influenced by current trends and popular apps and websites. For instance, right now flat design and bright colours are trendy. Or, perhaps you prefer retro colours instead? Just be careful about following trends too closely, otherwise your design risks looking dated quickly. And given the long life of many FileMaker systems, you may be looking at a once-trendy design for a long time to come.

Conclusion

Colour can dramatically affect the usability and effectiveness of a design. The purpose of colour is to set the mood, reinforce the hierarchy, and call attention to important elements. If you use too much colour, you risk creating a distracting, confusing design. Fortunately, a little colour goes a long way, so it doesn’t take a lot of colour to make a design more interesting without being overwhelming.

Do some research and see what colour combinations you are attracted to. Check out the way colour is handled in the applications you typically use, and see what you can copy and adapt to your own purposes. Ask yourself if they are using a monochromatic, analogous, or complementary colour scheme (or something else). What are the background, base, and accent colours? How much colour is being used, and for what purpose? Like anything, understanding how to use colour is a skill that improves over time.

How can your judicious use of colour support the user in your next design?

 


Like this? Sign up to get blog updates by email



Afficher la totalité du billet

Designing FileMaker

Pixel Perfect Precision

Reader David Schellenberg (thanks David!) sent The Pixel Perfect Precision Handbook my way a while ago. It’s a great primer on the major design concepts with a focus on mobile app and web development from design studio ustwo.

It shows you what to do, but also examples of what to avoid (“naughty” and “nice”). There are clear definitions and examples of common design terms. It’s comprehensive but brief, giving a good overview of many concepts along with examples illustrating the point. It’s aimed at app/web developers but the design concepts covered in the first 80 or so pages are very solid.

It presumes you’re the “designer” who’s going to hand off the project to the “developer.” However, the text might actually help FileMaker devs (who often “do it all”) to understand the role of designer better, by seeing how design is treated on projects where separate people fill those roles.

There are concise but detailed explanations of concepts like navigation, interaction, error prevention, and feedback. The second section deals heavily with Photoshop and a bit with Illustrator, which might not be as relevant for a lot of FileMaker developers, but if you do work in those programs, there is a lot of detailed information there too.

Colourful and appealing, it’s a great reference for anyone interested in digital design.

Click here to view or download.

 


Like this? Sign up to get blog updates by email



Afficher la totalité du billet

Designing FileMaker

Miami Design Master Class

Albert Harum-Alvarez and SmallCo are hosting another Design Master Class in Miami from December 3–6, 2014. The idea is for you to bring something you’ve been working on, and improve and refine it over the course of the class. You’ll both move your project forward and learn a lot about design in the process.

You’ll grow as a designer by solving design challenges in your own solution, but also by seeing the challenges and solutions of your fellow classmates. Albert is always an amazingly gracious teacher and host as well (you’ll probably eat a lot of delicious food).

I attended in 2012 and can say it is well worth the investment of time and money. You’ll be amazed at the before and after, and you’ll take those design skills forward with you into future development projects.

You can find the promos here  and here. Here is the Facebook event page. To register, click “Find Tickets” or the link here.

 


Like this? Sign up to get blog updates by email



Afficher la totalité du billet

Designing FileMaker

Screen Capture

Chiyoko Yoshida of chiyofm created a handy little file to help you visualize the changes to layout objects when you apply different themes. Each layout contains all the objects you could possibly style on your FileMaker layouts, such as buttons, tab and slide panels, portals, text, and more. You could use this as a base for a theme development file (see my previous post about working with themes and styles).

All you need to do is duplicate a layout and either apply an existing theme, or use it as a base to create a custom theme. Either way, the work of adding all the possible objects has been done for you! Thanks to Chiyoko for making this available!

Download it here

 


Like this? Sign up to get blog updates by email



Afficher la totalité du billet