Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Senyum Lebar dan Wajah Bahagia di Desain Web

by
Read Time:4 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Good Golly, Gradients All Over the Web
Examples of HTML Email Worth Opening

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Dalam minggu menginspirasi ini, kita akan menaruh senyum ke wajah kita dengan melihat sebuah illustrasi bersahabat di sekitar web.

Dia Telah Menjadi Emosional

Emosi telah menjadi bagian penting dari UX; membantu pengguna merasakan sesuatu ketika mengunjungi sebuah situs dan mereka akan merasa lebih terlibat, fokus, dan berhbungan lebih baik ke apapun yang ingin kamu komunikasikan. Jika kamu telah membaca Mendesain untuk Emosi, kamu akan memanggil kembali idenya bahwa emosi di dalam desain menawarkan

"Sebuah pengalaman bagi pengguna yang membuat mereka merasa seperti seseorang, bukan sebuah mesin, di akhir dari koneksi" - Aarron Walter.

Kebahagiaan adalah salah satu contoh; sebuah perusahaan benar, nyaman, puas. Jika desain situs kamu bisa mengundang perasaan ini, penggunamu akan secara cepat merasa nyaman dan mengiring ke hubungan yang baik.

Bagaiaman cara kamu mempromosikan kebahagiaan ke penggunamu? Sebuah kartun wajah menyeringai adalah salah satunya, jadi mari kita lihat beberapa contoh!

Wajah Bahagia

Seberapa senang laki-laki ini? Dia adalah bagian dari Komunitas Penerjemah Google; muda, penggemar teknologi dan muda. Penggunaan dari geometris sederhana adalah sesuatu yang akan sering kamu lihat selama roundup ini. Mereka menyenangkan, mudah diinterpretasikan, dan membuat pengguna nyaman.

Dan juga perlu dicatat: Ilustrasi ini diimplementasikan sebagai berkas PNG-tekstur kasar akan membuat SVG menjadi terlalu berat untuk dipraktikkan di sini.

httpworldseasiestdecisionorgen-ushttpworldseasiestdecisionorgen-ushttpworldseasiestdecisionorgen-us
http://worldseasiestdecision.org/en-us/

"World easiest decision" adalah sebuah situs yang diluncurkan dalam rangka Konferensi Perubahan Iklim PBB 2015. Dia menggunakan efek tekstur yang mirip dengan illustrasi Google Translate yang meminjam sebuah atmosfer bersahabat bersamaan dengan rasa positif.

Inspeksi lebih dekat akan mengungkapkan koleksi gambar besar yang telah membangun halaman ini - termasuk sprites untuk beberapa animasi menyenangkan di bawah:

sorrysorrysorry

Lebih banyak bentuk geometris dan PNG lainnya di sini. Ilustrasi sederhana ini bisa ditemukan di 404 page of castle.io, membantu meredakan frustasi dari pengguna yang telah mengikuti tautan rusak. Tanpa senyuman, namun itu tidak akan cocok untuk situasi ini.

OctopusOctopusOctopus

Jika saya ingin menjadi terlalu jujur, saya katakan bahwa gurita ini sampak sedikit mengesankan dengan prospek mendaftar, tapi logo Carbonmade-nya membuat kesengannya menghilang. Ini adalah contoh pertama kita untuk menggunakan SVG.

NeatNeatNeat

Laki-laki ini, walau bagaimanapun, sangat bahagia dengan pekerjaan mereka. Maskot untuk Neat, perusahaan yang akan membersihkan ketika kamu pindah rumah, mereka kelihatan berperangkat dan siap untuk beraksi. Ilustrasi ini juga diimplementasikan dengan SVG, bersamaan dengan pemandangan di latar depan dan belakang yang bergerak, bnerubah ukutan, dan tersusun kembali tergantu dari viewport.

Google telah menerima beberapa pengakuan baik, dari tahun ke tahun, untuk Santa Tracker mereka. Lebih banyak bentuk geometris dan karung dari perasaan bahagia.

httpsstuffandnonsensecoukhttpsstuffandnonsensecoukhttpsstuffandnonsensecouk
stuffandnonsense.co.uk

Kera di stuffandnonsense.co.uk, terinspirasi dari kampanye iklan TV klasik dari tahun 1970 yang tidak akan gagal membuahkan senyum. Diillustrasikan oleh Cleland dan diimplementasikan oleh Sara Soueidan, ini adalah seri terbaru dari ilustrasi responsih di situs Stuff and Nonsense. Squish browsermu dan kamu akan menyadari (Terimakasih kepada filter SVG) saturasi warnanya menurun, menambahkan perasaan nostalgia.

Baca lebih banyak mengenai illustrasi di Stuff and Nonsense

Lebih banyak pemandangan bergerak sekarang, perhatikan sprite ceria iini dari bysusanlin.com! gese ke bawah layar dan kamu akan melihat karakter 8bit terlihat bergerak dengan ceria di pemandangan. Sprite dan pemandangannya semua adalah gambar PNG, diletakkan dengan CSS. Beberapa jQuery kostum merubah posisis pada titik gulung tertentu-tetap perhatikan untuk sebuah panduan mengenai teknik ini segera.

httpwwwpassweirdcomhttpwwwpassweirdcomhttpwwwpassweirdcom

Ekspresi di www.passweird.com mungkin tidak mengundah perasaan kesejahteraan, tapi buku komik fantastik ini tentu saja akan mengunggah semacam perasaan tersebut! Dia adalah humor dan desain yang membuahkan senyum, walaupun ada yang membuat tidak nyaman.

Ini lebih seperti ini: Anggota yang sangat hidup dan bahagia di forum Dropbox. Faktanya, Dropbox selalu menasihati mengenai masalah illustrasi yang memainkan peran penting di branding mereka, bahasa visual, dan nada suara.

httpswwwdropboxcomplanshttpswwwdropboxcomplanshttpswwwdropboxcomplans
www.dropbox.com/plans

Toko buku Australia Readings di dot dengan sketsa energik dari orang-orang yang sedang membaca, karya Oslo Davis. Banner utama di atas dibuat dari beberapa blok, yang masing-masing menggunakan sebuah sprite PNG sebagai latarnya. Ketika viewport mengecil, blok akan dihapus, secara rapih mengadaptasikan latarbelakang dengan ruang yang tersedia.

Jika kamu pernah menggunakan Basecamp (kenapa kamu tidak?!) kamu akan mengetahui sketsa illustrasi menyenangkan mereka juga. Berikut adalah beberapa anggota tim, menunjukkan gigi cemerlang mereka.

Envato Market

Butuh lebih banyak inspirasi? Cek berkas-berkas berikut yang tersedia di Envato Market:

Order Taxi ThemeOrder Taxi ThemeOrder Taxi Theme
Tema Order Taxi
Turtle - Responsive 404 Error TemplateTurtle - Responsive 404 Error TemplateTurtle - Responsive 404 Error Template
Turtle - Template Error 404 yang Responsif
Flat Pixel - Illustrated PSD TemplateFlat Pixel - Illustrated PSD TemplateFlat Pixel - Illustrated PSD Template
Flat Pixel - Template PSD Penuh Illustrasi

Bacaan Menarik

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.