10 fantastici trucchi per la progettazione di UX/UI

Pubblicato: 2019-12-10

Cheat sheet UX/UI da salvare

Tutti hanno bisogno di un piccolo aiuto a volte, anche i professionisti. È difficile ricordare ogni singolo piccolo dettaglio. Ogni tanto finisci per cercare le basi che hai momentaneamente dimenticato. Che perdita di tempo può essere. Quindi, abbiamo cercato e raccolto alcuni popolari cheat sheet di design per aiutarti durante la giornata e aiutarti ad avere le migliori strategie UX.

Se queste strategie sono utili, non dimenticare di dare un'occhiata anche a questi suggerimenti quando migliori il design UX del tuo sito web.

1. Foglio informativo per la progettazione di iOS 7

Il rilascio di iOS 7 ha apportato molte modifiche all'interfaccia e i designer dovranno adattare il loro linguaggio visivo per adattarsi al nuovo design piatto di iOS. I sistemi di griglia, le dimensioni, la tipografia e l'iconografia sono stati tutti aggiornati da Apple. Ivo Mynttinen è stato così gentile da creare un cheat sheet (aggiornato) per sviluppatori e designer che copre tutte le informazioni che dovrai sapere per iOS 7, tra cui:

    • Risoluzioni su tutti i dispositivi
    • Visualizza le informazioni su tutti i dispositivi
    • Dimensioni dell'icona dell'app (incluse informazioni sulle modifiche al design degli angoli arrotondati e su dove ottenere un modello poiché Apple deve ancora rilasciarne uno per iOS7)
    • Dettagli sulle modifiche nell'interfaccia utente
    • Un elenco di altre risorse che troverai utili durante la progettazione di un'app

Questo ti farà risparmiare tempo e fatica ora che non dovrai andare a cercare ogni piccolo dettaglio. Usando questo non dovrai compilare la tua lista. Inoltre, è uno dei fogli più estesi sull'argomento ed è meravigliosamente organizzato.

Risoluzione e specifiche del display

2. Foglio di trucchi per la progettazione di Android

Naturalmente, stiamo includendo anche un cheat sheet di design Android simile per te. Questa è una splendida infografica progettata da Meghan Dever, un designer mobile di Double Encore, Inc. La guida alla progettazione per Android ha queste informazioni disponibili ma è molto più facile trovarle e leggerle in questo dolce cheat sheet.

È stato creato per uso interno all'azienda, ma hanno pensato che fosse un utile risparmio di tempo che hanno voluto condividerlo con l'intera comunità. Questo viene fornito con:

    • Campi di testo Android, barre di ricerca, spinner, selettori, interruttori e loro casi d'uso
    • Risorse a 9 patch, con l'aggiunta di funzionalità di layout dei limiti ottici
    • Dimensioni dei dispositivi Android e dimensioni degli elementi associati
    • Il riempimento corretto per gli elementi dell'interfaccia utente
    • Specifiche della barra delle azioni, del contesto e dell'icona di avvio
    • Conversioni da Dp a px

Foglio di trucchi per la progettazione di Android

3. Psicologia dell'infografica a colori

Ok, quindi ci sono più che sufficienti grafici che coprono la psicologia del colore, ma questo è il mio preferito in quanto è molto più ampio degli altri. Invece di coprire solo le basi (rosso, giallo, blu, viola, verde), ti dà una descrizione di 50 colori diversi. Inoltre, non copre solo le emozioni e le idee positive, ma anche quelle negative a cui possono essere associati vari colori.

Il colore della psicologia

4. Foglio di trucchi HTML5

Aggiornamento 9/9/16: Questo foglio non è più disponibile.

Questo è un ottimo foglio di riferimento nel caso in cui stai imparando HTML5 o ti è capitato di avere una scoreggia cerebrale e hai dimenticato un tag. Questo è un elenco completo e ti dà davvero un bel po' di informazioni utili oltre ai tag. Entra in ulteriori dettagli su dove possono essere utilizzati i tag e quali browser supportano cosa, anche sui dispositivi. Viene fornito con:

    • Nuovi tag usciti per HTML5
    • Tag esistenti di HTML4 che sono ancora disponibili per HTML5
    • Vecchi tag obsoleti in HTML5
    • Attributi e ciò che è vecchio e nuovo anche per loro
    • Un grafico di disponibilità del browser

