Thiết kế bố cục giao diện người dùng web Killer miễn phí - Hướng dẫn cơ bản

Lĩnh vực thiết kế web đã có một hơi thở của riêng mình chỉ trong một vài năm ngắn ngủi. Có nhiều nhà thiết kế tích cực trên toàn thế giới hơn bao giờ hết, tất cả đều hợp tác trên các ý tưởng dự án sáng tạo. Và các khái niệm đằng sau nhiều xu hướng này đã được phát triển thông qua các nhà thiết kế đồ họa chuyên nghiệp.

Có thể mất vài tháng hoặc thậm chí nhiều năm trước khi bạn hiểu đầy đủ các kỹ thuật xây dựng giao diện người dùng. Bạn cần xem xét kích thước và vị trí của các yếu tố trang, cũng có thể đọc được văn bản và nhãn. Với một chút thời gian rảnh rỗi, bạn có thể đào sâu vào một cách tiếp cận tối giản để xây dựng trang web với ít hơn và giảm sự nhầm lẫn. Và thậm chí sau đó, có hàng tá các kỹ thuật thiết kế khác để xem xét là tốt.

Đối với hướng dẫn này, tôi đã ghép nối một số kỹ thuật thiết kế giao diện người dùng hiện đại với bạn có thể tải về và chơi với. Tôi hy vọng rằng điều này sẽ cung cấp một số động lực cho những người quan tâm đến sự nghiệp trong việc xây dựng thiết kế đồ họa / web. Ngay cả các nhà thiết kế web chuyên nghiệp cũng có thể tìm thấy một vài trong số các xu hướng này hữu ích cho dự án tiếp theo của bạn.

Thực hành với các mẫu đầy đủ

Khi bạn có kỹ năng thiết kế bố cục của riêng mình từ đầu, không cần phải bắt đầu với các mẫu. Người mới bắt đầu, mặt khác, có thể cảm thấy thoải mái hơn khi bắt đầu từ một thiết kế đầy đủ và làm việc với các chi tiết tốt hơn.

Có một số tải xuống miễn phí tuyệt vời của các mẫu trang web PSD đầy đủ cho danh mục đầu tư, trang chủ, blog và nhiều danh mục khác. Đây là những thiết kế hoàn hảo để bắt đầu làm quen với “chung” bố trí trang web. Mỗi trang web sẽ có các nhu cầu khác nhau cho các yếu tố trang và bạn sẽ phải xác định mục nào là quan trọng.

Dưới đây là một ví dụ PSD được gọi là "AppCivilization", được thiết kế bởi Martin Fabricius. Bố cục được đặc trưng cho một studio sáng tạo, người thiết kế các ứng dụng di động và có thể các trang web. Về phía dưới, bạn sẽ tìm thấy một bảng nhỏ các biểu tượng ứng dụng được hiển thị trong danh mục đầu tư. Bạn cũng sẽ nhận thấy toàn bộ thiết kế được chia theo chiều ngang thành một tiêu đề, trình chiếu trên cùng, nội dung chính và chân trang tối.

Nguồn gốc - Tải xuống

Thiết kế trang đích

Hãy nhìn vào một freebie khác cũng được thiết kế bởi Martin. Ví dụ tiếp theo này là một trang đích mà bạn có thể sử dụng để bán bất kỳ loại sản phẩm nào. Nói chung đây là những hàng hóa kỹ thuật số có thể được người dùng tải xuống, tức là ứng dụng, ảnh, biểu tượng, mẫu, v.v..

Nguồn gốc - Tải xuống

Nhưng phần tốt nhất trong thiết kế của anh ấy là nó rất linh hoạt cho người mới bắt đầu làm việc. Tiêu đề vẫn sử dụng một điều hướng trên cùng nhỏ với một hình ảnh lớn, nhưng đáng chú ý là các hành động người dùng mong đợi là khác nhau. Anh ấy có một lớn “Mua nó!” nút nổi bật ngay trên nếp gấp. Trên trang đích của sản phẩm, điều này sẽ thu hút nhiều sự chú ý hơn là trình chiếu jQuery.

Một kỹ thuật UI tuyệt vời khác là tính năng iPhone nhỏ hiển thị ở giữa trang. Martin bao gồm một cảnh quay xem trước iPhone, nút App Store và một danh sách nhỏ các tính năng chính. Khi khách truy cập đang tìm kiếm chi tiết sản phẩm, bạn không thể làm mọi thứ đơn giản hơn thông qua danh sách được định dạng.

Thêm mẫu:

Dưới đây là một số mẫu PSD miễn phí mà chúng tôi đã phát hành trong pass:

Mẫu PSD của trang web doanh nghiệp "BiZ"
Mẫu PSD của trang web "ThinkJuice"
Mẫu PSD trang web kinh doanh chuyên nghiệp
Mẫu PSD của danh mục đầu tư "Polo360"

Bạn cũng có thể quan tâm đến những điều sau đây:

Mẫu trang web doanh nghiệp
Hướng dẫn trang "Sắp có"

Điều hướng trang chính

Menu và nút chỉ là công cụ để xây dựng các yếu tố trang lớn hơn nhiều. Không thể phủ nhận rằng điều hướng chính của trang web của bạn có một mục đích rất quan trọng. Bạn cần nó để trang web của bạn có thể dễ dàng truy cập bằng các phương thức dự phòng có thể có cho người dùng di động.

Dưới đây là một thanh điều hướng mát mẻ với một hiệu ứng kết cấu khâu. Phong cách nổi bật có thể được đặc trưng như một hộp tối hoặc như một mẹo hướng xuống chỉ vào nội dung trang. Phong cách này đã nổi bật trong những năm qua và trông tuyệt vời trong thiết lập đúng.

Nguồn gốc - Tải xuống

Một phần mềm miễn phí tương tự khác là điều hướng tiêu đề có kết cấu này được thiết kế bởi Edi Gil. Tôi thực sự thích cách thanh điều hướng thứ hai này bao gồm cả danh sách các liên kết và một số nút trang bổ sung. Bạn sẽ muốn cung cấp các liên kết phụ cho khách truy cập nơi họ có thể tìm thấy hồ sơ của bạn trên Web.

Nguồn gốc - Tải xuống

Kiểu menu thay thế

Ngoài thanh điều hướng ngang điển hình còn có các phong cách thiết kế khác để xem xét. Liên kết dọc có thể được chia thành các tiêu đề phụ khác nhau để có nhiều chỗ hơn cho nội dung trang.

Lấy ví dụ menu miễn phí dưới đây được thiết kế bởi trang web Icojam.

Mỗi tiêu đề được xây dựng để mở rộng và thu gọn dựa trên đối tượng được chọn. Ngoài ra, thiết kế cho phép một bộ đếm số nhỏ ngồi ở bên phải của mỗi danh mục. Điều này tốt nhất sẽ điền vào như một điều hướng blog để đếm có bao nhiêu bài viết được gửi theo mỗi chủ đề.

Nguồn gốc - Tải xuống

Mẹo điều hướng / Hướng dẫn:

50+ Tập lệnh điều hướng dựa trên tab CSS sạch
Breadcrumb Navigation Các thực tiễn và ví dụ tốt nhất
Xây dựng điều hướng di động với jQuery
Mã hóa điều hướng Breadcrumb trong CSS3
Thiết kế điều hướng với LESS CSS

Các hình thức web sạch hơn

Thời đại hiện đại của Internet khác xa với một cuộc họp tĩnh. Người dùng liên tục chia sẻ thông tin và tương tác với nhau hàng ngày. Hầu hết các chia sẻ văn bản và phương tiện này được quản lý thông qua các hình thức web.

Chúng ta chỉ nên xem xét một vài ví dụ về cách bạn có thể thiết kế các nút và đầu vào dạng trông gọn gàng. Thiết kế của các yếu tố của bạn có thể đi một chặng đường dài hướng tới việc mời khách truy cập của bạn thực sự sử dụng chúng. Và điều này lần lượt xây dựng uy tín trang web của bạn và thu hút nhiều lượt xem trang hơn.

Trường đăng nhập

Có một vài ví dụ tuyệt vời về PSD mẫu đăng nhập để kiểm tra. Đăng nhập miễn phí này thông qua Nhà khoa học WP có tất cả các yếu tố tiêu chuẩn của bạn. Hai trường nhập để đăng nhập / mật khẩu, nút gửi và hộp kiểm để quản lý cookie phiên.

Mô hình thiết kế này là hoàn hảo nếu bạn có thể thực hiện các hiệu ứng thông qua jQuery. Đầu mũi tên trên cùng bên phải làm cho bạn nghĩ về thiết lập cửa sổ kiểu bật lên. Đây là một kỹ thuật tuyệt vời để tiết kiệm không gian trên trang web của bạn bằng cách giữ biểu mẫu ẩn cho đến khi người dùng nhấp vào liên kết đăng ký.

Nguồn gốc - Tải xuống

Mẫu dưới đây được tải xuống miễn phí nhờ nhà thiết kế Gil Huybrecht. Ông đã sử dụng một mô hình tương tự với một nền tảng và kết cấu giấy sần sùi. Điều tôi đặc biệt thích về thiết kế của Gil là các yếu tố "quá khổ". Đó là hạ cánh thân thiện hơn nhiều trên một hình thức đăng nhập lấp đầy toàn bộ trang. Người dùng có thể dễ dàng nhìn thấy những gì họ đang gõ và có ít lộn xộn hơn.

Nguồn gốc - Tải xuống

Nếu bạn có kinh nghiệm làm nhà phát triển lối vào sử dụng CSS3 thì việc dịch đồ họa này thành mã rất dễ dàng. Bạn thậm chí có thể thực hiện hiệu ứng phát sáng bên ngoài đã chọn và các góc được làm tròn cho nút và trường nhập.

Liên hệ

Một hình thức khác bạn sẽ tìm thấy trên thực tế mỗi trang web là một hình thức liên lạc. Điều này thường sẽ bao gồm các trường cho tên, e-mail và nội dung tin nhắn của người gửi.

Freebie dưới đây là một ví dụ tuyệt vời về việc sử dụng kết cấu và biểu tượng tùy chỉnh.

Thiết kế cũng sử dụng Văn bản giữ chỗ thay vì nhãn. Điều này có nghĩa là khi biểu mẫu tải lần đầu tiên, mỗi trường được đặt với một giá trị mặc định (ví dụ: tên của bạn). Nhưng sau đó khi bạn bắt đầu nhập, giữ chỗ sẽ xóa và nội dung của bạn được hiển thị thay thế. Tất cả các trình duyệt tuân thủ tiêu chuẩn sẽ hỗ trợ hiệu ứng này và nó có thể giúp bạn tiết kiệm một số không gian trên trang.

Nguồn gốc - Tải xuống

Một ứng dụng miễn phí tuyệt vời khác để lấy là mẫu liên hệ được gắn thẻ này được thiết kế bởi người tài Jonno Riekwel. Thiết kế này đơn giản hơn nhiều và có các nhãn tính năng trên mỗi đầu vào. Đây là một giải pháp tuyệt vời cho các doanh nghiệp lớn hơn hoặc các công ty mới thành lập, những người cần gửi tin nhắn thông qua các bộ phận khác nhau trong công ty.

Nguồn gốc - Tải xuống

Liên hệ với hình thức hướng dẫn:

Đăng nhập / Mẫu đăng ký: Ý tưởng và ví dụ đẹp
Tạo một biểu mẫu đăng nhập hiệu ứng xếp chồng
Tạo biểu mẫu liên hệ HTML5 / CSS3 dựa trên Ajax

Ruy băng và biểu ngữ

Chỉ 6 hoặc 7 năm trước, các góc tròn đã bắt đầu tăng lên trong các xu hướng thiết kế phổ biến. Bây giờ chúng tôi đã đi xa hơn với bóng đổ và ruy băng góc.

Nguồn gốc - Tải xuống

Một số yếu tố này có thể được sử dụng làm điểm nhấn thiết kế, chẳng hạn như bộ đếm bình luận hoặc ngày xuất bản cho blog. Dải băng được khâu ở trên là hoàn hảo cho danh mục đầu tư hoặc trang dự án nơi bạn muốn thu hút sự chú ý của khách truy cập. Bạn cũng có thể thử một dải ruy băng dọc tương tự trong đó thiết kế rơi từ trên xuống.

Những hiệu ứng trang nhỏ này đi một chặng đường dài để nâng cao bố cục của bạn. Du khách chú ý và sẽ yêu thích những món đồ thẩm mỹ này. Nhưng hãy xem xét rằng các dải ruy băng góc nhỏ chỉ là một phần của xu hướng thiết kế này.

Nguồn gốc - Tải xuống

Ngoài ra, các thiết kế banner đầy đủ đã trở nên cực kỳ phổ biến để xây dựng nhận diện thương hiệu. Bạn có thể sử dụng những thứ này trong logo, điều hướng, trang chủ hoặc thậm chí trên các bài đăng blog nổi bật. Ý nghĩa thực tế là vô hạn với khả năng thiết kế tốt.

Bao bọc góc

Một hiệu ứng biểu ngữ ruy băng rất cụ thể khác được thực hiện bằng cách bọc thiết kế xung quanh góc trang của bạn. Điều này tạo ảo giác cho trang của bạn là 3-D và ruy băng được quấn quanh phần trên cùng của trang web của bạn.

Thiết kế dưới đây miễn phí 100% để tải xuống và có thể được sử dụng cho các ý tưởng dự án của riêng bạn. Bạn có thể thấy làm thế nào điều này sẽ thu hút sự chú ý từ khách truy cập và tại sao xu hướng này đã trở nên điên cuồng như vậy. Hãy cẩn thận không lạm dụng các biểu ngữ. Về số lượng lớn, những thứ này có thể trở nên rất khó chịu giống như các hiệu ứng bóng / nhân bản "web 2.0" cũ hơn.

Nguồn gốc - Tải xuống

Thiết kế với các nút

Ngoài các siêu liên kết, bạn sẽ nhận được nhiều tương tác nhất từ khách truy cập bằng các nút. Các mục trang này có thể thực hiện bất cứ điều gì với sự trợ giúp của các cuộc gọi jQuery và Ajax ngoại trừ bạn cũng có thể sử dụng các nút để liên kết với nội dung tĩnh, chẳng hạn như tải xuống miễn phí chẳng hạn!

Bộ giao diện người dùng bên dưới, được thiết kế bởi Matt dân ngoại có nhiều hơn chỉ là các nút. Bộ PSD của anh ấy thật tuyệt vời cho những người mới bắt đầu muốn chọn độ dốc và kết cấu để xây dựng các hình thức tương tự. Thông thường, bạn sẽ tìm thấy các nút chất lượng cao hơn nhiều trong bộ dụng cụ UI so với các PSD đơn lẻ.

Nguồn gốc - Tải xuống

Cách tạo biến thể

Khi bạn dành thời gian thực hành các kỹ thuật này, bạn sẽ muốn tạo ra nhiều phong cách khác nhau theo thời gian. Điều này có thể dẫn đến việc chuyển đổi các nút tương tự giữa các dự án và bố cục khác nhau. Một ví dụ điển hình là các nút sữa được thiết kế bởi nhà thiết kế Robert van Klinken.

Nguồn gốc - Tải xuống

Mỗi trong số ba nút ban đầu có một kiểu gradient khác nhau, ngoại trừ trạng thái di chuột và trạng thái hoạt động trông giống nhau. Khi làm việc trong Photoshop, bạn sẽ phải khớp màu giữa các độ dốc hoặc di chuyển màu lên một lớp hiệu ứng. Với sự hiểu biết này, bạn thậm chí có thể xây dựng các nút miễn phí của riêng mình để tải xuống!

Nguồn gốc - Tải xuống

Kết cấu gỗ + giấy

Khi bạn cần thêm các thiết kế bố trí cơ bản thì bạn sẽ phải chuyển sang các phương pháp xảo quyệt hơn. Hoạ tiết luôn được chào đón nếu bạn có thể triển khai chúng đúng cách thông qua nền CSS hoặc nội dung theo chiều rộng. Và hai trong số các kết cấu phổ biến nhất tôi từng thấy là gỗ và giấy trắng.

Ý tưởng notepad thực sự đơn giản nhưng nó có thể trở thành một thiết kế thương hiệu tuyệt vời như là một phần của yếu tố giao diện người dùng hoặc được tích hợp trong toàn bộ bố cục của bạn. Nhưng giấy không phải lúc nào cũng trông đẹp nhất, và một kết cấu khác có thể giúp các kiểu hòa trộn vào nhau. Đây là nơi kết cấu chi tiết hơn của gỗ có thể phát huy tác dụng.

Nguồn gốc - Tải xuống

Hình ảnh sẽ nổi bật và trông tuyệt vời được bọc trong một lớp vỏ bên ngoài. Toàn bộ khái niệm về kết cấu là cung cấp cho trang web của bạn một cảm giác hoặc cảm xúc cụ thể. Chủ đề gỗ có thể gợi lên một cảm giác về nhà và thiên nhiên. Thậm chí còn có một bộ giao diện người dùng web bằng gỗ tuyệt vời để tải xuống bởi Jeremiah Wingett. Nếu bạn cảm thấy sáng tạo, hãy thử kết hợp một số họa tiết của riêng bạn và xem cách chúng hoạt động trong môi trường dựa trên web.

28 Kết cấu gỗ độ phân giải cao

Phần kết luận

Các nhà thiết kế web giỏi nhất là những người thực hành hàng ngày và không bao giờ để thất bại của họ ngăn cản các mục tiêu cuối cùng của họ. Bạn phải phản ứng nhanh và phục hồi nhanh chóng từ cả những nỗ lực thành công và thất bại. Các mẹo và tiện ích trong hướng dẫn này phải là điểm khởi đầu tốt để bắt đầu học cách xây dựng các khái niệm trang khác nhau cho một dự án web. Và chúng tôi muốn đọc suy nghĩ của bạn về vấn đề này trong khu vực thảo luận.