和平网站设计头条

• 2018最新的网站设计趋势

  有时候我们可以看到一些新网站，了解网站设计者的想法，你可以感受到网站的气氛，网站设计的趋势，大胆使用的色彩，传统的头部导航现在被慢慢抛弃，并被一些动画模式所取代。你觉得怎么样它是使用更细长的字体，或者使用更详细的细节，或者使用图标风格的logo。也许会有一些新的想法。

  网站设计

  1彩虹色

  当你听到彩虹的颜色时，你首先想到的可能不是好的设计。因为过去有很多例子，因为彩虹着色的使用，最终的结果是，坦白说，是一个非常灾难性的设计。然而今天，彩虹着色不再是灾难。它们既美观又简单，在复杂度上只使用彩虹色。彩虹匹配不仅适用于小型网站，而且适用于一些大品牌。例如，Gigthub会议中心、西南航空公司、伦敦文法公司都使用有趣的彩虹匹配方案。矿石有趣的是，每个设计使用不同的表达方式，但使用相同的颜色概念。黑色背景匹配彩虹锥形字体元素：GITHUB使用简洁的暗美学背景来匹配锥形文本信息。用户界面元素从关键信息中吸引用户眼球（如日期）和最关键的门票按钮，彩虹变得简单而微妙，充满机会和乐观。这似乎是鼓励用户购买机票的正确方式。西南航空公司使用的背景是彩虹背景元素，同一字体也逐渐使用填充，梯度符号为网站提供了一个视觉焦点，内容比较乏味，颜色G。艾夫斯对文本有一定的生命力，帮助用户点击。伦敦文法背景采用一个巨大的彩虹锥形球，并伴随着音乐，像水滴一样移动和变化，视觉上吸引用户告诉他们与Spotify合作。元素的变化是非常有趣的。婷，但色彩是最先吸引用户的。

  网站设计

  2。传统网站的第一个屏幕的下降

  或者头部设计多年来头部的设计，已经很多年了，但是现在许多设计师开始使用更紧凑的滚动结构，更多的元素和更少的组成。In字体与浮动元素混合，一些视觉效果很有趣，一般来说，协调感会降低

  传统的第一个屏幕的衰落是看起来很好，非常不同，问题是是否有足够的信息传递他们的兴趣，或者用户会对一个不太直观的网站体验做出积极的反应。这是一个值得注意的趋势，因为他可能在耳边。在进化的阶段，设计师们准备做一些不同的事情是可以理解的。通过尝试成为新事物的第一步，到目前为止，在这些概念设计中，设计者可能没有很好地完成一些组合，并且不值得期待这一趋势。

  网站设计

  3。黑暗模式动画

  这可能是网页设计中最有趣的设计趋势：暗动画效果在视觉层面上是有趣而神秘的，通过不同的表现水平，另一方面，动画模式的组合也可以让用户参与设计。在不同的情况下，使用不同的方式来运行大小和动画。下面的例子以不同的方式使用暗动画效果。从某种意义上说，设计者希望用户更频繁地交互，而移动鼠标会得到意想不到的结果和惊喜。虽然这些设计看起来很酷，但它们也会出现。有一些挑战，不是所有的用户都有这种深色的美学。在某些情况下，它可能不是很好。但是设计师想做一些不同的表达时尚或心情的事。暗色的组合可能不会有太多的色彩吸引你，而且优点是T。有颜色的东西突出了焦点，而黑色图像的水平对比度是不一样的。　　

  展开

