30 trang web cực kỳ đơn giản

Một số trang nổi tiếng nhất đang rất tải thông tin, nhưng tôi thích điều ngược lại: những trang đơn giản.

Rõ ràng là doanh nghiệp lớn của nhóm này là Google với trang chủ tối giản kể từ khi bắt đầu hành trình, nhưng rõ ràng đây không phải là trang duy nhất trên Internet cam kết giữ mọi thứ đơn giản.

Các ví dụ về trang web HTML đơn giản

Kean richmond

Kean Richmond khiến chúng ta thấy được sự đơn giản của cách chơi với ít yếu tố, nhưng rất phù hợp để mang lại cảm giác tuyệt vời cho chủ nghĩa tối giản. Logo của anh ấy ở phía trên bên trái, Twitter và các biểu tượng liên hệ ở bên phải và ở giữa, với kiểu chữ bắt mắt, những gì anh ấy làm.

Liên kết đến web: Keanrich mond

Alice ngủ nướng

Alice ngủ nướng cũng giữ cho nó đơn giản với logo của bạn được đặt ở trung tâm, bốn tab để di chuyển giữa các trang chính của trang web của bạn và một loạt các bức ảnh được đặt đúng vị trí để trong nháy mắt, chúng tôi biết bạn làm gì và làm gì.

Liên kết đến web: Alice ngủ nướng

jonathan ogden

Ogden tiếp tục chơi với tên của bạn đơn giản như một biểu trưng, các mạng xã hội nằm ngay bên dưới không thu hút sự chú ý và thiết kế của chúng hoạt động để chúng ta nhanh chóng lướt qua. Trên một trang, nó hiển thị mọi thứ quan trọng.

Liên kết đến web: jonathan ogden

Chim hoa mai

Finch đã đến những nơi khác để chơi với kiểu chữ và những màu sắc biểu thị sự sang trọng và thông thái về những gì nó làm. Chỉ với một vài yếu tố, anh ấy để lại tất cả sự chuyên nghiệp của mình. Nó cũng làm rõ những trang nào đã liên kết với bạn.

Liên kết đến web: Chim hoa mai

Một thiết kế khác

Trang web này chơi khác. Sử dụng hình nền có tiêu đề mà từ đó chúng tôi có thể truy cập các trang chính, điện thoại của bạn và các liên kết đến mạng xã hội của bạn.

Liên kết đến web: Một thiết kế khác

nhanh chóng

Kai minh họa cho chúng ta bằng hình ảnh của chính anh ấy với một hình tam giác trừu tượng và một bảng màu phù hợp để tạo sự gần gũi. Anh ấy cũng cung cấp một phần tiểu sử của mình với một phông chữ ở kích thước nhỏ hơn trong trường hợp chúng tôi muốn biết thêm về anh ấy.

Liên kết đến web: nhanh chóng

Thiết kế vườn thẳng đứng

Giống như phần trước, Vertical Garden Design hướng tới một bức ảnh hiển thị nhanh một trong những công việc tốt nhất của anh ấy tại sân bay Oslo. Ở trên cùng, chúng ta có tiêu đề với «thanh điều hướng» hoặc thanh điều hướng và thậm chí có khả năng thay đổi ngôn ngữ. Logo đặt nó ở định dạng dọc để tạo nét cuối cùng cho một trang rất đơn giản.

Liên kết đến web: Thiết kế vườn thẳng đứng

247Grad

247Grad chơi với đơn sắc và hình nền gần như tối hoàn toàn. Phông chữ tiêu đề, nhỏ hơn văn bản và tiêu đề, được viết hoa để tạo ra sự tương phản lớn trong thiết kế tổng thể.

Liên kết đến web: 247Grad

Tận hưởng điêu nay

một kiểu chữ tuyệt vời có thể là dấu hiệu của sự chân thực và rằng chúng tôi biết những gì chúng tôi làm. Bạn không phải cung cấp thêm bất cứ điều gì nếu tin nhắn trực tiếp. Họ nói rõ: họ thích tạo các ứng dụng và trang web đẹp. Họ để lại thư cho các dự án và nghiên cứu của họ trong một liên kết khác.

