http://idi.kennesaw.edu/it7113/


https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout

Dashboard Design Special Topic
Content Layout Design
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Spring 2025
https://www.edocr.com/v/pb9delzd/jgzheng/dashboard-layout
Overview
• Dashboard layout design elements, principles and best
practices
• Patterns
– Dashboard layout patterns
– Content organization patterns
• Wireframe and mockup
Dashboard Layout Design
• Layout is about the placement and arrangement of
dashboard elements on the screen.
• Dashboard elements include
– Visual elements like charts, styled numbers, maps, tables
– Other data and informational elements like updates, texts
– UI elements like header, footer, logo, title, menu, etc.
• Components of layout – what to consider?
1) Size and shape of the complete screen area
2) Number of elements
3) Positioning of elements
4) Sizing/shaping of elements
5) Grouping of elements
6) Content features of elements
General Principles and Best Practices
1. Simple
a. Use common grid-based layout; avoid fancy magazine cover
style design
b. Fit to one page/screen; avoid scrolling, especially horizontal
scrolling.
2. Clean and organized
a. Alignment of elements
b. Spacing between elements
c. Grouping and sub-regions
3. Clear and balanced
a. Attention shaping: focus and priority
b. Don’t clutter; have the right amount of elements
4. Consistent

https://designlab.com/blog/grid-systems-history-ux-ui-layout

1a. Grid-based layout
• Use common grid-based layout; avoid fancy magazine cover style design
• A grid-based layout generally conforms to idenfiable rows and columns
• Organization:
– Grids provide a clear visual hierarchy by dividing the dashboard space into defined sections,
making it easier for users to navigate and find information.
• Flexibility:
– Different grid configurations can be used to accommodate diverse data types and dashboard
complexities, allowing designers to tailor the layout based on the information presented.
• Visual Consistency:
– Grids help maintain consistent spacing and alignment between elements, creating a visually
appealing and professional look.
Extended reading:
https://designlab.co
m/blog/grid-
systems-history-ux-
ui-layout
2a. Alignment
• Alignment is the
basic
requirement to
make UI look tidy
– Align charts and
regions
– Misalignment
makes
dashboard look
disorganized
Misalignment of the
line chart on the top
row
2b. Spacing
• Appropriate spacing
makes dashboard look
clean
• But avoid too much
spacing between elements
or large white spaces
White space; the map
can be enlarged to fill
the white space.
White space; adjust
gauge size and line
chart position to fill the
white space.
Better alignment
and spacing

https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/

2c. Grouping and Sub-regions
• Organize the content into sections and subsections that reflect users’ needs.
• Make a big dashboard into smaller sub-regions, with similar content logically grouped together
– Having the information logically organized makes browsing easier and helps to understand the content quickly.
– People like well-organized sites that make important information easy to find.
• Leave space for header (and footer) and visually different them
https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/
A sub region may
contain multiple closely
relevant elements

https://www.geckoboard.com/best-practice/dashboard-design/

Grouping based on Logical Relationship
• Logical relationship between sections and elements.
– Sibling: belongs to the same set or serials
– Hierarchy: serves the same purpose, but at different levels
• Use size and position to show hierarchy
– Purposeful related: comparisons
• Some good practices and patterns - see patterns summarized in the second and third part of this
lecture notes
– Decide is it important to show everything on the same page or would it be better to divide the content into
several pages.
– Give each section a short, descriptive title.
– Visually differentiate each content group from each other. Apply Gestalt principles: use white space, lines,
light borders, and/or background colors for content groups.
https://www.geckoboard.com/best-practice/dashboard-design/
Measures and charts
serving the same
objective should be
grouped together.

https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-visualization-design/

Gestalt Principles Applied in Grouping
• Use Gestalt principles and visual properties to imply
grouping and relationships
– Refer to module 2 about these principles
– More applied to dashboard layout
• https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-
your-data-visualization-design/
• Best practices: use visual containers to logically group or
visualize sub-sections
– separators and borders
– background color
– box
– effective use of spacing (sparsity and density): margin, padding,
and blank space
– alignment and distance

