如何打造一枚独特的WebLogin登录页设计

原创文章 分类: 经验/观点 版权:
1392 9 14 2
2017-06-12
2.5
普通推荐

Image title



“序言肯定要扯一些蛋的。”


近期看到很多设计爱好者下载我分享的极简设计模版,广受好评,感谢大家的支持,老王会多多加把劲,分享更多的极简设计源文件。


本文首发于老王公众号jobsdesign,欢迎关注~


同时也收到蛮多朋友私信说看到有我司同行产品的设计师恶意抄袭我的上线版本设计,抄的一干二净。还有人临摹我的设计去面试(黑人问好.jpg),在这里还是要声明下,你抄的到我的设计,但你永远抄不了设计中的灵魂:\


--------------手动分割线--------------


项目背景


 A.w是一个集成了国内外潮流品牌与独立服装设计师,WEB/APP的UI都是我负责的。今天我们单独拿Web登录页做一个小分享。


服装购物平台视觉设计调研


Image title

Image title

Image title

Image title

Image title

Image title



设计风格


调研对象主要是国内电商平台,我们用户国内占多,I.T港澳台居多,ami纯国外。我们发现国内风格普遍地气,但作为一款国内外都有用户的产品,我们不能定位在国内风格,一定要融合国际化的主流设计,参考了各类国际产品设计,国际化服装品牌的UI风格主流如下:


Image title



是的,一如既往的黑白设计,以及搭配线框的风格,老王表示很嗨皮啊,毕竟跟老王的设计是一摸一样的。


近一年大标题的设计风格也开始在国外流行起来,国内用的真心不多,大标题?如何大?加粗吗?还是说:


Image title



嗯,到这里我们基调是定了,如何落地到官网上?


首先先看一下官网主页的风格:


Image title


经过登录功能的需求封板,登录页功能线框图如下:


Image title



这一页的设计主要亮点在于btn按钮的视觉,如何做一个超级亮眼的btn?


前不久老王分享过btn的设计源文件(源文件见老王lofter或加老王微信opdatuzki私信)


Image title



我们结合调研的设计,外加个人风格的极简设计,官网登录不就出来了么:


Image title

Image title



类似风格其他页面也可以复用:


Image title



细节,靠的是日复一日的打磨于专研


其实关键之处在于你每天的坚持,在今天一定会有质一样的突破。你不临摹,你眼界不会提高,你不打磨,你的细节不会增加,在你最难熬的中间时段,要想想你坚持至今不容易,再走几步,也许就成功了。一个登录样式,自己从15年研究到现在,每个项目都在尝试不同的登录设计,没有一个落地设计是有重复的。

王涵洋Jobsw

微信交流opdatuzki | 老王公众号jobsdesign

378粉丝/0关注

原创达人原创小生
BitBill 2.0-BTC&ETH 比特币钱包BitBill - 比特币钱包/以太坊钱包 2.0官网

王涵洋Jobsw

王涵洋Jobsw

微信交流opdatuzki | 老王公众号jobsdesign

原创达人原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN