Hello!
Have you ever used resources like Webflow's Showcase, Templates, and Libraries? By mastering these, you can significantly improve your workflow and advance your skills!
In this article, we'll introduce four ways to level up your skills using the resources available within Webflow.
① Showcase: Learn Design Sense and Skills from the Pros
② Style Guide: Aim for Design Consistency
③ Templates: Learn Overall Site Structure
④ Libraries: Boost Your Work Efficiency
Let's dive in!
Learn Design Skills and Sense from the Showcase
The Showcase features numerous sites built by professionals. By utilizing the projects in the Showcase, you can polish your design sense by referencing professional structures and styles. Furthermore, by examining the details of interesting animations and learning code embedding techniques, you too can create high-level websites!
There are three main ways to open projects in the Showcase. *Availability depends on the project.
- Open in browser (to see the live site in action)
- Open in Webflow (view-only)
- Clone to your account (editable)
Each method has its own purpose depending on what you want to reference.
For example, to check a site with code-based animations, use "Open in browser." To understand how the animation is built or to check the code, you can "Open in Webflow." In this case, you can inspect the layout and code. If you want to use elements from a Showcase project in your own project, you clone it. Understanding the right way to open a project for your purpose will increase your efficiency.
Now, let's introduce four ways to use it!
Learn How to Build by Referencing Professional Designs
In the Showcase, you can see, interact with, and learn from the skills of professionals worldwide. Reference stylish overseas designs to differentiate your work. The professional sites often push Webflow to its limits. First, take a look at what the pros are doing to understand what's possible with Webflow!
Learn Professional Methods, Structure, and Styles
By opening a Showcase project in Webflow, you can see exactly how it was built. The entire site structure can be checked from the Navigator on the left.
From the style settings, you can learn a lot from things like class naming conventions, margin widths, and font sizes. If you're ever stuck on how to structure a design in Webflow, finding a project with a similar structure will surely provide you with answers.
Showcase projects are useful for examining layouts and designs for learning purposes, as well as for making your own projects more efficient.
Investigate Interesting Animations
You can investigate any interesting animations you find in Showcase projects. When you don't know how to create an animation, you can find out how it's built by examining projects in the Showcase.
- "I don't know how to create the animation I want."
- "I want to learn about new animations and motions."
- "I want to implement functionality with animation."
These are common challenges when using Webflow.
Tip:
Currently, there is still limited information about Webflow in Japanese. Also, most projects in the Showcase are from international creators. Instead of searching in Japanese, using a translator to search in English will increase your chances of finding the information you need. Since Showcase projects can be examined in the Webflow editor, once you find what you're looking for, you can implement it immediately, making your workflow more efficient.
Learn Code Embedding Techniques
Webflow is an excellent no-code tool that allows for very flexible styling.
One of its attractions is the ability to embed code for more advanced customization. However, without coding knowledge, you can hit a wall.
To overcome this, you can reference the code from projects in the Showcase to achieve more flexible styling.
Here's how to reference code using Showcase projects.
When customizing a slider in Webflow, code is often necessary. By cloning a project and customizing the embedded code, you can create your own original designs.
You can find the code in the following places:
1) Embed Element
2) Page Settings
3) Inside the Custom Code section of Project Settings
While you can create various designs in Webflow without code, applying code embeds allows for a wider range of designs, better meeting client needs.
It can be daunting without coding knowledge, but many Showcase projects use embedded code. By using these, you can implement features without deep coding expertise. As you utilize them, your understanding of code will deepen, making it a two-for-one skill upgrade. If you're comfortable with Webflow, give this a try!
Achieve Design Consistency with a Style Guide
Do you create a style guide when starting a project?
A style guide is a set of guidelines for creating a consistent website. It's essentially a rulebook for the design elements used in the project.
Creating a style guide helps establish a common understanding among team members, making the process more efficient. Design consistency is a crucial element for improving the quality of a site. Let's see how to use it!
How to Create a Style Guide in Webflow
Create a new page named "Style Guide" in your Webflow project and build out the styles that fit your project. By naming the styles you create here, you can maintain a consistent layout and color scheme.
To create a style guide, cover the following items:
- Color Palette
- Typography
- Image Sizing
- Styling for Forms, etc.
Customize your style guide with any other necessary information. For example, creating a style for rich text used within the CMS in your style guide will lead to better-designed CMS pages.
Let's make use of style guides!
For more details, the video in this article explains it clearly:https://www.supasaito.io/post/style-guide
Learn Overall Site Structure with Templates
Have you ever used Webflow Templates?
By customizing a free template, you can expect significant cost and time savings!
Let's explain how to use templates and their features.
Use Case 1: Customization
Templates and Showcase are often confused, but the difference is whether you can customize them.
Webflow templates can be customized and used. All projects created from a template can be built without using custom code.
On the other hand, the Showcase is more like a portfolio of clonable projects made by professionals, presenting examples of work using Webflow's technology. Even templates with beautiful designs or animations in the Showcase are published in a way that does not allow for custom code embedding.
Use Case 2: Reference the Site Structure
Templates come with many useful pages for site production, allowing you to get an overview of the entire site structure. A key advantage of templates is that you can reference navigation elements and the structure of lower-level pages, which you can't always see in the Showcase!
To improve your skills, it's helpful to use them for different purposes: use templates when you want to learn about overall site structure or the basics, and check the Showcase when you want to learn more advanced techniques or discover new possibilities with Webflow.
Use Case 3: Reference the Style Guide
If you want to "shorten the time it takes to create a style guide" or "create a clean style guide," start by referencing one from a template. The fonts, color schemes, and structure in a template's style guide can all be very helpful, so be sure to make use of them!
By the way, template style guides are generally created in English, so you will need to customize them for a Japanese version.
What do you think?
Webflow has many free templates, so by cloning them, copying elements, or customizing them, you can achieve significant cost savings in production.
You can also improve your skills by referencing and learning from the site structure and basic content.
Whether you've used templates before or not, be sure to check out the various options available!
Boost Your Work Efficiency with Libraries
Finally, let's introduce Libraries.
Webflow's Libraries can be customized and used to simplify website creation. By finding and using a library you like, you can make your website production more efficient.
Webflow Libraries offer the following benefits:
- High Reusability: Libraries allow you to reuse Webflow design elements and components multiple times. This eliminates the need to recreate similar content over and over, improving design efficiency.
- Style Consistency: All design elements and components within a library are created with the same style and settings. This ensures a consistent style across your entire website.
- Easy Customization: Libraries provide the functionality to freely customize Webflow design elements and components. You can easily create a design that matches your brand.
- Tested Components: Webflow's libraries contain many components that have been tested by Webflow users. This guarantees stability and functionality, allowing you to use them with confidence.
- Responsive Design: Webflow's libraries include numerous design elements and components that are responsive. This allows you to create designs that adapt to various devices.
To streamline your website production, let's actively use libraries!
Here are the steps to use them:
How to Use
- Open Libraries from the Marketplace.
- Click on the Library you want to add and install it.
- Select the project you want to add it to.
- The Library will be added to your Layouts, as shown in the image below.
Conclusion
The resources provided within Webflow can lead to significant efficiency gains depending on how you use them. This information is very helpful for improving production quality and efficiency. We hope you find this article useful for finding the information you need. We encourage you to open the Webflow Marketplace and see for yourself what's available to further expand your knowledge!
.svg)