Liên kết đến web: Tận hưởng điêu nay

Allison hou

Allison đưa chúng tôi đi trước các khóa học khác và bao gồm nhiều hình ảnh hơn và kiểu chữ "nữ tính" hơn. Tương tự với hình ảnh chính của bạn và tiêu đề đó. Anh ta có sự xa xỉ khi xuất trình một tấm thẻ cho thấy những mánh khóe mua sắm.

Liên kết đến web: Allison hou

pixelot

Pixelot hơi điên rồ nhưng nó cũng nói lên sự sáng tạo của tác giả. Sử dụng con trỏ chuột để tạo mặt nạ làm mờ đi bất cứ nơi nào chúng ta đặt nó.

Liên kết đến web: pixelot

Lionel học giả

Nếu bạn muốn làm cho sơ yếu lý lịch của bạn trực tuyến mà không có gì hơn thế, Lionel chỉ cho bạn các bước. Phông chữ phù hợp, ảnh của bạn ở phía trên bên trái, liên kết đến mạng xã hội và trải nghiệm của bạn. Yếu tố trang trí duy nhất là hai đường ngang có màu sắc khác nhau.

Liên kết đến web: Lionel học giả

Hải âu thanh lịch

Chúng tôi trở lại đến sự sang trọng của chủ nghĩa tối giản và những khoảng trống lớn đó. Một mặt, tiêu đề nằm rất xa so với các phần tử còn lại, mặt khác các phần tử đó được định hình theo cách mà chúng tạo ra một sự hài hòa hình ảnh tuyệt vời giữa chúng.

Liên kết đến web: Hải âu thanh lịch

Lebensraum

Như bạn có thể thấy trong tất cả các ví dụ, điều quan trọng là các tab tiêu đề để chuyển đến các trang khác nhau từ trang web. Kiểu chữ có tầm quan trọng lớn, hãy sử dụng một kiểu chữ cho tiêu đề và một kiểu chữ khác cho văn bản với sans serif thực hiện rất tốt.

Liên kết đến web: Lebensraum

điểm hồng

Sự tương phản của màu sắc dẫn chúng ta đến một trang web phức tạp hơn một chút về tất cả các chế độ xem. Không phải thiếu tất cả các yếu tố chính đó để chơi với gradient cho hình nền lần này và hai phần có màu chính của gradient cho hình ảnh chính.

Liên kết đến web: điểm hồng

IWC

Một bức ảnh tuyệt vời với một kiểu chữ được chọn tốt và một yếu tố "anh hùng" bạn có thể cung cấp cho trang web này. Với một thanh trượt, nó cho thấy một phần công việc khá đơn giản trong quan niệm của nó.

Liên kết đến web: IWC

Nhanh lên nào

Hình minh họa kỹ thuật số dẫn chúng ta đến Chop Chop với hình ảnh thu hút tất cả sự hiện diện trực quan của nó. Màu xanh lam trong tiêu đề giúp nó tạo ra các giá trị màu phù hợp với toàn bộ hình ảnh được chiếu trên web.

Liên kết đến web: Nhanh lên nào

7Thông

7Pine chơi với màu xanh lá cây để trở thành nhân vật chính tuyệt vời của tấm nhà. Phần còn lại soạn nó một hình ảnh có nhiều màu xanh lá cây và một tiêu đề đơn giản muốn không được chú ý bởi biểu trưng.

Liên kết đến web: 7Thông

Tổng

Sum không đưa chúng ta theo những hướng khác. Chơi với màu đen và trắng huyền thoại, một minh họa rất sáng tạo và điều đó đi cùng với phần còn lại của các yếu tố và hai hình minh họa khác để tạo ra một cảnh quan thú vị hơn. Một ví dụ để tạo một trang web nổi bật so với phần còn lại.

Liên kết đến web: Tổng

Hộp đựng mũ

