Daftar Isi

• Apa itu UI / User Interface?
• Apa itu UX / User Experience?
• Mengapa UI / UX Penting?
• Perbedaan UI dan UX
• Aspek Penting dalam UI / UX
• Bagaimana Cara Membuat UI / UX yang baik

Apa itu UI / User Interface?

UI atau yang biasa disebut dengan User Interface merupakan tampilan antar muka yang dilihat pengguna pada sebuah aplikasi atau website. User Interface merupakan bagian visual dari sebuah aplikasi yang berbentuk text, button, dropdown, radio button dan berbagai komponen lain yang memiliki tujuan untuk menampilkan data dari aplikasi ke user. Jadi, dapat dikatakan bahwa UI merupakan cara pengembang aplikasi/developer berinteraksi dengan user dalam sebuah produk digital.

Selain berfungsi secara visual, User Interface yang baik memiliki peran yang sangat penting karena dapat meningkatkan kepuasan pengguna dalam memakai aplikasi Anda. Namun, hal yang perlu digaris bawahi disini adalah UI juga harus mudah digunakan.

Apa itu UX / User Experience?

UX atau User Experience merupakan sebuah proses untuk mendesain sebuah produk/aplikasi melalui pendekatan kepada user. Melalui pendekatan ini, Anda bisa menyesuaikan produk sesuai dengan kebutuhan dan keinginan pengguna. Singkatnya, UX dapat diartikan sebagai pengalaman seseorang dalam menggunakan sebuah produk/aplikasi.

Sebuah produk yang memiliki desain UX yang baik akan menciptakan pengalaman yang baik pula untuk penggunanya. Adapun komponen dalam UX meliputi struktur desain, navigasi menu, penggunaan produk hingga aspek visual pada aplikasi. Selain itu, konten dan copywriting pada aplikasi Anda juga berperan penting untuk menentukan target pengguna aplikasi Anda. 

Sebagai contoh, saat ini ponsel dengan layar lebar saat ini sangat diminati. Dengan demikian desainer UX atau User Experience harus berpikir bagaimana caranya menempatkan suatu tombol. Jika layar terlalu lebar, tombol yang diletakan pada sudut kiri atas akan menjadi sulit untuk diraih oleh tangan pengguna, maka untuk mengoptimalkan user experience tombol bisa diletakan di sudut kiri bawah supaya pengguna dapat menggapai tombol tersebut dengan mudah.

Mengapa UI/UX Penting?

Anda pasti pernah mendengar istilah don’t judge book by its cover istilah ini mungkin benar, namun jika diartikan secara harfiah pada prakteknya orang menilai buku berdasarkan sampulnya sama seperti penilaian orang pada aplikasi atau website yang akan ia kunjungi. Tampilan website atau aplikasi yang nyaman akan membuat user atau pengguna betah untuk mengunjungi ulang website atau aplikasi tersebut.

Dapat disimpulkan desain user interface dan user experience adalah hal pertama yang memikat audiens.  UI/UX memiliki peran menonjol bagi yang membantu anda dalam menarik audiens. Oleh karena itu memiliki integrasi UI/UX yang terintegrasi dengan baik dan harmonis pada website atau aplikasi akan membantu menarik lebih banyak pengguna dan meningkatkan kepuasan pengunjung.

Perbedaan UI dan UX

Setelah mengetahui pengertian user interface dan user experience, sekarang kita akan membahas perbedaan di antara user interface dan user experience. Berikut ini adalah pemaparan yang kami pelajari tentang perbedaan dari keduanya:

1. Tujuan 
   Hal utama yang paling mendasar dalam membedakan UI dan UX adalah tujuan pembuatannya. Jika UI memiliki tujuan untuk memperindah tampilan dan desain dalam sebuah aplikasi, UX berperan untuk memberikan pengalaman yang membuat para pengguna atau user merasa nyaman dalam menggunakan aplikasi maupun fitur tersebut. 
   Dapat disimpulkan bahwa fokus dari UI adalah estetika dari aplikasi atau website, sedangkan fokus dari UX adalah memberikan pengalaman yang memuaskan user atau pengguna dalam menggunakan aplikasi atau website.
2. Proses Pembuatan
   Desain UI memerlukan riset. Namun riset yang dilakukan bertujuan untuk membuat tampilan visual yang menarik dan sesuai dengan brand. Di sini desainer UI perlu merancang model desain yaitu dengan membuat mockup.
   Karena UI memiliki fokus pada user experience, proses desain pada UI pastinya harus berlandaskan riset pada banyak pengguna sehingga dapat menghasilkan UX yang user friendly.
   Proses pembuatan ini biasanya memakan waktu yang cukup lama, juga bergantung dan melalui banyak tahapan serta peran, salah satunya yaitu UX Researcher. Role ini akan berperan mencari riset dan menyampaikan alur terbaik sehingga desainer siap merancang aplikasi tersebut sesuai dengan prototype yang ada.

3. Komponen Desain
   User Interface memiliki fokus pada komponen-komponen yang berhubungan dengan tampilan. Komponen UI tersebut diantaranya adalah Warna, Bentuk, Typography, Animasi, dan komponen-komponen yang mendukung interaksi visual lainnya.
   Sementara user experience meliputi komponen seperti fitur-fitur, struktur desain, dan navigasi. Elemen lain yang juga termasuk dalam user experience adalah interface, copywriting, hingga branding. Sehingga diperlukan komunikasi dan kolaborasi yang baik dalam suatu tim untuk mendapatkan pengalaman UI/UX yang baik untuk pengguna atau user.

4. Tools yang Digunakan
   Biasanya, tools yang digunakan oleh para desainer UI merupakan aplikasi yang berbasis Adobe, Principle, Flinto, dan masih banyak lainnya. Aplikasi tersebut biasanya digunakan karena sudah memiliki fitur pendukung UI seperti icon yang unik, easy transitions, UI assets yang menarik, serta toolkit yang lengkap.
   Sedangkan untuk UX, biasanya mereka lebih membutuhkan aplikasi yang mampu membuat prototype desain agar mempermudah mereka mendapatkan feedback dari user pengguna aplikasi tersebut. Beberapa aplikasi prototype yang sudah mendukung UX, diantaranya : Sketch, Figma, InVision, Adobe, Axure, dan lainnya.

5. Skill yang dibutuhkan
   Menjadi seorang desainer UI dan UX biasanya membutuhkan skill tersendiri. Berikut merupakan skill dasar yang dibutuhkan oleh desainer UI, yaitu : creative thinking, desain grafis, branding dan convergent thinking. Skill tersebut dibutuhkan oleh seorang desainer UI untuk mendesain sebuah aplikasi sehingga memiliki tampilan yang menarik.
   Disisi lain, UX designer memiliki tanggung jawab dalam pembuatan desain produk dengan pendekatan yang lebih mudah dipahami user. Beberapa skill dasar yang diperlukan seorang UX designer adalah analytical thinking, problem solving, serta creative thinking.

Aspek Penting dalam UI/UX

Berikut kami bagikan beberapa aspek penting yang perlu Anda ketahui dari User Interface dan User Experience :

• Konsistensi
  Dalam pembuatan UI yang menarik, diperlukan konsistensi dalam desain seperti jenis font, ukuran text, warna, ikon dan tombol. Hal ini sangat diperlukan untuk membuat user mendapatkan kemudahan dalam menggunakan aplikasi Anda. Hal ini juga akan membantu brand Anda tetap konsisten dalam membangun bisnis.
• Easy Navigation
  Penting diingat bahwa sebuah aplikasi harus mudah digunakan oleh user. Usahakan agar Anda tidak menggunakan visual yang rumit dalam pembuatan aplikasi karena hal ini akan berdampak pada niat pengguna saat menggunakan aplikasi Anda.
• Pola yang seragam
  Saat proses pembuatan UI, Anda perlu menentukan pola yang sama untuk user dalam menggunakan aplikasi Anda, misalnya peletakan menu, sidebar dan bagian kontak dalam web/aplikasi Anda harus berada di setiap halaman dan dapat diakses langsung oleh user.

