Share
Zoals Ferris Bueller beroemde zei: "Het leven gaat vrij snel, als je niet eens een keer rondkijkt, zou je het kunnen missen". Laten we aandacht schenken aan zijn wijze advies en even stilstaan bij een aantal webdesigntrends die we in 2011 hebben gezien.
Het web is een steeds veranderend beest, vol gebreken en imperfectie en experimenten. - Dan Cederholm
Responsive Web Design wordt een beetje een briljant, maar over-gespeeld nummer. Het lijkt erop dat iedereen zijn zegje heeft gedaan, en de agenda van Ethan Marcotte heeft er nog nooit gezonder uitgezien. Daar is echter een goede reden voor; het concept is eenvoudig, de motieven zijn logisch, de technologie is eenvoudig en de resultaten zijn buitengewoon bevredigend.
In 2011 zagen we een explosie van het aantal websites dat responsief is opgebouwd en het mooie ervan is dat we allemaal betrokken zijn bij de ontwikkeling van het proces. Het is nog steeds in zijn jeugd, ontwerpers en ontwikkelaars verzinnen voortdurend nieuwe benaderingen, en we zijn nog ver verwijderd van alle echte best-practices. Moeten we eerst ontwerpen voor grote schermen en mediaquery's gebruiken om gracieus onze ontwerpen voor mobiel te degraderen? Of moeten we eerst ontwerpen voor mobiel, geleidelijk aan verbeteren voor beter presterende apparaten? Paul Irish begon een interessante thread op GitHub als je de discussie graag zou willen aangaan.
Een ding dat RWD heeft belicht, is de focus op inhoud. Afgezien van alle andere factoren, is de inhoud van een bepaalde website belangrijk; het vlees-en-twee-veg moet leesbaar, toegankelijk en duidelijk zijn op elk apparaat. Ontwerpers nemen dit zeker mee, zoals blijkt uit veel van de opkomende websites van 2011.
Wanneer alles is gezegd en gedaan, zelfs als je het beu bent om nog meer RWD-zelfstudies en -artikelen te zien die opduiken, blijf dan op de hoogte. 2012 gaat grote ontwikkelingen zien in de manier waarop we het allemaal benaderen.
Partner in crime naar de responsieve lay-out is het netwerk. In 2011 hebben vaste grid-frameworks flexibele verbeteringen doorgemaakt, om nog maar te zwijgen van de verschijning van nog meer tools om ons te helpen. Alle volgende kaders, hulpmiddelen en gidsen voorzien in de behoeften van vandaag en bieden vloeiendheid. De meeste van deze sites vertonen ook een geweldig responsief ontwerp, zoals de miniaturen hieronder laten zien:
Het is duidelijk dat typografie geen discipline is die in 2011 is ontstaan, maar het is een gebied van webdesign dat blijft groeien en meer dan ooit wordt gefaciliteerd door weblettertypen en -services.
Twee opmerkelijke aspecten van typografie zijn de esthetiek (weblettertypen stellen ontwerpers in staat om zichzelf te verwennen) en het groeiende begrip dat type hoofdzakelijk bestaat om te worden gelezen. Lettertypen hoeven niet microscopisch te zijn om er chique uit te zien, en de nadruk op inhoud is om ons eerst op weg te helpen naar een web vol groot en mooi type.
2011 heeft enorme vooruitgang geboekt op het vlak van browsermogelijkheden (en versienummers!) Zelfs Microsoft heeft onlangs toegegeven dat automatische updates voor Internet Explorer waarschijnlijk een goed idee zijn. Dit alles betekent dat webontwerpers meer speelgoed hebben om mee te spelen in termen van HTML en CSS, wat begrijpelijkerwijs leidt tot creativiteit als gevolg van technologie. De 'omdat ik kan' aanpak, als je wilt.
Ik kan hier geen betere titel voor bedenken, sorry. Waar heb ik het over? Verticale scrolling.
Het is een dagelijkse taak voor webontwerpers om het belang van de vouw te verminderen. De vouw is onmogelijk te definiëren, wat tegenwoordig met de overvloed aan apparaten en resoluties, dus inhoud 'erboven zijn' mag niet de hoogste prioriteit van een klant in een ontwerpoplossing zijn.
We omarmen verticaal scrollen. De opkomst van mobiele apparaten heeft mensen eraan herinnerd dat ze kan scrol en daar is relevante inhoud onder de eerste paar pixels van een webpagina. Sommige ontwerpers hebben dit naar een hoger niveau getild en scrollen een fundamenteel onderdeel van de browse-ervaring gemaakt.
Eén benadering is in subtiele parallax-effecten.
Notitie: De onderstaande afbeeldingen doen de websites natuurlijk niet recht - ga ze bekijken (en zorg dat je muiswiel klaarstaat ...)
Dan is er het idee dat sommige inhoud kan scrollen tot op zekere hoogte. 2011 heeft dit effect breed benut; het houden van sociale iconen, winkelwagentjes, menubalken, oproepen tot actie, enz. volhardend in zicht:
Dus hoe is dit bereikt? Vaak een combinatie van jQuery en CSS-positionering. Hier zijn slechts twee bronnen om u te helpen:
Sommige sites hebben het concept nog verder uitgebreid, animerende elementen en oproepevenementen wanneer bepaalde verticale punten op de pagina zijn bereikt:
En dan zijn er voorbeelden die een webpagina naar een geheel nieuwe dimensie naar beneden scrollen (kijk hier echt eens naar) ...
Diagonaal is ongemakkelijk, het speelt niet mee met de hedendaagse grid-gebaseerde omgeving, maar om de een of andere reden zijn er in 2011 overal schuine lijnen opduiken. Het is als een kick-back van een tijd, zelfs vóór het reguliere internet, en jij Ik zal ook andere visuele herinneringen van dat tijdperk vinden; oneven kleurencombinaties, lichteffecten, beige en brons. vreemd.
Ik kan niet anders dan herinnerd worden aan oude tijdschriftadvertenties met hun abstracte diagonale lijnen, scheldwoorden, groot haar, Joan Collins en parels. Het is een look die vreemd aantrekkelijk is ...
Het benaderen van lay-outs op een modulaire manier is wederom iets waar de voorkeur naar uitgaat van Responsive Web Design. Het beheren van delen van een ontwerp in modulaire brokken maakt vloeiende herpositionering mogelijk en scheidt inhoud duidelijk af. Je zou kunnen stellen dat de opkomst van modulaire interfaces te danken is aan de invloed van apps. Steeds vaker zien we dat we webinhoud publiceren (en gebruiken) via externe apps zoals Facebook en Twitter; de lijnen vervagen tussen bureaubladschermen en draagbare apparaten.
Ik vroeg Themeforest maestro Ivor te recenseren wat hij in het afgelopen jaar op Envato's nummer één marktplaats had gezien. Hij observeerde een paar trending aspecten:
2011 was het jaar van Minimal Design in ThemeForest - Ivor Padilla
Je hoeft niet diep in de Themeforest-archieven te kijken om te zien wat hij bedoelt ...
Er is geen enkele manier om alle belangrijke ontwikkelingen in het webontwerp van 2011 te bespreken, dus toon je opmerkingen! Welke trends troffen u in 2011? Waar staan we op dit moment, en waar denk je dat de dingen gaan?
Accentsconagua