Minimalisme dalam contoh reka bentuk web. Gaya minimalis dalam reka bentuk web moden dan prinsip asasnya. Kekurangan tinsel dan kekacauan

Dengan perkembangan teknologi Internet dan reka bentuk web, dalam beberapa tahun kebelakangan ini terdapat kecenderungan tertentu (bukan di mana-mana dan bukan untuk semua orang) ke arah memudahkan halaman. Permudahkan kedua-dua reka bentuk dan kod. Dan ini adalah idea utama minimalisme dalam reka bentuk web, "kurang lebih."

Bahagian paling penting dalam halaman ialah kandungan, jadi minimalisme menghapuskan semua yang tidak perlu untuk menyerlahkan kandungan. Pada masa yang sama, kandungan pula menekankan reka bentuk. Mencipta tapak sedemikian pada pandangan pertama kelihatan lebih mudah daripada, sebagai contoh, tapak berwarna-warni dengan tajuk yang terang, tetapi ini tidak begitu. Di sini adalah sangat penting untuk mengekalkan kemudahan penggunaan dengan kandungan halaman yang minimum.

Namun begitu, sangat jarang laman web dalam gaya minimalis kelihatan hodoh atau tidak bergaya. Oleh itu, minimalism, dengan ringan dan keanggunannya, paling kerap mendapat aplikasi dalam beberapa tapak web korporat, serta blog, portfolio dan rangkaian sosial.

Hari ini kita akan melihat contoh halaman untuk setiap bahagian ini (pada akhir artikel terdapat ulasan tapak Rusia dalam gaya minimalis):

Blog

Di sini saya memutuskan untuk menipu, dan pada masa yang sama menggembirakan anda - Saya akan menyiarkan tema WordPress percuma yang paling menarik dalam gaya minimalis, jadi anda bukan sahaja boleh melihat, tetapi juga memuat turun.

Reka bentuk yang agak standard, latar belakang putih dan fon kecil.

Terdapat lebih banyak kreativiti di sini - kami melihat logo yang menarik dan bermain dengan fon.

Ulap

Tetapi di sini fonnya besar - dan sekali lagi, tiada yang berlebihan.

Doc

Terdapat banyak ruang putih pada tema ini dan terdapat juga aksen merah.

memimpin

Reka bentuk yang lebih "feminin" dan lebih lembut, pengepalanya juga berwarna merah jambu.

Tema ini menggabungkan foto dan teks sambil mengekalkan banyak udara.

Tetapi di sini latar belakang yang lebih menarik digunakan.

Tema terakhir mempunyai latar belakang hitam dan aksen kecil. Mereka memberikan imej tertentu ke halaman, sementara pada masa yang sama perhatian utama tertumpu pada kandungan.

Portfolio

Seperti yang telah saya tulis, minimalisme sesuai untuk mempersembahkan karya anda - tiada apa yang boleh mengalih perhatian daripada mereka!

Ini adalah reka bentuk yang ringkas, dengan logo, foto utama dan inskripsi selamat datang diserlahkan pada halaman.

Kelabu dengan reka bentuk percikan merah dan biru, aksen, sekali lagi, kelihatan seperti foto dan logo.

Pencipta halaman ini telah menyerlahkan bidang aktiviti mereka.

Reka bentuk krim lembut. Penekanan sekali lagi pada foto.

Hampir tiada gambar, tetapi logo merah menonjol - tempat paling terang pada halaman.

Secara umum, segala-galanya di sini adalah sangat, sangat kecil, benar-benar, tiada yang berlebihan.

Gabungan glamor hitam dan merah jambu, serta gambar besar, menetapkan watak tapak.

Pada halaman ini, syarikat dengan serta-merta memaparkan kerja daripada portfolionya, membentangkan tahap kerjanya.

Laman web korporat

Minimalis dalam reka bentuk laman web korporat mereka dipilih oleh syarikat yang ingin menekankan prinsip operasi: "Perniagaan diutamakan."

Syarikat itu dengan jelas memutuskan untuk memberi tumpuan kepada tiga item menu.

Grafik bergaya di bawah memaparkan profil syarikat.

