webflow如何使用_我如何使用Webflow构建辅助项目以帮助设计人员进行连接

webflow如何使用

I launched Designer Slack Communities a while ago, aiming to help designers to connect with likeminded people. By sharing my website with the world, I’ve connected with so many designers. The whole experience is a first time for me, so I want to share my experience about how I built it.

我不久前启动了Designer Slack社区 ,旨在帮助设计师与志趣相投的人建立联系。 通过与世界分享我的网站,我与很多设计师建立了联系。 整个体验对我来说还是第一次,所以我想分享一下我如何构建它的经验。

什么是Designer Slack社区 (What is Designer Slack Communities)

Designer Slack Communities is a website where I collect all the active Slack communities for designers. It’s aiming for designers who are looking to join more communities and connect with designers around the world.

Designer Slack社区是一个网站,我在这里收集所有面向设计师的活动Slack社区。 它面向希望加入更多社区并与世界各地的设计师建立联系的设计师。

我为什么决定建造它 (Why did I decide to build it)

A few weeks ago, I attended Remote Designer Week, organized by Design X. It was such a wonderful experience. During the time, I’ve slack-met a lot of designers and got introduced to a few more Slack communities. I enjoyed the sense of community, and many designers are looking to join different communities as well. I think it would be helpful if there is a list of Slack groups for designers to join. When I search for something similar on the internet, there are resources like this. But they are either not tailored to designers, or have expired links. So I decided to build a website to collect all the active Slack communities I can find.

几周前,我参加了由Design X组织的“ 远程设计师周” 。那真是太棒了。 在这段时间里,我遇到了很多设计师,并被介绍给更多的Slack社区。 我喜欢社区感,许多设计师也希望加入不同的社区。 我认为,如果有一个供设计师加入的Slack组列表,将很有帮助。 当我在互联网上搜索类似内容时,就会有类似的资源。 但是它们不是为设计人员量身定制的,或是链接已过期。 因此,我决定建立一个网站来收集我可以找到的所有活跃的Slack社区。

收集信息和设计 (Gather information and design)

With the 20 active communities I gathered. I started to design the first version. I wanted to keep the design simple, but I also wanted to try something different this time. I’ve used too much soft shadow and pastel colour in my design work that I’m kind of tired of it. I chose to use bold borders and more vivid colours for this one. It makes the website more fun and delightful.

在20个活跃社区中,我聚会了。 我开始设计第一个版本。 我想保持设计简单,但是这次我也想尝试一些不同的东西。 我在设计工作中使用了太多柔和的阴影和柔和的颜色,我对此感到有些厌倦。 我选择使用粗体边框和更鲜艳的颜色。 它使网站更加有趣。

The first version design for Designer Slack Communities

建造 (Building)

With the design done, I started thinking about how do I want to build it. I could look into different CMS options and static website frameworks. It would take me weeks to learn them and make the website. If I wanted to add new features in the future, it would take even more time to figure it out. Then I remembered Webflow. Webflow is great at quickly building a website. Although it has its limitations, a single-page website like this would be the perfect use. Thanks to the power of the Webflow CMS, it only took me a couple of hours to implement my design. The CSS grid makes building a responsive list easy. It’s widely supported across modern browsers. So I would encourage everyone to use the CSS grid whenever you can.

完成设计后,我开始考虑如何构建它。 我可以研究不同的CMS选项和静态网站框架。 我将需要数周的时间来学习它们并制作网站。 如果将来我想添加新功能,则需要花费更多时间才能解决。 然后我想起了Webflow。 Webflow擅长快速构建网站。 尽管它有其局限性,但是像这样的单页网站将是理想的选择。 得益于Webflow CMS的强大功能,我只花了几个小时就实现了我的设计。 CSS网格使构建响应列表变得容易。 在现代浏览器中得到了广泛的支持。 因此,我鼓励大家尽可能使用CSS网格。

Image for post