https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-visualization-design/

Using Border
Explicitly using border
to group contents
Explicitly using border
to group contents
https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-
improve-your-data-visualization-design/

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/


https://www.geckoboard.com/blog/9-dashboard-design-principles-see-them-in-action-with-real-examples/#keep-it-uniform

Using Background Color
http://www.excelcharts.com/b
log/excel-dashboard-
catchment-area/
Use background color
to set the region and
attention.
https://www.geckoboard.com/blog/9-
dashboard-design-principles-see-them-in-
action-with-real-examples/#keep-it-
uniform
Use background color
to box each group.
Using Common Background Color
Use a common or similar background
color for related elements to indicate
regions and groups

https://vanseodesign.com/web-design/3-design-layouts/

3a. Attention Shaping in Dashboards
• Where to focus and where to start, when facing a full screen of charts and
numbers?
– Avoid simply stacking up charts and tables; emphasis on important information.
• Understand the concepts
– Information flow: where the audience’s eyes will start and travel next allows you to
guide them through your dashboard.
– Natural attention focus
– Patterns and anti-patterns: Z-pattern, F-pattern, gold triangle - 3 Design Layouts:
Gutenberg Diagram, Z-Pattern, And F-Pattern - Vanseo Design
• Best practices
– Use preattentive properties to shape attention that breaks the normal information flow
and fixed attention
– Prioritize dashboard elements - display a focal point that prioritizes information
– Place the most important information towards the top of the page
• Commonly used pre-attentive attributes
– Position, or spatial location
– Size and Color can alter the importance of position

https://www.geckoboard.com/blog/9-dashboard-design-principles-see-them-in-action-with-real-examples/#keep-it-uniform

Position Priority: Top and Left
https://www.geckoboard.com/blog/9-dashboard-design-principles-
see-them-in-action-with-real-examples/#keep-it-uniform
Size
• Use a hero chart/section which is larger than other contents
• A hero section sometimes can overpower the importance by
position.
• See more hero section patterns in the second half of the
lecture
Hero Section
with larger size
for attention
Balance
• Balance
– Symmetry and asymmetry in dashboard: use effectively for
attention shaping
– Balance of simplicity and beauty
– Balance of visualization and text/number
– Balance of interactivity and direct static views
17
4. Consistent
• Style/theme consistency across dashboards
• Color scheme consistency across charts
• Chart type consistency for a visualization group/set
18
UI Layout Styles

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns


http://www.slideshare.net/theresaneil/ria-screen-layouts


http://bi-notes.com/2013/06/bi-dashboards-tips-for-starting-your-dashboard-layout/


http://www.tableausoftware.com/public/blog/2013/10/dashboard-design

Basic Layout Styles Summary
• Most dashboards are typically designed in a rectangular area, abstractly
viewed as a grid (rows and columns). Many styles are based on the
utilization (combination) of rows and columns.
• Styles summary
– Simply stacked (grid or list)
• Plain grid
• Row based – Z-pattern
• Column based
– Mixed
• Side panels
• F or E pattern
– Hero focal section: top, left upper/lower, right, middle
– Whole screen with overlays
• More
– http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
– http://www.slideshare.net/theresaneil/ria-screen-layouts
– http://bi-notes.com/2013/06/bi-dashboards-tips-for-starting-your-dashboard-layout/
– http://www.tableausoftware.com/public/blog/2013/10/dashboard-design
20

https://www.idashboards.com/dashboard-examples/behavioral-health-dashboard-inpatient-admissions/

Plain Grid
• In a plain grid layout, there is
no significant grouping along
rows or columns. Elements
are evenly placed in cells.
• Used for operational or KPI
dashboard often
Originally from https://www.geckoboard.com/learn/dashboard-
examples/adwords-marketing-dashboard-example/
https://www.idashboards.com/dashboard-examples/behavioral-
health-dashboard-inpatient-admissions/

https://www.geckoboard.com/dashboard-examples/marketing-sales/google-ads-campaign-monitoring-dashboard/