• 网站设计要确定网站整体风格

  网站设计的整体风格及其创意设计是最难以学习的难就难在没有一个固定的模式可以参照和模仿。给你一个主题。提供给大家一些参考经验：

  1．将你标志logo尽可能的放在每个页面上最突出的位置。

  2．突出你标准色彩。

  3．总结一句能反映贵站精髓的宣传标语！

  4．相同类型的图像采用相同效果，任何两人都不可能设计出完全一样的网站。

  风格(style抽象的指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI标志、色彩、字体、标语）版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子：觉得网易是平易近人的迪斯尼是生动活泼的IBM专业严肃的这些都是网站给人们留下的不同感受。这里。比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的

  文章出自:北京网站制作公司-东浩联创 http://donhonet/new/detail-5-11-598.html 转载请注明出处

  展开

• 15款实用的网页设计工具，总有一款适合你

  在信息爆炸的今天，UI设计师要通过网络寻找设计素材和工具是一件简单的事情，相应的，要找到真正可靠且素质优秀的素材，也越发的不容易。在海量的网站中寻找一个符合需求的素材，花费在搜索和筛选上的时间也越来越长。这种情况使得今天这样的设计工具/素材推荐类的文章与合集显得更有意义，也弥足珍贵。

  由于网页设计师和开发者之间的界限越来越模糊，两者所用的工具和素材的交叉重叠的情况也非常普遍。今天所推荐的这15项全新的工具/素材里，应该有 很多都值得网页设计从业者们收入囊中。这当中涵盖了设计类应用、框架、分析工具、栅格系统等多种类别，单把它们放到一起，就足以组成一个网页设计师的日常 用工具合集了。接下来就请大家和小编一起具体看看这些新工具能帮你做哪些事情。更多网页设计相关内容，请关注优就业IT常见问题栏目。

  1. Frontify

  Frontify 可以让你在5分钟内创建一套漂亮而完备的风格指南!这个在线工具有趣而简单，让你维护品牌风格和样式快速而方便。由于Frontify 优秀的用户体验设计，你可以很快上手，即使你有专业的需求，Frontify 的说明文档也可以引导你实现一些更细致更专业的东西。

  2. Flarum

  Flarum 是一套简约易用的开源论坛系统。如果你需要一个相对简单的论坛网站的话，可以考虑Flarum，它界面简单且可以快速上手，让你更多的专注于话题讨论。Flarum的论坛页面滚动加载流畅，无需等待页面加载。

  3. Lightning Design Systems

  这个名为闪电设计系统的工具专注于构建体验优秀的企业级APP。在这套系统的支持之下，你可以快速地对整个界面进行深度定制，保持整个界面保持高度 的一致性而无需让工程师在此耗费更多精力，你所需要做的就是下载那些无平台限制的CSS框架，然后开工就可以了。你可以参考这套系统的详细说明作出符合 SalesForce生态的优质APP，轻松地调用SalesForce的核心视觉组件和交互模式，拿出最佳的方案。

  4. Rucksack

  Rucksack 是一款有趣的CSS工具，让CSS的开发过程更加有趣了。Rucksack 是基于PostCSS构建的，模块化设计，没有冗余，运行起来飞快。将Rucksack融入到你的开发流程是很简单的，Rucksack对绝大多数的工具 都有相应的插件。由于它是基于PostCSS来构建的，所以它同其他的CSS处理工具都能很好的兼容，甚至能够同Stylus直接协同。

  5. GridLayout

  GridLayout是一款轻量级的栅格系统，用以制作水平滚动或者垂直滚动的Web应用，并且能够兼容旧版的浏览器。如果你需要创建复杂的布局， 并且需要对旧版的浏览器进行兼容，选择GridLayout是很不错的。这套工具涵盖了1KB大小的CSS文件和大概0.5KB的JS文件，如果你只需要 支持更为现代的浏览器，最好不要使用Flexbox。这个工具是基于MIT的协议来分发的。

  6. Bonsai

  Bonsai 是一款为自由设计师所准备的工具，用来创建、签署和存储工作合同的工具，并且可以协助付款、托管。目前这个签署协议的模块已经完善并且发布了，而支付和托 管的部分还处于内测阶段。现在Bonsai对于专业的设计人员的工作合同签署的支持已经做的很不错了，尤其是支付方式的规定、知识产权保护等环节。

  7. Apostrophe

  Apostrophe 是一款设计驱动下、基于Node.js 和MongoDB的内容管理系统。这套CMS为你提供了灵活的工具，你可以以此为基础设计内容向的网站，不论是简约风还是繁复的结构都可以轻松Hold 住。这套系统的开发者相信，内容编辑应该是简单而易用的，也就是在这想法的驱动下Apostrophe的编辑体验设计的非常容易上手，网站编辑也可以轻松 掌控网站内容。

  8. Grid.Guide

  Big Bite 的员工发现计算栅格的宽度是一件非常恼人的事情，尤其是在嵌套结构下。正是在这种需求的驱动下，他们发明了这款Grid.Guide工具。这款工具会根据最大宽度和列数来帮你计算可能的排列组合，生成对应的PNG文件，让你可以直接拖拽到相应的工具中使用。更重要的是，Grid.Guide是完全免费的![page]

  9. Quantity Queries

  Quantity Queries 是一款帮你进行数量查询的工具。

  10. Timber

  Shopify Timber 是一款前端框架，用于快速便捷地构建Shopify主题。其实从广泛意义上来说这是一款可以广泛应用的主题制作工具，并不全限制于在Shopify中运用。不论是经验丰富的网页设计师和前端还是新手都可以灵活运用，其中包含了模板、标记、模块和CSS框架，根据你的需求调用就好了。

  11. Now UI Kit

  InVision所提供的这套Now UI Kit 是一套堪称完美的跨平台UIKit，可以用于网页设计、平板和手机的界面，当然，最重要的是它是免费的。其中包含了52个完整的设计模板、35款可以自定义的图标以及可以运用在各种界面中超过180个UI组件。

  12. Unsplash

  我们其实已经不是第一次推荐Unsplash.it ，它是用于网页中的图片占位符，其中所用的图片是来自于网站Unspalsh，这个网站提供了许多高品质的图片，这也使得Unsplash.it的效果非常不错。

  13. Gitup

  Gitup 是一款为Git所准备的图形化客户端。在Gitup的协助下你可以便捷的提交、创建新的分支、合并等等等等。Gitup 赋予了Git全新的交互方式，让代码管理更加迅速、安全、无痛。

  14. Color Hunt

  ColorHunt 包含了一系列漂亮炫酷的色彩组合，网站会每天更新配色方案，并且根据浏览数排列出最漂亮的配色方案。

  15. TinyCon

  TinyCon 是一款管理Favicon 的库，借助它可以方便地管理Favicon和弹出框。

  展开

• 学网页设计有前途吗？怎样自学网页设计？

  随着国内互联网的快速发展，中国网民的数量大量的增加。所以很多人通过互联网去实现自己的要求。比如说现在很流行的网购、通过招聘网站进行求职等等，随着社会的发展，人们的生活会更加的依赖网络。因此每个人，每个公司都想去做网站，个人通过网站推广自己、公司通过网站推广公司的品牌与知名度、获得更大的利益化。所以学网页设计有没有前途显而易见。

  30秒测试你适不适合学网页设计：

  http://tianhujy/list-93-1.html?wm=tt_lyt_wysj（可复制到网址框打开哦）

  有很多转行想学网页设计的，不知道抱着什么目的去学习的，如果你纯粹觉得这个工作轻松还好赚钱，那我想说，只要社会和平，每个行业都有钱赚，但赚钱和你的付出永远是对等的。

  网页设计只是一种职业,是另一种赚钱的机会，可以这样说每个行业都赚钱,每个行业也都会亏钱,关键是看你如何去做,你是不是适合这行?

  记住一点，行业没有贵贱好坏之分！关键在于，做一行，精一行！

  那么怎样自学网页设计呢？

  第一：学习网页设计——热爱网页设计。

  热爱网页设计就是你喜欢网页设计，不会把网页设计当成你的工作，而把网页设计和你的生活结合在一起，在学习网页设计的过程中，一定不能急躁，要怀着一个良好的态度去学习网页设计。

  第二：学习网页设计——临摹优秀的网页设计作品

  用专业的网页设计软件来进行网页设计，比如：Photoshop等网页设计软件。在网上找一些比较好的网页设计作品进行临摹，临摹一段时间就按照自己的思想来设计网页，可以多看看哪些比较好的网页设计作品，看的多了做的多了，自己的脑子里肯定对网页设计有了一点想法。

  其三：学习网页设计——网页设计教程

  现在网上有很多专门学习网页设计的教程网站和教程视频等，可以找一些这样的网站，这个网站上有很多关于网页设计、网站设计等特别好的教程，或许对你学习网页设计有帮助。

  想要成为网页设计师需要学些什么软件呢？

  成为网页设计师需要学静态网页：

  DreamweaverCS4：网页布局、制作；Html&Css简介；网站管理与维护、上传与下载；案例分析

  Fireworks：美工设计、网页配色；CI、LOGO、Banner的制作；常见网页动画制作、网页布局

  FlashCS4：经典网页动画、广告、片头、贺卡设计与分析；MTV制作、交互式网站简介

  PhotoshopCS4：Photoshop操作基础、图像优化处理、经典实例分析与制作、gif动画、广告gif图片

  IllustratorCS4：广告招牌制作、灯箱广告、服装广告设计、企业徽标设计、名片设计

  对于高级网页设计师，还需要学动态网页：

  Html语言详细解介、CSS样式、IIS、C#语言、Asp动态、SQLServer数据库、Access数据(送)、JavaScript、Flash8.0高级编程、网站筹划、网站推广、电子购物车、ChatRoom、BBS制作。

  在互联网越来越深入到生活中每一个角落的年代，网页的表现形式就如同以前书本上的文字，传达着的是网络语言，每一条线、每一个色块、每一种版式、每一种组合都传递给阅读者一种感觉。实际上网页的表现形式已是互联网至关重要的元素，这些工作都是由网页设计师来做的，是一种创造性、有成就感的工作，更是不可或缺的职业。

  最后，30秒测试你适不适合成为网页设计师：

  展开

• 2018年最好的医疗网站设计及配色赏析

  随着人们对医疗健康认识水平的提高，相关的医疗服务和医疗网站设计也在不断规范化。从网站设计的角度来讲，医疗网站对于医疗内部来说就是连通整个医院的信息高速公路；而对于患者来说，优秀的规范化设计能更好的引导他们准确快速的获取医疗信息。

  如何设计出优秀的医疗网站呢？不妨看看一些优秀的案例。

  1. Weightmedics - 减肥类网站设计

  地址：https://weightmedics.co.uk/index.html

  设计特色：卡通风格、扁平化设计、颜色搭配活泼淡雅

  不同于一般的减肥网站，没有密密麻麻的减肥套餐推荐，没有夸张的瘦身前后对比图。整体网站设计以卡通方式呈现，淡蓝色的背景色搭配白色字体，简洁淡雅。局部搭配的橙色调使网站活泼而不单调。

  2. The Doctors Laser Clinic -医疗美容类网站设计

  地址：https://laserdocs.co.uk/

  设计特色：迎合女性审美、卡片式设计、优雅紫色调为主

  作为医疗美容类网站，大部分以女性顾客为主。所以懂得迎合女性审美，不仅仅是从产品服务，网站设计也必须能在第一眼获得女性顾客的青睐。网站整体的紫色调优雅大方，不同层次的紫色卡片设计能循序渐进的对顾客进行引导。CTA部分的设计以深紫色做为强调，吸引点击，从而增加转化。

  3. Beauty is power; a smile is its sword - 牙医类网站设计

  地址：

  https://dribbble/shots/4090230-Beauty-is-power-a-smile-is-its-sword-Dental-Website-Idea

  设计特色：黑色背景突出网站主题、简洁的黑白搭配，形成色调对比

  正如这个网站的设计主题，微笑之美在于一口健康好牙。这个牙医网站设计的特别之处在于它没有常见的白大褂和拟人化的牙齿图案来突出主题，而是采用较为抽象的微笑来展示设计概念。作为牙医网站，也不失为很好的宣传广告。巧妙的颜色搭配使得网站中黑色部分设计并不沉闷，反而十分灿烂。

  4. Tychee Training - Medical Training - 医疗类网站设计

  地址：https://dribbble/shots/4688223-Tychee-Training-Medical-Training

  设计特色：活泼的橙色调、插画风格、扁平化设计

  网站背景色采用橙白搭配，使整个页面看起来新鲜有活力。十分符合现代人追求的健康生活。首页采用了时下流行的插画风格，结合扁平化网页设计，给人温暖活泼的感觉。

  5. Psychologist - 心理健康网站设计

  地址：

  http://preview.themeforest/item/psychologist-personal-singlemulti-page-html-template-with-page-builder-and-admin-pages

  设计特色：响应式设计、HTML5、清新淡绿色调

  整体网页设计以淡绿色调为主，导航栏、字体、以及天空的颜色融为一体，是一个清新而又富有生命力的颜色。而网站响应能力和卓越性能是促成转化的一部分。作为心理健康类网页设计的模板，也可以给新手提供一个很好的参考。

  看了以上的案例分析，不知大家有没有注意到一个共同点，就是对于医疗网站设计中颜色运用的分析。

  那么，在医疗类网站设计中，有哪些可以遵守的设计原则呢？

  网站色调搭配是一个影响网页的重要因素。不同的颜色会产生不同的效果。

  （1）红色：红色会使人兴奋，并且感到紧张不安。所以医疗类网站不适合使用红色做为主色调。

  搭配：红色系中的粉红色比较适合于使用在医疗美容类的网站，营造出迎合女性柔美、纯真的气氛。

  （2）黑色：色调比较庄重，且容易让人联想到死亡。所以如果对颜色搭配不好把握，建议避免过多使用黑色作为主色调。

  搭配：黑色与高亮度的黄色搭配，可以得到清晰整洁的效果。属于比较适合活泼跳跃、色彩绚丽的配色方案。

  （3）蓝色：蓝色比较适合和平淡雅洁净的页面，因此一些医院网站也会适当采用蓝色，活单独使用，或搭配使用。

  搭配：浅蓝色具有淡雅、清新、浪漫和高贵的特性，常被用于化妆品、女性、医疗网站的设计中。

  （4）绿色：绿色代表的是清爽、理想、希望和生长的意象，较符合服务业、医疗健康业、教育行业、农业类网页设计的要求。

  搭配：绿色可与多种颜色搭配而达到和谐的效果，也是医院网站中最为广泛的颜色之一。

  （5）紫色：紫色象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。

  搭配：紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。

  （6）橙色：橙色具有健康、活力、勇敢和自由等象征意义，能给人以庄严尊贵神秘等感觉。应用在医院网站设计中可以营造温暖的氛围。

  搭配：不能大面积使用，只能小块地与其他色彩搭配起点缀的作用。

  （7）白色：白色是网页设计中通用的颜色，它具有容易突出彩度的特性。

  搭配：搭配黑色显得高贵具有都市气息，但不适合作为医疗网站主色调。

  （8）黄色：在很多设计作品中黄色都被用来表现喜庆的气氛和华丽的商品。

  搭配：黄色属于一种中性色彩，因此它在网站设计中几乎可以和任何一种色彩搭配。

  在高保真网页原型中，色彩的运用也同样是网页设计的加分项目。颜色搭配得当的原型项目更有助于获得投资和赢取客户的机会。那么，你需要的是选择一款支持色料库的原型设计工具，而非单色的线框图工具。国产原型设计工具Mockplus中可直接通过色号或使用拾色器来设置组件、图标颜色。对于网页设计、App设计都是非常友好的。

  总结：

  不仅仅是针对医疗类的网站设计，所有类型的网站设计都应该变得规范且有创意。对于设计师来说，更应该学习的是如何避免网页设计落入俗套。网页设计中的色彩搭配也并不只适用于医疗网站，其他类型的网站也应该尤其注意在色彩搭配方面出彩，为自己的设计加分。

  展开

• 高端网站设计：9个排版超赞的网站分享

  技巧也学习一点的了，今天小编就分享一点干货了，这几个英文站在UI设计方面做得很好的，我觉得一个网站在搭建的初期就应该好好地策划下整体的一个感受以及设计会不会给程序带来负担，当然前端与后台的交流是分不开的，下面的这九组福利还是很不错的，小编在周末放假的第一天也并没有闲着，风享ui设计、时尚设计、APP设计等等时尚设计就是我的乐趣，对此我乐此不疲，小编也是需要学习的不然肯定会被慢慢超越的，建议多关注的设计博主分享，欢迎关注--乐活大器姐，就算是刷刷头条也可以学习何乐不为呢，趁着年轻多学习才会更加的好，小编这里提醒各位小假期也不要忘记学习呀！9个精美的公司、工作室网站分享给你，让你的创意灵感在周末假期也换换气。

  乐活大器姐-时尚UI设计越学越乐活，欢迎关注小编哦！每天阅读一点点，设计角度多一点点！

  展开

• 2018年网站设计趋势，值得一看！

  网站设计趋势

  如今网站已经变得十分普及，你的同行一般都有网站。那么究竟怎样才能让使你的网站脱颖而出呢？首先你需要一个自助建站平台来制作你的网站，如：又快又好智能建站。其次你需要了解2018年网站设计的趋势，这样才能确保你制作的网站能跟上时代。小智最近浏览了一些有设计亮点的国外网站，也看了一些文章，以下五点供大家参考。

  一、添加装饰性细节

  极简、留白、清新的设计风格已经流行了很长一段时间，但是在2018年要重视装饰性设计细节。特别是几何形状和图标。它们可以为网站上重点区域增加视觉聚焦点，同时让网站显得更加好看。

  装饰性细节

  小智提醒：“一切东西都需要适当”。我们要确保这些装饰性细节的加入是为了增加我们的视觉聚焦点，而不是分散我们用户的注意力。

  二、打破网站（布局）规则

  新潮的网站正在逐渐改变用户的浏览习惯。就拿导航来说，传统的导航都是在网站顶部横向排列，这样虽然也很不错，但我们不妨也尝试个性化导航。这样能使你制作的网站让用户“耳目一新”。

  打破网站布局规则

  所以自2018年起，越来越多的网站会打破布局规则，变得更加时尚和个性化（大家可以想象一下杂志的设计思路）。

  比如：

  1、不同尺寸大小，自由搭配页面

  2、不对称的布局方式

  3、各种内容（文字、视频、图片）都同时存在于一个界面

  小智提醒：打破固有的布局规则确实能使我们的网站显得更加个性，但是千万不能设计得让用户半天都找不到想要点击的内容。如果要非要在个性与用户体验度间做个选择的话，我劝你还是选择后者。

  三、多元化的动画效果

  网站动画的交互性使网站变得更加吸引人，同时提升访问者的浏览时间。而网站动画在前几年就有了，但传统的动画效果过于单一，未来多元化的网站动画或将成为未来趋势。

  多元化的动画效果

  比如：

  1、视差滚动效果

  2、页面之间的转换效果

  3、元素或者模块间的动画效果

  4、鼠标悬停动画效果

  5、自定义动画（又快又好自助建站里模块自带的动画）

  小智提醒：在网站中不要过度的加入动画效果，这样会增加负荷，延长网站打开时间。

  四、视频和3D效果

  将视频或者3D效果融入到网站中。比如，你的产品的每一个角度都能展示给用户，这样会有多吸引人。

  小智提醒：尽管视频或3D效果会使我们的网站看上去很高端，但是视频内容、位置摆放和视频大小同样关键。

  五、颜色上的突破

  2017年从柔和的小清新色到充满活力的暖色，再到渐变色和极简色，网站流行的色调一直在变。当然黑白相间的风格永远不会过时。而在2018年，一种特殊的颜色：紫罗兰色，正在逐渐的流行起来！

  总结：2018年的网站设计趋势，基本上都是打破常规、提倡原创，这样使得网站变得更加个性化。

  展开

• 【干货】设计师最爱的10个网站，想不到它也上榜了！

  在设计师圈中知名度极高的门户网站 HowDesign 每个月都会公布一份设计师们最值得一看的网站榜单，每次10个网站，内容覆盖面极广。

  刚刚发布的9月篇从帮你选择字体的免费网站，到通过声音、插画、动画和你互动的精彩UI设计主页，每打开一个就能听取哇声一片。小编全部打开感受了一番后，心情相当好，嗯，就勉为其难地分享给你们吧。手机上可能看不了，先收藏一波，等身边有电脑了一定要打开来看看。

  Archetype

  https://archetypeapp/

  设计版面时字体的选择总是需要谨慎，谨慎，再谨慎。自己选择的标题、副标题、主体的字体之间总是不够融洽，等好不容易一个个试下来一天就这么过去了。相信类似的经历大家或多或少都曾有体会。免费网站 Archetype 基于大量实践成功案例为你快速搭配适合一起使用的字体组合，让你的板面从标题到结尾具备一致的流畅感。

  Ecodom Sustainability Report

  http://ecodom.report/en/

  Ecodom 是意大利一家处理废弃电气电子设备的商业环保公司，专门为意大利的各大企业提供电器电子设备废物的处理方案。每一年他们都会完全公开透明地发布他们的年度报告。今年，他们想来点新鲜的。

  打开主页，纯净清澈的地球缓缓落下，用鼠标向左划过地球，一声清脆的鸟叫声把你带入花丛树林体会自然的美丽，鼠标划动，一阵安静悠扬的风声又把你吹入了富有活力的海洋，活泼的小海马突然从海底钻了出来，随着它们的动作，场景又切到了静谧的小雨池塘。精彩的氛围音乐和精致的互动性插画使人心神荡漾，同样的感受象君记得在PS3游戏《花Flower》中体验过。象君只介绍了一半的内容，向右滑动地球将会进入神秘的宇宙，就留给大家自己去体验吧。

  Judgey

  http://playjudgey/

  随着看过的书越来越多，好像隐隐就具备了从一本书的封面就能辨别内容好坏的技能。playjudgey就是这样一个测试大家封面识书能力的有趣地方。网站会交给你十本书，其中有经典名著，畅销书榜首书籍，也有差强人意的标题党鸡汤文。Judgey会让你来当评委，根据你的评分和图书实际得到的阅读评分作比对，在结尾反过来评价你从封面辨别好书的能力。

  Hendrick's Gin

  https://us.hendricksgin/

  Hendrick's Gin是一家有多年发展历程的琴酒酿造商。他们最近更新了他们的主页，具有复古风格的插画随着鼠标滚轴的滚动跟着动了起来，公司发展的小故事也不断地从意想不到的地方钻出来，点开小故事又有更多的插画和互动出现。对于网页设计想要另辟蹊径的设计师们来说相信这个网站会带来不少启发。

  The Website of Lance Wyman

  http://lancewyman/

  如果你对 Logo 设计有兴趣，那曾设计过68年墨西哥夏季奥运会 Logo 的 Lance Wyman 的作品主页绝对值得一看。Lance 对多层次含义浓缩为最简形式的 Logo 设计有着自己独到的见解，他认为设计 Logo 的过程是一种创作视觉上诗歌的过程。

  Lance Wyman与他的工厂安全海报设计

  1968年墨西哥城奥运会 Logo，奥运五环环环相扣延伸出了关键数字68

  Mexico68的色彩研究

  Product Graveyard

  http://productgraveyard/

  那些曾红极一时最后默默消失的人气APP和电脑程序死后都去了哪儿？它们都来到了这里，产品坟场。 为纪念这些科技进步路上英勇牺牲的烈士，Product Graveyard 给了他们一个归宿，如果你的生活曾因这些APP和程序改变，你可以来到这里向它们致以敬意。

  点开每个APP图标，你可以看到它们的“墓志铭”，详细记录了该APP的出生、死亡日期以及死因。活下来的人生活还要继续，所以墓志铭下方也会列举与该APP功能类似的其他替代APP。看到熟悉的logo出现在这里，心中不免感伤。Rest in peace, Vine.

  Intrusive Thought

  https://intrusivethoughts.org/

  抑郁症，强迫症，臆想症患者常常都被周围人所不理解、视他们为社会中的危险分子，但他们所面对的折磨和困难却是实实在在的。专门为强迫症患者提供帮助和资料的网站intrusivethought.org，它的创办者Aaron Harvey是名营销高管，但同时也曾是一名强迫症患者，他希望通过自己的网站给强迫症患者尽可能提供帮助，让更多的人能够理解他们。

  这次请来了 Anastasia Kuznetsova 作为艺术总监重新设计了网站。当代艺术般的UI设计，运用了强烈的视觉动力来引起强迫症患者的共鸣，同时也帮助其他人来理解他们的感受。

  The Online Porfolio of Risa Rodil

  http://risarodil/

  Risa Rodil是一名设计师、插画家以及字体设计师。她的个人主页做得实在是让人怦然心动。

  从小热爱艺术的Risa，14岁起就在充满创造性的爱好中不断摸索找寻，尝试过摄影、视频制作和网页设计后最终在插画和字体设计上肯定了自己的热情。擅长把自己机灵荒诞的想法化为充满欢乐的插画的她，如今已经是个接受过76家公司工作委托的独立设计师了。看着这个坚持自己理想的可爱女孩，真是瞬间觉得世界美好。

  Font Generator

  http://brandmark.io/font-generator/

  画画时上个大致的颜色，不合适大不了调调Hue就好了。在敲定字体时能不能也有个像调节Hue一样简单的方法来试验不同字体呢？答案是：“这个可以有”。基于庞大的谷歌字体库和严谨分类演算AI的Font Generator就能让你这样做。

  先敲定标题、副标题、主体的字体，再点击变化工具栏里的箭头，就能根据演算得出与所选字体相近但不同的字体。是不是很神奇呢？

  Unpigeon

  https://unpigeon.me/

  想要了解一个人是困难的，而更难的，是了解自己。艺术家John Reno设计了一个有趣的心理小测试，通过交互动画的方式给你展示十个词，你根据每个词给你带来的感受和喜爱程度给一个0到10的分数，最后网站会根据你的回答告诉你真正适合的职业可能是什么。

  via：howdesign

  本文由普象|雨天 整理/编辑，其他媒体如有转载需求请留言征询，谢谢！

  点击下方“阅读原文”查看《20个创意网站，眼界是设计师一切行为的基础》

  ↓↓↓

  展开

• 设计师墙裂推荐：十佳工具&建议选择一个网站配色方案

  为一个网站可以找到完美的颜色组合，是一个具有挑战性的任务。

  我们已经挑出一些强大的配色方案生成工具，让您轻松地创建完美的调色板。尤其是当你想做一个符合客户的要求，而希望做出特别的设计的时候。

  如果你没有专业的调色板，想找到一个网站设计完美的配色方案，不需要焦虑，你只需要找到合适的工具。

  选择配色方案的重要性

  不应该随机的为一个网站，或者其他类型的设计，去选择一个配色方案。你应该为了找到适合这个行业的颜色，而去关注这个行业的文化、品牌、和他所代表的企业，或者先驱者的思想。

  你应该难以置信，这是一个自杀热线网站的导航。

  显然,任何人访问这样一个网站，仅看设计的话，只会让人感觉更沮丧。

  即使你的设计并不是那么糟糕，但是你如果从一个旁人的角度，去看自己设计里犯的错误，很可能是出现在网站设计里的配色上。

  例如——你知道颜色对人类情感有很强的影响吗?

  颜色心理学

  这是一个理论,解释了某些颜色影响我们的情绪，或说服人们采取行动。

  根据研究，人们在看到一个产品后，90%的判断，是基于这个产品的颜色，潜意识会在看到产品的一个90秒内，替你做决定。

  红色：有没有想过，为什么那些巨大的“SELL”的牌子,在商店里都是红色的吗？这是因为“红色”是能够让人立即得到关注的，为数不多的几个颜色。

  绿色：为什么环境相关组织和房地产企业使用“绿色”品牌？显然，这当然不是因为草和树的颜色。因为绿色代表增长,财富,和平,健康。

  所以，色彩心理学，将会在帮助你的网站设计成功中，扮演者重要的角色。 所以，你很有必要学习如何使用它，而能够对你的设计，带来帮助。

  选择完美的配色方案的建议

  另外，还有很多方面，让你需要记住，选择正确的配色对你的网站设计，是很有必要的。你需要斟酌如何选择一个配色方案，而不是盲目的追随当前的趋势。

  这里有几点建议，能够在你选择配色时帮到你——

  1. 让设计对色盲友好

  设计师几乎都会有这个问题，在设计中使用颜色的时候，往往忽略了“色盲”对业务的影响。

  当马克·扎克伯格设计了Facebook的时候，他用蓝色作为用户界面的原色,因为它是能够让绝大多数人的眼睛能够看到的颜色。——马克扎克伯格是色盲。

  不排除你的设计会被一小部分人访问。

  2. 考虑你的受众人群

  不要只是因为一个知名的网站，用了某个配色，而你就一定要把这组配色拿来用在你的设计里。你应该考虑你的受众人群。

  如果你的网站目标的国际用户，你应该尽量选择适应不同文化和种族的颜色。例如,虽然在西方国家黑色代表奢侈品和大胆。但在印度文化，同样的颜色代表邪恶，消极，缺乏活力。

  3.颜色可以代表品牌

  最终，你设计网站主要目的是，应该是像访客产地你的品牌或业务信息。所以，你需要通过使用品牌颜色配合色彩心理学，来选择适合的颜色，帮助你实现你的目的。

  那么，现在我会在这里用一部分最好的工具，能够在设计里，为你提供出一个配色方案。

  1. Adobe颜色CC

  适合：高级用户

  这是一个许多大师所使用的工具。

  因为它是由Adobe,Photoshop开发者开发的，CC颜色有高质量的选项和特性，可以用来生成一个完美的配色方案。

  然而,它还涉及到很多先进的定制颜色规则，如单色、化合物,和三合会,这使得它更适合高级设计师。

  2. CoolorsCoolors

  适合：初学者

  CoolorsCoolors是一个快速调色板生成器，可以立即为您的网站创建一个强大的配色方案。

  您可以在没有任何经验的情况下，使用这款工具轻松地创建出漂亮的颜色组合。你还可以研究其他设计师创造出的配色方案，并且复制他们的调色板，用在自己的设计上。

  3.Colormind

  适合：网络& UI设计人员

  需要在基础的配色基础上，探索更多的可能，让原有配色显得更加生动，高级。

  随机或者手动的让这款工具，为您生成一个配色方案。它能让你更了解每一种颜色在界面里能够突出背景，也能让你看到的颜色更适合某些UI组件，例如界面里的按钮、标签。

  对于网页设计师和用户界面设计师来说，这是一个很好的工具。

  4.Material Color Tool

  适合：UI设计人员

  这是一个专门被界面设计师寻找配色方案而生的工具。但是您也能使用它来为您的web应用程序或网站设计，创建一个元素的配色。

  这种配色生成工具带有智能预览模式，让你能够看到你选择的颜色，就像运用在实际的设计中一样。这将为你节省大量的时间。

  5. Color Safe

  适合:初学者

  Color Safe是一个有趣的工具，帮助您创建符合WCAG指南的配色方案。

  对于设计师想要遵循4.5:1的前景色和背景色对比度(AA)水平的规则时，这是一个重要工具。生成器将会帮助你找到完美的颜色，以满足您需要遵循的设计规律。

  6.PalettonPaletton

  Paletton是一种先进的调色板生成器，附带了一组有经验的设计师喜欢运用的配色方案。

  这款工具可以设定，黑白颜色,相邻色等等。一旦你选择一个配色方案，您也可以运行一个模拟动作，看到这款配色，在不同的屏幕、是否色盲的条件下产生怎样的效果。

  7.Colordot

  最好的:初学者

  这个简单和易于使用的配色方案发生器是完美的任何网页设计师希望立即生成一个调色板基于自己的直觉。

  开始,所有你要做的就是简单地移动你的鼠标在屏幕上,直到你找到一个你喜欢的颜色,然后左键点击选择颜色。你可以继续点击,直到你选择你想要尽可能多的颜色。

  8.Colourcode

  Colourcode是另一款简单的工具，迅速选择配色方案。它的工作原理类似于Colordot工具。

  然而,Colourcode工具可以设定更多，能够让设计师仅用单色，就可以立即找到配色组合，模拟其他颜色风格。

  一旦你选择配色方案,你也可以下载面板，甚至作为一个PNG。

  9.Palettr

  Palettr不同于其他配色方案生成工具。代替手动挑选颜色，这个工具允许您基于一个主题或一个地方,像纽约,巴黎,罗马,或冬季和夏季，生成一个配色方案。

  10.Material Design Palette

  如果你打算基于一些固定的元素，制作一个网站或应用程序，这种颜色生成器就会派上用场。

  一旦你选择两种颜色作为主色和辅色，这款设计工具将会给你一个预览的颜色，让你能够预览到配色用在现实生活里，就像已经做好了一个真实的设计一样。您还可以下载CSS, SVG, SASS, LESS, PNG,等等。

  剩下的就交给你了~！

  当我们在配合设计技巧，使用了这些工具后，也应该密切关注你客户的品牌标识。

  你设计的网站，应该代表品牌和公司，胜过其他的一切。

  在你看到一位大师的作品时，你应该学习他用某组配色的原因，并自己尝试理解，或者模仿，将学习成为一种习惯。

  展开

• 别让这9个闹心的套路，毁了你的网页设计

  模式化的设计套路之所以为广大网页设计师所喜爱，很大程度上是因为它们具备有良好的可用性和可访问性，在转化率和用户留存率上有着不错的数据表现。但是这些通过数据来体现的设计模式，在用户的视角里，可能并不那么理想。设计和做人一样，需要少一些套路，多一些真诚。那么下面济南优就业IT培训的小编就为大家揭穿那些看似好用，但用户体验并不好的设计模式。

  1、色彩种类运用过多

  为了让自己的网站表现得热情而有吸引力，很多朋友非常极端地向其中加入大量色彩鲜艳的文字与边框，而这些颜色的运用与图片内容并不协调。这显然有损访客对核心内容的关注。

  解决办法

  最好的办法是使用最多三种主色调与素雅的背景。如果大家决定选择纹理背景，请确保其具体取色不会像霓虹灯般锐利刺眼。

  2、字体大小存在问题

  这类问题往往存在多种表现形式，包括字体不足12号使得用户无法看清甚至点不到后退按钮。

  解决办法

  要解决这些难题，最重要的是理解客户需要——年纪超过40岁的群体往往更喜欢大字体。年纪更大的使用者甚至只能看得清14号以上的字体。

  主题文本还应被拆分成更易于管理的区块，但却又不能破坏其连贯性。保证信息的易读性与快速获取性是我们的核心设计原则之一。当需要提供大量文本内容时，可以考虑将其划分成多个不同页面以简化内容管理。

  3、过度使用GIF、动画与音效

  在某些情况下，GIF动画非常有趣;动画能够让访问者获得更好的使用体验;音效可能也有助于提升感受。但这些都只是点缀，切记不可画蛇添足。GIF动画过多会造成一种庸俗而幼稚的氛围，而大家对于音效以及音乐的取向也有所不同。有时，我们精心设计，却难以实现效果。

  解决办法

  千万别让费尽心力添加的动画与音效成了刺眼又刺耳的垃圾元素。使用GIF动画最好能免则免，企业的官方网站绝对不要使用。

  4、超大的导航菜单

  大型的导航菜单，对于包含大量不同子页面的网站而言，似乎是一个很好的解决方案，然而实际情况并非如此。我们常见的网页设计错误就是在边栏及子菜单中塞进长长的清单，超大的导航菜单对于绝大多数的普通用户而言，看起来更像是迷宫。这看似满足了全部用户的需求，实则会分散用户注意力，并让用户觉得不那么爽。如果导航、侧栏与底栏无法协同工作，那么网站内容再好也将没有意义。

  解决办法

  信息分类整合其实是就是为了应对这种情况而存在的，将网站的导航内容规划为不同的大分类，有了层级，用户更容易筛选;又或者你可以将导航设计成为更为有趣的图文式链接，让它看起来不那么枯燥，也不失为一个可取的方案。永远不要低估在屏幕上留白的重要性，因为其是创造平衡美感的重要基础。

  5、乏味无趣的加载页面

  随着技术的进步，时间对于人们来说越来越宝贵，为了一个20M的网页在浏览器前静静坐上1分钟等待加载，那大多数用户都会有关掉它的冲动，因为我们会在这个过程中无数次怀疑这个页面是不是卡住了。如今的网站加载需要的是速度和效率，这符合当前的真实用户需求。给用户提供即时的位置、时间和响应对一个优秀的产品来说很重要。

  解决办法

  如果你的网站在加载速度上有问题，首先应该加载页面中较轻的元素，以及整个框架，然后使用加载器将较大和较重的元素逐步填充进去。这样一来，用户就不会觉得页面卡在那儿，而是在逐步加载了。

  缓冲应该尽量避免，如果它必须存在，那就应该有趣一点。加载页面可以是一个加载进度条，一个为浪费用户等待时间的道歉或者是配有文案的简单动画。

  6、设计臃肿，内容杂乱

  不断增加的功能会导致需求和交付之间的延迟，这会让设计逐渐变得臃肿。将各类新闻、链接以及图片塞进同一页面只会使其显得杂乱不堪，导致用户难以阅读及导航。

  解决办法

  产品发布上线后能够覆盖用户最常见的使用情形并提供值得信赖的使用价值;考虑用户的使用习惯，使你的设计能够让用户集中注意力。坚持增加必要且有价值的功能，尽量避免内容混乱多余。产品设计的流程应该是：发散，优化，迭代和提炼，直到你们的产品或服务可以提供一个优质的解决方案。

  7、对移动设备不够友好

  智能手机已经成为人们在互联网上获取内容的最佳途径。大家的多数出站流量很可能都指向智能手机或者平板电脑。如果各网页设计没有针对移动设备进行优化，那么人们可能面对难以进行访问或者加载时间过长等问题。

  解决办法

  目前市面上有着大量免费的应用与插件能够帮助我们解决这类难题，而针对移动端拥有出色优化效果的一大实例就是MailChimp网站。

  8、复杂的注册流程

  网站构建需要投入大量精力，而其最终目的在于吸引潜在群体并宣传或者表达自己的产品或观点，并通过重复访问带来收益。在设计网站时，我们往往只考虑自己的个人品味——但正确的作法应该是立足于目标受众的需要与特点。

  解决办法

  大家应当尽可能简化注册流程，因为多数用户对产品或者服务的注册机制并不感兴趣。如果需要填写的信息太多或者由于不支持键盘而导致流程难于操作，用户会很快选择放弃。

  9、无限滚动

  无限滚动的出现，终于解决了移动端上查看繁复的分类页的问题。不过与此同时，无限滚动的设计，还为我们创造了不少从未遇到的新问题。举个例子，当你要访问一个重要的页面，而它正好在长滚动页面的底部，撇开加载页面的时间和流量不谈，滚到底部去找就已经是一个很蛋疼的事情了。

  解决办法

  就像超大的导航菜单一样，想要让它发挥作用一样有合理的解决方案。将传统的移动端页面和无限滚动两种模式结合起来使用，让用户自己来选择更适合自己的模式，这有助于提升页面的可访问性。

  展开

• 本页内容为企业、个人自主上传或来源网络，所有资料仅供用户参考；我单位不对其版权负责、不保证亦不表示本网的资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。