nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


20 Web Design Industry-voorwaarden voor de Clueless-klant

In de webontwerpindustrie gebruiken we veel insider-termen . 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 hun betekenis goed communiceren, kan soms een hele uitdaging zijn.

In deze woordenlijst hebben we 20 vaak gebruikte webontwerptermen verzameld en een korte uitleg aan elk ervan 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.

“Animation”

Een webontwerptechniek die beweging toevoegt aan elementen op het scherm om veranderingen te visualiseren of de aandacht van gebruikers te trekken .

Animaties zijn krachtiger dan overgangen, omdat ze tussen verschillende begin- en eindpunten door veel verschillende statussen kunnen gaan, waardoor ze kunnen worden gebruikt voor complexere effecten .

“Broodkruimel”

Een navigatietype dat gebruikers informeert over hun huidige locatie op een site.

Breadcrumbs bevatten het pad waarop de huidige pagina kan worden bereikt vanaf de startpagina, meestal in het formaat Home / Category / Page . Elk element van het pad is ook klikbaar, zodat gebruikers snel door de sitehiërarchie kunnen navigeren . Broodkruimels worden meestal weergegeven op de top van elke pagina .

"Rommel"

Een blunder met een webontwerp, een indicator van een slecht ontworpen pagina .

We hebben het over een rommelige pagina wanneer de ontwerper te veel informatie op dezelfde pagina heeft geperst zonder dat er voldoende witte ruimte is toegevoegd en de inhoud goed is gestructureerd. Rommelige pagina's hebben een lage leesbaarheid en schaden de gebruikerservaring .

"Kleurenschema"

Een verzameling harmonisatiekleuren die wordt gebruikt om een herkenbare merkidentiteit te creëren.

Gewoonlijk wordt hetzelfde kleurenschema consistent gebruikt op de website, mobiele app, logo en marketingmaterialen van het merk. Een kleurenschema kan worden ontworpen volgens verschillende principes, er zijn monochromatische, analoge, complementaire, triadische en andere kleurenschema's.

"Contrast"

Een ontwerptechniek om verschillen tussen elementen met een andere rol of betekenis te benadrukken .

Het gebruik van complementaire kleuren (tegenstellingen op het kleurenwiel) is de meest bekende manier om contrast te benadrukken, maar visuele verschillen in de vorm, stijl, typografie of opmaak van pagina-elementen die we willen onderscheiden, kunnen ook een contrasterend effect bereiken.

"Lege staat"

Een specifieke staat van een website of toepassing wanneer er nog geen inhoud op een bepaalde pagina staat, maar de ontwerpelementen zijn al op hun plaats .

Statussen voor eerste gebruik, zoals lege profielen, zijn typische voorbeelden van lege statuspagina's. Ze vereisen specifieke ontwerptechnieken (zoals onboarding-ontwerp) die gebruikers informeren over wat er op de pagina moet staan ​​en moedigen hen aan bepaalde activiteiten uit te voeren.

"Vaste lay-out"

Een lay-outtype waarbij een site en de elementen ervan dezelfde breedte gebruiken voor 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 sites met een vaste opmaak een secundaire mobiele site .

"Plat ontwerp"

Een UI- ontwerptaal die zich richt op schone en minimalistische stijlen en ingewikkelde texturen, patronen, verlopen en andere mooie effecten verwijdert om gebruikers te helpen zich beter op de inhoud te concentreren .

Vlak ontwerp is bekritiseerd vanwege bruikbaarheidsproblemen die voortkomen uit het ontbreken van driedimensionaliteit . Meer oudere Flat 2.0-ontwerptalen, zoals het materiaalontwerp van Google, zijn als reactie verschenen en hebben een beetje diepte toegevoegd aan een plat ontwerp.

"Vloeiende lay-out"

Een lay-outtype dat relatieve eenheden gebruikt om de breedte van een site en de bijbehorende elementen te definiëren.

De meest gebruikte relatieve eenheden voor vloeistoflay-outs zijn percentages, maar em s en rem s kunnen ook worden gebruikt. Een vloeiende lay-out wordt gewijzigd (strekt zich uit en krimpt) wanneer de breedte van het kijkvenster verandert. In tegenstelling tot responsieve lay-outs, gebruikt een vloeiende lay-out geen mediaquery's . Wordt ook wel vloeibare lay-out genoemd .

"Vouwen"

De onderkant van het zichtbare gedeelte van het scherm.

De term '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 alleen kunnen bereiken door interactie met de site - meestal door scrollen of vegen (op mobiel).

Het wordt aanbevolen om merkelementen (zoals het logo), in-site navigatie en verleidelijke inhoud boven de vouw te plaatsen, zodat gebruikers snel het doel van de site begrijpen en geïnteresseerd zijn in de rest van de inhoud.

"Graceful Degradation"

Een webontwerpstrategie die standaard alle geavanceerde functies op een site bevat en later dingen verwijdert of vereenvoudigt die niet werken in oudere browsers, op minder geschikte apparaten of met lagere bandbreedten.