Row Based Layout
• Contents are naturally grouped by rows.
• There may be sub-grouping within a row.
• Sub sections can be placed across columns.
Originally from https://www.geckoboard.com/learn/dashboard-
examples/adwords-marketing-dashboard-example/
https://www.geckoboard.com/dashboard-examples/marketing-
sales/google-ads-campaign-monitoring-dashboard/
Rows are defined
Two rows are defined

https://www.blue-granite.com/blog/design-principles-dashboard-layout-is-crucial

Z-Pattern
• Z-Pattern is
frequently
emphasized in row-
based layout.
• We read from top left
to right, then zig-zag
down left and scroll
right again (in a Z-
pattern).
• Understanding where
the audience’s eyes
will start and travel
next allows you to
guide them through
your dashboard.
https://www.blue-granite.com/blog/design-principles-
dashboard-layout-is-crucial

https://www.geckoboard.com/dashboard-examples/marketing-sales/web-analytics-dashboard/

Column Based Layout
• Elements are naturally
grouped by columns.
• There may be sub-
grouping within a column.
• Sub sections sometimes
can be placed across
rows.
https://www.geckoboard.com/dashboard-examples/marketing-
sales/web-analytics-dashboard/
Three columns are defined

https://web.archive.org/web/20180825151532/http:/www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a-dashboard.aspx

Mixed (usually used with side panel layout)
• Main layout is column based, and then a sub-section can be
row based. Or vice versa.
https://web.archive.org/web/20180825151532/http://www.dashboardinsight.com/articles/digital-
dashboards/fundamentals/what-is-a-dashboard.aspx
Firstly, two columns
are defined.
Then, two rows are
defined in the left column.

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

Side Panel
• One grouping region is typically much larger, with some
smaller ones on the side. The larger section can have its
own sub-layout.
Side panel
on the left
column.
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
The right
column is
further divided
by rows.

https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e

F-Pattern (or E-Pattern)
• F-Pattern is frequently emphasized in a mixed grid layout.
• We read from top left to right for summary to details.
• The most important and summarized data are put in the left
column. If needed, details and additional contextual data are
put on the right.
https://towardsdatasci
ence.com/working-on-
your-dashboard-
layout-9b7c38d7b61e

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

Hero Section
• A hero section is one visualization that
is particularly larger in size and
contains more depth of information
– It is designed to be the focal point of the
dashboard.
• It is usually placed on top or left side.
Or center of the screen (examples on
the next slide)
Originally from https://www.geckoboard.com/learn/dashboard-
examples/adwords-marketing-dashboard-example/
Google Analytics Dashboard
Hero
Section
Hero
Section
Hero
Section
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

https://www.idashboards.com/dashboard-examples/k12-dashboard-district/

Hero Section
in the Middle
• A hero section can
overpower the
influence of
position
https://www.idashboards.com/
dashboard-examples/k12-
dashboard-district/
Hero
Section
Hero
Section

http://www.healthmap.org/


https://finviz.com/map.ashx


https://www.productchart.com/


https://www.healthmap.org/

Whole Screen + Overlays
• One big visual will occupy the complete screen; other part will pop up and overlay on the big visual for more information.
– Commonly used for data exploration and map-based dashboards
• Examples
– http://www.healthmap.org
– https://finviz.com/map.ashx
– https://www.productchart.com
https://www.healthmap.org
Pop-up
overlay
Pop-up
overlay
Pop-up
overlay
Content Organization Patterns
• Deal some specific content types and relationships
Content design
• What kind of content, how many dashboards, how are they
related
• Collective summarized content vs individual detailed content
• Current Snapshot content vs historical / trend content
• Individual content vs head to head comparison

http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html


http://gallery.idashboards.com/preview/?guestuser=webedu

