Tablet CSS-sjablonen

Moderne tablet-CSS-templates voor app-lanceringen en digitale diensten

Dezelfde lijst met functies voor een tablet-app kan in het ene ontwerp rustig en technisch ogen en in het andere juist opvallend en promotioneel, ook al is er geen woord veranderd. Tablet-CSS-templates bieden een visueel systeem met op elkaar afgestemde typografie, kleuren en tussenruimtes, zodat u het alleen nog hoeft af te stemmen op uw product. Veel ontwerpen in deze categorie richten zich op mobiele apps, IT-diensten en tabletmobiliteit.

Een ontwerp beoordelen op basis van het voorbeeld

Neem twee ontwerpen voor een app met meerdere interfaceschermen. In het ene nemen screenshots het grootste deel van elk blok in beslag en krimpt de functietekst tot bijschriften. In het andere leiden krachtige voordeelkoppen en verschuiven de afbeeldingen naar een kleinere rij. Het eerste ontwerp past bij een app die mensen moeten zien; het tweede bij een app waarvan de voordelen zwaarder wegen dan het uiterlijk. Een voorbeeld toont ook drie kleinere details die het vergelijken waard zijn:

1. Een duidelijke typografische schaal houdt een grote kop, korte functienamen en compacte apparaatspecificaties goed gescheiden.
2. Screenshot-kaders moeten geschikt zijn voor brede tabletinterfaces, omdat een stijl die is ontworpen voor smalle telefoon-mockups ze vaak afsnijdt of verkleint.
3. Knopstijlen moeten de primaire actie, zoals een download, onderscheiden van secundaire links en groot genoeg blijven om gemakkelijk aan te tikken.

Visuele instellingen vóór aangepaste regels

Zodra u een passend ontwerp hebt gekozen, voert u de meeste wijzigingen door via de visuele instellingen van Nicepage voor kleuren, lettertypen en tussenruimtes. Aangepaste CSS zorgt voor alles daarbuiten op drie niveaus:

1. Een elementregel wijzigt één element nadat u het een eigen klasse hebt gegeven, wat handig is als één functiekaart moet opvallen.
2. Een paginaregel is alleen van toepassing op één pagina, zodat een productlancering een eigen accentkleur kan krijgen terwijl andere pagina's hun eigen stijl behouden.
3. Een siteregel geldt overal, wat ideaal is voor een gedeelde knopvorm of kopgrootte.

De documentatie over Custom CSS legt uit hoe u elementklassen toewijst en waar pagina- en siteregels worden geplaatst.

Het resultaat testen op kleinere schermen

Nicepage voert aangepaste CSS niet uit binnen de editor om conflicten te voorkomen. Controleer die regels daarom in het voorbeeld en de standaardstijlen in de responsieve modi. Let op een pagina voor mobiliteitsdiensten op de rijen waar een grote interface-afbeelding naast een functiebeschrijving staat. Nadat de afbeelding en tekst op een smal scherm onder elkaar worden gestapeld, leidt een goed ontwerp het oog nog steeds naar de hoofdknop en blijft elk bijschrift bij het bijbehorende screenshot. In een tabletwinkel verdienen kaarten waar een prijs en een opslaglabel één regel delen dezelfde controle.

Een lijst met aangepaste regels die steeds langer wordt terwijl u tablet-CSS-templates vergelijkt, betekent meestal dat een ander ontwerp een beter uitgangspunt zou zijn.