Cheatsheet HTML5

5. Cheat Sheet di Ninja UX

Per la fase di ricerca del processo UX, puoi dare un'occhiata a questo fantastico cheat sheet realizzato da Hilary Little per il suo keynote di CodeFest. Sono alcune delle migliori pratiche da tenere a mente quando si testano gli utenti.

Questo è un altro ottimo promemoria delle nozioni di base per i professionisti ed è perfetto per chiunque sia nuovo e abbia bisogno di buoni consigli e suggerimenti. Puoi anche dare un'occhiata alla sua presentazione dal keynote qui. Questo integrerà abbastanza bene il cheat sheet e darà al primo designer UX o imprenditore un'ottima direzione.

Infografica Ninja UX

6. Progettazione di moduli Web cheat sheet

Smashing Magazine ci ha portato questa bellezza in modo che possiamo usarla e condividerla. È un cheat sheet descrittivo per la progettazione di grandi forme. I progettisti di questo lenzuolo per presepe sono esperti nel progettare e testare le forme.

Hanno deciso di trovare i problemi più comuni e descrivere come risolverli, quindi hanno messo tutto in questo fantastico cheat sheet di design. Volevano creare qualcosa per migliorare le forme di tutti. Contiene un modello Omnigraffle, oltre a Photoshop (PSD) e esempi PDF da scaricare. Viene fornito con ottimi consigli, cose da fare e da non fare e alcuni esempi di layout che puoi utilizzare.

Progettazione del modulo

7. Foglio informativo di jQuery

Questo è un fantastico elenco organizzato di elementi jQuery che puoi usare come riferimento quando non riesci a ricordare qualcosa. È stato realizzato da Oscar Otero, un web designer e sviluppatore che sa quanto possano essere utili queste cose. Viene fornito con:

  • Selettori
  • Attributi/CSS
  • Manipolazione
  • Attraversando
  • Eventi
  • Effetti
  • Aiace
  • Nucleo

Jquery

Questo particolare cheat sheet di design include anche una fantastica funzione di ricerca. Puoi selezionare la versione di jQuery che stai cercando e cercare opzioni specifiche. Questo è un ottimo strumento da avere a portata di mano come riferimento facile e veloce.

8. Terminologia UX

In qualità di designer UX, interagisci con molte persone diverse all'interno di un'organizzazione e non tutti conoscono il gergo. Non sarebbe fantastico se non dovessi spiegarti costantemente? Questo è per te da distribuire ai tuoi colleghi per aiutarli a capire di cosa stai parlando. Vi è stato regalato dalla Sposa Trozelli e comprende:

  • Pratica UX
  • Ruoli UX
  • Attività di UX
  • Termini dell'interfaccia utente
  • Risultati UX

Linee guida UX/UI

9. Foglio informativo sulle icone di JQuery

Questo è un incredibile elenco veloce di icone che puoi creare con jQuery. Molti di voi potrebbero già conoscerne un sacco, ma andiamo!

Non tutti noi possiamo memorizzarli tutti. Questo sarà utile per quelli di noi che hanno difficoltà a ricordare le informazioni dalla cima della nostra testa. È ottimo anche per i principianti.

Questo ti è stato offerto da Pete Freitag di Foundeo Inc. Personalmente, questo è il mio preferito tra tutti i cheat sheet dei designer.

Cheatsheet delle icone di JQueryUI

10. Cheat sheet di WordPress

Il lettore Mike Wallagher di Startbloggingonline.com ha condiviso questi cheat sheet di WordPress che ha sviluppato. Questi sono ottimi sia per i principianti che per gli utenti avanzati poiché offre entrambe le versioni. Dai un'occhiata! E se hai bisogno di assistenza tecnica, chiedi aiuto a WordPress da WP Buffs!

FOGLIO CHEAT WORDPRESS
Fonte: http://startbloggingonline.com/advanced-wordpress-cheat-sheet/

Hai dei fantastici cheat sheet di design che vuoi condividere? Fateci sapere nei commenti qui sotto.