Content Organization Patterns
• Master/Index + detail
– Index for overview and selection
– Summary/overview chart + detail data table: Side by side, top and bottom
• Top down: key summarized metrics followed by detailed data
– Key set of KPIs (single measures) on top row or side panel, + secondary measures
– Key summary + contextual/dimensional comparison
• Current snapshot + trending/history (half half): Key measures for one period (current or most recent) +
history/timeline/trend charts
• Period aggregate overview + key dimension drill down
– Aggregate level (top) + drill down levels (bottom)
– Google analytics: Primary measure + secondary (sliced)
• Current selection profile info + comparison with peers or context
• Bottom up: detail data first, then summarized
– Listing of detailed individual items + key summary at the high level
– http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html
– Scorecard details + aggregate
• Centralized settings (slicer/filter) + result (used for analytical)
– Setting on top/side
– http://gallery.idashboards.com/preview/?guestuser=webedu
• Equally distributed
– Each subregion is of equal size, particularly used in leaderboards
33

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns


https://www.nytimes.com/elections/2016/results/president

Master+Details or Index+Content
• Master/detail (or index/content) is pattern to arrange content
– Master/index: the overview of items for selection
– Detail/content: more details presented upon selection from an item in the
master/index
– Often used with the hero section and the side panel layout.
– Master can be on the side or the top -
http://designingwebinterfaces.com/designing-web-interfaces-12-screen-
patterns
https://www.nytimes.com/elections/2016/results/president
Master/
Index
Master/
Index
Details/
Content
Details/
Content

https://census.looker.com/embed/explore/census/cps_with_groups?qid=KvNUdiYmIRLSkyJsXjNmxS&toggle=vis

Overview Chart + Details Data Table
• Big overview chart on top
• Then a table provides data details
https://census.looker.com/embed/explore/c
ensus/cps_with_groups?qid=KvNUdiYmIR
LSkyJsXjNmxS&toggle=vis
Data table with
details at the
bottom
Big overview
chart on the top

https://www.patternfly.org/v3/pattern-library/dashboard/dashboard-layout/index.html


http://www.crazybikes.com/mrc/CRAZYBIKES.I00100s

KPIs on Top
https://www.patternfly
.org/v3/pattern-
library/dashboard/da
shboard-
layout/index.html
http://www.crazybikes.com/mrc/CRAZYBIKES.I00100s
KPIs
KPIs

http://www.excelcharts.com/blog/excel-dashboard-catchment-area/

Key Data on the Side (Left)
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
KPIs
KPIs

https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e

Trend + One Time Snapshot
• Many times, we are working with
historical data and one period data at
the same time.
• Use a bigger chart for the trend data;
and snapshot data for more details as
smaller charts at the bottom.
38
Google Analytics Dashboard
The top hero chart
provides history view of
view counts; the second
row displays KPIs.
Bottom charts/tables
provide details on key
aspects, with each leading
to additional
report/dashboard.
https://towardsdatascience.com/working-on-your-dashboard-
layout-9b7c38d7b61e

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

Settings + Results
• This pattern applies to more analytical dashboards where
there are many options and settings.
• Filter dataset http://designingwebinterfaces.com/designing-
web-interfaces-12-screen-patterns
Filters/Options
Filters/Options
directly on the chart

https://public.tableau.com/app/profile/datavizard/viz/EnergyinAmerica/Energy

Map in the Layout
• Maps are usually larger in
size to accommodate more
information
• Major patterns
– Map as primary visual on top,
and details on the bottom –
the places on map can also
be used as selectors or filters
for the data below.
– Map occupies the whole
dashboard, and details pop
up as needed (see prior slide
on whole screen+overlay
pattern)
https://public.tableau.com/app/profile/datavizard/viz/EnergyinA
merica/Energy
The map at the top is
also used as a selector.

http://duelingdata.blogspot.com/2019/01/5-types-of-dashboards.html

Bottom-Up
• Bottom-up design emphasize the details. It is usually used in
operations monitoring, where users’ attention is on details but less
on summary.
http://duelingdata.blogspot.com/2019/01/
5-types-of-dashboards.html
Detailed data set on
the left (big section)
Summary on
the right
More Bottom-Up Examples
Market index (summary) at
bottom; stock details on top.
Student details on
top.

https://public.tableau.com/app/profile/p.padham/viz/SuperstoreDashboard_16709573699130/SuperstoreDashboard

Side bar for navigation/actions
• Superstore Dashboard | Tableau Public

http://www.finereport.com/en/features/tv-dashboard

