Een ontwikkelaarsgids voor webontwerp voor niet-ontwerpers

Ik maakte mijn eerste website als een schoolproject toen ik 14 was. De taak was eenvoudig: een heel eenvoudige site maken met wat tekst, afbeeldingen en een tabel. Mijn gebruikelijke houding ten opzichte van schoolprojecten was om ze volledig te vergeten en later op het laatste moment met een oplossing te komen. Maar deze keer werd ik gek.

Sinds mijn eerste website heb ik er altijd prioriteit aan gegeven dingen er goed uit te laten zien. Geef toe of niet, mensen beoordelen dingen op basis van uiterlijk. Als wat je maakt er goed uitziet, alsof je weet wat je doet, zullen mensen het meer vertrouwen. Dat is gewoon hoe het gaat.

In de loop van de jaren dat ik nevenprojecten maakte, verlegde ik mijn focus meer en meer naar het ontwikkelen van mijn ontwerpvaardigheden in plaats van alleen het perfectioneren van mijn programmering. Zie je, als je een algoritme bent om monstrum te schrijven, kom je net zo ver. Terwijl je de droom najaagt om een ​​winstgevend bijproject op te starten, moet je veel verschillende taken uitvoeren. Designer zijn is daar een van. Net als Cross-fit atleten moeten solo-oprichters goed afgerond zijn om goed te presteren.

Een superieur ontwerp is niet noodzakelijk degene met de meeste Dribbble upvotes. Het is degene die je in de eerste plaats niet zult opvallen. Het is een perfecte balans van "je oma zou dat kunnen doen" en "wauw, dat is verdomd leuk". Ontwerp kan uw concurrentievoordeel zijn of de spijker in de kist.

Het gaat niet om talent

Toen ik jonger was, speelde ik veel Minecraft. Ik zag al deze geweldige gebouwen die mensen maakten. Maar toen ik iets maakte, leek het op een doos. Lelijk en zonder stijl. Hoe maak je toch iets leuks in Minecraft?

Dus ik vond een man op YouTube en bouwde een exacte kopie van wat hij bouwde. Een paar weken later had ik mijn eigen stijl ontwikkeld en kon ik op mijn eigen bouwen. Plots leken mijn creaties niet op rotzooi. Ik heb zelfs een bouwwedstrijd gewonnen.

Ontwerp is een vaardigheid en kan net als elke andere vaardigheid worden geleerd.

Het juiste gereedschap voor de taak kiezen

Bij het programmeren kunt u Kladblok gebruiken en een app schrijven die zo goed is alsof hij in een complete IDE is geschreven ... hoewel uw leven er behoorlijk ellendig aan toe is en het waarschijnlijk aanzienlijk langer zal duren. In de wereld van webontwerp zou MS Paint de rol van Kladblok op zich nemen en net als Kladblok kiezen maar weinig mensen ervoor om ermee te ontwerpen ... hoop ik.

De meest populaire ontwerptools voor het web zijn:

  • Sketch, een enige MacOS-tool die, net als React, hard gecodeerd lijkt te zijn in elke vacature. $ 99 / jaar.
  • Adobe XD, een gratis, platformonafhankelijke tool die de rol van Vue op zich neemt. Het heeft een kleinere gemeenschap, maar het is heel gemakkelijk om te beginnen.
  • Adobe Photoshop, het Zwitserse mes voor elke ontwerptaak ​​die iedereen kent. Het heeft de plek ingenomen van ... je raadt het al, jQuery. $ 9.99 / mo.

Er is bijna geen verschil of u Sublieme of VS-code gebruikt om apps te schrijven. Of dat u React of Vue gebruikt voor de frontend. Het is gewoon een kwestie van voorkeur. Hetzelfde geldt voor ontwerptools, omdat elk zijn voor- en nadelen heeft.

Ik gebruik Adobe XD. De belangrijkste reden voor mij is dat het platformoverschrijdend is, dus ik word niet gegijzeld door het Apple-ecosysteem. Het wordt ook ondersteund door Adobe, dus het zal hier een tijdje zijn. Het beste voor nieuwkomers is dat sinds mei 2018 Adobe XD gratis te gebruiken is met slechts een paar beperkingen (die je waarschijnlijk niet tegenkomt).

Je mindset aanpassen

De grootste uitdaging voor mij op het gebied van webontwerp was mijn mentaliteit aan te passen. Ik was eraan gewend het ontwerp te bedenken toen ik de website codeerde. Alles had een bestelling. De stroom was van links naar rechts en van boven naar beneden. Het feit is dat deze aanpak je een slechtere ontwerper maakt.

Ontwerptools zijn chaotisch omdat ze u dwingen te ontwerpen zoals elk element absoluut gepositioneerd is. Omarm deze verandering. Het geeft je de vrijheid om dingen snel te veranderen en maakt experimenteren gemakkelijk. En dat is essentieel, want design is een continu proces. Er wordt verwacht dat je dingen veel zult veranderen voordat je een geweldig resultaat krijgt.

