How we evaluate portfolio examples

The three portfolio example sites that you submit on your application will be reviewed following the standards below.

Criteria

To be accepted, applicants need to meet the following requirements:

  • Good in Webflow Experience, Design Quality (Graphic Design and Interaction Design), and Layout and Structure (Information Architecture, Responsiveness, and Gestalt Principles)
  • Satisfactory in Site Optimization and Accessibility

Criteria

Satisfactory

Good

Exceptional

Webflow Client Experience

Basic knowledge and some experience building client projects in Webflow. Live client sites that aren’t built on templates.

Solid track record of diverse set of client projects in Webflow. Demonstrates strong knowledge of Webflow's collaboration and client features.

Extensive experience and expert knowledge leading client projects in Webflow, including CMS, Ecommerce, and expertise integrating Webflow Apps and advanced features to enhance site functionality.

Solid testimonials from strong client projects.

Design Quality   

Graphic Design

Uses of color, typography, layout and/or assets are basic. Elements lack attention to detail or branding of personality, but are mostly relevant and strategically placed.

Some design bugs, or spelling and grammar errors.

Strong web design principles such as balance, hierarchy, and proportion, and use of color, typography, and high-quality assets for cohesive branding.

No glaring design bugs or multiple spelling and grammar errors.

Spacing and alignment is consistent.

The website entices the user with high-quality visuals that tell a story, optimized for the web. Graphics add aesthetic and informational value. Site demonstrates mastery of visual design principles.

No design bugs or content errors.

Interaction Design

Site works as expected (no broken links or functionality) and interactions serve a functional or aesthetic purpose but are superfluous, or at times distract more than engage, or are unintuitive at times

Interactions help direct the user, and promote information processing, and reduce cognitive load.

Includes advanced Webflow features that enhance usefulness. Interactions are treated as brand attributes with personality, and promote information processing.

Layout and Structure   

Information Architecture

Functional, responsive site with basic or outdated design. Examples include disorganized text and repetitive layouts.

Class names are mostly logical, but few exceptions of automated or illogical values (e.g. heading1, Div Block 3)

Fully responsive site with sections easy for users to quickly scan and consume information to achieve their goals.

Logical class naming and structure, using correct spelling. (e.g. Main Heading, container-large). Combo classes don't go more than two levels deep.

User can easily accomplish their goals and processing information is easy and enjoyable.

Gestalt Principles

Site meets user needs and doesn’t appear crammed or cluttered

Pleasing, creative compositions that adhere to UX/UI principles and modern design trends.

Layout displays exceptional use of visual design, and even set trends, while achieving clear-defined user goals.

Responsiveness

Site is fully responsive with a minimal number of bugs to resolve on different screen sizes.

Site is fully responsive with no bugs or other visual hierarchy issues to resolve on different screen sizes.

Layout built with responsiveness in mind (e.g Fluid Units/REM.)

Site Optimization

No glaring issues that impact customer experience. Site performs as expected.

SEO page settings are mostly set up.

Mostly use appropriate semantic tags in elements (section, aside, footer, navigation, etc).

Favicon is set
.

Unused interactions are cleaned up.

Use Performance and Best Practices scores on PageSpeed Insights to test.

Well-optimized site with good use of SEO best practices and Webflow settings. Site performs quickly.

1 H1 per page

Page settings set up.

Webflow.io subdomain indexing disabled.

Global class utilization.

Semantic tagging used.

CSS in head tag, not footer.

JS and CSS minified.

Excellently performing and optimized site with advanced SEO best practices and optimized Webflow settings.

Accessibility

High legibility, passing contrast ratios, and useful alt tags for images.

Button & link names are unique & meaningful.

Native Webflow elements used whenever possible.

Design caters to a diverse audience.


Use Webflow guidelines and Accessibility score on PageSpeed Insights to test.

Features comprehensive keyboard navigation and effective use of ARIA attributes for screen reader accessibility.

Fully semantic HTML, extensive keyboard accessibility and sophisticated use of ARIA attributes, ensuring a fully inclusive experience.

Common Rejection Reasons

  • Site(s) are built using a template
  • Sites aren’t real client sites built on Webflow
  • Site layouts are too simplistic or basic
  • Images or iconography are low quality (e.g. pixelated or non-optimized file type/size)
  • Inconsistent use of color, typography, or style guidelines
  • Design is cluttered or overwhelming, with poor visual hierarchy
  • Animations or movement are overused or distracting
  • Site does not follow best practices for accessibility

Site References

A few examples of sites that are accepted based on the portfolio site criteria.

Novo website

Novo
Built by Michael Lam

Unlearn website

Unlearn
Built by Jesse Tomlinson, Bunsen Studio