Programmeurs en ontwikkelaars zijn over het algemeen geen ontwerpers - dit wordt algemeen geaccepteerd als waar. Ontwikkelaars hebben de neiging zich te concentreren op het laten werken van een app - ontwerpers richten zich erop de app esthetisch aantrekkelijk te maken . Maar waarom kunnen ontwikkelaars niet hetzelfde doen?

Vroeger, toen geanimeerde splash-landingspagina's en chique lay-outs een ding waren, was het logisch om een ​​professionele ontwerper in te huren. Maar de trend van vandaag is minimaal - of op zijn minst enorm vereenvoudigd.

Laat me je een anekdotisch voorbeeld geven - een tijdje terug vroeg iemand me om een ​​splash-scherm voor hun pc-software te maken. Dus ik ging helemaal uit - tekende het op schetspapier, importeerde het in PhotoShop, creëerde veel mooie neonlijnen en effecten. Het had een bureaubladachtergrond kunnen zijn in plaats van een splash-scherm. Het punt is dat ik dit echt mooie en uitgebreide ontwerp voor hen heb gemaakt.

Zoals je waarschijnlijk wel kunt raden, vonden ze het niet leuk. Het ontwerp waarmee ze gingen was letterlijk een klein logo van een paar overlappende gekleurde cirkels en de naam van de software eronder. Zoals, een 2 minuten in PhotoShop-taak. En weet je wat? Ik moest het er eigenlijk mee eens zijn dat het beter was dan het mijne.

Het punt dat ik maak is dus - ik denk dat programmeurs in de val lopen door dezelfde fout te maken als ik. We hebben de neiging om te denken aan gebruikersinterfaces en spatschermen die deze echt mooie, opvallende dingen moeten zijn die de app opvallen . Maar dat hoeven ze niet te zijn - eerlijk gezegd zouden ze dat ook niet moeten zijn. We moeten de denkwijze van een programmeur nemen en toepassen op esthetisch ontwerp - eenvoudig, functioneel, werkt.

In dit artikel bekijken we enkele zeer eenvoudige manieren om een ​​elegante Android APP UI / UX te maken, zelfs als je bijna geen ontwerpervaring hebt.

Tenzij je echt iets anders wilt, blijf dan bij Material Design

Uw app hoeft niet ' uniek' te zijn en ' op te vallen' om populair te zijn en er goed uit te zien. Dat is wat Google's Material Design wilde bereiken - een standaard voor app-UI's in de hele industrie, en ze hebben goed werk verricht. Er zijn een heleboel populaire apps die zich houden aan Material Design - enkele van de grootste namen in Android-apps, zoals SwiftKey, Nova Launcher, Textra SMS, YouTube, om er maar een paar te noemen.

De kernfocus van Material Design ligt op een op kaarten gebaseerde lay-out, met een effen kleurenpalet. Google werkte samen met topontwerpers in de branche, trok veel elementen uit minimalistische ontwerppraktijken en bracht vervolgens het geheel gratis uit - dat is een behoorlijk goede deal, omdat ontwerpcursussen voor websites en apps honderden dollars kunnen opleveren voor e-boeken, video's, enz.

Aan de slag met Material Design is ongelooflijk eenvoudig, en er is een handvol tools die het nog eenvoudiger maken, die we hieronder zullen vermelden:

• Materiaalthema-editor (macOS + Sketch)
• Materiaalontwerp Kleurenpalet plug-in (PhotoShop / Illustrator)
• Material Design UI Kit PSD (PhotoShop)
• UI-kit Android-materiaalontwerp ( schets)
• Materiële UI-themagenerator

En als je inspiratie nodig hebt voor het maken van eenvoudige, elegante thema's voor materiaalontwerp, bekijk dan deze blogs over de lijst:

• MaterialDesignBlog - 15 Geweldige voorbeelden van goed ontwerp van materiaal
• MockPlus - 12 beste voorbeelden van materiaalontwerpwebsites om inspiratie op te doen
• AndroidAuthority - 10 beste apps voor materiaalontwerp voor Android