发射 (Launching)

After finishing the development, I post my website on various Slack groups and social media. I got a lot of positive response. People were adding me on LinkedIn and Twitter. They found this website is helpful as they were searching for similar resources. I also have people saying they were working on similar things and asking if I want to collaborate. It truly felt joyful as I created something that helped people. That’s the reason why I became a designer.

完成开发后,我将我的网站发布在各种Slack团体和社交媒体上。 我得到了很多积极的回应。 人们在LinkedIn和Twitter上添加了我。 他们发现该网站对搜索类似资源很有帮助。 我也有人说他们正在做类似的事情,并问我是否要合作。 当我创造出可以帮助人们的东西时,真的感到很高兴。 这就是我成为设计师的原因。

I’m also surprised by the connections I made. As an introvert and a non-native English speaker, I always find it hard to connect with people. Building a side project and sharing your work is an excellent way for people like me to establish networks.

我对建立的联系也感到惊讶。 作为一个内向的人和不讲英语的人,我总是很难与人建立联系。 建立副项目并共享您的工作是像我这样的人建立网络的绝佳方法。

持续改善 (Keep improving)

Within a few days after the launch, I got over 50 new communities submitted. The list became rather long. A way to sort or search for communities would certainly help people to find what they want. Webflow doesn’t have this feature built-in, but I found a great tutorial on the Webflow Forum. It uses MixItUp 3 to do dynamic searches for CMS items. With few customizations I made, the feature is working great. Another alternative is Jetboost. It’s a paid service, but the setup process is straightforward. No js code required.

发布后的几天内,我提交了50多个新社区。 名单变得相当长。 排序或搜索社区的方法肯定会帮助人们找到他们想要的东西。 Webflow没有内置此功能,但是我在Webflow论坛上找到了不错的教程。 它使用MixItUp 3对CMS项目进行动态搜索。 我进行的自定义设置很少,因此功能运行良好。 另一种选择是Jetboost。 这是一项付费服务​​,但是设置过程很简单。 不需要js代码。

I also added RSS to the website. I’m a huge fan of RSS. It’s a great way to let visitors receive updates without manually check the website every once in a while. Webflow makes adding RSS straightforward. You can use all the fields in your CMS to create the content in RSS and preview without opening a new tab.

我还在网站上添加了RSS。 我是RSS的忠实粉丝。 这是让访问者接收更新的好方法,而无需偶尔手动检查网站。 Webflow使添加RSS变得简单。 您可以使用CMS中的所有字段在RSS中创建内容并进行预览,而无需打开新标签。

A screenshot of RSS feature in Webflow

Someone suggested I should add social share buttons to lead more referral traffics. Thanks to the help of the Webflow community, it’s quite easy to do it. Wierperwebworks shared a project that makes this process simple as copy and paste.

有人建议我应该添加社交分享按钮来引导更多的引荐流量。 感谢Webflow社区的帮助,这很容易做到。 Wierperwebworks共享了一个项目,使复制和粘贴过程变得简单。

The last thing I did is to switch to Simple Analytics from Google Analytics. It’s a privacy-focused web analytics tool. It has all the essential metrics that are more than enough for me. Even though it’s not a free tool, it does feel relieved because I know it respects the privacy of my visitors.

我做的最后一件事是从Google Analytics(分析)切换到Simple Analytics(简单分析)。 这是一个注重隐私的Web分析工具。 它具有所有对我来说绰绰有余的基本指标。 即使它不是免费工具,但它确实让人放心,因为我知道它尊重访问者的隐私。

A screenshot of SimpleAnalytics

克隆项目 (Clone the project)

I’ve made this project available on the Webflow community. Everyone can view it, clone it, use it for your own project. I hope it can help other people, just like how I got help from the Webflow community.

我已经在Webflow社区上提供了该项目。 每个人都可以查看,克隆它,并将其用于自己的项目。 我希望它可以帮助其他人,就像我从Webflow社区获得帮助一样。

