Internettet har ændret sig meget i løbet af det sidste årti, og samtidig er det ikke ændret overhovedet. Hvis vi ser tilbage 10 år, vil vi opdage, at internettet havde et meget almindeligt layoutmønster på arbejde på tværs af hovedparten af ​​websteder. Dette go-to-mønster bestod af et overskrift, sidefod, sidebar og indholdsområde. Det var det forventede layout for internettet. Samtidig havde vi opstået af Macromedia Flash, som gav os vej til en æra af alternative layouter. Layouter, der ikke holdt fast i denne strenge formel. Og selvfølgelig med implosionen af ​​Flash slog denne tilgang til lidt ... Jeg siger lidt fordi det er tilbage med hævn.

Hvis du undersøger en af ​​de mange populære gallerier, der viser nuværende webdesign, vil du uden tvivl lægge mærke til, at den grundlæggende struktur for websider er alt andet end fast. Det kan bøjes og skifte til næsten alt det skal være. Dette er efter min opfattelse en af ​​de bedste bivirkninger, som det reelle webdesign har produceret. Den nye norm som den var, er at der tilsyneladende ikke findes nogen fast formel.

Alt dette sagde, at vi kan observere flere trends på høj niveau i layoutdesign, der repræsenterer, hvad jeg anser for at være usædvanlige layouter. Usædvanligt fordi de ikke følger en streng formel eller foruddefineret system. Men de er tendenser i, at jeg kan levere dusinvis, hvis ikke hundredvis af eksempler på hver af disse kategorier.

Hvad du finder her er en interessant blanding af tendenser og usædvanlige layouter, som forhåbentlig vil inspirere dig til at vurdere de grundlæggende strukturer, du anvender til webdesign. Lad os dykke ind og kigge ...

Split skærme

I denne kategori finder vi et udvalg af websteder, der alle deler skærmbilledet ved hjælp af en lodret opdeling. Der er måske mange grunde til at gøre dette, og i undersøgelsen af ​​mange eksempler af denne type har jeg fundet to hovedårsager.

Den første er, at et design virkelig kan have to primære elementer af lige stor betydning. En fælles tilgang til webdesign er at rangordne ting i rækkefølge af betydning. Denne betydning afspejles derefter i hierarkiet og strukturen af ​​designet. Men hvad nu hvis du faktisk har to ting at fremme? Denne fremgangsmåde giver dig mulighed for at give dem en fremtrædende karakter og giver brugeren mulighed for hurtigt at vælge imellem dem.

Den anden grund jeg har fundet for denne tilgang er, at du nogle gange har brug for at formidle en vigtig dualitet. Overvej de otte og fire hjemmesider for eksempel. Her ønsker de at formidle det faktum, at deres kernestyrker er deres digitale rødder og deres talentfulde medarbejdere. Denne sammenkobling er, hvad der definerer dem. Opdelingsskærmen er en dejlig måde at præsentere dette på. Og jeg elsker især hvordan ampersand forener de to sider.

16
01
03
07
18

Ingen krom!

Et af de vigtigste elementer, der bruges i webdesign, indeholder elementer: kasser, grænser, former og containere af alle typer, der bruges til at opdele indholdet på en side fra hinanden. Overvej en stereotypisk header, hvor elementerne er pænt indeholdt og adskilt fra indholdet. En fælles tendens er nu at fjerne alt dette ekstra krom.

Dette er en minimalistisk tilgang, men det går et skridt videre og har nogle interessante vendinger undervejs.

02

I dette eksempel har de elimineret forestillingen om en header og footer alle sammen. Det føles mere som en interaktiv kiosk i stedet. Contenthierarkiet foregår primært gennem en venstre til højre organisation, som hjælper med at gøre layoutet meget intuitivt. Og krom til at adskille navigation fra indhold er simpelthen ikke nødvendigt. I stedet skinner de smukke produkter igennem.

13

Her finder vi, at indholdet er stærkt understreget ved at fjerne enhver følelse af et overskrift eller et fodfelt. I stedet for at læse et overskrift først læser du firmaets navn og en klar erklæring om, hvad de gør (og hvor de gør det). Efterfulgt af hovednavigationen. Hvilken god måde at understrege mærket på, før man får folk til at navigere. Det giver et elegant flow. Interessant som du rulle på siden får en overskrift og et strejf af krom. Et smukt og effektivt layout, der bruger mønsteret på en inspirerende måde.

15
20
17

Modulært eller netbaseret

Næste op har vi layouter bygget på modulære eller gitterlignende strukturer. I disse designs er hvert modul beregnet til at bøje baseret på skærmstørrelsen. Dette er ikke ligefrem en ny tilgang, men indførelsen af ​​lydhurtigt webdesign har gjort det endnu mere nyttigt. Dette tyder på den type af tilpasselige layouts man kan skabe med plugins som Masonry.

04

Dette eksempel demonstrerer perfekt ideen. Designet er helt lydhør. Da skærmstørrelsen ændres, tilpasser hvert modul og størrelser sig til pladsen. Ved at dividere rummet jævnt er det lettere at få designet til at tilpasse sig. Og de får bonuspoint til at indføre et element (ved større skærmstørrelser), der bryder de stive barrierer mellem moduler.

19

Dette eksempel er en ret intens version af mønsteret. Det omfatter selvfølgelig den modulære tilgang, som gør det muligt for dem nemt at skifte indhold ind og ud efter behov. Men der er et vigtigt designelement på arbejde her, som det foregående eksempel manglede. Modulernes størrelse varierer for at afspejle rækkefølgen af ​​betydning og dens plads i hierarkiet. En risiko for denne modulære tilgang gør alt lige så stort, hvilket betyder at du ikke virkelig lægger vægt på noget. I modsætning hertil giver dette eksempel klart betydning for det primære element.

08
05
06

Fyldning af en enkelt skærm

Endelig har vi websteder, der bruger en tilgang, hvor designet tilpasser sig til helt at fylde skærmen. Dette er en delmængde af lydhørt design, fordi det tilpasser sig skærmstørrelsen. Men i denne niche tilpasses designene på en sådan måde, at de fuldstændigt fylder skærmen og ikke producerer rullefelter. Denne mangel på rullning betyder, at indholdet skal være yderst fokuseret og indholdets hierarki klart fastlagt. Jeg finder fokus og klarhed på disse websteder for at være forfriskende.

09
10
11
12
14

Konklusion

Mens jeg har spredt hver af disse tendenser i isolation, er virkeligheden, at de repræsenterer byggesten. Og disse byggesten kan samles på mange forskellige måder. Faktisk kunne mange af de her præsenterede prøver flyttes til mange af de kategorier, vi har diskuteret. Mangfoldigheden af ​​layout på det moderne web, og det faktum, at de er brugbare, gør internettet til et spændende medium at arbejde med.