Gaya UI Web Umum

Saya harus mempresentasikan prototipe aplikasi web di hari-hari berikutnya kepada salah satu klien saya, masalahnya adalah saya tidak begitu pandai dalam CSS dan yang terburuk dari semuanya saya hampir tidak pernah senang dengan hasil yang saya dapatkan.

Pengkodean logika bisnis tidak menimbulkan tantangan bagi saya, namun desain UI membutuhkan lebih dari 80% waktu saya. Saya tidak perlu ada yang mempesona, hanya lingkungan yang bersih, bagus dan rapi, contoh:

Ini adalah masalah berulang yang saya alami, saya berharap pengembangan UI web dapat memiliki gaya default yang tidak terlalu telanjang , pendekatan yang mirip dengan Visual Studio atau iPhone SDK akan sangat berguna bagi saya.

Maket di atas yang dibuat dengan Balsamiq Mockup adalah contoh yang bagus, semua "komponen" paling umum tersedia untuk digunakan, dan yang terbaik dari semuanya: hanya ada satu gaya yang bagus untuk dipilih.

Apakah ada yang seperti ini di web? Kerangka CSS atau Javascript UI yang netral namun bagus?

Opsi sejauh ini:

• Bootstrap
• Qooxdoo
• jQuery UI
• Alat jQuery
• MochaUI
• Ext JS
• Yahoo! Perpustakaan Antarmuka Pengguna
• BlueTrip
• BluePrint
• Uki ( Demo )
• Napkee
• YAML
• Dasar
• iPlotz
• Sproutcore
• ForeUI

Saya tertarik untuk mengetahui apakah ada kerangka kerja UI khusus CSS.

Saya menemukan halaman ini dengan daftar Perpustakaan UI Web yang sangat bagus , tetapi kebanyakan dari mereka (setidaknya yang bagus) tampaknya khusus untuk Java, apakah ada alternatif yang sama baiknya dalam CSS atau JS murni?

PS: Saya tidak tertarik dengan AJAX, efek, perilaku dan sebagainya ... perhatian utama saya (satu-satunya) adalah gaya.

Terima kasih atas semua saran semuanya!

Setelah mempertimbangkan dengan cermat semua pustaka UI yang disarankan, saya sampai pada kesimpulan bahwa ExtJS dan Qooxdoo adalah yang paling sesuai dengan kebutuhan saya. jQuery UI tampaknya menjanjikan tetapi hanya menawarkan sejumlah kecil elemen.

Sejauh pustaka hanya CSS, saya telah menemukan BlueTrip / BluePrint dan tema yang disarankan oleh tambler untuk menjadi yang terbaik. Selain itu, Flex dan Napkee juga sepertinya patut untuk ditelusuri.

Saatnya mempelajari ExtJS sekarang! =)

Saya tidak percaya tidak ada yang menyebutkan:

http://www.extjs.com/

Ini adalah kerangka kerja js komersial, tetapi cukup terjangkau, dan membuat menyusun UI yang bagus menjadi mudah. Ada set elemen yang jauh lebih lengkap daripada jqueryui, dan dirancang untuk membuat aplikasi secara keseluruhan. Saya hanya bermain-main sedikit, tapi sejauh ini saya sangat menyukainya. Gratis untuk penggunaan pribadi.

Jika Anda benar-benar ingin merasakan UI lengkap yang dikembangkan dengan EXT, coba url ini:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

Kombinasi 960gs untuk tata letak dan jQuery-UI untuk gaya mungkin adalah yang Anda cari.

Anda juga dapat mempertimbangkan kerangka kerja CSS cetak biru daripada 960gs.

Bagaimana dengan menggunakan dojo dan dijit ?

Dijit adalah cara cepat untuk membuat widget dan elemen. Itu juga dilengkapi dengan 3 tema default yang mudah dimodifikasi.

Daftar bagus dari berbagai widget di sini

Berpasangan dengan seseorang yang berspesialisasi dalam desain UI.

