本周早些时候，我们问过你如何让你的个人登录页脱颖而出，当有这么多，大部分看起来像，你写了伟大的想法和例子。这里有一些最好的和背后的过程。

要开始，只需单击上面的图库。每幅图片都显示了一个登录页和一点关于它是如何产生的。在展示之后，我们总结了我们觉得所有这些页面最有效的地方，以及如何使用相同的原则为自己打造一个出色的页面。

马克拉比诺维茨

Marc的登录页面设计非常简单，可以让你向下滚动页面以了解更多信息。它还提供了一个方便的菜单，如果需要的话，可以更快地跳转。马克解释了他的过程：

作为我的专业登陆页，我不想让人们努力工作，也不想让他们知道我做了什么（也做了什么），以及为什么我做了什么对他们很重要。我先用一个简单的信息图表来介绍我自己，让任何可能看到这个页面的人都能快速地微笑。总的来说，保持它的简单和点刚好足以吸引人们联系我，如果他们想知道更多！

上面的图片只显示了马克页面的一小部分。您可以在这里查看完整的图像或访问他的网站。

bjw公司

布兰登选择了更具互动性和动画效果的设计，而不是你经常在登录页上看到的那种以单一图像为中心的大型设计：

我想要一个基本的页面，显示所有必要的信息，美观，只是有点不同。我在网上四处寻找设计灵感，然后玩弄代码，让它以一种时髦但又不过分无缘无故的方式工作。看看吧，希望你能明白我的意思。

当你查看他的网站时，你会发现它的交互性和简单的动画是多么的与众不同。

保罗·卡德维尔

Paulo创建了一个简单的页面，当你与它交互时它会扩展，但是最好的部分之一是在你等待的时候看着背景插图改变它的样式。保罗对他的方法有了一些见解：

我想要一个K.I.S.S.（保持简单，愚蠢）的方法，全屏滑动到三个图像显示三种不同的风格：矢量，照片处理和传统铅笔（有一点Photoshop）。再加上几句自我介绍。

看看保罗的网站。

马特里德

马特的页面很有个性，有一些有趣的小秘密。例如，当你一直向下滚动页面时，它会显示一张隐藏的照片。马特解释了他的过程：

首先，HTML5只是昨天的事，还不够有趣！我对自己说，嘿，我们再提高一点，好吗？所以我做到了，现在我已经领先了10年，所以我要继续用我所有的空闲时间来做啤酒和喝酒。

第一步：拍一张很棒的照片第二步：在我的小moleskin笔记本上画一个布局第三步：Photoshop第四步：Tumblr+编写一些CSS 1.2和HTML9第五步：验证[ISH…or]不，我不在乎，还有我喜欢我网站的阿姨。第6步：$$$$$$$$$$$$$$$$

查看马特网页的完整视图，或者直接访问他的网站。

罗伯索耶

Rob的页面采用了与Marc类似的方法，因为它是一个很长的设计，您可以向下滚动以了解更多信息。它还使用无所不在的导航来帮助您跳转，但它显示在最上面一行而不是菜单中。Rob解释了一些他认为在个人登录页中重要的东西：

至于一个好的个人登录页，最重要的是：排版、配色方案和空白。如果你知道如何使用CSS，那么响应性设计也很好。

Rob的页面比你上面看到的要多得多。过来看。

萨哈斯卡塔

Sahas的产品组合模仿了WindowsPhone7设备，使一切都紧凑有趣。他使用HTML5、CSS3、JavaScript、一点Photoshop和windowsphone7sdk中的一些资产将其组合在一起。总的来说，这是一个有趣的方式来浏览他的登录页，也包括了相当多的信息在一个小的空间位。

好处是Sahas的页面是使用它的最佳体验，所以去看看吧。

外卖

你能从这些例子中得到什么？以下是三个最重要的相似之处，使这些页面非常出色：

• 创作者选择了一种对他们来说很有个性的美学。
• 这些页面是从头开始编码的，以提供比常规登录页创建者所能提供的更多的对外观和感觉的控制(顺便说一句，如果你想学习这些技能，我们有tl80夜校课程，既可以**网站，也可以使用JavaScript。）
• 与其简单地**一个有吸引力的登录页，每个创建者都会考虑用户将如何与页面交互。一些人保持简单，另一些人提供了大量的互动，但每个人都会考虑如何查看和使用他们的网页之前，把它放在一起。

当你把你的页面放在一起的时候，你要记住这些事情。虽然设计感、天赋和大量的实践也是必要的，但以上原则将帮助你的网站在登陆页面上脱颖而出。