Image usage
Most of the time images are used in combination with graphics, but here we will focus mainly on (bitmap) visuals. Determine when images are useful in your design, follow the guidelines when using branded photography or what to do when you use stockphotography. Use the fixed formats for visuals on our websites.
Using images
- Storytelling & explanation: use images for inspiration, or to support the copy, when it’s easier to explain visually than using words.
- Consistency & recognition: using images will make it easier for users to recognize patterns. It will create trust and will help the user to navigate trough the website easier.
- Experience: The first impression is really important, this dictates the emotion of how you’ll browse through the page. The use of images will set a tone for the page.
- Functional: It’s possible to tell in words something has succeeded or failed, but it’s easier to show the status by using images.
Photography
- Brand photography: please follow the guidelines on the brandportal when using brand photography
https://brandportal.vodafoneziggo.nl/document/147#/fotografie/fotografie
- Stock photography: when using stockphoto’s please follow the guidelines on determining the right images and use the instruction on how to adapt these to the brand guidelines.
https://brandportal.vodafoneziggo.nl/document/147#/fotografie/fotografie/fotografie-kiezen
Fixed formats for websites
Fullbleed images
Fullbleed images extend to the edge of the browserwindow and are not limited by the grid, so the images are displayed edge to edge. These can be bitmaps or vectorbased images and will mostly serve as a background for a section, which means other content is often placed above it. There are fixed aspectratio’s defined. More info can be found in the the chapter: HeroContainer
Fullwidth image
Fullwidth images are embedded in the grid just like the article image. But where the article images is used next to copy, the fullwidth is mostly used as a backgroundimage, so other content is placed above it. They come in 5 sizes/ratio’s which are based on the image sizes for the Hero Container / Topbanner.
Article image
Article images are embedded in the grid, this means that there is always padding, so the images are never displayed edge to edge. These can be bitmaps or vectorbased images. Their main function is to support the copy above, beneath or next to it. For article images we use the following aspectratio’s: