Layout: GCU Fashion ShowGraphic DesiGn 2: Layout

craiG hausman

Graphic Design 2: LayoutFinal Coursework Submission

In this book you will see experiments within a range of layout styles for a wide variety of media - from magazine and brochures to layout designs for web platforms. This will be presented in order of research and investigation, initial designs responses then final designs. This will allow you to see how re-search has informed the development process leading to finished outcomes for each project.

Hausman PublishingGlasgow Caledonian UniversityDepartment for Engineering and the Built Environment70 Cowcaddens Rd Glasgow, Lanarkshire G4 0BA

2013 ©

Contents

13

9

15

21

27

35

OVERVIEWDESIGN FOR GCU MAGAZINE: OUTLOOK, INCLUDING FRONT COVER AND SPREAD DESIGNS

LAYOUT INFOGRAPHICRESEARCH INTO LAYOUT ACROSS A WIDE RANGE OF MEDIA, INFORMING A DESIGN FOR AN INFOGRAPHIC POSTER

DOUBLE PAGE SPREADSEXPERIMENTS IN LAYOUT OF FASHION MAGAZINE SPREADS USING BOTH BLACK & WHITE AND COLOUR

HTML E-MAIL LAYOUTSEXPERIMENTS IN E-MAIL LAYOUTS BOTH IN HTML AND CSS

WEB DESIGN/LAYOUTDESIGN FOR GCU FASHION SHOW WEBSITE

FASHION SHOW BRIEFDESIGN FOR GCU FASHION SHOW 2013 PROGRAMME, TICKET AND POSTER

BROCHURE LAYOUTSDESIGN FOR GCU MAGAZINE: OUTLOOK, INCLUDING FRONT COVER AND DESIGN SPREADS

Overview

Overview

ONE

This module uses the skills, knowledge and theories

learnt in previous and concurrent modules

This module uses the skills, knowledge and

theories learnt in previous and concurrent

modules to build upon Graphic Design

One by the exploration of layout. Principles

and guidelines will be explored through

a series of projects that develop layout

skills and vocabulary across a range of

media. As these skills develop, projects will

explore more complex and challenging

formats and focus on digital media. Initial

knowledge and theory was introduced as

a whole in lectures with visual aids (digital

projector). This module follows the studio pedagogy by focusing both teaching and learning

within a studio environment - time spent in practicals will be used in this way. Providing a

consistent space for students to work has been proven to engender greater opportunities for

peer feedback, greater commitment to the course and a sense of ownership and belonging

within the university. This studio space must provide the opportunity and facility to work with

and without computers (industry standard computers equipped with design software and a

colour printer). Regular peer and tutor feedback will build skills in evaluation and critique as

student work is further discussed within small, group seminars.

Two-dimensional representation and design software skills will be used and developed in the

creation of project work alongside sketchbook work evidencing the design process.

Graphic Design 2: Layout Final Submission

TWO

Overview

Layout Infographic:The aim of this project was to acquire skills in layout design by researching a wide variety of media. The project required a thorough investigation into all aspects of layout design across a wide variety of mass-media in order to better understand and evaluate the techniques used.

Understanding the various style of layouts adopted by various forms of mass-media.

Layout Infographic

THREE

Firstly, it was necessary to compare and contrast different layout styles and designs. In order to gather a large body of research I chose to research layout design in fashion magazines and newspapers. Within each I selected 3 different examples, each directed toward a unique target audience. Glamour, Vogue and Harper’s Bazaar were selected for fashion magazines whilst The Sun, The Guardian and The Times were selected for newspapers. Initial research and investigation identified the following layout principles.

• White Space - space between textual/ visual elements • Alignment - alignment of graphical elements • Balance - distribution of graphic/ textural elements • Structure - how content is ordered • Grid/ Column Use - provides a template for layout styles • Typography - how hierarch is achieved • Proximity/Unity - spacing of elements on a page • Visual hierarchy - how the eye is guided through information • Repetition - repetition of design elements throughout layout

FOUR

Layout Infographic

Layout Infographic

FIVE

Research:• The Sun newspaper adopts a mainly visual layout mode where images are used throughout with supporting text.

• There is very little consistency and balance, structure depends upon the •content which is largely asymmetrical

• White space does not feature in any great significance

• Colour tends to come from the large images used however heavy weight black text tends to stand out against the cluttered and chaotic structure

