Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Finding Alternative Sources Of Typographic Layout In Our Surroundings

Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.

You may want to take a look at the following related posts:

The Framework Of Sources For Typographic Layout Link

According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.

In most art and design classes, students are asked to analyze the structure of a painting or design in order to better understand principles of organization. These linear studies usually have no relevance to the student outside of the class. But these exercises hold an important lesson, which is about learning to abstract images — and even our surroundings — into linear structures in order to learn about layout organization.

Learning To Abstract What We See Link

Most of us live in a relatively static environment, whether urban or rural. Recognizing that this environment is framed by points, lines and planes will help us abstract the environment. Let’s consider a photo of an urban environment. Below is a photo of a city escape in Chicago:

(Photo courtesy of the Urban Studies Department, Wheaton College, Wheaton, Illinois.)

Here we have a worm’s-eye view of buildings. We can already discern interesting spatial relationships. The white space in and of it self has interesting shapes. These shapes alone give us creative ways to apply copy. Let’s see an example of how this space could be abstracted:

Linear abstraction6
Linear abstraction.

Here, the city escape photo has been abstracted to simple lines. The lines converge at a conceptual point. The lines enclose spaces to create a conceptual plane. Although I did not mark the plane as such, lines that converge at any four points or angles become a plane. Abstracting spaces can, of course, be done in infinite variation. There is no right or wrong. Feel free to experiment!

In looking at the linear abstraction above, we see several lines converge at a certain point, which is towards the right and a bit off center. We can call this a point of hierarchy. Let’s clean up the abstraction and take another look.

Linear Abstraction 27
Linear abstraction #2.

Now we have a cleaner and clearer version of the first abstraction, perhaps making it a bit easier to start thinking about a possible typographic layout. So, let’s experiment with type placement.

Type layout using linear abstractions as grid248
Typographic layout using the linear abstraction as a grid.

As you can imagine, we could do hundreds of variations of this. We can also play with the intersection of some of the lines and points in the layout:

Type layout using linear abstraction as grid and as visual punctuation9
Typographic layout using the linear abstraction as a grid and as visual punctuation.

These simple exercises in layout composition help us see how a photo of an urban landscape holds unexpected inspiration. Now, how do we use this for other applications? What if an article that we need to design does not have interesting or arresting photographs? One way to solve this is to think about the subject matter and find your own sources for inspiration.

Finding Inspiration In Your Surroundings Link

This is simpler than it sounds. It requires only that you be curious and get your dusty old camera out of the closet. You can find interesting shapes and arrangements in your kitchen drawer. Look out a window and study how its frame interacts with the space, or walk outside to look at the trees and branches. If you’re in the country, invite inspiration from the expansive landscape. Take photos of or sketch the most obvious linear connections you can find. If you’re in the city or suburbs, find the most obvious linear connections there. I find that buildings are an incredible source of inspiration with their strong vertical and horizontal lines.

Other sources of inspiration are people moving, dancing and exercising. Here is an example of how a photo of a dance performance inspired my design of a calendar for the Iowa State Dance Department. I used the dancers’ strong movement to the left as the basis for the calendar’s grid:

Dance calendar 2004 Alma Hoffmann, ©201010
Dance calendar for Iowa State University Dance Program, Ames, IA, 2004
(Copyright: Alma Hoffmann)

What About Web Design? Link

Browser capabilities for manipulating website layouts are still a bit limited, but not for long. On some websites — The Art of the Web2811, for example — you can find information and sources for experimenting by rotating elements. The Art of the Web recommends downloading the Webkit nightly build12 for your browser. It explains that, “Webkit is the rendering engine used by Safari. The Webkit nightly build browser, then, is a preview of what’s to come in Safari and other browsers and devices that use the same engine.”

Few websites use text rotation because of spotty browser support. If you know of any, please share them below in the comments. So then, how can we push layouts a bit more on the Web? What kind of sources can we use for inspiration? Two come to mind: architecture and landscapes.

Architecture gives us horizontal and vertical structures and spatial divisions from which we can take cues. We can play around with it in our horizontal and vertical grids on the Web. Services such as 960 Grid System13 let us download grids and experiment with spacing for Web designs.

