| The UX serves its purpose, despite lacking some visual design best practices. It is usable, though not 100% intuitive.
Some design inconsitencies which don't compromise the functionality and the overall experience. Minor use of Variables.
Typography, legibility adhere to the creator guide. Overall the Library might feel a bit dated, not adhering to modern trends. | The UX feels better-than-average, it lures the user in aesthetically and is free of elements that confuse, strain, or distract. It has a strong command of visual design best practices. It feels on-trend.
The Library presents a choesive design, shows consistency across elements. A style guide is defined and Variables are set for all major elements. | The UX is purely delightful. The aesthetics lure the user in and incorporate an innovative “wow factor” or two without creating confusion, strain or distractions. It shows mastery of visual design best practices. Feels original, has potential to set trends.
Impecable consistency through all Layouts and Demo site. Detailed syle guide and strong use of Variables. Typography, color, contrast and all design elements keep the consistency across all pages and sections of the Library. |
| Design Quality |
|---|
| The UX serves its purpose, despite lacking some visual design best practices. It is usable, though not 100% intuitive.
Typography, legibility adhere to the creator guide. Overall the Library might feel a bit dated, not adhering to modern trends. | The UX feels better-than-average, it lures the user in aesthetically and is free of elements that confuse, strain, or distract. It has a strong command of visual design best practices. It feels on-trend. | The UX is purely delightful. The aesthetics lure the user in and incorporate an innovative “wow factor” or two without creating confusion, strain or distractions. It shows mastery of visual design best practices. Feels original, has potential to set trends. |
| Typography, is legible/readable but may need to implement better hierarchy, falls short of some creator guide requirements.
Font sizes are majorly set using responsive units. There are no custom fonts added to the Library. | Typography, is legible/readable, uses good hierarchy, and meets , though there may be room for improvement.
Font sizes are fully set using responsive units. There are no custom fonts and no Google Fonts added to the Library. | Typography, is legible/readable, hierarchy is implemented perfectly, and meets all the creator guide requirements.
Font sizes are fully set using responsive units. There are no custom fonts and no Google Fonts added to the Library. |
| Interactions serve either a functional or aesthetic purpose but are superfluous in some areas, at times distract more than engage, create some cognitive overload, and while they are mostly intuitive, there are areas where they don't follow web conventions and thus do not behave as-expected. | Interactions might not create a memorable brand experience, but they do help direct the user, and promote information processing, i.e., they reduce, rather than add to cognitive load | Interactions are treated as brand attributes with personality, follow a pleasant cadence, and at the same time, promote information processing i.e., they reduce, rather than add to cognitive load. |
| Demo Site and Layouts |
|---|
| The Demo site layout may appear crammed or cluttered and needs better organization. May lack originality and/or variety. The Navigation isn't totally clear or covering all Library layouts.
Gestalt web design principles are lacking in glaring ways.
Some of the following documentation pages might be missing: Licensing, Style guide, Instructions, Changelog | The Demo site layout should be previewed in a way that's consistent with their behavior (i.e. interactions should interact), has consistent spacing, and do not appear crammed or cluttered.
The demo site should also highlight any features of the library: Example of Demo site where layout shows good organization, variety and originality: https://relume-library-lite.webflow.io
Licensing, Style guide pages are added to the Library | Everything is functional and behaves as expected. Library layouts are easily accessible through both the navigation and the page. Each layout has descriptive instructions or information about how it should be used.
The Demo site layout should be previewed in a way that's consistent with their behavior (i.e. interactions should interact), has consistent spacing, and do not appear crammed or cluttered. The Demo Site consistently adheres to Gestalt web design principles.
- Example of Demo site where layout shows good organization, variety and originality: https://relume-library-lite.webflow.io
Key elements are laid out in a way that demonstrates mastery of Gestalt web design principles.
All documentation pages are added to the Library: Licensing, Style guide, Instructions, Changelog |
| Nearly all layout requirements from the creator guide have been implemented.
The majority of unsupported elements are not added to the Library.
Layout variations are basic and lack evident differentiation between them.
Includes a basic Style Guide and the use of Variables for some elements.
Some visual assets are decorative but the majority provide contextual relevance to each Layout.
Most of the images & media are optimized for web and have a max-width or max-height set.
Some styles set on the main tag selectors (Body, All H1,H2,H3,H4, H5). Most elements inherits styles from a class.
CMS or Ecommerce bindings might be found, the demo site is not the homepage, some pages might be drafted. | Layout requirements from the creator guide have been implemented.
There are no unsupported elements added to the Library.
Layout variations are unique and each provides a different experience, serving unique use-cases.
Includes a complete style guide and Variables are used across several layouts and Demo site elements.
Most of the images & media add contextual relevance to each Layout and are optimized for web.
1-2 styles set on the main tag selectors (Body, All H1,H2,H3,H4, H5). Elements are styled through the use of custom classes.
No CMS or Ecommerce bindings, no drafted pages. Each layout type has it's own page. The homepage is the Demo site page. | Layout requirements from the creator guide have been fully implemented.
Extensive Layout variations, serving several serving a wide range of use-cases.
There are no unsupported elements added to the Library.
Includes a descriptive style guide and Layout instructions. Consistent use of Variables across all layouts and Demo site elements.
All visual assets are intentionaly used to provide contextual relevance to each Layout. Images & media are fully optimized for web and have a max-width or max-height set in responsive units.
Minumum styles set on the main tag selectors (Body, All H1,H2,H3,H4, H5). Elements are styled through the use of custom classes. N
o CMS or Ecommerce bindings, no drafted pages. Each layout type has it's own page. The homepage is the Demo site page. |
| Functionality |
|---|
| Easily processing information in some components within the library takes effort. Primary, secondary, and tertiary information is not clear across layouts/components.
Placement and composition of several elements, could be improved to promote visual hierarchy. (Ex. A contact form with a large heading, medium paragraph text, and small field labels) | Fully processing information on the Library feels easy. Primary, secondary, and tertiary information is clear across layouts/components.
Placement and composition of several elements, promote visual hierarchy inside the layout.
The library uses easy to follow hierarchies within each category. | Fully processing information on the demo site feels effortless, even fun. Primary, secondary, and tertiary information is clear across layouts / components.
Placement and composition of several elements, promote visual hierarchy inside the layout.
Visual hierarchy is impeccable. The library uses easy to follow hierarchies within each category. |
| Basic adherence with some auto-generated class names like “Column2” <3 -5 names across the style manager
Some instances of auto class names like “Div 7” etc. that can be updated.
Tag selectors are only added to some elements.
Elements lack unique naming and custom styles. E.g.: Form Fileds have unique naming.
Semantic tags are set for the major elements (section, aside, footer, navigation, etc). | Good descriptive naming with consistent use of the brand prefix like “acme-padding-global” for easy identification, fewer inconsistencies.
Rare instances of auto class names like “Div 7” etc. with most classes using the brand name prefix.
Styles are applied to each layout, instead of defined in Tag selectors.
Most elements are uniquely named. E.g.: Form Fields have unique naming.
Semantic tags are set for all elements (section, aside, footer, navigation, etc), across all Layouts. | Excellent & consistent descriptive naming with clear brand prefixing across all classes enhancing cohesiveness.
No occurrences of auto class names like “Div 7”, all class names are unique and contextual including brand prefix followed by a category prefix for the layout.
Tag selectors are properly set on all layouts.
Each element is uniquely named. E.g.: Form Fileds have unique naming and Sucesss and Error messages are properly styled to match the Librarie's design.
Semantic tags are set for all elements (section, aside, footer, navigation, etc), both in the Demo site and for Layouts. |
| The Demo site and Layouts have minor responsiveness issues across different viewports.
Use of basic % or px based non responsive units, with a minimal number of bugs to resolve on different screen sizes.
No additional breakpoints added. | Good adaptation across media queries with minimal responsive issues.
Effective use of responsive units (em,vh,rem etc.)
The Demo site and Layouts are fully responsive with no more than 2 bugs to resolve on different screen sizes.
No additional breakpoints added. | The Demo site and Layouts are fully responsive with no bugs or other visual hierarchy issues to resolve on different screen sizes.
Perfect adaptation to all screen sizes, optimized spacing on mobile and no larger breakpoints added.
Excellent use of responsive units(em,vh,rem etc.) across all elements.
The Library is fully responsive with no bugs or other visual hierarchy issues to resolve on different screen sizes.
No additional breakpoints added. |
| Accessibility score of 51-70 on pagespeed insights
Resource for designers: Webflow accessibility checklist
The color use ensures enought legibility, passing contrast ratio for main elements but not for all elements.
Most text is legible, background and font colors have enough contrast on all media queries. | Accessibility score of 70-90 on pagespeed insights
Resource for designers: Webflow accessibility checklist
Good contrast for text, borders, and icons between the background and foregrund.
Color is not the only way information is conveyed. | High legibility, passing contrast ratios. Button & link names are unique & meaningful. Accessibility-centered design is evident. Near total adherence to Webflow accessibility checklist.
Accessibility score of 90-100 on pagespeed insights
Excellent contrast across all elements, ensures all elements meet color contrast standards.
Text, borders, hover states, forms focus states, input fields and overlap areas are optimized for legibility.
High legibility, passing contrast ratios, uses multiple ways to convey information. |
