作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Pavle Lucic
验证专家 在设计
10 的经验

Pavle是一名设计师,专门从事网站和移动应用程序的UI/UX设计. 他的客户包括法国兴业银行(法国兴业银行(Societe Generale))和TomTom等大型跨国公司, 以及金融科技领域成功的创业公司, 医疗保健, 旅行, 以及其他行业.

阅读更多

专业知识

以前的角色

首席用户体验设计师

以前在

法国兴业银行(Societe Generale)TomTom
分享

创建最佳网络 用户体验—支持转换和业务成功—通常需要设计测试和迭代. 直到最近, 尝试各种web配置的成本可能会很高, 对网站架构进行重大更改,需要进行昂贵的编码和CSS更改. 但是像Squarespace这样的自动化网站构建器, 款, WordPress, 和网络flow都有拖放画布, 自定义 页面布局,并且可配置 内容管理系统 这使得营销部门成为可能, 网页设计小组, 个人设计师无需编写一行HTML或CSS代码即可创建和编辑网站.

快速组装、发射和改进的能力 登陆页面博客和网站对企业来说也是一个很大的优势. 在其网站上,网络flow突出了一个建立网站的客户的案例研究 快四倍 另一个 提高了25%以上的转化率我相信他们. 作为自由职业者 UI / UX的设计师 有十年从零开始编写网站的经验,我使用网络flow创建了一个基于web的 投资组合模板 为创意专业人士在短短五天内,并为客户设计几个定制网站. 这个工具有 从根本上改变了 我工作的方式, 将我设计网站的时间缩短了一半, 这样我就可以腾出时间来专注于登陆页和 交互元素 这能带来自然流量 提高转化率.

虽然自动化可能会威胁到花了数年时间磨练各自手艺的设计师和开发人员, 我发现它非常有力量. 下面是网络flow最佳实践和功能的详细介绍, 以及如何利用它们来取得商业成功.

轻松优化

我使用网络flow创建的第一个客户网站是为一家塞尔维亚商业咨询公司创建的,该公司专门从事法律和税务咨询. 客户想要一个10页以下的自托管网站,可以在短短几周内在紧张的预算下建立. 它需要由现有的非技术人员完全管理,这样公司就不必雇佣新员工了. 它还必须看起来不错,有一个 调色板, 字体,并选择照片和微妙 动画 这将反映出风度翩翩, 值得信赖的质量 品牌的. 由于所有这些原因,网络flow是一个很好的解决方案.

我开始这个项目时,就像对待以前的雇主和客户一样. 与领导团队紧密合作, 我制定了一个有目标市场和明确目标的设计策略. 从那里, 我在Balsamiq中构建线框,并使用Figma生成可重用设计元素的母版页面. 使用插件, 我将这些元素引入网络flow,并将它们分组在自定义类中,以进行清理, 整个站点的一致外观.

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

网络flow的界面和易于使用的设计工具的视图.
在网络flow的界面中,您可以设计页面并实时查看更改. (Pavle Lucic)

我还利用了网络flow的响应式设计预览和测试工具. 谷歌和其他搜索引擎 抓取和索引网站 基于它们对用户的感知价值, 那些加载速度快、能根据用户的设备自动调整显示的网站在搜索引擎结果页面上的位置会更高. 与 超过一半 所有来自移动设备的网络流量, 谷歌使用网站内容的移动版本作为其主要方法 索引搜索结果, 响应式设计已经与改进的网页可见性紧密联系在一起, 加载时间, 以及点击率.

网络flow使用CSS媒体查询和四个预定义的移动模板, 平板电脑, 桌面, 和大屏幕-确保您的网站布局, 图片, 字体大小在不同设备上看起来清晰易读. 而不是手动编写断点并定义元素缩放规则, 网络flow为您完成了这项工作. 此外, 它可以让你预览网站在各种设备上的外观,并使用布局工具对网格和边距进行调整. 除了看网络flow的预览, 我建议在一系列实际设备上查看您的网站,以便发现和解决问题.

网络flow中显示的是web页面的移动视图.
这个网络flow中的移动视图预览展示了如何检查网站在各种设备上的外观,并在需要时进行调整. (Pavle Lucic)

