April 2018 Summaries

The Webflow Showcase provides a platform for creative inspiration by highlighting unique and visually engaging websites, such as the quirky character illustrations by Sarah Kuehnle, which feature an intuitive calendar layout for easy navigation. It also features Umbo, a Zurich nightclub's website, which embraces an experimental and chaotic design reflecting its avant-garde electronic music style. Quo Stock offers a seamless purchasing experience for their extensive library of tasteful icons, despite a minor typo, while Milkshaken exemplifies a sophisticated blend of black-and-white design with colorful microinteractions to enhance the presentation of its costume designs. These examples demonstrate a diverse range of creative expression and user-friendly design.

The text explores the creative use of web design and animation across various examples, illustrating how visual storytelling can enhance user engagement and experience. It begins with an animation demonstrating the assembly of a skateboard, suggesting that similar animations could improve understanding and reduce frustration in other assembly-required contexts, like IKEA furniture. The text also highlights the benefits of a night mode feature on websites, designed to reduce eye strain for late-night users, as well as the engaging design of a sticker set featuring an animated squid, which captivates through its playful illustrations and aquatic-themed animations. Furthermore, the text discusses a featured animation of a Piet Mondrian piece by Ilnur Kalimullin, emphasizing the beauty of enjoying art without overthinking it. Lastly, it describes a website dedicated to a dog named Raven Saarloos Wolf Dog, which combines stunning photography and dynamic web design to create an engaging digital space for showcasing the unique canine.

In 2018, web design is experiencing a vibrant resurgence of bold color trends inspired by past decades, notably the 80s and 90s, with designers embracing daring color combinations to create memorable visual experiences. This period sees a revival of bright palettes and patterns, as exemplified by Spotify's playful approach to color, and the continued popularity of shades like Millennial Pink, which has shifted from being gendered to a neutral favorite across generations. Additionally, gradients are making a significant comeback, utilized in various design elements to enhance visual appeal, as seen in the work of designers like Meagan Fisher, and on platforms like Stripe's updated design and the Interactions 2.0 landing page. These trends highlight a move away from past color conservatism towards a more adventurous and expressive use of color in digital design.

Webflow's new feature allows users to copy and paste layouts, elements, interactions, and even entire pages between projects, streamlining the design process and fostering creativity. This capability enables users to kick-start new projects by reusing existing patterns, build comprehensive UI kits for repeated use, and import style sheets to ensure design consistency. The feature also facilitates the creation of themes and style frameworks, allowing shared elements across multiple sites to be updated efficiently. Additionally, it enhances collaboration by enabling team members to work individually on project sections and merge their contributions seamlessly. This innovation offers designers increased flexibility and efficiency, while maintaining consistency and coherence across projects.

Webflow emphasizes its commitment to the General Data Protection Regulation (GDPR), which represents a significant advancement in protecting individuals from privacy breaches and mandates clear consent for personal data collection. The GDPR affects any company or individual that processes personal data from European Economic Area residents, including Webflow and its users who host websites accessible to EU visitors. The regulation distinguishes between "data controllers," who decide on data collection and usage, and "data processors," who handle data on behalf of controllers. Webflow serves as a data processor for sites hosted on its platform and is dedicated to aiding users in maintaining GDPR compliance, but it advises consulting a legal professional for guidance on these matters.

In the final part of a series on building an agency site with Webflow, the focus is on utilizing Webflow CMS's API integration and collaborating with content creators. API integration is likened to a taco truck's supply chain, allowing the inclusion of data from various sources like tweets or images into a website by creating a Collection in Webflow. The example provided illustrates showcasing recent Dribbble posts on a site, ensuring attribution to original designers by linking directly to the posts. Zapier is introduced as a tool to connect multiple APIs, enhancing automation within Webflow’s CMS. The setup involves creating a Zapier account, selecting a triggering app, and quickly authenticating the necessary accounts to streamline data integration and automation.

In this continuation of a series on creating an agency site in Webflow, the focus is on steps six to eight: utilizing flexbox, designing logical interactions, and enhancing readability by inverting the palette. Flexbox is highlighted as a powerful tool for building responsive websites efficiently, despite some iOS and Safari bugs, and is exemplified through its use on the Bespke site to create dynamic hover effects by adjusting flex properties. The author suggests using transitions for smooth state changes and advises against relying solely on the interactions panel for complex animations, emphasizing the importance of utilizing both the transitions section of the style tab and the interactions tab for different types of events.

In the continuation of a series on creating an agency site using Webflow, the process moves to the fourth and fifth steps, which involve planning pages and defining classes. The approach to planning pages involves using container and section elements to create a rough wireframe, which helps in visualizing the homepage by breaking it into manageable chunks. The demonstration video shows how to add section elements with IDs and container elements for sections not intended to be full width. This initial layout serves as a foundation for further stylizing and organizing basic elements like headings, columns, and Collections. Once the basic layout is established, the next step is to define classes to further refine the design.

Webflow offers a powerful and user-friendly platform for designing and building agency websites, even for those without coding skills. Unlike traditional WYSIWYG editors or cumbersome design tools, Webflow provides a visual interface that exposes all CSS attributes, allowing users to create clean and efficient code. The platform is ideal for designers who want to maintain control over their projects without relying on developers, as well as for developers seeking a faster and more reliable alternative to existing frameworks. The blog post series guides users through the process of building a site with Webflow, covering key aspects such as creating a CMS, using design systems, implementing responsive design with flexbox, and integrating APIs, while emphasizing the importance of starting with a baseline design to streamline the creative process. The author shares personal insights and strategies, highlighting the benefits of defining default styles and creating a style guide to ensure consistency and efficiency, particularly when working with larger teams or evolving projects.

Webflow CMS positions itself as a viable alternative to Business Catalyst (BC) by offering a designer-friendly, visual approach to content management that seamlessly integrates content creation with design, despite lacking native customer login or CRM systems. The platform enables users to create custom databases visually and connect them to designs, making content management more intuitive and flexible. It supports a wide range of content types, such as events, product pages, and blog posts, and facilitates the easy addition of dynamic rich content like SoundCloud audio and Shopify products. Webflow CMS also simplifies the migration process from other systems through a near-flip-switch CSV import feature, allowing users to transfer and adapt their existing content efficiently.