Ratio · UI/UX Designer, Protyping · 2021-2022
A tool to help users understand aspect ratio on the web.
Understanding aspect ratio can difficult on the web. With content managment systems, responsive design, grid placement considerations, the descision making process can be obfuscated by a variety of combied choices the user needs to make before seeing a final result.
With wineries, image-rich content drives website engagement, and making sure those images display properly is a crucial part of good UX design. Whether you're working with photographs, illustrations, or video, an image that’s stretched, squashed, or poorly cropped can make a poor impression for on-site visitors and affects their overall experience on the site.
Initial research saw us tackling this problem in a few ways.
Firstly, we gained an understanding of the source material that users would typically upload. In the case of most modern smartphone cameras using Android & iOS, we found common ratios that people could use to take images without requiring post-processing editing or cropping tools.
Having a base set to focus on would later help to bridge an understanding in the user education process from outside of the system through to use.
We grouped by portrait/landscape and provided some visual queues to help further explain the choices. Where supporting context could benefit the user, for example: Pairing 1:1 to Square, 16:9 to Widescreen, 4:3 to Classic TV sizes.
Adding more variations was a quick process and more specific display ratios were included for unique use cases like eCommerce product sizes bottles, clothing etc.
We maintined a reduced, focused set of options for use within user-editable components, as they would serve in general layouts available.
These aspect ratios get contextualized with practical examples to help users understand image placement and focus.
At the top level of a component design, we dictate depending on layout, how manu options a user might have. In some cases there may only be one option, but when pratical uses cases exist for variation, we will present a set of options to a user.
After a selection is made, in this case 1:1 (square), we provide tools to help the user adjust background position.
Image Metadata:
Title, Alternate Text, Author Attribution, Author URL
Object Position:
We provide two methods, one using a select
Object Fit:
Fit to fill – the image fills the height and width of its box. The aspect ratio is maintained but the image is usually cropped.
Contain – increases or decreases the size of the image to fill the box while preserving its aspect-ratio.
Image Parallax
By having a consistent aspect ratio, we can get the following benefits:
- Imagery across a website will be consistent across different viewport sizes.
- Customers have the confience that important details are preserved.
- We can have responsive video elements, too.
- It helps in creating a clear guide for image sizes by designers, so developers can handle them in the development process.
Style theme pairing with live content editing.
Live Style Guide
A presentation set designed to help reduce the guesswork of colour application for clients. The Live Style Guide allows users to easily explore dark, light and accent colour variations for use within layouts.
Brand palettes can be created quickly thanks to the minimal approach used for setting up dark, light and highlight colours within each theme.