Translating landscapes to the Web by using horizontal scrolling accomplishes two things: it puts the user in control of the navigation, and it evokes an expansive panorama. Peter Pearson’s website14 (screenshot below) takes full advantage of horizontal scrolling. It gives us a sense of landscape through photography and in the navigation itself. A humorous touch can be found in the invitation to the user to “Let’s go that way,” followed by “Gasp” in parentheses below:

Peter Pearson website screenshot 15
Screenshot of Peter Pearson’s website.

Peter Pearson website screenshot16
A detail of Peter Pearson’s website.

Other websites push the use of landscape by letting users choose the direction to take. Some allow us to zoom out to see where we want to go, much as we do in a natural landscape. See this example of Schematic17:


We stand before this website’s navigation much as we stand at a crossroad, choosing our direction. Allowing users to control their path engages them.

Other websites take advantage of the x-index to create a sense of depth and combine it with horizontal scrolling. In this way, the metaphor of landscape is even stronger and perhaps makes more sense, because the natural environment does have depth. The website for Fauborg19 (below) does both, while also providing a drop-down menu and hand icon for the horizontal scrolling:

Crowley21, a small ad agency in New York, does not use horizontal scrolling, but rather selectively magnifies the menu and text to create perspective and depth. The arrangement has a sense of playfulness, and the user is engaged by seeking the little treasures stowed away in the links:

Exploring Web Design With Webkit Link

The ability to rotate text opens yet more possibilities for layout design on the Web. Browser support is still inconsistent but catching up to newer coding capabilities, such as HTML5, which allows for three-dimensional effects, and Webkit. With Webkit, I attempted to reproduce the layout discussed at the beginning of this article. Here is the original:

Type layout using linear abstractions as grid248

Below are screenshots of my experimentation with code and Webkit to reproduce the text rotation. Close, but not quite the same. The angles require just the right coding combination, because one block will inherit the values of the one above it.

Text rotation using Webkit25
Text rotation using Webkit. (Alma Hoffmann © 2010.)

Here is another example in which the title is rotated in the opposite direction of the title in the original layout:

Text rotation 2 using Webkit. Alma Hoffmann©201026
Text rotation #2 using Webkit. (Alma Hoffmann © 2010.)

Conclusion Link

Abstracting the structures, spaces and people around us into simple line structures gives us infinite layout possibilities that can be applied to print and Web design. As technology keeps advancing and browser support continues to grow, Web design layout will continue to be more experimental and less restricted to horizontal and vertical alignments. As in the print industry, Web technology will continue to grow to accommodate more and more experimental layouts. These possibilities will offer designers more freedom and versatility. However, design essentials — such as learning to analyze composition and to abstract spaces — remain vital to our ability to translate the three-dimensional world in two dimensions, and vice versa.

References Link



Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32

↑ Back to top Tweet itShare on Facebook

