FMP Design journal

Final Major Project

Book Two Design Journal

Creative Process Design Journal

By Holly Manning

1400097

Contents

Table of contents 01 Introduction

02 P. 02

Experimentation

Concept for final outcome Initial presentation proposal Project proposal The research book

Software to create Interactive experiments Which screen size?

Outcome format

03

04

Choosing a style

P. 22

Outcome Development

Inspiration moodboard Initial style experiments

Planning the final outcome Typesetting & composition Development of final piece Initial user testing Continuing development

05

06

Outcome User Testing

P. 78

User testing participants User testing results and feedback How this will change the piece Personal Reflection

Changes based on user testing Final tweaks to the outcome

07 Conclusion How the design process has gone Problem solving throughout Personal reflection Sources

Page 1

Final Development

P. 108

P. 12

P. 32

P. 96

Image 1, Dissertation Copies (2018)

Page 2

01

Chapter One Introduction

Introduction Page 3

Chapter One

Page 4

Introduction Outcome concept

Outcome Concept The concept for the final outcome in this project is to produce a digital publishing of my dissertation. This was decided due to research throughout the dissertation which lead me to discover a gap in the market for magazines and publishers who were missing something in their digital counterparts, and keeping all of their energy and sources focused on the print side of things. My dissertation was a discussion of how Wallpaper* magazine are producing work for both areas, rather than a critical analysis of how they are doing in this, but it was really interesting that the digital counterpart was missing the same spark that the printed editions had.

While I have only had some experience with producing editorial design digitally, I chose to do this path for the final outcome as it will be a challenge for me as a designer, but also enable me to really think about the industry and my place within it to produce a piece of work that reflects digital publishing - or how I believe it should be. The thing that magazines and publishing seem to lack within their digital editions is interaction and engaging content. This is a benefit that digital content has, and yet these companies are not utilising it to make their work more exciting. As discussed throughout the research book, some researchers theorise that the reason digital media is failing is due to the fact they’re trying very hard to replicate the experience of reading rather than creating an altogether new experience.

This is another idea behind the final outcome, to produce a piece of reading which is unlike conventional or traditional reading which people expect. Instead, there will be animations, buttons / call-to-actions which the readers can interact with to find out more information. It also won’t be so heavy on the text on each page so the reader doesn’t get bored of reading too much on a single page. It needs to capture and keep their attention all the way through, even if it is a large chunk of text being put in.

The next two pages display the project proposal and action plan as seen in the research book.

Page 5

Chapter One

Page 6

Introduction Initial project proposal

Initial Proposal At the point of presenting our initial proposals, I was extremely stuck for ideas and not particularly happy with the two I pitched. The first was a printed piece - which was a last resort after being unable to find digital software - and the second was an app, which in honesty doesn’t make any sense. The audience, inspiration, aims and objectives are all the same now I have the final idea, but the two concepts have changed. Luckily, following my presentation, it was decided it would be a waste for me to do a printed piece after spending so much time researching the digital side, so to go back to basics and not worry so much about exactly what I had in mind. This is when I turned back to the interactive features of InDesign and began the current creative process.

Page 7

Chapter One

Project Proposal The outcome of this project will be the dissertation titled "How Editorial Designers are Adapting in the Digital Age: With Particular Reference to Wallpaper* Magazine" published in a digital format. The decision for this was based on research throughout producing the dissertation whereby a gap in the market was discovered for digital publishing.

AIMS AND OBJECTIVES The main aim of this project is to produce a professional outcome that utilises the technology available and engages the target audience. Research should play a very important role in the direction of this project in terms of gaining inspiration and finding new information to develop the context in which the final outcome will sit. Through delving deeper into the research produced for the dissertation, the final outcome should be an example of something to fill the gap in the market.

The personal aims of this project is to refine typesetting and typography skills through print (for the research book) and digital (for the final outcome) and to experiment with new layouts and formats.

AUDIENCE The audience for this project will primarily be graphic designers or academics within the industry. Further than this, the audience should appeal to students who are studying similar topics to the dissertation but also those with a desire to have quick access to content via their tablet.

Although the content itself is likely to appeal to older academics, the format in which the final outcome will be produced is more likely to suit a younger audience with an understanding of how to use technology. Some older audiences may still rely on print to gain information and may find an interactive digital document hard to navigate.

CONTEXT The area of study goes without saying as being Editorial Design. More than that, it is how graphic and editorial designers should be evolving towards digital publishing, but reflecting on editorial design as we know it now to do so. The research for this project has been very heavily oriented towards the magazine and publishing industry specifically, and this has been important to gain a wider understanding of where this project sits in terms of the industry. Although the outcome itself is very much about the future for the industry, it has been really important to discover the history behind the industry and how it got to what we know and understand it as today.

While editorial design has always been a passion within graphic design, the knowledge I have behind the deeper elements of it - such as history and current practices - was very slim. So to truly be able to produce an outcome that reflects the industry and how it should be progressing, my understanding of all these areas should be much more substantial and the research in this research book has really increased this and brought a lot more ideas to the final outcome.

Page 8

Introduction Project proposal

Project Action Plan Time management has been a bit of a weakness in previous projects, so for this one a monthly, weekly and daily plan will be made to ensure everything is completed with plenty of time. February was the first month of really kicking off the project, so the monthly plans started from there and the more narrowed down pieces of planning will be found in the raw data folder alongside the rest.

While a lot of time does need to be spend researching into various different areas related to the project, an equal amount of time must be spent producing and refining the final outcome. Alongside this, the critical reflection must be written and completed, so time management is absolutely key for this project.

PRIMARY RESEARCH Primary research may be hard to gather for this project given it is not a topic that many people will have completed that will directly influence my project, but also there won't be many museums or art galleries that produce the kind of outcome this project will do. The main pieces of primary research will be: • Interviewing people within the industry (so far not many responses) • Survey asking people about their views on the print vs digital debate • Finding out people's preference for reading when it comes to digital • Experimentation for the final outcome, finding out what does / doesn't work well for the end product • User testing the final outcome to ensure it works well for readers SECONDARY RESEARCH The majority of the in depth research for this project will likely be secondary due to the huge range of books on the topics discussed throughout the dissertation and also to work towards how the final outcome is approached.

The main bits of secondary research will be: • Reading books about history / debates within the area of study • Reading articles or discussions about the debates and also history of the topic the project is about

Page 9

Chapter One

The research book has been the first major part of the project, and something that has needed to be completed very professionally from the composition itself to the way it’s printed. Through workshops at the beginning of the project, we were able to come out of our comfort zone to produce more aesthetically pleasing, exciting layouts.

As discussed within the research book itself, one of the first things we did after coming back from Christmas was put together initial ideas for compositions of our research book and stick them up on the walls to review. Following this, we completed a series of workshops where we used the ‘cut and stick’ method to create new layouts out of existing ones from magazines or previous layouts.

This enabled us to create more exciting layouts than we had before and to try new things. Although my final research book layout (and also the layout being used here) isn’t the same as what I produced in this workshop, it was still good experience - particularly to compare what other people have thought of.

After a lot of experimenting with layouts for the final outcome, I decided I wanted the style of my research book to reflect and work with my final outcome. This is intended to challenge me to use a similar style overall but for print and screen which have very different requirements. Overall the style is quite simple but uses strong typography all the way through, which is something I haven’t really done before, so has been a great experience. The decision to keep to a very restricted colour scheme of black, white and yellow was also very hard as I have been very used to just keeping photographs full colour with black text. The research book came out really well in the end and printed fantastically at Repropoint, so has made me extremely excited to complete the final outcome and see how they sit together as a print and digital combination.

Page 10

Introduction Research book

Image 2, Research Book (2018)

Page 11

Experiments with Interaction

Page 12

02

Chapter Two Experimentation

Experiments Page 13

Chapter Two

Page 14

Experimentation Initial software experiments

Finding Software The first problem I came across in this project was a lack of available / affordable software to create the final outcome as I had originally intended.

The main software used previously for projects like this was Adobe Digital Publishing Suite (or Adobe DPS) but in recent years it has been discontinued.

After spending a lot of time looking for software I might be able to use instead and failing miserably, I turned to alternative software that I was familiar with but not quite intended for the purpose I am creating for.

I first experimented with InVision (an online app prototype creator), Adobe XD (see image 00 - an Adobe equivalent to InVision) and Adobe Muse (see image 00 - an Adobe software used to create responsive websites without the coding). While these pieces of software are really good and have a lot of potential for the type of outcome they produce, they just didn’t fit what I wanted to produce. Muse has the benefit of being responsive, which would have been an ideal feature - particularly as discussing digital publishing industry - but overall it is very restricted to creating a static website design.

XD and InVision were good as well for app production, but again lacked interactive and engaging features that I was hoping for.

Feeling like there was no way I could go down this route for my final outcome, I pitched whatever ideas I could for our proposal presentation and after discussing with Tom - and the class - we decided I was over thinking it way too much and to go back to basics. This is where I decided to use Adobe InDesign’s interactive features to produce my work. It does still have issues such as not being responsive, limited to some elements which users might think they can do, but overall I think it will be a really good piece of software to use. I did use this software for the final project of second year, but didn’t initially think it would work well with my ideas, but if I put my mind to really learning all of the interactive features it provides I think it can be better.

Page 15

Chapter Two

Interaction Experiments One feature I had seen being used via Adobe InDesign was the ability to click a button and have it slide up to reveal more text. Although I hadn’t been able to figure out how to do this in last year’s project, because I want to make this as exciting as possible, I am determined to find out how to do it. The above pictures display my own initial experiments with the interactive feature. The first image shows how the page would start, and the second with the text.

Page 16

Experimentation Initial software experiments

I experimented with different ways of drawing the users attention to click the button, but will need to refine this further in the development.

However, the first idea was to have the asterisk above the ‘introduction’ spinning so to make the users aware that there may be something there to engage with. I don’t think it’s too obvious at this point, but going along the right lines for further designs. It took quite a long time to figure out this action, but now I’ve done it is does look really slick and a great feature, particularly as an alternative to some of the things I initially had in mind.

