如何讓你的個人或專業登入頁脫穎而出

本週早些時候，我們問過你如何讓你的個人登入頁脫穎而出，當有這麼多，大部分看起來像，你寫了偉大的想法和例子。這裡有一些最好的和背後的過程。...

本週早些時候，我們問過你如何讓你的個人登入頁脫穎而出，當有這麼多，大部分看起來像，你寫了偉大的想法和例子。這裡有一些最好的和背後的過程。

要開始，只需單擊上面的相簿。每幅圖片都顯示了一個登入頁和一點關於它是如何產生的。在展示之後，我們總結了我們覺得所有這些頁面最有效的地方，以及如何使用相同的原則為自己打造一個出色的頁面。

馬克拉比諾維茨

Marc的登入頁面設計非常簡單，可以讓你向下滾動頁面以瞭解更多資訊。它還提供了一個方便的選單，如果需要的話，可以更快地跳轉。馬克解釋了他的過程：

作為我的專業登陸頁，我不想讓人們努力工作，也不想讓他們知道我做了什麼（也做了什麼），以及為什麼我做了什麼對他們很重要。我先用一個簡單的資訊圖表來介紹我自己，讓任何可能看到這個頁面的人都能快速地微笑。總的來說，保持它的簡單和點剛好足以吸引人們聯絡我，如果他們想知道更多！

上面的圖片只顯示了馬克頁面的一小部分。您可以在這裡檢視完整的影象或訪問他的網站。

布蘭登選擇了更具互動性和動畫效果的設計，而不是你經常在登入頁上看到的那種以單一影象為中心的大型設計：

我想要一個基本的頁面，顯示所有必要的資訊，美觀，只是有點不同。我在網上四處尋找設計靈感，然後玩弄程式碼，讓它以一種時髦但又不過分無緣無故的方式工作。看看吧，希望你能明白我的意思。

當你檢視他的網站時，你會發現它的互動性和簡單的動畫是多麼的與眾不同。

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。）
與其簡單地**一個有吸引力的登入頁，每個建立者都會考慮使用者將如何與頁面互動。一些人保持簡單，另一些人提供了大量的互動，但每個人都會考慮如何檢視和使用他們的網頁之前，把它放在一起。

當你把你的頁面放在一起的時候，你要記住這些事情。雖然設計感、天賦和大量的實踐也是必要的，但以上原則將幫助你的網站在登陸頁面上脫穎而出。