Jika Anda lebih baik dalam menangani logika bisnis, lebih baik waktu Anda dihabiskan secara eksklusif untuk mengkodekan logika bisnis sehingga Anda dapat menguasainya. Ini akan mengharuskan Anda untuk belajar bagaimana berinteraksi dengan orang lain yang unggul dalam presentasi. ( xml dan json adalah cara umum)

Logika bisnis dan presentasi sangat berbeda. Merancang sistem yang tidak hanya terlihat bagus, tetapi juga intuitif dan mudah digunakan cukup sulit. Sama sulit dan memakan waktu seperti membangun cara kerja bagian dalam dari aplikasi yang kompleks.

Antarmuka yang baik tidak sesederhana menyertakan kerangka css.

Saya menganggap diri saya sebagai programmer yang lebih 'kreatif' yang unggul dalam presentasi. Saya kebetulan cukup beruntung untuk bertemu dengan seseorang yang, pertama-tama ... sangat termotivasi, dan yang kedua sangat ahli dalam 'logika bisnis'. Dia memiliki lebih banyak pengalaman dalam merencanakan dan mengimplementasikan sistem yang kompleks, sementara saya terutama berfokus pada desain antarmuka.

Jika Anda lebih produktif melakukan arsitektur sistem, perencanaan, pengembangan, apa pun ... Anda harus mendorong diri Anda sendiri ke arah itu. Sementara proyek pengembangan tunggal bisa jadi cukup memuaskan, saya melihatnya tidak efisien. Sangat jarang seseorang memiliki keterampilan untuk mengembangkan aplikasi tingkat atas sendirian.

Tantangannya adalah menemukan seseorang yang bekerja dengan Anda dengan baik.

Lihat Google Web Toolkit . Ini memiliki tampilan default yang cukup bersih. Mereka punya contoh . Secara khusus, contoh Showcase mereka mendemonstrasikan semua widget yang tersedia dan gaya css yang digunakan untuk mendapatkan tampilan tersebut.

Ada beberapa kerangka kerja yang ditujukan untuk (G) Desain UI; Qooxdoo , JQuery UI dan MochaUI adalah beberapa di antaranya (meskipun yang terakhir lebih merupakan bukti konsep daripada kerangka kerja yang dapat digunakan). Kerangka kerja ini biasanya menawarkan berbagai elemen yang didukung JS (elemen formulir, seperti bidang masukan dan tombol kirim, tetapi elemen lain seperti tab juga). Namun, Anda tetap bebas untuk memposisikan elemen-elemen ini, dan mungkin menatanya, sesuai keinginan Anda.

Mungkin membiasakan diri dengan kerangka CSS (seperti 960GS ) dapat melengkapi Kerangka Kerja JS UI di atas.

(Sebagai penafian pribadi; Saya hanya memiliki sedikit pengalaman dengan kerangka kerja yang disebutkan di atas. Tapi saya yakin Google atau SO dapat memberikan jawaban yang saya tidak bisa.)

Ini tidak akan membantu Anda untuk proyek Anda saat ini, tetapi ini layak dipertimbangkan untuk proyek masa depan. Setelah menghabiskan bertahun-tahun membuat aplikasi GUI dalam HTML 4 dan terus-menerus berjuang melawan keterbatasan CSS dan HTML, saya pikir saya akan mencoba Adobe Flex. Suatu peningkatan!

Daripada memalsukan kontrol halaman tab atau kisi data, dengan Flex atau Silverlight, markup Anda dapat dengan mudah menentukan kontrol halaman tab atau kisi data. Dan kerangka kerja hadir dengan gaya default yang membosankan tetapi tidak buruk sama sekali. Saya tidak mengatakan ini sepenuhnya menggantikan HTML, tetapi jika Anda membutuhkan widget dan tata letak GUI, saya yakin itu adalah alternatif yang jauh lebih baik.

Anda dapat mempertimbangkan untuk menjelajahi situs berikut:

http://themeforest.net/category/site-templates/admin-skins

