4 Essentiële lay-outtrends voor 2015
Het web is het afgelopen decennium veel veranderd en tegelijkertijd is het helemaal niet veranderd. Als we terugblikken op 10 jaar, zullen we merken dat het web een heel gebruikelijk lay-outpatroon had op het werk op de meeste sites. Dit startpatroon bestond uit een koptekst, voettekst, zijbalk en inhoudsgebied. Het was de verwachte lay-out voor het web. Tegelijkertijd hadden we de opkomst van Macromedia Flash, die plaats maakte voor een tijdperk met alternatieve lay-outs. Lay-outs die niet aan deze strenge formule voldeden. En natuurlijk met de implosie van Flash vervaagde deze aanpak een beetje ... Ik zeg voor een beetje, omdat het terug is met een wraak.
Als u een van de vele populaire galerijen bekijkt die het huidige webontwerp presenteren, zult u ongetwijfeld merken dat de fundamentele structuur voor webpagina's allesbehalve vast is. Het kan buigen en veranderen in zo ongeveer alles wat het moet zijn. Dit is naar mijn mening een van de beste bijwerkingen die webontwerp heeft gegenereerd. De nieuwe norm als het ware, is dat er helemaal geen vaste formule lijkt te zijn.
Dit alles zegt dat we verschillende trends op hoog niveau in lay-outontwerp kunnen waarnemen die volgens mij een ongebruikelijke lay-out vormen. Ongewoon omdat ze geen strikte formule of een vooraf gedefinieerd systeem volgen. Maar het zijn trends in die zin dat ik tientallen, zo niet honderden voorbeelden kan bieden voor elk van deze categorieën.
Wat je hier vindt, is een interessante mix van trends en ongewone lay-outs die je hopelijk zullen inspireren om de fundamentele structuren te beoordelen die je toepast op webdesign. Laten we duiken en een kijkje nemen ...
Gesplitste schermen
In deze categorie vinden we een selectie van sites die allemaal het scherm splitsen met een verticale kloof. Er zijn misschien veel redenen om dit te doen, en bij het onderzoeken van vele voorbeelden van dit type heb ik twee hoofdredenen gevonden.
De eerste is dat een ontwerp soms echt twee primaire elementen van even groot belang kan hebben. Een gemeenschappelijke benadering van webdesign is om dingen in volgorde van belangrijkheid te rangschikken. Dit belang wordt vervolgens weerspiegeld in de hiërarchie en structuur van het ontwerp. Maar wat als je eigenlijk twee dingen moet promoten? Met deze benadering kunt u beide bekendheid geven en de gebruiker in staat stellen snel tussen de twee te kiezen.
De tweede reden die ik heb gevonden voor deze benadering is dat je soms een belangrijke dualiteit moet overbrengen. Overweeg bijvoorbeeld de Eight en Four website. Hier willen ze laten zien dat hun sterke punten liggen in hun digitale wortels en hun getalenteerde medewerkers. Deze koppeling is wat ze definieert. Het gesplitste scherm is een mooie manier om dit te presenteren. En ik hou vooral van hoe het en-teken de twee kanten verenigt.
Geen chroom!
Een van de belangrijkste elementen die worden gebruikt bij webontwerp, zijn elementen: kaders, randen, vormen en containers van alle soorten die worden gebruikt om de inhoud van een pagina van elkaar te scheiden. Overweeg een stereotiepe header waarin de elementen netjes zijn ingesloten en gescheiden van de inhoud. Een algemene trend is nu om al dit extra chroom te verwijderen.
Dit is een minimalistische benadering, maar het gaat een stap verder en heeft een aantal interessante wendingen langs de weg.
In dit voorbeeld hebben ze de notie van een koptekst en voettekst bij elkaar geëlimineerd. Het voelt meer als een interactieve kiosk. De hiërarchie van inhoud wordt voornamelijk gedaan door een organisatie van links naar rechts, wat de lay-out zeer intuïtief maakt. En het chroom om navigatie van inhoud te scheiden is eenvoudigweg niet nodig. In plaats daarvan schijnen de prachtige producten er doorheen.
Hier vinden we dat de inhoud sterk wordt benadrukt door het verwijderen van elk gevoel voor een kop- of voettekst. In plaats van eerst een koptekst te lezen, lees je de naam van het bedrijf en een duidelijke verklaring over wat ze doen (en waar ze het doen). Gevolgd door de hoofdnavigatie. Wat een geweldige manier om het merk te benadrukken voordat je mensen laat navigeren. Het zorgt voor een elegante flow. Interessant is dat je tijdens het scrollen een koptekst en een vleugje chroom krijgt. Een mooie en effectieve lay-out die het patroon op een inspirerende manier gebruikt.
Modulair of op raster gebaseerd
Vervolgens hebben we lay-outs gebouwd op modulaire of rasterachtige structuren. In deze ontwerpen is elke module bedoeld om te buigen op basis van de schermgrootte. Dit is niet echt een nieuwe aanpak, maar de introductie van responsief webontwerp heeft het nog nuttiger gemaakt. Dit verwijst naar het type aanpasbare lay-outs dat je kunt maken met plug-ins zoals Masonry.
Dit voorbeeld laat het idee perfect zien. Het ontwerp reageert volledig. Naarmate de schermgrootte verandert, past elke module zich aan en wordt de grootte aangepast aan de ruimte. Door de ruimte gelijkmatig te verdelen, is het gemakkelijker om het ontwerp aan te passen. En ze krijgen bonuspunten voor het introduceren van een element (bij grotere schermformaten) dat de starre barrières tussen modules doorbreekt.
Dit voorbeeld is een vrij intense versie van het patroon. Het omarmt natuurlijk de modulaire aanpak, waardoor ze gemakkelijk naar behoefte inhoud kunnen in- en uitwisselen. Maar hier is een belangrijk ontwerpelement aan het werk, dat in het vorige voorbeeld ontbrak. De grootte van de modules varieert afhankelijk van de volgorde van belangrijkheid en de plaats in de hiërarchie. Een risico van deze modulaire aanpak is om alles even groot te maken, wat betekent dat je niet echt ergens de nadruk op legt. Dit voorbeeld geeft daarentegen duidelijk belang aan het primaire element.
Een enkel scherm vullen
Ten slotte hebben we sites met een benadering waarbij het ontwerp zich aanpast om het scherm volledig te vullen. Dit is een deelverzameling van responsief ontwerp omdat het zich aanpast aan de schermgrootte. Maar in deze nis passen de ontwerpen zich zodanig aan dat ze het scherm volledig vullen en geen schuifbalken produceren. Dit gebrek aan scrollen betekent dat de inhoud extreem gefocust moet zijn en dat de hiërarchie van inhoud duidelijk moet worden vastgesteld. Ik vind de focus en helderheid van deze sites verfrissend.
Conclusie
Hoewel ik elk van deze trends hier geïsoleerd heb ontleed, is de realiteit dat ze bouwstenen vertegenwoordigen. En deze bouwstenen kunnen op veel verschillende manieren worden geassembleerd. Sterker nog, veel van de hier gepresenteerde voorbeelden kunnen worden verplaatst naar een groot aantal van de categorieën die we hebben besproken. De diversiteit aan lay-outs op het moderne internet en het feit dat ze bruikbaar zijn, maakt het web een opwindend medium om mee te werken.