Accentsconagua
Share
Wat je gaat creërenIn deze tutorial doorloop ik mijn ontwerpproces voor het maken van een responsief ontwerp in Sketch. Om het ter zake te houden, zal ik het hebben over een responsieve bestemmingspagina die ik een tijdje terug heb ontworpen voor een reis-app. Laten we er gelijk in gaan!
Elk ontwerpproject heeft een soort van opstelling. Voor deze specifieke ga ik kort praten over inhoud en wireframes voordat ik begin met het responsieve ontwerpproces in Sketch.
Het is over het algemeen een goede gewoonte om de inhoud te bemachtigen voordat u een ontwerpproject start. Dat is precies hoe ik al mijn projecten start (voor wat het waard is, het maakt deel uit van mijn contract - iets wat ik aanbeveel dat je ook in de praktijk brengt). Deze tutorial richt zich op de UI-kant van de dingen, met weglating van de belangrijke UX-vragen zoals waarom bepaalde content is gekozen, paginadoelen enzovoort.
Terwijl u inhoud met uw klant of uw team bespreekt, moet u nadenken over de inhoud op zowel kleine als grote schermen. Ik raad aan eerst de inhoud voor mobiel te schrijven, alles op te schrijven in een Google-document. Open vervolgens het document op je telefoon om te bepalen of het juist is of dat er te veel van is. Als je door pagina's en pagina's met uitgeschreven inhoud op je telefoon bladert, weet je dat je dat meteen moet aanpakken.
Altijd, wat er ook gebeurt, knip uw inhoud aanzienlijk.
"Weg met de helft van de woorden op elke pagina, dan ontdoen van de helft van wat er nog over is." -Steve Krug, Do not Make Me Think
Als u tevreden bent met de mobiele inhoud, kunt u meer toevoegen aan de tablet- en desktopversie. Grotere schermen hebben meer schermruimte om gedetailleerdere informatie te verwerken.
Je zult natuurlijk door revisies gaan. Raak er in dit stadium niet te veel op. De inhoud zou dicht bij de finale moeten zijn, maar deze hoeft niet in steen te worden geschreven.
Lees het artikel van James Deer voor meer informatie over de eerste benadering van inhoud:
Overeenstemming over de inhoud van alle siteversies is de eerste stap in het opzetten van uw ontwerp. Je weet nu wat je kunt verwachten. Het is absoluut goed om de inhoud overal hetzelfde te houden, net zoals het is om bepaalde inhoud te laten verschijnen of verdwijnen, afhankelijk van de schermgrootte.
Het meest voorkomende type inhoud op internet is geschreven tekst. Er zijn echter nog andere dingen, inclusief afbeeldingen en grafische afbeeldingen (dat wil zeggen foto's of illustraties), video's, aanhalingstekens, audiobestanden (dat wil zeggen podcasts), spellen of zelfs ingebedde inhoud via iframes..
Je hoeft niet alle video's en podcastafleveringen te laten vastleggen. Op zijn minst een beschrijving van de visuele of auditieve inhoud. Dat is wat ik deed voor deze klant. Ik wist ongeveer wat voor soort afbeeldingen ik wilde hebben voor elke sectie om de waardevoorstel van elke sectie verder uit te leggen. Maar ik had niet de werkelijke graphics op het moment dat de inhoud werd besproken. Ik heb het zojuist beschreven.
De volgende stap is om de inhoud visueel weer te geven. Met dit project heb ik gekozen voor eenvoudige, low-fidelity wireframes. Ik wilde snel en visueel de inhoud eruit halen. Ik heb twee wireframes, één mobiel en één bureaublad gemaakt omdat ze elk verschillende inhoudsvereisten hadden. Beiden geven je een algemeen beeld van de visuele structuur van de landingspagina.
Je kunt alle tools gebruiken waar je het meest comfortabel mee bent voor wireframes, maar ik heb Sketch hier gebruikt. U kunt ook low-fidelity pen- en papier-wireframes maken. Het maakt niet uit. Je kunt zelfs de technieken gebruiken die later in deze tutorial worden besproken om te creëren sympathiek wireframes.
Laten we inspringen op responsief UI-ontwerp met Sketch.
Het zal ons leven gemakkelijker maken als we eerst content identifiëren die hetzelfde is voor alle varianten en inhoud die uniek is voor specifieke schermen.
In dit ontwerp zijn de volgende elementen aanwezig op alle schermen:
Elementen die uniek zijn voor verschillende schermformaten:
Perfect. Nu kunnen we aan de slag om deze elementen op de juiste manier te maken.
Mijn standaardknop voor zowel desktop als tablet is een rechthoek van 352 px bij 40 px met een 5px-randradius. De achtergrond is # 7455FF. Selecteer binnen de eigenschappen voor het wijzigen van de grootte om het object aan zijn linker- en rechterrand vast te zetten en een vaste hoogte in te stellen.
De volgende is de tekstlaag, de kopie van de knop, met een Note Sans UI-lettertype, vet en een 16px-lettergrootte. Het is wit of #ffffff. De uitlijningsbreedte is ingesteld op auto en er zijn geen andere instellingen ingesteld op de tekstlaag. Als u wilt, kunt u de knop veranderen in een symbool, hoewel dit niet nodig is voor dit specifieke ontwerp, omdat de knop maar één keer op de hele pagina wordt weergegeven.
Wanneer je de twee elementen combineert tot een groep (of een symbool), zou je de breedte van de knop kunnen aanpassen zonder probleem, waarbij de tekst in het midden blijft ongeacht de breedte van de knop.
Een ander ding dat je kunt doen is de Anima-plug-in gebruiken voor Sketch. Hiermee kunt u vloeiende schermen maken die de grootte wijzigen terwijl de eigenschappen bij elkaar worden gehouden, zoals afstand, opvulling of hoogte. Het is geweldig voor lay-outs met formulieren.
We kunnen Anima gebruiken om verschillende header-elementen bij elkaar te houden en deze te veranderen van mobiel naar desktop. Het geeft ons ook een goede indicatie van hoe deze elementen zich ten opzichte van elkaar zullen gedragen op andere schermformaten dan degene die we ontwerpen - de tussenliggende formaten zoals een grotere telefoon of een tablet.
Voor wat we vandaag doen, voegt deze plugin niet te veel toe.
Dit ontwerp van de bestemmingspagina vereist een aantal grote en mooie koppen. In de desktopversie is de h1 72px terwijl h2 32px is. 72px is veel te veel voor mobiel. We moeten de h1-kop responsive maken. Het is niet zo eenvoudig als vloeibare typografie in CSS is, maar het is goed te doen.
We moeten een stijl maken voor elke h1-kop en deze opslaan als een tekststijl met de juiste naamgevingsconventie of syntaxis. Dit zal ons toelaten om later de nodige h1 te selecteren wanneer nodig bij het ontwerpen van de rest van de pagina. Het is niet perfect en behoorlijk handmatig, maar zo gaat het.
Voor h1 zijn dit de volgende stijlen: Noto Sans UI, vet, grootte 72 (bureaublad), grootte 48 (tablet) en grootte 32 (telefoon).
Dezelfde syntaxis kan ook worden toegepast om symbolen te organiseren. Bijvoorbeeld: Style-naam / sub-name / specifieke stijl
Dus, om onze typografie te organiseren, kunnen we de volgende syntaxis gebruiken voor grote h1 voor desktops: Rubrieken / H1 / Desktop, voor tablet: Rubrieken / H1 / Tablet en voor telefoons: Rubrieken / H1 / Phone.
De reden dat Headings / h1 in de vervolgkeuzelijst staat, is vooralsnog omdat we geen andere stijlen hebben toegevoegd. Laten we dus naar h2 gaan en een nieuwe laag hiërarchie toevoegen aan de tekststijlen.
Voor h2 gebruik ik de volgende stijlen: Noto Sans UI, vet, grootte 73 (desktop en tablet) en grootte 18 (telefoon). Laten we de volgende syntaxis gebruiken voor h2 op telefoons: Rubrieken / H2 / Phone. Voor tablet kunnen we hier twee dingen doen, we kunnen het combineren met desktop en het noemen Headings / H1 / Desktop + Tablet of we kunnen twee verschillende stijlen hebben die gewoon hetzelfde zijn. Ik schrijf over dit ontwerp nadat het is voltooid, dus het is een beetje bevooroordeeld. Ik ga zeggen dat we de tablet van de pc moeten scheiden omdat dit een betere ontwerppraktijk is.
Met typografiestijlen in Sketch, kunt u echt gedetailleerd en georganiseerd worden met hun syntaxisregels. Vanaf dit moment is er echter geen functie in Sketch of geen plug-in die de grootte van de typografie voor u verandert op de manier waarop vloeistoftypografie via CSS werkt. Vanaf nu is het nog steeds een handmatig proces.
Vervolgens gaan we symbolen maken om opnieuw te gebruiken en onze levens een beetje gemakkelijker te maken. In dit ontwerp hebben we tal van getuigenissen en citaten van vorige gebruikers; ze moeten responsief zijn.
Gelukkig is het formaat voor testimonials hetzelfde op de hele pagina, dus we hoeven dit maar één keer voor hen te doen. Eerst hebben we de naam van de persoon en vervolgens zijn citaat. De twee zijn echter verschillende stijlen. Laten we de bron eerst stylen. Ik heb de tekststijl genoemd Testimonial / Bron. De eigenlijke stijl van dit element is: Noto Sans UI, vet, maat 14, regelhoogte 24. Vervolgens hebben we de eigenlijke getuigenis. Ik heb de tekststijl genoemd Testimonial / Quote. De stijl is: Noto Serif, normaal, maat 14, lijnhoogte 24.
Als u een symbool wilt maken, selecteert u beide tekstelementen en klikt u op Creëer symbool pictogram in de linkerbovenhoek van uw werkbalk. Ik heb mijn symbool genoemd getuigenis.
Nu moeten we het symbool bewerken zodat het goed kan worden aangepast voor verschillende schermformaten en voor verschillende citaatgroottes. Dubbelklik op het nieuw gemaakte symbool om het te bewerken.
Allereerst moeten we de elementen binnen het symbool hernoemen. Standaard wordt de naam van een tekstlaag gemaakt op basis van de eigen tekstuele inhoud. Ik gaf ze een andere naam De naam van de bron en Citaat, respectievelijk.
Vervolgens moeten we de resizing-instellingen aanpassen voor beide tekstelementen. Ze hebben dezelfde grootteseigenschappen. Geen van beide heeft een vaste breedte of hoogte. Maar ze zullen zowel het formaat van hun linker- als van de bovenrand aanpassen. Dit zorgt ervoor dat wanneer u het formaat van het symbool wijzigt, de tekstelementen blijven waar ze horen.
Als u het symbool opnieuw wilt gebruiken, klikt u op de vervolgkeuzelijst linksboven in de werkbalk die zegt invoegen en navigeer naar de getuigenissen symbool. Klik vervolgens ergens op het tekengebied om het te plaatsen. Om de inhoud van de tekst te wijzigen in de juiste overschrijvingsingangen die we eerder hebben hernoemd. Formaat wijzigen indien nodig.
Ik gebruik de term 'responsieve grafische afbeeldingen' hier een beetje anders. Het idee is dat de grafische weergave afhankelijk van de schermgrootte zal veranderen. Ik zou de afbeeldingen echter nog steeds handmatig moeten maken voor elk scherm. Tenzij ze vloeiend zijn, zoals een invoerelement of een knop, kunnen ze niet automatisch worden gemaakt.
Om een beter begrip te krijgen van wat responsieve grafische afbeeldingen zijn, hier is een link naar een artikel dat ik schreef over responsieve pictogrammen, maar het idee is precies hetzelfde voor alle soorten afbeeldingen en afbeeldingen.
We kunnen zowel de routekaart in symbolen veranderen als de kaarten onder het sociale gedeelte van de landingspagina. Laten we in plaats daarvan gaan met de sociale kaarten rond de Dag 3-afbeelding (het is een beetje interessanter).
Selecteer opnieuw de kaart en verander deze in een symbool. Dubbelklik erop om het symbool te bewerken. We willen ervoor zorgen dat het zowel verticaal als horizontaal goed verandert.
Beginnend met de achtergrond, willen we het aanpassen van de eigenschappen geven waardoor het object naar boven en naar links speldt. Hetzelfde geldt voor de twee tekstlagen. We willen echter dat de afbeelding of de avatar rechtsboven wordt vastgepend. Vergeet ten slotte niet om de titels van deze elementen te wijzigen in iets dat meer geschikt is voor wanneer we de inhoud ervan negeren.
En voila!
Ten slotte willen we ook de kleine ontwerpdetails behandelen. In dit specifieke ontwerp hergebruik ik de kleine paarse lijn met een punt veel. Ik verander deze paarse indicator ook in een symbool.
Dit symbool bestaat uit één cirkel van 8 px bij 8 px met een # 7455FF achtergrond. De breedte van de regel doet er niet zoveel toe, maar de standaardwaarde is 122 px. De hoogte is 2 px. Nogmaals, met # 7455FF achtergrond.
Binnen het symbool moeten we opnieuw de instelling voor de grootte wijzigen. Voor de cirkel hebben we deze nodig om op dezelfde plaats en op dezelfde plaats te blijven. We gaan het een vaste breedte en hoogte geven en het vastzetten aan de rechterbovenrand. Voor de lijn geven we deze ook een vaste hoogte, maar geen vaste breedte, omdat we deze in de breedte moeten uitbreiden. We zullen het ook aan de rechterkant vastpinnen bij het wijzigen van het formaat.
Op deze manier zal het veranderen van dit symbool alleen de breedte van de lijn veranderen.
Nog een ding wat we kunnen doen, is om de achtergronden ook vloeibaar te maken. Hoogtes van secties verschillen niet tussen mobiele en desktoplay-outs; dit betekent dat je de achtergrondelementen naar hun juiste plek op en neer moet bewegen.
Hier vraagt de gebruikersinterface om een 16px witte rand. Dat betekent dat de achtergrondlaag 16 px verwijderd moet zijn van de randen van het tekengebied. Het enige wat u hoeft te doen is de achtergrondlaag selecteren en, met behulp van de Anima-plug-in of met behulp van de eigenschappen voor het wijzigen van de grootte, alle randen van de achtergrondlaag vastzetten. Speld het dus naar boven, onder, links en rechts. Wanneer u het formaat van het tekengebied wijzigt, volgt de achtergrond!
Nu we hebben gezorgd voor de meeste ontwerpelementen die responsief of vloeiend kunnen worden gemaakt of voor herbruikbare symbolen, is het tijd om te praten over de rest van de ontwerpelementen op deze pagina..
Simpel gezegd, dit is waar je de handen uit de mouwen steekt en je ontwerpen manueel een voor een doet. Het ontwerpen van de kaartafbeelding moet met de hand worden gedaan, omdat deze uniek is. Hetzelfde geldt voor de lay-out en het kiezen van kleuren, en het kiezen van typografie.
Helaas is het ontwerpen van responsieve interfaces in Sketch nog geen fluitje van een cent. Maar er zijn technieken, zelfs plug-ins, die uw leven een stuk eenvoudiger zullen maken als een ontwerper die in Sketch werkt. Ik hoop dat deze tutorial je een goede weg heeft gewezen voor mijn eigen ontwerpproces. Het ontwerpen van responsieve gebruikersinterfaces hoeft niet vervelend te zijn, veel ervan kan ook worden geautomatiseerd.
Heb je tips of trucs voor het ontwerpen van responsieve gebruikersinterface om met ons te delen? Zet ze in de opmerkingen hieronder neer!