Richt zich meer op uiterlijk dan op de inhoud. In het mobiele tijdperk is progressieve verbetering de overheersende webontwerpstrategie voor nieuwe sites geworden; sierlijke verslechtering wordt voornamelijk gebruikt op oudere of verouderde sites .

"Hero Image"

Een oversized afbeeldingbanner boven de vouw geplaatst .

Held-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 (één of twee regels) tekst die een bericht naar gebruikers doorstuurt, en een call-to-action knop die hen oproept om een ​​bepaalde actie te ondernemen, zoals winkelen of aanmelden bij de site .

"Bestemmingspagina"

Oorspronkelijk elke pagina waar een online bezoeker een site binnengaat . Onlangs is de term eerder gebruikt voor een zelfstandige pagina die is ontworpen voor een specifiek zakelijk doel .

Als webgebruikers bijvoorbeeld een banneradvertentie volgen, bevinden ze zichzelf vaak op een bestemmingspagina die hen oproept een relevant product te kopen. Bestemmingspagina's met één focus en een duidelijke call-to-action hebben de neiging om hogere conversiepercentages te behalen.

"Trage voortgang"

Een techniek voor het laden van afbeeldingen en andere statische inhoud, zoals video's, slechts kort voordat ze 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, omdat het resources bespaart . Google AMP versnelt bijvoorbeeld mobiele sites door standaard lui statische bronnen te laden .

"Mediaquery"

Een CSS-functie die responsief webontwerp mogelijk maakt door ontwerpers in staat te stellen verschillende ontwerpen te maken voor verschillende apparaatafmetingen (breedte en / of hoogte), oriëntaties (liggend of staand) en mediatypen (afdrukken, scherm, enz.).

Doorgaans hebben responsieve sites aparte lay-outs voor desktop-, tablet- en mobiele schermen, de breekpunten daartussen worden gedefinieerd door mediaquery's die aan de CSS zijn toegevoegd.

"Progressive Enhancement"

Een webontwerpstrategie die eerst alleen de basiselementen toevoegt aan een site, die werkt op elke browser, bandbreedte en apparaat. Geavanceerdere front-end-functies (stijlen en interactiviteit) worden achteraf in lagen geladen .

Progressive Enhancement richt zich primair op de inhoud, resultaten op sites die voor elke gebruiker toegankelijk zijn. Daarom is het de belangrijkste manier om websites te bouwen in het mobiele tijdperk (in tegenstelling tot sierlijke verslechtering).

"Reagerend ontwerp"

Een webontwerpaanpak om websites te maken die zich aanpassen aan de afmetingen van verschillende apparaattypen (meestal mobiel, tablet en desktop) door voor hen verschillende lay-outs en andere stijlen (bijv. Typografie, afbeeldingsgrootte) te ontwerpen.

Responsief ontwerp maakt gebruik van verschillende technieken, zoals relatieve eenheden, flexibele rasters 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 het vertrouwensbeginsel en die zich richt 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 schuine kant en embossing, slagschaduwen, verlopen en andere . Voordat het platte ontwerp de boventoon voerde, was skeuomorfisme al jaren de toonaangevende trend in webontwerp.

"Overgang"

Een webontwerptechniek voor het visualiseren van eenvoudige veranderingen wanneer een element op het scherm vloeiend verandert tussen een begin- en eindstand.

Overgangen - in tegenstelling tot animaties - hebben geen tussenliggende toestanden, alleen een begin- en eindpunt, daarom moeten ze worden gebruikt voor subtiele veranderingen, zoals voor het visualiseren van hover-states .

"Witte ruimte"

De lege ruimte tussen aangrenzende ontwerpelementen. Wordt ook negatieve ruimte genoemd .

Witte ruimte helpt gebruikers de inhoud te doorzoeken en geeft de inhoudshiërarchie visueel 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 .

CSS - margin: auto - Hoe het werkt

CSS - margin: auto - Hoe het werkt

margin:auto om een ​​blokelement horizontaal te centreren is een bekende techniek. Maar heb je je ooit afgevraagd waarom of hoe het werkt? Om dit te beantwoorden, moeten we eerst kijken hoe marge: auto werkt. Ook in de mix is ​​wat auto mogelijk in marges kan doen, als het werkt voor verticale centrering, en een paar andere problemen.Maar ee

(Technische en ontwerptips)

Versiebeheer in Visual Studio-code met Git [Guide]

Versiebeheer in Visual Studio-code met Git [Guide]

Geïntegreerde Git-ondersteuning is een van de grootste functies van Visual Studio Code, de nieuwe broncode-editor van Microsoft. Git is een gedistribueerd versiecontrolesysteem, waarmee je je werk kunt volgen, heen en weer kunt schakelen tussen versies en tegelijkertijd op verschillende branches kunt werken.

(Technische en ontwerptips)