logo

Please wait...

how to create an awesome custom

STEP1: Prepare for the concept work
  • Check materials of your corporate image like logo files, layout guidelines, color definition etc.
  • Check if you can approach an associated graphics designer – if yes, let them do the job.
  • Check the look of your website – which colors are used, which pictures represent your company best? Probably management will agree to have a similar look.
  • Make up your mind about a concept: A plain background with no pictures? Same background on all meeting rooms? Include a company motto? What about the room names? Do they follow a pattern? Maybe it makes sense to give each one its own photo background, e.g. mountains, movies, company site
  • Don‘t forget to ask your boss – he might have his own opinion.

 

STEP2: Get the quick ‘n‘ dirty drafts ready
  • It‘s not wise to do all the work just to find out management doesn’t like it. Provide 2-3 quick samples to let them choose their favorite. Make sure they understand it‘s about the concept, it will look better in the final version.
  • Enter your preferred colors in style settings. Enter hex values in the color selector. If you could not find any color code definitions, use a color picker on your logo or website (jump to „how to pick colors“).
  • You can use a simple screenshot from MS Powerpoint or utilize tools like MS Paint, GIMP, Adobe Photoshop, Microsoft Office Picture Manager.
  • Check the screen resolution of your target device. You can check your tablet resolution if you make a screenshot and look for it’s details.
  • You can copy this screenshot to powerpoint (or another tool) to make sure you‘ll have the same ratio in your quick‘n‘dirty concept.

 

Steps to create your preliminary concept (to show to management and peers to make sure they like the result)

 

