Monday, December 9, 2019


Design Principles - for the Audubon Homepage

Above: Audubon Home Page, Dec 2019

me, Wow, this homepage is amazing... 

Intentional or not (probably intentional), this is an incredibly effective home page. I’ve broken the reasons into some broad categories, intersected by the applied design concepts. Here’s why it's JUST SO GOOD: 


A. Faces: Humans are attracted to faces, but this can also be distracting. Having the faces in profile promotes engagement/attraction to the photo, but doesn’t distract from the content/idea (‘people like birding’ / ‘Audubon helps birds’).  
B. Action: The photo very “active” - people are doing things. Active photos are important for the goal of inspiring more actions (such as ‘birding’ or ‘donating to help birds’).
C. Redundancy: At first glance, maybe you miss that these people are birding, but there’s an actual bird mural on the right. So in case you had no idea why these people are all spying, context tells you - Audubon is obviously about birds.  
D. Camera point-of-view: This point-of-view (from top to below) might make the audience feel slightly removed from the birders themselves (because they’re not down among them), but the shot size - pretty close frame, in a tight space - balances the removed point-of-view with a feeling of intimacy and togetherness. 

Photo content (visual): 


A. Perspective: The photo’s perspective narrowing towards “Audubon” is spot on. The perspective is guiding the audience to the most important part of the page - ‘We are Audubon.  
Balance: Rule of thirds - B. Horizontal: Top to bottom, the focus generally follows the rule of thirds. Also, the most focused location is on the bottom third, so the eye tracts downward (and outward) into more content.  
Balance: Rule of thirds - C. Vertical: Left to right, the content follows the rule of thirds (window, space, wall), giving a balanced feel to the whole image, ie. harmony.  
  • NOTE: This is the only thing I would change… If possible I would reflect this photo L/R so that people are facing to the right. Following the birders gaze towards the right, instead of left, would flow better into the next section of subsequent content, because people that use English are conditioned to read left to right.  
D. Color: The photo is pretty dark but the important parts (faces, birds on the mural) stand out. The vignette (dark fade at the top) also lends contrast to the whole menu navigation area.   

Photo design aspects (visual):


Greatest focus to least

1. Organization identity. “Hi, we are...”, is top priority for most home pages. The “Audubon” name has prime, left-side real estate, which is first spot people look on a page. The name is also the greatest attraction on the page due to its contrasting size (large), font (serif) and color (compared to other text over the photo, it has the greatest and most striking contrast with the background).   
2. Call to action. Call to actions (donate, join, etc.) are probably the second most important, so those buttons are red. The color red is used so ubiquitously for getting attention because it works by drawing on a very ancient instinct that red (blood) is alarming. It commonly signals ‘stop!’ and ‘watch out!’, or in this contemporary case, ‘stop and donate!’  
3. Navigation menu. Follow-through is probably the third most important - organizations want their audience to be drawn in and click onto other pages. The navigation bar here is more diminutive than identity and calls to action. But, the navigation links are in an expected and conventional location which makes them an easy find.   
4. Highlight links. Extra, more ephemeral content, is often the least important, but still worth front-page status. The highlights here are not as important as 1-3, so these links are pushed to the top where the audience is likely to look last. Although they may be the last thing to notice, the exciting and current content leaves them wanting more, so highlights are a good take-away. The highlight links are still noticeable because of the green leading text. The green works well because it is instinctively less attractive than red, but still engaging here because it contrasts with all the white text. 

Content hierarchy (visual):

...Not to mention the organized alignment, proximity, the conservative and effective use of nuanced color, the functionality (responsive scaling of the page to different screen sizes), etc, etc...

Reading list

To learn more about visual concepts in this post, check out:

1. On brains and human faces: 
Quiroga, R. Quian, et al. “Invariant Visual Representation by Single Neurons in the Human Brain.” Nature, vol. 435, no. 7045, 2005, pp. 1102–1107., doi:10.1038/nature03687.

2. For research on visual redundancy: 
Nothelfer, Christine, et al. “Redundant Encoding Strengthens Segmentation and Grouping in Visual Displays of Data.” Journal of Experimental Psychology: Human Perception and Performance, vol. 43, no. 9, 2017, pp. 1667–1676., doi:10.1037/xhp0000314.

3. Read more about camera angles:

4. For a thorough analysis of image balance:
Sammartino, Jonathan, and Stephen E Palmer. “Aesthetic Issues in Spatial Composition: Representational Fit and the Role of Semantic Context.” Perception, vol. 41, no. 12, 2012, pp. 1434–1457., doi:10.1068/p7233.

5. On the rule of thirds:
Barry, Ann Marie. “Perceptual Aesthetics: Transcendent Emotion, Neurological Image.” Visual Communication Quarterly, vol. 13, no. 3, 2006, pp. 134–151., doi:10.1207/s15551407vcq1303_2.

6. For info on ‘page real estate’ (hierarchy):

PS. Join your local Audubon chapter!

Read More