Een API-gestuurde web-app ontwerpen in Sketch

Wat je gaat creëren

Nu we alle elementen van onze kleine app, inclusief de verschillende toestanden, hebben verwerkt, kunnen we vol vertrouwen beginnen met het maken van visuele mockups voor elk element en de bijbehorende staat. Als je op enig moment nieuwsgierig bent naar de details van het ontwerp (kleuren, lettergrootte, enz.) Terwijl we dit bouwen, bekijk dan het originele schetsbestand op GitHub.

Laten we beginnen met een tekengebied in Sketch en het een lichtgrijze achtergrond geven.

De kop

Omdat dit slechts een demo is, gaan we niet veel tijd besteden aan het maken van een volledig merk voor onze app. In plaats daarvan stylen we alleen de naam van onze app met een lettertype van Google Fonts. In dit geval ging ik met Pacifico. Als u het lettertype op uw computer installeert, kunt u zien hoe het eruit ziet in Sketch.

De invoer

Nu hebben we een tekstinvoer nodig samen met een verzendknop. Hier kan de gebruiker een link naar de app invoeren waarvan hij de illustratie van het hoge resolutie-pictogram wil downloaden. Na onze wireframes plaatsen we deze onder de koptekst en maken deze over de volledige breedte, dus het werkt van desktop tot mobiel.

Het resultaat

Laten we nu het hoofdgedeelte van de inhoud toevoegen waar we de pictogramafbeelding van de iTunes API zullen weergeven. We gebruiken het volledige Twitter-app-pictogram voor demotoepassingen (die u hier kunt downloaden).

Opmerking: iOS-app-pictogrammen worden standaard niet gemaskeerd. De pictogramillustratie (zoals te zien in het twittervoorbeeld) is vierkant. iOS past de afgeronde hoeken toe op het niveau van het besturingssysteem, dus voor onze app moeten we een masker maken voor de iOS-pictogrammen. Het masker is niet alleen een eenvoudige grensradius, het is meer een "squircle". In plaats van het zelf te maken, gebruikte ik de Sketch-pictogramsjabloon gemaakt door Thibaut Ninove.

De Component Staten

Nu maken we een paar mockups om ons te helpen begrijpen hoe de componentstaten eruit zullen zien. We gebruiken het hoofduitvoergebied om deze verschillende toestanden aan te geven.

Voor de nulstatus (de beginpagina-belasting) zullen we een kleine tijdelijke aanduiding voor het pictogram toevoegen, samen met enige instructietekst over het gebruik van de app:

Voor de laadstatus plakken we een witte overlay op het uitvoergebied samen met een laadindicator:

En voor de foutstatus laten we alleen wat fouttekst zien:

Tot de volgende keer!

Dat is het! We hebben een aantal mooie visuele mockups van onze verschillende app-componenten en nu zijn we klaar om te beginnen met de implementatie met HTML, CSS en JavaScript!