Graphic design tutorial

There are many design elements you can customise in CityPlanner. This is an overview of what you can modify along with tips for making your project look as as good as possible.

  • Vector Graphics

    • The SVG image format is recommended for uploading icons and logos to CityPlanner. SVG is a vector graphics format, which means that as images scale they retain sharpness regardless of screen size or resolution.


      Image formats: Vector vs Raster

    • If you lack vector assets, you can use Vector Magic to automatically convert images from raster formats such as PNG, GIF, and JPG.
    • Inkscape is a free open-source program for Windows and Mac OS which can be used to edit and convert vector formats. Commercial options include Adobe Illustrator and CorelDRAW.
    • Protip: Using vector graphics is extra important for projects published to 4K, Retina, and mobile screens.
  • Masthead

    • The Masthead is the logo or wordmark of your city. It lives in the top left corner of the CityPlanner interface and serves as the chief way to brand your project.

      CityPlanner Masthead

      CityPlanner Masthead

    • Manage the Masthead under General Settings | Design:

      Admin Logo

      Admin Masthead

    • Protip: When using an image with a transparent background, it is recommended to use a white logo/wordmark with a subtle drop shadow. White stands out best over city models and the drop shadow preserves visibility over light backgrounds such as sky.
    • Recommended image size for the Masthead is less than 200×200px.
  • Ribbon Logos & Icons

    • The Ribbon is the button group which runs along the bottom of the interface.

      Ribbon: Logo & Icons

      Ribbon: Logo & Icons

    • All of the logos and icons can be customised. The leftmost button is the “Logo Button”. By default it features the CityPlanner logo but it is designed to be replaced with your city logo/shield.

      Logo Button Examples

      Logo Button Examples

    • Upload custom logos and icons on the CityPlanner Admin page, under the General Settings | Ribbon & General Settings | Dialogue tabs:
      Admin Page: Ribbon Icons

      Admin Page: Ribbon Icons

      Admin Page: Ribbon Icon Dialogue

      Admin Page: Ribbon Icon Dialogue

    • It is recommended to use single colour white icons between 45-55px squared.
  • Typography

    • CityPlanner supports custom typography using the @font-face CSS rule. Click here to learn more about @font-face.
    • There are three fonts groups you can customise – 1) Buttons 2) Headings and 3) Paragraphs:

      Project View Typography

      Project View Typography

    • To add custom type to your project, you can link to a remote stylesheet from the CityPlanner Admin page, under General Settings | Design:

      Admin Typography

      Admin Typography

    • Protip: You need to upload the stylesheet and font files to your own server.
  • Colour Palette

    • Setting a Theme Colour is one of the key ways of branding your project. It highlights active and hovered interface elements.

      Project Colour Examples

      Theme Colour Examples

    • The Complementary Colour is used for Dialogue suggestions and creations.
      Complementary Colour: Points of Interest

      Complementary Colour: Points of Interest

      Complementary Colour Suggestion

      Complementary Colour: Suggestion & Creation

    • Set your custom palette on the CityPlanner Admin page, under General Settings | Design:

      Admin Colour

      Theme & Complementary Colour

    • Protip: Be mindful of using very light hues as it can make the white text difficult to read.
  • Default Settings

    • As there are so many ways in which a project can be customised with your civic profile, CityPlanner allows for saving all customisations to the account.

      Saving & Reseting Custom Settings

      Saving & Reseting Custom Settings

    • When clicking 1) Use As Default everything in the General Settings | Customise section (all tabs) is saved.
    • Protip: You need be an Account Admin to set the default.
    • Future projects henceforth begin with these settings. Previously created projects can be manually updated to the new defaults by opening each project and clicking the 2) Reset button.

Good luck designing your project!

Getting started with Form Builder

With Form Builder, you can add your own unique forms to any CityPlanner project or portal. This functionality is part of the Dialogue add-on module and the new Project 2016 interface.

1. Activate Dialogue

  • Start by creating a new project or opening an existing project.
  • Make sure the Project 2016 interface is selected in General settings.
  • Click Dialogue settings.
  • Check Enable Dialogue to activate the module on this project.
  • Click Save and go back to the project page.



2. Build the Form

  • Form Builder lets you build the dialogue form interactively with instant preview.
  • Sections are basically the pages in the form. The sections can have a start view, title and components.
  • You can add, remove and reorder sections by dragging and dropping them.

Form components

  • Components are added to a section by dragging them into the section. You can reorder components by dragging and dropping them.
  • After you drag a component to a section, you can edit the component properties.
  • Any component can be set to be mandatory or not to submit the form.

Click a component from the list below for more information:


The Information component is used to display instructions or other one-way information to the user.


You can add questions with different reply types such as text area or single line, as well as allowing single option and multiple option answers.

Create toolbox

The Create component adds draw tools to the form. You can customize the names of the tools to best suit your project and choose which ones to include. By default the user can mark positions, draw lines and areas.


  • Drag the Category component to the section you wan to use it in. Categories can only be used once in a form.
  • Categories have a title, color and in future versions an icon.
  • You can set the component to switch to the Marker tool automatically when the user selects a category.


You can allow the user to upload and attach files by using the Attachment component.

Text field

The Text Field component is a text area with optional instructions or text used as placeholder. It disappears when the user clicks on the field.  You can set the size of the area to fit the input.


This component lets you ask questions with smiley faces as answer options. It can be used to ask questions in a more friendly way or in projects targeting a younger audience.

User information

This component lets you configure what you want the respondent to enter about themselves. Field labels can be customized and you can set which fields are mandatory to submit the form.

After Submit settings

  • Here you can edit what is shown to the user after a form has been submitted.
  • Set if you want submissions be published automatically or after admin approval.
  • Submitted forms can automatically be sent in an email to an address you configure. You can also specify a second address which only receives submissions with the Legal Submission checkbox checked.

3. Publish the form

  • Customize the button labels and icons in the General settings->Customize->Dialogue.
  • Set the Form to Published in Form Builder.
  • To moderate submissions, you need to be logged in and open the project view. A button appears when viewing a suggestion which lets you publish or unpublish the submission.


Here’s how it looks like to the end user