authors are vetted experts in their fields 和 write on topics in which they have demonstrated experience. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Pavle Lucic
验证专家 在设计
10 的经验

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

专业知识

以前的角色

首席用户体验设计师

以前在

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

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

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

While automation might seem threatening to 设计师 和 developers who have spent years honing their respective crafts, 我发现它非常有力量. 下面是网络flow最佳实践和功能的详细介绍, 以及如何利用它们来取得商业成功.

轻松优化

The first client website I created using 网络flow was for a Serbian business consultancy specializing in legal 和 tax advice. The client wanted a self-hosted site under 10 pages that could be built on a tight budget in just weeks. It needed to be fully managed by existing nontechnical staff so the firm wouldn’t have to hire new employees. 它还必须看起来不错,有一个 调色板, 字体,并选择照片和微妙 动画 这将反映出风度翩翩, 值得信赖的质量 品牌的. 由于所有这些原因,网络flow是一个很好的解决方案.

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

The project diverged from my earlier web 设计 experience during the refinement 和 optimization phases. 在将我的设计资产导入网络flow之后, 它的拖放环境使得它非常容易添加, 重新排列, 并实时组织组件. 在过去, this kind of experimentation would have required coding changes manually 和 then toggling between an HTML display 和 a browser window to track my progress—a draining 和 time-consuming task.

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

我还利用了网络flow的响应式设计预览和测试工具. 谷歌和其他搜索引擎 抓取和索引网站 基于它们对用户的感知价值, 和 websites that load quickly 和 automatically adjust their displays to a user’s device appear higher in search engine results pages. 与 超过一半 所有来自移动设备的网络流量, 谷歌使用网站内容的移动版本作为其主要方法 索引搜索结果, 响应式设计已经与改进的网页可见性紧密联系在一起, 加载时间, 以及点击率.

网络flow使用CSS媒体查询和四个预定义的移动模板, 平板电脑, 桌面, 和大屏幕-确保您的网站布局, 图片, 字体大小在不同设备上看起来清晰易读. 而不是手动编写断点并定义元素缩放规则, 网络flow为您完成了这项工作. 此外, it lets you preview the site’s appearance on various devices 和 make tweaks to the grids 和 margins with a layout tool. 除了看网络flow的预览, 我建议在一系列实际设备上查看您的网站,以便发现和解决问题.

网络flow中显示的是web页面的移动视图.
This preview of a mobile view in 网络flow shows how you can check a website’s appearance on various devices 和 make adjustments if needed. (Pavle Lucic)

而咨询客户主要想要一个高效的, 功能性网站,用于添加和编辑文章和SEO内容, 领导层还希望支持动态的用户体验. 所以我选择了网络flow基于滚动和悬停的交互功能,比如动画, 灯箱, 和视频. 无需编写任何代码, I integrated an animated tile of staff profile pictures that gave the illusion of tilting on a 2D plane when you dragged the cursor across employees’ faces. 动画只是一个小小的改动,但它让用户注意到工作人员的平易近人. 它还鼓励访问者在网页上逗留, 和, 对那些有足够诱惑的人来说, 注册免费咨询, 这是咨询公司获得新业务的重要第一步.

提高协作

协作对于任何设计项目都是至关重要的, 然而,通信过程和文件共享很容易变得混乱和混乱. 如果您遇到过一个名为, 说, “最终定稿第二稿,你知道版本控制的重要性. 网络flow has a feature called Workspaces that lets multiple people collaborate on a project at the same time (similar to Google Docs). 一旦被邀请到工作空间, 团队成员可以实时编辑和更新文件, 评论特定的页面元素, 并直接或群发消息给同事. Having a shared file serve as a single source of truth helps avoid the confusion of multiple drafts floating among departments 和 distributed teams.

网络flow的工作区视图,其中合作者已被邀请在站点上工作.
网络flow’s Workspaces dashboard allows you to invite collaborators to review 和 comment on content. (Pavle Lucic)

I particularly appreciate how the straightforward role 和 permission settings in Workspaces clarify 设计 team responsibilities—helping to avert power struggles 和 prevent work from being overwritten. Another collaboration tool that boosts productivity is a page-branching feature that allows multiple 设计师 to work on separate pages in parallel without affecting the live site.

