20 Web Design Industry-voorwaarden voor de Clueless-klant
In de webontwerpindustrie gebruiken we veel insider voorwaarden. Dit maakt het niet alleen moeilijk om aan de slag te gaan met nieuwkomers, met name klanten die niet betrokken zijn bij de ontwerpindustrie, maar goed communiceren van hun betekenis kan soms een hele uitdaging zijn.
In deze woordenlijst hebben we verzameld 20 veelgebruikte webontwerptermen en een korte toelichting aan elk toegevoegd, zodat iedereen er snel naar kan kijken in geval van enige onzekerheid. Als u een klant heeft die echt een spoedcursus in webontwerpjargon nodig heeft, deel dit artikel met hen.
“animatie”
Een webontwerptechniek die voegt beweging toe naar elementen op het scherm om visualiseer verandering of te de aandacht van gebruikers trekken.
Animaties zijn krachtiger dan overgangen, omdat ze tussen verschillende begin- en eindpunten door veel verschillende toestanden kunnen gaan, daarom kunnen ze voor worden gebruikt meer gecompliceerde effecten.
“breadcrumb”
EEN navigatietype die gebruikers informeert over hun huidige locatie op een site.
Broodkruimels bevatten de pad waarop de huidige pagina kan worden bereikt vanaf de startpagina, meestal in de indeling Home / Categorie / Pagina. Elk element van het pad is ook clickable zodat gebruikers snel kunnen navigeren door de sitehiërarchie. Broodkruimels worden meestal weergegeven bovenop elke pagina.
“Rommel”
Een blunder met een webontwerp, een indicator van een slecht ontworpen pagina.
We praten over een rommelige pagina als de ontwerper geperst teveel informatie op dezelfde pagina zonder genoeg witruimte toe te voegen en inhoud goed te structureren. Rommelige pagina's hebben lage leesbaarheid, en de gebruikerservaring schaden.
“Kleurenschema”
EEN verzameling harmonisatiekleuren gebruikt voor het maken van een herkenbare merkidentiteit.
Meestal is hetzelfde kleurenschema consistent gebruikt op de website van het merk, mobiele app, logo en marketingmateriaal. Een kleurenschema kan worden ontworpen volgens verschillende principes, er zijn monochromatische, analoge, complementaire, triadische en andere kleurenschema's.
“Contrast”
Een ontwerptechniek om benadrukken verschillen tussen elementen die een verschillende rol of betekenis hebben.
Gebruik makend van Complementaire kleuren (tegengestelden op het kleurenwiel) zijn echter de meest bekende manier om contrast te uiten visuele verschillen in de vorm, stijl, typografie of opmaak van pagina-elementen die we willen onderscheiden, kan ook een contrasterend effect worden bereikt.
“Lege staat”
Een specifieke staat van een website of applicatie wanneer die er is nog geen inhoud op een bepaalde pagina, maar de ontwerpelementen zijn dat wel al op hun plaats.
Statussen voor eerste gebruik, zoals lege profielen zijn typische voorbeelden voor lege statuspagina's. Ze vereisen specifieke ontwerptechnieken (zoals onboarding-ontwerp) gebruikers informeren over wat er op de pagina zou moeten staan, en moedig ze aan om bepaalde activiteiten uit te voeren.
“Vaste lay-out”
EEN layout type waarin een site en zijn elementen gebruik dezelfde breedte bij alle resoluties, gedefinieerd in statische waarden (meestal pixels).
De traditionele manier om websites te bouwen. Zelden gekozen voor nieuwere websites, omdat sites met een vaste lay-out nauwelijks bruikbaar (leesbaar) zijn op mobiele schermen. Om bereikbaar te blijven voor mobiele gebruikers, gebruiken veel vaste lay-outsites een secundaire mobiele site.
“Plat ontwerp”
EEN UI ontwerptaal dat richt zich op schone en minimalistische stijlen, en verwijdert ingewikkelde texturen, patronen, verlopen en andere fancy effecten om gebruikers te helpen betere focus op de inhoud.
Vlak ontwerp is bekritiseerd vanwege bruikbaarheidsproblemen die voortvloeien uit de gebrek aan driedimensionaliteit. Meer volwassen Platte 2.0 ontwerp talen, zoals materiaalontwerp van Google, zijn als reactie verschenen en hebben een beetje diepte toegevoegd aan een plat ontwerp.
“Vloeiende lay-out”
EEN layout type dat maakt gebruik van relatieve eenheden om de breedte van een site en de elementen ervan te definiëren.
De meest gebruikte relatieve eenheden voor vloeistoflay-outs zijn percentages, maar ems en rems kan ook worden gebruikt. Een vloeiende lay-out verkleinen (uitrekken en krimpen) als de breedte van het kijkvenster verandert. In tegenstelling tot responsieve lay-outs, een vloeiende lay-out gebruikt geen mediaquery's. Wordt ook wel aangeduid als vloeibare lay-out.
“Vouwen”
De onderkant van het zichtbare gedeelte van het scherm.
De voorwaarde “boven de vouw” verwijst naar het gedeelte van een webpagina dat bezoekers kunnen zien zonder enige actie te ondernemen, terwijl “onder de vouw” verwijst naar de rest van de pagina die gebruikers kunnen gebruiken alleen bereiken door interactie met de site - meestal door te scrollen of swipen (op mobiel).
Het wordt aanbevolen om te plaatsen branding elementen (bijvoorbeeld het logo), in-site navigatie, en verleidelijke inhoud boven de vouw om gebruikers snel het doel van de site te laten begrijpen en geïnteresseerd te zijn in de rest van de inhoud.
“Sierlijke degradatie”
Een webontwerpstrategie die bevat alle geavanceerde functies standaard op een site en verwijdert later of vereenvoudigt dingen die niet werken in oudere browsers, op minder geschikte apparaten of met lagere bandbreedten.
focussen meer over uiterlijk dan op de inhoud. In het mobiele tijdperk is progressieve verbetering de overheersende webontwerpstrategie geworden voor nieuwe sites; sierlijke degradatie wordt voornamelijk gebruikt op oudere of verouderde sites.
“Held afbeelding”
Een oversized afbeelding banner geplaatst boven de vouw.
Hero-afbeeldingen zijn van hoge kwaliteit, meestal over de volledige breedte afbeeldingen die relevant zijn voor de inhoud van de site. Daar bovenop is er meestal een korte (een of twee regels) tekst die een bericht naar gebruikers overbrengen, en een call-to-action knop die hen oproept om bepaalde acties te ondernemen, zoals winkelen of zich aanmelden voor de site.
“Landingspagina”
Oorspronkelijk elke pagina waar een online bezoeker komt een site binnen. Onlangs is de term eerder gebruikt voor een zelfstandige pagina die is ontworpen voor a specifiek zakelijk doel.
Als webgebruikers bijvoorbeeld een banneradvertentie volgen, bevinden ze zich vaak op een bestemmingspagina die hen oproept een relevant product te kopen. Bestemmingspagina's met een enkele focus en een duidelijke call-to-action hebben de neiging hogere conversiepercentages te behalen.
“Trage voortgang”
Een techniek voor het laden van afbeeldingen en andere statische inhoud, zoals video's, maar kort daarvoor zichtbaar worden voor de gebruiker.
Als een website lui laden gebruikt, worden alleen afbeeldingen boven de vouw eerst geladen, de rest wordt alleen geladen wanneer (als) de gebruiker de pagina schuift. Wordt vaak gebruikt in responsief en mobiel ontwerp bespaart resources. Google AMP versnelt bijvoorbeeld mobiele sites met lui statische bronnen laden standaard.
“Mediaquery”
Een CSS-functie die maakt responsief webontwerp mogelijk door ontwerpers in staat te stellen te creëren verschillende ontwerpen voor verschillende apparaatafmetingen (breedte en / of hoogte), oriëntatie (liggend of staand) en mediatypen (afdrukken, scherm, enz.).
Typisch, responsieve sites hebben afzonderlijke lay-outs voor desktop, tablet en mobiele schermen, de breekpunten tussen hen zijn gedefinieerd door mediaquery's toegevoegd aan de CSS.
“Progressive Enhancement”
Een eerste webontwerpstrategie voegt alleen de basiselementen toe naar een site die werkt op elke browser, bandbreedte en apparaat. Geavanceerdere front-end-functies (stijlen en interactiviteit) zijn geladen in lagen daarna.
Progressieve verbetering in de eerste plaats richt zich op de inhoud, resultaten in sites die dat zijn beschikbaar voor elke gebruiker, daarom is het de overheersende manier om websites te bouwen in het mobiele tijdperk (in tegenstelling tot sierlijke degradatie).
“Reagerend ontwerp”
Een webontwerpaanpak om websites te maken die pas aan de afmetingen aan van verschillende apparaattypen (meestal mobiel, tablet en desktop) door te ontwerpen verschillende lay-outs en andere stijlen (bijvoorbeeld typografie, afbeeldingsgrootte) voor hen.
Responsief ontwerp maakt gebruik van verschillende technieken, zoals relatieve eenheden, flexibele roosters, en mediaquery's om elke gebruiker van bruikbare, leesbare en toegankelijke inhoud te voorzien. De meeste moderne websites gebruiken responsief ontwerp.
“Skeuomorphism”
Een UI-ontwerptaal die gebruikmaakt van de principe van bekendheid, en richt zich op het creëren van ontwerpelementen die lijken op hun equivalent in de praktijk.
Bijvoorbeeld knoppen die op echte knoppen lijken met behulp van effecten zoals afschuinen en reliëf, schaduwen laten vallen, verlopen en andere. Voordat het platte ontwerp de boventoon voerde, was skeuomorfisme al jaren de toonaangevende trend in webontwerp.
“Overgang”
Een webontwerptechniek voor visualiseren van eenvoudige veranderingen wanneer een element op het scherm verandert soepel tussen een begin- en eindstand.
Overgangen - in tegenstelling tot animaties - hebben geen tussenliggende toestanden, alleen een start- en eindpunt, daarom moeten ze voor worden gebruikt subtiele veranderingen, zoals voor visualisatie hover states.
“Witte ruimte”
De lege ruimte tussen aangrenzende ontwerpelementen. Wordt ook wel aangeduid als negatieve ruimte.
Witte ruimte helpt gebruikers skim de inhoud, en visueel geeft inhoudshiërarchie aan. Witte ruimte is niet noodzakelijk wit, maar gebruikt de achtergrondkleur van de site. Het ontbreken van voldoende witte ruimte leidt tot een rommelige pagina.