Laman web ini menyerlahkan slogan dan perkhidmatan syarikat.

Satu lagi contoh tapak di mana bahagian tengah gubahan ialah foto.

Pada halaman ini, hanya menu utama laman web syarikat dipaparkan daripada teks.

Logo, harga dan cerita pendek tentang produk - tiada apa-apa lagi di halaman.

AYAH

epal

Klasik genre) Menu, beberapa perkataan tentang produk dan produk itu sendiri.

SOFA

Sekali lagi, semua perhatian tertumpu pada produk syarikat.

media sosial

Contoh klasik dan trendsetter ialah Facebook.

Linkedin juga memilih reka bentuk yang minimum, walaupun terdapat sepanduk pada halaman.

Salah satu rangkaian sosial baharu untuk pereka, semuanya ringkas dan kemas. Walaupun, saya percaya, profil rangkaian masih mewajibkan pencipta untuk menghiasinya sedikit.

Perkhidmatan penanda halaman yang popular cuba untuk tidak mengalih perhatian pengguna daripada matlamat utama - menambah pautan ke penanda halaman

Google sentiasa menjadikan segala-galanya kelihatan mudah.

Sampel reka bentuk web minimalis kelihatan bagus. Berhubung dengan reka bentuk web, kelebihan utama minimalisme ialah pelbagai pilihan gaya, penyelesaian warna dan skala yang boleh diterima, tetapi matlamatnya sentiasa sama. Minimalisme sebagai gaya reka bentuk laman web telah mendapat populariti kerana kelebihannya yang jelas. Tapak web minimalis dimuatkan dengan lebih pantas, menggunakan sumber pelayan yang lebih sedikit dan secara amnya lebih mudah untuk dimodenkan daripada reka bentuk grafik yang besar. Pengunjung juga melihat di dalamnya tanda-tanda profesionalisme dan keupayaan untuk berpegang teguh.

Minimalisme menekankan penolakan segala-galanya yang berlebihan dalam reka bentuk, mengekalkan hanya elemen utama. Kebangkitan minimalisme membawa kepada kemunculan istilah baru, pengkhususan sempit, dan dicerminkan dalam seni - dalam muzik dan kesusasteraan. Walau bagaimanapun, bagi pereka laman web, menguasai teknik mencipta sumber minimalis bukanlah mudah, dan ramai yang takut dengan tugas ini. Contoh reka bentuk web yang minimalis mengandungi secara eksklusif kandungan yang diperlukan untuk mencapai matlamat yang dimaksudkan, dibezakan oleh banyak ruang, sejumlah kecil ilustrasi atau kehadiran hanya satu imej besar, dan ringkasan teks. Laman web minimalis tidak bersepah dengan butiran, mengkaji dan mengasimilasikan maklumat adalah mudah untuk pembaca mereka, ia tidak menjengkelkan, halaman mereka mudah dilayari, dan sedikit orang akan tersesat di sana. Lebih kerap daripada tidak, laman web minimalis kelihatan cantik dan telah mendapat banyak kasih sayang di kalangan pereka.

Berikut adalah 15 contoh reka bentuk web minimalis, walaupun ia mengandungi beberapa "kelebihan seni bina", tetapi menarik perhatian dengan penampilannya. Kami harap anda menikmatinya.










Antara trend reka bentuk web lain, minimalisme menduduki tempat yang istimewa. Dalam keluasan Runet, trend ini tidak begitu popular, dan sering digunakan tidak sepenuhnya dengan betul. Dan ia memalukan, kerana reka bentuk minimalis boleh kelihatan sangat menakjubkan!

Orang ramai bosan dengan aliran besar maklumat, warna terang, gambar dan kandungan lain yang berselerak dengan semua ruang kosong. Minimalisme membantu anda menghilangkan tinsel dan memberi tumpuan kepada perkara utama.

Kami berharap artikel ini dapat menjelaskan isu ini.

Akar Minimalisme dalam Reka Bentuk Web

