Creating the optimal web 用户体验—支持转换和业务成功—通常需要设计测试和迭代. 直到最近, 尝试各种web配置的成本可能会很高, 对网站架构进行重大更改，需要进行昂贵的编码和CSS更改. But automated web builders like Squarespace, 款, WordPress, 和 网络flow have drag-和-drop canvases, 自定义 页面布局, 和 configurable content management systems that make it possible for marketing divisions, 网页设计小组, 个人设计师无需编写一行HTML或CSS代码即可创建和编辑网站.

The ability to rapidly assemble, launch, 和 refine 登陆页面博客和网站对企业来说也是一个很大的优势. 在其网站上，网络flow突出了一个建立网站的客户的案例研究 快四倍 另一个 boosted conversions by more than 25%—和 I believe them. 作为自由职业者 UI / UX的设计师 有十年从零开始编写网站的经验，我使用网络flow创建了一个基于web的 portfolio template 为创意专业人士在短短五天内，并为客户设计几个定制网站. 这个工具有 radically transformed 我工作的方式, 将我设计网站的时间缩短了一半, thus freeing me up to focus on the 登陆页面 和 interactive elements that drive organic traffic 和 提高转化率.

虽然自动化可能会威胁到花了数年时间磨练各自手艺的设计师和开发人员, I’ve found it to be remarkably empowering. 下面是网络flow最佳实践和功能的详细介绍, 和 how you can leverage them for business success.

Optimize 与 Ease

我使用网络flow创建的第一个客户网站是为一家塞尔维亚商业咨询公司创建的，该公司专门从事法律和税务咨询. 客户想要一个10页以下的自托管网站，可以在短短几周内在紧张的预算下建立. 它需要由现有的非技术人员完全管理，这样公司就不必雇佣新员工了. It also had to look good, with a 调色板, 字体, 和 selection of photographs 和 subtle 动画 that would reflect the personable, trustworthy quality 品牌的. For all these reasons, 网络flow was a good solution.

我开始这个项目时，就像对待以前的雇主和客户一样. Collaborating closely with the leadership team, 我制定了一个有目标市场和明确目标的设计策略. 从那里, 我在Balsamiq中构建线框，并使用Figma生成可重用设计元素的母版页面. 使用插件, 我将这些元素引入网络flow，并将它们分组在自定义类中，以进行清理, consistent look across the site.

这个项目在细化和优化阶段偏离了我早期的网页设计经验. After importing my 设计 assets into 网络flow, 它的拖放环境使得它非常容易添加, 重新排列, 和 organize components in real time. 在过去, 这种实验需要手动编码更改，然后在HTML显示和浏览器窗口之间切换以跟踪我的进度—这是一项耗费时间的任务.

我还利用了网络flow的响应式设计预览和测试工具. Google 和 other search engines crawl 和 index websites based on their perceived value to users, 那些加载速度快、能根据用户的设备自动调整显示的网站在搜索引擎结果页面上的位置会更高. 与 超过一半 of all web traffic coming from mobile devices, 谷歌使用网站内容的移动版本作为其主要方法 indexing search results, 响应式设计已经与改进的网页可见性紧密联系在一起, 加载时间, 和 click-through rates.

网络flow使用CSS媒体查询和四个预定义的移动模板, 平板电脑, 桌面, 和 large screen—to ensure your site’s layout, 图片, 和 font sizes look clean 和 legible across devices. 而不是手动编写断点并定义元素缩放规则, 网络flow does the work for you. 此外, 它可以让你预览网站在各种设备上的外观，并使用布局工具对网格和边距进行调整. 除了 to looking at 网络flow’s preview, 我建议在一系列实际设备上查看您的网站，以便发现和解决问题.

而咨询客户主要想要一个高效的, 功能性网站，用于添加和编辑文章和SEO内容, 领导层还希望支持动态的用户体验. 所以我选择了网络flow基于滚动和悬停的交互功能，比如动画, 灯箱, 和视频. 与out writing any code, 我整合了一个员工个人资料图片的动画贴图，当你在员工脸上拖动光标时，它会给人一种在2D平面上倾斜的错觉. 动画只是一个小小的改动，但它让用户注意到工作人员的平易近人. It also encouraged visitors to linger on the webpage, 和, for those sufficiently enticed, sign up for free consultations, 这是咨询公司获得新业务的重要第一步.