• Typographically, the serif body text is left justified, headline text is sans-serif, hierarchy is achieved through its varied point size and weight

• Adopts a manly verbal approach to layout with few images used however ones that are tend to be large of fight for focus with textual information.

• White space is used to create space between columns and thus content allowing to breathe and become easily digestible

• A neutral colour scheme allows the viewer to focus on the content better.

• Left justified serif body text gives a grid-like structure to the information

• Consistent 5 column layout with images breaking the order, used for emphasis and in support of corresponding body text

• Verbal based approach to layout with large amounts of text without much supporting visuals.

• White space is used to am minimum and serves to separate the 5 columned symmetrical structure

• Minimal use of colour drawing attention to the information

• Left justified body text works well within the column structure however often there are large gaps and hyphenation within the text, breaking the flow.

Newspaper Layout

The Sun market their newspaper to young and adult men,

nonprofessional and looking for entertainment, as such

the layout design is largely image based, with heavy

headline text to grab attention. The content ordains an

asymmetrical structure that lacks balance and consistency.

The Guardian markets their newspaper from young to

adult professionals who have some education. The visual/

verbal synergy approach to layout allows a balance of

both and the column structure allows a clear hierarchy of

information.

The Times is aimed at educated mature professionals

who seek information as opposed to entertainment. Due

to this the layout is structured in a clear manner with

text featuring strongly and large caption supporting

professional photographs.

Layout in newspapers is widely varied

amongst the many that exist, this is due to

there being a different target audience that

each aim to present to. Here I will examine

layout approaches from this selection of

low to high end newspapers.

Layout Infographic

SIX

Magazine Layout

Glamour is a low end fashion magazine and is marketed

toward young, non-professional women who seek gossip

and fashion related entertainment, as such the layout

does not follow a formal structure and is varied dependent

upon the content and image use.

Vogue is mid-range and is marketed to female consumers

who have a higher expectation with fashion news and

features relating to all aspects of fashion.

Harpers Bazaar is a high-end fashion magazines aimed

at older professional women who seek out the cultural

aspects of fashion as well as its aesthetic.

Similar to newspapers, magazines are designed

in accordance with their target audience, and

since this is mainly women there can be far more

commonalities than seen in newspaper layout

designs.

• The inconsistent layout is dependent upon the content and image. The visual approach to layout ensures images are supported with text and descriptions.

• Margins are smaller than Vogue and Harpers Bazaar due to the preference for content over aesthetic value

• Asymmetrical. Symmetrical layout used in tandem on double page spreads

• Adopts a visual/ verbal synergy with equal importance given to both text

and image throughout the magazine, with a consistent approach to layout.

• White space is used to an almost symbolic reference and frames

content.

• Mainly feature asymmetrical layouts, especially with the combination of

text and image. This however does achieve a good degree of balance

since the adjacent text has increased weight and point size.

• This primarily verbal based magazine tends to use a columned structure with a large degree of white space within the margins and gutter.

• The serif body text is left flush, allowing more space along the right margin, and hierarchy is achieved through increased weight or point size as well as visual elements such as increased point size on characters at the beginning of the feature.

• Symmetrical layout is attractive to the eye and draws the viewer into the content.

Glamour

Vogue

Harpers Bazaar

Research:

SEVEN

Layout Infographic

Repetition

Graphical elements are repeated

throughout a design, this can be through

colour, line, shape, point and weight size

etc

Alignment

Everything on a page should be visually

connected, elements that are aligned

become connected

Typography

The arrangement of type on a page to

create a meaningful order of information,

such as hierarchy. Includes typeface

elements such weight and point size.

Proximity

Visually similar items should be grouped

together thus creating visual cues of

information through text and image

White Space

The space between text and graphics,

the more the space the more easily

comprehensible the information is

Visual Hierarchy

The overall structure of visual information of

a design where there is a clear progression

of importance

Balance

Used to create an organised and

comprehensible structure of information

with text and visual elements

Layout:Design Principles

Having analysed the layout designs of both magazines and newspapers the following list of design

principles should always be considered when approaching a layout style. It must be considered

who will be interacting with the design since the techniques used will vary.

The above criteria graph was created to easily compare the

different layout techniques employed by the magazines and

newspapers researched.

Criteria graph

We opted to reflect our research into tabloid layout in the design for our infographic, using common

margins and column values as well as achieving hierarchy through weight, point size and italicisation.

