30 Halaman Web yang Sangat Sederhana

Beberapa halaman paling terkenal dipenuhi dengan informasi, tetapi saya lebih suka yang sebaliknya: yang sederhana.

Jelas eksponen hebat dari grup ini adalah Google dengan halaman beranda minimalisnya sejak memulai perjalanannya, Tapi jelas itu bukan satu-satunya di Internet yang berkomitmen untuk menjaga hal-hal sederhana.

Contoh halaman web HTML sederhana

Kean richmond

Kean Richmond membuat kita melihat kesederhanaan bermain dengan sedikit elemen, tetapi ditempatkan dengan sangat baik memberikan nuansa minimalis. Logonya di kiri atas, Twitter dan ikon kontak di kanan dan di tengah, dengan tipografi yang eye-catching, apa yang dilakukannya.

Tautan ke web: Keanrich mond

Alice drougard

Alice drougard tetap sederhana juga dengan logo Anda ditempatkan di tengah, empat tab untuk berpindah di antara halaman utama situs web Anda dan serangkaian foto ditempatkan dengan tepat sehingga sekilas kami tahu apa yang Anda lakukan dan apa yang Anda lakukan.

Tautan ke web: Alice drougard

jonathan ogden

Ogden teruslah bermain dengan betapa sederhananya nama Anda sebagai logo, jaringan sosial yang terletak tepat di bawah tanpa menarik perhatian dan desainnya berfungsi sehingga kami dapat dengan cepat melewatinya. Di satu halaman itu menunjukkan semua yang penting.

Tautan ke web: jonathan ogden

Finch

Finch sudah pergi ke tempat lain untuk bermain-main dengan tipografi dan itu warna yang menunjukkan keanggunan dan kebijaksanaan dari apa yang dilakukannya. Dengan hanya beberapa elemen, dia meninggalkan semua profesionalismenya dalam pandangan. Itu juga memperjelas halaman mana yang telah ditautkan ke Anda.

Tautan ke web: Finch

Desain yang berbeda

Situs ini bermain secara berbeda. Gunakan wallpaper dengan tajuk dari mana kita dapat pergi ke halaman utama, telepon Anda dan tautan ke jejaring sosial Anda.

Tautan ke web: Desain yang berbeda

cepat

Kai menggambarkan kita dengan sosoknya sendiri dengan segitiga abstrak dan palet warna yang sesuai untuk memberikan kedekatan. Ia juga menawarkan bagian dari bio-nya dengan font berukuran lebih kecil jika kita ingin tahu lebih banyak tentangnya.

Tautan ke web: cepat

Desain Taman Vertikal

Seperti yang sebelumnya, Desain Taman Vertikal mengarah pada foto yang menunjukkan dengan cepat salah satu pekerjaan terbaiknya di bandara Oslo. Di bagian atas kami memiliki tajuk dengan «bilah navigasi» atau bilah navigasi dan bahkan kemungkinan untuk mengubah bahasa. Logo tersebut menempatkannya dalam format vertikal untuk memberikan sentuhan akhir pada halaman yang sangat sederhana.

Tautan ke web: Desain Taman Vertikal

247Grad

247Grad bermain dengan monokrom dan gambar latar belakang hampir benar-benar gelap. Font tajuk, lebih kecil dari teks dan tajuk, menggunakan huruf besar untuk membuat kontras yang bagus dalam keseluruhan desain.

Tautan ke web: 247Grad

Menikmati ini

sebuah tipografi yang bagus bisa menjadi tanda otentik dan kami tahu apa yang kami lakukan. Anda tidak perlu memberikan apa-apa lagi jika pesannya langsung. Mereka membuatnya sangat jelas: mereka suka membuat aplikasi dan situs web yang indah. Mereka meninggalkan surat untuk proyek dan studi mereka di tautan lain.

Tautan ke web: Menikmati ini

Allison hou

Allison membawa kita sebelum kursus lain dan menyertakan lebih banyak gambar dan jenis huruf yang lebih "feminin". Hal yang sama berlaku untuk gambar utama Anda dan tajuk itu. Dia memiliki kemewahan memberikan kartu yang menunjukkan trik berbelanja.

Tautan ke web: Allison hou

pixelot

Pixelot memang sedikit gila, tetapi ini juga menunjukkan kreativitas penulisnya. Menggunakan penunjuk mouse untuk membuat topeng yang mengaburkan di mana pun kita meletakkannya.

Tautan ke web: pixelot

Lionel scholtes