Alma Hoffmann is an editor at Smashing Magazine, design educator and a freelance designer. You can find her on Twitter @almahoffmann and on her blog She also wrote the articles "Finding Alternative Sources Of Typographic Layout In Our Surroundings", and "I Draw Pictures All Day".

  1. 1

    I think the bigger point to take away from this article is that you aren’t a designer simply when you’re sitting down to design. Looking for and discovering inspiration everywhere is in my opinion an important part in maturing and broadening your creative vantage point.

  2. 4

    Great article Alma! Good to see you writing for Smashing Magazine!

  3. 7

    Thank’s !

  4. 9

    Great! Layout instructions are the most interesting! Thank you!

  5. 11

    Interesting article. Nice one :)

  6. 13

    nice to have this topic featured to get a wider view at typography, or structure/ grid based design overall. especially to push it that far, to get into web-side of things with often overlooked basic featured like the z-index and new possibilities that are coming with html5. i would love to see a deeper view on these.

    i am working on similar projects at the moment in the search for structures to create typopgraphy. Maybe the moodboard and the provided links are interesting for some of you (hope thats not advertising ;)) :

    • 14

      Thank you! Yes, I think that a deeper view is in order for future articles. I will go to the site and take a look!

  7. 15

    rafael armstrong

    September 14, 2010 7:42 pm

    Excellent article, Alma! Thanks for reminding us that there’s a whole world out there full of experiences ready to be mined for inspiration.

  8. 17

    Thanks for the tip! Never knew by those linear abstarct you can create the layout of your web.

  9. 19

    Thanks – a good reminder to find inspiration from the real world. My site uses subtle text rotation in the benefits box on the right and on the business card under “Contact” – see

    One thing I’d note is that text rotation works well on Safari, but on Firefox the text rendering is not good when rotating text by an arbitrary amount (i.e. not 90,180,270 deg). Specifically, you get uneven letter-spacing and letter rotation. So like on my site, don’t implement the firefox -moz-transform css property until it looks better!

    Oh by the way about half way down the article mentions x-index – don’t you mean z-index?

  10. 21

    This article seemed pretty empty. Nice idea though, it would be interesting to see it discussed more.

    • 22

      Thank you Jack for your comments! I will take your thoughts in consideration for future articles. :-)

  11. 23

    life is so wonderful ,if you look carefully,you will notice the beauty you have not found before

  12. 25

    Adam Fuller Design

    September 15, 2010 2:23 am

    Great and interesting article.

  13. 27

    That “WebKit” sure does look a lot like Firefox…

    And regarding rotation using CSS, couldn’t you just rotate the wrapper element in the first example, and the two elements separately in the second one?

    In the second one, it might be useful to look into transform-origin ( to have the rotations “centered” around the same point.

    EDIT: And oh yeah, @James: Unless things have changed recently, all rotations look crappy in Google Chrome on Windows because the underlying graphics library does not support antialiasing. That’s a problem since both Safari and Chrome respond to -webkit-transform. (Transformations look good in Chrome on OS X, though). I feel your pain.

  14. 29

    arthur abogadil

    September 15, 2010 3:05 am

    Nice post! As a web developer, we should always be in the look for various sources of inspiration, and this is definitely one of the good ones.

    Arthur Abogadil

  15. 31

    Did you mean z-index instead of x-index? Thought I might be missing something here, thanks for the article!

  16. 33

    Interesting article. Really nice to remember that we are designers all the time.

    We draw our source of inspiration from somewhere else. If not, we are not great designers.

    However, I do NOT like the example. What HORRENDOUS usability!

    • 34

      Thank you Robert! :-) I smiled when I read your comment. I understand what you are saying. :-)

  17. 35

    Not to nitpick but Crowley is in Buffalo, NY which is as far as possible from NYC while still being in NY state.

    • 36

      I see your nitpick and I raise you: it’s Crowley-Webb and they’re from Buffalo, NY. Buffalo should be recognized for it’s design talent in the same way you’d say Atlanta, Boston and Chicago, and not Georgia, Massachusetts and Illinois. And kudos to Crowley-Webb for putting Buffalo on the map. (@nb3004 thanks for the nitpick)

    • 38

      Thank you for the observation! I will keep it in mind for next time! :-)

  18. 39

    Peter Pearson is a genius with that masking effect on his background!

  19. 43

    the most ridiculous article ever, well written in a way that will make you look like a complete moron

  20. 46

    arthur abogadil

    September 16, 2010 12:30 am

    I’ve posted this on my blog at thanks! Nice article!

    i am a web deveper @

  21. 48

    And yet I never thought of it from this perspective . . . this gives me a realm of unlimited possibilities. Thank you for posting!

  22. 50

    interesting simple topic… finding inspiration from environment around you… a very subconscious element which lot of us have to develop… like the way how you can simplify and look at it things abstractly…

  23. 52

    I totally concur with you as regards to finding inspiration from one’s environment. I once designed a navigation menu to mimic that of an external stairwell that looks like a fire escape, each landing serving as a button that would scroll down more options when clicked. It made the design very fresh.
    I love the resulting perspective from the image of buildings you have up there, and how beautifully the texts were placed. Inspired me for a project I’m working on at the moment, and I wanted to use typography as it’s main theme, but now, I’m going to add perspective and depth!
    So, off to go looking at buildings and public spaces!

    • 53

      So sorry I had not seen this a lot earlier! My apologies! Thank you for reading and your kind comments! Please do share with me your new designs! :-)


↑ Back to top