Though this is the colour scheme I will be using, I’m not entirely sure about the layout. With a 5,000 word dissertation being the content of the outcome, having lots of pages like this with little information will make it very long and probably very tedious after a while. Also, the image here was bitmapped which I don’t think will be the best way of displaying the images, especially as throughout the dissertation, the images are referred to a lot and are discussed, so if they’re hard to work out or see it may become harder for the reader to understand what is being said about them. However, I do like the idea of having the black background - very contrasting to printed design.

Page 17

Chapter Two

Page 18

Experimentation Choosing a screen size

Choosing a Screen Size

23/25

2/25

Although my initial experiments were created for an iPad screen, I didn’t want to rule out the options to make the design for mobile or desktop as well.

Using the style I had created for the previous experimentations, I put together interactive documents in the size of a mobile screen and also to be viewed in a browser on desktop. These proved to be much harder with what I had used in the iPad screen size. For mobile, it was too much text and not enough space to have an even balance between the imagery, quote and text. For desktop, it was a lot of space and seems way too empty. If I were to pursue either route, I would have to change the volume of information for both, but it would have been a good idea to create them as though they are responsive to the iPad version rather than three separate documents.

Due to the content of the dissertation and all of the research accompanying this project, iPad does seem to be the best option for the screen size of the final outcome. It is a good size to hold and feels more like a book in terms of size than a phone or desktop does. An iPad is much easier to relax and read than setting up a large screen, and for such a small device such as a mobile, it is hard to get the right balance of text without it being too big or too much to focus on. The future of digital publishing does seem to be going towards apps on iPads, and this was particularly seen throughout the research book, so just another reason for me to pursue an iPad outcome too. There are various different sized iPads, but due to me having an iPad mini, I will aim to produce it to work well on that screen rather than worrying too much about others. I looked into the best size for iPad and used the one which came up the most, so it could potential work across all of them, but with only an iPad mini to test, I won’t really be able to know.

As well as choosing a screen size, I needed to then decide which orientation to produce the iPad digital publishing. I asked 25 people whether they preferred to read on a tablet in portrait or landscape. By a massive majority, 23 people voted portrait and the remaining 2 said landscape. To me, portrait feels right too as it feels more like holding a book than landscape does and actually easier to hold too, making it an overall better experience.

Page 19

Chapter Two

Format of Outcome Now I’ve settled on how I am going to create the outcome, I need to decide what format to export it in. With the chosen software, there are two options.

First is to publish it as a unique URL created by InDesign, and the second is to export it as an .epub file which can be viewed using apps such as iBooks. Both are good options for a digital publishing, but before I get carried away with the outcome itself, I need to decide how I’m exporting it so I can view and test it.

Page 20

Experimentation Format of outcome

Instantly it was clear using the URL method would be less effective. To start, there is constantly a tab at the top of the page which shrinks the document slightly. It is all dependent on using the built-in arrows to navigate through the document, which is quite a hassle and also I feel scrolling left or right feels like a much more affective method, but it is not smooth at all to scroll. For the purpose of this project - to try and create a digital publishing for an iPad - I really need it to be as slick and easy to use as possible. Otherwise what’s the point?

The iBooks app with the .epub file works so much better. It fills the entire screen with the document, offers options to navigate using tabs if tapped on, but not distracting the content as the URL did. The scrolling is much nicer and feels a natural action to have. It has the benefit of always being in the iBooks library and remembers where you left off. If you close the URL, you have to find the URL again to open it, whereas the epub file is stored in iBooks. The URL made a lot more sense when I was producing a document to be viewed on desktop, but for use on an iPad where people expect a quality of reading, it needs to be smooth and professional.

Page 21

Initial Style Experiments

Page 22

03

Chapter Three Choosing a style

Choosing a Style Page 23

Chapter Three

Image 3, Divide Magazine Madonna Interview (2013)

Image 4, Verso Digital Magazine (2015)

Image 5, Nourished Journal Digital Magazine (2014)

Page 24

Choosing a style Main inspiration of styles

Initial Inspiration As mentioned within the research book, my first initial inspiration came from Divide and Verso magazines. These are projects I found on Behance produced by two students from very different backgrounds and for different purposes. Their styles are both bold, striking and powerful yet one is purely black and white all the way through, and the other brings in a beautiful orange colour. These are perfect examples of digital publishing, and why they’re the inspiration towards my own work. Another difference is one has chosen to produce their digital publishing portrait and the other landscape. This is something which isn’t immediately obvious as to why they’ve each chosen the opposite one, but something I really must consider when it comes to creating my own work. People will have preferences and one particular orientation might actually make more sense than the other.

The final inspiration here is Nourished Journal. Very different to the first two examples as this digital publishing derived from a printed magazine.

Divide and Verso are each purely digital. The layout of Nourished Journal is very similar to the printed version - and as discussed throughout the research book and critical reflection, replicating the printed composition onto digital is not wise nor successful - but they have added certain features and changed elements to work for the device. This carefully considered composition is what makes their digital counterpart instantly more successful than the likes of Wallpaper* and Icon Magazines. This is particularly an inspiration because I am producing a similar style throughout both these books and also the final outcome itself. While I don’t want them to look the same, I want them to be identified as accompanying pieces.

These pieces will continue to inspire the project, but various other pieces of work will inspire specific elements and decisions towards the final outcome and it’s functionality. It will be more difficult to produce on a smaller scale such as an iPad screen in comparison to the A4 pages of this and the research books, but with a clear idea of what works well and what is not working so well, I feel confident I have enough knowledge and inspiration to help guide my own process.

Page 25

Chapter Three

Page 26

Choosing a style Experimenting with layouts

Page 27

Chapter Three

Page 28

Choosing a style Experimenting with layouts

Style Experiments Although I had created a style for the interactive experiments, I didn’t think it would have been the most affective for such a long chunk of information, so I started to play around with new styles and layouts.

It actually seemed to be a lot harder than I thought to produce a layout on iPad. It is a much smaller space than I am used to for putting content into, but these two pages and the last two demonstrate most of my experimentation while deciding what style to use. Some of them are just plain awful - in my opinion - while others probably wouldn’t work well.

From this selection, my favourite ones are the ones on the opposite page here as they are more exciting and striking. However, there would be a lot of restrictions with this style due to the size of the typography. The titles and headings of the dissertation are quite long, so I would only be able to use something as basic as ‘Chapter one’ throughout. It’s also then what do I do for the pages with a lot of content? I am upset this won’t work as well as I hope, but it is still good to experiment with various different options. In the end, I decided to link together my research book design and this final major project. These designs here wouldn’t work so well for a long research book, so have gone for a simpler, yet still bold style (not too dissimilar from the image above). Using yellow, black and white it can still be a striking style.

Page 29

Chapter Three

Direction of Final Style After producing various different bits of experimentation towards finding a style for my final outcome, these last two here are more like what I want to do. They bare similarities to styles within my research book but are different enough to work well for screen. The bold colour scheme works really well on a screen too, and particularly with the idea of making something that is totally unlike reading on paper - as per the quote in my research book.

Page 30

Choosing a style Style direction for outcome

The chapter pages actually use the same idea as the chapter pages in this and the research book, but rather than a white background, it is all yellow. This makes it much more exciting and contrasting to the printed and this is exactly what I want to achieve from this final outcome.

This was a first experiment with a chapter page where I’ve included a menu (discussed more on page 64) which when clicking on the icon, the above menu appears. I’m not sure if this is the most effective way of doing it yet, but these are just the early stages of the final style.

Contrasting to the printed books, I would like the pages of this document to be black (with the exception of chapter pages and maybe pages which include a large quote). This is so the glare from the screen is so much less than reading on a tablet with a white background. Also, it will look much more bold and different to reading as we expect it to be. It keeps in with my colour scheme throughout as well, so just flipping it around from how I had it in my research book and here. I’ve had approval of these initial ideas so far so I am excited to develop them further and enhance the overall design with the first ideas as seen here.

Page 31

Final Development Layouts

Page 32

04

Chapter Four Outcome Development

Outcome Development Page 33

Chapter Four

"But why, one could ask, are we working so hard to make reading with new technologies like tablets and e-readers so similar to the experience of reading on the very ancient technology that is paper?

Page 34

Outcome development Planning the final outcome

Why not keep paper and evolve screen-based reading into something else entirely?"

(Jabr, 2013)

Page 35

Chapter Four

Wireframe Layout Ideas Before really getting into the design of my final outcome, I wanted to do some planning for layout ideas. I believed if I had a clear idea of different compositions to use consistently throughout the document - not too many for it to be overwhelming, but enough for there to be variety - then it would make the task a lot easier. This is particularly important as the document is likely to be quite long as it’s a 5,000 word essay, so the design needs to be easy to read, navigate and digestible. Trying hard to keep my initial interactive ideas, I also needed to think of various other compositions as using the same one too many times will become very repetitive.

The ratio for text to images is why high, with not very many - and not particularly many high res - images used throughout, so really I need to ensure the document is more typography based. This makes sense given the content is the dissertation so the what’s being said is really important, and using break pages with large quotes for example can make certain parts of it more exciting and interesting. For some sections, I am talking about several images in one paragraph, so may become difficult to fit all of it into one page, so separating some bits into two pages will make more sense. For e.g. have a page dedicated to the images being discussed, and then following it have the text which talks about it.

It’s hard to really know if these ideas will work at this stage because some paragraphs might be a lot longer than others, so therefore layouts will need to change accordingly, but it’s been good to get a basic idea of how I want things to look throughout the document. Also, having created these without a finalised style in mind, some of them might have to change drastically to fit in with the final style I decide on. I’m trying to utilise the interactive and animated features provided via InDesign throughout the document as this is a key part of what I’m trying to say through my final outcome, but I don’t want to do it in a way which is overwhelming and over the top. Finding that balance will be a great challenge.

Page 36

Outcome development Planning the final outcome

Page 37

Chapter Four

Page 38

Outcome development Planning the final outcome