Màu xanh lam là màu chủ đạo trên trang web này, trong đó không có hình ảnh nào bị thiếu được chiếu sáng hoàn toàn bằng màu trắng và trò chơi sẽ như thế nào trong 3D của trình tạo trang web đó chuyển động khi chúng ta di chuyển.

Liên kết đến web: Hộp đựng mũ

Kara lyte

Kara đi đến sự đơn giản và tối giản với sự hiện diện tự nhiên và đẹp đẽ của nó trong bức ảnh của bạn. Phần còn lại là một văn bản đi kèm với các yếu tố chính cho tiêu đề và một nút bánh hamburger để mở nó.

Liên kết đến web: Kara lyte

Tiếp thị phòng thu nội tại

Es của web đơn giản nhất nhưng điều đó cho chúng ta thấy tạo blog là như thế nào. Đỏ và đen là những nhân vật chính trong một trang blog rất "chất".

Liên kết đến web: Tiếp thị phòng thu nội tại

Cách tạo một trang web đơn giản trong HTML

Chúng tôi sẽ dạy bạn tạo một trang web đơn giản bằng HTML để bạn biết những yếu tố cơ bản nhất tạo nên nó. Sẽ cần có một máy chủ web để chúng ta có thể tải mã và một số chỉnh sửa trong CSS, nhưng thôi nào, đây là những nguyên tắc để bắt đầu hành trình của chúng ta trong HTML.

Đã thấy một số ví dụ web đơn giản Nhờ đó, bạn có thể đủ động lực để tạo ra những thiết kế của riêng mình mà không phải suy nghĩ nhiều. Đôi khi cái đơn giản tạo ra hiệu quả tốt hơn là làm phức tạp chúng ta vào những thứ phức tạp. Bạn sẽ thấy rằng trong hầu hết các trường hợp, những thứ đơn giản hoạt động rất tốt. Cứ liều thử đi.

Tạo một trang web đơn giản bằng HTML dễ dàng hơn so với lúc đầu. Một trang web bao gồm một tiêu đề, nội dung hoặc nội dung và chân trang hoặc chân trang làm thành phần chính. Chúng ta có thể phân loại chúng theo cách này:

• Tài liệu: tất cả các tài liệu mà chúng tôi sẽ tạo phải được thực hiện với . Chúng tôi mở bằng một và luôn kết thúc bằng một
• Cơ thể hoặc cơ thể: phần hiển thị của tài liệu nằm giữa Y
• Tiêu đề: chúng được biết đến bởi H1, H2, H3 ... Chúng ta bắt đầu với và chúng tôi kết thúc bằng một . Văn bản bên trong sẽ xuất hiện dưới dạng tiêu đề và tùy thuộc vào cách đánh số của nó, nó sẽ hiển thị ở kích thước nhỏ hơn hoặc lớn hơn.
• Đoạn văn: đoạn văn được bao trong một và kết thúc với
• Liên kết: ví dụ rõ ràng nhất làcreativosonline.org/»> Liên kết tới Creativos Online
• Hình ảnh: chúng tôi xác định chúng bằng nhãn . Một ví dụ sẽ là . Chúng tôi gọi hình ảnh giữa dấu ngoặc kép và sử dụng một alt cho văn bản thay thế, điều cần thiết cho SEO.
• Danh sách: chúng tôi xác định danh sách với cho một mớ hỗn độn và với cho gọn gàng. Danh sách các mục được sử dụng với . Luôn nhớ đóng chúng bằng thanh.

Với những yếu tố này chúng ta sẽ có cơ sở để tạo một trang web đơn giản như bạn sẽ thấy ở số lượng lớn chúng mà chúng tôi sẽ dạy bạn trong phần tiếp theo. Giả sử rằng cấu trúc ngữ nghĩa với các yếu tố quan trọng nhất của nó trông như thế này:

