Images
Images in a user interface serve as visual elements designed to convey information, enhance aesthetics, and improve overall user experience. These visual impacts play several key roles in UI design:
Visual communication
Images are powerful tools for conveying messages and information quickly. They can communicate concepts, emotions, and information more effectively than text alone.
Information enhancement
Images can complement textual information, making it more digestible and memorable. Infographics, charts, and diagrams are examples of how images can enhance the presentation of complex data or concepts.
Emotional connection
Images have the power to evoke emotions and connect with users on a more personal level. Well-chosen images can create a positive and memorable user experience. They also contribute to the overall aesthetic appeal of a UI, enhancing its visual appeal and making it more engaging.
Accessibility
Images need to be optimized for accessibility by including descriptive alt text. This ensures that users with visual impairments or those using screen readers can still understand the content conveyed by the images.
Sources
In general you are free to use any image source. But pay attention on the licensing for those images. The onyx design system is not responsible for any kind of license violation or other legal fallacies and dissociates itself from any kind of license violation.
To prevent any kind of legal issues, onyx recommends to use either your own copyright images or royalty free sources like:
Image selection
Reduce color gamut
The image should employ a reduced color gamut. This means for instance that it is mainly blue, green, or red but not at the same time equally blue, green, and red. Different color gamuts can be used in an application for different pages to distinguish them from each other.
Natural light
The pictures should look like they were taken in natural light. Avoid hard light or shadows, in particular on the faces of people. The images should be naturally balanced and not look stylized. Avoid strong contrasts in images.
Snap shots
The pictures should look natural and not posed. This means that the pictures should not depict forced or posed expressions of actions. The picture should be a snap shot of a normal and natural movement.
Visual simplicity
The images should not contain too many prominent elements. Generous use of free space makes the statement of the picture clearer and simpler.
No artificially placed elements
Avoid images on which text, graphics, or 3D elements were placed afterwards. Also avoid images that were created completely in 3D.
High image quality
Make sure to use images of high quality. You should never be able to see individual pixels.