根据我的经验, 网络flow赋予文案人员权力, 战略家, 内容和产品营销人员做他们最擅长的事情:写作和编辑. 使用直观的前端编辑工具, the content team doesn’t need to ping an engineer to reformat a snippet box or add a video animation to a product page. 一旦分配到编辑角色, an individual or team can use 网络flow’s built-in content management system (CMS) to update blogs 和 website copy, 整理和上传照片和视频, 并为图像写入Alt文本.

一篇博客文章被上传到网络flow的内容管理系统.
Team members without a 设计 or engineering background can create 和 edit content in 网络flow’s CMS. (Pavle Lucic)

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

除了设计一个功能和美观的网站, you will need to find 和 manage the many tools 和 data sources your clients need to run their sites after the project ends, 这很有挑战性. 幸运的是,网络flow将许多集成和跟踪工具集中在一起.

例如, I once enabled multilingual support on a client’s 网络flow site by integrating a third-party translation provider. 用这个简单而有效的方法, 客户的网站可以被世界范围内更广泛的用户访问. 另外, 与Shopify和WooCommerce等电子商务系统集成, 您可以授权客户处理订单, 同步产品目录, 并通过一个仪表板管理他们的在线商店.

网络flow’s integration with analytics 和 reporting services like Hotjar 和 Google Analytics allows you to evaluate the effectiveness of a site’s 设计. 例如, you can pinpoint pages 和 components needing UI 和 UX improvements by leveraging data such as heatmaps, 愤怒的点击, 跳出率.

一旦我为客户的网站设置了集成, 我利用它们来包含新的特性和功能, 例如电子邮件选择加入表单, 产品页面, 以及社交网络动态. Integrations may also be used to automate processes 和 save time on things like newsletter distribution 和 social media posting.

除了, I use 网络flow’s fine-grained front-end SEO controls to boost my clients’ search performance 和 draw more traffic to their sites. 具有简单的菜单和图像大小的语义控制, 页面标题和描述, 元数据描述, URL重定向, 加载首选项, 你可以优化一个网站与外部插件或工程支持的最小依赖.

最后, an AWS-powered hosting stack distributed across 100 data centers (one of the factors that appealed to my consultancy client) ensures sites load fast 和 can h和le heavy traffic. This ability is beneficial for site visitors 和 also boosts clients’ site rankings in search engines that factor load speed into their algorithms.

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

可扩展的解决方案

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

尽管如此,我还是很欣赏网络flow节省的成本和时间. 根据我的经验, 它的协作功能是通过允许营销来提高效率的关键, 设计, 和工程团队一起实时创建网站, 而不是孤立无援, 所以重要的想法不会丢失. 除此之外,我发现网络flow是一个非常用户友好的工具. 有了这些网络flow最佳实践和很少甚至没有编码经验, 设计师 can make responsive websites with attractive layouts 和 设计 elements superior to those of their competitors. 最重要的是, the speed of 网络flow as a 设计 tool allows me to quickly adapt a website to user 和 client needs 和 iterate as needed to 提高转化率.

了解基本知识

  • 网络flow适合初学者吗?

    网络flow对初学者和经验丰富的设计师都有好处. 网络flow网站不需要编码知识, 和 the tool has an intuitive interface that makes it easy for 设计师 of all experience levels to learn. Even expert 设计师 with coding experience may benefit from using the platform because it can speed up the website-building process 和 enable them to focus on tasks that require their specialized skills.

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

    许多设计师发现,跳进去尝试这个工具是学习网络flow的最好方法. 然而, there are also online classes 和 tutorials to help users learn the platform 和 specific 网络flow tips 和 tricks.

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

Pavle Lucic

验证专家 在设计
10 的经验

贝尔格莱德,塞尔维亚

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

作者简介

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

authors are vetted experts in their fields 和 write on topics in which they have demonstrated experience. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前的角色

首席用户体验设计师

以前在

法国兴业银行(Societe Generale)TomTom

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

输入您的电子邮件,即表示您同意我们的 隐私政策.

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

输入您的电子邮件,即表示您同意我们的 隐私政策.

Toptal设计师

加入总冠军® 社区.