Screen Size Considerations in Layout Design
• Design the layout to fit one screen?
• What about smaller screens?
– Screen adaptation: responsive?
– Use sub dashboards?
– Add interactivity?
• Extra on demand?
• Panning
• Overview + detail
• Scrolling
• Paging
• Bigger wall screens? http://www.finereport.com/en/features/tv-
dashboard
• Touch screens?
• 3D VR/AR screens/spaces?
We do not cover the
designing for these types
of screens in this class.

https://www.pinterest.com/ruth77rn/ui-patterns-dashboards/


http://logianalytics.com/dashboarddesignguide/dashboard-design-fundamentals/

Layout Design Case Study 1
• Look for examples here
– https://www.pinterest.com/ruth77rn/ui-patterns-dashboards/
http://logianalytics.com/dashboarddesignguide/dashboard-design-fundamentals/
Before – what
are the issues?
After – what are changed?
What patterns or best
practices are applied?

https://www.gpug.com/HigherLogic/System/DownloadDocumentFile.ashx?DocumentFileKey=0353499e-a6bc-1361-1774-98fc310cf369

Layout Design Case Study 2
• https://www.gpug.com/HigherLogic/S
ystem/DownloadDocumentFile.ashx?
DocumentFileKey=0353499e-a6bc-
1361-1774-98fc310cf369
Before –
what are the
issues?
After – what are
changed? What patterns
or best practices are
applied?
Design tools

https://designmodo.com/wireframing-prototyping-mockuping/


https://www.mockuptiger.com/

Wireframes and Mockups
• Wireframes/mockups are useful in brainstorming the initial ideas on layouts
•
Focuses on What the interface would resemble
• Objective is to brainstorm and so wireframe need not be an exact match to end product
• Contains one or more static, rough cut screenshots. Wireframe can even be an image. Look and feel is not important
•
It focuses more on screen layout than on functionality and navigation
•
The sketch and the wireframe belong to low-fidelity mockup representation. The mockup, gives medium-fidelity representation.
The prototype, provides high-fidelity representation and functional proof of concept.
– Comparing wireframes and prototypes https://designmodo.com/wireframing-prototyping-mockuping/
– https://www.mockuptiger.com
Sketch
This is the most basic representation. It is actually just a freehand drawing of what you want to
produce, and this is also the quickest way you can visualize your website’s student. Even the
simplest sketch can depict your ideas more clearly than words.
Wireframe
The goal in this step is to provide your app’s structure. This is just a simple layout where the
functionality of the product and the interconnectivity among views/pages are shown. Here, you
also describe the features and content you want to include and where they will be located in the
final setup. Wireframes can also be used to make secondary and global navigations and ensure
that the structure and terminology used for a website will be able to meet user expectations.
Mockup
This is the stage where the static map of the product is created. It’s time to put in colors,
placement text, logos, images, etc. It will look similar to the finished product, but it is not yet
clickable and interactive. Rather, it is just a graphical representation, but one that you can use for
providing a more defined visual to your investors to help them visualize how the finished product
will look like. You can create mockups using free online mockup generator tool.
Prototype
This is like the mockup stage with additional animation, interaction, UX pieces, and everything that
you would like your users to experience when clicking the site’s buttons. Key functional features
are provided to prove it works (proof of concept, MVP minimum viable product)
Level of details growing

https://www.gpug.com/HigherLogic/System/DownloadDocumentFile.ashx?DocumentFileKey=0353499e-a6bc-1361-1774-98fc310cf369

Wireframe/Mockup Examples
Images from:
“Dashboards That
Get a Double Take”,
by Randy Chan,
GPUG presentation,
https://www.gpug.co
m/HigherLogic/Syste
m/DownloadDocume
ntFile.ashx?Documen
tFileKey=0353499e-
a6bc-1361-1774-
98fc310cf369
Sketch
Wireframe
Mockup
Wireframe/Mockup
Mockup

https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e

Layout Sketch, Wireframes, and Mockups
• Sketch: use pen and
paper to quickly
brainstorm ideas
• After sketching, use a
software tool for
better design,
communication, and
changes.
• Eventually finalize
the design with a
mockup.
https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e

