Online College Courses for Credit

Module 4: Thoughtful Web Design

Module 4: Thoughtful Web Design

Author: Melissa Cunningham
See More

Lesson 1: Understanding Layout in Web Design

Learning Targets:

At the completion of this exercise:

  • you will be able to distinguish between the F-Layout, Z-Layout, and Split Layout
  • you will apply your knowledge of one of the layouts


As Web Designers, we follow a lot of design paradigms and layout principles: grids,vertical consistency, the F-Layout, Z-Layout, Split (Zig-Zag) Layout, rule of thirds, the Golden-Ratio and so on. Paying attention to these principles will produce visually appealing and functional design.


Today we're going to examine the "F Pattern Layout". Rather than trying to force the viewer's visual flow, the F-Layout gives in to the natural behaviors of most web surfers and it uses scientific studies to back it up. This tutorial will walk you through the principles of the F-Layout, why it works, and how you can create your own.

Visit the F-Layout Tutorial to learn more about this website layout.


The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic "Z-Layout" isn't going to be the perfect solution for each and every website out there, it's certainly a layout that's effective enough to warrant inclusion in any web designer's arsenal of layout ideas.

Visit the Z-Layout Tutorial to learn more about this website layout.

Split (Zig-Zag) Layout

While this might sound a little silly and obvious in the beginning, this fundamental layout can be very effective. Our eyes tend to follow a zig-zag motion while skimming through a page. If the eye does follow a horizontally straight line - as in the Z-layout, he/she is concentrating (or is trying to). Since 90% of the Web traffic coming to your site does not pay detailed attention to your page, making your design "skim friendly" will definitely pay off.

Visit the Split Layout Tutorial to learn more about this website layout.

Golden Ratio

Math is beautiful. Does that sound a little strange? I sure thought so when I first started designing. Math is so rigid and oftentimes boring, or so I thought. You would be surprised to find out that most aesthetically pleasing designs, works of art, objects and even people have math in common. Specifically the Golden Ratio, also known as the divine proportion, which is designated by the Greek letter Φ (phi).

Visit the Golden Ratio Tutorial to learn more about this website layout.


Activity #1

Read & review the articles above.  Respond to the Reading Check questions by completing this form:

Module 4 Lesson 1: Thoughtful Web Design

Activity #2

Open the Layout Assignment PowerPoint attached to the Assignment in Schoology.  

  • Choose one of the 3 basic website layouts, Z, F, OR Split, and create your basic home page on slide 5.  
  • You may use any of the content on slides 2-4 to design the layout of your website.  
  • Feel free to use multiple copies of the elements. 
  • It should be CLEAR when I look at your home page which of the layouts that you chose.  
  • You should also apply the principles of the Golden Ratio
  • When you have completed, delete all other slides but your home page slide.  
  • Save it in your Intro folder and submit on Schoology.


F-Shaped Layout
Z-Shaped Layout
Split Layout