Kebanyakan aliran reka bentuk yang paling popular hari ini (termasuk ilustrasi rata, imej latar belakang yang besar dan navigasi tersembunyi) berkaitan secara langsung atau tidak langsung dengan minimalism, pergerakan reka bentuk web yang bermula pada awal 2000-an tetapi meminjam falsafahnya daripada pergerakan terdahulu dalam seni halus. Minimalisme, apabila digunakan dengan betul, boleh membantu anda mengarahkan reka bentuk anda ke arah memudahkan tugas pengguna.

Malangnya, sesetengah pereka bentuk menyalahgunakan minimalisme dengan memfokuskan hanya pada bahagian visual sesuatu. Mereka memotong atau menyembunyikan elemen penting dalam mengejar reka bentuk minimalis untuk faedah mereka sendiri, tanpa memikirkan pengalaman pengguna. Mereka tidak memahami intipati asas minimalisme, dan bukannya menjadikan kebolehgunaan lebih mudah, mereka merumitkannya.

Untuk lebih memahami dan menggunakan prinsip minimalisme, kita mesti memahami asal-usul dan ciri-ciri utamanya. Kami akan meneroka topik ini dalam siri dua bahagian. Dalam artikel pertama ini, kami akan menentukan minimalisme dan berkenalan dengan sejarahnya. Dalam artikel kedua, kami akan menganalisis ciri reka bentuk minimalis dan kesannya terhadap kebolehgunaan.

Antara muka minimalis - apakah itu?

Apabila digunakan dengan betul, reka bentuk web minimalis harus mempersembahkan kandungan dengan cara yang ringkas dan langsung, tanpa merumitkan apa-apa atau mengalih perhatian pengguna daripada matlamat utama. Strategi ini selalunya melibatkan pengalihan keluar kandungan atau ciri yang tidak menyokong matlamat teras antara muka.

Terdapat banyak perdebatan tentang apa sebenarnya yang layak sebagai reka bentuk web minimalis. Tetapi terdapat beberapa ciri biasa yang dikongsi oleh kebanyakan pereka. Ini termasuk tekstur rata, palet warna terhad dan penggunaan ruang negatif. Ciri-ciri khusus ini dan lain-lain dibincangkan secara terperinci dalam artikel seterusnya dalam siri ini.

Tapak portfolio Pereka Brian Danaher ialah contoh tipikal yang dipanggil oleh ramai pereka sebagai tapak minimalis. Apabila dilihat dalam mod skrin penuh pada MacBook Pro 15-inci, halaman Utama hampir keseluruhannya ruang putih. Tapak ini direka bentuk dalam warna kelabu, dengan aksen tebal menggunakan elemen interaktif.

Tapak ini mengandungi sangat sedikit elemen yang mengalihkan perhatian daripada kandungan utama. Minimalisme berfungsi dengan baik untuk tapak portfolio yang mempunyai matlamat yang agak mudah, jumlah kandungan yang agak rendah dan maklumat yang hampir sama pada kebanyakan halaman. Menerapkan minimalism secara berkesan pada tapak web yang lebih kompleks boleh menjadi mencabar.

Laluan minimalisme ke populariti

1960-an

Sebelum minimalisme menjadi trend dalam reka bentuk web, ia adalah pergerakan dalam seni visual semasa era pasca Perang Dunia II. Ia timbul sebagai tindak balas kepada warna huru-hara, pergerakan, dan sering dijumpai dalam karya ekspresionis abstrak (seperti lukisan Jackson Pollock).

Pada tahun 1960-an, minimalism menjadi popular dalam pelbagai bidang, terutamanya seni halus dan seni bina. Dalam seni halus, minimalisme dicirikan oleh palet monokromatik, unsur geometri, konsistensi, dan kesederhanaan bahan industri.

Minimalis patut diberi perhatian termasuk pereka grafik Josef Müller-Brockmann, artis Ellsworth Kelly, dan pereka industri Dieter Rams. Perhatikan garisan yang bersih, kesederhanaan dan penggunaan warna yang jimat dalam setiap contoh di bawah. Walaupun pelbagai kegunaan, gaya reka bentuk tertentu sangat ketara.

