Design

These are some design principles for Bero

Selecting images

From a discussion on Github

In an effort to bring this into the real world for us to review in context I've created a dedicated prototype that uses this real world content so that we can see how it's working within the design structure. This will help us ensure the rules we are implementing provide the best experience for people in the widest range of scenarios.

Please see image test prototype: https://invis.io/RU116Y5I9SV3

Primary recommendations and observations

  • You'll note that the vast majority of detailed images work best in the square format. No cropping is required here as the image can be resized in proportion to the width of the container and centred both vertically and horizontally to ensure equilibrium

  • Less detailed photographic based imagery is best suited to 16:9 ratio as it reduces unnecessary invasion of vertical space

  • Portrait based imagery such as A4 or Letter sized images can suffice with a square format however would be more legible at an extended portrait based size that invades additional vertical space. No cropping is required in any of these scenarios here as the image would be resized in proportion to the height of the container and vertically and horizontally centred to achieve equilibrium

Secondary recommendations and observations

  • Square is universally the best format for all image types (photographic, detailed and portrait orientation). Portrait based images in this format will be impacted by lack of legibility and accessibility issues if heavily detailed. The enlarge view can counter this

  • Heavily detailed images should be discouraged for the best UX from a HCD perspective as they run the risk of being illegible and cause accessibility issues. ALL images, diagrams and infographics should be created with a mobile first methodology to enhance the learning experience for users. With the caveat that this may not always be possible though should be aspired to. The vast majority of these images clearly fail accessibility tests from both a text size and colour contrast perspective

  • Would recommend some smart scripting to decipher if an image is portrait in orientation and render this image in the portrait container to enhance legibility and accessibility

  • 16:9 format is best suited to either photographic, decorative or wide format landscape orientation images

  • No cropping is required in any of the above scenarios (16:9 - 310px x 174px, Square - 310px x 310px, Portrait - 310px x 370px)

Image Size Guide

Course Featured Image

This should ideally be one image upload that is cropped and resized on the fly for the following scenarios:

  • Home Page Hero Banner: 320px x 452px portrait

  • Featured Course Card: 266px x 110px landscape

  • Standard Course Card: 128px x 96px landscape

  • Course Detail Hero Banner: 320px x 162px landscape

Designing for larger devices such as tablet and desktop is on the roadmap for design so I would recommend an image upload of 1280px x 648px landscape as majority of use ses are landscape bar the home page hero banner. This way we can safeguard against future releases.

Lesson Featured Image

This should ideally be one image upload that is cropped and resized on the fly for the following scenarios:

  • Standard Course Card: 128px x 96px landscape

  • Start Lesson Activity Card: 140px x 140px circular (please note: reuse lesson featured image for ease of use for a content management and creation perspective it makes sense to do so. We could also allow user override of this for example a user can upload a custom image or illustration if they would like to customise the experience. This proach would be great to implement across the board to boost flexibility for content creators whilst ensuring maximum efficiency for content creators.)

Activity Card Start Structure

  • Lesson Number (1>)

  • Lesson Name (52 characters)

  • Lesson Featured Image (140px x 140px circular)

  • Short Description mapped from existing lesson description for legacy deployments (225 characters)

Image upload ratios

Content creators are encoureaged to use a suggested minimum width of 800px to keep it simple and easy for people to remember. Please see Invision links below:

See examples

Other Notes & Considerations

  • Allow re-use of images for maximum content creation efficiency, whilst providing additional options to override with custom imagery or illustrations where appropriate

  • Ensure images are optimised to straddle balance between quality and file size. It's important images looks crisp and are also fast to load

  • Cropping and resizing of images should be automated on the fly as much as possible to reduce content creation overheads. Ability to add custom cropping or predefined opping controls such as left, top, right, bottom, top left, bottom right etc. should be investigated to allow flexibility, control and ease of use for content creators

Loaders

From Github issue: #427

We've refined the loader designs into x4 scenarios. Kindly see design direction below:

In future releases it would be amazing to look to animate the full screen initial loading screen i.e. https://invis.io/GV10D9Z937WQ

It would be great to work towards bringing some subtle movement and SVG animation to Daniel's underwater illustrations upon initial app load which would help inject ditional personality and sense of whimsy into the experience.

PreviousResizing images for BeroNextRequirements

Last updated

Was this helpful?