• Tiêu đề với thanh điều hướng của nó cho các trang khác nhau của trang web.
• Không gian bài viết hoặc nội dung trong đó chúng tôi có thể tạo một mục blog, đưa chương trình giảng dạy của chúng tôi hoặc một hình ảnh.
• Thanh bên hoặc thanh bên để đưa thông tin bổ sung.
• Chân trang hoặc chân, nơi chúng tôi sẽ đặt các liên kết đến các trang quan trọng nhất của trang web cũng như các biểu tượng của mạng xã hội (luôn làm ví dụ).

Trong các ví dụ mà bạn sẽ thấy bên dưới là tất cả đều dựa trên một logo đơn giản nhưng thanh lịch, tiêu đề nơi họ đặt điều hướng đến các trang khác nhau của trang web, không gian trung tâm được chi phối bởi văn bản hoặc hình ảnh và chân trang với các yếu tố được đề cập trong đoạn trước.

Chúng tôi khuyên bạn nên đừng phá vỡ đầu của bạn và đi đến đơn giản. Điều chính là những khu vực này được phân biệt với phần còn lại trong vài giây trực quan. Cùng với thời gian, chúng ta sẽ có thể tự làm phức tạp và làm việc thêm nhiều không gian khác.

Đây là một ví dụ rõ ràng về mã HTML với các yếu tố quan trọng nhất:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

Với những dòng mã HTML này, chúng ta sẽ có lần đầu tiên tạo tiêu đề trang trong tiêu đề với, trong trường hợp này là «HTML ngữ nghĩa», chúng tôi sẽ đóng cả hai tiêu đề bằng , tiêu đề với và chúng tôi sẽ nhường đường để mở cơ thể với .

Chúng tôi sẽ có một tiêu đề đầu tiên trong H1 với đóng nó với , và chúng tôi sẽ đi đến một danh sách có thể giúp chúng tôi tạo thanh điều hướng cho các trang khác nhau trên trang web của chúng tôi. Chúng tôi kết thúc danh sách với , chúng tôi đóng cửa và cuối cùng là tài liệu html với .

Cuối cùng, luôn mở tài liệu bằng để đóng nó ở cuối toàn bộ mã bằng dấu gạch chéo. Sau khi mở tài liệu, tham chiếu đến ngôn ngữ luôn được sử dụng, trong trường hợp này là tiếng Tây Ban Nha với "es" và với .

Điều quan trọng là bạn phải xem kỹ mã và bất cứ khi nào bạn mở một chức năng đóng nó bằng thanh tương ứng.

Một chút CSS

Chúng tôi đi sâu vào CSS một chút, nhưng để bạn hiểu cách tạo kiểu HTML. Giả sử CSS và HTML song hành với nhau để tạo ra những trang web đơn giản mà bạn sẽ tìm thấy bên dưới.

Nếu một mặt, chúng ta sử dụng HTML về mặt ngữ nghĩa cho phần đầu hoặc phần đầu là gì, phần nội dung hoặc phần nội dung với bài viết hoặc hình ảnh và phần chân trang, trong CSS, chúng tôi sẽ sử dụng hàm «Div» để xác định cho từng không gian này để sau này áp dụng những thay đổi cần thiết trong thiết kế.

Một cái gì đó đơn giản như:

Mặc dù chúng ta có thể áp dụng các kiểu với Div, một cấu trúc phù hợp và hoàn hảo sẽ giúp để các trình thu thập thông tin web có thể "đọc" hoàn hảo nội dung của chúng tôi nói về cái gì, vì vậy nếu chúng tôi tuân theo cấu trúc cơ bản đó, chúng tôi sẽ có một công việc và cơ sở tuyệt vời trước tiên.

Un ví dụ mã CSS đơn giản:

h1 {
màu sắc: trắng;
text-align: Trung tâm;
}

Chúng tôi gọi H1 và văn bản chúng tôi sẽ đặt nó trong màu trắng với màu: trắng; và chúng tôi sẽ căn chỉnh nó vào giữa bằng «text align». Luôn đóng bằng dấu ngoặc vuông sau khi mở cuộc gọi H1.

Ảnh tiêu đề của Greg rakozy