作者都是各自领域经过审查的专家,并撰写他们有经验的主题. All of our content is peer reviewed 和 validated by Toptal experts in the same field.
Pavle Lucic
验证专家 在设计
10 的经验

Pavle is a 设计er specializing in UI/UX 设计 for websites 和 mobile apps. His clients include large international companies such as 法国兴业银行(Societe Generale) 和 TomTom, 以及金融科技领域成功的创业公司, 医疗保健, 旅行, 以及其他行业.

专业知识

以前的角色

首席用户体验设计师

以前在

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

创建最佳网络 用户体验—one that supports conversions 和 business success—often requires 设计 testing 和 iteration. 直到最近, experimenting with various web configurations could get expensive, with significant changes to a site’s architecture requiring costly coding 和 CSS changes. 但是像Squarespace这样的自动化网站构建器, 款, WordPress, 和网络flow都有拖放画布, 自定义 页面布局,并且可配置 内容管理系统 这使得营销部门成为可能, 网页设计小组, 个人设计师无需编写一行HTML或CSS代码即可创建和编辑网站.

快速组装、发射和改进的能力 登陆页面, blogs, 和 websites is also a big advantage for businesses. On its website 网络flow highlights case studies with a 自定义er who built websites 快四倍 另一个 提高了25%以上的转化率我相信他们. 作为自由职业者 UI / UX的设计师 with a decade of experience coding websites from scratch, I’ve used 网络flow to create a web-based 投资组合模板 for creative professionals in just five days, 和 to 设计 several 自定义 sites for clients. 这个工具有 从根本上改变了 我工作的方式, cutting the time it takes me to 设计 a website in half, 这样我就可以腾出时间来专注于登陆页和 交互元素 这能带来自然流量 提高转化率.

虽然自动化可能会威胁到花了数年时间磨练各自手艺的设计师和开发人员, 我发现它非常有力量. Here’s a closer look at 网络flow best practices 和 capabilities, 以及如何利用它们来取得商业成功.

轻松优化

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

I began the project much as I had with former employers 和 clients. 与领导团队紧密合作, I developed a 设计 strategy with a target market 和 defined goals. 从那里, 我在Balsamiq中构建线框,并使用Figma生成可重用设计元素的母版页面. 使用插件, I brought these elements into 网络flow 和 grouped them in 自定义 classes to carry a clean, 整个站点的一致外观.

这个项目在细化和优化阶段偏离了我早期的网页设计经验. 在将我的设计资产导入网络flow之后, its drag-和-drop environment made it remarkably easy to add, 重新排列, 并实时组织组件. 在过去, 这种实验需要手动编码更改,然后在HTML显示和浏览器窗口之间切换以跟踪我的进度—这是一项耗费时间的任务.

A view of 网络flow’s interface 和 easy-to-use 设计 tools.
In 网络flow’s interface you can 设计 a page 和 see the changes in real time. (Pavle Lucic)

I also leveraged 网络flow’s responsive 设计 preview 和 testing tool. 谷歌和其他搜索引擎 抓取和索引网站 基于它们对用户的感知价值, 那些加载速度快、能根据用户的设备自动调整显示的网站在搜索引擎结果页面上的位置会更高. 与 超过一半 所有来自移动设备的网络流量, 和 Google using the mobile version of a site’s content as its predominant method for 索引搜索结果, responsive 设计 has become closely linked with improved web visibility, 加载时间, 以及点击率.

网络flow uses CSS media queries 和 four predefined templates—mobile, 平板电脑, 桌面, 和大屏幕-确保您的网站布局, 图片, 字体大小在不同设备上看起来清晰易读. Rather than you having to manually code breakpoints 和 define element scaling rules, 网络flow为您完成了这项工作. 此外, 它可以让你预览网站在各种设备上的外观,并使用布局工具对网格和边距进行调整. 除了看网络flow的预览, I recommend viewing your site on a range of actual devices in order to find 和 fix problems.

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