Moto minimalisme pada masa ini menjadi: "Less is more." Moto ini kemudiannya akan menjadi mantra tidak rasmi minimalisme dalam reka bentuk web.

1980-2000

Pada akhir abad kedua puluh, minimalism mula muncul sebagai arah yang berasingan dalam bidang interaksi manusia-komputer.

Angka-angka pada masa ini menyokong singkatan dan penghapusan maklumat yang tidak diperlukan daripada antara muka.

2000an

Bermula pada pertengahan 2000-an, gema minimalisme sebagai pergerakan artistik mula muncul dalam antara muka web: lebih banyak ruang negatif, kurang kandungan dan palet warna terhad. Google sering dipanggil perintis antara muka web minimalis. Google telah mengutamakan kesederhanaan dan ketelitian dalam antara mukanya sejak pelancaran beta pada 1990-an.

Sedikit yang berubah dalam 15 tahun. Pengguna hanya boleh melihat tiga pilihan navigasi: Untuk mengakses selebihnya ciri Google, mereka perlu membuka menu.

Perlahan tetapi pasti, minimalisme telah menemui asasnya. Ia mula digunakan oleh pereka web, pereka bentuk, artis, jurugambar, arkitek dan pembangun.

2010-2013

Kemunculan konsep reka bentuk web responsif (RWD) pada tahun 2010 membawa satu penghargaan baharu terhadap pendekatan minimalis. Untuk menggunakan teknik RWD dengan berkesan, organisasi perlu mengutamakan kandungan. Pada media mudah alih, elemen pihak ketiga boleh menjadi masalah sebenar - ia tidak boleh diabaikan dengan cara yang sama seperti pada komputer meja.

Secara beransur-ansur, pilihan pengguna dan reka bentuk mula condong ke arah kesederhanaan antara muka web. Peralihan ini diserlahkan oleh peningkatan besar oleh dua gergasi industri teknologi: reka bentuk moden Microsoft pada tahun 2011, dan keluaran Apple iOS7 pada tahun 2013.

Keluaran Windows 8 pada tahun 2011 ialah reka bentuk semula utama pertama sistem pengendalian dalam beberapa dekad. Falsafah reka bentuk baharu dilaksanakan sepenuhnya dalam semangat minimalisme.

Pada tahun 2013, Apple memperkenalkan sistem pengendalian yang dikemas kini secara radikal dengan gaya yang lebih rata dan lebih minimalis - iOS7. Keputusan Apple untuk bergerak ke arah reka bentuk yang lebih minimum dan rata terutamanya menyerlahkan populariti trend, memandangkan ia pada asasnya bertentangan dengan gaya reka bentuk sejarah jenama.

2014-2015

Prinsip reka bentuk minimalis kini muncul di tempat baharu dan tidak dijangka: tapak e-dagang, penerbitan dalam talian dan juga tapak pendidikan.

Banyak tapak yang menawarkan pelbagai perkhidmatan juga memilih minimalism. Ini membolehkan anda memberikan pelanggan apa yang mereka perlukan tanpa mengganggu mereka dengan perkara kecil yang lain.

Hari ini, minimalisme bersilang dengan trend reka bentuk web lain seperti reka bentuk rata, reka bentuk web responsif dan reka bentuk bersih. Sumbangan minimalisme kepada trend ini akan dibincangkan secara terperinci dalam artikel minggu depan.

Perbahasan kebolehgunaan: adakah minimalisme bagus untuk pengguna?

Minimalisme ialah strategi yang mempengaruhi kandungan dan maklumat serta penyelesaian seni bina dengan ketara. Akibatnya, minimalisme mempunyai kesan yang pasti terhadap kebolehgunaan antara muka. Tidak menghairankan bahawa kebolehgunaan tapak web minimalis telah menjadi topik perbincangan di kalangan profesional web.

Penyokong berpendapat bahawa minimalisme mengurangkan beban maklumat: lebih banyak ciri dan kandungan yang boleh anda potong, lebih baik. Minimalisme, diterapkan dengan bijak, boleh mencipta pengalaman emosi yang positif untuk pengguna. Orang ramai cenderung untuk bertindak balas dengan lebih baik kepada antara muka yang menyenangkan dari segi estetika.

