Using images
Illustrations
Images can make a website more visually appealing and can help to break up large blocks of text, making the website more inviting and easier to read. Images can also be used to help create a brand identity and to communicate the values of the Somfy brand to users.
Choosing the right illustration
If your images are irrelevant and insensitive, they will confuse or offend users, damaging your product's credibility and user satisfaction.
Images must be relevant
They must match the content of the page, help convey the message visually, and reinforce the purpose of the page.
Images must be high quality
Blurry or pixelated images can give a bad impression and undermine the credibility of the site.
Consider the context
When selecting images for UX, it is important to consider the context in which they will be viewed. Ensure that your photos look great and work well on all devices with the safe area (see below).
Safe area
Depending on the CMS you are using and depending on the user device/screen resolution, images can be cropped, zoomed. Be sure to test the page in all scenarios. You can use the following image tester to understand your images behavior in a block.
- Avoid cropping people’s heads
- Set the Focal point or Point of Interest to help cropping on the right spot on smaller devices
- By default, the safest area is the center of the image
Banners with text
Keep the content harmonised and accessible throughout all Somfy devices and languages.
Because of its responsive nature, images displayed on the website are automatically cropped and/or resized constantly depending of the device or the screen resolution or even the web browsers' window size.
- Do not write text on image to avoid these problems.
→ Use text blocks instead of including the text in the image
Try this
Use appropriate blocks to have the text accessible and readable in all situations
Avoid this
Text over image on Desktop is not easy to read
Avoid this
Text over image is cropped and not readable on mobile version
