Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

26
Tech Talk #14: Creating Beautiful Reports Anna Leeg User Experience Designer [email protected]

description

In this Jaspersoft Tech Talk episode, we cover some best practices from web and user interface design and how they apply to report design. You will learn about how to use or not use design elements such as: * Boarders, Backgrounds, Shadows, 3-D Styles * Space * Typography: Fonts, size weight, and style * Colors * Alignment To view our full list of Jaspersoft Tech Talks, please visit http://www.jaspersoft.com/tech-talks View the companion video for this presentation here: http://youtu.be/4ByE-GW2mIU

Transcript of Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

Page 1: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

Tech Talk #14:Creating Beautiful Reports

Anna Leeg

User Experience Designer

[email protected]

Page 2: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 2

Creating Beautiful Reports

The purpose of a report

Present data

Bring important data to the surface

Page 3: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 3

Creating Beautiful Reports

A good report is

easy to read and understand

intuitive to navigate

visually pleasing

Page 4: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 4

Creating Beautiful Reports

How to achieve report goodness

1. Eliminate or reduce prominence of unimportant elements

2. Employ basic design fundamentals

Page 5: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

Eliminate or Reduce Prominence of Unimportant Elements

Page 6: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 6

Creating Beautiful Reports

Eliminate or reduce prominence of unimportant elements

Why?

They compete for screen space and user’s attention

Page 7: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 7

Creating Beautiful Reports

Unimportant elements

thick borders

backgrounds

shadows

3-D style effects

Page 8: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 8

Creating Beautiful Reports

Thick Borders

Page 9: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 9

Creating Beautiful Reports

Backgrounds

Page 10: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

Employ Basic Design Fundamentals

Page 11: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 11

Creating Beautiful Reports

Fundamental 1

Space

Distance or area between, around, above, below, or within elements

Definition

• Reduces visual clutter

• Improves readability

Benefits

Page 12: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 12

Creating Beautiful Reports: Space

Page 13: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 13

Creating Beautiful Reports: Space

Page 14: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 14

Creating Beautiful Reports

Fundamental 2

Typography

The use of type in a design. Type characteristics of concern are font,size, weight, style

Definition

• Gives emphasis

• Establishes hierarchy

• Improves readability

Benefits

Page 15: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 15

Creating Beautiful Reports: Typography

Font

Size

Weight

Style

Serif San-Serif

Small Medium Large

Normal Bold

Italic Underline

Page 16: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 16

Creating Beautiful Reports: Typography

Page 17: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 17

Creating Beautiful Reports: Typography

Page 18: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 18

Creating Beautiful Reports

Fundamental 3

Color

The application of hue, value, and saturation to create visual effects with specific color combinations

Definition

• Gives emphasis

• Establishes hierarchy

• Improves readability

• Lend emotional meaning

Benefits

Page 19: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 19

Creating Beautiful Reports

Fundamental 3

Color

Page 20: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 20

Creating Beautiful Reports: Color

Page 21: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 21

Creating Beautiful Reports: Color

Page 22: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 22

Creating Beautiful Reports

Fundamental 4

Alignment

How elements on the page line up with each other

Definition

Creates order and organization, improves readability

Benefits

Page 23: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 23

Creating Beautiful Reports: Alignment

Poor vertical alignment

Page 24: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 24

Creating Beautiful Reports: Alignment

Poor horizontal alignment

Page 25: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

©2013 Jaspersoft Corporation. 25

Creating Beautiful Reports: Alignment

Page 26: Jaspersoft Tech Talk Episode #14: Creating Beautiful Reports

Anna Leeg

[email protected]

Thank You