而咨询客户主要想要一个高效的, 功能性网站,用于添加和编辑文章和SEO内容, 领导层还希望支持动态的用户体验. 所以我选择了网络flow基于滚动和悬停的交互功能,比如动画, 灯箱, 和视频. 无需编写任何代码, 我整合了一个员工个人资料图片的动画贴图,当你在员工脸上拖动光标时,它会给人一种在2D平面上倾斜的错觉. 动画只是一个小小的改动,但它让用户注意到工作人员的平易近人. 它还鼓励访问者在网页上逗留, 和, 对那些有足够诱惑的人来说, 注册免费咨询, 这是咨询公司获得新业务的重要第一步.

提高协作

协作对于任何设计项目都是至关重要的, 然而,通信过程和文件共享很容易变得混乱和混乱. 如果您遇到过一个名为, 说, “最终定稿第二稿,你知道版本控制的重要性. 网络flow有一个叫做工作区的功能,可以让多人同时在一个项目上协作(类似于Google Docs)。. 一旦被邀请到工作空间, 团队成员可以实时编辑和更新文件, 评论特定的页面元素, 并直接或群发消息给同事. 使用共享文件作为事实的单一来源有助于避免在部门和分布团队之间浮动的多个草稿的混乱.

网络flow的工作区视图,其中合作者已被邀请在站点上工作.
网络flow的工作区仪表板允许您邀请合作者对内容进行审查和评论. (Pavle Lucic)

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

根据我的经验, 网络flow赋予文案人员权力, 战略家, 内容和产品营销人员做他们最擅长的事情:写作和编辑. 使用直观的前端编辑工具, 内容团队不需要通知工程师重新格式化代码片段框或向产品页面添加视频动画. 一旦分配到编辑角色, 个人或团队可以使用网络flow内置的内容管理系统(CMS)来更新博客和网站副本, 整理和上传照片和视频, 并为图像写入Alt文本.

一篇博客文章被上传到网络flow的内容管理系统.
没有设计或工程背景的团队成员可以在网络flow的CMS中创建和编辑内容. (Pavle Lucic)

最大限度地提高转化率和影响力

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

例如, 我曾经通过集成第三方翻译提供商在客户的网络flow站点上启用了多语言支持. 用这个简单而有效的方法, 客户的网站可以被世界范围内更广泛的用户访问. 另外, 与Shopify和WooCommerce等电子商务系统集成, 您可以授权客户处理订单, 同步产品目录, 并通过一个仪表板管理他们的在线商店.

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

一旦我为客户的网站设置了集成, 我利用它们来包含新的特性和功能, 例如电子邮件选择加入表单, 产品页面, 以及社交网络动态. 集成还可以用于自动化流程,并节省新闻通讯分发和社交媒体发布的时间.

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

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

像标题标签和元描述这样的字段使用户能够优化页面.
网络flow CMS中的基本SEO配置, 例如标题标签和元描述, 会影响谷歌搜索结果的点击率吗. (Pavle Lucic)

可扩展的解决方案

值得注意的是,网络flow并非没有缺点. 该公司提供免费的入门计划, 但高级期权可能价格不菲, 特别是对于较大的团队或企业. 对于想要创建具有高级功能的高度定制网站的公司, 例如图像画廊和订单预订系统, 它可能不是最合适的. 网络flow确实提供了添加自定义代码的方法, 但是与开发人员使用代码编辑器完成的工作相比,其结果没有那么微妙, 以及不熟悉HTML的用户, CSS, JavaScript会觉得这个特性没什么用.

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

了解基本知识

  • 网络flow适合初学者吗?

    网络flow对初学者和经验丰富的设计师都有好处. 网络flow网站不需要编码知识, 该工具有一个直观的界面,使所有经验水平的设计师都能轻松学习. 即使是有编程经验的专业设计师也可以从使用这个平台中受益,因为它可以加快网站建设过程,使他们能够专注于需要他们专业技能的任务.

  • 学习网络flow的最好方法是什么?

    许多设计师发现,跳进去尝试这个工具是学习网络flow的最好方法. 然而, 还有在线课程和教程来帮助用户学习平台和特定的网络flow技巧和技巧.

聘请Toptal这方面的专家.
现在雇佣
Pavle Lucic

Pavle Lucic

验证专家 在设计
10 的经验

贝尔格莱德,塞尔维亚

自2021年3月1日起成为会员

作者简介

Pavle是一名设计师,专门从事网站和移动应用程序的UI/UX设计. 他的客户包括法国兴业银行(法国兴业银行(Societe Generale))和TomTom等大型跨国公司, 以及金融科技领域成功的创业公司, 医疗保健, 旅行, 以及其他行业.

阅读更多
作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前的角色

首席用户体验设计师

以前在

法国兴业银行(Societe Generale)TomTom

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.