Kleurovergangen zijn veel eenvoudiger dan u denkt

Voor een alternatief voor Material Design zijn dolor verlopen eenvoudig, trendy en opvallend. En je zou kunnen denken dat ontwerpers veel tijd besteden aan het schilderen in alle kleuren, of het ontwerpen van het ultieme verloop. Je zou het mis hebben - het kan in 10 seconden worden gedaan in PhotoShop.

10 seconden in PhotoShop-verloopinterface.

Ik zal je hier zelfs doorheen leiden om je te laten zien hoe gemakkelijk het is.

Maak een nieuw PS-project voor mobiel ( 1080 x 1920 px @ 72 ppi werkt prima)

UIGradients.com - Grote verzameling vooraf gemaakte verlopen.

Ga naar UIGradients.com en vind iets dat je leuk vindt.

Kopieer de hexadecimale waarden uit UIGradients

Kopieer de verloopkleuren van boven het voorbeeld.

Gradiëntkiezer van PhotoShop.

Klik met de rechtermuisknop op een lege laag in PS en ga naar Mengopties> Verloop overlay.

Klik rechtstreeks op het voorbeeld van het verlooppatroon in het vervolgkeuzemenu - klik niet op de vervolgkeuzeknop. Als u rechtstreeks op het verloop klikt, wordt de kleureditor geopend.

Voer hex-waarden van UIGradient in het PS-verloopgereedschap in.

Plak nu gewoon de plakken de hexadecimale waarden van UIGradient in de PS-verloopeditor.

Pas indien nodig aan. U hebt nu een professionele verloopachtergrond voor uw Android-app.

Andere gradiënttools die het bekijken waard zijn:

• WebGradients.com
• Android Shapes Generator ( voor het genereren van vormen via XML, met optie voor verloop)

Gebruik SVG's in plaats van JPG / PNG

In plaats van PNG's of JPG's te gebruiken voor uw grafische elementen (knoppen, logo's, enz.), Zou u in plaats daarvan echt SVG's ( Scalable Vector Graphics) moeten gebruiken. Dit komt omdat SVG's kunnen worden aangepast zonder kwaliteit te verliezen - als u bijvoorbeeld een JPG opschaalt naar een grotere waarde, verliest het kwaliteit en wordt het wazig / korrelig. Een SVG doet dat niet. Mensen proberen enorme PNG-bestanden te gebruiken die zullen worden geschaald om op Android-schermen te passen - terwijl u in plaats daarvan kleinere SVG's kunt gebruiken die worden opgeschaald zonder kwaliteitsverlies.

Bovendien kunnen SVG's tot 60% tot 80% kleiner zijn in bestandsgrootte dan PNG . Dit betekent dat uw app of mobiele website sneller wordt geladen voor de gebruiker en er altijd goed uitziet, ongeacht de schermresolutie.

Neem een ​​donkere modus op met Theme.AppCompat.DayNight

U hoeft geen twee afzonderlijke thema's te ontwerpen om een ​​thema voor de donkere / nachtmodus in uw app op te nemen. Het is vrijwel ingebouwd in de AppCompat-bibliotheek, u hoeft het alleen maar in te schakelen en de waarden te bewerken.

Zie de handleiding van Appual "Een donkere modus in uw Android-app implementeren".

Gebruik een sjabloon of mobiele UI-kit

Als uw app geen chique, aangepaste GUI vereist, is er absoluut niets mis met het gebruik van een sjabloon of kit. Sjablonen en kits kunnen worden gebruikt als een inspirerende richtlijn, of u kunt de sjabloon / kit letterlijk gewoon gebruiken zoals het is, door uw eigen knoppen en zo toe te voegen.

Enkele geweldige bronnen voor Android UI-sjablonen en kits:

• SpeckyBoy - 50 gratis mobiele UI-kits voor iOS en Android
• SketchAppSources - Bronnen voor Android UI-app ( Sketch)
• Freebiesbug - PSD UI Kits ( PhotoShop)