Our final design reflects the principles of layout design

EIGHT

Layout Infographic

Final Concept:Group Infographic

Double Page Spreads:This project utilised earlier research in its application of appropriate layout designs for a double page fashion spread. The brief required double page spread layouts using only black text on a white a background and spreads that used colour, any visual element as well as image adjustments

Applying research from the various layout styles adopted in mass-media.

Double Page Spread

NINE

From the layout design techniques learnt in creating an infographic, I was tasked with applying this to 12 double page spreads for a fashion magazine. Due to the nature of the magazine it was important to understand the user so as to appeal my layout design to that target audience. I experimented with different styles to appeal to different audiences from low end to high end. The first part of the project required six layout styles for an A4 double page spread using only black text on a white background; grid and column structures and

only rectangular or square photographs. The second part of the project expanded on this with the addition of colour, visual elements such as frames, lines and boxes, pull quotes highlight areas of information, page headers and page numbers. This allowed me to add design elements to a plain structure focusing on the progression of important information where hierarchy is clear and consistent throughout; in tpyography, design elements, colour and balance.

TEN

Double Page Spreads

Double Page Spreads

ELEVEN

Double Page Spreads::Early Sketches and Development

The early sketchbook work shows experimentation

with grid structures and columns in order to

organise information in a clear manner. I have

considered how white space can be used to frame

the content and allow it to be easily understood.

Early ideas suggested refinement of gutter

margins and well as document margins

Early sketchbook work experimenting with simple grid and column structures

These column and grid guides

were created to give me an

idea how text and images

content can be balanced

on a page and allow me to

understand where white space

can be employed in order to

direct the eye toward content in

a progressive way where there

is obvious hierarchy.

Sketchbook development

Double Page Spreads

TWELVE

The spreads have been created through

the placement of black text on a white

background in a structured manner through

columns and grids. Images were required

to be square or rectangular.

These experiments in double page spread layout

show a variety of ways to structure content

using grids and columns. There has also been

consideration of balance whereby the textual and

visual elements of the spreads work well together

and thus allow the eye to move from element to

element.

White space has also been a priority in allowing the

content to breathe and work within it setting.

Through the repetition of shape I have echoed this

in many aspects of the column and grid structure of

these layouts so as to guide the eye throughout the

information

Final Concepts With Using Only Text and Image.Final Concepts:

Final Concepts using black text and im

ages only

Double Page Spreads

THIRTEEN

Through the grid structure I have a created a layout that has

good balance, with text and image being symmetrical on the

spreads. This allows the layout to appear in sections thus

making the layout user friendly and easier to follow.

The repetition of the wight allows the eye to go to the

important areas thus creating a visual hierarchy that does

not deter from the images nor the white space.

Through the tracking values the text can breathe and sits

well in flush left ragged right.

Exercise 1: Anatomy

This double page spread uses a good deal of negative

space which frames the column and grid structure allowing

the dominant shape to appear to break through.

I have considered balance in order to reflect the textual

areas - in turn this grounds the visual elements in a fixed

structure thus the eye is guided through the important areas

with ease.

Colour balance has been created through the use of the

pinks and blues, with weight and point size value changing

depending upon the proximity of the visual elements

Exercise 2: Anatomy

Layout Design from

Exercise 1Layout D

esign from Exercise 2

FOURTEEN

Double Page Spreads

Final Concepts:Final Concepts Using Visual Elements

Through the addition of colour and shape

to the earlier double page spreads using

just black text on a white background, I

have created 6 varied layout styles that

incorporate balance, white space and visual

hierarchy.

Typography

Throughout most of the double page spreads I have

used flush left text alignment with increased leading

to allow the words to san-serif words to breathe.

Hierarchy is achieved through text orientation,

weight and point size and is used consistently

throughout a spread.

For emphasis, left justified text has been used to

create a contrast, especially in headline or caption

text.

Final concepts incorporating a range of visual elements

HTML E-mail LayoutsThis project aimed to broaden my understanding of how we interact with layout not only in the real-world but also online. It enabled me to experiment with layout design for online through exercised in setting up a layout format using HTML & CSS.

Applying layout techniques to aspects of online layouts for E-mail.

HTML E-mail Layouts

FIFTEEN