Leer de tools

Bij het coderen gebruikt u HTML-elementen zoals divs, reeksen en invoer en laat de browser ze omzetten in iets visueels. Met ontwerptools kunt u de tussenpersoon overslaan en visuele elementen zoals vormen en tekst direct gebruiken.

Ik heb de 4 meest gebruikte ontwerptools gekozen, zodat u minder tijd kunt besteden aan leren en meer tijd aan het ontwerpen. Op die manier kun je zo snel mogelijk beginnen met oefenen. Hieronder laat ik je zien hoe ze werken en hoe ze te gebruiken.

Rechthoekgereedschap

Rechthoeken zijn de meest universele vorm. Je zult merken dat je ze altijd gebruikt. Zie het als een div. Het is nuttig voor allerlei dingen, van het maken van tekstinvoer tot containers.

Tekstgereedschap (label)

Met het tekstgereedschap kunt u, zoals de titel al aangeeft, tekst maken. Het is echter niet zo eenvoudig, omdat het tekstgereedschap twee statussen heeft: een voor tekst met één regel en de andere voor meerdere alinea's. Gelukkig zijn ze extreem gemakkelijk te leren correct te gebruiken.

De eerste status is een tekstcontainer met één regel die de grootte aanpast op basis van de tekstgrootte. Het is vergelijkbaar met een met de uitzondering dat het niet wordt omgeslagen tenzij u een regeleinde maakt. Het voordeel van deze status is dat de tekstvakgrootte automatisch wordt aangepast op basis van de regelhoogte en lettergrootte.

Om het te maken, klikt u eenvoudigweg met het tekstgereedschap geselecteerd en schrijft u. Gebruik als vuistregel deze status voor alles dat geen specifieke breedte nodig heeft en een enkele lijn is. Bijvoorbeeld koppen en labels met één regel.

Tekstgereedschap (paragraaf)

De tweede status is een tekstcontainer met een specifieke grootte die zich gedraagt ​​als een

met een specifieke breedte of

in een rasterkolom. Het voordeel van deze status is dat u de grootte van het tekstvak kunt bepalen. Als u een alinea wilt maken, klikt u met het tekstgereedschap geselecteerd en houdt u ingedrukt om een ​​selectie te maken. Gebruik als vuistregel deze status voor alinea's en koppen op meer dan één regel.

Selecteer gereedschap

Verplaatsen, vergroten of verkleinen, dupliceren. Dit is de tool daarvoor. Die roze lijnen tonen je de afstand tot de omringende elementen. De blauwe lijnen helpen u elementen correct uit te lijnen.

Lijn gereedschap

Soms is een lijn handig om delen van het ontwerp te scheiden. Daarom is de lijntool hier. Je kunt technisch gezien in plaats daarvan rechthoekgereedschap gebruiken, maar hey, dus de div kan voor alles worden gebruikt.

Ontwerptips en -technieken

lay-out

Bij webontwikkeling wordt een lay-out meestal beschreven als een koptekst, menu, inhoud en voettekst. Dat hoort erbij, maar een lay-out is meer dan dat. Het is letterlijk de manier waarop alle elementen zijn ingedeeld.

Toen ik bijvoorbeeld de projectinformatie voor Sidemail ontwierp, verdeelde ik elementen binnen een kaart gelijkmatig, waardoor deze vollediger aanvoelt en er schoner uitziet.

kleuren

Overweeg om rekening te houden met de psychologie van kleuren (colorpsychology.org) om u te helpen de perfecte kleur voor uw volgende project te vinden. Een handig hulpmiddel om de perfecte kleurencombinatie te vinden op basis van uw primaire kleur is Paletton.

Gebruik tinten van primaire kleuren en tekstkleuren om een ​​visuele hiërarchie te maken. Probeer donkere of lichtere tinten voor uw tekst wanneer u een gekleurde achtergrond gebruikt.

Typografie

Lettertype beïnvloedt grotendeels de branding van uw project, dus kies verstandig. Premium lettertypen zien er meestal beter uit dan die op Google-lettertypen, maar koop er geen als u net begint. Zelfs op Google Fonts zijn er enkele verborgen pareltjes.

Een truc die ik heel vaak gebruik om tekst visueel op te splitsen, is om labels in hoofdletters te maken met een grotere letterafstand. Tekst in hoofdletters is symmetrisch en ziet er visueel goed uit, maar gebruik het niet te veel omdat het veel moeilijker te lezen is.

Een startpagina (of een bestemmingspagina) ontwerpen

Ik probeer altijd de verleiding te vermijden om trendy elementen te ontwerpen en mijn boodschap erin te proppen. In plaats daarvan bedenk ik voordelen (geen functies), leg ze in een verhaal en vertel dat verhaal via een visueel aantrekkelijke pagina.

