IWARE官网改版纪录(上) 。

历年官网

随着历史的变迁和技术的不断进步，IWARE自1996年成立以来已经经历了六次改版。进入网站时光机可以看到历年的网站面貌。前两期的网站还保留着:2010年和2013年。每次改版都有主要目标，这次有几个目标:1。网页信息的简洁，让用户一眼就能找到自己想要的信息。2.引入IWARE团队的特点，大量使用内部拍摄的照片。3.鼓励所有同事参与这个修订项目，并在博客区提供文章。

改版主要记录在以下几个层面:标准图、设计、程序功能、SEO、营销。

一、规划面

开设专案线上google试算表​

对于每个项目，将建立一个谷歌电子表格，供内部同事编辑和了解最新进展和信息。所有与项目有关的信息，即使与其他地方相连，也会在电子表格中进行排序，以确保可以轻松找到分散的信息。试用版可以用来添加许多选项卡功能。IWARE官网改版的tab项包括:网站收藏、结构、日程、相关链接、定位与优势、立意、版面规划、程序功能、SEO注意事项& # 8230；。

[div][div]

发散阶段

初期看了很多网站，大家都建议自己喜欢的网站，并说明喜欢的原因。这个阶段没有限制，大家分享自己喜欢的网站风格和特效，然后初步确定IWARE的风格方向。

[div][div]

利用定位优势进行讨论

有定位优势的讨论由设计部负责人Gary牵头，找出IWARE的主要定位和优势，进而衍生Slogan。

[div][div]

[div][div]

基于专业化的劳动分工

不同于以前的内部项目，大部分工作由特定数量的同事完成，这次官网改版汇集了大部分同事。根据每个人的专业特长，官网改版的工作分配如下:摄影/Ringo、设计/Katie、前端/Karen、Trista、程序/Bye、文案/Ryan、SEO/肖丹、Ryan、系统/Advan。

时间进度计划

时间安排一方面是尽量不耽误手上的客户案例，质量是重中之重，所以把整个时间安排拉长，设定两周为一个时间段，提供手上的进度。

[div][div]

[div][div]

博客征稿

以前博客区是营销同事Ryan写的。此次改版要求大家贡献自己感兴趣的话题，使得博客话题更加多样和专业，也实现了全员参与IWARE网站管理的理念。

[div][div]

[div][div]

第二，设计面

[div][div]

标志；徽标

在LOGO方面，凯蒂、林戈、美岛莉三位设计师提出方案，一共设计了六个Logo，然后所有同事投票选择一个作为IWARE LOGO。

最终的IWARE LOGO！我也问过其他部门的意见。有同事觉得这个LOGO对老人很亲切，一眼就能认出来~

​​

我是实景摄影

实拍主要由设计部的Ringo拍摄，动作指导由Gary以活动为主题，诱导大家产生生动的表情。以前官网都是以图库中的图片为素材，有时候会和其他家庭撞见图片，感受不到IWARE的实际场景。所以这次改版，我们想让游客通过IWARE的人和事的照片，感受IWARE带来的氛围。

​

布局

主要的视觉设计由IWARE的高级设计师Katie完成。设计中隐藏了很多小创意。比如同事的插画隐藏在作品中，团队分工用工作讨论的插画来表现。你可以看到我在任何地方都是同事。

前端设计

前端方面由Karen和Trista共同完成，这次改版运用了蛮多前端插件，包含：Slider-pro、Slick、SmoothDivScroll、Waypoints、Lazyload等套件。另外针对架构和效能的提升都有特地的优化。在架构的部分依据html5语意标籤，将<h>标籤置放重点语句，然后使用chrome的插件 HTML5 outliner 做检查；<a>标籤带title属性；<img>带alt属性，让搜寻引擎了解图片内容。重视这些语意标籤都有助于SEO优化，提升搜寻排名。在效能提升方面则运用了CDN、减少Http Request数量、压缩图片、在静态资源的 HTTP 标头中设定到期日或最长使用期限等方式加快使用者浏览网站的速度。前端由Karen和Trista共同完成。此次改版使用了相当多的前端插件，包括Slider-pro、Slick、SmoothDivScroll、Waypoints、Lazyload等套件。此外，还有专门针对架构和性能提升的优化。在架构部分，根据html5语义标签,< h & gt标注关键语句，然后使用chrome的插件HTML5 outliner进行检查；& lta & gt带标题属性；& ltimg & gt用alt属性，让搜索引擎知道图片内容。关注这些语义标签，有助于SEO优化，提高搜索排名。在效率提升方面，采用CDN、减少HTTP请求数量、压缩图片、在静态资源的Http头中设置有效期或最长使用期限等方式来加快用户浏览网站的速度。