Using edited text supplied and 3 images I created twelve e-mail style layout designs. The requirements of the project restricted the dimensions of the e-mail to work within a fixed width of 600px however there was no restriction on the width since the user can scroll down an e-mail. Using both InDesign and Dreamweaver I experimented with which program would deliver the best concept design and thus worked mainly within InDesign for efficiency with Illustrator being used to create visual elements such as shapes The

project was split between designing an e-mail layout using only what could be achieved in HTML and then in CSS. Though HTML limited a good degree of creativity, it did encourage me to understand the concepts of basic web layout, using columns and grids to act as foundation for later visual elements to be added.

SIXTEEN

HTML E-mail Layouts

HTML E-mail Layouts

SEVENTEEN

Initial Ideas:HTML Layouts

I began thinking about grid structures and

columns in order to create a well balanced

structure that would facilitate hierarchy.

These initial ideas show early layout ideas.

HTML Layout 1 HTML Layout 2 HTML Layout 3

Working within the width constraint of 600px I began thinking about how to position the information where users

did not have to scroll too much. I was concerned with balance, where textual and visual elements held equal

importance so as to lead the eye through the information. I created hierarchy through changing the weight value

in the layout title and sharply contrasting this with an opposite weight, throughout each layout, I used this to

create a sequence of importance evident in sub-headings and event details. Event information

such the title and date were grouped together in order to separate content and allow the viewer

to understand these as separate

elements, drawing the eye toward the

content but also back up at the event

details.

.

HTML E-mail Layouts

EIGHTEEN

Final Concepts:HTML Layouts

I elaborated upon the early ideas and considered how white

space could be employed to separate the content and create

a visual impact that allowed the content to breathe. I used

repetition to allow the eye to pattern elements.

Through expanding the height I was able to space out the content and

experiment with various alignments in order to connect the visual elements

throughout the user scrolling.

Typographically I used flush

left alignment for a natural

text line and left justified to

create a shape with the text

that was consistent with the

square images, this example

of repetition guides the eye,

I was concerned that this

approach would lack variety,

causing the eye to gloss

over the grid-like structure

as whole shape in itself,

causing confusion and lack of

clarity. However, with a good

degree of white space I think

the overall aesthetic attracts

the eye as content is spaced

enough to be comprehended

on its own and as a whole.

Final HTML layout 1 Final HTML layout 2 Final HTML layout 3

Final layout designs for HTM

L Emials

HTML E-mail Layouts

NINETEEN

Initial Ideas:CSS Layouts

Expanding upon the earlier work with HTML layouts, this part of the

project dealt with the addition of visual elements to further achieve a

visual hierarchy, adding to the overall meaning of the layouts. The colour

scheme was echoed from colours within the images, repeating a theme to

create an identity. This combination of visual elements is essential when

appealing to a specific target audience

CSS Layout 1

Using the elements that are

available using CSS such as

shape from 'div' tags and the

ability to place image, I created

a single column structure and

repeated visual elements

such as shape and colour to

give a sense of repetition and

continuity, essential when there

is a good degree of vertical

scrolling, this keep the user

connected thus their interest

remains

CSS Layout 2 CSS Layout 3

TWENTY

HTML E-mail Layouts

Final Concept:CSS Layouts

Final layout designs with a more balanced colour scheme,

structure and white space allowing elements to breathe.

Visual elements such as boxes serve to accentuate content,

whilst also creating a sense of repetition and continuity.

Final layout designs for CSS Em

ials

Web Design LayoutThis project expanded upon the GCU Fashion Show project by adding to their existing range of media by including a website. I created a website that tied together the visual identity I had experimented with in the ticket, programme and poster, using the same typographic scheme.

Understanding the various style of layout adopted by various forms of mass-media.

Web Design Layout

TWENTY ONE

The purpose of a website for the GCU Fashion Show is to create a platform for which students can celebrate their artistic efforts and showcase their work in a professional manner that will emphasise and articulate the creative talent on offer. The website will also promote the university as a desired institute for studying fashion and fashion design related courses thus becoming an advert to prospective students. It will be a chance to demonstrate to the wider community, including families and friends of the students, fellow

students of fashion and those with a general interest, the culmination of their academia. Perhaps more importantly, it will enable employers to see the range of talent and skill on offer. The design concepts I created experimented with navigation, structure and layout to allow users to know exactly where they need to go in order to locate the information they need, how they got there and how they can get back. The visual hierarchy I created allowed the user to focus on the Most important information, achieved through colour and through using real-world analogies, such as incorporating a folder system that highlight what page the user was on. The varied column structure allowed the viewer to select from 3 option within each page, and subsequently each page would have links to other content to ensure the amount of clicks performed by the user was low.