Jika Anda ingin buat resume Anda online dengan tidak lebih dari itu, Lionel menunjukkan langkah-langkahnya. Font yang sesuai, foto Anda di kiri atas, tautan ke jejaring sosial dan pengalaman Anda. Satu-satunya elemen dekoratif adalah dua garis horizontal dengan warna berbeda.

Tautan ke web: Lionel scholtes

Burung Camar Elegan

Kami kembali ke keanggunan minimalis dan ruang kosong yang besar itu. Di satu sisi, tajuk sangat jauh dari elemen lainnya, dan di sisi lain elemen tersebut dibentuk sedemikian rupa sehingga menciptakan harmoni visual yang hebat di antara mereka.

Tautan ke web: Burung Camar Elegan

Lebensraum

Seperti yang Anda lihat di semua contoh, ini penting tab tajuk untuk membuka halaman yang berbeda dari situs web. Tipografi sangat penting, mainkan satu untuk header dan satu lagi untuk teks dengan sans serif yang berfungsi dengan baik.

Tautan ke web: Lebensraum

titik merah muda

Kontras warna membawa kita ke jaringan yang sedikit lebih kompleks dari semua tampilan. Tidak semua elemen utama itu hilang untuk bermain dengan gradien untuk gambar latar belakang kali ini dan dua bagian yang memiliki warna utama gradien untuk gambar utama.

Tautan ke web: titik merah muda

IWC

Foto yang bagus dengan font yang dipilih dengan baik dan elemen "pahlawan" Anda dapat memberikan ke web ini. Dengan slider itu menunjukkan bagian dari pekerjaan menjadi cukup sederhana dalam konsepsinya.

Tautan ke web: IWC

Potong potong

Ilustrasi digital membawa kita ke Chop Chop with gambar yang memakan semua kehadiran visualnya. Warna biru di header menunjukkan maksudnya untuk menciptakan nilai kromatik yang selaras dengan seluruh gambar yang diproyeksikan oleh web.

Tautan ke web: Potong potong

7pinus

7Pine bermain dengan hijau untuk menjadi protagonis hebat dari home plate. Sisanya menyusunnya gambar dengan banyak warna hijau dan tajuk sederhana yang ingin tidak terlihat oleh logo.

Tautan ke web: 7pinus

Jumlah

Sum memang membawa kita ke arah lain. Mainkan dongeng hitam dan putih, ilustrasi yang sangat kreatif dan itu sejalan dengan elemen lainnya dan dua ilustrasi lainnya untuk menciptakan lanskap yang lebih dari menarik. Contoh untuk membuat situs web yang menonjol dari yang lain.

Tautan ke web: Jumlah

Kotak topi

Biru adalah warna dominan di situs web ini di mana tidak ada gambar yang hilang yang sepenuhnya diterangi oleh putih dan seperti apa permainannya. dalam 3D dari pembuat situs tersebut yang bergerak saat kita bergerak.

Tautan ke web: Kotak topi

Kara lyte

Kara pergi ke kesederhanaan dan minimalis dengan kehadirannya yang alami dan indah di foto Anda. Sisanya adalah teks yang disertakan dengan elemen utama untuk header dan tombol hamburger untuk membukanya.

Tautan ke web: Kara lyte

Pemasaran Instrinsic Studio

Es dari web paling sederhana tapi itu menunjukkan kepada kita apa itu membuat blog. Merah dan hitam adalah protagonis di situs yang sangat "blog".

Tautan ke web: Pemasaran Instrinsic Studio

Cara membuat situs web sederhana dalam HTML

Kami akan mengajari Anda buat situs web sederhana dalam HTML sehingga Anda mengetahui elemen paling dasar yang menyusunnya. Akan diperlukan host web tempat kita dapat memuat kode dan beberapa penyesuaian di CSS, tetapi ayolah, ini adalah prinsip untuk memulai perjalanan kita dalam HTML.

Telah melihat beberapa contoh web sederhana Dengan mana Anda dapat memotivasi diri Anda sendiri untuk membuat desain sendiri tanpa banyak pusing. Terkadang yang sederhana menciptakan efek yang lebih baik daripada mempersulit kita dalam hal-hal yang rumit. Anda akan melihat bahwa dalam banyak kasus sederhana bekerja dengan sangat baik. Lakukan itu.

Membuat situs web sederhana dalam HTML lebih mudah daripada yang terlihat pada awalnya. Sebuah situs terdiri dari header, body atau konten dan footer atau footer sebagai elemen utama. Kita dapat mengklasifikasikannya dengan cara ini:

