Proiectarea unei aplicații Web bazate pe API în schiță

Ce veți crea

Acum, că am luat în considerare toate elementele aplicației noastre mici, inclusiv diferitele sale stări, putem începe cu încredere crearea de machete vizuale pentru fiecare element și starea corespunzătoare a acestuia. Dacă sunteți în orice moment curios despre detaliile designului (culori, dimensiune font etc.) pe măsură ce construim acest lucru, verificați fișierul Sketch original pe GitHub.

Să începem cu un tablou de artă în Sketch și să-i dăm un fundal gri deschis.

Antetul

Deoarece acesta este doar un demo, nu vom petrece prea mult timp creând o întreagă marcă pentru aplicația noastră. În schimb, vom șterge numele aplicației noastre folosind un font din Fonturi Google. În acest caz, m-am dus cu Pacifico. Dacă instalați fontul pe computer, puteți vedea cum arată în Sketch.

Intrarea

Acum avem nevoie de o introducere de text împreună cu un buton de trimitere. Acesta este locul unde utilizatorul poate introduce un link către aplicația a cărei opera de artă cu pictograme de înaltă rezoluție doresc să o descarce. Urmând firele noastre, vom pune acest lucru sub antet și îl vom lărgi complet, așa că funcționează de pe desktop până la mobil.

Rezultatul

Acum, să adăugăm zona principală de conținut în care vom afișa operele de artă din iconițe returnate de iTunes API. Vom folosi pictograma aplicației Twitter de dimensiuni mari pentru demonstrații (pe care le puteți descărca aici).

Notă: pictogramele aplicației iOS nu sunt mascate în mod prestabilit. Lucrarea de artă (așa cum se vede în exemplul de twitter) este pătrată. iOS aplică colțurile rotunjite la nivelul sistemului de operare, deci pentru aplicația noastră va trebui să creați o mască pentru pictogramele iOS. Masca nu este doar o rază simplă a frontierei, este mai mult o "zgârietură". Mai degrabă decât să-l creez singur, am folosit șablonul pentru pictograma Sketch creat de Thibaut Ninove.

Statele componente

Acum vom crea câteva machete pentru a ne ajuta să înțelegem cum vor arăta statele componente. Vom folosi zona principală de ieșire pentru a indica aceste stări diferite.

Pentru starea zero (încărcarea inițială a paginii), vom arunca o mică pictogramă și un text de instrucțiuni despre modul de utilizare a aplicației:

Pentru starea de încărcare, vom lipi o suprapunere albă pe zona de ieșire împreună cu un indicator de încărcare:

Și pentru starea de eroare, vom arăta doar un text de eroare:

Pana data viitoare!

Asta e! Avem câteva machete vizuale ale diferitelor componente ale aplicației, iar acum suntem gata să începem implementarea cu HTML, CSS și JavaScript!