Overall the website carried the geometric theme from the range of media already designed and thus acted as a brand.

TWENTY TWO

Web Design Layout

Web Design Layout

TWENTY THREE

Early IdeasWire-frames

In order to create a website for the fashion show it was necessary to create a wire-frame illustrating where interactive, pictorial and textural

information would be placed. This also gives an opportunity to test how such elements interact with one another

The wire-frame below demonstrates a simple layout design for the website, with a header, body content area and footer. The three column structure allows content to

be divided, for example, text in the left column, image in the centre and video in the right. This allows the viewer to direct their attention toward a specific area.

Wire-frame structure for developing the fashion show website.

These wire-frames show how the body content area changes from page to page, creating a diverse design that does not tire the eye.

Web Design Layout

TWENTY FOUR

Concept Development:Layout Ideas

This elementary introduces the fashion show website through a welcome page, whereby upon clicking the header and footer would separate and

rest in their positions as seen in the home page through a fade transition.

Idea for the 'Welcome' page. Home page layout design idea.

I researched how I could do this using 'Java script'. The cool colour scheme invites the eye to more contrasting visuals such as imagery and

multimedia formats, accompanied by scrolling text, allowing the home page at least to display in one browser window without the need to

scroll the browser itself.

Web Design Layout

TWENTY FIVE

Concept Development:Idea Refinement

I began looking at a range of material relating to fashion in order to understand how I could represent fashion in a general sense. This led me to

images of catwalk models and existing fashion show posters from various university around Britain.

This idea concentrates on creating space between visual

elements, the content areas and global navigation bar to be

easily understood and read.

Developed from the left image, this idea shows a more content rich

theme, with a diverse layout structure with generous margins and

gutters.

Early layout conceptsFinal Designs for the layout of the GCU Fashion Show Websited.

TWENTY SIX

HTML E-mail Layouts

Final Concept:Fashion Website

The final design for the website is clean, content has space to breathe and placed central

on the browser page allows it to be compatible with any browser as the background will

increase or decrease dependent on the screen dimensions. The header and footer contain

the information, keeping the eye contained. The 3 column layout allows a diverse approach

to layout on each page ensuring the same aesthetic does not repeat. Left flush typography

adds more space to the margin edge and with increased leading, body text is easy to read .

Hierarchy is achieved through character weight as well as point size.

Final Designs for the layout of the GCU Fashion Show Websited.

Fashion Show Brief:In this project I was required to create a range of advertisement media for the 2013 GCU Fashion Show. This included a programme, a poster and ticket that communicated the essence of what fashion is.

How do communicate what fashion is in its most general sense?

Fashion Show Brief

TWENTY SEVEN

Initially, the client requested designs for tickets, a poster and a programme for the evening with student names, details of the fashion briefs and sponsor information. The poster was required to be a standard 'A' size and may be printed in various sizes. There was no set format for the ticket and the programme. The client indicated that there is no theme for this project since

TWENTY EIGHT

Fashion Show Brief

students designs are different. The concepts designs should therefor communicate 'fashion' in a general sense. The range of media required for this project needed a visual identity that linked the elements together in a consistent and balanced way. The client requested a range of development concepts showing a wide investigation of how to communicate fashion, using typography, photography, illustration and combinations of the above. This project presented fashion through geometry, reflecting how fashion designs begin as mere shape sketches.

Fashion Show Brief

TWENTY NINE

Research:Fashion Design

The elements that stood out in the research was line,

shape, colour, and a conceptual approach to the theme of

fashion without the common pinks and ribbons.

ColourStriking colours were used to create a mood and

personality, bright colours often echo strength on an

emotion and this was in abundance. Blacks and whites

were also commonly used, a more neutral scheme that

allowed other visual elements to stand out such as form or

shape.

ShapeGeometry was a widely identified theme, with squares,

and triangles featuring heavily in fashion designs and

in posters, this arrived at a style in a more conceptual

manner.

LineLine created a striking visual map in the research,

directing the eye toward particular areas of note.

I began looking at a range of material relating

to fashion in order to understand how I could

represent fashion in a general sense. This led

me to images of catwalk models and existing

fashion show posters from various university

around Britain.

Research Material

Fashion Show Brief

