首先，我们先来了解一下什么是网页UI：

WUI: Web User Interface的缩写，可翻译为网页风格用户界面，在国外用语中，常使用短语User Interface Design for the Web.

UI：就是用户界面，包括三个方向：用户研究，交互设计，界面设计。
WUI是网页用户界面。WUI设计与常见网站建设的区别是，WUI注重人与网站的互动和体验，以人为中心进行设计。

一、Web的基本分类

web种类对比分析

二、布局方式

总述：页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。

A、左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；

B、上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；

C、左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

布局分类：

【垂直布局（静态布局）】

1、布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示，不随着分辨率的变化而变化布局，承载的信息量很大，对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width（最小宽度），这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

2、设计方法
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout（布局），在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。

3、应用领域：一般为咨询类，新闻类网站，这种类型的网站

【流式布局】

页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这类布局适用类型非常广，形式很自由，千变万化。代表作栅栏系统（网格系统）。

1、布局特点
屏幕分辨率变化时，页面里元素的大小会变化而但布局不变

2. 设计方法
使用%百分比定义宽度，高度大都是用px来固定住
缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示，宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

【栅格布局】

1、布局特点

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

2、设计方法

需要栅格化处理的内容的总宽度 = 23列（1列=1宽度+1间隔）+1宽度 = 24宽度+23间隔

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

在浏览器中，首先有右侧滚动条的因素影响，并且主体内容的两侧也要预留出内边距。所以，我们真正创建的网页内容区域，是小于 1280 或者 1024 的。而得出具体的内容区域尺寸的方法，是通过网页的删格系统计算出来的，公式：（Axn）- i = W

这个做法就是通过将内容区域划分成若干内容块和间隔模块的方式，辅助我们排版。如果选择适配 1280，那么设计内容的区域宽通常为 1180、1190。而在适配 1024 下，那么内容区域宽常见的就有 950、970、990 等。当我们创建完完整分辨率的画布，再通过参考线的方式将内容区域规划出来即可。

对于网页设计来说，最重要的参数就是内容区域的宽度，但也有一些元素是例外，很多人可能发现网页有一些元素是超过正常的内容区域的（无论是对一般显示模式或是自适应模式），最常见的就是顶部的导航栏和底部的页脚区域。比如打开淘宝无论拉伸得多长，内容区域固定是 1190 宽，而导航栏却永远撑满整个浏览器。

所以，我们不会将这些内容的宽度计算在内，在设计稿中只要设计了这样的元素，和前端人员适当沟通和标注，就可以获得想要的效果。

总结

【自适应布局（全屏布局）】
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

【响应式布局】

1、布局特点：

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：
媒体查询+流式布局

响应式设计的规则非常灵活，会受到更多因素的影响，完整的响应式界面设计会提供多种尺寸的设计图。常见的如 1920、1080、640 宽。如果是定宽的设计我们只需要以适配 1280 或 1024 的屏幕展开设计即可。但是，网页的实际内容区域，和我们要适配的范围是不同的。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：

（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

【视差类型布局】

1、布局特点

通过鼠标上下或者左右滚动是画面中多层背景以不同的速度发生偏移，形成了立体的运动效果，带来给用户出彩的视错觉效果。 在网页设计中，成为网页设计的热点趋势，被国内外网站所应用。

2、设计方法

通过控制多层的透明背景，在滚动的时候不再是只向上运动，而是以不同的速度、不同的方向去运动，再结合现实世界的运动规律，从而达到很棒的视觉冲击和交互

优势：视觉效果强

劣势：如果加载速度很慢，那么用户体验就会很差。

【瀑布流布局】

1、布局特点

视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

2、设计手法

优点：

（1）节省空间，外表美观，更有艺术性。

（2）对于触屏设备非常友好，通过向上滑动浏览

（3）用户浏览时的观赏和思维不容易被打断，留存更容易。

缺点：

（1）用户无法了解内容总长度，对内容没有宏观掌控。

（2）用户无法了解现在所处的具体位置，不知道离终点还有多远。

（3）回溯时不容易定位到之前看到的内容。

（4）容易造成页面加载的负荷。

（5）容易造成用户浏览的疲劳，没有短暂的休息时间。

3、适用场景

a、内容以图片为主的时候，瀑布流是更好的选择。

图片占用空间比较大，并且大脑理解的速度相比理解文字要快，短时间内可以扫过的内容很多，所以如果用分页显示的话用户务必会频繁的翻页，影响沉浸式的体验，而瀑布流可以解决这个问题。

b、信息与信息之间相对独立时，瀑布流是更好的选择。

如果信息关联性强，用户务必会进行大量的回溯操作去查看之前或者之后的信息，相反，如果信息相对独立的话，可以使用瀑布流，让用户同时接受来自不同地方的信息。

c、信息与搜索匹配比较模糊时，瀑布流是更好的选择。

瀑布流给人的直观印象，就是同时显示的信息与用户搜索的匹配度大致一样，而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此，当信息与搜索匹配度没有明显区分度时，可以采用瀑布流。

d、用户目的性不强的时候，瀑布流是更好的选择。

如果用户有特定需要查找的信息，分页查找定位更方便，而当目的性较弱的时候，瀑布流可以增加用户停留的时间和意想不到的收获。

排版种类

1、“国”字型：

页面顶部是一横条，横条左部设置网站标志，右部是横条广告，横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏，左边一般放置内容导航、二级栏目、注册登录、搜索引擎等，右边一般放置动态新闻、热点内容、友情链接等，中间显示网页的主体内容，在页面的最下方是一横条状菜单或广告，也可以是网站的一些基本信息、联系方式、版权声明等。

