Pack d'interfaccia

Chromepop Finestre modali

15 finestre modali e avvisi di sistema (Y2K) per interfacce in modalità scuro — nero puro, accento rosa acceso. SVG e PNG trasparente a 1x/2x/4x.

  • ui
  • svg
  • png trasparente
  • modale
  • finestra di dialogo
  • conferma
  • notifica
  • fascia
  • y2k
  • Y2K
  • y2k
  • manifesto
  • cromo
  • retrofuturistico
Foglio con 15 finestre modali e avvisi di sistema (Y2K) della famiglia Chromepop, disposti su una scacchiera di trasparenza con le misure in pixel scritte sotto
anteprima 1600×1691la trasparenza è mostrata a scacchiera

Su questo pack

Chromepop Finestre modali è un set di 15 finestre modali e avvisi di sistema disegnati nello stile Y2K, dove tutto è piatto e stampato — contorni dritti e spessi, blocchi pieni, nessun bagliore. Contiene tre finestre modali di gravità crescente, tre targhe di sistema e tre fasce di sistema, una riga inferiore a tre pulsanti, un pulsante di chiusura, un velo di fondo a strati e un campo di inserimento semplice, uno attivo e uno in errore.

Una finestra modale non è un pannello: ferma il gioco, aspetta una risposta e a volte quella risposta non si può annullare. Il modo consueto di dirlo è un bordo rosso, che va a cozzare con il colore della salute già presente sullo schermo e sparisce nel momento in cui qualcuno ricolora il kit sulla propria palette.

Nessuna sfumatura e nessun alone: tutto il set è colore piatto con un contorno dritto e spesso, ed è questo a separare l'aspetto da manifesto Y2K da quello al neon. Le silhouette sono composte angolo per angolo invece di essere ingrandite da un rettangolo, quindi un badge e uno striscione dello stesso set non condividono il contorno.

Dentro quello stile, questa è la lettura Chromepop: un'interfaccia in modalità scuro su una palette nero puro con accenti rosa acceso, costruita attorno a una cornice a bordo singolo, pulsanti smussati da 160x44, barre a nucleo cavo divise in 12 segmenti e icone in bicromia su una griglia da 24px. Sono quelle misure a spiegare perché due famiglie possono condividere uno stile artistico senza essere intercambiabili: lo stile decide come si traccia un bordo, i numeri decidono a cosa serve l'interfaccia.

La gravità sta nello spessore della fascia sul bordo superiore e non nella sua tinta: tre pixel per un avviso, sei per un’allerta, dieci per qualcosa di distruttivo. Così sopravvive a qualunque tinta e a qualunque screenshot in scala di grigi. Le posizioni dei pulsanti sono fisse e volute: Annulla a sinistra e in rilievo, l’azione che conferma a destra e incassata. Quell’ordine diventa memoria del gesto lungo tutto un gioco, e un kit che lo cambia è il motivo per cui si cancella un salvataggio per riflesso. Il velo è fatto di quattro gradini sovrapposti e non di una stesura uniforme, perché un unico foglio nero su tutto lo schermo uccide la grafica che dovrebbe attenuare.

Ogni sprite arriva come SVG modificabile e come PNG trasparente a 1x, 2x e 4x, così puoi buttare i PNG dritti in un motore oppure aprire il vettoriale e cambiare un colore. Disegnato con le stesse misure del resto della famiglia Chromepop, il che significa che questo kit e il kit di pannelli Chromepop si allineano senza che nessuno dei due venga ridimensionato. Si adatta bene a menu retrofuturistici e interfacce in stile manifesto.

Download

Link diretto · senza registrazione · senza pagina d'attesa
Scarica ZIP57 kB

Set completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readme

File inclusi in questo pack
FileFormatoPesoDownload
Set completo — sorgenti SVG, esportazioni PNG a 1x/2x/4x, licenza e readmeZIP57 kB Ottieni →
Finestra modale, spessore avviso, SVG modificabileSVG3.3 kB Ottieni →

Come si usa

  1. Tieni Annulla a sinistra e l’azione che conferma a destra in ogni finestra, comprese quelle che monti tu con la riga inferiore.
  2. Scegli la finestra in base allo spessore della fascia superiore invece di ricolorare uno sprite. Il segnale è lo spessore.
  3. Stendi il velo dietro la finestra alla dimensione del tuo schermo e ripetilo: è disegnato a gradini distinti e quindi si ingrandisce senza artefatti di sfocatura.
  4. Usa il campo di inserimento in errore invece di un bordo rosso. Raddoppia la sottolineatura, e questo si legge in scala di grigi e accanto a una barra della salute.

Licenza

Creative Commons Attribuzione 4.0 — Gratis per uso commerciale. Attribuzione obbligatoria. Termini completi · Cosa significa in pratica

Riga di credito da copiare
"Chromepop Finestre modali" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/chromepop-modals