Tetapi apabila pereka bentuk mematuhi ideologi minimalis yang terlalu tegar, mereka berisiko untuk mencapai kepadatan maklumat yang rendah secara membazir. Semua yang anda perlukan sukar untuk dicari, dan navigasi tidak dapat difahami. Minimalisme secara sederhana boleh menjadi berkesan selagi anda tidak melupakan matlamat utama - membantu pengguna menyelesaikan sesuatu.

Beberapa petua untuk mencipta antara muka minimalis

Pastikan strategi reka bentuk minimalis sesuai untuk tapak web anda, jenama anda. Jika anda pasti reka bentuk minimalis sesuai untuk anda, ikuti beberapa petua:

*Gunakan moto: “Less is more” dalam projek anda. Jangan hanya menambah unsur yang tidak perlu. Peraturan ini boleh berlaku untuk kandungan dan reka bentuk, serta pengalaman pengguna.

*Pertimbangkan untuk mengurangkan sebarang item yang tidak menyampaikan maklumat penting.

*Pelajari minimalisme daripada Carroll: jangan hanya memotong elemen - fikirkan tentang keperluan pengguna anda, cuba laksanakan tugasan dengan sesingkat dan ringkas yang mungkin.

*Ketahui bahawa reka bentuk visual minimalis sahaja, tanpa pertimbangan yang bermakna terhadap objektif pengguna, tidak akan membawa kepada kejayaan. Isu kebolehgunaan Windows 8 boleh dijadikan sebagai contoh.

Perbincangan mendalam tentang ciri-ciri minimalism akan dibincangkan dalam artikel seterusnya dalam seminggu. Ikuti berita!

(termasuk reka bentuk rata, penggunaan imej latar belakang yang besar, dan navigasi global yang tersembunyi) secara langsung atau tidak langsung ditentukan oleh minimalism, satu trend dalam reka bentuk web sejak awal 2000-an. Reka bentuk laman web minimalis sering dipersembahkan sebagai percubaan untuk menjadikan kandungan bahagian yang lebih penting dalam reka bentuk daripada, sebagai contoh, warna. Malah, ia membantu memudahkan untuk mencapai matlamat pengguna apabila bekerja dengan tapak.

Malangnya, sesetengah pereka tidak mentafsir dengan tepat intipati gaya minimalis. Dalam kerja mereka, mereka tidak mengambil kira atau menyingkirkan elemen penting gaya ini, memudahkan kerja mereka sambil merumitkan interaksi pengguna dengan tapak.

Untuk lebih memahami dan menggunakan prinsip minimalisme, kita mesti memahami asal usul gaya ini dan ciri utamanya.

Apa dah jadi?

Dalam erti kata yang paling mudah, matlamat minimalisme dalam reka bentuk web adalah untuk mempersembahkan kandungan dalam cara yang paling mudah dan paling "terus" untuk pengguna. Gaya ini selalunya melibatkan mengecualikan sekeping kandungan atau ciri yang tidak memenuhi matlamat asas antara muka.

Walaupun masih terdapat pendapat yang berbeza tentang apa sebenarnya yang melayakkan reka bentuk web sebagai gaya minimalis. Terdapat beberapa ciri yang mentakrifkan gaya tapak web dengan tepat sebagai minimalis. Ini termasuk tekstur rata, corak warna terhad dan penggunaan ruang putih.

Ciri-ciri minimalisme

Corak dan tekstur rata. Digunakan dalam 96% tapak yang reka bentuk webnya boleh diklasifikasikan sebagai minimalism. Sejak beberapa tahun kebelakangan ini terdapat perubahan besar dalam reka bentuk dari skeuomorphism dan ke arah representasi digital semata-mata tanpa metafora fizikal. Antara muka rata tidak menggunakan sorotan, bayang-bayang atau kecerunan. Pendek kata, semua alat yang menjadikan antara muka berkilat atau tiga dimensi. Sesetengah pereka percaya bahawa trend reka bentuk rata telah berkembang kerana populariti UI minimalis dalam reka bentuk. Kedua-dua trend ini (minimalis dan reka bentuk rata) sangat serasi. Kedua-duanya dilakukan tanpa menggunakan bayang-bayang, kecerunan dan tekstur isipadu untuk memudahkan reka bentuk dan menghapuskan elemen yang tidak perlu.