Improve Collaboration

Collaboration is crucial for any 设计 project, 然而，通信过程和文件共享很容易变得混乱和混乱. If you’ve ever encountered a file named, 说, “Final Final Second Draft,” you underst和 the importance of version control. 网络flow有一个叫做工作区的功能，可以让多人同时在一个项目上协作(类似于Google Docs)。. Once invited to the workspace, team members can edit 和 update files in real time, comment on specific page elements, 和 send direct or group messages to colleagues. 使用共享文件作为事实的单一来源有助于避免在部门和分布团队之间浮动的多个草稿的混乱.

我特别欣赏工作区中直截了当的角色和权限设置如何澄清设计团队的责任——帮助避免权力斗争和防止工作被覆盖. 另一个提高生产力的协作工具是页面分支功能，它允许多个设计人员并行处理不同的页面，而不会影响实时站点.

根据我的经验, 网络flow empowers copywriters, 战略家, 内容和产品营销人员做他们最擅长的事情:写作和编辑. 与 access to intuitive front-end editing tools, 内容团队不需要通知工程师重新格式化代码片段框或向产品页面添加视频动画. Once assigned to an editing role, 个人或团队可以使用网络flow内置的内容管理系统(CMS)来更新博客和网站副本, organize 和 upload photos 和视频, 和 write alt text for 图片.

Maximize Conversions 和 Reach

除了设计一个功能和美观的网站, 您将需要找到并管理客户在项目结束后运行其站点所需的许多工具和数据源, which can be challenging. 幸运的是，网络flow将许多集成和跟踪工具集中在一起.

例如, 我曾经通过集成第三方翻译提供商在客户的网络flow站点上启用了多语言支持. 与 this simple yet efficient fix, 客户的网站可以被世界范围内更广泛的用户访问. 另外, 与Shopify和WooCommerce等电子商务系统集成, you can empower your clients to process orders, sync product catalogs, 并通过一个仪表板管理他们的在线商店.

网络flow与分析和报告服务(如Hotjar和Google analytics)的集成允许您评估网站设计的有效性. 例如, 您可以通过利用热图等数据来精确定位需要UI和UX改进的页面和组件, 愤怒的点击, 跳出率.

Once I’ve set up integrations for a client’s site, 我利用它们来包含新的特性和功能, such as email opt-in forms, 产品页面, 和 social network feeds. 集成还可以用于自动化流程，并节省新闻通讯分发和社交媒体发布的时间.

除了, 我使用网络flow的细粒度前端SEO控件来提高我的客户的搜索性能，并为他们的网站吸引更多的流量. 具有简单的菜单和图像大小的语义控制, page titles 和 descriptions, 元数据描述, URL重定向, 和 loading preferences, 你可以优化一个网站与外部插件或工程支持的最小依赖.

最后, 分布在100个数据中心的由aws驱动的托管堆栈(这是吸引我的咨询客户的因素之一)确保站点加载速度快，可以处理大流量. 这种能力对网站访问者是有益的，也提高了客户网站在搜索引擎中的排名，这些搜索引擎将加载速度纳入其算法.

A Scalable Solution

It’s worth noting that 网络flow isn’t without drawbacks. The company offers a free starter plan, but premium options can be pricey, particularly for larger teams or enterprises. 对于想要创建具有高级功能的高度定制网站的公司, such as image galleries 和 order booking systems, it may not be the best fit. 网络flow does offer a method for adding 自定义 code, 但是与开发人员使用代码编辑器完成的工作相比，其结果没有那么微妙, 和 users unfamiliar with HTML, CSS, 和 JavaScript will find the feature fairly unhelpful.

尽管如此，我还是很欣赏网络flow节省的成本和时间. 根据我的经验, 它的协作功能是通过允许营销来提高效率的关键, 设计, 和工程团队一起实时创建网站, rather than in siloes, so important ideas don’t get lost. 除此之外，我发现网络flow是一个非常用户友好的工具. 有了这些网络flow最佳实践和很少甚至没有编码经验， 设计师 是否可以使响应式网站具有吸引人的布局和设计元素，优于他们的竞争对手. 最重要的是, 网络flow作为设计工具的速度使我能够快速调整网站以满足用户和客户的需求，并根据需要进行迭代以提高转化率.