Tak dapat dipungkiri bahwa desain yang menarik merupakan hal pertama yang menarik perhatian audiens Anda. Maka dari itu, UI/UX memainkan peran yang penting dalam aplikasi. 

Oleh karena itu, desain UI/UX harus terintegrasi dengan harmonis untuk mendukung fungsi satu sama lain. Sehingga dapat meningkatkan pengguna dan juga meningkatkan kepuasan pengguna.

Bagaimana cara membuat UI/UX yang Baik

Setelah mengetahui pentingnya UI/UX pada website atau aplikasi anda, anda pasti tidak mau sembarangan membuat desain UI/UX dalam website atau aplikasi anda bukan? Nah berikut ini adalah kriteria desain UI/UX yang baik

User Interface

1. Konsisten

User Interface yang baik adalah User Interface yang memiliki desain yang konsisten. Konsistensi desain dapat membantu pengguna untuk memahami pla website atau aplikasi yang anda buat. Dengan begitu pengguna akan lebih mudah dalam mengoperasikan website atau aplikasi yang anda buat, desain yang konsisten akan membuat pengguna lebih familiar ketika menggunakan produk-produk anda.

2. Responsif

UI/UX yang baik harus responsif, kasus hal ini dikhususkan pada desain website. Hal ini dimaksudkan agar website dapat digunakan dengan baik pada segala perangkat, sehingga pengguna yang sebelumnya mengakses website melalui handphone, tidak merasa kebingungan saat mengakses website melalui desktop.

3. Ringkas dan jelas

Tampilan website atau aplikasi harus terlihat ringkas supaya pengguna dapat memahami informasi dan navigasi pada website atau aplikasi anda dengan baik.

4. Intuitif

Desain yang intuitif adalah desain yang mudah dimengerti secara natural oleh pengguna. Pengunjung dapat dengan mudah memahami flow website tanpa perlu menggunakan panduan.

5. Kontras warna yang baik

Pemilihan warna adalah salah satu elemen yang sangat penting. Kontras warna yang baik akan memudahkan pengguna membaca dan memahami navigasi dan informasi pada website atau aplikasi.

6. Informasi terstruktur

Desain UI yang baik tidak hanya memperhatikan estetika desainnya, namun juga harus mengutamakan fungsinya. Informasi yang diberikan harus terstruktur supaya lebih mudah dipahami oleh pengguna, sehingga pengguna bisa menyelesaikan kebutuhannya secara efektif.

User Experience 

1. Mudah digunakan

Maksud dari mudah digunakan adalah pengguna dapat menggunakan website atau aplikasi anda dengan efektif dan efisien, tanpa memerlukan effort yang berlebih.

2. Memiliki value

Memiliki value berarti memiliki nilai yang tepat bagi pengguna, aplikasi atau website yang bagus adalah produk yang fitur-fiturnya sesuai dengan kebutuhan pengguna, jika fitur yang ada pada website atau aplikasi itu ada namun tidak terlalu digunakan oleh pengguna artinya produk tidak memiliki value.

3. Mudah didapatkan

Sebuah produk yang bagus seharusnya mudah dicari, didapatkan, mudah dibeli, dan mudah diunduh. Sehingga pengguna dapat mengakses produk itu dengan mudah dan efisien.

4. Desirable

Istilah ini merujuk ke pengalaman, perasaan, dan emosi pengguna. Misalnya, pengguna merasakan pengalaman yang menyenangkan ketika mengunjungi situs website anda.

The post appeared first on rectmedia.com

Perubahan cepat dalam teknologi pengembangan web memiliki dampak langsung pada apa yang dianggap “baik dan buruk” dalam membuat situs web. Karenanya, sangat penting bagi setiap desainer untuk mengikuti perubahan ini.

Melihat kembali tren desain web tahun sebelumnya, selama bertahun-tahun Anda akan melihat bahwa banyak tren bersifat siklus dan berkelanjutan. Seperti desain minimalis, responsive, menggunakan tren flat desain di setiap halaman web ataupun landing page membuat para desainer web mudah untuk beradaptasi dengan perkembangan zaman. Dengan demikian masuk akal bahwa popularitas mereka tidak akan menurun pada 2019.

Dengan tingkat penetrasi internet seluler, desainer web kemungkinan akan fokus pada estetika antarmuka dan prinsip mobile-first. Apa saja tren desain web spesifik lainnya yang dapat kita harapkan pada tahun 2019? Mari kita lihat!

Tren Desain Web : Mobile First

Google meluncurkan pengindeksan mobile-first pada tahun 2018, yang didasarkan pada memprioritaskan konten dan tautan dari halaman situs web seluler. Inisiatif ini akan dilaksanakan hingga 2019. Hal ini membuat desainer web akan memprioritaskan versi mobile untuk setiap situs yang mereka desain, termasuk juga dalam pembuatan landing page.

Selain itu, SEO bukan satu-satunya faktor yang menentukan prioritas desain web. Statistik menunjukkan bahwa 50% dari lalu lintas situs web global berasal dari seluler. Dengan meningkatnya basis pengguna ponsel, efek visual yang baik dan pengalaman pencarian juga merupakan faktor yang perlu dipertimbangkan. terutama dalam desain situs web pada tahun 2019 ini.

Tren Desain Web : Speed!

Tiga detik. Itu adalah waktu pengguna dalam memutuskan apakah akan meninggalkan atau tetap di situs web. Desainer web Anda memiliki banyak waktu untuk meyakinkan pengguna agar tetap tinggal.

Penelitian oleh Akamaii dan Gomez.com menunjukkan bahwa 50% pengguna menginginkan situs web dimuat dalam tiga detik atau kurang. Selain itu, karena algoritma Pembaruan Kecepatan yang diumumkan oleh Google pada bulan Juli 2018.  Desainer web perlu mengurangi waktu pemuatan halaman jika mereka ingin meningkatkan peringkat mesin pencari mereka. Dengan demikian, kecepatan harus menjadi tren desain situs web penting kedua di 2019 untuk pertimbangan desainer web.

Tren Desain Web : Desain Ilustrasi

Menurut statistik, pengguna cenderung menggunakan ilustrasi dan efek visual. Ilustrasi ini cocok untuk diterapkan ke beranda situs web, panduan pengguna baru, loading page, landing page, dll.

Di pertengahan tahun 2017, perusahaan besar seperti Dropbox dan Slack mulai menggunakan ilustrasi yang dipersonalisasi. Diantaranya dalam penyampaian karakteristik perusahaan tersebut sehingga membuat desain ilustrasi menjadi lebih populer. Dari tahun ke tahun desain ilustrasi ini mengalami pergeseran dan diprediksi tren ini mampu mendapatkan kepopularitasnya pada tahun 2019.

Ingin Traffic Website Anda meningkat? Kunjungi halaman Contact Us untuk informasi selengkapnya. 

Tren Desain Web : Animasi CSS3

