Image treatment ideas
Rounding the corners of images is popular (which also could end up being trendy and dated). It softens the look of the page. The key is to be intentional and not distract from the contents.
Standard square edges: Pros: Classic, clean. Cons: predictable, static.
Rounded corners: Pros: Informal, fun. Cons: Current trend (may become dated). In a grid, it can create a distracting after-image dot where the corners meet.
Irregular corners (a mix of different diameters). Pros: informal, friendly, organic (not regular), not as common, The square corner/round corner combination creates a mix of professionalism (square corners) with lightness (rounded corners). Cons: The mix could look wrong (distracting), or add meaning (like clickable or not) where there is none.
Animated Effects: Behaviors like scale, flashing, fade in, move in, etc., can be applied to static elements (text and photos) to change the feeling of a page. Judicious use of these variables (shape and behavior) is the difference between a page coming alive or becoming annoying.
Ideas and Variations
Logo, Fonts, and Navigation
- Using the official blue Tufts logo – lighter feel than the black.
- Open Sans font (or something san serif and clean that loads quickly and has a variety of weights).
- Light grey highlight. Pot and any grey text using Tufts Grey #646469.
FIC green, colored blocks, and the FIC pot
- To reinforce the FIC green, we can use a vertical bar that runs down the left side of the site (see below). It colors the page without being heavy-handed.
- Text blocks for the “Big Message” cycle through the bright colors. Note: Black text is the only color that has enough contrast to be used as text or labels on these colors (see chart above):
- To keep a light feel and also be legible, section headings can use a light weight of the base font, at a large size.
- The irregular shapes in the pot contrast with the geometric elements of photos and typography. The pot is a great symbol for the concepts of “humble”, “appropriate technology” and “lightness.”
