Share
Wat je gaat creërenStijlgidsgestuurde ontwikkeling biedt een enorm flexibele benadering van modern webdesign. In deze tutorial zal ik je helpen bij het ontwerpen van een UI-kit (gebruikersinterface), terwijl je ook de besluitvorming uitlegt die onze UI-kit consistent en herbruikbaar houdt..
Om mee te kunnen doen heeft u de volgende (gratis beschikbare) middelen nodig:
Open Photoshop en begin met het maken van een nieuw document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen. Je bent vrij om een canvas te gebruiken van elke gewenste dimensie - het web heeft immers geen vaste breedte.
Laten we een aantal handleidingen instellen zodat onze gebruikersinterface kit geordend en uitgelijnd is. Ik gebruik niet altijd een raster, maar het instellen van enkele beperkingen zorgt voor netheid en consistentie. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen. Ik kies meestal 1000px als startbreedte voor een website, dus laten we onze gebruikersinterface-kit binnen deze dimensies houden.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 100px, 600px en 1100px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
Vasthouden aan de etiquette van Photoshop houden we de zaken overzichtelijk en gemakkelijk te navigeren en te bewerken. In een werkomgeving hebben we deze UI-kit nodig die vele malen kan worden gebruikt als een referentiepunt en als ontwikkelingstoets, dus je moet het overzichtelijk houden (ontwikkelaars zullen je dankbaar zijn). Laten we zes lagengroepen maken met de naam Typografie, Knoppen, Formulieren, Avatars, Afbeeldingen en Kleuren.
Ga naar om groepen te maken Laag> Nieuw> Groep ... en geef elke een titel zoals vermeld. Klik op het pictogram om snel een groep te maken.
Zoals Oliver Reichenstein beroemde verklaarde: "Web Design is 95% Typography", dus je moet het goed doen. Allereerst moeten we de perfecte omgeving voor ons type opzetten; een achtergrond die neutraal en gemakkelijk in het oog is. Achtergrond en typografie moeten redelijke contrastniveaus handhaven om leesbaar te zijn. Laten we voor deze zelfstudie subtiel lichtgrijs gebruiken: een neutrale kleur maar sterk genoeg om je app een persoonlijkheid te geven. Ik heb de voorgrondkleur ingesteld op # e9eeef en druk op Alt + Backspace voor de achtergrond.
Open de Typografie groep, kies de Horizontaal tekstgereedschap (T) en selecteer de Open Sans lettertype. Open Sans is een modern lettertype dat in veel verschillende gewichten voorkomt en een professionele, maar toch gastvrije uitstraling heeft. Het is stijlvol genoeg voor koppen, maar ook praktisch genoeg voor body-kopiëren op internet.
Open Sans heeft veel varianten, dus voor deze gebruikersinterface zal ik alleen het ene lettertype gebruiken. Houd er rekening mee dat u voorzichtig moet zijn als u meer dan twee verschillende lettertypen voor uw projecten gebruikt, omdat dingen snel rommelig kunnen worden.
Ik heb de voorgrondkleur op zwart ingesteld # 000000 dan met behulp van de Horizontaal tekstgereedschap (T) en de eerder genoemde Open Sans lettertype met Licht optie en 55 px-grootte hebben de titel van de sectie ingevoerd. We gebruiken dezelfde titels en stijlen voor toekomstige titels om de consistentie te behouden.
Nu moeten we een hiërarchie voor onze typografie vaststellen. Lees dit artikel Hoe u een modulaire typografische schaal kunt ontwikkelen door Ian Yates om de wetenschap en het belang van webtypografie beter te begrijpen.
HTML(HyperText Markup Language) heeft veel verschillende tags waarmee browsers de inhoud van een pagina kunnen interpreteren. Veel van deze tags worden specifiek gebruikt voor webtypografie, zoals , , enzovoorts. Deze beschrijven de koppen, de belangrijkste zijn. Daarna is er een tag gebruikt voor alinea's. Zonder verder in te gaan op HTML, bepalen we de look voor deze elementen.
De ... gebruiken Horizontaal tekstgereedschap (T) voer drie krantenkoppen in. Ik heb gebruikt Open Sans (Light) 55px voor h1, 44px voor h2 en 32px voor h3 met een tussenruimte van 30px. Afstand is een ander belangrijk ding om in gedachten te houden. Laat voldoende ruimte vrij, zodat uw type gemakkelijk leesbaar is en er in evenwicht uit ziet.
Notitie: Ik heb gebruikt regelmatig gewicht voor de h3. Naarmate het type kleiner wordt Licht variant kan minder leesbaar worden.
Nu we onze koppen hebben ingesteld, gaan we naar de daadwerkelijke inhoud kopiëren. Overweeg alle mogelijke variaties van kopiëren en geef deze weer in uw UI-kit, zodat ontwikkelaars kunnen implementeren wat u hebt gepland. Denk aan een kopstijl binnen de alinea, vetgedrukte, cursieve stijlen en ook links.
Voor de hoofdkopie die ik grijs heb geplukt # 838383, voor de kop zwart # 000000 en blauw # 006ee3 voor de kleur van de link.
De kop is merkbaar donkerder dan de hoofdkopie, waardoor deze meer impact heeft. De hoofdkleur van de inhoud moet ontspannend en gemakkelijk te lezen zijn. Zorg er ten slotte voor dat u een andere kleur kiest voor uw links, zodat gebruikers begrijpen dat ze kunnen worden aangeklikt.
Notitie: Stel kop en link lettertype in Semibold gewicht om ze groter en belangrijker te laten lijken.
Knoppen zijn erg belangrijk voor webprojecten. Het zijn meestal eenvoudige links of formulieren verzenden, maar ze kunnen ook een call-to-action (CTA) -functie bieden door mensen door de pagina te leiden en sneller beslissingen te nemen. Het is van vitaal belang om een consistent uiterlijk aan knoppen te geven, zodat de gebruiker ze in de hele app kent.
Minimaliseer de Typografie groep door op de kleine pijl naast de groepsnaam te klikken en open de Toetsen groep. Maak daarna een aantal nieuwe verticale richtlijnen om ons inhoudsgebied op te delen in drie gelijke gebieden met 35 px-openingen ertussen. Ga naar Bekijken> Nieuwe gids ... en stel de volgende verticale richtlijnen in: 410px, 445px, 755px en 790px. Dit is waar we onze knoppen zullen plaatsen zodat ze allemaal gelijk en consistent zijn.
Navigeer terug naar de Typografie groep, zoek de sectietitellaag en dupliceer deze door op te klikken CMD + J, verplaats het dan naar Toetsen groep en verander het in "Knoppen".
Voer daarna drie titels van knoptoestanden in: Normaal, Zweven en Actief. Plaats deze links van onze drie gelijke delen, rekening houdend met de 35px-opening tussen eerste, tweede en derde gebied.
Zet nu de voorgrondkleur op het eerder gebruikte blauw # 006ee3 en maak een nieuwe groep genaamd Primair Normaal. Pak dan een Afgerond rechthoekgereedschap (U), reeks Radius tot 3 px en teken een afgeronde rechthoekige vorm van 310x44px. Plaats het tussen de eerste twee richtlijnen onder de kop "Normaal". Om de knop te finaliseren, noteer wat tekst erop met behulp van de witte kleur #ffffff dus het is duidelijk leesbaar.
Dupliceer nu het Primaire knop groep door op te klikken CMD + J in de groep en geef deze groepen een nieuwe naam Primaire zweeftekst en Primair actief. Plaats daarna deze nieuwe groepen onder de twee secties die we eerder hebben gemaakt.
Wat doen zweven en actief bedoel, mag je vragen? Hover beschrijft de toestand van een knop nadat je de muiscursor erop hebt geplaatst, dus we moeten wat feedback van de knop illustreren. Een link wordt actief wanneer u erop klikt.
Voor het stylen van de zweefstand en de actieve status van de knoppen, maken we ze eenvoudig donkerder. Maak een nieuwe laag boven de knopvorm en vul deze met zwart # 000000. Houd daarna vast alt en beweeg met je muis over de laag totdat je een klein pijl-omlaag icoon ziet - laat het los om een a te maken Knipmasker. Eindelijk de lagen verkleinen ondoorzichtigheid tot 10%.
Notitie: voor de actieve status van de knop vergroot u de zwarte laag ondoorzichtigheid tot 20%.
Dupliceer nu alle vorige knopgroepen en verander hun titels en kleuren in secundair. We zullen UI-kitkleuren later in deze tutorial definiëren, want nu kies je gewoon een kleur en vervang je het vorige blauw. Ik heb groen gebruikt # 36c265.
Formulieren zijn een erg belangrijk web-app-element, omdat gebruikers hierdoor informatie kunnen invoeren en met de app kunnen communiceren. We zullen enkele basisvormen ontwerpen, zodat ontwikkelaars dezelfde stijl kunnen houden en het ontwerp consistent kunnen houden.
Minimaliseer de Toetsen groep en open de vormen groep. Nogmaals dupliceer de sectietitel van de vorige groep en hernoem het in "Formulieren". We zullen enkele basistaal invoertypen maken, inclusief tekstinvoer, wachtwoordveld, dropdown of selecteer veld en verzend veld (een eenvoudige knop).
Bij het ontwerpen van vormen zijn duidelijkheid en bekendheid de belangrijkste factoren. Probeer het wiel niet opnieuw uit te vinden. Maak een nieuwe groep en bel hem Naam. Kies dan een Horizontaal tekstgereedschap (T) en voer een invoerveldenlabel in, in mijn geval is dit "Voornaam" met hetzelfde 18px-formaat zwart # 000000 Open Sans (Normaal) doopvont.
Dupliceer nu een van de lagen met knopvormen en verplaats deze naar de Naam groep. Verander daarna de achtergrondkleur in wit #ffffff en voeg een 1px grijs toe # d5d5d5 inside stroke. Plaats als laatste een voorbeeld van de invoertekst in de witte afgeronde rechthoek. Voor mijn voorbeeld heb ik 16px gebruikt Open Sans (Normaal) en de kleur grijs # 838383 zoals eerder gebruikt voor de hoofdtekst.
Maak wat meer invoervelden met titels door simpelweg het eerste invoerveld te dupliceren. Gebruik traditioneel voor het wachtwoordveld stippen • of sterretjes *. Een voorbeeld van meer velden wordt hieronder getoond.
Duplicaat CMD + J een van de knopgroepen, verplaats deze binnen de vormen groep en plaats deze onder de recent gemaakte invoervelden. Nogmaals is het belangrijk om consistent te blijven en eerder gemaakte elementen opnieuw te gebruiken.
In deze tutorial houden we vast aan een zeer eenvoudige gebruikersinterface die een zeer eenvoudige webapp zou kunnen dienen. Laten we nu een ander type invoerveld maken; de .
Dupliceer een van de invoerveldgroepen en plaats deze tussen de derde en vierde verticale richtlijn, zorg ervoor dat alles wordt uitgelijnd. Wijzig de waarde in wat u maar wilt en voeg een eenvoudig pijlpictogram toe om aan te geven dat het een dropdown-veld is. U vindt pijlpictogrammen op Iconfinder.
Om het voor ontwikkelaars eenvoudiger te maken, zorg er opnieuw voor dat u een actieve status toevoegt. Bedenk hoe de vervolgkeuzelijst eruit zal zien wanneer de gebruiker erop klikt? Het is de taak van een ontwerper om de ontwikkelaar te begeleiden om een consistente en uniforme ervaring te creëren.
Dupliceer de recent gemaakte vervolgkeuzegroep. De ... gebruiken Direct selectie gereedschap (A) klik op een vormhoek om de randpunten te zien en houd ingedrukt Verschuiving, selecteer de vier onderste punten en druk op naar beneden een paar keer om de vorm uit te breiden. Deze techniek houdt je vormvector bij en houdt hoeken onaangetast.
Daarna dupliceer je gewoon mogelijke selecties en plaats je wat lager dan de eerste. Gebruik een Lijngereedschap (U) 1px inch Gewicht om eenvoudige scheidingstekens te maken en tenslotte de pijlkleur te veranderen naar degene die wordt gebruikt voor knoppen. Dit zal helpen om aan te geven dat het veld actief is.
We gaan nu een eenvoudig scenario voor een foutmelding maken, bijvoorbeeld of iemand een te zwak wachtwoord heeft ingevoerd.
Duplicaat CMD + J het eerder gemaakte wachtwoordveld en plaats het onder de vervolgkeuzevelden. Verander daarna de veldgrens in een subtiel rood (ik gebruikte # eb8686) en de achtergrond van een grijsachtig rood # e9dde3. Kies tot slot een sterker rood # b63131 en voer een eenvoudig foutbericht in.
Dat is het met formulieren! Ik heb de basis besproken, maar dat is genoeg om te beginnen met het ontwerpen van complexere vormen.
Avatars zijn tegenwoordig bijna standaard in elke web-app, dus het is handig om een aantal afbeeldingen te hebben voor eenvoudigere communicatie en identificatie van gebruikers.
Minimaliseer overbodige groepen en open de Avatars-groep. Kies het Ellipse Tool (U) en, ingedrukt Verschuiving, teken een cirkel van 80x80px. Ga naar uifaces.com en kies een afbeelding. Kopieer het en plak het boven de recent gemaakte cirkel. Houd ingedrukt alt en beweeg met de muis over de miniatuur van de afbeelding tot je een kleine pijl ziet en laat de muis los om een te maken Knipmasker.
Het is belangrijk om na te denken over hoe avatars zullen worden gebruikt en een aantal verschillende groottes voor ontwikkelaars te gebruiken. Grotere avatarafbeeldingen kunnen bijvoorbeeld op de profielpagina worden gebruikt en kleinere in de opmerkingensectie.
Dupliceer gewoon de avatar en schaal hem naar beneden CMD + T, ingedrukt houden Verschuiving sleutel om de verhoudingen te behouden.
We zouden echt een voorbeeld moeten opnemen van hoe afbeeldingen in onze app worden weergegeven. Ik zal slechts één afbeelding in de afgeronde rechthoek plaatsen om aan te geven dat afbeeldingen afgeronde hoeken moeten hebben.
Kies het Afgerond rechthoekgereedschap (U) en teken een rechthoekige vorm tussen de verticale richtlijnen onder de Avatars groep. Kies daarna een afbeelding, ik gebruikte er een van unsplash.com, formaat wijzigen indien nodig met CMD + T en maak een Knipmasker.
Eindelijk zullen we kleuren behandelen. Een degelijk kleurenpalet is cruciaal en u moet de kleurentheorie controleren om de betekenis en het belang van kleuren die u gebruikt beter te begrijpen. We kiezen ervoor om kleuren te kiezen aan het einde van het proces, omdat we nu een goed idee hebben van het element dat we moeten stylen.
Open de kleuren groep en kies een van de kleuren die u voor de knoppen hebt gebruikt als een voorgrondkleur. Daarna, met behulp van een Afgerond rechthoekgereedschap (U) teken een rechthoek. Kies dan een Horizontaal tekstgereedschap (T) en noteer de titel van de kleur, of wat deze zal worden gebruikt voor bijvoorbeeld "Primaire kleur" en geef de kleurcodes in HEX, RGB of elk ander formaat dat nodig is. Maak een nieuwe groep, geef deze een naam van de kleur en plaats alle lagen erin.
Dupliceer nu gewoon CMD + J de kleurgroep en maak zoveel kleurstalen als je nodig hebt. Meestal is het het beste om vast te houden aan vier of vijf kleuren, omdat met meer kleuren het er rommelig uit kan zien. Bekijk Kuler en COLOURlovers voor verbluffende kleurenpaletten een inspiratie.
Voor deze zelfstudie heb ik de kleuren 'Primair' en 'Secundair' gebruikt, één kleur voor hoofdtekst en één voor koppen, ook wit voor invoerachtergronden. Deze worden allemaal hieronder getoond.
Dus daar heb je het. Een eenvoudige webapp gebruikersinterface stijlgids. Ik hoop dat je de basis van het maken van een stijlgids hebt geleerd en begrepen, waarom sommige beslissingen zijn genomen en hoe ze het project ten goede komen.
Als je vragen hebt of problemen hebt, aarzel dan niet om me te pingen in de comments sectie!
Accentsconagua