A semi-academic and practical approach to the planning and design of the good layout of the report. A lecture for the multimedia programme at EASJ / ZIBAT Campus Slagelse. http://easj.dk/?p=1142 Enjoy :-)

1. Academic Report Design
Best Practice Approaches

2. Academic Report Design
1 The Content > Formalities of Codifications
2 The Grid > The Style of the Space
3 The Typography > The Style of the Form

3. Academic Report Design
1 The Content > Formalities of Codifications
Examples > ask and find out:
1 · a What are the basic, standard requirements for the academic paper?
It could be simple content such as table of contents, resume etc.
1 · b Are there any codifications of footnotes, pictures and references etc.?
It could be the Harvard reference method, endnotes, footnotes etc.
What is to be in the appendices and what is best displayed directly in
the paper’s progression? Do you have a freedom of choice or are there
any codification to govern this part?
How is one page defined? No matter how a page is defined, say, as 2400
1 · c characters including spacing, you must not exceed more than 60
characters per line (and avoid too narrow leading). That means, that
the page count is not equal to the actual number of layouted pages.

4. Academic Report Design
2 The Grid > The Style of the Space
Examples > ask and find out:
2 · a Benefits of active, white space vs. a more compact layout?
2 · b How to make a well defined layout grid (columns)?
2 · c What is the best information structure?

5. Academic Report Design
2 The Grid > The Style of the Space
2 · a Benefits of active, white space vs. a more compact layout?
Picture Source: http://www.scottefranson.com/blogs/fall2011/group4/2011/11/11/ex-10-type-color/exercise_type-color-4/

6. Academic Report Design
2 The Grid > The Style of the Space
2 · a Benefits of active, white space vs. a more compact layout?
Use a
consistent
colour theme
to add
contrast and
to signify
information
structure
Picture Source: http://joshuahellerrarebooks.com/catalogue/cat-42

7. Academic Report Design
2 The Grid > The Style of the Space
2 · a Benefits of active, white space vs. a more compact layout?
Picture Source: http://www.gngcreative.com/newsletters/nl6.html

8. Academic Report Design
2 The Grid > The Style of the Space
2 · a Benefits of active, white space vs. a more compact layout?
Brand Guides for The British Council
1. A consistent design element (in this
case the strong horizontal line and
use of the corporate blue) is adapted
and applied considerately across the
spread.
2. Two-column grid on an A4 page. This
is shown by the pink outlined boxes –
which is not part of the design.
3. Running headers (in this case the
copy next to the number 3 – ‘Studying
English in the UK’) remind the
audience of the title of the document
and where they are in the document.
4. Images are considerately cropped to
show them to their best advantage.
Instead of filling this page with text,
white space has been left to balance
the feel of the page.
Picture Source: http://brand.britishcouncil.org/visual-identity/typography/a4-portrait-typography/

9. Academic Report Design
2 The Grid > The Style of the Space
2 · a Benefits of active, white space vs. a more compact layout?
Brand Guides for The British Council
1. A clear and consistent alignment
has been established. All graphic
elements (i.e. the tops of the
columns of text) all start at the
same height on the page.
2. A text-heavy page is balanced by
large areas of white space.
3. Running footers are separated
from text by a thin line.
4. A large column on the right-
hand side of the page is left free
to visually balance the two large
columns of text on the left.
Picture Source: http://brand.britishcouncil.org/visual-identity/typography/a4-landscape-typography/

10. Academic Report Design
2 The Grid > The Style of the Space
2 · b How to make a well defined layout grid (columns)?
From
Sketch
To Grid
Picture Source: http://www.vanseodesign.com/web-design/grid-choices/

11. Academic Report Design
2 The Grid > The Style of the Space
2 · b How to make a well defined layout grid (columns)?
From
Sketch
To Grid
Picture Source: zzzzzz

12. Academic Report Design
2 The Grid > The Style of the Space
2 · b How to make a well defined layout grid (columns)?
From
Sketch
To Grid
Picture Source: http://www.shrutimaidam.com/typography.html

13. Academic Report Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Picture Source: David Engelby’s academic paper: http://www.opgavebank.dk/src/ViewArticle.php?id=633

14. Academic Report Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Footnotes:
Use good
Space.
Let books
Inspire you.
Picture Source: Excerpt from the book Leyers eller Beleyrings Dagverck, typograpic design by David Engelby

15. Academic Report Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Right page
Picture Source: David Engelby’s academic paper: http://www.opgavebank.dk/src/ViewArticle.php?id=633

16. Academic Report Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Left page
Picture Source: David Engelby’s academic paper: http://www.opgavebank.dk/src/ViewArticle.php?id=633

17. Academic Report Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Let books
inspire you
Edward
Tufte
is a famous
expert in
information
Design
(see link)
Picture Source: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001Zi

18. Academic Report Design
2 The Grid > The Style of the Space
2 · c What is the best information structure?
Let
magazines
inspire you
A bit risky
with black
backdrop,
But for
some info
pages it
adds a
break to
the flow of
the text.
Picture Source:
http://vi.sualize.us/annual_2007_catapult_design_typography_grid_annual_report_picture_xirT.html

19. Academic Report Design
3 The Typography > The Style of the Form
Examples > ask and find out:
3 · a Benefits of serif fonts vs. non serif fonts?
3 · b The variation of the font family?
3 · c The connotation of the font?

20. Academic Report Design
3 The Typography > The Style of the Form
3 · a Benefits of serif fonts vs. non serif fonts?
Picture Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

21. Academic Report Design
3 The Typography > The Style of the Form
3 · b The variation of the font family?
Picture Source: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

22. Academic Report Design
3 The Typography > The Style of the Form
3 · c The connotation of the font?
Picture Source: http://blog.typekit.com/category/new-fonts/page/3/
& http://typographica.org/typeface-reviews/expo-serif/

23. Academic Report Design
Content
Grid
Typography

24. Academic Report Design
Good Resources
Kim Pedersen & Anders Kidmose (1993): And for web:
In Black and White.
An r&d Report on Typography and Legibility. http://www.smashingmagazine.com/2010/02/09/apply
The Graphic College of Denmark. ing-mathematics-to-web-design/
(A publication in both Danish and English. Orig.: Sort
på hvidt. En udviklingsrapport om typografi og læselighed. http://webtypography.net/
Den Grafiske Højskole 1993)
http://fontdeck.com/
Hartmut Stöckl (2005):
“Typography: body and dress of a text – a signing
mode between language and image.” In Visual
Communication 4, 2005.
Edward Tufte (2001):
The Visual Display of Quantitative Information.
Graphics Press USA. 2nd edition.
Robert Bringhurst (2008 ed.)
The Elements of Typographic Style.
Hartley & Marks Publishers.