Het boek is opgedeeld in 9 hoofdstukken, namelijk:

Beginnen van nul

Het begin is één van de lastigste onderdelen van het ontwerpen, want waar moet je starten als je naar een wit leeg scherm kijkt? Wathan en Schoger geven de volgende tips:

• Begin met het ontwerpen van een klein onderdeel van de app of site. Als je bijvoorbeeld een website maakt waar vluchten gezocht kunnen worden begin dat met het formulier waar gebruikers hun voorkeuren van een vlucht kunnen opgeven.
• De details komen later. Begin grof te schetsen desnoods met pen en papier.
• Wacht met kleuren toevoegen. Ontwerp eerst met grijstinten zodat je focust op de functionaliteit.
• Ontwerp niet teveel in één keer, maar zet een gedeelte van het ontwerp eerst om in code. Hiermee voorkom je dat je in een later stadium voor verrassingen komt te staan die je niet gemakkelijk meer kan corrigeren.
• Wees een pessimist. Dat wil zeggen dat je alleen dingen ontwerpt waarvan je weet dat ze makkelijk te bouwen zijn. De spreekwoordelijke kersen op de taart komen later wel.
• Kies een persoonlijkheid voor jouw website. Is dit serieus en zakelijk? Dan gebruik je sobere kleuren en fotografie. Is dit vrolijk en speels? Gebruik dan heldere kleuren en illustraties.
• Er is veel onderzoek naar kleuren, maar doe wat goed voelt. Met blauw zit je eigenlijk altijd goed.
• Elementen met afgeronde hoeken maken het geheel speelser. Zonder afgeronde hoeken wordt het formeler en zakelijker.
• Ook in de taal die je gebruikt kun je een personaliteit kwijt door bijvoorbeeld spreektaal te gebruiken wanneer een gebruiker een formulier heeft ingevuld.
• Beperk je keuzes. Maak een systeem met vaste formaten, zoals de grootte van verschillende tekst onderdelen, en kleuren zodat je niet elke keer opnieuw een keuze hoeft te maken.

Het belang van hiërarchie

Niet alle elementen zijn gelijk aan elkaar. Sommige onderdelen van je app of website zijn belangrijker dan andere. Hiërarchie in je ontwerp bereik je volgens Wathan en Schoger met behulp van deze adviezen:

• Wissel niet teveel af tussen verschillende groottes van elementen, maar creëer hiërarchie door kleurgebruik of verschillende letterdiktes.
• Gebruik geen grijze tekst op een gekleurde achtergrond, maar kies een lichtere tint van de achtergrondkleur voor deze tekst.
• Maak elementen belangrijker door de elementen eromheen minder belangrijk te maken. Denk bijvoorbeeld aan menu items die lichter van kleur zijn dat het actieve menu item.
• Gebruik alleen labels van elementen als deze niet voor zich spreken. Voor een e-mailadres hoeft bijvoorbeeld niet het label 'e-mailadres' te staan omdat het duidelijk is dat het om een e-mailadres gaat.
• Combineer labels en waarden. Dus niet 'Op voorraad: 12' maar 'Nog 12 op voorraad'.
• Labels zijn secundair aan de waarde dus maak ze daarom ook niet even groot of opvallend.
• In sommige gevallen is het label wel belangrijker dan de waarden. Bijvoorbeeld in een overzicht met specificaties. In dat geval mag het label wel opvallen.
• Koppel visuele hiërarchie los van de technische hiërarchie. Dus een 'H1' tag hoeft niet altijd het grootste element op de pagina te zijn als dit niet direct het belangrijkste is.
• Zorg voor een balans tussen de aanwezigheid van een element en contrast. Maak bijvoorbeeld een icoon voor een label lichter van kleur dan de tekst van het label.
• Wanneer er meerdere acties uitgevoerd kunnen worden op een element zorg er dan voor dat de belangrijkste actie het meeste opvalt.
• Wees zorgvuldig met de opmaak van acties die iets kunnen verwijderen. Zorg dat deze er niet uitzien als een primaire actie en vraag altijd voor een bevestiging voor als een gebruiker er per ongeluk op geklikt heeft.

Lay-out en (wit)ruimtes

De indeling van de elementen en de (wit)ruimtes om de elementen zijn een belangrijk onderdeel wanneer je een app, webapp of website ontwerpt. Wathan en Schoger zeggen hierover het volgende:

