Images: Creative Direction & Types

Creative direction of images

This site uses a mixture of flat vector illustrations and photographs for imagery. Vector illustrations use five colors from the USDS Color Palette, using yellow sparingly as an accent color. Besides being flat (without gradients or other depth effects), the style is geometric and abstract.

Our photographs are candid, unstyled, and we take them ourselves. We prefer to use the DSLR Sony A7S at HQ, but photos can be taken by anyone from our staff, especially project photos. We use minimal retouching, and we favor an editorial feel over stock. The subject matter is mostly people – USDS staff or the users we support. Other subjects include close-ups of cultural items (e.g. swag) or work artifacts (e.g. sticky notes & journey maps).

Types of images

1. Home Page Hero

• [link to Photoshop file]

2. Vector Page Banners

• All were created in Illustrator and exported as svgs
• Two sizes for large & small breakpoints: [add pixel dimensions]
• [link example]
• [link to Illustrator file]

3. In-Page Vector Images

• All were created in Illustrator and exported as svgs
• [link to Illustrator file]
• Rectangles
  • Rounded corners (in CSS), but exported as square corners
  • [link example]
• Squares
  • Rounded corners (in CSS), but exported as square corners
  • [link example]
• Circles
  • [link example]
• Media / Publication Logos
  • [link example]
• Event Logos
  • [link example]
• How We Help Vector Icons
  • [link example]

4. Project Graphics

• Card Photos
  • [link example]
  • [link to Photoshop file]
• In-Page Photos
  • [link example]
  • [link to Photoshop file]
• In-Page UI Graphics
  • [link example]
  • [link to Photoshop file]

5. People Photos

• [link example]
• [link to Photoshop file]

6. News & Media Card photos

• [link example]
• [link to Photoshop file]

7. Instagram Feed Photos

• [link example]

8. Social Card Graphics

• These are the "summary cards" that appear when users share links from usds.gov on Twitter, Slack, and other social channels. They also appear in Google search results.
• Home Page Photo
  • [link example]
  • [link to Photoshop file]
• Vector Cards for other pages
  • [link example]
  • [link to Illustrator file]