Nadat ik heb vastgesteld wat ik wil zeggen, zoek ik meestal naar wat inspiratie. Een geweldige bron daarvoor is land-book.com, een uitgebreide map met mooie landingspagina's waarop mensen kunnen stemmen. Een andere geweldige pagina met ontwerpinspiratie is interfaces.pro waar je kunt filteren op categorieën zoals prijzen, 404 of over ons. Ik blader gewoon door totdat ik genoeg sites vind die ik leuk vind en die overeenkomen met mijn gewenste stijl.

Het moeilijkste is om alles samen te voegen. Helaas is er geen snelkoppeling. Je hoeft alleen maar veel te herhalen totdat je een resultaat krijgt waar je blij mee bent.

Je vraagt ​​je misschien af ​​of het normaal is dat een ontwerp waar je een week geleden helemaal blij mee was, opeens niet goed genoeg of zelfs lelijk aanvoelt. Het antwoord is dat het volkomen normaal en eigenlijk een goede zaak is. Het komt vooral omdat je groeit, leert en beter wordt. De uitdaging van gisteren is niet zo uitdagend vandaag. Houd dit in gedachten zodat je niet vastloopt in een rattenrace.

Takeaways:

  • Uniek lettertype maakt een enorm verschil
  • Afbeeldingen zijn erg belangrijk, probeer op zijn minst enige illustratie of afbeeldingen te gebruiken
  • Krijg visueel belang door meerdere kleuren te gebruiken. Tekst en primaire kleuren zijn niet voldoende.
  • Gebruik geen containers die te breed zijn - ongeveer 1100 px is breed genoeg
  • Omarm de negatieve ruimte
  • Praten over voordelen, niet over functies
  • Kijk rond voor inspiratie als je vastloopt

Een web-app (of een dashboard) ontwerpen

Net als bij het ontwerpen van een bestemmingspagina, spring niet meteen in het ontwerpen. Deze keer probeer je geen verhaal te vertellen. In plaats daarvan is het doel gebruiksgemak. Pak een pen en papier en maak een plan van hoe uw app zou moeten werken, wat ervan moet afhangen en hoe u gemakkelijk kunt navigeren.

Maak indien nodig enkele schetsen of draadframes. Doe een juiste ontwerpinspectie van de concurrent om zelf te zien wat ontbreekt en beter kan worden gedaan, of misschien zelfs omgezet in een concurrentievoordeel. Soms is het beter om een ​​pauze te nemen voordat je plannen op papier maakt en ontwerpt.

Het beste advies dat ik kan geven dat niet case-specifiek is, is het kiezen van een juiste pagina-indeling. Over het algemeen gebruiken alle web-apps twee verschillende paginalay-outs op basis van het doel van de app: container met vaste breedte of vloeistofcontainer die uw hele scherm vult.

Vaste container

Ik geef de voorkeur aan de vaste container, omdat het veel gemakkelijker is om te focussen op een krappe ruimte omdat het onnodige oogbewegingen voorkomt. Vaste container-apps zien er ook vaak schoner uit en zijn minder overweldigend voor nieuwe gebruikers. Vanwege de kleinere breedte zijn vaste container-apps echter moeilijker te ontwerpen.

Voorbeelden: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Vloeistofcontainer

Vloeibare container-apps zijn uitstekend geschikt voor chat-apps, spreadsheet-apps en andere apps waarbij meer dingen op een scherm essentieel zijn. Maar houd er rekening mee dat veel gegevens op een scherm overweldigend kunnen worden.

Voorbeelden: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

Het is belangrijk om de juiste container te kiezen, omdat uw hele pagina-indeling hiervan afhankelijk is en het later wijzigen ervan veel werk is. Elk project is uniek en vraagt ​​om unieke oplossingen, dus wees niet bang om te experimenteren!

Takeaways:

  • Hou het simpel
  • Gebruik een leesbaar lettertype
  • Gebruik visuele hiërarchie bij het weergeven van veel gegevens
  • Profiteer van de slechte ontwerpkeuzes van de concurrent

Afsluiten

Vergeet niet dat ontwerp uw concurrentievoordeel kan zijn - gebruik het dus en maak iets geweldigs.

Begin uw ontwerpreis met een Adobe XD-sjabloon die ik heb gemaakt voor de bestemmingspagina van mijn nieuwste project. Abonneer u eenvoudig op mijn gloednieuwe e-maillijst en deze komt in uw mailbox terecht.

Je bent ook de eerste die een melding ontvangt over mijn volgende bericht, waar ik 69 dagen voortgang deel die ik heb geboekt op Sidemail - een SaaS-project waaraan ik werk. Het bevat dingen als het aantal abonnees, sitebezoeken, uitgaven en ontwerpconcepten. Het spreekt voor zich, maar ik garandeer absoluut geen spam. Ik heb zelfs geen tijd voor die onzin.

Mijn Twitter-DM's zijn open, dus als je vastloopt bij het maken van je ontwerpen of als je nog vragen hebt, voel je vrij om me te raken.