Wireframe Planning As well as determining layouts and compositions for the pages throughout the document, I wanted to get an idea for how many pages the final design may have by working out a structure and order for all of the content. This is quite hard because some paragraphs might be longer or shorter than others and therefore take up more pages than in my plan but at least doing a wireframe now gives me a rough idea of how much work to expect before I start doing it aimlessly. This also gave me a chance to see how many different interactions I am using across the document to ensure I am not doing too many of one or the other and providing break pages so that occasionally the reader only has a large quote to read or images to look at. This gives them a break from the large amounts of text throughout the entire document.

The page count as per this wireframe is 39 without including the bibliography and image sources. It sounds like a lot to me, but when considering each page will be broken down into digestible bits of information, it doesn’t seem so bad. Particularly as the idea behind the document is that it is interactive, engaging and more exciting than just traditional reading. At this point I’m not sure how I will do the bibliography and image sources - should they have exciting features too or just be kept simple with links leading to the source websites? There’s still a lot to decide and produce towards this, but I feel better knowing how to distribute all of the information from my dissertation in a more successful way.

" The single most important tool in producing any publication is the flatplan. This ingenious exploded diagram of a publication, similar to a film storyboard enables everyone involved in its production to see pages, their running order, their content." (Caldwell & Zappatterra, 2014:168)

Page 39

Chapter Four

Choosing a Typeface Throughout the research book, I used Source Sans Pro for all text. For the final outcome - although I want it to be consistent - I would like to introduce a secondary font for other elements such as page furniture or headings etc. The three fonts here are my final selection. I have chosen them because I felt they have the most character, good for reading lots of text or bold enough for headings. I think Source Sans Pro will continue to work best for the body text of the final outcome (and it is being used here for the design journal as well) as it is a lovely sans serif font with a bit of character to it and easy on the eyes. That’s also important for the final outcome - being easy on the eyes. One issue mentioned as coming with reading on a digital screen is eye strain due to the glare etc, so doing everything I can to make it easier on the eyes should help.

Although I really like Univers, I have used it in previous projects and am now looking for something a bit different. Europa Bold is a really nice rounded font which stands out well in bold. This can be used for some titles, page furniture (e.g. page number, menu items etc). It won’t be a dominant font throughout the final outcome as for the most part I want the text to be consistent so it’s not overwhelming for the readers.

That’s why I think it’ll work best for more subtle bits of typography. The one main problem with Europa Bold is the lack of type weights as it only provides the basics regular or bold. But, for the purpose it will hold throughout my final outcome, that shouldn’t really affect anything as I will likely use the same weight all the way through for this particular font.

Contrastingly, Source Sans Pro provides many different weights which means that the font can be used in various different ways across the document without it all looking too much of the same. For some pages (e.g. large quotes), the font will need to be a lot more bold and prominent than it’s regular or light fonts, and there are various different bold fonts to choose from too for this.

For the research book and this design journal, the Source Sans font is 9pt. However, for digital this needs to be very different and so I’m looking at around 20t for the body text. On paper, this would be large typography, but on a screen it makes it much more legible without straining your eyes or having to zoom in each time.

Page 40

Outcome development Planning the final outcome

TYPEFACE 01

Europa Bold Heading Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Europa Light Body Text Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

TYPEFACE 02

Source Sans Pro Bold Heading Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Source Sans Pro Light Body Text Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Source Sans Pro Black Source Sans Pro Bold Source Sans Pro Semibold Source Sans Pro Regular Source Sans Pro Light Source Sans Pro Extra Light

TYPEFACE 03

LT Univers Bold Heading Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz LT Univers Basic Thin Body Text Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz LT Univers Basic Bold LT Univers Basic Light LT Univers Basic Thin

Page 41

Chapter Four

Font: Europa-Bold Size: 14 Tracking: 0 Kerning: 0

Font: Source Sans Pro Bold Size: 28 Tracking: 0 Kerning: 0 Leading: 33.6 pt

Font: Source Sans Pro Regular Size: 20 Tracking: 0 Kerning: 0 Leading: 24 pt

Page 42

Outcome development Planning the final outcome

"When it comes to typesetting, hierarchy is always important, but it becomes especially so when people are using your interactive design to achieve a goal."

(Computer Arts, 2018:70)

Page 43

Chapter Four

Grids & Composition Having looked into the best size to view a document on an iPad screen, 728 x 1024 px was the most common. I believe this should work on various different iPad screens, but for this project I will be mainly focusing on my own iPad which is an iPad mini. I wanted to have a sufficient border around the main part of the design so that it doesn’t interfere with some of the features of iBooks such as tabs at the top and bottom and next / previous page at the two sides. As well as this, having a larger border means I can produce smaller line lengths and make the paragraphs much more appealing to read.

The margins on this document are all 86px which allows enough gap for the page furniture discussed before - page numbers, chapter number etc. There are 6 columns to allow for some different variations of text layout and each with a 14px gutter. I think this is a good amount of columns to mean I don’t have to always stick to a rigid structure and gives me more freedom to use alternative layouts as and when I need to.

The blue lines outside of the main grid indicate where I will put aforementioned page furniture. I want it to be far away enough from the text that it doesn’t get lost, but also not too close to the edges as iBooks has tabs and features set up that activate if you go too close to the edges. I need to ensure the overall flow of the document is smooth and therefore thinking about this kind of thing should hopefully eliminate problems for the readers.

" Working with columnar layouts helps you maintain a manageable line length and allows white space onto the page in pieces other than the margins." (Kane, 2011:102)

Page 44

1024 px tall

Outcome development Planning the final outcome

728 px wide

Page 45

Chapter Four

QUOTE PAGES:

Hierarchy 1: Quote Font: Source Sans Pro Bold Size: 56 Tracking: -10 Hierarchy 2: Author Font: Source Sans Pro Semi Bold Italic Size: 30 CHAPTER TEXT:

Font: Source Sans Pro Bold Size: 70 Tracking: 0 Kerning: 0 PAGE FURNITURE:

Font: Europa-Bold Size: 14 Tracking: 0 Kerning: 0 INTERACTIVE HEADINGS:

Font: Europa-Bold Italic Size: 30 Tracking: 0 Kerning: 0

Page 46

Outcome development Planning the final outcome

Typography & Typesetting Ensuring typesetting is to a high standard has been a really important part of production for both these books and the final outcome. Particularly for the final outcome, typesetting has been more of a challenge in this project.

With the limited space of a small screen, ensuring certain elements like orphans and widows don’t appear while keeping the lines at an appropriate length has proven to be harder. Along with this, the fonts are a lot bigger so all of these very important techniques within editorial design are battling against each other. “In traditional typesetting (the kind that still endures among fine book publishers and conscientious commercial publishers), there are two unpardonable gaffes - widows and orphans.� (Kane, 2011:136).

All of the different considerations for typesetting, including tracking, kerning and leading can impact the way a paragraph looks, and to get it looking really professional it needs to be typeset well to avoid things such as the aforementioned widows and orphans. Widows and orphans are the very short amounts of text left at the beginning or end of the paragraph which look very alone (hence the names) and can make a paragraph look out of place. I have chosen to align all of my text so it is left justified, so orphans and widows can appear much more obvious in this format. To the left are examples of the fonts I have used along with their sizes and spacing which I have chosen for the best impact overall.

These different elements play together to make the text do more than just say words. Different font sizes, colours, weights etc can make some text stand out more than others and therefore create hierarchy within the document. I have done this in several places to create said hierarchy to enable the readers to clearly know and understand which parts are the most important - or at least the bits they should read first. On every page there will be little bits of text which act as the page furniture to let the readers know where they are in the document and allow them to open a menu. These have to be big enough to be clear to the reader but not too big as to look like a feature of the page.

Page 47

Chapter Four

"Sometimes it’s necessary to place certain typographic elements outside the left margin of a column type (extending, as opposed to indenting) in order to maintain a strong visual axis."

(Kane, 2011:130)

Page 48

Outcome development Planning the final outcome

Page 49

Chapter Four

Page 50

Outcome development Development of final piece

Starting Development Once I came to the decision of replicating the style of my research book for the digital final outcome, I found it much easier to start producing designs.

The most interesting part of using a style from print is the additional elements and features required to make it work better on a device. Rather than just simply displaying information, the document needs to let the readers know there is something they can do with the page. This is why I have included the use of arrows throughout the designs so it becomes instantly clear that there is something to interact with. There is a lot more flexibility with colours on a screen too without worrying about the cost, so the colour scheme throughout - although the same as the research book - is much more bold and striking.

Out of these four examples, the contents page is most likely to remain as it is. It is similar to the printed contents page (although need to change the underlines to match) and is clear and concise. The pages I’m not sure about are the chapters and ‘cover page’. The layout of the text in the cover page is good and reflects the styles I’ve used elsewhere, but I feel like it’s missing something. This is the first page the readers are going to see and although I don’t want it to be instantly over the top and overwhelming, it needs a little bit more ‘wow’ to make readers more interested in what’s inside.

The bottom two screenshots are of a chapter page and then with the menu open on the chapter page. This current design won’t work all the way through as the titles of the chapters are so long that they won’t fit in nicely as the word ‘Introduction’ does on it’s own. Perhaps it should just have the chapter title as the contents displays all of the chapter titles anyway. The menu then opens as per the bottom right image. I’m not entirely sure what made me think to make the menu navigation fill most of the page, but it’s quite interesting. However, I’m not sure it will work too well as it distracts from everything else. It hides away the main part of the document. Also, the actual navigation is so small in comparison that it looks lost.

Page 51

Chapter Four

Interactive Image View Something I’ve known I want to include since the idea started for this project was pages with large images with an option to view more. However, actually coming to produce this page was harder than I expected. I started with two small boxes when the page loads which you click on to view larger images, but this just looks lonely and perhaps not entirely clear. There is text above the boxes that says to click on them, but it’s so small it’s not easily legible.

The second image shows the picture when it’s up. The two thumbnails still stay there but then they are quite a bit less obvious. I experimented with having the pictures black and yellow as I have occasionally in the research but with the black background it doesn’t look right, so I will stick with just black and white images all the way throughout.