Munculnya animasi dalam dua tahun terakhir telah sangat cepat. Dalam tren desain web Forbes pada 2018 (https://www.forbes.com/sites/forbescommunicationscouncil/2018/02/26/five-web-design-trends-to-kick-off-2018/#21f254597789). Animasi yang diprediksikannya adalah salah satu tren paling kuat akan menjadi sangat populer di kalangan desainer web dan pengguna. Penggunaan teknologi CSS3 membuat desain tradisional lebih jelas dan mudah digunakan.

Karena animasi CSS3 dianggap relatif baru di bidang UI, ada lebih banyak ruang untuk pengembangannya dalam penerapannya. Oleh karena itu logis untuk animasi CSS3 (https://www.w3schools.com/css/css3_animations.asp) digunakan dan dikembangkan lebih banyak di tahun mendatang.

Tren Desain Web: Background Video

Membuat situs web dengan menggunakan latar belakang video yang dinamis merupakan salah satu cara terbaik untuk menarik perhatian pelanggan. Pelanggan cenderung lebih memilih benda yang bergerak karena dianggap lebih menarik perhatian jika dibandingkan dengan sebuah teks dan gambar. Melalui video pendek, pelanggan lebih antusias untuk menerima informasi yang diberikan. Karena tidak terkesan monoton dan harus menggali informasi melalui teks maupun gambar. Sehingga diharapkan pelanggan akan lebih mudah memahami karakteristik halaman web atau produk itu sendiri. Sejauh ini video membantu peningkatan waktu pengguna di halaman web, yang bagus untuk SEO serta tingkat konversi. Seperti halnya facebook yang memprioritaskan posting video, tidak lain sebagai bukti bahwa kekuatan dan keefektifan penyampaian informasi melalui video. Selain itu, di era perkembangan teknologi digital yang semakin pesat dan sebagian besar penggunanya adalah kaum milenial. Kaum milenial lebih memilih penyampaian informasi dengan menerapkan elemen yang dinamis, contoh dari elemen dinamis berlatar belakang video. Tren desain video ini cocok untuk diterapkan dalam cocok untuk diterapkan ke beberapa bagian. Diantaranya ke beranda situs web, panduan pengguna baru, loading page, landing page, dll.

Tren Desain Web : Minimalis (Sederhana yang tidak sederhana)

Salah satu tren klasik, minimalis identik dengan kesederhanaan. Seringkali pilihan pertama bagi perancang web, itu mewujudkan prinsip “elegan”. Semakin sedikit elemen desain antarmuka, maka semakin baik.  Dengan kehidupan modern yang begitu cepat dan dinamis, orang tidak memiliki cukup waktu untuk memproses informasi, membuat redundansi menjadi tidak-tidak. Desain yang baik memungkinkan pengguna untuk mencerna informasi dalam waktu sesingkat mungkin. Ini paling baik dicapai dengan menggunakan lebih sedikit elemen. Dengan penggunaan sedikit element ini desain web minimalis seringkali dikaitkan dengan tren flat desain. Pada hakikatnya tren desain web minimalis dan tren flat desain ini memiliki banyak kesamaan yaitu bermain dengan warna. Warna yang dipilih cenderung  menghindari warna hitam dan putih atau lebih menggunakan warna pastel. Dalam penerapannya Anda dapat menampilkan tren desain web minimalis ini pada beberapa tempat. Seperti landing page, loading page ataupun ke beranda situs web Anda.

Baik itu penggunaan desain putih, kontras, atau tipografi yang jelas. situs web yang dirancang dengan baik membuat navigasi menjadi mudah dan memberikan informasi yang akurat – menjadikan pengalaman pengguna yang baik. CTA yang dirancang dengan baik juga menghasilkan konversi halaman yang lebih tinggi.

Anda mencari jasa iklan Google Adwords terbaik dan terpercaya di Semarang? Kunjungi halaman Contact Us untuk mengetahui informasi lebih lanjut.

Tren Desain Web : Warna Gradien yang Cerah

Saat ini penggunaan gradasi warna dalam pembuatan desain web mengalami peningkatan yang bertahap. Pada tahun lalu, penggunaan gradien fluida sangat populer. Bahkan dengan satu warna yang digunakan. Gradien fluida menciptakan struktur berlapis yang kaya akan bantuan berbagai gradien dan gambar yang berbeda-beda. Sehingga menghasilkan desain yang estetis dan memiliki kesan menyenangkan. Pada tahun 2019, penggunaan gradien dengan warna cerah serta ilustrasi tebal menjadi salah satu kombinasi warna utama. Sehingga penggunaan warna ini masih dapat disandingkan dengan tren warna flat desain.

Tren Desain Web : Bold Typographic

Tata letak halaman web sama pentingnya dengan konten yang ditampilkan pada antarmuka. Statistik menunjukkan bahwa lebih dari 95% informasi pada halaman web adalah teks. Dalam hal pengaruh pada pengguna, pengaturan huruf adalah yang kedua setelah pencocokan warna web dan gambar. Bold typographic ini juga turut digunakan dalam meramaikan tren flat desain saat ini. Dengan menggunakan jenis typographic ini mendukung penyampaian informasi lebih jelas dan masuk dengan kriteria dari tren flat desain saat ini.

Petualang, tipografi yang berani mengesankan penonton. Font yang dipilih dengan hati-hati dapat menyampaikan emosi yang Anda butuhkan dan membangun hirarki visual yang kuat. Bahkan, lebih banyak nama besar mulai menggunakan font eksklusif mereka sendiri untuk meningkatkan pengakuan merek mereka.

Kesimpulannya dalam tren desain web diatas adalah setiap desainer web mampu memanfaatkan kekuatan mereka untuk membuat sebuah desain. Desain yang lebih berani, unik, dan tak terlupakan. Desain kreatif bukanlah masalah kesempatan. Hal tersebut dapat dianalisis, dipahami, dan dieksekusi. Dengan Anda mengawasi tren baru, Anda pasti akan membangun situs web yang sangat baik.

Ingin Membuat Website Menarik Untuk Bisnis Anda?

The post appeared first on rectmedia.com

Lalu bagaimana caranya kita memanfaatkan gambar agar dapat kita aplikasikan dalam merancang atau mengatur/customize website miliki kita sendiri? Walaupun sebenarnya kita juga memerlukan kontent yang berupa text seperti artikel didalamnnya sebagai konsumsi pengunjung dan bukan hanya gambar yang cantik saja yang kita pamerkan.

Dibawah ini Anda akan menemukan beberapa tips dasar, yang bisa jadi akan efektif agar situs yang Anda miliki membuat pengunjungnya terus tertarik dan terlibat di dalamnya.

Full Screen Images

Hingga pada saat ini, tren web desain Full Screen Images masih menjadi pilihan dan menjadi tren utama di tahun 2013 hingga 2014 ini. Banyak situs yang mengambil keuntungan dari web design ini dan dikombinasikan dengan kerangka responsive yang bisa diakses pada gadget apapun dengan ukuran screen berapapun. Selain akan lebih menarik, pengunjung akan lebih nyaman melihat jika Anda menggunakan gambar vector ataupun gambar hasil fotografi yang menarik.

Konsep dasar full screen images sendiri berasal dari desain portfolio, dengan mengambil salah satu gambar yang menarik dan kita biarkan rasa ingin tahu pengunjung website memandu mereka untuk menjelajahi website Anda. Namun berikanlah informasi yang akurat dan biarkan pengunjung mengetahui tujuan atau informasi yang disajikan pada website Anda dengan mengombinasikan konten yang lain yang berupa text atau video. Dan bagi mereka yang memiliki hobi fotografi ataupun desain grafis, mereka dapat memerkan hasil karya mereka ke dalam website tersebut dengan menyajikannya secara full screen sebagai latar belakang.

Image With Type

Masih serupa dengan full screen image, tapi ini masih sangat efektif yaitu tren menggabungkan teks dan gambar. Pendekatan ini dapat meringkas penggunaan website dengan konten berskala besar menjadi satu konsep single page. Contonya adalah situs Tinke. Dimana situs ini dapat meringkas penggunaan halaman yang banyak menjadi satu halaman saja. Dengan dikombinasikan parallax scrolling design.

Ketika sebuah website disajikan dengan gambar, kita tentu saja mulai mencari semacam subjek untuk fokus pandangan kita. Dengan menambahkan teks, desainer memanipulasi hasrat bawaan ini. Namun, efek ini tidak berlaku pada semua foto. Sering kali Anda hanya akan melihat foto yang sengaja di beri efek kabur atau de-saturated. Ini adalah cara yang umum untuk membatasi apapun gangguan visual dalam gambar sehingga informasi yang disuguhkan akan lebih tepat sasaran. Sebagai contohnya adalah website Diehlgroup.com yang memaipulasi gambar dengan efek hitam putih dan blur. Sehingga ketika memberikan text di atasnya, text tersebut yang akan menjadi dominan.

Images For Navigation

Salah satu tren kegunaan yang telah mulai mendapatkan popularitas adalah dengan melibatkan gambar sebagai bentuk navigasi. Aplikasi seperti Pinterest dan Facebook telah mengajarkan pengguna untuk mengklik gambar berukuran tertentu untuk menuju halaman yang lain. Banyak situs telah mulai merangkul gaya ini dengan hanya membatasi teks navigasi khas mereka dan menambahkan efek on-hover pada foto mereka.

Pendekatan ini sering dapat mengambil efek yang unik jika ditata dengan warna, tata letak dan teks efek. Contohnya adalah situs Bergerfohr.com yang berhasil memadukan antara teks, dan gambar menjadi sebuah efek animasi yang unik.

Images As Texture

Dan yang terakhir, cara cepat dan mudah untuk memanfaatkan gambar adalah dengan hanya menggunakan mereka sebagai bentuk tekstur. Perhatikan bagaimana situs Microarts menggunakan kayu untuk menambah ketajaman dan kejelasan pada situs mereka. Tekstur alami dan tone yang seimbang membuat konten lebih menjonjol. Sehingga pengunjung akan terus tertarik untuk mengunjunginya.

Meskipun ada tren dan konsistensi dalam desain web, biasanya tidak ada jawabannya yang ‘salah’ dalam bereksperimen. Selama ada usaha dan selama jalur mata tidak terhalang karena ketidak seimbangan komposisi website, dan informasi yang disajikan sesuai, pintu terbuka lebar untuk kreativitas.

The post appeared first on rectmedia.com

Perkembangan web desain dari tahun ke tahun membuat banyak inovasi bermunculan.
Seperti di artikel sebelumnya mengenai 10 Tren Web Design 2014, pada kesempatan kali ini akan di ulas mengenai 10 Tren Web Design 2015.
Banyak desain di tahun 2014 yang masih menjadi favorit di tahun 2015 ini, dengan sedikit kreasi dan perubahan web desain tampak semakin apik.

Berikut ulasannya :

1. Make it Big!
Sama seperti web desain sebelumnya, menggunakan gambar background yang besar hingga memenuhi layar. Background yang dipakai bisa berupa gambar animasi, gambar statis, maupun video yang bisa disajikan dalam bentuk slider. Background dapat dibuat lebih dominan dengan menghilangkan beberapa menu navigasi dan menu-menu yang lain. Lalu dimanakan menu navigasi tersebut? Anda dapat menyediakan satu icon atau tombol dimana ketika user mengklik tombol tersebut, maka menu navigasi akan muncul, ini diadaptasi dari tampilan web responsive, sehingga dapat dikatakan menu navigasi agak tersembunyi.
Contoh websitenya adalah : Borngroup dan Voidandform

2. Multimedia Experience.
Berikan pengalaman multimedia kepada pengunjung sebelum pengunjung mengetahui lebih lanjut tentang website Anda. Anda dapat menggunakan flash dan HTML5 pada website Anda. Tampilkan sebuah presentasi unik tentang produk atau website anda pada beranda dan ajak pengunjung website Anda untuk menggunakan scroll pada mouse untuk memainkannya, atau sajikan tombol unik seperti peta harta karun agar ketika pengunjung mengeklik nya mereka akan dibawa kepada suatu halaman tertentu. Anda juga dapat menyisipkan sebuah instrumental lagu yang akan dimainkan ketika pengunjung mengunjungi website Anda.

Contoh websitenya adalah : Jack Daniel’s, Jviewz dan Raisetheriver

3. Efek Parallax
Ini masih menjadi favorit developer di tahun 2014 ini, yang sebenarnya dari tahun 2013 yang lalu parallax scrolling juga sudah ada, namun kepopularitasannya tidak sebesar di tahun 2014 dan 2015 ini. Parallax scrolling adalah teknik scroll dimana background dan foreground gambar maupun teks bergerak seperti animasi sesuai dengan scroll yang user lakukan. Ini memberikan kesan website lebih hidup.
Ada beberapa kreasi parallax scrolling.
Yang pertama, Scrolling dan menampilkan handwriting animation. Jika anda seorang penulis atau bisnis anda bergerak dalam bidang karya tulis, kreasi satu ini dapat menjadi pilihan. Seperti pada website Mintdesigncompany perusahaan ini menggunakan animasi handwriting.
Yang kedua, innovative scrolling. Anda dapat menyatukan dua jenis scrolling animation (horizontal dan vertikal) dalam satu scroll mouse, contoh websitenya adalah : Quoplus

4. Animated Storybook
Desain ini mirip dengan skema parallax, dengan memanfaatkan scroll bar, animasi akan dimainkan ketika halaman muncul di screen layar pada posisi yang sudah disesuaikan. Dengan meminimalisir kata-kata, pengunjung akan menyaksikan sebuah informasi yang disajikan dalam bentuk animasi visual. Anda dapat mengunjungi website www.boldking.com sebagai referensi Anda.

Website lain yang menggunakan animated storybook adalah website Colinanddewi. Sebuah situs pernikahan yang sederhana, dimana aminated storybook ini dipakai agar pengunjung dapat lebih fokus pada cerita kehidupan Colin dan Dewi. Anda dapat memadupadankan animasi tersebut dengan parallax scrolling, seperti wesbite Habitatweb. Pada website tersebut, animasi akan bergerak sesuai dengan garakan mouse.

5. Flat Design
Masih sama seperti tahun lalu, kepopularitasan web design dengan gaya flat ini masih menjadi pilihan oleh banyak developer. Karena website ini lebih mengusung design yang sederhana, ini menjadi nilai plus tersendiri agar informasi yang disampaikan juga lebih sederhana namun dapat lebih dimengerti oleh pengunjung. Tanpa banyak memberikan efek-efek pada CSS seperti shadows, emboss, gradient dll namun Anda juga dapat menyisipkan beberapa animasi, Flat Web Design benar-benar desain dengan efek tampilan 2 dimensi saja. Anda perlu memperhatikan konsep flat design sebelum mengaplikasikannya kepada website Anda. Kreasikan desain Anda dengan memanfaatkan konsep seperti pada nomor 1. Sembunyikan menu navigasi Anda, dan sediakan sebuah icon button sebagai penggantinya. Anda dapat mengunjugi website Colinanddewi atau Lab21.

6. No more boxes
Memang kita tidak memiliki layar komputer yang berbentuk bulat atu melengkung. Dan screen yang kita pakai berbentuk persegi panjang. Layar persegi panjang memang merupakan frame bagi setiap web design. Namun coba lihat website DANparis, pada website ini developer menggunakan strategi dengan memasukkan beberapa bidang seperti lingkaran, segi enam, dan bahkan bentuk tidak beraturan yang lain, menjadi satu komposisi web design yang keren. Atau dengan memiringkan sedikit horizon? Seperti pada website Lorenzobocchi. Website tersebut menampilkan garis horizon yang dibuat miring dan content-contentnya juga tidak disediakan dengan bentuk tegak lurus, namun miring atau skewed horizon.

Anda dapat memanfaatkan parallax scroll namun halaman tidak mengalami perubahan naik turun dan website di tampilkan dalam satu layar penuh, dan dibuat seperti terbang, contohnya adalah website World of Swiss.

7. Tiles
Jika Anda sudah nyaman dengan bentuk persegi panjang, cara ampuh untuk berkreasi yang lainnya adalah menciptakan sebuah tiles. Anda dapat mengadaptasi dari tiles pada tatap muka Windows 8. Ini akan menjadi lebih mudah ketika website akan disajikan dalam bentuk responsive. Sebagai referensinya, Anda dapat mengunjungi webiste Itsashapechristmas dan Builtbybuffalo.

8. Navigation Widget
Bereksperimen dengan menu navigasi telah menjadi permainan yang favorit dari tahun ke tahun oleh developer. Dan ketika banyak website yang disajikan dalam bentuk flash, ini menjadi puncak bagi developer untuk berlomba-lomba bereksperimen dengan navigasi. Ada masa dimana popularitas web flash menurun dan menu navigasi pun kembali disajikan dalam bentuk statik dan tanpa animasi.

Setelah dari tahun ke tahun, inovasi web design pun kembali ke permukaan, termasuk menu navigasi. Berkreasi dengan menu navigasi saat ini dengan sangat mudah di bantu dengan JavaScript dan interpretasi yang lebih konsisten dengan menggunakan CSS.

Webiste Thedailybeast menyajikan sebuah widget navigasi tetap pada posisinya walupun pengunjung menggulir halaman artikelnya. Website Lesscss menyajikan sebuah widget navigasi yang disebut dengan istilah sticky menu. Maksudnya adalah, menu akan tetap menempel di atas walaupun Anda menggulir layar. Pada website tersebut tampak submenu terexpand ketika user menggulir layar. Kadang-kadang cara ini dikombinasikan dengan script scrollspy untuk membuat widget lebih akurat menunjukkan posisi Anda pada sebuah halaman.

Pada website Humcreative menunjukan posisi menu navigasi berada pada setiap sisi pojok halaman.

Mungkin Anda juga ingin mengaplikasikan teknik street view seperti pada Google Map, pada website Ohdeergames jika Anda menggulir halaman, maka menu-menu navigasi akan menempel pada suatu titik tertentu dan akan mendekat ketika Anda mulai menggulir.

9. Mengintegrasikan Google Map
Tren ini sudah ada di tahun kemarin, namun tidak ada salahnya jika kembali sebagai pilihan di tahun 2015. Seperti website Bestofbritishunsigned yang memanfaatkan Google Map untuk menampilkan artis/musisi pada suatu lokasi tertentu.

Atau website 50problems50days yang menampilkan map 50 masalah yang terjadi dalam 50 hari di wilayah Eropa.

10. Mashup Interfaces
Banyak tantangan yang akan dihadapi ketika ingin berkreasi dengan website yang menyajikan satu halaman dengan banyak konten, bagaimana cara untuk menyediakan suatu informasi dan fungsi pada satu halaman dan halaman harus memiliki tampilan yang modern dan bersih.
Solusinya adalah dengan Mashup Interface, yaitu layout yang terdiri dari banyak ‘lapisan’ dengan menyesuaikan fungsi yang di panggil atau menyesuaikan kontennya.

Website Necotrans memang memiliki sedikit konten, dengan kalimat yang sederhana dan gambar yang tampil secara penuh pada layar. Namun ada terdapat menu navigasi yang tidak begitu besar terlihat yang memungkinkan pengunjung untuk akses ke semua fungsi atau menu penting dalam satu area layar yang sama. Dengan mengombinasikan dengan animasi parallax scrolling, maka website ini akan tampak sangat menarik.

Kesepuluh tren website di atas sebagian telah menjadi tren di tahun-tahun yang lalu. Namun tidak ada salahnya jika Anda ingin berkreasi dan memadupadankan teknik satu dengan yang lainnya.
Mana yang menjadi favorit Anda? Perlu diingat bahwa, sebelum memulai mendesain suatu website, Anda perlu memikirkan apa konten utama yang akan Anda sajikan.

Dikutip dari 99designs.com

The post appeared first on rectmedia.com

Interaktif
Interaktif dalam hal ini adalah rancangan web design Anda jangan terlalu simple sehingga memunculkan kesan tidak menarik. Pengunjung suka dengan hal-hal yang menarik dan berwarna. Berikan sentuhan sedikit gambar di halaman web Anda. Gambar dapat disesuaikan dengan tema toko online. Anda membuka olshop pakaian, namun gambar yang anda pajang di halaman web adalah sepatu. Ini tentu tidak ada kaitannya sama sekali, kecuali Anda membina hubungan bisnis dengan toko online sepatu. Memberikan efek gambar pada halaman web tidak masalah selama tidak berlebihan. Gambar dengan jumlah berlebih juga tidak akan menarik, bahkan akan menimbulkan kesan web yang Anda buat untuk para ABG.

Layout
Nah, ini nih yang paling penting. Gunakan layout yang simple, jangan terlalu ribet. Usahakan agar Anda tetap konsisten dalam menggunakan layout. Jangan membuat tampilan web dengan layout yang berbeda-beda di setiap halaman. Ini akan sangat membingungkan para pengunjung toko online Anda. Penggunaan web yang susah akan membuat para pengunjung kabur ke toko online tetangga.

SEO
Sudah saatnya Anda untuk belajar SEO (Search Engine Optimation) untuk membuat halaman web Anda tampil di halaman utama google. Untuk menjadikan toko online Anda menduduki peringkat pertama di Google, Anda harus mengoptimalkan penggunaan SEO.

Keranjang Belanja
Kalau ini Anda perlu buat dihalaman website. Agar lebih menarik dan menciptakan kesan bahwa toko online Anda sudah professsional, buatlah sebuah aplikasi keranjang belanjan di halaman website. Pembeli biasanya lebih senang pesan suatu barang melalui keranjang belanja dibanding harus sms si pemilik.

Domain
Gunakan nama domain yang simple saja. Jangan membeli nama domain dengan alamat yang susah, sebagai contoh www.thisisouronlineshop.com. Ini tentu akan sangat sulit diingat pelanggan apabila mereka akan mengunjungi toko online Anda.

Up to date
Agar toko online Anda lebih menonjol dari tetangga, jangan lupa untuk selalu update halaman website Anda. Ada saatnya Anda mengganti wana background atau menambahkan gambar.

Produk
Upload gambar produk dagangan Anda sesuai dengan proporsi halaman web. Sertakan informasi yang jelas ketika Anda mengupload gambar tersebut. Mungkin Anda bisa mempergunakan hyperlink jika ingin meihat informasi detail mengenai suatu produk.

Rekanan
Anda juga dapat menjalin kerja sama dengan pelaku toko online lainnya dengan memasang iklan. Tidak ada salahnya Anda yang notabenya pelaku bisnis pakaian memasang iklan produk rumah tangga. Ini juga akan menonjolkan website Anda, karena banyak informasi yang terdapat pada halaman toko online. Mereka tidak hanya dapat berbelanja pakaian, namun mereka juga dapat membeli sebuah produk rumah tangga melalui iklan di website olshop Anda.

Promosi
Promosikan toko online Anda di media online ataupun offline. Di facebook, instagram dan bbm adalah media yang tepat untuk Anda mempromosikan website toko online Anda. Semakin banyak yang berkunjung, pasti semakin banyak pula pelanggan yang datang. Jangan lupa untuk menggunakan logo dan gambar banner yang menarik dalam promosi Anda.

Gaya bahasa
Gunakan bahasa yang santai untuk menjual produk di olshop karena pelanggan datang dari berbagai kalangan. Gaya penyampaian yang santai juga menentukan tingkat pengunjung yang datang. Kalau sasaran Anda di kalangan pejabat, gunakanlah bahasa yang baku dan formal. Intinya adalah sesuaikan gaya bahasa dengan pangsa pasar Anda.

Itulah 10 tips bagi Anda yang mungkin akan membuat toko online, atau mungkin bagi Anda yang sudah memiliki toko online dan ingin menyempurnakan lagi toko online Anda.
Semoga tips di atas bermanfaat.

The post appeared first on rectmedia.com

1. Navigasi sederhana & user experience
Ketika membuat website, mempertimbangkan pengalaman pengguna merupakan hal yang sangat penting bagi penyedia jasa web desain surabaya. Dengan menyederhanakan itu, pengunjung akan merasa betah yang pada gilirannya menghabiskan lebih banyak waktu di situs yang Anda buat, dan sangat mungkin membeli produk atau jasa. Pastikan untuk memiliki navigasi yang jelas, sederhana, dan memudahkan pengguna untuk melakukan perjalanan dari satu halaman ke halaman lainnya. Juga fokus pada membuat navigasi yang mudah dimengerti. Dengan menggunakan kata-kata umum seperti “home, about, blog, support”, pengguna dapat dengan mudah memutuskan ke halaman mana mereka selanjutnya.

2. Waktu load situs
Waktu buka situs Anda adalah hal yang penting untuk kepuasan pengguna. Tidak ada pengguna yang mau menunggu page load yang terlalu lama. Dengan meminimalkan waktu buka halaman Anda akan membuat pengguna lebih senang, dan juga kemungkinan besar untuk menavigasi lebih lagi dari halaman ke halaman situs Anda daripada keluar karena page load yang lama. Jagalah agar waktu memuat halaman web tetap sesingkat mungkin dengan membatasi video dengan ukuran besar, foto, flash, dan file lainnya.

3. Mudah dibaca & tipografi
Pengguna harus dapat memahami informasi di situs Anda dengan cepat dan tanpa banyak usaha. Dengan menggunakan tipografi yang bersih Anda dapat secara efektif mempermudah proses dan membantu membuat pengguna Anda lebih senang ketika mengunjungi situs Anda. Hal ini sangat penting untuk situs dengan artikel panjang. Jika Anda memiliki potongan-potongan jurnalistik atau artikel yang panjang, pastikan untuk fokus pada tipografi Anda, jika tidak menghalangi pembaca dari melihat begitu banyak informasi sekaligus.

Beberapa kunci untuk fokus pada adalah pilihan font, kombinasi warna, dan jarak. Pilih dengan cermat, font mudah dibaca, bekerja dengan warna sederhana dan elemen ruang keluar pada halaman Anda untuk menjaga desain bersih dan kurang berantakan.

4. Kemudahan penggunaan
Mampu membuat situs Anda bekerja di beberapa browser, perangkat, dan ukuran layar adalah penting. Ini akan membantu Anda membuat pengalaman yang lebih baik untuk seluruh audiens Anda dan akan terus lebih banyak pengguna di situs Anda, bahkan jika mereka berada pada perangkat mobile.

Dikutip dari Crosstechno.com

The post appeared first on rectmedia.com

1. Halaman Website Anda Harus Dengan Cepat Dimuat Oleh Browser

Jika Anda tidak melakukan apapun untuk meningkatkan halaman web Anda, Anda harus membuat website Anda dimuat secepat mungkin oleh browser. Mungkin ini juga dipengaruhi oleh koneksi internet yang dipakai oleh Anda dan calon pengunjung website Anda. Anda harus mempertimbangkan hal tersebut, karena jika website Anda terlalu banyak konten yang sebenarnya bisa di ringkas, terlalu banyak gambar dan terlalu banyak hal yang lain yang sebenarnya bisa dikurangi, browser pengunjung akan lebih banyak mendownload konten untuk ditampilkan, dan bagi mereka yang memiliki koneksi internet yang lambat, konten-konten tersebut akan menjadi lebih lama dimuat oleh browser.

Segala hal mengenai kecepatan adalah bahwa orang hanya memperhatikan ketika itu tidak ada. Jika website Anda cepat untuk dimuat, sebenarnya pengunjung tidak akan pernah menyadarinya, namun ini akan membuat pengunjung akan terus mengunjungi website Anda.

2. Halaman Website Anda Harus Menjadi Yang Pengunjung Butuhkan.

Menulis untuk web berbeda dengan menulis untuk media cetak. Orang kebanyakan akan mencari sebuah keyword pada search engine untuk menemukan sebuah tulisan yang singkat, ringkas, dan langsung memberikan jawaban, tanpa harus menscroll terlalu panjang untuk membaca.

Anda ingin isi dari halaman Anda memberikan apa yang pengunjung inginkan secara cepat, tetapi memberikan detail yang cukup bari mereka dari A hingga Z. Ini terutama bagi Anda yang banyak memiliki banyak konten berupa text pada website anda.

3. Halaman Website Anda Perlu Navigasi Yang Jelas dan Mudah.

Anda tentunya tidak ingin pengunjung website Anda terjebak pada suatu halaman tanpa tahu dimana jalan keluarnya dimana. Disini Anda harus menyediakan sebuah ‘kompas’ bagi mereka berupa navigasi. Navigasi yang ada pada halaman website Anda haruslah jelas, langsung, dan mudah digunakan. Anda juga mungkin membutuhkan gaya tradisional website yaitu dengan menyajikan anchor link untuk membantu menemukan jalan mereka ke suatu halaman.

4. Anda Harus Menggunakan Sprites dan Gambar Kecil. 

Gambar kecil adalah mengenai kecepatan didownload, dan bukan mengenai ukuran fisik (piksel). Web designer sering membuat website agar tampil menarik jika mereka menggunakan gambar yang tidak terlalu besar. Namun, bukan hal yang disarankan jika Anda langsung menggunakan gambar hasil fotografi ataupun vector resolusi tinggi kedalam website Anda tanpa me-resize nya terlebih dahulu ke ukuran web.

Sprite CSS juga merupakan cara yang sangat penting untuk mempercepat gambar pada webpage Anda agar lebih cepat dimuat. Jika Anda memiliki beberapa gambar yang digunakan di beberapa halaman pada website Anda (seperti icon navigasi atau logo website Anda), Anda dapat memanfaatkan sprite untuk cache gambar, sehingga gambar-gambar tersebut tidak perlu didownload ulang pada halaman selanjutnya yang pengunjung kunjungi. Dan juga, dengan gambar berukuran besar yang disimpan pada cache, akan mengurangi request HTTP pada halaman Anda, yang mana ini adalah akan meningkatkan kecepatan akses website Anda.

5. Anda Harus Menggunakan Komposisi Warna Yang Sesuai

Warna sagat penting pada halaman web, tetapi warna memiliki arti tersendiri kepada pengunjung, dan menggunakan warna yang salah dapat menimbulkan konotasi yang salah jika Anda tidak berhati-hati. Halaman web Anda akan mudah untuk ditemui dibelahan bumi manapun selama ada koneksi internet. Jadi Anda harus berhati-hati dalam memilih komposisi warna yang Anda gunakan pada halaman website Anda, karena orang akan memiliki penilaian tersendiri terhadap warna yang Anda gunakan.

6. Anda harus ‘Think Locally and Write Globally’.

Seperti yang disebutkan diatas, bahwa website dapat diakses diseluruh dunia dan bersifat global. Jadi Anda harus memastikan bahwa hal-hal seperti mata uang, pengukuran, tanggal, dan waktu yang jelas (yang menjadi standard internasional) sehingga semua pembaca diseluruh dunia tahu persis apa maksud dari website Anda.

7. Anda harus mengeja semua kata dan kalimat dengan benar. 

Banyak orang yang tidak toleran terhadap kesalahan ejaan. Anda bisa saja menulis segalanya didalam website jika Anda tidak memperhatikan pengejaan kata. Ini mungkin adalah hal yang sederhana, tapi orang-orang akan menilai website Anda sebagai website yang berkualitas dari tulisan, dan ejaan dan tata bahasa,kesalahan dalam pengejaan merupakan indikator yang jelas dari kualitas bagi banyak orang.

8. Link Yang Anda Pakai Harus Bekerja Seperti Yang Diharapkan.

Jika Anda memberikan sebuah link reverensi pada konten website Anda, pastikan link tersebut merujuk pada halaman yang dimaksud, jangan sampai ada kejadian link tersebut diklik oleh pengunjung, dan pengunjung mendapati link tersebut tidak ditemukan, rusak, atau kadaluarsa. Jadi penting untuk menggunakan HTML validator dan link checker untuk membantu Anda memeriksa halaman tersebut masih aktif/rusak atau tidak.

9. Anda Harus Berhati-hati Dalam Menggunakan “Klik di sini”

Menganotasi sebuah link berararti bahwa Anda harus menulis link yang menjelaskan kemana pembaca selanjutnya harus pergi, dan apa yang akan mereka temukan disana. Dengan membuat link yang jelas dan pengantar yang jelas, akan membuat pengunjung ingin untuk mengekliknya.

Anda harus memberikan pendahuluan yang jelas dan tepat agar membantu pengunjung memahami dan sebelum mengeklik ‘klik di sini’ dan agar pengunjung yang berusia tua yang mungkin tidak paham apa yang dimaksud dengan ‘klik di sni’ menjadi tahu maksud Anda menaruh ‘klik di sni’. Anda tidak harus menggunakan ‘klik di sini’ sebagai teks link apapun, dan Anda dapat menggantikannya dengan link terkait dengan memberikannya sedikit deskripsi singkat.

10. Anda Harus Menyediakan Informasi Kontak

Banyak web designer merasa tidak nyaman dengan informasi kontak di situs web mereka. Rasanya seperti pelanggaran privasi. Anda mungkin berpikir “tapi bagaimana jika mereka benar-benar menghubungi saya?” Memang benar, itu bisa terjadi. Tapi kebanyakan kontak yang Anda terima akan berhubungan dengan situs Anda. Maka dari itulah Anda dianjutkan untuk tetap memberikan beberapa cara untuk menghubungi Anda, karena hal tersebut penting bagi sebuah situs web.

Informasi kontak mengingatkan orang bahwa situs tersebut dikelola oleh orang lain. Ini berarti mereka mungkin lebih peduli dan lebih bersedia untuk menghargai Anda sebagai pemilik website ketika mereka membuat kontak. Ditambah dengan meletakkan informasi kontak di situs Anda, Anda membantu pembaca Anda mempercayai Anda. Jika ada alamat email atau nomor telepon, mereka tahu bahwa mereka dapat menghubungi Anda jika ada masalah.

Dan akhirnya, jika Anda memiliki informasi kontak di situs Anda, yang perlu dilakukan adalah menindaklanjuti kontak tersebut. Menjawab kontak Anda adalah cara terbaik untuk membuat pengunjung tahan lama dan akan sering mengunjungi website Anda.

Dikutip dari Technology About.Com

The post appeared first on rectmedia.com

Lalu bagaimana caranya kita memanfaatkan gambar agar dapat kita aplikasikan dalam merancang atau mengatur/customize website miliki kita sendiri? Walaupun sebenarnya kita juga memerlukan kontent yang berupa text seperti artikel didalamnnya sebagai konsumsi pengunjung dan bukan hanya gambar yang cantik saja yang kita pamerkan.

Dibawah ini Anda akan menemukan beberapa tips dasar, yang bisa jadi akan efektif agar situs yang Anda miliki membuat pengunjungnya terus tertarik dan terlibat di dalamnya.

Full Screen Images

Hingga pada saat ini, tren web desain Full Screen Images masih menjadi pilihan dan menjadi tren utama di tahun 2013 hingga 2014 ini. Banyak situs yang mengambil keuntungan dari web design ini dan dikombinasikan dengan kerangka responsive yang bisa diakses pada gadget apapun dengan ukuran screen berapapun. Selain akan lebih menarik, pengunjung akan lebih nyaman melihat jika Anda menggunakan gambar vector ataupun gambar hasil fotografi yang menarik.

Konsep dasar full screen images sendiri berasal dari desain portfolio, dengan mengambil salah satu gambar yang menarik dan kita biarkan rasa ingin tahu pengunjung website memandu mereka untuk menjelajahi website Anda. Namun berikanlah informasi yang akurat dan biarkan pengunjung mengetahui tujuan atau informasi yang disajikan pada website Anda dengan mengombinasikan konten yang lain yang berupa text atau video. Dan bagi mereka yang memiliki hobi fotografi ataupun desain grafis, mereka dapat memerkan hasil karya mereka ke dalam website tersebut dengan menyajikannya secara full screen sebagai latar belakang.

Image With Type

Masih serupa dengan full screen image, tapi ini masih sangat efektif yaitu tren menggabungkan teks dan gambar. Pendekatan ini dapat meringkas penggunaan website dengan konten berskala besar menjadi satu konsep single page. Contohnya adalah situs Tinke. Dimana situs ini dapat meringkas penggunaan halaman yang banyak menjadi satu halaman saja. Dengan dikombinasikan parallax scrolling design.

Ketika sebuah website disajikan dengan gambar, kita tentu saja mulai mencari semacam subjek untuk fokus pandangan kita. Dengan menambahkan teks, desainer memanipulasi hasrat bawaan ini. Namun, efek ini tidak berlaku pada semua foto. Sering kali Anda hanya akan melihat foto yang sengaja di beri efek kabur atau de-saturated. Ini adalah cara yang umum untuk membatasi apapun gangguan visual dalam gambar sehingga informasi yang disuguhkan akan lebih tepat sasaran. Sebagai contohnya adalah website Diehlgroup.com yang memaipulasi gambar dengan efek hitam putih dan blur. Sehingga ketika memberikan text di atasnya, text tersebut yang akan menjadi dominan.

Images For Navigation

Salah satu tren kegunaan yang telah mulai mendapatkan popularitas adalah dengan melibatkan gambar sebagai bentuk navigasi. Aplikasi seperti Pinterest dan Facebook telah mengajarkan pengguna untuk mengklik gambar berukuran tertentu untuk menuju halaman yang lain. Banyak situs telah mulai merangkul gaya ini dengan hanya membatasi teks navigasi khas mereka dan menambahkan efek on-hover pada foto mereka.

Pendekatan ini sering dapat mengambil efek yang unik jika ditata dengan warna, tata letak dan teks efek. Contohnya adalah situs Bergerfohr.com yang berhasil memadukan antara teks, dan gambar menjadi sebuah efek animasi yang unik.

Images As Texture

Dan yang terakhir, cara cepat dan mudah untuk memanfaatkan gambar adalah dengan hanya menggunakan mereka sebagai bentuk tekstur. Perhatikan bagaimana situs Microarts menggunakan kayu untuk menambah ketajaman dan kejelasan pada situs mereka. Tekstur alami dan tone yang seimbang membuat konten lebih menjonjol. Sehingga pengunjung akan terus tertarik untuk mengunjunginya.

Meskipun ada tren dan konsistensi dalam desain web, biasanya tidak ada jawabannya yang ‘salah’ dalam bereksperimen. Selama ada usaha dan selama jalur mata tidak terhalang karena ketidak seimbangan komposisi website, dan informasi yang disajikan sesuai, pintu terbuka lebar untuk kreativitas.

The post appeared first on rectmedia.com

Hal ini bisa anda buktikan dengan melihat sumber kode halamanya melalui bantuan view page source atau inspect elemetn yang tersedia pada browser anda, atau jika menggunakan browser firefox bisa menkan CTRL + U.

Mungkin bagi sebagian anda yang sudah faham tentang HTML dan CSS dengan melihat kode-kode tersebut anda sudah paham dengan struktur webiste yang anda kunjungi, sangat sederhana dan mudah untuk dimengerti. Itu karena situs tersebut dibangun dengan menerapkan teknologi css.

Apakah CSS Mempengaruhi SEO Pada Sebuah Website? Lalu apakah CSS lebih baik daripada SEO?

SEO yang merupakan kependekan dari Search Engine Optimization memiliki peranan cukup penting dalam upaya meningkatkan jumlah kunjungan yang berasal dari mesin pencari. Karena akan membantu anda dalam membangun reputasi nama sebuah website di Internet.

Penggunaan css yang baik diyakini manjur dalam upaya meningkatkan kualitas seo karena beberapa hal, yaitu :

• Ukuran file yang kecil akan mempermudah mesin pencari menelusuri setiap halaman yang terhubung di website anda
• Minimnya penggunaan perintah html akan memudahkan mesin pencari memilah mana yang kode html dan mana yang konten
• Pemanfaatan struktur dokumen html yang jelas dapat membantu mesin pencari menentukan mana informasi yang menjadi prioritas kata kunci/keyword dengan informasi biasa
• Dengan menggunakan css maka fungsi-fungsi yang sebelumnya dilakukan dengan javascript atau komponen lainnya bisa diminimalkan sehingga hasil pencarian oleh pengunjung lebih objektif

Dengan css apakah website anda dikatakan sudah SEO dan akan tampil di halaman depan hasil pencarian search engine? 

Ini bukan merupakan janji pasti, karena banyak faktor lagi yang bisa mempengaruhi hal tersebut seperti banyaknya pesaing, kombinasi konten atau kata kunci yang ada di website anda, isi tulisan, trend musiman, bahkan bisa dipengaruhi oleh keberuntungan.

Jadi penerapan css dalam hal seo hanya salah satu usaha untuk memudahkan mesin mencari/searchengine mengumpulkan informasi yang ada dalam website anda.

Dikutip dari Zainalhakim.web.id

The post appeared first on rectmedia.com

Apakah anda tahu, tidak hanya fashion, genre musik, atau mungkin desain bangunan yang memiliki tren, namun web desain juga dari masa ke masa akan mengalami perubahan tren. Kali ini saya akan memberi ulasan mengenai Tren Web Design Tahun 2014. Berikut ulasannya.

1. Responsive Web Design
Tidak hanya di tahun 2014, pada tahun sebelumnya Responsive Web Design menjadi sangat populer karena semakin banyak berkembangnya gadget dan teknologi informasi. Dan bisa jadi pada tahun 2014 ini akan menjadi kelanjutan kepopularitasan Responsive Web Design dan akan semakin banyak inovasi-inovasi yang akan dilakukan. Dari tahun ke tahun penggunaan perangkat mobile untuk mengakses internet disertai dengan banyak variasi ukuran resolusi layar. Ini sangat menguntungkan jika target market Anda sebagian besar adalah pengguna mobile device.
Contoh Responsive Web : Hijausubur.com

2. Support Retina Display
Semakin kesini teknologi pada layar gadget semakin mengalami peningkatan teknologi. Retina Display merupakan teknologi yang dipakai pada produk-produk buatan Apple.Inc yang biasa kita ketahui seperti Macbook pro, iPhone4, iPad. Retina display memiliki tingkat kepadatan pixel yang tinggi. Dan ini sangat dipertimbangkan oleh kebanyakan web developer di dunia. Retina display adalah sebuah tampilan layar dimana mata manusia tidak dapat melihat pixel-pixel di dalamnya.
Contoh website yang support retina display : Nimble.dream-demo.com

3. Simple Web Design
Tidak dapat dipungkiri bahwa kecepatan akses internet sudah menjadi kebutuhan, baik pengguna desktop maupun mobile device. Selain akses internet yang cepat adalah mengakses website tanpa ada halangan apapun sehingga informasi yang didapat menjadi lebih tepat sasaran dan tersampaikan dengan waktu yang singkat. Mungkin dulu kita berfikir bahwa dengan memiliki banyak konten pada website dan tampilan yang ramai akan menarik banyak orang untuk mengakses, namun saat ini desain web yang minimalis dan praktis menjadi kegemaran banyak kalangan. Sama halnya dengan membangun rumah, tren saat ini adalah rumah yang minimalis dan tidak banyak sekat yang menghalangi. Sesuai dengan kondisi orang sekarang ini yang makin dinamis, karena itu sangat sesuai jika tampilan website pun menyesuaikan dengan pola pikir orang sekarang.
Contoh website memiliki desain Simple Web : Kusadesign.co

4. Flat Web Design
Pada tahun 2013 jenis web design satu ini juga sangat populer, seperti halnya Responsive web design. Kenapa menjadi tren? Website ini lebih mengusung design yang sederhana. Tanpa banyak memberikan efek-efek pada CSS seperti shadows, emboss, gradient dll, Flat Web Design benar-benar desain dengan efek tampilan 2 dimensi saja. Namun menentukan konsep flat desain tidak sesimple kedengarannya. Jika tidak benar-benar memahami konsepnya, maka Anda akan terjebak pada bahaya flat desain.
Contoh website Flat Web Design : Omadahealth.com

5. Parallax Scrolling
Sebuah teknologi yang tergolong baru meskipun sudah populer juga di tahun 2013. Parallax scrolling adalah tehnik scroll dimana background dan foreground gambar maupun teks bergerak seperti animasi sesuai dengan scroll yang user lakukan. Ini memberikan kesan website lebih hidup.
Contoh Parallax Scrolling web : Ihatetomatoes.net

6. Background Besar
Background yang menggunakan foto berukuran besar, dulu sangat mengganggu. Tapi sekarang seiring dengan perkembangan koneksi internet yang semakin cepat, tidak masalah berkreasi dengan background yang memenuhi halaman web. Background yang besar tidak lagi menjadi masalah pada saat loading, tapi pertanyaannya adalah apakah background besar seperti ini sesuai dengan wesitenya?
Dengan asumsi desain dan citra yang tepat, web designer dapat menghubungkan background besar ke dalam desain websitenya. Karena itu harus jeli apakah website yang dibangun akan cocok dengan background full. Pada dasarnya background besar ini berfungsi untuk meningkatkan user experience.
Contoh website yang full background : Shopatvelvet.com

7. Video Background
Disamping adanya tren background besar, muncul video background yang awalnya juga ada kekhawatiran yang sama dari para pengguna, yaitu loading yang berat dan lama. Sementara itu untuk browser lama mungkin ada kesulitan menampilkan video background ini secara halus. Namun dengan teknologi internet yang mendukung hal ini sangat tidak mustahil untuk diaplikasikan pada desain website. Dan tren ini bekerja pada browser baru yang dapat menampilkannya dengan halus guna menambah sentuhan cantik pada sebuah desain web.
Yang harus digaris bawahi pada tren video background adalah, ini tidak dirancang untuk menjadi fokus utama pada sebuah website, melainkan sebagai pendukung desain dan konten.Karena pada tampilan layar smartphone, video background akan disembunyikan, sehingga pengguna smartphone tidak perlu khawatir mendowload file yang besar.
Whiteboard.is adalah salah satu diantara sekian banyak website yang menggunakan tren ini.

8. Fixed Header Bar
Bagian yang menantang saat membuat website adalah bagaimana website mudah dinavigasikan oleh pengunjung. Pada website-website yang biasanya kita temui, bar menu ada pada header di dekat logo. Dan ketika Anda scroll ke bawah, maka menu tersebut ikut menghilang bersama header. Ini membuat Anda harus scroll ke atas lagi untuk menemukan bar menu lagi. Dengan halaman web yang lebih panjang dan mobile browser, mengakses menu dengan cara ini menjadi lebih sulit. Karena itu banyak web yang memperbaiki header bar ke atas jendela browser, yang memungkinkan untuk mengikuti pengunjung ketika mereka scroll ke bawah. Memiliki navigasi yang tetap berada di bagian atas jendela browser memungkinkan pengunjung cepat mengakses menu. Dan header bar ini tidak mengambil banyak ruang lebih. Fixed header bar ini berguna juga sebagai dorongan atau saran yang halus kepada pengunjung untuk menelusuri lebih jauh ke dalam website tersebut.
Contoh website dengan Fixed Header Bar : Imaginista.ca

9.Non Boring Typography
Web designer biasanya bereksperimen dengan typography. Dan salah satu tren tahun 2014 ini yang bisa kita lihat adalah tren “Fonts with personality”. Maksudnya disini adalah berkreasi dengan font yang terlihat berdiri sendiri. Bukan font pada golongan serif ataupun san-serif. Web Designer menciptakan font yang berbeda untuk memunculkan citra khas, uniq dan menambahkan sedikit kepribadian mereka di dalamnya.
Contoh website dengan typography yang unik : Ryanscherf.net

10. Skema Warna Simple
Di tahun 2014 ini kita akan melihat lebih bayak website dengan skema warna yang sangat sederhana. Sederhana disini benar-benar hanya menggunakan sedikit varian warna dalam satu sedain website. Bisa 1-2 warna saja. Penggunaan skema warna sederhana ini bisa dikatakan datang bersama dengan tren flat design, tetapi tidak selalu.
Contoh website dengan skema warna simple : GetUikit.com

10 Tren web design di atas mungkin akan bertambah di tahun 2014 ini, karena variasi yang di buat oleh web developer semakin berkembang. Dan itu semua tergantung dari kebutuhan pemiliki website.

Dikutip dari Argiacyber.

The post appeared first on rectmedia.com