图片样式

国外大神设计个人网站有一套

两周前我的个人网站上线了。我本人都没有想到会有那么多的反应,无论是后台还是其他渠道。看到这些我真的超级兴奋,其中有些十分棒的倡议我立即就采用了,但可能有些人还是猎奇这个网站的一些想法是如何涌现的,所以这里就和大家分享一下我的个人网站的制造过程。

1、设想

写下需求应用到的款式和元素,创建一个简易版的指南协助你坚持专注并防止偏离主线。关于我来说在坚持想法的同时对外界的反应坚持开放的心态是最重要的。

我的第一个想法是:网站整体要简约,带着几分颜色和一些特殊的动效。听上去再平常不过了!

另外我还想把我的个人阅历作为一个元素和我前些年与我所认识的最棒的UI设计师 Jürgen Hassler 共同创建的工作室兼并在同一个模块中。

2、网页架构

网页内容应该突出个人才能和阅历。不过这个根本上不是很难,由于没有客户或者第三方的干预,但是搜集和编写这些东西得花上一些时间。

 

在我看来网页的导航栏应该是在任何时分都能看见和点击的。从这一点来一说汉堡包导航(Burger-navigation)关于桌面设备毫无疑问是不可行的。而在挪动设备上,内容是能够经过滑动停止阅读的,所以更没有必要经过点击汉堡包图标(Burger-icon)来阅读整个网站。

 

展现什么项目对我来说不是很难—我就挑本人喜欢的那些。但我不是那种能够一下子写很多东西的人或是作家。所以在下班或是设计过程中我和一位文案一同修正文字局部。

3、绘制线框图

在开端绘制的时分先从导航局部下手不失为一个好办法。从这一点来说,虽然只是桌面设备的线框图,但不同设备都应该在思索范围内。

 

版本1

很长时间以来我都习气以呈现在两侧或向上滑动的与访问者视野平齐的 off-canvas 导航来构建网页。第一个版本就用了这个想法,但很快就放弃了,由于固然导航是可见的,与内容搭配也比拟有冲击力,但并没有给出任何有意义的信息。

 

版本2

我十分喜欢运用侧边栏导航,但放在我的个人网站中显得安定凡了。所以还是继续看看有没有什么新想法吧。

 

版本3

经典的横导游航能够在简直任何场景中运用,并且易用性十分棒,但会占领一定的高度。从另一个方面来说你需求设置文字的最大宽度来给左右两侧留有足够的留白。

4、迭代设计与原型制造

在构建了网页雏形之后就是迭代设计了。迭代应该思索到过去的设计流程和一切版本中经过推敲的最有用的局部。

 

在这个过程中 Roland参加了进来并协助我开发我的个人网站。我们过了好几遍框架,讨论了许多有建立性的处理办法,当然也包括如何树立灵敏的设计流程。

固然这是我第一次尝试设计网站,Roland 把导航局部的内容变成了可点击的原型,这是能在任何早期阶段消弭疑虑的做好的事情之一。

假如觉得原型并不是十分有必要的话,能够试试 Semplice 之类的 framework 工具来测试哪些想法是可行的。

5、添加互动、转换和完善细节

从一个想法变成一个实物的过程是十分痛苦的,在这事儿上要耗费很多想象。但现有的页面能够作为十分棒的参考来停止讨论。

应用线框故事版能够视觉化的呈现想法,巧妙的展示在同一区域中的动画效果。Roland 将原型停止了扩展,所以我们能够直接点击操作停止检查。

在最后的开发阶段我把留意力集中在细节上。最终这个网页由一个简单的扁平的页面变成一个不只仅呈现我的才能和阅历也是我在理想生活中的真实写照的极具个性的个人网站。