THIRTY

Sketchbook Work

InspirationI was particularly drawn to the catwalk model but

representing this through geometric shape, with dark

colours accentuating the shape - drawing the eye around

its form without cluttered colour schemes.

Target AudienceI developed various ideas of how this catwalk model

should look, and thinking about the target audience for

the fashion show, I decided upon an elegant model form,

this would give the show a serious and professional air

- important if employers will attend and give graduates

opportunities.

Visual IdentityWhilst investigating what form the layout would take it

was important to consider the standard 'A' dimensions

and appreciate that the poster may be printed in different

formats.

Having analysed the research material I began

working on early concepts, of what sort of design

would best communicate fashion in its most general

sense but be innovative and striking. I was drawn to

geometry and line, this allowed a more creative and

conceptual interpretation.

Sketchbook Development

Fashion Show Brief

THIRTY ONE

Development:Early Concepts

Geometry DevelopmentI developed the theme of geometry in the catwalk model

since fashion designers tend to develop their ideas

with rough outlines and geometric sketches, thus by

incorporating this into my design I can reflect on the

development of fashion in its general sense, i.e., how it

all begins. This I felt was a strong meaningful concept to

develop.

I experimented with the geometric theme, working this throughout the

image to create a sense of consistency, however was unable to obtain a

good degree of balance and I felt these images were not aiming for the

audience that was necessary. A more neutral colour scheme would suit

a diverse audience, and a less feminine graphic would appeal to a wider

audience rather than the stereotypical. The typefaces in these examples

seem to be rather subjective, a more balanced style is required.

Early geometric model design

Investigating an appropriate design style to best communicate fashion in its most general sense

Fashion Show Brief

THIRTY TWO

Development:Typography

ProximityI grouped all the textual information together to allow it

to become a focal point, this was necessary since the

information is the most essential aspect to the poster.

AlignmentBy creating this unity of information and aligning it to

the bottom corner it created a balance with the opposite

corner where the light beam would be placed, this tied

these elements together.

Consistency in IdentityIn order to create a visual identity that spanned a poster,

ticket and programme, the typographic scheme had to be

consistent, with hierarchy achieved through weight and

point size, keeping the spacious air created through the

increased leading and tracking.

I chose a simple typographic layout to create

a contrast with the visual elements of the

geometric design, thus I wanted a style that

could balance such elements. White text stood

boldly out against the red tones and the varying

weight created a hierarchy

Early experiments into typographic layout

Creating a consistent typographic Scheme in a ticket

Fashion Show Brief

THIRTY THREE

Final Ideas:Developing the Concepts

Carrying on the geometric theme, I created a more sophisticated

model, to best suit the target audience. Working with balance

and colour I progressed to a more simplistic style, so not to

lose the important textual information.

Typographically I wanted to create a contrast with clean and airy textual

information on a visually busy background. The varying degrees of white

achieve hierarchy with the eye being led vertically down the information

to horizontal lines that belay the event information time and location,

grouping the information in this manner separates the content in an easily

digestible way. Aligning all the textual information to the bottom left further

groups this element and creates an opposite space element, providing a

clean and clear aesthetic.

Further development into a simplistic geometric design with clear typography.

THIRTY FOUR

Fashion Show Brief

The final designs for the fashion show material echo a consistent visual and

typographic scheme, each with a good degree of white space and impact. The red

tones create this geometric theme born from the concept of how fashion designs

begin as a geometric sketches on a piece of paper.

Final Concept:Fashion Show Media

GC

U Fashion Show

Poster

GCU Fashion Show Ticket

There is a clear visual

hierarchy through contrast

from the image (red) and

the information (white), such

elements have been united in

such a way so as to not only

let the content breathe but

also to create the hierarchy of

information. With increased

leading and tracking the text

sits relaxed on the page and

is easy to red even in a small

point size.

The repetition of the red tonal

colour scheme serves to tie all

the media together to create a

seamless visual identity, with

similar alignment, balance

and typographic structure

used throughout.

Programme front and back cover

Programme inside spread

Brochure LayoutsThis project involved making a layout design for GCU's Outlook magazine, to update its visual aesthetic, and be a design that acts as a template where future information can be added easily into the layout. The project included designs for a front cover and fro double page spreads

Putting into practice the design techniques learnt throughout the previous projects.

Brochure Layouts

THIRTY FIVE