The bottom left image shows the ‘click’ instruction as a bigger, bolder font. The page still doesn’t look right here, but it does make it more clear. ‘When user interface design is good, it’s hassle-free and we don’t have to think about it; but when it’s bad, it can make our lives hell’ (Shaughnessy, 2010:102) This quote makes me think I shouldn’t need to spell it out to the readers to click on the images, and the design decisions I make should make it clear enough for them to know what to do anyway. It’s been suggested to me to start the page with an image already open, and highlight around the boxes to make them stand out more - more hierarchy as discussed previously.

This is something I will experiment with as I don’t want it to be more hassle than it should be, particularly as I want it to be a successful interactive document and as the quote suggests, it should be hassle-free if it’s good.

Also, to note, I changed the positioning of the ‘chapter’ and page number bits to be in line with the left of the grids. This makes the composition look more symmetrical and much more appealing.

Page 52

Outcome development Development of final piece

Page 53

Chapter Four

"When user interface design is good, it’s hassle-free and we don’t have to think about it; but when it’s bad, it can make our lives hell."

(Shaughnessy, 2010:102)

Page 54

Outcome development Development of final piece

"Subconsciously, many people may think of reading on a computer or tablet as a less serious affair than reading on paper."

(Jabr, 2013)

Page 55

Chapter Four

Page 56

Outcome development Development of final piece

Revealing More Text “Subconsciously, many people may think of reading on a computer or tablet as a less serious affair than reading on paper.” (Jabr, 2013). As discussed throughout my research, it has often been stated people digest a lot less information on a tablet or e-reader. People associate it with swiping through lots of small bits of information via social media and website articles, and therefore don’t tend to think of heavy reading with said devices. Although some bits of research argued this comment, saying it was a common myth, but not true, I still think it is important to bare it in mind nonetheless as a lot of people may still struggle to take lots of information in, particularly when it’s on a device - without even realising it.

For various parts of the dissertation, there are long chunks of text without direct images to discuss, so the way I’ve got around this is by breaking them down into headings which the user clicks on to reveal more information. This was inspired by Verso magazine (as discussed from page 121 in the research book) where they have also used headings to interact.

The use of a plus and x is a good indication that there’s something to open and close throughout this document, and again trying to avoid making it overcomplicated in design. Originally I had a small sentence under the headings telling the user to click the above to reveal more information, but after discussion it may not be necessary. Referring back to the previous part where user interface should be hassle-free and if it’s well designed, it should speak for itself. Not only should it speak for itself, but being self-explanatory means the reader has one less thing to read and concentrate on and can just get used to the flow of the document naturally. This isn’t a particularly fancy interaction and actually it is really very basic, but the way it engages the readers to view more and changes between the plus and cross makes it much more appealing.

Page 57

Chapter Four

Chapter Page & Menu Nav As previously mentioned, including the name of the chapter as well as ‘chapter 01’ wouldn’t work for most chapters as the titles are just too long.

Therefore, I took it away and kept just the chapter number on these pages.

It actually looks much better this way and much less distracting. These pages shouldn’t be a key feature of the design, more of just a break between chunks of writing and an indication of how far you are through the document. It works well being quite simple too, particularly as all of the page furniture surrounds it anyway and makes for a nicely laid out page. The only bit I’m not sure about at the moment is the positioning of the arrow. It feels like it should be moved down in line with the menu icon and the page number so the page is more symmetrical. It makes the bottom right corner of the composition look as though it’s missing something, and maybe that something is the arrow!

After feedback that the menu navigation shouldn’t take up the whole page, I took a more ‘mobile website’ approach and made it open up in the corner of the document just big enough to give the text a comfortable amount of room. This does work much better as you can still see the main content of the page without losing what’s happened and it doesn’t feel like an entirely different page which having the contents fill the page did. It feels like much better interactive design this way too as though it is meant to be viewed on an iPad and used as we do with any other app or website. So the contrast between the menu and main pages are consistent, for the black pages, the menu will then become yellow. When the colour of the navigation matches the colour of the page it gets lost and it all becomes one big mess of information, but the contrasting colours works well to differentiate the two.

Page 58

Outcome development Development of final piece

Page 59

Chapter Four

Page 60

Outcome development Development of final piece

Improving Static Pages It is inevitable that I will need to produce pages of just text as I can’t have too many overly interactive pages after each other and I wouldn’t want to interact one paragraph that doesn’t fit anywhere else for the sake of it as it defeats the object of the whole project. Therefore for the pages of just text and maybe one image, I wanted to try and make the text itself look more appealing or exciting than just text on the page. The images to the left display these experiments, but to be honest I am not happy with them. It is very over-styled and doesn’t feel like a natural way of reading. The best out of them is the one with the image as it’s kept quite basic but still fits in nicely with the overall style of the document. It still doesn’t feel right to me, but this can still be experimented with a lot more before I settle for a style.

Perhaps these pages just need to be kept basic and easy to read for the readers as I don’t want to make the experience in any way stressful or annoying, so pages of nicely laid out text might be quite nice every so often to remind them they’re reading - just in an untraditional way. There’s nothing wrong with just having a static typeset page every so often, I think I was just over thinking it because I have such a strong idea of making the experience so different to peoples’ expectations of reading that I wanted to make it more bold and adventurous. But really, it’s a long dissertation and while it can be more exciting, it shouldn’t be too over the top to make the readers want to put it down again.

I’ve mentioned it before, but particularly on pages like this where the content is quite structured within a grid, the arrow looks out of place.

I think I will make the decision to move it down in line with the menu icon and also the page numbers so that it almost creates a border for the content in the middle. I might face the problem of the tab coming up if it’s too close, but for the aesthetic it needs to be moved as it looks misplaced.

Page 61

Chapter Four

Page 62

Outcome development Initial user testing

Page 63

Chapter Four

Page 64

Outcome development Initial user testing

User testing plays a very important role in ensuring an interactive piece of design flows well and works in the way in which the designer intends. Before getting too far into the design process, I tested the first three chapters of the dissertation on a few people to see how they interacted with the document in comparison to how I felt they should be doing it.

The previous few pages display the pages of the document at the time I did some initial user testing. This was just to get an idea of the things people did / didn’t do throughout the document so I could improve on it. The major issue I discovered that all participants did was clicked on the quotes with underlines / different colours. I have underlined all of the quotes in my research book, because in print that doesn’t matter. However, on a device, something underlined indicates a link and this is something I overlooked, and thankfully discovered through user testing.

All users specifically clicked on the arrow rather than trying to scroll through the document. The arrow was intended to either be clicked or work as an indicator you can swipe to the next page. They all attempted to click on the menu but some had issues as it is a very small button and because it’s quite close to the top so if you don’t click it exactly on the spot it opens up the tab at the top and therefore makes it harder to click the button if you try again before getting rid of the tab. Unfortunately this is always going to be an issue for me. I can partially resolve it by making the area of the button larger, but the tab will probably still come up and be a nuisance. Everything else seemed to work quite well and they clicked where I wanted them to - particularly happy to see they clicked the images as although it’s such a simple page, it took a while to get it right for the users to easily understand you can click on the thumbnails to bring up larger versions of the image.

Page 65

Chapter Four

Navigation Elements Throughout the research book and also within the critical reflection, it is discussed how Letter to Jane magazine has been quite an influence on the project. This is a magazine I found later into the project, but is a great example of how digital magazines should be. It’s not an interactive magazine in the way that I am producing mine, but it does engage the readers by taking them on a journey through the content without it just being a click left or right. The chapter menu I have used was inspired by this magazine and since then I have reflected back to Letter to Jane and noticed another feature in the top middle of the composition - it looks as though it is showing the reader how far through the chapter they are. It’s hard for me to tell if this is actually what is happening here as the magazine isn’t available in the UK, but I am going to take this idea and use it for my own.

The quote to the right underneath the image explains why a lot of people still prefer to read. There’s something about being able to feel where you are in the book that appeals to many people still. Therefore, I am trying to think of ways that makes the reader constantly aware of how far they are through each part of the document, without it reflecting traditional reading too much and also fitting with the style of my work. The above image shows how I have executed this idea. There is a circle for every page of the chapter, and when the reader is on a certain page, it is filled in with yellow. As they move to the next page, this yellow ball transitions in to the next one. I wanted it to be more exciting than just changing on each page, so to actually have the ball move from one circle to the other is a small but significant interaction.

I’ve also added the feature of being able to click on the balls to go to specific pages. This isn’t immediately obvious, and a lot of people probably won’t even think of doing it as it’s such a small feature, but on the off-chance that someone does think about doing it, the option is there for them.

Page 66

Outcome development Continuing development

Image 6, Letter to Jane: Miranda (2013)

" Turning the pages of a paper book is like leaving one footprint after another on the trail - there’s a rhythm to it and a visible record of how far one has travelled." (Jabr, 2013)

Page 67

Chapter Four

Page 68

Outcome development Continuing development

Interactive Features Having got quite far into the process of putting the document together, I suddenly realised it was still missing something. I hadn’t used the sliding text interaction that I experimented with at the beginning. I knew I didn’t want to use it too much and actually found it difficult to think of pages it would work most successfully, but I thought it was a waste not to use it at all. I went back to one page which I had already created a design for (see page 60) but wasn’t happy with. I changed it to work with the interactive page I had originally played around with. A larger image is placed on the right of the page and this image scrolls slowly through in the space it’s in. The image on the left slides in but is static. Then the title at the bottom is there for the reader to click and it brings up information about the images in the page.

I am really pleased with how this page looks and if I can use it about three times throughout the document, I think it makes for an exciting change every so often. There is a lot going on in it, but as long as other pages are much more stripped-back then this should be fine for scrolling through a dissertation. Hopefully I have made the title clear enough for the readers to know you are meant to click it so they don’t overlook it or miss it, but when I do the actual user testing, this will be something I will definitely be looking for.

In the images on the left here, I have experimented with two different options for the location of the static image. At first I thought it should be nearer the title so the page doesn’t look disjointed. However, I wasn’t sure it looked right, and when I moved the image up closer to the top of the page, it felt much better. It is more breathable and the hierarchy is clearer. You look at the images first, and then notice the title in the bottom which you click on and then the static image goes (but can come back if they close the text) and the hierarchy changes yet again.

