Share
Er zijn tegenwoordig duizenden manieren om knoppen te ontwerpen en te maken en u hoeft slechts een kleine hoeveelheid tijd te spenderen aan het doornemen van werk aan dribbble om een idee van hen te krijgen. Veel van deze voorbeelden zijn precies hetzelfde, maar af en toe zijn er een paar die het gevoel hebben dat ze wat meer zorg en aandacht hebben gehad bij het maken van.
Door gebruik te maken van prachtige nieuwe CSS3-eigenschappen, kunnen we een aantal ongelooflijk elegante en stijlvolle knoppenstijlen creëren, zonder de geur van een afbeelding, en hebben perfect adequate terugvalstijlen voor oudere browsers. Misschien wilt u uw knoppen rechtstreeks in CSS maken, of wilt u misschien graag uw lay-outtool naar keuze, maar het is belangrijk om goed na te denken over hoe uw knopontwerp in een context leeft.
Het is maar al te gemakkelijk om eenvoudigweg een vooraf ontworpen 'UI Elements PSD' te bereiken die een vrijgevige ziel gratis heeft gedeeld (en ongetwijfeld door Apple geïnspireerde knoppen bevat). Maar waarom zou u geen moment overwegen of de knopstijl geschikt is in de context van uw ontwerp en overwegen of er ruimte is om iets origineler te maken??
Het recyclen van de knoppen van iemand anders is prima, het bespaart tijd, maar het kost geen moeite om het ontwerp en de samenstelling van de knoppen van je (of iemand anders) iets gedetailleerder te begrijpen. Hoe zijn ze ontworpen? Past het in de interface / context / merk? Is er een mogelijkheid om iets unieks te maken? Zijn mijn knoppen prominent genoeg? Heb ik primaire, secundaire, tertiaire knoppen nodig? Verschillen ze substantieel genoeg van elkaar? Zien ze er glad uit ?! (Waarom niet, we willen allemaal cool uitziende dingen ontwerpen toch ?!).
Hier zijn tien snelle en eenvoudige dingen waar ik altijd aan denk bij het ontwerpen van knoppen. Ik ga geen ideeën delen over het gebruik van laageffecten in Photoshop, maar enkele eenvoudige, algemene ontwerpprincipes die een lange weg kunnen gaan in het optimaliseren van het ontwerp van je knoppen en andere UI in het algemeen.
Het is belangrijk dat uw knoppen overeenkomen met hun contextuele stijl. Dit kan betekenen dat u zich moet aanpassen aan een kleurenpalet, een grafische stijl of een leidende positie moet innemen in een of andere vorm van merkrichtlijnen of logo. Misschien zijn er enkele opvallende vormen, texturen of ontwerpstijlen die u kunt oppikken. Misschien heeft een logo een cirkelaspect en kunt u dit opnemen in uw knoppen of andere potentiële oproepen tot actie.
Als een interface voornamelijk een effen kleur gebruikt, zijn misschien grote, glimmende, Apple-achtige knoppen niet de beste keuze. Als je kunt, maak van de gelegenheid gebruik om te experimenteren met het uitbreiden van het merk naar de interface door geschikte vormen, effecten, kleuren of andere vormen van verfraaiing te gebruiken.
Volg vanaf het bovenstaande een moment voordat u de 'UI Elements PSD' opent. Het is eenvoudig te bereiken voor gradaties, schaduwen, schuine randen, etc., maar neem even de tijd om te bedenken of het de juiste keuze is om niet alleen een merk te evenaren, maar ook de interface waarin de knoppen zitten en of ze zich overdreven 'knotsig' voelen.
Knoppen moeten bijvoorbeeld in een app en op een mobieltje in het bijzonder op een knop lijken, maar met websites is er misschien ruimte om iets anders te doen met je knoppen of call-to-action.
Omdat zoveel interface-ontwerpen zijn geïnspireerd op de styling van Apple-besturingssystemen, met name in veel van de PSI's van de gebruikersinterfaces, kunnen knoppen enigszins verloren raken terwijl andere elementen in de gebruikersinterface worden gebruikt, waardoor hun mogelijk belangrijke vermogen wordt afgezwakt. Probeer kleur, grootte, witruimte of typografie te gebruiken om ervoor te zorgen dat uw knoppen het zichtbare gewicht hebben dat ze nodig hebben om op te vallen buiten de rest van de interface.
In het verlengde van het bovenstaande, als er veel andere afgeronde hoek UI-elementen in uw ontwerp zijn, overweeg dan het gebruik van ronde knoppen of misschien een andere vormverandering. Dit zou u een extra beetje contrast kunnen geven dat ervoor zorgt dat uw belangrijke calls to action de bekendheid krijgen die zij nodig hebben.
Als je streeft naar een OS-geïnspireerde stijl of als je werkt met voorafgedachte PSD-elementen, is het waarschijnlijk dat je UI-elementen voornamelijk een afgeronde hoek hebben die rechthoekig van vorm is. Overweeg om het niveau van verfraaiing te verminderen voor elementen die het zich kunnen veroorloven minder 'knotsig' te voelen.
Op maat gemaakte keuzemenu's, gesegmenteerde besturingselementen, aangepaste menu-triggers kunnen bijvoorbeeld allemaal dezelfde hoekvormen zijn, maar minder schaduw, randafwerking, schuine kant, verloop of andere effecten kunnen helpen hun rijkdom te verminderen en op hun beurt knopstijlen promoten.
De meeste knoppen die we daar zien, hebben een bepaalde vorm van rand of lijn. Losjes gezegd, als uw knop donkerder is dan de achtergrond waarop hij zit, gebruik dan een donkere streek van de algemene knopkleur. Als het omgekeerde waar is, ga dan voor een streek met een donkerdere tint van de achtergrondkleur. Als je bij de eerste blijft en het op een donkere achtergrond gebruikt, merk ik dat het de randen van de knoppen een beetje 'vies' kan maken. Het gebruik van de laatste kan ook helpen om je knop echt pop te laten maken. Ik beschouw dit als een algemeen ontwerpprincipe bij het behandelen van lijnen / randen in webdesign.
Door de jaren heen heb ik altijd gezworen door mijn 'Schaduwwet'. De 'Schaduwwet' stelt dat vallende schaduwen het beste werken als een element lichter is dan de achtergrond. Als een element donkerder is dan de achtergrond, moeten de slagschaduwen heel subtiel worden gebruikt. Vergelijkbaar met kleuraanpassingsslagen en randen, beschouw ik dit als een algemeen ontwerpprincipe dat van toepassing is op alle UI-elementen.
Behalve dat het nog een klein detail is dat uw knoppen verder van verschillende UI-elementen kan onderscheiden, kan het gebruik van eenvoudige iconische elementen zoals pijlen enige actie geven en een kleine veroorloofing van wat er gebeurt wanneer een gebruiker klikt.
Een pijl die bijvoorbeeld direct na de tekst op een knop wijst, geeft de gebruiker misschien enig gevoel van bewegen of verlaten van de pagina. Een naar beneden wijzende pijl kan erop wijzen dat sommige inhoud hieronder geleidelijk wordt bekendgemaakt of dat er misschien een menu wordt geopend.
Als je een interface ontwerpt waar constant veel acties en functionaliteit worden getoond, kan het belangrijk zijn om wat visuele taal te creëren met je knoppen door primaire, secundaire, tertiaire en potentieel meer stijlen te creëren.
Overweeg de sterkste en meest gedurfde kleuren te reserveren voor uw primaire knoppen en gebruik steeds minder sterkte of verzadiging naarmate u minder belangrijk wordt. Denk naast kleur en schaduw ook aan het verminderen van de grootte, witruimte, tekstgrootte en versieringsniveau om het visuele gewicht van knoppen die niet primair zijn te verminderen.
Dit is echt geen hersenkraker, maar wordt aan het einde van het ontwerpproces vaak overwogen. Werk altijd door de kernstaten die nodig zijn voor uw knoppen om ervoor te zorgen dat ze de gebruiker voldoende feedback in hun context bieden. Gebruikers zullen waarschijnlijk een mentaal model hebben van hoe een knop werkt in de echte wereld als ze deze gebruiken in de verschillende staten. Sommige eenvoudige CSS-aanpassingen met schaduwen, randen en verlopen en dergelijke kunnen de gebruiker eenvoudige feedback en een vleugje snoep geven!
Als ontwerpers heb je allemaal je eigen proces waar je doorheen gaat. Ik wed dat veel van de tijd die kan met zich meebrengen dat je je hoofd van het scherm af beweegt, het een beetje kantelt, loensend en zegt: 'Ja, dat klopt!'. Dat is een onderdeel van het plezier van ontwerpen en natuurlijk vinden getalenteerde ontwerpers het juist om dat te doen, maar ik denk dat het altijd goed is om een beetje intern commentaar te geven, te ondervragen en te redeneren over de ontwerpbeslissingen die je neemt.
Het is niet schadelijk voor het opnieuw gebruiken of leunen op vooraf ontworpen stijlen en UI-elementen, ze kunnen natuurlijk veel tijd besparen. Het kan zelfs zo zijn dat iemand pixel-perfect gemaakt heeft wat u zocht en het gratis aanbiedt. Ik denk echter niet dat het geen kwaad kan om een dieper begrip te hebben van het ontwerpproces en het ambacht achter wat je creëert en je ontwerpbeslissingen in de toekomst te informeren..
Accentsconagua