http://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/

Prototyping
• Designing a good dashboard is not easy, no matter the experience you
have. It is not possible to get it right the first time, so you have to build
prototypes and quick developments to validate it with end users.
• Prototypes are actually working applications, although incomplete,
imperfect, and with a lot of bugs. But they demonstrate the concepts applied
with hands-on experience.
• Prototype features
– Focuses on What the end product would look and feel like
– Objective is to get a sign-off prior to development
– Must be built on the dashboard tool/technology of choice and so it needs technical
competence
– It may have data that is static and simulated; it need not be connected to a data source
– The look-and-feel more or less resembles a final product than a wireframe
– It should respond to user interactions
• Users have to validate navigations, graphs, colors, fonts, data and all the
important functions.
• Building prototypes is one of the best ways to manage expectations. It has
to be clear how users will interact with the dashboard.
– http://blog.itcentralstation.com/how-to-successfully-manage-bi-dashboard-projects/

https://www.gpug.com/HigherLogic/System/DownloadDocumentFile.ashx?DocumentFileKey=0353499e-a6bc-1361-1774-98fc310cf369

Wireframe/Mockup Examples
Images from:
“Dashboards That
Get a Double Take”,
by Randy Chan,
GPUG presentation,
https://www.gpug.co
m/HigherLogic/Syste
m/DownloadDocume
ntFile.ashx?Documen
tFileKey=0353499e-
a6bc-1361-1774-
98fc310cf369
Sketch
Wireframe
Mockup
Wireframe/Mockup
Mockup

https://medium.com/sketch-app-sources/design-tools-for-data-visualization-f7d040f82497


https://www.figma.com/


https://moqups.com/templates/wireframes-mockups/admin-dashboard-wireframe/


https://www.mockuptiger.com/


https://www.wireframes.org/


https://nicksight.com/dashboard-wireframe-kit/


https://www.dashtech.org/the-ultimate-guide-to-data-visualization-wireframing-and-mockup-tools-on-the-web/

Dashboard Mockup/Prototype Tools
• Design Tools for Data Visualization https://medium.com/sketch-app-sources/design-tools-for-
data-visualization-f7d040f82497
• Tools recommended
• PowerPoint
– Excel (great mockup/prototype tool)
– Figma: https://www.figma.com
– Moqups: https://moqups.com/templates/wireframes-mockups/admin-dashboard-wireframe/ (2 projects free)
– https://www.mockuptiger.com free through https://www.wireframes.org
– https://nicksight.com/dashboard-wireframe-kit/ (interesting physical tool)
– More: https://www.dashtech.org/the-ultimate-guide-to-data-visualization-wireframing-and-mockup-tools-on-
the-web/

https://www.youtube.com/watch?v=vxPXnsEak6c


https://www.youtube.com/watch?v=qCBumWcVFp4


https://slidemodel.com/templates/tag/dashboard/


https://www.free-power-point-templates.com/articles/best-dashboard-templates-for-powerpoint-presentations/


https://www.powermockup.com/

Start with PowerPoint
• PowerPoint
– PowerPoint is a common piece of office utility software. So, this is the most convenient way to mock
dashboards. It is easier for anyone to edit the dashboard as well.
–
It is also very powerful because you can import excel data into the tool to create exact visualizations.
– You can also add interactions by using the transition and timing features. Plus, since its a presentation tool,
it is great if you have to present your mockup and prototype to someone.
• Video tutorials on using PowerPoint
– https://www.youtube.com/watch?v=vxPXnsEak6c
– https://www.youtube.com/watch?v=qCBumWcVFp4
• PowerPoint mockup resources
– Templates https://slidemodel.com/templates/tag/dashboard/ (requires login)
– https://www.free-power-point-templates.com/articles/best-dashboard-templates-for-powerpoint-
presentations/
– https://www.powermockup.com (paid)

https://www.figma.com/pricing/


https://playfairdata.com/how-to-create-better-dashboard-layout-designs-with-figma/