Page 69

Chapter Four

Page 70

Outcome development Continuing development

Page 71

Chapter Four

Page 72

Outcome development Continuing development

Simple Text Pages The experiments I did on page 60 just didn’t work for me. I was trying too hard to make them something special, but when getting feedback for the work I realised it doesn’t need to be. There is so much going on elsewhere that a nicely typeset page every so often is not a bad thing at all. As long as I get the typesetting absolutely spot on, there is no reason I should have pages like this every so often. Just looking at these screenshots compared to the previous ones just goes to show that the less can be more as this instantly looks much nicer than those previous pages.

While it is good that I have such a clear idea behind the entire concept - to create something unlike traditional reading - it has sometimes made me over think the work and try to do something that just looks wrong as I did with these pages before. As well as adding typeset paragraphs, where there are images which don’t need to or can’t be made larger as I have for some, I thought I could create a smaller version of the image feature pages and give the readers some interaction with them. It’s only small, but looks a lot nicer than just an image stuck to the top. The text is okay on it’s own, but if there’s an image there it’s better to make it just a bit more exciting.

On some pages where there is less text but still needs a page of it’s own (like the top right image to the left), I have made the fonts a bit larger and bolder just so it stands out a bit more and is more exciting that a tiny paragraph. Trying to get the line length right for these pages is a bit harder as there’s nothing to line them up with, but I don’t want them to fill the length of the grid. I have tried to make them smaller so they don’t look like an overwhelming amount of text, but I feel like they should line up with something. Perhaps this is just me over thinking it again!

Page 73

Chapter Four

Keeping Consistency After realising I should not have used the underlines for quotes as I have in the research book and removing them all from body text, I realised I hadn’t actually carried on that style much at all other than the contents page (see the top image to the right here). This made me realise something from my research book style that’s missing in the final outcome and so decided to look back at the research book to see where I can keep consistency. I decided to change the chapter pages to be the same dotted underline as they are in the research book. I chose to do dotted lines because it’s just something a bit different to the norm and the headings (as the one above here) are all normal underlines so it’s quite nice to have something different every so often.

This is another typesetting decision I had to make which would be different to the one I used in the printed research book. The top two image to the right are from the digital final outcome and the bottom two are from the printed research book. The thickness of the lines for the contents pages are both three points despite being for separate purposes. These are just lines underneath some text rather than a proper underline of a word. The underline characteristics for the printed chapter pages to match the size and weight of the font is 6pt for the weight of the line with a 10 offset below the words. For the digital it is 5pt weight and 10pt offset. I didn’t want the lines to be too close to the words and I wanted it to feel more relaxed.

The underline characteristics for all of the headings throughout this and the research book (for e.g. the title of this page ‘keeping conistency’) is a 3pt line weight with a 7pt offset. These decisions are all made based on what makes the text look the most appealing and professional. I want to avoid the text looking really closed in together and busy and when I have made a lot of considerations through other aspects of typesetting, it would be a shame for the underlining of words to let the overall appearance down.

Page 74

Outcome development Continuing development

Page 75

Chapter Four

Page 76

Outcome development Continuing development

Bibliography & Sources The least exciting yet necessary part of the document - the bibliography and image sources. I debated with myself whether I should do something exciting with these pages, perhaps make them slide up or down with buttons. But, at the end of the day, this is a page people will probably be less interested in and therefore I think it only needs to be kept to basics.

I reduced the font size of these so I could fit all of it into two pages only and typeset them into the grid layout. Although I didn’t want any special treatment for these pages, I still decided I wanted it to link to the research book style bibliography. In the research book, the bibliography pages are yellow, but for this that’ll make them stand out way too much and I want it to be more subtle. I kept the black background but used the yellow colour for the letter headings and for the links.

These links do work on the document and lead the readers to the internet, but it is easy to get back. This is necessary to do as on a digital device, URLs will be common and so I am showing that these are a part of the digital publishing piece I have created. The pages don’t look terrible, they look very neat and organised and make it very clear to the readers where each source is and comes from in terms of how I have cited it throughout the dissertation. I don’t think I will make many - if any - changes to these pages as at the end of the day it seems a waste to put my energy towards that rather than the many other exciting pages throughout.

Page 77

Image 7, Amelia User Testing (2018)

Page 78

05

Chapter Five Outcome user testing

Outcome User Testing Page 79

Chapter Five

Page 80

User Testing Outcome user testing

Page 81

Chapter Five

Page 82

User Testing Outcome user testing

Outcome User Testing These and the previous pages display the document as I have given it to the participants of user testing. This is the document in it’s entirety, so the first time someone else is going through it all. Previously people have only been through a few pages just so I can get an idea of how people initially used it. This time it’s to get an idea of how the document flows as a whole, as if it were the final outcome. Some bits I have changed from previous ones are the images on the chapter pages pan through in the middle rather than stay static. I have tried to make everything as clear as possible so I can really see how people think they should use the document and see where things perhaps don’t work as well as I had intended to. I’ve told the participants for the sake of saving time, not to read the entire document but focus more on the interaction and animated parts of the final outcome.

Page 83

Chapter Five

User Testing Participants For the user testing phase, I wanted to get a mixture of different types of people to have a go at going through my final outcome to see how they interact. Just over half are people without any association to the graphic design industry, but may have knowledge of how to navigate an iPad. The others are graphic design students - part of my target audience.

It will be interesting to see the difference, or even similarities between them all.

Nikki Billinness, 49 No relation to graphic design Less tech savvy

Richard Manning, 52 No relation to graphic design Less tech savvy

Evie Gilbert, 21 Previous design experience Business University student

Carl Fisher, 24 No relation to graphic design Knowledge of how to use iPad

Sophia Clahar, 22 Graphic Design student

Mhairi Banham, 52 No relation to graphic design IT Manager - fairly tech savvy Laura Perry, 22 Graphic Design student

Molly Hollis, 21 Graphic Design student Elliot Westlake, 19 Interest in graphic design Works in IT - very tech savvy

Unfortunately I wasn’t able to get to everyone to record them using it on the iPad, so I asked a couple to record their own screens going through the URL version of the document to make sure they still understand the interactions.

One participant used it on an iPhone just to see the difference. It’s not designed for an iPhone screen, but this was just to see in comparison to what I’m used to looking at it on - iPad and laptop screens.

Page 84

Videos of user testing on memory stick with work.

Amelia Manning, 19 No relation to graphic design Knowledge of how to use iPad

User Testing User testing participants

Image 8, Amelia User Testing (2018)

Page 85

Chapter Five

Image 9, Mhairi User Testing (2018)

Page 86

User Testing User testing results

User Testing Results Overall, the user testing seemed to go really well. For the most part, all interactions I intended the user to interact with were successful and it seemed to flow really well. The issue I have had is due to my iPad being a few years old now, it makes the document quite slow and this has actually affected how some of the interactions (e.g. sliding text button) look jumpy and not as smooth as they look when viewing on a faster device such as my laptop. The other main issue seen across those who tested on the iPad itself was a lot of problems with the tab coming up when clicking on certain buttons around the edge. I believe this is something I can improve to reduce this happening, but at least with user testing it has enabled me to understand just how much of a problem it really is. Especially as I know it happens so I’m careful when testing.

This user testing was also a good opportunity for me to see where bits could be improved in terms of speed, interaction etc as I did notice a few pages which loaded straight away, but then did the animation seconds later so it almost loads twice which is really annoying and ruins the flow of the overall design. The feedback was good from it too and people liked the interactive side to things. The circles / yellow balls at the top were only interacted with by two people. One was viewing on a laptop and the other on the iPad. I am fine with this particular interaction not being used quite as much as it’s more there in case someone thinks to use it.

One other thing I noticed most of the users did was clicking on elements such as static images and citations throughout the document. I feel this happened a lot because they were told beforehand that it is an interactive document and to look for any interactive elements throughout so this was probably more just in case it did do something. This is fine as for the user testing they were made aware of it, and for someone actually reading it for it’s content they might not think to do this as much. Clicking them doesn’t affect the document at all, it just doesn’t do anything so this isn’t a problem. The only slight problem may be the tab coming up but hopefully readers will know just to tap anywhere in the page to get rid of the tabs.

It was really nice to see people going through my work as it is intended to be used. Unfortunately I didn’t get much time to really make the most of user testing and get as many people as possible to do it, so I managed to do these few when it was convenient for me and the person and focus more on this design journal and final outcome tweaks itself. However, when researching the ideal amount of people to user test, some research actually said you are likely to get the same results whether you use 5 people or 50.

For me, I am quite happy with the amount I did as the results were pretty consistent throughout on what people did and didn’t interact with.

Page 87

Chapter Five

User Testing Results Amelia Manning (on iPad) •

• • • •

Had trouble at the beginning as kept accidentally bringing up the tab.

- From this discovered you could scroll so continued to do that rather than click arrow Specifically clicked the + or x on the reveal more text icons.

- Didn’t notice you could click on any of the text.

Clicked website link on one of the pages Struggled to close menu at one stage but gave up rather than continued trying.

Didn’t interact with the dots at the top

Richard Manning (on iPad) • • • • • • •

Had trouble getting the menu navigation to work as it kept bringing the tab up Specifically clicked the arrow on the contents page which brought the tabs up Noticed I had put the same paragraph twice Kept trying to do arrow at the end of the document Interacted with dots at the top Messages were coming through at the top during this one, which is actually okay as shows how it would be if people were actually reading it – there are always distractions

Carl Fisher (on iPad) •

• • • • •

Couldn’t see the arrow when it was in the black and white image because it blends in, said even though it’s been there the whole time, when they couldn’t see it they didn’t think it was there Specifically clicked the + or x on the reveal more text icons.

- Didn’t notice you could click on any of the text.

Didn’t interact with dots at the top Kept trying to do arrow at the end of the document – need to get rid of this Didn’t interact with dots at the top

Page 88

User Testing User testing results

Laura Perry (on iPad)

Sophia Clahar (on laptop)