特点：这种布局通常用于主页设计，主要优点是页面容纳的内容多，信息量大。

2、拐角型（T型）：

下方左半部分为主菜单，右半部分为显示内容的布局。因为菜单背景较深，整体效果类似英文字母T，所以称之为T型布局，这是网页设计中使用最广泛的一种布局方式。

特点：其优点是页面结构清晰，主次分明，是初学者最容易学习的布局方法；缺点是规矩呆板，如果把握不好，在细节和色彩搭配上不注意，容易让人看了之后感到乏味。

3、标题正文型:

标题正文型布局最上方是标题或广告等内容，下方是正文，通常文章页面或注册页面采用此种布局。

特点：简洁明快，干扰信息少，较为正规。

4、左右框架型:

这是一种左右为分别两页的框架结构，一般左面是导航链接，有时上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。

特点：这种类型结构非常清晰，一目了然。

5、上下框架型:

与上面类似，区别仅仅在于是一种上下分为两页的框架。

6、综合框架型:

左右框架+上下框架布局的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7、封面型:

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入"的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8、“三”型布局

“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，使其感觉进入了一幅完整的画面，而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部，网站标志非常醒目。

9、“川”型布局

“川”型布局比较特殊，整个页面在垂直方向分为3列，网站的内容按栏目分布在这3列中，可以最大限度地突出主页的索引功能。如果网站栏Bf良多，可以考虑采用这种布局。它和“国”形布局的主要区别是：把主内容区换成了各个二级页面的链接，其中的不足是二级栏目比例不易配置平衡，色彩不易协调。

10、Flash型:网页设计

其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏型的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

11、POP布局

POP布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单，常用于时尚类站点。这种布局方式不讲究上下和左右的对称，但要求平衡有韵律，能达到动感的效果，其优点是漂亮吸引入，缺点是速度慢。

12、变化型：网页设计

采用上述几种布局的结合与变化，布局采用上、下、左、右结合的综合型框架，再结合F1ash动画，使页面形式更加多样，视觉冲击力更强。

三、关于屏幕分辨率

确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。显示分辨率就是屏幕上显示的像素个数，屏幕尺寸一样的情况下，分辨率越高，显示画面就越精细，同样的屏幕区域内能显示的信息也越多。目前主流的屏幕分辨率如下：

由于分辨率的不同，在做网页设计的时候，需要考虑最小适配的屏幕，照顾到pc端的低分辨率机器。正常情况下，如果显示器分辨率>画布大小，那内容能正常的被用户访问；如果显示器分辨率<画布大小，那么内容就无法显示完成。对于一些非主流的设备，可以选择忽略，我们需要考虑的是多数人的需求。

从2017年的屏幕分辨率占比例来看，1024以下的设备，使用的用户很少了。所以，设计之前，我们需要设定安全区域，目前常用安全范围：960px 、1000px 、1024px 、1200px。新浪安全区为1000px，能够满足绝大部分用户，淘宝京东的安全区域为1200px。960，1200是万能的数字，能被 123456整除。

适配方案：

1、面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。

2、展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。

3、面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

四、基本规范

一般情况，在项目初期，设计师需要建立出一套设计规范（主色调，字体等），之后的设计工作，都要以此规范为基准。

1、文字

一个网页的最基本要素：文字和图片，出现了文字，就会出现文字排版，字间距、字号、行高行间距、段间距大小设定，字体选择、字体颜色粗细等细节，而这些细节，往往是非常重要的细节。

A.字号

在界面设计中，文字字号决定了信息层次和权重，设计师需要给界面的文字建立视觉层级，将文字大致分为三类：主标题，次标题和正文。首先我们要设定基准字号（最小字号），10号甚至都能看清，但是差一点，所以12最然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、13px、14px、16px、18px、20px、24px、30px。

B.行高

设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

C.字体

后台系统常用的字体：

windows 系统，中文 Microsoft YaHei，英文 Arial；

Mac 字体，中文 PingFang SC，英文 Helvetica；

除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。

2、尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

3、相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

4、标准色

颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。

品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。

（1）品牌色的应用场景包括操作状态、按钮色、可操作图标等。

（2）辅助色用于提示其他场景，比如成功、失败、警告、无效等。

（3）中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

（4）其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

5、 图标

图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。

6、 按钮

按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。

常用按钮可分为填充按钮、线性按钮、文字按钮。

按钮的交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

7、 导航

导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可进行统一设定。

a、顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。

b、侧栏菜单为垂直导航菜单，可以内嵌子菜单。

c、下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

d、步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。

e、分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。

f、面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。

g、徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

8、 表单

表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。

输入框的交互状态：包括默认、输入结果、提示错误、禁用、获取焦点。

输入框的尺寸：可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。

表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。

选择器：包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。

单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。

开关按钮外框 40*20px，内部圆形 16*16px。

9、 表格

表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。

表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。

a、选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；

b、操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；

c、表头展示列标题，一般具有排序功能；

d、正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；

e、底栏显示分页、总数统计等。

表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

行高

表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

行数

表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

列宽

列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。

列数

表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

对齐方式

表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。

详情入口

表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

10、 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

侧滑框

侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。

骨架屏

为某些特定数据提供数据加载等待时的占位图形组合。

全局提示

建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。

警告提示

用不同颜色和样式展示需要关注的信息。

通知提醒

消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。

11、 缺省状态

绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。

页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。

12、 数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。

功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

END～

（本文相关资料都来自互联网，主要用于自我学习，如若涉及侵权私信删除）

Powered by Froala Editor