Ada beberapa tema "Administratif" yang tersedia untuk dibeli di sini yang mungkin sesuai dengan kebutuhan Anda.

mockup wireframe seperti itu adalah cara yang brilian untuk memulai.

Setelah menggunakan sebagian besar framewroks UI yang dibahas di sini, saya ingin mengarahkan Anda ke jQueryUi karena alasan berikut:

1. Kerangka CSS jQueryUI menangani CSS yang konsisten dan tampak keren untuk Anda (sangat mudah - cukup buat markup dan terapkan kelas)

2. jQueryUI memiliki tabcontrol, dan banyak cara yang cepat dan mudah untuk mengatur gaya formulir.

Jika Anda menargetkan browser modern, non IE, maka Anda harus memeriksa Sproutcore . Untuk mockup saya menggunakan mockingbird .

Kerangka kerja PHP yang relatif baru yang dirancang khusus untuk pengembangan perangkat lunak yang berfokus pada UI. Elemen yang Anda miliki di sini termasuk Tab, Filter, dan Kisi disertakan dan akan membawa Anda sekitar 20 baris kode untuk diterapkan.

http://agiletoolkit.org/

Sudahkah Anda mencoba Axure ? Ini adalah alat untuk membuat wireframe, prototipe, dan spesifikasi dengan cepat untuk aplikasi dan situs web.

Ini bekerja dengan cara yang mirip dengan Balsamiq, tetapi memungkinkan Anda untuk mengekspor wireframes / prototipe Anda sebagai HTML, CSS dan Javascript.

Anda kemudian dapat mengunggah ini ke server atau menjalankannya di komputer Anda sebagai contoh yang berfungsi.

Anda dapat membuat formulir, tautan, tab, rollover, efek Javascript.

Jika Anda sudah menggunakan Balsamic Mockups untuk prototipe Anda, maka Anda harus mempertimbangkan Napkee . Mengutip situs web "Napkee memungkinkan Anda mengekspor Balsamiq Mockups ke HTML / CSS / JS dan Adobe Flex 3 dengan satu klik tombol."

Saya mengalami ini beberapa waktu yang lalu, dan tidak dapat menemukan apa pun, jadi saya menganggapnya sebagai kesempatan untuk belajar css. Tetapi sejak saat itu tampaknya langkah besar telah dibuat untuk subjek ini.

• Meringkas masalah Anda, ada halaman wikipedia .
• Ada yaml-css , yang mengambil yaml dan mengubahnya menjadi css
• Ada dasar , tetapi mengasumsikan beberapa pengetahuan css.
• Saya juga menyarankan untuk melihat Adobe Dreamweaver . Mereka memiliki banyak alat penghasil css dan gaya yang menghasilkan kode yang sangat mudah dibaca dan kompatibel dengan w3c.

Saya harap itu membantu.

Kombinasi 960gs untuk tata letak dan alat jQuery-UI atau Jquery sangat bagus. Saya menggunakannya hampir di setiap proyek tetapi saya ingin menambahkan ke http://easyframework.com/ meskipun tidak ramah bisnis jadi pastikan untuk memeriksa lisensinya tetapi saya menyukainya

Baru-baru ini saya menemukan situs web bagus bernama iplotz.com di mana Anda dapat membuat mockup aplikasi / situs web / proyek Anda secara online tanpa menginstal apa pun. Ia juga memiliki sebagian besar kontrol umum, bersama dengan lebih banyak fitur untuk mengelola seluruh proyek dan membagikannya dengan orang lain secara online.

Harus saya akui, saya sendiri belum mencobanya, tetapi saya melihatnya sedikit dan sepertinya cukup keren. Saya mungkin akan segera menggunakannya.

Sass sepertinya memiliki potensi sebagai cara untuk mengurangi beberapa sakit kepala css.

Saya suka menambahkan Bootstrap itu intuitif, dan kerangka kerja front-end yang kuat untuk pengembangan web yang lebih cepat dan lebih mudah.

Saya suka RocketCSS . Desain bersih yang bagus, cobalah.