Content Layout

Understanding layout of content is going to be a vital part of my brochure so that I am able to present the web trends in a readable, fashionable way. Using a mixture of images, text and white space creates an interesting layout on paper. It is understanding to balance these elements that creates a visually appealing brochure. I have found that if you are to have text, to make it understandable, the best layout is to use columns of two or three. You can see quite a few examples of this method used below;

1 3 2

Some printed material focus their efforts more upon the typography than the other aspects of the design, this creates a different feel to the printed material, you can see some examples of this here;

This example is excellent because it also shows the method of cutout text to reveal an image through the text.
4 8 7 6 5

Another important thing I noticed in print is the shapes used to add additional interest in the subject is the addition of shapes and lines around a person or object. I think this allows the reader to instantly recognise what is at the centre of attention. You can see some great examples of this here;
9 SONY DSC 10

References;
http://inspirationhut.net/inspiration/42-excellent-examples-of-magazine-layout-design-for-your-inspiration/
http://indulgy.com/post/pEfMtH34d1/layout-dansk-magazine
https://www.behance.net/gallery/Magazine-Feature-Magazine/9812813
(http://www.flickr.com/photos/marindsgn/3894231417/in/photostream)
http://www.amandamocci.com/#1906059/THE-UNIVERSE-POSTERS/
http://www.aisleone.net/2012/design/typographic-revolt/
http://www.opus-design.jp/press/item_539.html
http://www.magspreads.net/2013/07/fashion-look-book-layout-design.html
http://milesmind.tumblr.com/post/44590898712

Advertisement

Shapes in Print & Web Design

Shapes in Print & Web Design

Shapes are very prominent within web and print design. They work so well because they occur in nature, in our every day lives all around us, making them easy to manipulate to create interesting visuals.

Circles are one of the most common shapes in nature from the extraordinarily large like the cosmos and the planets right down to the inside of a flower and a blood cell. The earliest use of the circle is the wheel which revolutionised their current methods of transport. You can see an earlier post I have written about apple’s design influences where I speculated circles taking over design here (https://wordpress.com/post/75268733/185/). Since the web basically copies the styles and techniques used in print to present it’s information, I thought the best way to start would be to look at the origins of these shapes in print design. I have found endless amounts of examples of circles within print and you can see some great examples of these here;

1 5 4 3 2

There are also plenty examples of using circles in web design too, these are here;

6 10 9 8 7
Webey and Keauna are specially great because they combine the circles with hexagons, squares and hipster triangles, things that I am yet to cover but make up a lot of current web trends. Webber is also different because instead of scrolling down you scroll horizontally.

Squares are less common in nature are much more of a man made thing for building things of function and purpose, because squares have flat edges you find them in things that need to stand up, things tables and beds. This doesn’t stop it from being used in design even more than circles, mainly because they are much easier and simpler to create and design around, you can see some excellent examples of squares in print.

11 12
This is a creative example of a mixture of lines and squares combined;
13 17 16 15 14

This has again been transported into web design and you can see few examples of this here;
18 23 22 21 20 19

Next up are triangles, these are commonly seen in geometric graphics and hipster triangles but I will be doing an entirely different post on those, I am going to again look str triangles in print;
24 28 27 26 25

Here are some wonderful examples of triangles within web design;

29 33 32 31 30

Finally, I want to look at the use of hexagons within print and web design, you can see these here;

34 39 38 37 36 35

and finally, the examples of hexagons in web design.

40 44 43 42 41

Something I have learnt from my research is that shapes can be us to draw attention to or away from something. To cause an interest in a certain area or to frame some important text, never the less it causes some interesting design and this is something I will definitely use in my brochure design.

References;
http://www.hellowman.nl/tactile-translations
http://sarahchampion.typepad.com/thirtysomething/
http://www.downgraf.com/inspiration/15-creative-brochure-design-inspiration/
(https://www.flickr.com/photos/kloportfolios/8514693768/)
http://www.kahuna-webstudio.fr/
http://targetnuclearweapons.org.au/#/petition
http://webey.eu/contacts
http://www.alteregolabflor.it/
http://www.natashastefanenko.it/EN/site/index.php
http://domoa.tumblr.com/
https://www.behance.net/gallery/17054107/Fabrication
http://graphicriver.net/item/indie-flyer-poster-6/4030962?ref=vandelaydesign&ref=vandelaydesign&clickthrough_id=117752380&redirect_back=true
http://holistichealthnaturally.com/26-house-plants-that-detox-the-air-in-your-home-naturally/
http://lite.ly/
http://www.themesawards.com/website-designs-for-inspiration/
https://www.behance.net/gallery/16547981/Schoeffel-Website-App
https://www.behance.net/gallery/YELLOW-FRAME/6591959
https://onepagelove.com/barnyard
https://www.behance.net/gallery/15923651/Abstract-Architecture-Brochure
https://www.etsy.com/uk/listing/99792889/worth-limited-edition-art-print-mid?utm_source=Pinterest&utm_medium=PageTools&utm_campaign=Share
http://www.designswan.com/archives/21-beautiful-and-creative-brochure-designs.html
http://www.awwwards.com/swissted-the-rock-posters-of-mike-joyce.html
http://www.lesproduitsdelepicerie.org/comete12-13.html
http://huaban.com/pins/35722337/
(https://s-media-cache-ak0.pinimg.com/originals/7a/6a/2b/7a6a2b290d322941dec668d07739c115.jpg)
https://dribbble.com/shots/447378-Portfolio-Design/attachments/27683
https://www.behance.net/gallery/Natura-Todo-Dia/5189017
https://www.behance.net/gallery/SONICOMED-WEB-DESIGN/5919805
http://designspiration.net/image/3261669370328/
https://www.behance.net/gallery/Scenes-in-Waveforms/4894267
http://randpophelvetica.tumblr.com/post/90546468603/a-new-poster-redesign-in-swiss-helvetica-style
http://designspiration.net/image/1729859328613/
http://graphicriver.net/item/modern-hexo-trifold/5811088?ref=damiamio
http://designersgotoheaven.com/post/330572261/futurism-an-odyssey-in-continuity-by-simon-c
https://dribbble.com/shots/1452793-Apidura-Initial-Concepts/attachments/215027
http://speckyboy.com/2013/05/02/50-sites-with-pastelwashed-out-color-schemes/
http://gorohov.name/