10 Harika UX/UI Tasarım Hile Sayfaları

Yayınlanan: 2019-12-10

Kaydedilecek UX/UI Hile Sayfaları

Herkesin bazen biraz yardıma ihtiyacı vardır, profesyoneller bile. Her küçük ayrıntıyı hatırlamak zor. Arada bir, bir anlığına unuttuğunuz temel bilgileri aramaya başlarsınız. Bu ne büyük bir zaman kaybı olabilir. Bu nedenle, gününüzü geçirmenize ve en iyi UX stratejilerine sahip olmanıza yardımcı olacak bazı popüler tasarım hile sayfalarını araştırdık ve topladık.

Bu stratejiler yardımcı olduysa, web sitenizin UX tasarımını geliştirirken bu ipuçlarına da göz atmayı unutmayın.

1. iOS 7 Tasarım Hile Sayfası

iOS 7'nin piyasaya sürülmesi, arayüzde birçok değişiklik getirdi ve tasarımcıların görsel dillerini iOS'un yeni düz tasarımına uyacak şekilde uyarlamaları gerekecek. Izgara sistemleri, boyutlar, tipografi ve ikonografi Apple tarafından güncellendi. Ivo Mynttinen, geliştiriciler ve tasarımcılar için iOS 7 için bilmeniz gereken tüm bilgileri kapsayan bir hile sayfası (güncellenmiş) oluşturacak kadar zarif davrandı:

    • Tüm cihazlarda çözünürlük
    • Bilgileri tüm cihazlarda görüntüleyin
    • Uygulama simgesi boyutları (yuvarlak köşe tasarımındaki değişiklikler ve Apple'ın iOS7 için henüz yayınlamadığı için bir şablonun nereden alınacağı hakkında bilgiler dahil)
    • Kullanıcı arayüzündeki değişikliklerle ilgili ayrıntılar
    • Bir uygulama tasarlarken faydalı bulacağınız diğer kaynakların kısa bir listesi

Bu, her küçük ayrıntıyı aramak zorunda kalmayacağınız için zamandan ve emekten tasarruf etmenizi sağlayacaktır. Bunu kullanarak kendi listenizi derlemeniz gerekmeyecek. Ayrıca, konuyla ilgili en kapsamlı sayfalardan biri ve harika bir şekilde organize edilmiş.

Çözünürlük ve Ekran Özellikleri

2. Android Tasarım Hile Sayfası

Elbette, sizin için benzer bir Android tasarım hile sayfası da ekliyoruz. Bu, Double Encore, Inc.'de Mobil Tasarımcı olan Meghan Dever tarafından tasarlanan muhteşem bir bilgi grafiğidir. Android için tasarım kılavuzunda bu bilgiler mevcuttur, ancak bu tatlı hile sayfasında onu bulmak ve okumak çok daha kolaydır.

Şirkette dahili kullanım için oluşturuldu, ancak bunun çok yararlı bir zaman tasarrufu olduğunu düşündüler ve bunu tüm toplulukla paylaşmak istediler. Bu ile birlikte gelir:

    • Android metin alanları, arama çubukları, döndürücüler, seçiciler, anahtarlar ve kullanım durumları
    • Optik sınırlar yerleşim özelliklerinin eklenmesiyle 9 yamalı varlıklar
    • Android cihaz boyutları ve bunlarla ilişkili öğe boyutları
    • UI öğeleri için uygun dolgu
    • Eylem çubuğu, bağlamsal ve başlatıcı simgesi özellikleri
    • Dp'den px'e dönüşümler

Android Tasarım Hile Sayfası

3. Renk İnfografik Psikolojisi

Tamam, renk psikolojisini kapsayan fazlasıyla tablo var ama diğerlerinden çok daha kapsamlı olduğu için bu benim favorim. Yalnızca temel bilgileri (kırmızı, sarı, mavi, mor, yeşil) kapsamak yerine, size 50 farklı rengin tanımını verir. Ayrıca sadece olumlu duygu ve fikirleri değil, aynı zamanda çeşitli renklerin ilişkilendirilebileceği olumsuz olanları da kapsar.

Psikolojinin Rengi

4. HTML5 Hile Sayfası

9/9/16 Güncellemesi: Bu sayfa artık mevcut değil.

Bu, HTML5'i yeni öğreniyorsanız veya beyniniz osuruk yapıp bir etiketi unuttuysanız harika bir referans sayfasıdır. Bu kapsamlı bir listedir ve size etiketlerin yanı sıra gerçekten de oldukça faydalı bilgiler verir. Etiketlerin nerede kullanılabileceği ve hangi tarayıcıların, cihazlarda bile neyi desteklediği ile ilgili ekstra ayrıntılara girer. Şunlarla birlikte gelir:

    • HTML5 için çıkan yeni etiketler
    • Hâlâ HTML5 için kullanılabilen HTML4'teki mevcut etiketler
    • HTML5'te kullanılmayan eski etiketler
    • Nitelikler ve onlar için de eski ve yeni olan şeyler
    • Bir tarayıcı hazırlık tablosu

HTML5 Hile Sayfası

5. Ninja UX Hile Sayfası

UX sürecinin araştırma aşaması için Hilary Little'ın CodeFest açılış konuşması için hazırladığı bu harika hile sayfasına göz atabilirsiniz. Kullanıcıları test ederken akılda tutulması gereken birkaç en iyi uygulamadır.

Bu, profesyoneller için temel bilgilerin bir başka harika hatırlatıcısıdır ve yeni ve bazı iyi tavsiyelere ve ipuçlarına ihtiyacı olan herkes için mükemmeldir. Ayrıca buradaki açılış konuşmasından sunumuna da göz atabilirsiniz. Bu, hile sayfasını oldukça iyi tamamlayacak ve ilk UX tasarımcısına veya girişimcisine harika bir yön verecektir.

Ninja UX Bilgi Grafiği

6. Hile Sayfası Web Formu Tasarımı

Smashing Magazine bize bu güzelliği getirdi, biz de kullanalım ve paylaşalım. Harika formlar tasarlamak için açıklayıcı bir hile sayfasıdır. Bu beşik sayfasının tasarımcıları, formları tasarlama ve test etme konusunda çok bilgilidir.

En yaygın sorunları bulmaya ve bunları nasıl düzelttiklerini açıklamaya karar verdiler, ardından hepsini bu harika tasarımcı hile sayfasına koydular. Herkesin formunu daha iyi hale getirmek için bir şeyler yaratmak istediler. İndirmeniz için Omnigraffle şablonunun yanı sıra Photoshop (PSD) ve PDF örnekleri içerir. Mükemmel tavsiyeler, yapılması ve yapılmaması gerekenler ve kullanabileceğiniz bazı düzen örnekleri ile birlikte gelir.

Form Tasarımı

7. jQuery Hile Sayfası

Bu, bir şeyi hatırlayamadığınızda referans olarak kullanabileceğiniz harika bir organize edilmiş jQuery öğeleri listesidir. Bu şeylerin ne kadar kullanışlı olabileceğini bilen bir web tasarımcısı ve geliştiricisi olan Oscar Otero tarafından yapılmıştır. Şunlarla birlikte gelir:

  • seçiciler
  • Özellikler/CSS
  • manipülasyon
  • çapraz geçiş
  • Olaylar
  • Etkileri
  • Ajax
  • Çekirdek

jquery

Bu özel tasarım hile sayfası ayrıca harika bir arama özelliği ile birlikte gelir. Aradığınız jQuery sürümünü seçebilir ve belirli seçenekleri arayabilirsiniz. Bu, hızlı ve kolay bir referans olarak elinizin altında olması için harika bir araçtır.

8. UX Terminolojisi

Bir UX tasarımcısı olarak, bir kuruluştaki birçok farklı insanla etkileşime girersiniz ve herkes argoyu bilmez. Sürekli kendini açıklamak zorunda olmasaydın harika olmaz mıydı? Bu, neden bahsettiğinizi anlamalarına yardımcı olmak için meslektaşlarınıza dağıtmanız içindir. Gelin Trozelli tarafından size getirildi ve şunları içeriyor:

  • UX uygulaması
  • UX rolleri
  • UX etkinlikleri
  • Kullanıcı arayüzü terimleri
  • UX çıktıları

UX/UI Yönergeleri

9. JQuery Simgeleri Hile Sayfası

Bu, jQuery ile yapabileceğiniz inanılmaz hızlı simgeler listesidir. Birçoğunuz bunlardan bir demet biliyor olabilirsiniz ama hadi!

Hepimiz her birini ezberleyemeyiz. Bu, aklımızın ucundaki bilgileri hatırlamakta güçlük çeken bizler için kullanışlı olacaktır. Yeni başlayanlar için de harika.

Bu size Foundeo Inc.'den Pete Freitag tarafından getirildi. Şahsen, bu benim tüm tasarımcı hile sayfalarından favorim.

JQueryUI Simgeleri Hile Sayfası

10. WordPress Hile Sayfaları

Startbloggingonline.com'dan okuyucu Mike Wallagher, geliştirdiği bu WordPress Hile Sayfalarını paylaştı. Her iki sürümü de sunduğu için bunlar hem yeni başlayanlar hem de ileri düzey kullanıcılar için harika. Onları kontrol et! Ve biraz teknik yardıma ihtiyacınız varsa , WP Buffs'tan biraz WordPress yardımı alın!

Wordpress hile sayfası
Kaynak: http://startbloggingonline.com/advanced-wordpress-cheat-sheet/

Paylaşmak istediğiniz harika tasarım hile sayfaları var mı? Aşağıdaki yorumlarda bize bildirin.