While the consultancy client primarily wanted an efficient, functional site for the purpose of adding 和 editing articles 和 SEO content, leadership also wanted to support a dynamic 用户体验. So I tapped 网络flow’s scroll- 和 hover-based interactive features like 动画, 灯箱, 和视频. 无需编写任何代码, 我整合了一个员工个人资料图片的动画贴图,当你在员工脸上拖动光标时,它会给人一种在2D平面上倾斜的错觉. The animation was a small touch, but it drew users’ attention to the approachability of the staff. 它还鼓励访问者在网页上逗留, 和, 对那些有足够诱惑的人来说, 注册免费咨询, an important first step for the consultancy to secure new business.

提高协作

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

A view of 网络flow’s Workspaces, in which a collaborator has been invited to work on the site.
网络flow’s Workspaces dashboard allows you to invite collaborators to review 和 comment on content. (Pavle Lucic)

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

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

A blog post is uploaded into 网络flow’s content management system.
没有设计或工程背景的团队成员可以在网络flow的CMS中创建和编辑内容. (Pavle Lucic)

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

除了 to 设计ing a functional 和 aesthetically pleasing website, 您将需要找到并管理客户在项目结束后运行其站点所需的许多工具和数据源, 这很有挑战性. Fortunately, 网络flow brings a host of integrations 和 tracking tools together in one place.

例如, 我曾经通过集成第三方翻译提供商在客户的网络flow站点上启用了多语言支持. 用这个简单而有效的方法, the client’s website became accessible to a broader range of users worldwide. 另外, with integrations for e-commerce systems such as Shopify 和 WooCommerce, 您可以授权客户处理订单, 同步产品目录, 和 administer their online shops from a single dashboard.

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

一旦我为客户的网站设置了集成, I utilize them to include fresh features 和 functionality, 例如电子邮件选择加入表单, 产品页面, 以及社交网络动态. 集成还可以用于自动化流程,并节省新闻通讯分发和社交媒体发布的时间.

除了, 我使用网络flow的细粒度前端SEO控件来提高我的客户的搜索性能,并为他们的网站吸引更多的流量. 与 simple menus 和 semantic controls for image sizing, 页面标题和描述, 元数据描述, URL重定向, 加载首选项, you can optimize a site with minimal reliance on external plugins or engineering support.

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

Fields like title tag 和 meta description enable users to optimize a page.
网络flow CMS中的基本SEO配置, 例如标题标签和元描述, can impact the click-through rate of Google search results. (Pavle Lucic)

可扩展的解决方案

值得注意的是,网络flow并非没有缺点. 该公司提供免费的入门计划, 但高级期权可能价格不菲, 特别是对于较大的团队或企业. For companies that want to create a highly 自定义ized site with advanced functionalities, 例如图像画廊和订单预订系统, 它可能不是最合适的. 网络flow确实提供了添加自定义代码的方法, but the results are less nuanced than what a developer can accomplish with a code editor, 以及不熟悉HTML的用户, CSS, JavaScript会觉得这个特性没什么用.

Still, I appreciate the cost 和 time savings 网络flow offers. 根据我的经验, its collaboration features are key for boosting efficiency by allowing marketing, 设计, 和 engineering teams to co-create websites in real time, 而不是孤立无援, 所以重要的想法不会丢失. Beyond that, I’ve found 网络flow to be an extremely user-friendly tool. 与 these 网络flow best practices 和 little to no coding experience, 设计师 是否可以使响应式网站具有吸引人的布局和设计元素,优于他们的竞争对手. 最重要的是, 网络flow作为设计工具的速度使我能够快速调整网站以满足用户和客户的需求,并根据需要进行迭代以提高转化率.

了解基本知识

  • 网络flow适合初学者吗?

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

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

    Many 设计师 find that jumping in 和 trying the tool is the best way to learn 网络flow. 然而, 还有在线课程和教程来帮助用户学习平台和特定的网络flow技巧和技巧.

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

Pavle Lucic

验证专家 在设计
10 的经验

贝尔格莱德,塞尔维亚

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

作者简介

Pavle is a 设计er specializing in UI/UX 设计 for websites 和 mobile apps. His clients include large international companies such as 法国兴业银行(Societe Generale) 和 TomTom, 以及金融科技领域成功的创业公司, 医疗保健, 旅行, 以及其他行业.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. All of our content is peer reviewed 和 validated by Toptal experts in the same field.

专业知识

以前的角色

首席用户体验设计师

以前在

法国兴业银行(Societe Generale)TomTom

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

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

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

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

Toptal设计师

加入总冠军® 社区.