Best practices for choosing colors

  • If you don‘t have any better idea, do it like on your website.
  • Pick a light color for the „next events“ background (probably for most of the time the biggest area on the screen)
  • Pick a dark font color for the „next events“ zone
  • For the „current event“ zone, you can invert the colors or choose white fonts on a dark background
  • Make sure you don‘t have colors that are too close to the colors of the bottom bar. Their codes are: red (#FF9F1D21) and green (#FF2E7971). Having similar colors will look quite ugly. The best solution is not to use red and green at all. (see pictures of good and bad examples here)
  • Make sure you have strong contrasts (dark font color/light background and vice versa) – this applies to background pictures as well (see pictures of good and bad examples here)

How to pick fonts and customize font size

  • Font Size: The app has different default font sizes for small, medium and big size screens. Try to keep to default settings, unless you are a graphic designer.
  • If you need to, here are some best practices:
    • Avoid increasing or decreasing sizing too much.
    • Avoid having more than 2 font sizes. For most people, one size for all looks best.

Basic layout concepts

  • Plain background with big logo/motto/icon
  • Background with narrow banner picture
  • Background with full picture
  • Background with logo pattern

Example 1: Plain background with big logo/motto/icon

  • Please note, there will be an ugly overlap if you have more than 3 next meetings in
    the example.
  • You can activate the setting “show only next meetings from today” in admin settings.
    It will reduce the number of meetings shown on the bottom part of the main screen.
    This way you can reduce overlaps.
  • But it won’t help if your room is very busy. In this case this type is not a good choice.

Example 2: Background with narrow banner picture

  • This concept has the same overlap issue like the example above.
  • It’s a good way to show a picture without giving away the functional, businesslike, down-to-earth design.
  • Consider using an individual picture for each room.
  • Could look nice with anniversary year banners etc.

Example 3 – Background with full picture (I)

  • This concept has the same overlap issue like the examples above.
  • Note that the clear blue sky has a very good contrast with the white font color. Avoid photos with contrasts in itself. Your event data will hardly be readable.
  • The overlap issue with next events will not be as ugly since the mountains are white as well.
  • The overlap issue could be fixed by a setting that limits the number of next events. This way you could define a clearance for the bottom part. Vote for this feature, and you’ll get it: support@scheduledisplay.com

Example 4 – Background with full picture (II)

  • This example in landscape orientation uses a picture that has little contrast in itself and a strong contrast to the chosen font colors
  • It uses the full background, the loss of readability due to overlapping is reduced to a minimum.
  • This effect can be realized by applying transparency and bleaching color effects to the picture (for example using MS Powerpoint, GIMP, Adobe Photoshop)

Example 5 – Background with logo pattern

  • This example uses a pattern that replicates the company logo. The logo has been bleached to have very low contrast in itself and a strong contrast to the chosen fonts.
  • The loss of readability due to overlapping is reduced to a minimum.
  • The pattern does not go up all the way. The top header area is a plain background color.


How to pick colors

  • There are many tools. One way in MS Windows is:
    • Open the screenshot or file with MS Paint, pick the color with the “pipette”
    • Use “edit colors” to find the RGB values
  • Use a website to calculate hex values. You’ll need them in the style settings of the app. Google offers a picker and conversion tool if you search for “online color picker”

How to enter your color codes in the app

  • Pick your element (fonts or target area). Read here how to customize fonts and colors.
  • There are two ways to enter color definitions in the color picker
    • There are two ways to enter color definitions in the color picker
      Manually by touch: navigate the color spectrum by moving the slider on the right, define transparency on the bottom bar and check the color you‘ve defined in the „Current“ color box. Note that the default position of the slider element for transparency is at the very left.
    • The alternative is to enter your hex code in the text field. Add „#FF“ plus your code. Note that „FF“ gets other values if you change transparency.
    • Read how to use the color picker

How to customize fonts and colors

  • Choose the area of interest (check here the customizable zones). Customize font type, font size, and colors.
  • Ideally, you will use only one type of font and 1-2 different sizes of this font. Same applies to color variety. Otherwise it will look too messy
  • Please note that we use red (#FF9F1D21) and green (#FF2E7971) in our status bar. Try to avoid those.
  • Use „preview“ to see effects without leaving style settings. You can configure multiple areas before saving.

Best practices to add your logo

  • Height of logo is 60dp for tablets and 18dp for mobiles (dp=density pixels)
  • Don‘t give a name if your logo already includes the company name (see example below)
  • Make sure you choose the right background color for your logo
  • If you choose to place a big logo inside the background picture (Example), consider removing the logo by uploading an empty picture with 100% transparency
  • You can create some clearance around your logo. Go to „Style Settings“ > „Background“ > „Logo and Title“ and enter your logo background color.
  • You can increase the clearance width by entering blank spaces. If you use a title you can place leading and trailing blanks to increase width.
Last step: Finalize in graphics editor
  • After having an approval from management, it‘s time to finalize your background
  • The draft you created probably does not have the best resolution and it might look squeezed or stretched on the tablet
  • Now it‘s time to calculate the exact size and position of objects. If you used color effects, you‘re able to do it in a more precise way, using a graphics editor.
  • A good free one is GIMP. Before learning a new tool, you should consider asking someone who is already familiar with graphics editing. Maybe you‘re happy with the results you created in MS Powerpoint.

How to determine the size of the background picture

  • Height of green bar for tablets is 200 dp and for mobiles it is 106 dp (dp > density pixels)
  • You can check your device resolution (width x height) if you make a screenshot and look for its details.
  • The black area for the navigation buttons is device dependent and needs to be measured by you in the graphics editor
  • Calculate the size of your background picture: “Total” minus “black area” – otherwise it might look squeezed or stretched
  • Calculate the vertical position of banner picture using screen height, navigations bar and status bar


Dos & Don‘ts

  • Don’t use green and red for current zone and background. Irritates user with status and might look ugly if bar turns to a darker green.
  • Don’t use different fonts. This example uses 2 different font families and a variation with italics, which looks messy. Especially a combination of fonts with and without serifs are perceived as ugly.
  • Don’t use many different font sizes. This example uses 3 different sizes (Top header, Current/Next event header, and Current/Next event data), which looks messy.
  • Don’t use background picture with strong contrast. Background gives too much distraction. In the example, some parts are harder to read due to dark background and black font.
  • Avoid overlap with background picture. Readability suffers big time. Make sure you reduce the number of displayed events.
  • Avoid stretched background picture. In the example, the ackground picture is distorted; this is even more problematic if it includes your company logo.Check your size calculation here
  • The strong contrast of the background picture is another problem here (Example)
  • Also avoid too little contrast. Avoid „agressive“ colors. Greys and blues are safer.

 

Leave a Comments

Your email is safe with us.
*
*