[Common Principles of Page Layout Design; How Page Layout Digitally Communicates Ideas]
Page Layout Design hosts many principles, which are needed in different areas of design. This document explores the needed areas in designing and plotting out the thematic needed in the Escapade advertisement material.
Balance is a principle of design which serves to evenly distribute elements of the website; in doing so no key features stand out more than another element and there is not a distinctive tilt in the sites content placement. The two most common stylistics of balance are; symmetry and asymmetrical layouts:
Symmetry in use centres the page contents or mirrors them so that a design appears identical on both sides of a page; presenting that sense of balance and equivalence in presentation. There are four types of symmetry that’s used in Page Layout Design:
Rotational Symmetry works from a centre point of a page; where the asset in question can be transported 360 degrees around. This feature allows assets to be freely moved around in an easy manner. As it rotates around 360 degrees in the shape of a circle – there are many areas the designs can be placed to reflect each other.
Translational Symmetry is the act of moving an asset in design without it loosing its symmetrical features. This method is usually not used for large parts of the page, but rather for smaller areas.
Reflection Symmetry is mirroring the property in design, it is the strictest form of symmetry as there are no other variations.
Glide Reflection Symmetry mirrors the image but in this case moves the shake so it is no longer opposite from the original image. This can give the effect of the image moving in a certain direction.
Asymmetrical layouts are harder to create effective designs with as they host unconventional designs not using the aspects of symmetry. The display of Asymmetrical allows for me creative designs with aspects that stand out better in this style then they would be able to in symmetry based designs. Emphasis can be put on certain parts of a site rather than equal distribution across the whole site.
Alignment helps in the composure of a Page Layout Design; with its purpose to serve as a way to create an attractive and visually satisfying design, organise page elements, group elements and also to make the text on the page easy to read.
Most areas of a page should be aligned to bring equal attention to elements, creating easier navigation; but through the use of misalignment emphasis can be drawn to parts of the page. Alignment can be used on most elements of a page; bringing unity to similar sections.
Without alignment the page will display a unorganised and messy look; the same happens with over-use of alignment. Breaking alignment helps balance out these elements so that it does not hold the feeling of sloppiness.
Contrast is when two differing elements work hand-in-hand to provide something that effectively works although it has differences the two designs work together and make an appealing graphic.
Contrast helps bring attention to key parts of a page, by making the page more interesting. The focus is brought to the key elements of the page making it easier to navigate by letting these areas take centre stage.
There are many variations to how contrast can be used on a page, with many different components:
Size draws the most attention, as the larger the image or text the more noticeable it is; the contrast between large text and small text is the most common in how it draws attention to the specific information being conveyed, prioritising quick facts to longer less needed details in explanation.
Value exists in the contrast by two greater elements or lightness and darkness; it’s strongest when two completely different colours work hand in hand to provide the noticeable difference. Bringing attention to certain elements through the aspects of colour.
Colour stands out in design; and using harmonising, opposite and complementary colours to create contrast works well as it draws attention to the different element from the rest. Though effect can be lost if the value of the colours do not work together and appear washed out.
Type brings attention to strong use of typography to utilise size, value and colour. Many types of contrast can be found in this area such as: Bold & Italics, large type vs. small type, contrasting colours of text and changes in alignment each bring strong contrast and attention to text benefiting attention to key information and elements of the page.
Other types of alignment can include texture, movement, alignment, shape and direction.
Repetition is a design element that brings continuity and recognisability to a page/layout choice; a similar layout found on each page enhances the flow of the site/magazine which is visually appealing the the viewer but convenient in navigating the information.
It holds a professional look and allows the user to be confident in how to navigate the site; while in magazines helps the viewer find key information at a consistent rate.
Emphasis is about highlighting a key element to draw specific attention to that item, rather than focusing on many different elements fitting together to make a applicable attention-drawing design.
Examples include: Titles, interactive buttons, or error messages on a website. By emphasising these elements it creates a ‘focal point’ – something that draws the viewers attention instantly rather than just blending in with the background.
The strongest area for creating focus is the centre of a page; although this can’t be easily achieved on a website due to the layout and scrolling needed to view the full site. However, the top of the site where people are probable to look at first due to its placement it can draw in that needed attention.
Visual hierarchy brings attention to the details deemed as important by focusing on them for easy viewing, this is mostly done by emphasising key areas of a page such as the header, footer, sidebar and content. Each area gives specific details of the site so these areas commonly have emphasis put onto them.
There are many areas into creating efficient emphasis to areas of a page:
Isolation promotes interest, by standing out from its surroundings the item grabs centre attention and holds it by being visually captivating.
Contrast as explained before lets part of the site stand out due to difference in elements such as size, colour and positioning.
Proportion is the principle of changing size and the differences of size in objects. Un-natural sizes for design elements grabs attention as it is not perceived as normal in context of real life.
The Grid System is helps align page elements through columns and rows. Text, images and functions are placed throughout the design accurately this way and give an organised manner effectively.
Columns allow text and images to fit onto a page in an efficient way, which isn’t hard to follow and is appealing to the viewer. The readers expect to find things in their proper place; so Grid Systems and columns make sure the conditions are satisfied. Due to the mathematical precision of the grid it ensures no distraction from the content of the page.
Common page layouts use singular or multiple rectangular boxes to align the elements on the page in a straight manner. Whereas; un-conventional page layouts would aim to break the mould and strive for a more creative way of projecting information.
Some people believe that Grid Systems limit creativity; but the reason it is used so often is due to the effectiveness in handling information.
[Creating Style and Impact]
The Focal Point is the element of a page which gains stands out to the reader; but not of that of the attention received by the dominant element of a page. They hold composition that holds the viewers attention to the page.
By giving more weight to the focal points from everything but the main element; the attention to these sections captivates the readers eye going from the main image. Focal Points can also be used in a pattern to direct one to another, expanding the interest of the reader to the page.
Rules of Thirds
The Rule of Thirds creates a grid map aiding in design. By creating a 3×3 grid across the design document you are then able to place elements in the grid boxes according to your judgement in an easy manner.
The Rule of Thirds assists the creation of visual interest through asymmetrical balance; the grid aids in creating good balance so the design is appealing to look at while still providing a visually complex and intriguing layout.
Finding weight and the correct balance is much easier thanks to The Rule of Thirds; focusing elements in specific areas creates a greater balance and it helps prevent elements becoming over-shadowed.
Use of Colour
Contrasting colours benefit the style of a website greatly; if a poor choice of colour is used the effectiveness of the website may be ruined entirely, especially with the use of light colours of text on light backgrounds and the same for dark. Without effective colour choices the visibility of the text would be too hard for the viewer to see and ruin attention and interest.
Colours grab attention thanks to their contrasting nature, and bolder colours garners attention from the audience, making it a viable element to use when designing a page.
Use of White Space
White Space greatly benefits a page, by making many elements of the page easier to distinguish and view information displayed. It brings attention to a specific element of a page, rather than the focus shifting to a clustered display of many visual elements at once.
White Space displays a efficient tone that’s easily comprehensible to the viewer and aesthetically pleasing.
Logos are used for people to associate the company name with an object, the design of a logo can vary to be anything, but they are usually small and memorable shapes to engage the user outside of the use of text.
Logos look and stay in the same position across all pages of a website or magazine, to make the item memorable to those who visit the site.
Background elements such as images brighten the mood and complexity of a page; with more detail present in the background there is more visual information for the viewer to look at; widening the appeal.
Repeating elements enables the viewer to experience a page in an easy beneficial way, with elements staying the same throughout different pages it creates a more memorable impression onto the reader.
Appropriate Font Choices give the reader an impression on the contents of the page; if the style does not work well with the contents of the page it can lead the viewer to having misguided impression on the contents or the goal the page intends to get across.
Text Hierarchy is important for organising text in order of how important the data contained within is. This allows the reader to easily locate the content they are looking for quickly, allowing the user to efficiently isolate key parts of information based on the constant use of the style of the text.
Through correct positioning, effective colour choices and other elements such as weight and contrasting typefaces, it enables the important information to stand-out first giving the basics to the user and helping navigation to more information laid out in the sections of text.
Text Flow is the element which carries the viewers eye and attention through a page to the important elements, arrows and numbers are the most efficient method of guiding the viewer; but many other elements can be used to stimulate a similar effect such as continuous images, motion in images and perspective.
Images that contain images in which elements face away from the direction the text is going ruin the flow of the pace of reading and distract the reader in a jarring way that slows down efficiency. The same can be said for images of peoples faces looking in the direction opposite from the text as it causes the reader to look in the direction the person is looking. It flows much better when the face is positioned towards the text, flowing into it for a nice visual appeal.
Alignment is an especially important design choice when presenting text to a reader; if the text is not aligned and does not allow the viewer to easily read from one piece of information to the other half it ruins the appeal and efficiency of the text, frustrating users. Proper alignment leaves not only a nice look to the page, but also a strong way in displaying important information.
Creative Use of Type and Fonts Allows for an aesthetically appealing view to the page and holds high levels of creativity and charm to the website; although the basic look may work efficiently, adding interesting choices of composition makes the site much nicer to look at and mentally stimulating to the reader.
[Current Design Trends]
Asymmetry (Popping colours, Duotone, Low poly designs, Geometric designs)
Asymmetry breaks the conventional rules of symmetry to provide a visually appealing layout; the designs found in Asymmetry provide an engaging and exciting look to a page. With lots of interesting ways to create appeal in this manner.
Popping colours can make a page stand out strongly; with the way bright colours catch the viewers eye. Strong use of visually engaging colours helps the site stand out. Dull colours ruin the mood of a design mostly so the use of colours stronger in brightness makes for a stunning look in every area of design.
Duotone combines two bright colours to provide an noticeable, interesting and complex creative style of design. Contrasting colours can work together to create more impact in the design, but if done right just sticking to the use of any two colours could work well.
Low poly designs are inspired from game graphic designs but is used constantly in design to create appeal now. The designs use of geometric shapes gives it a feeling of a three-dimensional display. This trend works well with other trends to create an even more alluring design.
Geometric designs look clean and assist in the creation of eye-pleasing designs, with the composition of lines and shapes the designs view is neat and has been effective in drawing attention to areas in which it’s used.
Custom graphics and illustrations stand out from many other design choices; with the combination of both illustration and interesting graphic design makes the viewer gaze in awe at the composition, with a hoard of visually interesting elements this design choice is hard to look away from.
Pushing creativity through illustrations benefits appeal, with many different ways of presenting elements in design straying for the norm. The creative assets make a design a lot more engaging to the audience, and make them admire the presentation.
Open composition is the visual construction of making something appear as it extends off the page out of view, without the restraints held within the use of a border around the image: The viewer is caused to be drawn in to the world of the design and imagine the elements outside of the view, doing so the viewer examine the image much more.
Chaos in design allows for more examination of a design; rather than sticking to the simplified way of presenting information. Complexity in design allows for more visual elements to interact with one-another making it more interesting to the viewer for them to investigate the composition of the image and decorative details.
Typography and font combos use font in interesting manners. Designs which display combined font designs and designs that use font within graphical composition make for creative displays. Unleashing imagination allows for constantly interesting designs.
Cropped elements take use of minimalism and crop different elements such as text, but only to the point in which they can still be easily assessed to create unique presentation without the need of additional effort.
Glitch effects are visually interesting in the way they bend the typical design in a cluster of elements to create something broken but of an appealing aesthetic to the viewer.
Negative space is emotionally appealing to the viewer; the lack of elements around the edges of a design leaves a nice blank and calming mood without clustered elements cramping focus.
Examples of unconventional page layouts
Red Fish Apparel uses elements of chaos to present a bold and creative front page; the abstract elements provide a colourful display with a lot going on and an assortment of different elements to enhance the captivity of the design.
[Digital vs. Printed Layout Design]
Interactivity is the ability to find shortcuts through re-directions laid out on the site. This allows for easier navigation around the elements of the page, through following links to different sections of the website and being able to elaborate in more manner due to the extended space of a website versus that of a magazine.
Usability and navigation is a key advantage Digital Layout holds. Navigation aids in finding information split into separate sections; allowing the user to find out much detail about the information they are searching for. With effective layout on a digital format the sites usability can hail in comparison to that of information held on a printed layout.
Responsive page layouts are layouts that adapt to the method in which the page is being viewed, elements can be shifted to fit the design of another device in comparison to the view of how the site is seen on a computer. This is done to allow easy access to the information while retaining a condensed and more fluid design fitting to benefit users of other devices; broadening the audience to the website.
A Header is a main component of a site which contains information relating to elements of the site. It includes elements such as the companies logo and navigation bar which contains links to the different sections of information found on the site. The layout for the header is the same across pages of a site to create the sense of continuity and assist in navigation to other areas of the page.
The Footer is not required but is commonly found on all major websites; visitors expect to find information relating to the company at the bottom of the page so most websites include it as a basic element of their template.
A Feature area is the area that serves to generate the most attention when the viewer enters the page, it’s the main introductory point of the website. This area is used to place images and super-imposed text; such as a slogan, which benefit the appeal the website gives off. This contrasts the use of text used in most of the websites explanatory elements and provides a visually interesting element to the page.
Sidebars are used for navigation around elements of a site; much like the navigation links found in the header. Providing easy access to any area no matter what page you are viewing.
Websites are able to hold Background elements, which allows for more visual appeal thanks to more appealing colours than the usual white space found in most conventional cases of page layout.
Unconstrained page size is the the ability for unlimited space for information and graphic elements to be placed. As there is no limits to how many items can be contained on a page, it allows for more freedom in information handling and being able to convey greater extent of meaning that isn’t possible with the limited space in Printed Layout.
Constrained to page size is a problem found within Printed Layout designs. As only allow for key information due to the condensing of information and the inability to extend space, this means many elements will have to be cut so that only the most important elements are displayed.
Headlines are most likely to gain more attention in the presentation of Printed Layouts due to the style of font; putting forward a more eye-gripping bold design that gets viewed often due to its visibility and interest it generates present in newspapers and magazines.
Subheadings are the second highest focus point, leading key points of information to help readers navigate what articles of information that suit their interest; while not being too large to pull away focus from the main graphic element on a page.
Pull Quotes pin-point key information from an article and use it to generate interest of other elements present in the full text. Pull Quotes can take controversial statements or gripping information from an extract to empower peoples wish to see more details relating to the topic at hand.
Drop Caps are the element that is placed at the start of a piece of text such as an article in a newspaper. They are enlarged characters that drop down below several lines of text, they work as a means to gain attention from the reader or as a stylish look to a work.
[Purpose of Page Layout Design]
Use of layouts to visually enhance message, narrative or subject matter
By effectively using layouts in an abstract way the excitement of an extreme sports park can be conveyed by breaking the boundaries of standard design; correlating to the way extreme sports breaks the boundaries of normal sports. A standard layout just feeding information to the viewer does not bring any excitement to the reader; which goes against the emotions supposed to be held when on the topic of extreme sports.
Through the use of a more complicated Page Layout Design which has a more exciting appeal; the narrative of an extreme sports location would work hand-in-hand with the display of the website.
Appeal to appropriate target audience
As Escapade is an exciting extreme sports adventure park a design for the concept should strike similar emotions of excitement with the audience to try get them into the concept of such a resort. By using bold colours accompanied with white and sharp designs boasting impact, it reels the younger audience in with excitement while still giving a friendly appeal to older members of the family. By straying away from too flat or too visually complex and too over the top with dark and edgy design choices; it creates an appropriate manner to display to the target audience.
Maintain corporate context
The theme of the resort park should be expected to share themes with the companies thematic front. As Escapade is an exciting and ambitious extreme sports venue the style of the website should articulate the same appeal through the design of the website.
Respond to social, political, and cultural factors
By commenting on the factors of social, political and cultural factors of the area it works well in making the website appeal more to those who fit into any of those categories. With the best thoughts in mind for the audience and elements relating to current life-style, the most attention can be captured.
Websites are the best place for advertising what the company stands for; and an aesthetically interesting and pleasing one is the best way of assuring the viewer will hold interest in your company and what you are offering.
The Adventurists [theadventurists.com]
Della Adventure Park [dellaadventure.com]
Both websites introduce the viewer with a vast amount of images; whilst The Adventurists displays a landscape, with balloons centred in the middle, Della Adventure Park cuts to the chase by displaying the many different types of extreme sports available at the location.
The Adventurists use of a vast horizon works as symbolism for the experience of extreme sports, with a set of balloons isolated in the middle of an empty terrain; humans are as small as an ant in the massive earth. This opens up that feel of adventure to the viewer. Not in an intense and exciting way but it displays extreme sports as something of beauty; as a life-style of seeking out adventure even without the need of continuous activities to find stimulation. With the message placed in the middle it solidifies this ideal and reels the viewer in through peaceful minded imagery. The details for the actual activities are displayed once the viewer has scrolled down from the main display of the banner.
In contrast Della Adventure Parks opening page has the intention of displaying exciting activities of mass appeal to the viewer; making them act on the desire of adrenaline and new experiences in a action-packed activities. Getting across excitement and the vast amount of opportunities available at the resort is the websites first and main goal, cutting right to the chase and delivering information instantly, something the first site refrains from doing.
The Adventurists [theadventurists.com]
Della Adventure Park [dellaadventure.com]
Both websites headers link to re-directions to different segments of the website displaying more information. Both are relatively small in size and don’t stand out much from the scale of the other elements on the pages.
The Adventurists uses a drop down functions to re-direct the viewer to the pages; keeping it out of the way to prevent it from being clustered. Although this is effective in making it look neater, the use of drop downs prevents the user from instantly being able to find their way around the site. Especially in the way the two pieces of text don’t stand out too distinctively to the top bar and the background of the header image.
Della Adventure Park chooses to cramp all links into its top bar, which doesn’t look very easy to distinguish; especially since its given equal value in size to the ticket booking feature. The text doesn’t heavily stand out from the background and thanks to all the bright colours advertising the activities at the site; the viewer gets easily distracted from the location bar and would find it hard to locate amongst the bold colours of the design trying to stand out for interest.
The Adventurists [theadventurists.com]
Della Adventure Park [dellaadventure.com]
Both websites provide interactive assets to videos and photographs with more information surrounding the company; but The Adventurists makes use of this in the best way.
Whilst both effectively isolate these elements through the use of white-space. The Adventurists website takes use of effective text-hierarchy, to separate points in an alluring manner, which then provides more information into what the company does/offers. The layout is smooth with good alignment for each article and separated in a creative manner with the wavy line.
Della Adventure’s layout for videos and images linking to social media seems a bit clustered; with a boring layout and uneven alignment; it doesn’t work well in generating much interest in the items found in this section of the site, due to its clumsy nature and overall bad placement.
The Adventurists [theadventurists.com]
Della Adventure Park [dellaadventure.com]
Although from the first impression of the site and the way it’s laid out is quite peaceful; The Adventurists website in the footer does explain the true risks at hand in the adventure, displaying the true point of extreme sports to have an experience similar to that with all the risks in play. The design uses a black background so it is easily visible and besides from the warning provides links to every element on the page and the ability to contact through the site.
Della Adventure Park does a similar concept directing readers to all assets of the site through links, but this time capitalises the opportunity to hype the resort up even more to the viewer explaining its positive assets and areas to get excited about. Presenting a much different mood to that found in The Adventurists footer.
Printed advertisements generate appeal from their placement; with bill-board being able to be seen by many and posters being viewed by passer-by’s its a good area of appeal to capture attention from an audience in an effective way.
These two advertisements contrast each other greatly; as they display two ends of extreme sports; one advertised mainly for adult risk takers and one for children; with both clearly having two different target audiences in mind.
The first advertisement for snowboarding has a more professional aesthetic to itself, with brief information displayed and a focus more on the visual aspects of things; the bill-board advertisement only lays down the basics of what its offering in more of an invitation for you to find out more about the location than it being presented there for you. It uses contrasting colours to leave a strong visual effect onto the user, and lets the images speak more than the text.
The white stands out against the dark blue background; and with the increased weight its hard to miss, it displays a poetic slogan rather than stating information and works effectively to deliver its intended message.
The second advertisement hosts design elements nothing like the first; while the Mammoth Snowboarding advertisement went for a simplified and bold design; the Skytrex Adventure boasts that of a more amateur with a less professional look, not trying to gain attention from a wider audience.
Although the design visually has a lot of things going on, the use of typography is weak as the font is neither interesting or stands out well against the backgrounds it’s placed on; not pleasing for the viewer to look at. The use of a more murky colour scheme puts the poster at a disadvantage as well, it fits with the theme of the rain forest, but the colours appear just plain and there’s nothing bright or interesting to catch the viewers eye in the design.
The way the images are placed on aside from the main logo look quite tacky, and appear to be stock photos which isn’t an interesting nor creative design choice.
The difference in the two is huge and displays the way of catching the viewers attention is through visual interest, which the first delivers on but the second sadly doesn’t. A simplified and design without an unappealing chaos of assets works better to grab the attention needed to get intended information and interest across to the viewer. Creativity benefits the design greatly.
https://www.cs.umd.edu/~mount/Indep/CHassan/element.htm [Accessed 20/02/18]
https://boagworld.com/design/why-whitespace-matters/ [Accessed 20/02/18]
https://www.canva.com/learn/font-design/ [Accessed 21/02/18]
https://www.thoughtco.com/flow-in-design-3470061 [Accessed 21/02/18]
https://graphicmama.com/blog/graphic-design-trends/ [Accessed 21/02/18]
https://photographylife.com/open-and-closed-composition [Accessed 21/02/18]
http://design.activeside.net/why-designers-should-seek-complexity [Accessed 21/02/18]
https://graphicmama.com/blog/graphic-design-trends-2018/ [Accessed 21/02/18]
https://www.sitepoint.com/10-wildly-unconventional-web-designs/ [Accessed 21/02/18]
https://www.theadventurists.com/ [Accessed 21/02/18]
http://www.dellaadventure.com/ [Accessed 21/02/18]