结论 (Conclusion)

Building a side project is a fun process. You can get creative with it because it’s your project. I’m so humbled that I got connected with many people through this project. It may not give me any profit, but I do feel a sense of fulfillment by sharing my work and connecting with other designers. I hope this post can inspire you to make something small yourself. It doesn’t have to be the greatest idea ever. With tools like Webflow, it won’t take too much time to build it either. If you have any questions, please feel free to tag me on Twitter.

构建辅助项目是一个有趣的过程。 您可以发挥创意,因为这是您的项目。 我很谦虚,以至于我通过这个项目与很多人建立了联系。 它可能不会给我带来任何收益,但是通过分享我的作品并与其他设计师建立联系,我的确感到满足感。 我希望这篇文章可以激励您自己做点小事。 它不一定是有史以来最伟大的想法。 使用Webflow之类的工具,也不需要花费太多时间来构建它。 如有任何疑问,请随时在Twitter上为我添加标签。

翻译自: https://blog.prototypr.io/how-i-build-designer-slack-community-with-webflow-27ccd0f7594

webflow如何使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

atmega8 例程:T1定时器 CTC模式 方波输出

/******************************************************************* * 函数库说明:ATMEGA8 T1定时器 CTC模式 方波输出 * 版本: v1.00 * 修改: 庞辉 芜湖联大飞思卡尔工作室…

antd的table进行列筛选时,更新dataSource,为什么table显示暂无数据?

我想当然地认为只要dataSource改变&#xff0c;那么<Table>组件就会重新渲染&#xff0c;但是有一种特殊情况例外&#xff1a;在onFilter()中不写筛选条件&#xff0c;在调用filterDropdown进行列筛选的时候&#xff0c;通过handleSearch改变/保存dataSource的状态&#…

重新构想原子化 CSS

感谢印记中文的 QC-L[1] 对本文进行翻译&#xff0c;英文原文: English Version[2]。本文会比往期文章相对长些。这是我个人的一个重大的工具发布&#xff0c;有许多内容我想谈论。如果你能花些时间读完&#xff0c;不胜感激&#xff0c;希望能对你有所帮助 :)推荐访问 https:/…

cv::mat 颜色空间_网站设计基础:负空间

cv::mat 颜色空间Let’s start off by answering this question: What is negative space? It is the “empty” space between and around the subjects of an image. In the context of web design, your “subjects” are the pictures, videos, text, buttons and other e…

MVC3 上传文件

前台引擎采用Razor 上传页View&#xff1a; model System.Web.HttpContextBase{ ViewBag.Title "上传文件";}<h2>上传文件</h2><br /><br />*new { enctype "multipart/form-data" }比不可少&#xff0c;否则上传文件不会成功…

Day07 - Ruby比一比:Symbol符号与String字串

前情提要&#xff1a; 第六天我们透过Ruby代码练习public&#xff0c;protected和privatemethod时&#xff0c;发现冒号在前面的参数&#xff0c;&#xff1a;mydraft&#xff0c;&#xff1a;myspace&#xff0c;这些就是符号Symbol。在今天&#xff0c;我们就来解释Symbol吧&…

[知乎回答] 前端是否要学习 Node.js?

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12很多小伙伴都表示收获颇丰。一起学的大多数200行左右的Node.js源码。今天推荐这篇文章。&#xff08;刚刚在写明天掘金要发的文章&#xff0c;差点忘记今天还没发文。在知乎上看…

shields 徽标_我的徽标素描过程

shields 徽标Sketching is arguably the most important part of my process when it comes to logo design. In the beginning of my design career, I would actually skip this step completely and go right to the computer. I’d find myself getting stuck and then goi…

VC编程心得

VC编程心得 开始&#xff1a; 声明变量要初始化&#xff1b; 指针变量申请空间后是不是为空&#xff08;申请不成功&#xff09;&#xff1b; 过程&#xff1a; CREATE、OPEN了的东西赋给指针变量&#xff0c;要看指针变量是否为空&#xff1b; 指针变量在调用其方法之前&#…

叮咚,系统检测到 npm 有更新,原理揭秘!

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12本文来自V同学投稿的源码共读第六期笔记&#xff0c;写得很有趣。现在已经进行到第十期了。你或许经常看见 npm 更新的提示。npm 更新提示面试官可能也会问你&#xff0c;组件库…

ui设计未来十年前景_UI设计的10条诫命

ui设计未来十年前景重点 (Top highlight)The year is approximately 1,300 BC when Moses received the 10 UI design commandments from the almighty design gods. The list was comprised of best practices that only the most enlightened designers would be aware of.当…

w3ctech 2011 北京站(组图)

门前的牌子大厅一推低价技术书籍会场嘉宾席人渐渐到齐准备工作w3c中国区负责人 安琪 第一个演讲焦峰同学分享了浏览器兼容性的相关问题石川同学分享的是JQuery的相关内容摄影哥微博大屏幕&#xff0c;有亮点哦。。。MBP啊有木有&#xff5e;&#xff5e;&#xff5e;貘大现场提…

Linux设备驱动之IIO子系统——IIO框架及IIO数据结构

Linux设备驱动之IIO子系统——IIO框架及IIO数据结构由于需要对ADC进行驱动设计&#xff0c;因此学习了一下Linux驱动的IIO子系统。本文翻译自《Linux Device Drivers Development 》--John Madieu&#xff0c;本人水平有限&#xff0c;若有错误请大家指出。 IIO Framework 工业…

浏览器中的 ESM

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12早期的web应用非常简单&#xff0c;可以直接加载js的形式去实现。随着需求的越来越多&#xff0c;应用越做越大&#xff0c;需要模块化去管理项目中的js、css、图片等资源。这里…

理解面向连接和无连接协议之间的区别

理解面向连接和无连接协议之间的区别 网络编程中最基本的概念就是面向连接&#xff08;connection-oriented&#xff09;和无连接&#xff08;connectionless&#xff09;协议。 面向连接和无连接指的都是协议。也就是说&#xff0c;这些术语指的并不是无理介质本身&#xff0c…

标记图标_标记您的图标

标记图标Not labeling your icons is the same as assuming that we are all fluent in ancient hieroglyphics. Are you? Can you just walk up to Cleopatras needle and read it like you could read a childrens book? Even emojis, our modern hieroglyphics dont mean …

找出无序数组中最小的k个数(top k问题)

2019独角兽企业重金招聘Python工程师标准>>> 给定一个无序的整型数组arr&#xff0c;找到其中最小的k个数 该题是互联网面试中十分高频的一道题&#xff0c;如果用普通的排序算法&#xff0c;排序之后自然可以得到最小的k个数&#xff0c;但时间复杂度高达O(NlogN)&…

你应该知道的 Node 基础知识

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12 参与&#xff0c;已进行两个多月&#xff0c;大家一起交流学习&#xff0c;共同进步。源码共读学的多数是 Node.js &#xff0c;今天分享一篇 Node.js 基础知识的文章。一. N…

C# 中数据缓存总结

在C#尝试了5种方法进行数据缓存&#xff0c;具体如下&#xff1a;(如有遗漏&#xff0c;错误欢迎大家指正&#xff0c;欢迎提建议。)1&#xff1a;Session方法&#xff1a;此方法是针对于每个用户来的&#xff0c;如果用户量比较大&#xff0c;那么建议不要采用此方法&#xff…

react 引入 mobx @babel/core: 7.2.2

为什么80%的码农都做不了架构师&#xff1f;>>> yarn add babel/plugin-proposal-class-propertiesyarn add babel/plugin-proposal-decorators"babel": {"plugins": [["babel/plugin-proposal-decorators", {"legacy": …