• Begin met teveel witruimte. Zet alles ruim op en ga dan langzaam steeds meer witruimte weghalen.
• Er is een plek voor User Interfaces met weinig witruimte, maar alleen als er veel informatie tegelijk getoond moet worden.
• Maak een systeem voor de pixelafstanden die je gebruikt voor je witruimtes. 
• Vergroot of verklein alles in verhouding. Hou niet teveel vast aan een rigide systeem.
• Gebruik 16 pixels als basis van je systeem en gebruik waarden door er telkens vier pixels aan te te voegen of af te halen (dus 4, 8, 12, 16, 20, 24, cetera).
• Het is niet nodig om het hele beschikbare scherm te vullen. Soms is het mooier om bepaalde elementen af te kaderen en te centreren.
• Het kan helpen om te ontwerpen met een kleiner canvas, bijvoorbeeld een smartphone, en dit ontwerp dan op te schalen naar grotere schermen zoals desktop monitors.
• Grid systemen zijn overschat. Laat niet al je lay-out beslissingen hiervan afhangen en wees flexibel waar nodig.
• Niet alle elementen moet een variabele breedte hebben. Sommige items moet een vast breedte hebben zoals de afbeelding van een persoon naar een referentie.
• Maak elementen alleen kleiner als het echt nodig is, dus wanneer er geen ruimte meer is om ze volledig te tonen.
• Verklein of vergroot niet relatief. De lettergrootte van een kop kan namelijk sneller verkleinen dat de tekst van de body tekst. Dit hoeft niet altijd relatief aan elkaar te zijn.
• Gebruiker witruimte, kleuren en randen om scheidingen aan te geven tussen verschillende items in een overzicht.

Ontwerpen van tekst

Tekst is een belangrijk onderdeel van elke User Interface. In het boek staan tips zoals:

• Zorg voor een systeem met vaste lettergroottes. Doe dit in een lineaire schaal uitgaande van 16 pixels in stapjes van 4. 
• Gebruik geen em units, maar px of rem omdat je in de problemen kan raken met em units wanneer je een hiërarchie hebt met meerdere elementen.
• Gebruik goede fonts. Speel op safe en kies fonts die zich al een tijd bewezen hebben zoals Roboto en Helvetica.
• Laat fonts die minder dan vijf 'weights' hebben links liggen. Aan deze fonts is over het algemeen minder aandacht besteed. Daarnaast verminder je de keuzestress. Op bijvoorbeeld Google Fonts valt hiermee 85% van alle lettertypes af.
• Optimaliseer voor leesbaarheid.
• Volg de meute. Als een lettertype populair is dan is er een grote kans dat het gewoon een goed font is.
• Steel: Gebruik dezelfde lettertypen als die van je favoriete websites.
• Maak de lengte van je zinnen niet te lang. Tussen de 45 en 75 tekens per regel is perfect.
• Lijn je tekst uit met de 'baseline' om rare verspringen te voorkomen.
• Maak je lijnhoogte proportioneel aan de lettergrootte van je tekst.
• Niet elke link tekst heeft een kleur nodig. Je kan er ook een streep onder zetten als iemand over de link heen beweegt met de muis.
• Lijn de tekst voornamelijk links uit. Centreer alleen kleine stukjes tekst.
• Lijn getallen in een tabel rechts uit.
• Zorg dat tekst afgebroken wordt met afbrekingstreepjes wanneer je een tekst laat uitvullen.
• Je kan de ruimte tussen de letters met rust laten, vertrouw hier op de ontwerpen van het lettertype. Er zijn echter uitzonderingen zoals voor koppen waarbij je de letters dichter tegen elkaar aan kunt zetten.

Werken met kleur

Kleur is een ander onderdeel van een User Interface dat veel aandacht krijgt in het boek. De adviezen van Wathan en Schoger luiden als volgt:

• Gebruik HSL in plaats van RGB of hex om kleuren mee te definiëren in je code. HSL komt namelijk meer overeen met hoe het menselijk oog kleuren interpreteert.
• Je hebt meer kleuren nodig dan je denkt. Een primaire en secundaire kleur en verschillende grijstinten. Van de primaire en secundaire kleuren heb je ook minstens vijf verschillende tinten (van licht naar donker) nodig.
• Definieer de verschillende tinten van tevoren zodat deze kleuren consistent zijn in het ontwerp van je User Interface.
• Kies de tinten op gevoel en niet volgens een systeem met vaste waarden.
• Grijs hoeft niet grijs te zijn. Je kan je grijstinten koeler maken door er blauw aan toe te voegen. Warmer kan ook, dan voeg je een beetje geel of oranje toe aan de grijstinten.
• Laat kleur niet leidend zijn om een bepaalde boodschap over te brengen. Niet iedereen kan elke kleur even goed zien, denk aan mensen die kleurenblind zijn. Voeg daarom een icoon of label toe waar nodig.

Creëren van diepte

Met diepte kun je bepaalde elementen in jouw User Interface laten opvallen. Wathan en Schoger geven aan hoe je dat het beste kan doen, namelijk door:

• Altijd een lichtbron van boven te emuleren. Dat wil zeggen dat het bovenste gedeelte van bijvoorbeeld een button lichter is dan het onderste gedeelte.
• Gebruik een schaduw om bepaalde elementen van de pagina los te laten komen. Bijvoorbeeld een schaduw onder een button.
• Gebruik een schaduw in een element om een effect te simuleren waarbij het lijkt alsof het in de pagina gedrukt zit.
• Verspil er niet teveel tijd aan. Het effect van licht hoeft niet fotorealistisch te zijn.
• Des te meer schaduw des te verder het element van de pagina af lijkt te staan.
• Hevigere schaduweffecten kunnen gebruikt worden om een bepaald element op te laten vallen.
• Gebruik schaduwen bij interactie. Bijvoorbeeld wanneer je een element een schaduw geeft als de gebruiker eroverheen hovert.
• Eén element kan ook twee schaduwen hebben om een mooier effect te creëren.
• Ook binnen een 'flat design' kun je diepte creëren met kleurverschil en solide schaduwen (dikke strepen die niet wazig worden).
• Overlap bepaalde elementen om diepte te simuleren. Zoals een formulier met filters dat gedeeltelijk overlapt met een afbeelding.
• Gebruik randen wanneer afbeeldingen overlappen. Bijvoorbeeld de afbeelding van een gebruiker die overlapt met een afbeelding van ander element.

Werken met afbeeldingen

Afbeeldingen kunnen een ontwerp maken of breken. Wathan en Schoger doen de volgende suggesties:

• Gebruik onder geen beding slechte foto's. Huur desnoods een fotograaf in of gebruik hoogstaande stockfotografie.
• Let op contrast wanneer je tekst over een afbeelding plaatst. Een oplossing kan zijn om de afbeelding donkerder te maken zodat de tekst beter leesbaar is. Je kan de afbeelding ook een bepaalde (donkere) kleurentint geven of de tekst voorzien van een schaduw.
• Gebruik iconen in de afmetingen waarvoor ze bedoeld zijn. Vergroot icoontjes die gemaakt zijn voor 16 x 16 pixels niet, maar optimaliseer de iconen zodat ze beter passen bij de afmetingen waarvoor jij ze wil gebruiken.
• Verklein geen screenshots. Als je een screenshot wil tonen op je website kan het erg rommelig worden als je deze verkleint omdat de tekst dan erg priegelig wordt. Een oplossing is om een kleine weergave te tonen, bijvoorbeeld de mobiele versie of om een gedeelte van het screenshot te tonen. Je kan ook een abstracte versie van je User Interface tonen waarbij de tekst wordt vervangen door simpele lijnen.
• Let op met afbeelding die door gebruikers van je app of website ge-upload worden (user generated content). Laat bijvoorbeeld afbeeldingen altijd in hetzelfde formaat zien ongeacht het formaat dat ze zijn ge-upload. Of wanneer gebruikers een profielfoto uploaden die overvloeit in de achtergrond, voeg er dan een binnenschaduw of semi-transparante rand aan toe.

De puntjes op de i

Met deze aanwijzingen van de twee auteurs geef je jouw design net even dat beetje extra:

• Pas standaardstijlelementen aan. Vervang bijvoorbeeld de standaard bullets van een lijst met icoontjes. Of geef quotes van klanten of gebruikers extra opmaak mee. Ook links (standaard blauw en onderstreept) zijn een mooie kans om iets speciaals van te maken. Hetzelfde geldt voor formulierelementen zoals radiobuttons en checkboxen. 
• Voeg accenten toe met gekleurde randen. Dit kan bijvoorbeeld aan een 'card' element, een actief menu item, links van een waarschuwingsmelding of onder een kop. Of zelfs over de gehele layout.
• Maak handig gebruik van achtergronden. Je kan elementen een achtergrondkleur meegeven om het minder saai te maken. Dit kan bij individuele elementen of gehele gedeeltes van je ontwerp. Daarnaast kun je de achtergrond opleuken met een subtiel patroon dat herhaald wordt.
• Vergeet de lege weergaven niet. Als er nog geen inhoud geplaatst is in een bepaalde weergave is dit een uitgelezen kans om gebruikers op een mooi vormgeven manier uit te nodigen om iets te plaatsen. Laat ook acties achterwege die nog niet gebruikt kunnen worden, omdat er nog geen content is. Zoals een filter of bewerkacties.
• Gebruik minder lijnen om onderscheid te maken tussen elementen. Dit kan het geheel nogal statisch maken. Varieer met schaduwen, achtergrondkleuren en extra witruimte.
• Denk out of the box. Maak bijvoorbeeld een standaard dropdown menu uitgebreider met verschillende secties en iconen. Of hou niet vast aan de indeling van een standaard tabel maar probeer daarbinnen te variëren met lettergroottes of voeg afbeeldingen toe. Zo kun je ook standaard checkboxen uitbreiden mooier opmaken wanneer bijvoorbeeld een keuze moet maken tussen verschillende pakketten.

Je skills naar een hoger niveau te tillen

Tot slot krijg je nog wat praktische tips om verder te leren:

•  Probeer te leren van andere designers. Merk op wanneer je iets ziet in een User Interface ontwerp waar je wellicht zelf nog niet aan gedacht had. 
• Bouw je favoriete User Interfaces na. Dit is een snelle manier om te leren hoe deze precies in elkaar steken.

Concrete voorbeelden en betere uitleg

In het boek staan concrete voorbeelden met afbeeldingen en worden alle bovenstaande tips en tricks beter uitgelegd. Het boek is te verkrijgen op de website van Refactoring UI.