Try Figma
• Figma is an online UI design service featuring collaborative
development
• You can use a free starter plan
– https://www.figma.com/pricing/
• Also good for designing dashboard layout
– https://playfairdata.com/how-to-create-better-dashboard-layout-
designs-with-figma/

https://www.youtube.com/watch?v=kVhYAMRIba4


https://www.youtube.com/watch?v=dDE7Z9XfQY8


https://www.thedataschool.co.uk/harry-cooney/dashboard-formatting-with-containers-in-tableau/


https://www.pencilandpaper.io/articles/ux-pattern-analysis-enterprise-filtering


https://www.phdata.io/blog/3-fun-tips-for-containers-in-tableau/

Layout in Tableau
• Refer to these tutorials
– https://www.youtube.com/watch?v=kVhYAMRIba4
– https://www.youtube.com/watch?v=dDE7Z9XfQY8
– https://www.thedataschool.co.uk/harry-cooney/dashboard-
formatting-with-containers-in-tableau/
– https://www.pencilandpaper.io/articles/ux-pattern-analysis-
enterprise-filtering
– https://www.phdata.io/blog/3-fun-tips-for-containers-in-tableau/

https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-visualization-design/


https://medium.com/towards-data-science/working-on-your-dashboard-layout-9b7c38d7b61e


https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/


http://vizcandy.blogspot.com/2013/11/tableau-designs.html


https://www.phdata.io/blog/dashboard-design-essentials-dashboard-layout-formatting/


https://designmodo.com/wireframing-prototyping-mockuping/

Core Readings
• Dashboards layout – these articles provide some aspects of
layout, but not the complete picture yet; refer to the lecture notes
for more information.
– Utilizing Gestalt Principles
https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-
your-data-visualization-design/
– Dashboard layout tips
https://medium.com/towards-data-science/working-on-your-dashboard-
layout-9b7c38d7b61e
– Arranging Your Charts as a Dashboard
https://dataschool.com/how-to-design-a-dashboard/arranging-your-
charts-as-a-dashboard/
– Dashboard Layout & Design
http://vizcandy.blogspot.com/2013/11/tableau-designs.html
– Dashboard Layout & Formatting
https://www.phdata.io/blog/dashboard-design-essentials-dashboard-
layout-formatting/
• Wireframing, Prototyping, Mockuping – What’s the Difference?
https://designmodo.com/wireframing-prototyping-mockuping/

https://vanseodesign.com/web-design/3-design-layouts/


https://www.phdata.io/blog/dashboard-design-essentials-dashboard-layout-formatting/


https://www.perceptualedge.com/articles/Whitepapers/Formatting_and_Layout_Matter.pdf


http://vizcandy.blogspot.com/2013/11/tableau-designs.html


https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e


https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/


https://medium.com/sketch-app-sources/design-tools-for-data-visualization-f7d040f82497


https://visualbi.com/blogs/business-intelligence/dashboards/storyboards-wireframes-and-prototypes/

Additional Good Resources
• 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern - Vanseo Design
– https://vanseodesign.com/web-design/3-design-layouts/
• Dashboard Design Essentials: Dashboard Layout & Formatting
– https://www.phdata.io/blog/dashboard-design-essentials-dashboard-layout-formatting/
• Common Failures in Dashboard Formatting and Layout
– https://www.perceptualedge.com/articles/Whitepapers/Formatting_and_Layout_Matter.pdf
• Dashboards formatting and layout – these articles provide some aspects of layout,
but not complete picture yet.
– http://vizcandy.blogspot.com/2013/11/tableau-designs.html
– https://towardsdatascience.com/working-on-your-dashboard-layout-9b7c38d7b61e
– https://dataschool.com/how-to-design-a-dashboard/arranging-your-charts-as-a-dashboard/
• Wireframes/mockups
– The Ultimate Guide To Data Visualization Wireframing And Mockup Tools On The Web
https://medium.com/sketch-app-sources/design-tools-for-data-visualization-f7d040f82497
– Comparing wireframes and prototypes https://visualbi.com/blogs/business-
intelligence/dashboards/storyboards-wireframes-and-prototypes/