•

• • •

•

• • • •

Specifically clicked plus and cross on two heading pages on the first two but then clicks the headings themselves on the next ones Clicked button on sliding animation pages too soon before it loaded but then it does look like it’s loaded straight away - This brought up the tab when she couldn’t get it to work Clicking slightly to the side of the arrow brings up the tab Did click on ‘website’ link in one of the pages and successfully returned to the book Tried clicking underlined headings Takes two attempts to get the menu to open

• •

Molly Hollis (on laptop) • •

Mhairi Banham (on iPad)

•

•

• • • •

• • • • •

Doesn’t use the contents page – just goes straight to next page Interacting with pages quite soon after they appear rather than waiting for everything to load – skipped a couple of chapter pages before they’d loaded Switches between swiping through the pages and clicking the arrow Misses the website link on page 23 Tried clicking ‘Menu Navigation’ title on menu drop down Didn’t attempt to use the dots at the top

Nikki Billinness (on iPad) • • • •

• • • •

Doesn’t use the contents page Tries to click ‘enter’ on one of the first images Tends to click more elements of the page just in case it does something Clicks text sliding pages too soon - I can see why people are doing this though as the side image and heading come up straight away as I can’t change this whereas on other pages everything flows in together. Not sure how to prevent this now Clicks headings to open up more text but specifically the cross to close them again Accidentally gets the tab up but then struggles to use the arrow Clicks on links at the end and successfully returns to the document Takes more than one attempt to get the menu to open but then doesn’t use it

Page 89

Tries to click on the image at one point Tries to click on static image with citation Clicks all of the elements that are meant to be clicked on without hassle – although not the dots at the top but this seems to be common Clicks on website link on page 23 Clicks links in bibliography

Goes through the document really quickly – because I just want to see the interactions Doesn’t use contents page just goes straight to the arrow Uses the menu bar to navigate certain chapters but doesn’t go back to where she left off Tries to click the title ‘Menu Navigation’ Tries to click underlined heading Clicks on the dots at the top Goes to click website link on page 23 but doesn’t

Elliot Westlake (on iPhone) •

• • • •

Initially tried to navigate through the menu icon and actually missed most of the document, got him to try again though to see how he interacted with the pages.

After initial problems, went through the document fine and clicked on most interactions meant to Didn’t use the contents page (Although this isn’t the end of the world as it makes sense to go in order and they can go back) Doesn’t work as well on iPhone as for some reason does the load and reload of pages Buttons are much smaller but further away from the tab so this doesn’t become a problem but it still did come up a couple of times

Evie Gilbert (on laptop) • • • • •

Screen recorded so can’t see exactly where she is clicking although it’s clear when some bits move Didn’t attempt to use the circles at the top although on iPhone these are much smaller Missed one interactive page so didn’t see it Tried to click static images with citations Tried to click the menu navigation title

Chapter Five

Problems With iBooks The biggest problem faced by everyone who tested the final piece on the iPad was the tabs that come up if you click too close to the top or bottom of the page. The image on the right shows the tabs and just how much space they take up. This is why the menu button is really sensitive and the arrow button often has problems too. I have currently made them with such small areas to action that it’s not surprising this is an issue. I hope this can be easily resolved by making a larger area for these buttons which means even if someone clicks slightly off the side of one of these buttons, it should still work.

As someone who has become very familiar with how to use and navigate iBooks, I noticed quite a few people were a bit confused about what to do when the tab comes up as it blocks half of the arrow and the entire menu icon. I am aware you just need to tap on an empty space and it goes away, but quite a few of the users fiddled around with the screen and it either skipped to the next page or it made them give up on an interaction they were just about to go on. If I can find away to reduce the amount of times it comes up, then it should in theory make the flow a lot better and make the readers lives easier as well - one less thing to worry about.

It is a shame this an issue I have as if I had a big budget, this could have potentially been an app where I could have avoided things like this. But, I am making the most of what I have available and so will work my hardest to make this less of a problem for the final outcome. There are various other things I would have liked to have done if I didn’t have the restrictions I do, but this is something that is a lesson learnt from the project and I can talk about this more in the conclusion and evaluation.

Page 90

User Testing Changes needed from feedback

Page 91

Chapter Five

Page 92

User Testing Changes needed from feedback

Tweaks Required Surprisingly, there were less issues than I had expected to have. I thought the user testing would give me a lot of things I desperately need to change in order to improve the outcome, but everything seemed to work quite well.

One concerning thing one participant pointed out was that I had repeated the same paragraph twice. This is where I have copied and pasted from my dissertation into the document but not noticing I’d done the same one. Luckily this was pointed out to me and can be an easy change as there is meant to be a different paragraph there - I don’t need to delete the entire page.

Another thing all participants did was try to click the arrow on the very last page - this was my own mistake for not thinking the last page should have nothing or a different action to the rest of the document, but actually seeing people clicking it without any success has made me very aware this needs to change. The problem with being the only person seeing your own design is becoming blind to the issues you have as you become so used to looking at it. This is why the user testing has really been beneficial and I will probably put a different icon in it’s place.

The only other slight tweak was in some places people still tried to click things that aren’t interactive. For example, I have underlined a few headings and these were quite often attempted to click on. Some people tried to click on the images I had in the pages which were static. I assume because of the citing beneath them, they looked like they might lead somewhere. I’m not entirely sure how to get around that as if they know the document is going to be interactive then I guess they’re just going to try anything which looks like it might do something.

Page 93

Chapter Five

Personal Reflection Without doing the user testing, there would have been some problems with the document which would actually ruin the whole thing. As mentioned before, I hadn’t noticed I duplicated one particular paragraph of text when it was meant to be two separate. I noticed everyone tried to click on the arrow on the last page even though it doesn’t do anything. I saw the issues with the tab and how much people had to try and get rid of it. But seeing all of this will only work towards helping me improve and refine the final outcome to the best possible quality it can be.

At first I was quite disappointed in myself for not managing to get a larger number of people to user test my work, but due to the results being fairly consistent despite some people being less tech savvy than others and not knowing too much about graphic design, I am quite confident it wouldn’t have made much difference to get many more people to do it. It would have also been good to get more of my target audience to test it, but I was within two weeks of the deadline at the point of getting the ones I did and I felt that my energy was better spent working on other elements of the project than going out of my way to set up and film people user testing. If I had reached this point sooner in the project, I certainly would have made an effort to seek more people out to do it, but I spent a lot of time working on trying to get it almost finished before - perhaps this is where I went wrong?

I am happy with the results of the user testing as it is quite easy for me to make improvements and there is nothing completely disastrous about how it’s come out. I know I need to refine some typesetting maybe and work on making all of the interactions absolutely perfect and smooth, and although it does seem to only be an issue on my iPad I am going to try my best to get the sliding text as smooth as possible for the iPad version as I can and if it doesn’t work, at least I know it is not the way I’m doing it that’s the problem, it’s the speed my iPad works at.

Page 94

User Testing Personal reflection

User testing has been a really useful and enlightening stage of my project where I have been able to watch and understand how other people are approaching the design I created and know so well. Even though in my mind something makes sense and works well, someone without this knowledge may approach this very differently and this is what I need to know in order to refine the final piece.

I had expected to have a long chapter next talking about all the things I need to change and how I’m going to do it, but actually there are only quite minor tweaks and changes I need to make based on the user testing. Now it is all about refining what I have created and ensuring it is a high quality, professional outcome. The user testing has been a great push towards knowing and understanding how the final outcome works and what I need to do in order to make it a hassle-free piece of interactive design, particularly for digital publishing which should be quite a leisurely experience which one would do on a journey or in their spare time.

For me, the biggest achievement from this user testing is seeing even people without experience or knowledge of graphic design and those with less technological skills were able to easily navigate the document. Nikki Billinness even stated after doing through the document she’s never very good with using things on tablets and devices but this design was very clear all the way through.

This to me means I have successfully made a hassle-free user experience if this wide variety of different users were all able to successfully navigate the piece.

Page 95

Final Outcome Development

Page 96

06

Chapter Six Final Development

Final Development Page 97

Chapter Six

Page 98

Final Development Changes made from user testing

Area Size for Buttons The biggest issue found through user testing was the areas I had created for the menu and arrow buttons which were too small and if someone clicked just slightly off of it would bring up the tab. This proved to be quite an annoyance through everyone’s experiments, so I decided to make a very simple chance of increasing the area that acts as the button. The top image on the left shows how the buttons previously looked - just literally the icons as they are.

The picture underneath on the left shows the new area I have created to activate the buttons. It seems like a lot of space just for one button, but hopefully it should ensure that people don’t have to be quite so specific when clicking the icon to get the desired outcome and they can have a more hassle-free experience overall. On some pages where the content comes further to the edges of the grid, this may not work as well and I’ll have to decrease the size, but overall it should be okay to have a wider area for them.

It’s also really good to know I don’t have to physically make the buttons bigger and I can just add a larger square and turn it into a button from there.

The menu is the most problematic of the two buttons so ensuring this has more space is important, particularly as I noticed people just gave up with the menu if they couldn’t get rid of the tab to actually view it how it’s meant to be viewed. Things like this aren’t a problem on iBooks on the laptop or as a URL but because the intended use is an iPad digital publishing, I need to make it work as best as I can for this format or else it doesn’t fit the brief or aims I have set myself for the project.

Page 99

Chapter Six

Menu Underlining This wasn’t a big issue in the user testing, but I did notice a couple of people tried to click the ‘menu navigation’ title on the menu and only the arrows specifically. You can click the words for each chapter too but I understand if the title is underlined and not the actual links it could cause confusion. This is only a small thing and probably could be kept the way it is without causing any problems overall, but just to refine it as best as I can I will make a change.

Page 100

Final Development Changes made from user testing

I switched the underlining from the title to the chapter pages as seen above in comparison to the image on the left. I chose to use the same dotted underline as is used for the chapter pages so they link together this way. It could have just had underlines and looked fine, but just for a bit of consistency and to ensure they are clearly linked together, I thought this could be a nice additional touch. Therefore it also means this dotted line style continues through all pages in a way that makes it work well as a URL rather than just decoration as I had tried to before for the quotes.

