設計一個好的網站從來就不是容易的事。
而網頁的介面設計（Interface design）是非常重要卻又常常被忽略的部份。
忽略的人往往在於不夠重視介面的重要性，好的介面必須考慮使用者瀏覽經驗、
考慮優使性、考慮便利性，當然還要符合整個頁面的視覺，甚至是合適的動態
效果等等…這樣一來才能真正讓user一目了然，愛不釋手！進而引領user
隨心所欲的觀賞網站。所以介面設計在網站中真是扮演了舉足輕重的角色呢！

如果你想精進網頁介面設計的能力，
可以先看看以下來自hongkiat所蒐集整理的31份教學。
如果你已經具備一定的專業設計能力，不妨直接看看
40 great Web Interface Design逛逛這些優秀設計的網站。

• 原文來自：hongkiat.com

第一部份：網頁刊頭與選單導覽列（Headers and Navigation）

1. Retro Dark Blue Header Design

   How to create a dark blue header with a retro spin on it.

   

2. Wii Web Header

   How to design the Wii header found at Nintendo.com.

   

3. Colorful Design Studio Header

   How to create a colorful design studio header layout.

   

4. Metallic Header Design

   

5. Nature Theme Header

   

6. Professional Dark Header

   How to create a simple, yet effective navigation for your website.

   

7. High-Detailed Plastic Navigation Bar

   Navigation menus can vary from ordinary text links to the most complicated dropdown menus.
   This tutorial is describing detailed process of creation of “plastic” navigation bar.

   

8. Curled Corner

   Learn how to create a sleek content box that features a curled corner to
   give it a more dimensional approach.

   

9. Green Navigation

   How to make a stylish looking green navigation with a shine effect.

   

10. Blue on Black Navigation Bar

    How to combine several layer styles to create a beautiful yet simple navigation bar.

    

11. Clean White Navigation Bar

    Simplicity is the key to beautiful web layouts. Learn how to draw a
    beautiful navigation bar in Photoshop.

    

12. Modern Web Search Bar

    How to create a modern web search bar with a drop down menu.

    

13. Dark Navigation Box

    How to make a more advanced styled navigation box using some more effects and tools.

    

14. Clean Blue Navigation Box

    How to use some tools and effects to make a navigation box for a web layout which
    you can apply the same techniques to make content boxes etc.

    

15. Create a Professional Gaming Header

    How to create a professional gaming header design.

    

16. Volkswagen Inspired Navigation

    This tutorial assumes that you know your way around Photoshop enough not to
    need too much hand-holding. You should know your way around the Layers palette and
    know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation.

    

17. Design a Unique Bookmark Box

    How to create a unique, and professional-styled bookmark/promote box for
    your personal Blog, or maybe even your website.

    

第二部份：整體頁面版型設計（Full Layouts）

1. The Art Institute Photoshop Template

   Easy steps to create a sleek template.

   

2. Talkmania Arhitecture layout

   

3. Creative Studio Web Page

   

4. Clean black and green webdesign

   

5. Unique Grungy Website Layout

   How to design a cool grungy website layout.

   

6. Clean Business Layout Tutorial

   

7. Web 2.0 Blog Layout

   Several new techniques are covered in this tutorial, such as interesting use of
   the drop shadow element. We’ll also cover creating a see-through navigation bar,
   as well as creating our own unique icons for this layout!

   

8. The Ultimate Grunge Design Tutorial

   This tutorial will discuss how to create a fantastic grunge layout in Photoshop.
   It uses some techniques that are fairly common, and a couple that I’ve not seen
   discussed elsewhere before.

   

9. Real Estate Web Design

   Create a clean and contemporary website design for a real estate related website.

   

10. Agency Layout

    

11. Vibrant Modern Blog Design in Photoshop

    This tutorial will cover the process of designing a vibrant and
    colourful modern blog layout in Adobe Photoshop.

    

12. Photography portfolio

    Awesome photography portfolio design with a lot of content boxes and an attractive look.

    

13. Konvicted Art

    First photoshop tutorial and we thought it’s great.

    

14. Unique Desktop Layout

    How to make a unique desktop style layer, using common work desk objects.

    

< 前一篇		下一篇 >