35 分钟,简单三步打造简洁型展示网站

第一步:思考

大家都知道,动手前的有效思考可以降低后期返工几率,从而节省时间。所以最初计划对「爱尚良品」改版时,就想清楚了改版的目的和想要的效果是什么。整理后是这样一个简要的列表:

  • 作品展示为主(教程、杂记类的内容放到公众号或发布到其它媒体);
  • 简洁风、去掉评论、突出内容主题和分享功能;
  • 两年内不会超过 50 篇内容,所以缩略图的排列布局可以多样化,避免单调;
  • 适量的页面效果;

有了清晰的想法就相当于需求明确了,这么简单的网站当然不需要用 Axure 制作原型啦,直接用纸笔画个草图 1 分钟完事:

第二步:设计

因为整站偏简单,所以准备了一个页面跳转的效果来减少单调感。好友 ZWW 帮我完成这个 WP 主题的制作,于是用 Keynote 做了个动效跟他确认技术实现有无问题。这样做的好处是无需太多言语,很直观就能了解我的想法。这个动效从新建文档到导出 gif 文件共花了 3 分钟。

 
看过动效后 ZWW 告诉我说没有太大问题,某些细小的地方可能要折中处理一下,我就打开 Sketch 开始设计了,半小时左右完成设计工作:

第三步:制作

接下来用 Marketch 插件一键输出标注和切图,然后打包发给 ZWW 帮我制作成 WordPress 主题。这个主题虽然设计简单,但是想完美实现效果着实花了一些时间,算是我和 ZWW 合作这么久以来最折腾的一次。第一版的页面切换效果不太流畅,ZWW 又重新优化了代码,反复改了好几次,最终效果跟视频里的不太一样,但我们都觉得太过于追求效果而增加代码复杂度的话不值当,所以就折中处理了。


欢迎大家体验新版的爱尚良品网站:http://isang.me
关于页面里有我们的公众号二维码,喜欢皮具的朋友可以扫码添加,悄悄说一句:「端午节期间有抽奖活动哦」:-)

手作皮具与设计的故事

老婆是被我一不小心推入皮坑的。

从 2007 年开始她要全职带娃,不得不放弃了原先的工作。2013 年的时候为了让她不太无聊开了个淘宝小店代销记忆枕,虽然在亲朋好友们的捧场下有了些销量,但经营了半年多的店铺信誉还不到三颗心,加上对代销商品无爱,就把商品下架了。

空闲的时候老婆开始逛手工论坛,还买了些工具材料回来做些小东西。一开始是做简单的发夹头饰,慢慢就开始 DIY 布艺包包,最后还给娃做裙子,发到朋友圈得了不少赞。做的布艺包包送了一些给同小区的朋友很受欢迎,后来开了一家很小的童装店还在店里卖了一些,有时候送一个给消费额高的顾客,客人高兴得不得了。

by

老婆也是高兴得不得了,因为自己亲手做的东西被人喜爱,这种感觉确实很美好啊~

去年 3 月份我上了一堂皮具体验课给自己做了一款长钱夹,当时写了一篇短文还上了尾巴首页。我喜爱手作但没办法投入太多精力,刚好老婆大人喜爱手工于是就推她入皮坑了 ^_^

前前后后置办了许多工具材料,慢慢的整了起来。 继续阅读

私享品 Logo 设计

设计之初尝试了几种不同的表现形式,看到平面设计师 @刘柏坤 《字体设计进化论》一书的书名设计手法比较有意思,采用横平竖直的线条加上夸张处理的结构,出来的效果挺好的。

于是就参考这种形式画草图,草图看起来还不错,但在电脑上处理后发现这种表现形式并不符合实际项目的整体风格,虽然选择性的填充了封闭路径,但整体感觉太过幼小单薄。于是换了种思路,对文字做了变形、截断和重组的处理,最终确定的效果还算满意。

img_5331 继续阅读

一个产品的诞生,设计师涉及了哪几个阶段?

上周给组内小伙伴们分享了自己对设计的几个不同阶段的理解,抛砖引玉,希望可以和大家多交流。在一个产品从无到有的过程中,我所认知的设计大致分为以下几个阶段:

  1. 需求的挖掘和分析
  2. 思维导图
  3. 原型设计 & 交互设计
  4. 视觉设计
  5. 交付
  6. 跟踪验收
  7. 总结

阶段图

看到上面的图片,可能大家会问为什么没有竞品分析?当然是有的,但因为竞品分析实际上出现在产品诞生过程中的多个阶段,所以单独拿出来讲。
竞品分析

竞品分析其实是一个很深奥的话题,产品经理在这方面比较专业,很多大牛总结了许多宝贵实用的经验,大家想深入研究的话可以去找找资料。而作为设计师的我们,可以对竞品进行如下几个维度的分析:目标用户、核心功能、UI 设计、交互设计和产品优缺点。《孙子兵法》有云:知己知彼,百战不殆。只有做足了功课,才有利于后面工作的开展:)
继续阅读

MBE 风格图标 5枚(附 Sketch 源文件下载)

2015 年底,以巴黎设计师 MBE 命名的 MBE 风格开始在网络上流行开来,该风格的特点可以用几个词来概括:简约活泼、配色大胆、断点深色粗线条、插画风。

此风格一出,国内外许多设计师竞相效仿并加以延伸,做出了很多优秀的作品。主要运用在 icon 设计、Guide Page 设计、活动主题设计等地方。

用 Sketch 做了几个小图标,喜欢的朋友可以在文章底部点击下载源文件:)
优惠券 继续阅读