• Dokumen: semua dokumen yang akan kita buat harus dikerjakan dengan a . Kami membuka dengan dan selalu ditutup dengan a
• Tubuh atau badan: bagian dokumen yang terlihat berada di antara Y
• Header: mereka dikenal dengan H1, H2, H3 ... Kita mulai dengan a dan kami menutup dengan a . Teks yang ada di dalam akan muncul sebagai tajuk dan tergantung pada penomorannya, teks tersebut akan tampil dalam ukuran yang lebih kecil atau lebih besar.
• Paragraf: paragraf diapit dalam a dan ditutup dengan
• Enlaces: contoh paling jelas adalahcreativosonline.org/»> Tautan ke Creativos Online
• Perumpamaan: kami mendefinisikannya dengan label . Contohnya adalah . Kami memanggil gambar di antara tanda kutip dan menggunakan alt untuk teks alternatif yang penting untuk SEO.
• Daftar: kami mendefinisikan daftar dengan untuk berantakan dan dengan untuk rapi. Item daftar digunakan dengan . Selalu ingat untuk menutupnya dengan bilah.

Dengan elemen ini kita akan memiliki dasar untuk membuat situs web sederhana seperti yang akan Anda lihat dalam jumlah yang baik yang akan kami ajarkan kepada Anda di bagian selanjutnya. Misalkan struktur semantik dengan elemen terpentingnya terlihat seperti ini:

• Header dengan bilah navigasinya untuk berbagai halaman situs.
• Artikel atau ruang tubuh di mana kita dapat membuat entri blog, meletakkan kurikulum atau gambar kita.
• Sidebar atau sidebar untuk memberikan informasi tambahan.
• Footer atau footer, di mana kami akan menempatkan tautan ke halaman paling penting dari situs serta ikon jejaring sosial (selalu sebagai contoh).

Dalam contoh yang akan Anda lihat di bawah ini adalah semua berdasarkan logo yang sederhana namun elegan, header tempat mereka menempatkan navigasi ke berbagai halaman situs, ruang tengah yang didominasi oleh teks atau gambar, dan footer dengan elemen yang disebutkan di paragraf sebelumnya.

Kami merekomendasikan itu jangan putus asa dan pergi ke yang sederhana. Hal utama adalah bahwa area ini dibedakan dari yang lain dalam hitungan detik. Seiring waktu kita akan dapat mempersulit diri kita sendiri dan mengerjakan lebih banyak ruang lain.

Ini adalah contoh yang jelas dari kode HTML dengan elemen terpenting:

<!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>

Dengan baris kode HTML ini yang akan kita miliki pertama kali membuat judul halaman di header dengan, dalam hal ini «Semantic HTML», kita akan menutup kedua judul tersebut dengan , tajuk dengan dan kami akan memberi jalan untuk membuka tubuh dengan .

Kami akan memiliki header pertama di H1 dengan untuk menutupnya , dan kami akan membuka daftar yang akan membantu kami membuat bilah navigasi untuk berbagai halaman situs kami. Kami menutup daftar dengan , kami tutup dan terakhir dokumen html dengan .

Akhirnya, selalu buka dokumen dengan untuk menutupnya di akhir seluruh kode dengan garis miring. Setelah dokumen dibuka, selalu digunakan referensi bahasa, yang dalam hal ini adalah bahasa Spanyol dengan "es" dan dengan a .

Penting bagi Anda untuk memperhatikan kode dan kapan pun Anda membuka fungsi, tutup dengan bilah bersangkutan.

Sedikit CSS

Kami masuk ke CSS sedikit, tetapi sambil lalu agar Anda mengerti cara menata HTML. Katakanlah CSS dan HTML berjalan seiring untuk memberikan situs web sederhana yang akan Anda temukan di bawah.

Jika di satu sisi kita memiliki penggunaan semantik HTML untuk apa itu header atau header, body atau body dengan artikel atau gambar dan footer, di CSS kita akan menggunakan fungsi «Div» untuk mengidentifikasi ke masing-masing ruang ini untuk kemudian menerapkan perubahan yang diperlukan dalam desain.

Sesuatu yang sederhana seperti:

Meskipun kami dapat menerapkan gaya dengan Div, struktur yang cocok dan sempurna akan membantu sehingga perayap web dapat "membaca" dengan sempurna tentang konten kami, jadi jika kami mengikuti struktur dasar tersebut, kami akan memiliki pekerjaan dan basis yang hebat terlebih dahulu.

Un contoh kode CSS sederhana:

h1 {
warna: putih;
text-align: pusat;
}

Kami menyebutnya H1 dan teksnya kami akan menaruhnya dengan warna putih dengan warna: putih; dan kita akan menyelaraskannya ke tengah dengan «text align». Selalu tutup dengan tanda kurung setelah membuka panggilan H1.

Foto tajuk dari Greg rakozy