Hopefully this will mean that the users think to click on the chapters as well as the arrows to flick through the document as that is my intention. I don’t want people to think they can only click on the very small arrow at the end of the drop down menu when they can click on the whole word as well and it will still work the same. At this point it is very small details that are being changed based on the user testing but also based on how I feel about certain aspects after having seen various different people try to use it and how they’ve used it.

Page 101

Chapter Six

Final Development Changes made from user testing

Final Page Button This was my own fault for the user testing - I hadn’t thought to get rid of the arrow on the very last page of the document and everyone clicked it and continued to try to click it at the end. A lot of people then moved onto the chapter menu, but some gave up. I could have continued just to get rid of the icon all together, but I thought it might be good to give an alternative to the menu and return them back to the first page. If someone thinks to click on the menu and return to the contents or to another chapter, then that’s fine too but at the moment there isn’t a function to return to the very first page. It might feel like more of or even a better end to the document if it goes back to the animated first page rather than ending on a boring page of sources if they choose not to use the menu.

Page 102

Chapter Six

Final Development Other tweaks and changes

Contents Arrangement Another small thing which wasn’t a problem through the user testing but just something I noticed myself and wanted to change was the order of the contents page. For the research book the contents page reads across, but on the final outcome it currently reads downwards. I think this should match the contents page in the research book and so I am changing it to do so.

I personally read it this way anyway, and hopefully it will be clear enough with the number on it for any user to easily understand and navigate where everything is without any trouble. I’ve moved the contents over slightly too as it’s quite narrow and feel it would be better placed in the centre of the page rather than off to one side or the other. This may be fiddled with between now and the final deadline, but at the moment I can see how I want it to be.

Page 103

Chapter Six

Image Highlighting Slightly inspired by some of the results from user testing, I decided instead of having all images highlighted when the page loads (as seen above) I will change it so only the image which is showing is highlighted. A few people still went to click on the first image on these pages, so I thought this may make them notice the image showing is the one highlighted and go to the next two.

If it doesn’t, that’s fine too but it’s just to enhance the interactions overall.

Page 104

Final Development Other tweaks and changes

As well as potentially working a bit better for the users, I think this probably makes more sense than having them all highlighted.

I highlighted them all in order to make it clear the user needs to interact with them, but actually the way it’s laid out now is much more clear and even one highlighted draws the readers attention to it to notice something needs to be interacted with here. Just having one highlighted creates a clearer hierarchy too to demonstrate the large image is the thumbnail image which is highlighted so the users don’t get confused by lots of different highlighted images. I am pleased with the decision to do this.

This is just another part of making the user experience hassle free without having to spell out every single interaction for the users to do.

This is still clear enough to click the images without it being unnecessarily highlighted. It actually seems more sleak having just the image which is being shown highlighted and something people within user-interface design would definitely be using instead or considering for their professional work so this is important for me to also consider throughout.

Page 105

Chapter Six

Tweaks & Changes This design journal will be finished before the final completion of the final outcome so it can be sent off to be printed. Therefore the final piece may not look exactly as it does as discussed in these last few pages. However, I have a really clear idea of what I need to do from now until the end of the project that there shouldn’t be much more development to show anyway.

The design development has been really clear all the way through and I have not strayed away from my ideas very much at all which has allowed me to put all of my time and effort into refining this idea.

I am really pleased that I’ve reached a stage in the project with over a week to go where I can just concentrate on perfecting all of the aspects of the final outcome and refining every bit to ensure it is a high standard, professional outcome. The things I will be focusing on from now on include making sure all interactions are smooth and flow well within the document. This includes the menu icons, arrows to next page, headings to open up more text and particularly the sliding bar of text interactions as on iPad this is slightly lacking and jumpy. This may be an iPad issue, but I do have the time to see if I can refine it to work better.

Away from interactions, I will also be working on refining the typesetting across the final outcome again to ensure a professional final outcome. As an editorial piece, typesetting is so important and can really make a difference between a poor looking page of information to a high quality page. I spent a lot of time doing this in the research book and so it is important to keep a consistent level of quality across the two outcomes.

Typesetting will definitely vary between the two and so it won’t be exactly the same experience, but this is what I wanted from the project - to improve my typesetting within both print and digital and I am luckily able to do so.

Page 106

Final Development Other tweaks and changes

At this stage in the project it is all about refining the outcome to ensure it is at a high standard and consistent with the standard set from the research book. Typesetting will be a key element to focus on now but also refining all interactions and animations for a professional, high quality final outcome which reflects my own aims as well as relating to the content of the dissertation.

Page 107

Image 14. Final Outcome Work (2018)

Page 108

07

Chapter Seven Conclusion

Conclusion Page 109

Chapter Seven

The design process for this concept has felt so natural from the very beginning and this has enabled me to put all of my time and efforts into producing a final outcome which reflects the topics surrounding it as best as possible and at a high, professional standard.

This is the project which I have felt the most connected to and as a very important project, I have put a lot of time into the design process and particularly the nitty-gritty of it. As discussed previously, I have taken a lot of care and consideration towards the typesetting in both the printed books and the outcome itself. Editorial design has been the key area of inspiration for me throughout the majority of the degree and this has been my opportunity to really delve deeper into what it means to be an editorial designer and look into the history and context surrounding the industry.

This has definitely helped guide the design of the work and really give me a wider understanding of the field. I no longer overlook the layout of text and it is really important to me to make sure everything is highly refined throughout all aspects of this project.

Page 110

Conclusion How the design process has gone

The Design Process In previous projects I have been quite indecisive about ideas for my final outcomes, and it has caused me to waste a lot of time on experimentation rather than focusing on one clear idea. With this project, I have been very passionate about the topics and what I wanted to produce and this enabled me to put all of my energy into the design process of one idea. I did have a lot of time at the beginning experimenting with different software and almost giving up, but this has all been towards the one idea and without this first problem, the final outcome may not have been what it is now.

I have learnt so much from the design process of this project.

At some points I was concerned I wasn’t going to be challenging myself enough as I used the same software for the last project in second year, but what I’ve been doing here is so different they can’t really even be classified in the same category. I have extended my knowledge within InDesign’s interactive elements and I am now so much more confident in what can be done using it. The interactions and animations I have used in this final outcome are so much more refined and professional than that final outcome and this is because I have worked so hard to produce something which really highlights what I think digital publishing should be.

There have been and continue to be problems through the journey to the final outcome, but I am constantly finding ways to work around this and keeping this as motivation to produce the work as best as I can. These problems such as limitations in the software I’m using for things like responsiveness and working within a single page, iPad becoming slow and affecting the quality of interactions and being unable to send the file to other people to view easily have not affected the design process itself and I have continued to power through and improve the quality of the design regardless of what’s going on elsewhere. These are problems that I can work around. As long as the design is to a high standard, it doesn’t matter so much whether it’s slow as I can produce it in other ways to demonstrate.

Page 111

Chapter Seven

Problem Solving I have mentioned in the previous page some of the problems I’ve faced throughout this project, and I suppose having problems to solve can only make a project stronger. The first issue I’ve had which sadly there isn’t anything I can do about - and I have tried - are the restrictions which come with Adobe’s InDesign. In tutorials throughout the project it has been reminded to me to constantly contextualise my work and think of how professional designers would be creating the same thing by adding certain features for e.g. double tapping to zoom in. I have tried to add a zoom in feature to the document but sadly this only works in PDFs and this is not intended to be viewed as a PDF. I have constantly thought about how this fits in with professional work, but with the restrictions it’s been hard to keep up to those standards. Another restriction within InDesign is the lack of responsiveness for the design. I am stuck with one single page at a time.

The second issue is I seem to have been unsuccessful in getting other people to open the epub file when I’ve sent it to them. I’m not entirely sure why this has been an issue as I thought if they had iBooks installed on their devices then they should easily be able to open it but people who have iBooks have tried and it just says the file is unable to open. I am getting around this issue by actually submitting my own personal iPad for the deadline as the file will be ready to be viewed instantly on my device and it means I can constantly view and update it throughout the design process. This is a minor issue which will be solved.

Page 112

Conclusion Problem solving throughout

The final issue is the speed at which my iPad works. It is quite an old tablet now and so it doesn’t work quite as quick as it once did, but typically in the past couple of weeks it has slowed down quite a bit and it is therefore affecting the way the interactions and animations work when using the device. It is only small the affect it is having, but when it takes a few seconds to load each page and makes the interactions look jumpy, it could affect the overall look and feel of the outcome. I have decided to still submit my iPad for examination as it would be a shame for the examiners not to get a feel for how the document should flow on the device it’s intended to be used on. However, I have decided to also submit extra files alongside it to ensure it is clear how the document should look as it’s much faster and flows better when I view it on my laptop.

I am going to submit a URL version (see image on the left). This is nowhere near as nice as working on an epub but it gives the readers an option to view a faster version of it as well as seeing how it works on the iPad itself. I will also submit an epub file in the hope that someone may be able to open it themselves. Alongside all of this, I will put together a video (see image above) which demonstrates how the document should flow. So far I have filmed myself using the document on my laptop screen as it is so much more smooth, but realistically it needs to change as there wouldn’t be a cursor on an iPad document. I think this has given me enough option to ensure the examiners and readers know it does actually work well.

Page 113

Chapter Seven

Personal Reflection Overall, I am really pleased with how the final outcome has come out. It is bold with a lot of strong typography throughout and accurately represents how I feel digital publishing should be working. Obviously with the problems I faced, there is still a lot I could have added with the right budget and time frame, but for the little amount I had I am really pleased. As I’ve said before, the software for this project is the same as what I used for the last project of second year, looking back I had barely scratched the surface of it’s capabilities. That project was also so different as required different interactive elements and was intended for desktop viewing.

