C r a i g H au s m a n
Layout: GCU Fashion Show Graphic Design 2: Layout
Graphic Design 2: Layout Final 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 research has informed the development process leading to finished outcomes for each project. Hausman Publishing Glasgow Caledonian University Department for Engineering and the Built Environment 70 Cowcaddens Rd Glasgow, Lanarkshire G4 0BA 2013
Š
1 3 9 15
Contents
21 27 35
OVERVIEW
DESIGN FOR GCU MAGAZINE: OUTLOOK, INCLUDING FRONT COVER AND SPREAD DESIGNS
LAYOUT INFOGRAPHIC RESEARCH INTO LAYOUT ACROSS A WIDE RANGE OF MEDIA, INFORMING A DESIGN FOR AN INFOGRAPHIC POSTER
DOUBLE PAGE SPREADS EXPERIMENTS IN LAYOUT OF FASHION MAGAZINE SPREADS USING BOTH BLACK & WHITE AND COLOUR
HTML E-MAIL LAYOUTS EXPERIMENTS IN E-MAIL LAYOUTS BOTH IN HTML AND CSS
WEB DESIGN/LAYOUT FASHION SHOW BRIEF DESIGN FOR GCU FASHION SHOW WEBSITE
DESIGN FOR GCU FASHION SHOW 2013 PROGRAMME, TICKET AND POSTER
BROCHURE LAYOUTS DESIGN FOR GCU MAGAZINE: OUTLOOK, INCLUDING FRONT COVER AND DESIGN SPREADS
Overview
This module uses the skills, knowledge and theories learnt in previous and concurrent modules
Overview
ONE
Overview
Graphic Design 2: Layout Final Submission
This module uses the skills, knowledge and
projector). This module follows the studio pedagogy by focusing both teaching and learning
theories learnt in previous and concurrent
within a studio environment - time spent in practicals will be used in this way. Providing a
modules to build upon Graphic Design
consistent space for students to work has been proven to engender greater opportunities for
One by the exploration of layout. Principles
peer feedback, greater commitment to the course and a sense of ownership and belonging
and guidelines will be explored through
within the university. This studio space must provide the opportunity and facility to work with
a series of projects that develop layout
and without computers (industry standard computers equipped with design software and a
skills and vocabulary across a range of
colour printer). Regular peer and tutor feedback will build skills in evaluation and critique as
media. As these skills develop, projects will
student work is further discussed within small, group seminars.
explore more
complex and challenging
formats and focus on digital media. Initial knowledge and theory was introduced as
Two-dimensional representation and design software skills will be used and developed in the
a whole in lectures with visual aids (digital
creation of project work alongside sketchbook work evidencing the design process.
TWO
Layout Infographic
Understanding the various style of layouts adopted by various forms of mass-media.
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.
THREE
Layout Infographic
Firstly, it was necessary to compare and contrast different layout
• White Space - space between textual/ visual elements
to research layout design in fashion magazines and newspapers.
• Balance - distribution of graphic/ textural elements
styles and designs. In order to gather a large body of research I chose
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.
• Alignment - alignment of graphical 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
Research: Newspaper Layout
• The Sun newspaper adopts a mainly visual layout mode where images are used throughout with supporting text.
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.
• 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 sansserif, hierarchy is achieved through its varied point size and weight
The Sun market their newspaper to young and adult men,
• Adopts a manly verbal approach to layout with few images used however
nonprofessional and looking for entertainment, as such
ones that are tend to be large of fight for focus with textual information.
the layout design is largely image based, with heavy
• White space is used to create space between columns and thus content
headline text to grab attention. The content ordains an
allowing to breathe and become easily digestible
asymmetrical structure that lacks balance and consistency.
• A neutral colour scheme allows the viewer to focus on the content better.
The Guardian markets their newspaper from young to
• Left justified serif body text gives a grid-like structure to the information
adult professionals who have some education. The visual/
• Consistent 5 column layout with images breaking the order, used for
verbal synergy approach to layout allows a balance of
emphasis and in support of corresponding body text
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.
• 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.
FIVE
Layout Infographic
Research: Magazine Layout
Glamour
• The inconsistent layout is dependent upon the content and image. The visual
approach to layout ensures images are
Similar to newspapers, magazines are designed
supported with text and descriptions.
in accordance with their target audience, and
• Margins are smaller than Vogue and
since this is mainly women there can be far more
Harpers Bazaar due to the preference for
commonalities than seen in newspaper layout
content over aesthetic value
designs.
• Asymmetrical. Symmetrical layout used in tandem on double page spreads
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.
Vogue
• 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
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.
weight and point size.
Harpers Bazaar
• 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.
SIX
Layout Infographic
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.
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.
Criteria graph
Repetition
Visual Hierarchy
Graphical elements are repeated
The overall structure of visual information of
throughout a design, this can be through
a design where there is a clear progression
colour, line, shape, point and weight size
of importance
etc
Proximity
Balance
Visually similar items should be grouped
Used to create an organised and
together thus creating visual cues of information through text and image
comprehensible structure of information with text and visual elements
The above criteria graph was created to easily compare the different layout techniques employed by the magazines and newspapers researched.
SEVEN
White Space
Alignment
The space between text and graphics,
Everything on a page should be visually
the more the space the more easily
connected, elements that are aligned
comprehensible the information is
become connected
Layout Infographic
Final Concept:
Group Infographic
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
Double Page Spread
Applying research from the various layout styles adopted in mass-media.
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
NINE
Double Page Spreads
From the layout design techniques learnt in creating an infographic, I
only rectangular or square photographs. The second part of the project
was tasked with applying this to 12 double page spreads for a fashion
expanded on this with the addition of colour, visual elements such as
understand the user so as to appeal my layout design to that target
headers and page numbers. This allowed me to add design elements
magazine. Due to the nature of the magazine it was important to
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
frames, lines and boxes, pull quotes highlight areas of information, page
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::
Early Sketches and Development
Sketchbook 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
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.
Early sketchbook work experimenting with simple grid and column structures
ELEVEN
Double Page Spreads
Final Concepts:
Final Concepts With Using Only Text and Image.
Final Concepts using black text and images only
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
TWELVE
Double Page Spreads
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.
Layout Design from Exercise 1
Exercise 1: Anatomy
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.
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
THIRTEEN
Layout Design from Exercise 2
Exercise 2: Anatomy
Double Page Spreads
Final Concepts: Final Concepts Using Visual Elements Through the addition of colour and shape to the earlier double page spreads using Final concepts incorporating a range of visual elements
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.
FOURTEEN
HTML E-mail Layouts
Applying layout techniques to aspects of online layouts for E-mail.
HTML E-mail Layouts This 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.
FIFTEEN
HTML E-mail Layouts
Using edited text supplied and 3 images I created twelve e-mail
project was split between designing an e-mail layout using only what could
the dimensions of the e-mail to work within a fixed width of 600px
degree of creativity, it did encourage me to understand the concepts of
style layout designs. The requirements of the project restricted 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
be achieved in HTML and then in CSS.
Though HTML limited a good
basic web layout, using columns and grids to act as foundation for later
visual elements to be added.
design and thus worked mainly within InDesign for efficiency with
Illustrator being used to create visual elements such as shapes The
SIXTEEN
HTML E-mail Layouts
Initial Ideas: HTML Layouts
I began thinking about grid structures and
Working within the width constraint of 600px I began thinking about how to position the information where users
columns in order to create a well balanced
did not have to scroll too much. I was concerned with balance, where textual and visual elements held equal
structure that would facilitate hierarchy.
importance so as to lead the eye through the information. I created hierarchy through changing the weight value
These initial ideas show early layout ideas.
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 Layout 1
SEVENTEEN
HTML Layout 2
HTML Layout 3
HTML E-mail Layouts
Final layout designs for HTML Emials
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
EIGHTEEN
HTML E-mail Layouts
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
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 1
NINETEEN
CSS Layout 2
CSS Layout 3
HTML E-mail Layouts
Final Concept:
CSS Layouts
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 Emials
Final layout designs with a more balanced colour scheme,
TWENTY
Web Design Layout
Understanding the various style of layout adopted by various forms of mass-media.
Web Design Layout This 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.
TWENTY ONE
Web Design Layout
The purpose of a website for the GCU Fashion Show is to create a
students of fashion and those with a general interest, the culmination of
platform for which students can celebrate their artistic efforts and
their academia. Perhaps more importantly, it will enable employers to
and articulate the creative talent on offer. The website will also
experimented with navigation, structure and layout to allow users to know
and fashion design related courses thus becoming an advert to
how they got there and how they can get back. The visual hierarchy I
showcase their work in a professional manner that will emphasise promote the university as a desired institute for studying fashion
prospective students. It will be a chance to demonstrate to the wider
community, including families and friends of the students, fellow
see the range of talent and skill on offer. The design concepts I created
exactly where they need to go in order to locate the information they need, 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
Early Ideas Wire-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.
These wire-frames show how the body content area
changes from page to page, creating a diverse design
that does not tire the eye.
Wire-frame structure for developing the fashion show website.
TWENTY THREE
Web Design Layout
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.
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.
Idea for the 'Welcome' page.
Home page layout design idea.
TWENTY FOUR
Web Design Layout
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
Developed from the left image, this idea shows a more content rich
elements, the content areas and global navigation bar to be
theme, with a diverse layout structure with generous margins and
easily understood and read.
gutters.
Early layout concepts
TWENTY FIVE
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.
TWENTY SIX
Fashion Show Brief
How do communicate what fashion is in its most general sense?
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.
TWENTY SEVEN
Fashion Show Brief
Initially, the client requested designs for tickets,
students designs are different. The concepts designs should therefor communicate 'fashion'
student names, details of the fashion briefs and
linked the elements together in a consistent and balanced way. The client requested a range
a poster and a programme for the evening with
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
in a general sense. The range of media required for this project needed a visual identity that 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.
that there is no theme for this project since
TWENTY EIGHT
Fashion Show Brief
Research: Fashion Design
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. 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.
Colour Striking 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.
Shape Geometry 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.
Line Line created a striking visual map in the research, directing the eye toward particular areas of note.
TWENTY NINE
Research Material
Fashion Show Brief
Sketchbook Work
Ske
ok D tchbo
pm evelo
ent
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.
Inspiration I 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 Audience I 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 Identity Whilst 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.
THIRTY
Fashion Show Brief
Development: Early Concepts
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.
Geometry Development I 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.
Ea
rly
ge
om
et
ric
m
od
el
de
sig
n
Investigating an appropriate design style to best communicate fashion in its most general sense
THIRTY ONE
Fashion Show Brief
Development: Typography
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
Proximity I 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.
Alignment
Early experiments into typographic layout
By 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 Identity In 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.
Creating a consistent typographic Scheme in a ticket
THIRTY TWO
Fashion Show Brief
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 THREE
Fashion Show Brief
Final Concept:
Fashion Show Media
GCU Fashion Show Poster
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. There is a clear visual
Programme front and back cover
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 inside spread
GCU Fashion Show Ticket
THIRTY FOUR
Brochure Layouts
Putting into practice the design techniques learnt throughout the previous projects.
Brochure Layouts This 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
THIRTY FIVE
Brochure Layouts
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
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.
Research material
THIRTY SEVEN
Early sketchbook ideas in how the content could be structured.
Brochure Layouts
Early Ideas: Experiments in Layout Styles
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. In this idea I experimented with grouping content
I thought about adding white space to frame content ad
I added a column structure in this idea, this accentuated
elements, brochure name and issue title were grouped
allow it to breathe, brochure information including date
both the brochure details and the footer content,
to the left and featured content on the right, This
and issue were grouped in the header, allowing for a
although featured content elements doe not work we
allowed a straightforward hierarchy, distant from footer
cleaner and lesser busy aesthetic.
since they are too close to the issue title.
information such as logo.
Initial experiments in applying the research into design concepts
THIRTY EIGHT
Brochure Layouts
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. This concept uses colour to repeat the visual
This idea aligns the content to an invisible margin,
I think this concept is the most successful,
identity of the GCU colour scheme with white
creating a spacious aesthetic, one which the eye
information flows from the top left to the bottom
acting as space to comprehend the text upon. The
can locate hierarchy in a simple vertical scroll. A
right, creating a clear hierarchy. With information
lack of a footer may allow the eye to roll off page,
footer acts to contain the information but has not
elements grouped and a clear consistent colour
adding one may serve to contain the information.
been blocked due to its importance.
scheme, echoing the brand identity.
Further development, concentrating on alignments and grouping the visual elements as well as using repetition to repeat the blue identity
THIRTY NINE
Brochure Layouts
Final Concept:
Outlook Poster and Double Page Spreads 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. The final concept for the cover features strongly
This 'white-spaced' column structure allows a plethora of information to breathe whilst the blue visual connects with
a hierarchy through character weight, leading the
the front cover and serves to accentuate and separate content. Pull quotes and caption information sits well within the
eye vertical down the page, this format will work
structure and the symmetrical layout does not overburden the eye but draws it in since there is a good degree of body
for future issues against a full bleed image with
text variation to hold attention.
a similar left alignment system grouping all the information with sub groups acting to combine similar information
Final concepts for a front cover and double page spread for the GCU 'Outlook' brochure.
FORTY
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