Flat dan minimalisme sangat serupa sehingga kadang-kadang tersilap dimaklumkan sebagai gaya yang sama. Gaya rata biasanya merujuk kepada tekstur, ikon atau grafik dalam antara muka. Minimalisme berfungsi dengan kandungan dan susun aturnya. Reka bentuk web boleh rata, tetapi tidak minimalis.

Warna terhad atau palet monokrom. Dibentangkan dalam 95% contoh antara muka. Dalam kebanyakan antara muka minimalis, warna digunakan secara strategik untuk mencipta minat visual atau mengarahkan perhatian pengguna tanpa mencipta elemen atau grafik tambahan.

Palet warna minimalis adalah selangkah lagi daripada warna berani yang popular dalam reka bentuk web pada tahun 2000-an. Selain itu, terdapat banyak tapak hebat yang menggunakan hanya satu warna dalam palet sebagai warna aksen untuk menyerlahkan elemen penting dalam kandungan. Elemen beraksen ini biasanya interaktif.

Terdapat beberapa pertimbangan yang perlu diingat apabila menggunakan bilangan warna yang terhad dalam palet:

  • Pastikan skema warna mempunyai kontras yang mencukupi untuk dilihat oleh orang yang mempunyai penglihatan yang lemah;
  • Gunakan warna aksen dengan sengaja dan konsisten untuk menyerlahkan maklumat yang sangat penting.

Bilangan item terhad. Digunakan dalam 87% tapak yang disemak. Pakar yang mereka bentuk tapak web dalam gaya minimalis mesti menentukan kesesuaian penggunaan setiap elemen dalam antara muka. Jika mana-mana elemen mempunyai tugas reka bentuk tertentu, anda perlu menyingkirkannya. Ini adalah salah satu kesukaran utama gaya ini. Selalunya sukar untuk menentukan betapa perlunya elemen reka bentuk tertentu. Lebih banyak elemen yang terkandung dalam reka bentuk, lebih banyak maklumat yang perlu difahami pengguna semasa berinteraksi dengan tapak.

Di sinilah seorang pereka boleh beralih daripada kanun minimalisme dan berhenti menyingkirkan kandungan "berguna".

Jumlah maksimum ruang kosong. 84% tapak menggunakan taktik ini. Mengalih keluar atau mengecualikan elemen dari halaman web pasti akan meninggalkan ruang kosong. Ramai pereka menggunakan ruang ini untuk "mengarahkan" perhatian pengguna kepada elemen penting.

Menggunakan tipografi "dramatik".. Berlaku dalam 75% kes. Seperti warna, cetakan tebal atau besar telah menjadi satu lagi alat komunikasi. Tipografi yang digunakan dengan berkesan boleh mengimbangi ketiadaan elemen lain (foto, grafik) dan menjadikan reka bentuk minimalis lebih menarik secara visual.

Menggunakan imej untuk teks mungkin membenarkan anda menggunakan fon tersuai, tetapi ini akan meningkatkan masa memuatkan tapak. Walau bagaimanapun, perlu diingat bahawa penggunaan fon bukan standard hanya dibenarkan jika teks menyampaikan maklumat penting dan bermakna.

Kesimpulan

Reka bentuk antara muka web pada tahun 2000-an kebanyakannya huru-hara dan menggembirakan, yang tidak baik untuk UX/UI.

Reka bentuk laman web dalam gaya minimalis melegakan pengguna daripada beban antara muka dan membolehkan anda mencapai interaktiviti tapak web yang lebih baik. Sama seperti reka bentuk rata adalah tindak balas kepada skeomorphism, minimalism ialah tindak balas kepada maksimumisme dalam reka bentuk web. Dalam kedua-dua kes, adalah disyorkan untuk mengekalkan keseimbangan.