Although I knew I wanted to do a digital final outcome, I am really pleased I was able to produce professional printed books alongside it and continuing the style was an exciting challenge and gave me a new perspective on editorial design, particularly when it comes to producing type for digital outcomes. I am pleased at the point of giving up on doing a digital outcome I was still pushed to do it and I feel I have produced work which demonstrates why I was encouraged to do so. I think the problem I had at that point was I had such a clear view of what I wanted to do based on work such as Divide and Verso it became hard to think of settling for something else. I am glad I did though as it became a worth-while challenge for the project as well.

I think at one stage it became a concern the final outcome may become a bit too interactive and over the top, which was never my intention, but I feel I managed to find a good balance between content driven pages and exciting interactive and engaging pages that it works well to keep readers interested in what’s going on. There is a good consistency throughout the document too but enough variation between the pages for it to not be the same thing all the way through. I am pleased I was able to find this balance and eventually become peaceful with the ideas of simply typeset pages of long text.

Page 114

Conclusion Personal reflection

I do think the final outcome has a professional feel to it as the quality of the design as well as the interactions within it has been so carefully thought out and considered through every step of the process. I will continue to refine each element of the document from now until the end to ensure the high quality continues to show.

Now the main foundation of the final outcome has been built and the flow and design is set in stone, I have the freedom to go back to it and work on every little tiny detail to make sure everything is as close to perfect as I can possibly get. I do want to get a professional looking outcome to demonstrate my place within the industry and also show how important it is to me to refine and finish a piece to a very high standard. Thankfully my time management has been good for this project and I have a substantial amount of time to put my focus on doing just that.

“While it is almost impossible and perhaps foolish to try and predict emerging trends in design, it is useful to touch on technology and other changes which are affecting design practice.� (Caldwell & Zappaterra, 2014:226) and I feel this is something I have really considered throughout this project and challenged myself to concentrate on.

Page 115

Chapter Seven

Page 116

Conclusion Personal reflection

Page 117

Chapter Seven

Research A

D

H

Amin, M (2018) RE: Soft Cover Binding [Email sent to Holly Manning, 16th March 2018]

Dawood, S (2015) How can you keep print design exciting?

At: okno.uk/r/372mt (Accessed 09/12/2017)

Hallett, S (2018) RE: Book print enquiry [Email sent to Holly Manning, 18th March 2018]

Anderson, A (2016) ‘We need to reinvent print’ In: Computer Arts (254), pp. 26

B Baverstock, A (2011) The Naked Author: a Guide to SelfPublishing London: Bloomsbury Beckett, A (2017) The Story of the Face by Paul Gorman review – the style magazine and British pop culture At: tinyurl.com/ y9ryn65x (Accessed: 02/03/2018) Bennett, L (s.d) Print versus Digital: The Great Debate At: tinyurl.com/y7ppcwzc (Accessed 20/03/2018) Bonner, E.M (2015) Millennials and the future of magazines: How the generation of digital natives will determine whether print magazines survive, The University of Alabama.

Dempsey, M (2013) Tom Wolsey: My Kind of Town At: okno.uk/r/372mj (Accessed 01/04/2018) Douglas, S (2014) The Making of Wallpaper* In: Caldwell, C & Zappaterra, Y (2014 Editorial Design London: Laurence King Publishing. pp 10

E Elam, K (2004) Grid Systems New York: Princeton Architectural Press

F Fano, R (2007) ‘The Campaigns Trail’ In: Losowsky, A (ed.) We Love Magazines Luxembourg: Mike Koedinger. Pp.82-83 Feather, J (2006) A History of British Publishing London ; New York: Routledge

Briggs, M (2016) Journalism Next: A Practical Guide to Digital Reporting and Publishing (Edition 3) USA: Sage Publications Ltd

Folkenflik, D (2011) Inside the New York Times Page One and the Future of Journalism USA: Public Affairs

C

G

Caldwell, C & Zappaterra, Y (2014) Editorial Design London: Laurence King Publishing

Gestalten (2011) Behind the Zines: Self Publishing Culture Berlin: Gestalten

Carson, J (2014) 6 Reasons UK Magazines are Struggling Online At: tinyurl.com/ybtklu3h (Accessed 19/01/2018)

Goldman Sachs (s.d) Millennials: Coming of Age At: tinyurl.com/ nlwknfr (Accessed 12/01/2018)

Ceschel, B (2015) Self Publish, Be Happy: A DIY Photobook Manual and Manifesto New York: Aperture

Gomez, J (2008) Print is Dead: Books in our Digital Age London; New York: Macmillan

Page 118

Hannif, Z (2012) Niche theory in new media: Is digital overtaking the print magazine industry?, University of Nevada, Las Vegas.

Harrison, C (2018) Re: Questions for my final year project! [Email sent to Holly Manning, 25th March 2018) Hogarth, M (2014) How to launch a magazine in this digital age USA: Bloomsbury Hollis, R (2014) Graphic Design: A Concise History London: Thames & Hudson Ltd

K Kane, J (2011) A Type Primer (Second Edition) London: Laurence King Publishing Ltd

L Leslie, J (2013) The Modern Magazine: Visual Journalism in the Digital Era London: Laurence King Publishing Ltd Leslie, J (2014) Profile of a Design Consultant: Jeremy Leslie In: Caldwell, C & Zappaterra, Y (2014) Editorial Design London: Laurence King Publishing. pp 124-126 Lewis, A (2016) So you want to publish a magazine? London: Laurence King Publishing Ltd

Honeywell, P & Carpenter, D (2003) Digital Magazine Design with Case Studies Bristol: Intellect

Losowsky, A (2007) We Love Magazines Luxembourg: Mike Koedinger

I

Lumby, N (2016) Sensory Printing: Engaging all the Senses At: okno.uk/r/372Ff (Accessed 10/01/2018)

InfoPlease (s.d) Publishing Timeline At: okno.uk/r/36D7n (Accessed 20/03/18)

J Jabr, F (2013) The Reading Brain in the Digital Age: The Science of Paper versus Screens At: tinyurl.com/kf6moy7 (Accessed 15/03/2018) Jamieson, R (2015) Print is Dead. Long Live Print: The World’s Best Independent Magazines Munich: Prestel Verlag Jones, T (2010) i-D Covers 1980 – 2010 Thirty Years of i-D London: Taschen

Ludovico, A (2013) Post-Digital Print: The Mutation of Publishing since 1894 (2nd Edition) Netherlands: Onometopee

M MagMaker (2013) What is a Magazine? Five Surprising and Useful Definitions At: okno. uk/r/36v2l (Accessed 20/03/2018)

Conclusion Bibliography

Imagery S Miller, D (2005) Materiality Durham, N.C: Duke University Press Monteyne, J (2013) From Still Life to the Screen: Print Culture, Display, and the Materiality of the Image in Eighteenth-Century London New Haven: Yale University Press Moore, T (s.d) Product At: tinyurl.com/y93mvplk (Accessed: 18/03/2018)

Saracevic, E (2013) 40One Magazine At: tinyurl.com/ ybcmj67m (Accessed 12/03/2018)

All images within this design journal are screen shots of my own work, with the exception of the below: IMAGE 1

IMAGE 6

Shaughnessy, A (2010) How to be a Graphic Designer Without Losing Your Soul London: Laurence king Publishing Ltd

Manning, H (2018) Dissertation Copies [Photograph] In: Possession of: Holly Manning: Lightwater.

Moore, T (2014) Letter to Jane Magazine [Image] At: okno.uk/r/378n3 (Accessed 28/02/2018)

Smith, K (2012) The Publishing Business: From P-Books to E-Books Lausanne, Academia

IMAGE 2

IMAGE 7

Manning, H (2018) Research Book [Photograph] In: Possession of: Holly Manning: Lightwater

Manning, H (2018) Amelia User Testing [Photograph] In Possession of: Holly Manning: Lightwater

IMAGE 3

IMAGE 8

Huynh, J (2013) Divide Magazine Madonna Interview [Image] At: tinyurl.com/ydcjyh7u (Accessed 20/02/2018)

(As per image 7)

Moss, A (2016) 50th Publication Design Annual MA: Rockport Publishers

Smith, M (2015) People of Print: Innovative, Independent Design and Illustration London: Thames & Hudson

N

Stam, D (2014) Inside Magazine Publishing London: Routledge

Newman, R (2014) Letter to Jane: The Future of Magazine Apps At: tinyurl.com/ycrjthde (Accessed 19/03/2018) Nikola (2013) History of the Magazine At: tinyurl.com/lg4a2fu (Accessed 15/03/2018)

P Phillips, A (2014) Turning the page: The evolution of the book Oxon: Routledge Poynter, D (2006) Dan Poynter’s Self-Publishing Manual: How to Write, Print and Sell Your own Book Santa Barbara: Para Pub

Q Quinn, A (2016) A History of British Magazine Design London: V&A Publishing

T Taylor, S (2006) 100 Year of Magazine Covers London: Black Dog Time Inc. (2016) Wallpaper Media Information 2016.

At: tinyurl.com/yczmf99e (Accessed 10/01/2018)

W Wallpaper (2011) iPad FAQs At: tinyurl.com/yd8pksjz (Accessed: 12/01/2018) Why Reading Matters 1 (2009) [Television programme online] Pres. Carter, R. BBC At: tinyurl.com/y7u2sdc7 (Accessed 10/02/2018) Woodward, I (2007) Understanding Material Culture London: Sage

Page 119

IMAGE 4 Havik, M (2015) Verso Digital Magazine [Image] At: tinyurl.com/yasasuwp (Accessed 20/02/2018)

IMAGE 5 Nourished Journal (2014) Nourished Journal Digital Magazine [Image] At: okno.uk/r/378mf (Accessed 20/02/2018)

IMAGE 9 Manning, H (2018) Mhairi User Testing [Photograph] In: Possession of: Holly Manning: Lightwater

Chapter Seven

Conclusion End Quote

"Creativity is about risk-taking, it’s about the rejection of comfort, and it’s about sweat -not the sweat of fear but the sweat of hard work."

(Shaughnessy, 2010:30)

Page 120

"Creativity is about risk-taking, it’s about the rejection of comfort, and it’s about sweat - not the sweat of fear but the sweat of hard work."

(Shaughnessy, 2010:30)

Printed by

Mixam Online Printers