Applicable for blank/editable designs only
We have put together some top tips to help you on your way to creating a great design!
With your text in such great condition, ready to complement carefully curated imagery, it’d be a disaster to let your work fall at the final hurdle.
Ensuring your design is well organised and adhering to your brand is essential. Failure to consider your brand usually leads to your colleagues in comms pulling the plug on anything you’ve published.
Finding your fonts
It’s essential that you’re working with the correct fonts that reflect your branding. The fonts you require will be specified in your brand guidelines. It may be tempting to start designing with a substitute font and replace it later. This is not recommended as some fonts are likely to be wider or narrower than others, meaning a lot of elements will need to be revisited when you update the font.
You should always be familiar with the precise colours for your brand.
The colours you need will be available in your brand guidelines. As you’ll be working for screen, you’ll need to use the RGB version of each colour — this means that this colour will be replicated accurately onscreen.
Where possible, you’ll want to specify colours using a hex code, which is a six-character combination of letters and numbers that represent RGB colours. You can also enter RGB values into TigerDesigner by prefixing the three comma-separated numbers with ‘rgb’. TigerDesigner will translate this into a hex code. TigerDesigner automatically saves any colours currently in use in your design, so you can usually specify a colour once and then select it quickly in the future.
Respect your grid
A grid will help you align your panels so that everything fits together neatly.
A grid is an automatically configured set of guides, defined by the number of columns, rows and the amount of margin you would like your page layouts to have. TigerDesigner will automatically snap to the specified grid unless you specify otherwise.
Adhering to your grid is not always essential, but it will help keep your design neat and consistent throughout your entire design.
The example here has been designed without a grid. Note that the column widths are all slightly different and the headings aren’t aligned very well. With a grid, these issues can be easily avoided.
Make use of margins
Using consistent margins is a straightforward way to make your design look clean.
As you’ll see from your default grid, margin values are included to separate columns and rows. They also prevent content from getting too close to the edge of the page. Content that’s not separated by margins or too close to the edge of the page can be jarring for your readers.
See how the content is allowed to ‘breathe’ in this example, as it uses margins around the text panels.
Designing buttons for interactivity
Making sure there’s space for interactivity in your design is as simple as adding buttons.
We already know that interactive features are a great way to add content and engage our readers, however it’s sometimes easy to forget to make space for these elements in our designs.
It’s considered best practice to signpost interactive features by adding buttons to your design. This is typically done with the list panel; you’ll learn how to do this later in this guide. When adding your interactive modules, you’ll drag the clickable area to cover this button, making it extremely easy for your readers to find the interactive features.
Keep panels to a minimum
Knowing what panels are required to create the look you’re after is a good idea.
When creating interesting design elements, like a button or a border around an image, it can seem like a simple fix to use a combination of different panels to create your elements. For example, you may want to place text on a coloured background by adding a shape panel and then placing your text on top of it.
Although this will work, it will be difficult to maintain as you will have to move and edit these two panels separately. Your text panel will also not match your grid, which can lead to inconsistencies in your layout.
In this example, it’d be considered best practice to use the back colour setting on your text panel and add a margin so that the text doesn’t touch the edges of the coloured area. Now you can move and update your panel as one, which will always adhere to your grid. Notice how we've achieved an identical look, with one less panel, by using margin and back colour settings (demonstrated below right).
Other articles in the ‘An introduction to TigerDesigner’ series
Check out our Top Tips:
Want to see more?