I was given textual information that had to be used to inform an appropriate layout for the front cover of the 'Outlook' magazine, ensuring GCU's blue theme was consistent throughout to the double page spreads. The magazine is aimed at industry professionals and research associates out with the GCU thus the visual elements that one identifies within the current range of marketing material must be reflected throughout the front cover and double page spreads.

THIRTY SIX

Brochure Layouts

Brochure Layouts

THIRTY SEVEN

Research:Looking at Brochure Design

I approached this project through looking at brochures

similar to 'Outlook' from other universities and

considered the various layout ideas to inform my

design, of what was common practice and suitable for

a layout design for a business and professionals target

audience.

Early sketchbook ideas in how the content could be structured.

Initial experiments in applying the research into design conceptsResearch material

Brochure Layouts

THIRTY EIGHT

Early Ideas:Experiments in Layout Styles

In this idea I experimented with grouping content

elements, brochure name and issue title were grouped

to the left and featured content on the right, This

allowed a straightforward hierarchy, distant from footer

information such as logo.

I thought about adding white space to frame content ad

allow it to breathe, brochure information including date

and issue were grouped in the header, allowing for a

cleaner and lesser busy aesthetic.

I added a column structure in this idea, this accentuated

both the brochure details and the footer content,

although featured content elements doe not work we

since they are too close to the issue title.

Expanding on the research and sketchbook development, I experimented with different suitable layouts that would suit the target audience of

research and business professionals. It was clear that for such an audience, the most important aspect was the information thus is focused on

how this should be structured, these idea were firstly for the front cover of the brochure but elements should be reflected throughout the brochure

such as the colour and typographic elements.

Initial experiments in applying the research into design concepts

Brochure Layouts

THIRTY NINE

Concept Development:Idea Refinement

The developments below show further experimentation with grouping the visual elements and the content. The title 'Outlook' should be grouped

with similar information such as the issue title 'Working with Industry' and 'In this Issue'. This creates an identity for each issue and serves

to separate the content that will change in other future issues. Feature content was also grouped, as well as logo issue number and date. By

separating these similar elements I was able to create a simple visual hierarchy, from Brochure name and title to secondary information such as

the featured content and then to issue no and date. Set against a full bleed image, it was necessary to frame the text within boxes, and found this

could act as a way of repeating the GCU colour identity that would be used through the brochure and indeed in future brochures.

Further development, concentrating on alignments and grouping the visual elements as well as using repetition to repeat the blue identity

This concept uses colour to repeat the visual

identity of the GCU colour scheme with white

acting as space to comprehend the text upon. The

lack of a footer may allow the eye to roll off page,

adding one may serve to contain the information.

This idea aligns the content to an invisible margin,

creating a spacious aesthetic, one which the eye

can locate hierarchy in a simple vertical scroll. A

footer acts to contain the information but has not

been blocked due to its importance.

I think this concept is the most successful,

information flows from the top left to the bottom

right, creating a clear hierarchy. With information

elements grouped and a clear consistent colour

scheme, echoing the brand identity.

FORTY

Brochure Layouts

My final concept for the GCU 'Outlook' brochure repeats the GCU visual identity in the colour scheme through the front cover and the double page spread. The

bottom right hand corner has been beveled in the front cover and this visual element is continued in the brochure concept too. With all four corners echoing this.

The column structure in the front cover is also repeated in the brochure spread, giving a sense of progression and continuity, this allows hierarchy to flow better

if there is clearly known and identifiable structure.

Final Concept:Outlook Poster and Double Page Spreads

The final concept for the cover features strongly

a hierarchy through character weight, leading the

eye vertical down the page, this format will work

for future issues against a full bleed image with

a similar left alignment system grouping all the

information with sub groups acting to combine

similar information

This 'white-spaced' column structure allows a plethora of information to breathe whilst the blue visual connects with

the front cover and serves to accentuate and separate content. Pull quotes and caption information sits well within the

structure and the symmetrical layout does not overburden the eye but draws it in since there is a good degree of body

text variation to hold attention.

Final concepts for a front cover and double page spread for the GCU 'Outlook' brochure.

In this book you will see experiments within a range of layout styles

for a wide variety of media - from magazine and brochures to layout

designs for web platforms. This will be presented in order of research

and investigation, initial designs responses then final designs. This will

allow you to see how research has informed the development process

leading to finished outcomes for each project.

UK £22 EUR 44 US $51