Design
These are some design principles for Bero
Last updated
Was this helpful?
These are some design principles for Bero
Last updated
Was this helpful?
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.
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
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)
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.
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.)
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)
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:
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
We've refined the loader designs into x4 scenarios. Kindly see design direction below:
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.
16:9 (800px wide x 450px) –
4:3 (800px x 600) –
Square (800px x 800px) –
From Github issue:
Button loader:
Full page loader (dark):
Full page loader (light):
Sitewide toast notification loader:
In future releases it would be amazing to look to animate the full screen initial loading screen i.e.