Vizuālā satura virziens, kas jums jāzina
The vizuālais satura virziens ir mazāk plaši apspriests, bet izšķirošs aspekts, kas saistīts ar augstas konversijas web dizainu. Katrs apmeklētājs "uzlīmē" jaunu vietni pirmajā lappuses ielādē - vai viņi to dara apzināti vai nē.
Estētika spēlē lomu, bet tas ir vairāk par vispārējā dizaina izjūta. Šo sajūtu var ietekmēt atstarpe, tipogrāfija, simetrija, bet galvenokārt attiecības starp lapu elementiem.
Dizaineri vēlas apmeklētājus palikt lapā un turpiniet ritināt apzinot viņu uzmanību un saglabājot viņus interesantus par vietni. Dizaina principiem vienmēr jākoncentrējas par funkciju pirms formas. Tas nozīmē, ka dizainam vajadzētu būt papildina saturu, neietveriet to kā pēcapmeklējumu.
Šajā ziņojumā es vēlos parādīt dažus padomus par to, kā jūs varat uzlabot izkārtojumu un vizuālā satura plūsmas jūsu vietnē.
Koncentrējieties uz sastāvu
Katrs mājas lapas gabals tiek veidots pēc vispārējā izkārtojuma. Šis kopējais izkārtojums rada kompozīciju, kas atbilst Gestalta teorijas noteikumiem, kas to nosaka viss vienmēr ir lielāks par daļu summu.
Atsevišķas lapas teritorijas sanāk kopā veido veselumu. Dizaina elementiem ir jāizveido a gravitācijas vilkšana par saturu; viss lapā dabiski vada apmeklētājus tālāk, līdz tie sasniedz lapas apakšdaļu.
Šī iemesla dēļ attiecības starp dažādām satura daļām (vizuāli, teksts, pogas utt.) Ir tik nozīmīgas, lai tās būtu izstrādātas.
Jūsu mērķim jābūt mudinot cilvēkus pārlūkot vietni no sava slīpuma. Tas ir vieglāk pateikt, nekā izdarīts, bet jūs varat daudz ko mācīties pētot reālus piemērus.
Monkop mājas lapa ir lielisks vizuālās hierarhijas piemērs gan tekstu, gan vizuāli. Starp elementiem tiek izmantots daudz vietas, un tipogrāfija papildina firmas vektoru ilustrācijas.
Ritinot, jūs pamanīsiet taisni horizontāli lapu bloki dalīts ar krāsām, robežām un grafiku. Tie ir būvēti ar dizaina modeļus paturot prātā piedāvā konsekvenci visā lapā.
Uz leju jūs atradīsiet a divrindu sadalījums ar attēliem vienā pusē, otru tekstu. Attēli arī mijmaiņas puses pa kreisi no labās puses pa kreisi. Tas pievērš uzmanību un izjauc monotoniju saglabājot tipisko lapu saglabājot dabisku plūsmu saturu.
A līdzīga dizaina estētika ir atrodama Picjumbo tīmekļa vietnē, kas ir galamērķa lapa fotoattēlu pievienošanai Photoshop un Sketch lietotājiem.
Mājas lapa koncentrējas uz logotipu un priekšskatījuma video. Ritinot, jūs pamanīsiet, ka būs pieejamas animācijas, kas pārvietojas visā lapā. Šī animācija patiešām ir uztver uzmanību, un saņem skatītāju ieinteresēti turpināt ritināšanu.
Kopumā lapa jūtas atvērts un viegli pārlūkot. Saturs ir sadalīti horizontālos blokos ar kraukšķīgu tipogrāfiju un tīras ikonas.
Apsveriet, kā dažādi lapu elementi līdzsvaru, telpa starp elementiem, kontrasts starp krāsām un atšķirīgas formas. Visām šīm lietām ir nozīme kopējā sastāvā. Katra vietne dabiski piesaista saturu.
Nav absolūtas atbildes, jo tā ir atšķirīga katrai vietnei. Piemēram, dažas navigācijas saites izskatās labāk, ja tās ir lielas un lielas. Citi ir labāk, ja viņi ir mazs ar lielajiem burtiem.
Es iesaku jums izpētīt citas vietnes savā nišā. Tiešām analizējiet, kā viņi ir salikti kopā. Pat mēģiniet atjaunot izkārtojumus, lai redzētu, kuri elementi beidzot padara dizainu kopā.
Tipa dizaina jautājumi
Veids, kā jūs veidojat savu tipogrāfiju ietekmēt satura virzienu jūsu vietnē. Tas ir saistīts ar tipa hierarhiju un dažādu lapu elementu dizaina stili piemēram, punktus, galvenes, aizzīmogotus sarakstus, citātus un īpašus izkārtojuma elementus, piemēram, kolonnas vai tabulas.
Vizuāli var ietekmēt arī izkārtojumu, tāpēc tā ir laba ideja izstrādāt saturu ar dabisku progresēšanu. Rakstiet saturu tādā veidā plūsma uz leju, un tur cilvēki lasa katru punktu.
Lielākais rīks, kas jums ir, ir jūsu rīcībā Jūsu acs par dizainu. Uzziniet, kā atpazīt tipogrāfisko elementu atšķirības un to, kā tās attiecas uz citiem lapas elementiem. Izveidojiet saiknes starp lapu sadaļām, lai atšķirtu satura jomas.
Dažas lietas, kuras varētu apsvērt:
- Teksta lielums
- Fontu saime
- Krāsu kontrasts
- Lapas sadaļas attiecības
- Līnijas augstums un rindas robežas
- Burtu atstatums un lielie / mazie burti
Piemēram, skatiet kampaņas monitora mājas lapu. Augšējās navigācijas saites izmanto visus vāciņus ar maziem burtiem. Citas galvenes lapā izpildiet šo pašu visu vāciņu dizainu kas rada vienveidības sajūtu.
Citas lielākas galvenes vietnē ir daudz pamanāmāka, un viņi patiešām izlēkt no lapas. Tikai aplūkojot tipisku galvenes dizainu, tam jābūt viegli pieejamam pastāstiet atšķirību starp virsrakstu un pāra ķermeņa kopiju.
Kampaņas monitora tipogrāfijas dizaina stili ir izsmalcināti, un tie dabiski saplūst ar izkārtojumu. Šāda rezultāta sasniegšanai ir nepieciešams praksē, bet jo vairāk jūs mēģināt, jo vieglāk tas būs.
Lai uzzinātu vairāk, es ļoti ieteiktu šādas saites:
- Dizaina principi: vizuālais svars un virziens
- Darbs ar vizuālo svaru jūsu dizainā
- 19 Faktori, kas ietekmē kompozīcijas līdzsvaru
Vadošais saturs
Saprast to dažāda veida tīmekļa vietnes ir dažādas metodes apmeklētājiem, izmantojot vietni. Piemēram, galvenās lapas vēlas apmeklēt apmeklētājus informācijas sīkumi, mazas ikonas, ekrānšāviņi, un atsauksmes.
Citas vietnes, piemēram, emuāri, parasti nepārvieto cilvēkus uz mājas lapu. Vairums cilvēku izkraut rakstu lapā, tā ir domāta, lai emuāra ziņu izkārtojumi būtu izcelt virsrakstu, un piesaistiet cilvēkus tālāk. Tas ir, ja kvalitātes copywriting nāk spēlēt, jo jūs vēlaties lasītājiem karājas off katru vārdu.
Ir vajadzīgi sociālie tīkli un tīmekļa lietotnes kvalitatīvu lietotāju pieredzi, tā ir nedaudz atšķirīga tēma, bet apsveriet, kā Facebook barība ir paredzēta veicināt ritināšanu un lietotāju mijiedarbību.
Jūsu izmantotās projektēšanas metodes, lai cilvēki varētu pārlūkot vietni laika gaitā mainās. Bet parasti tavs mērķis ir ceļotājiem ar vizuālā satura virzienu.
Apskatīsim a galvenā lapa un a emuāra dizains atklāt atšķirības.
Kaktuss ir statisks vietnes ģenerators OS X. To mājas lapa cieši seko Apple dizaina stilam - daudz vietas un plānas sans-serif fonti.
Saturs ir sakārtots kolonnās, blokos un teksta daļās ar vienkāršu grafiku. Šīs pašas estētikas ir kopīgi ar Apple produktiem, tāpēc Mac lietotāji baudīs šo dizaina stilu.
Informācija par produktu - ieskaitot funkcijas un iestatījumus - ir norādīta tieši mājas lapā. Pati lapa veicina ritināšanu izmantojot unikālu saturu, pamata ikonas un kreisā / labā satura bloku mainīgo kolonnas modeli.
Mērķis ir sniegt informāciju esošajiem lietotājiem, un pārdot jauniem lietotājiem ideja par Kaktusu.
Tagad salīdziniet šo dizainu ar vietni The Next Web. Saturs ir daudz sporādiskāka blogu sākumlapā, jo tur ir daudz dažādu ziņu tēmu.
Taisnstūri izveido režģa sistēmu, kas iekapsulē vairākas ziņas vienā izkārtojumā. Mērķis šeit ir lai lietotāji lasītu saturu uz vietas. Nav svarīgi, vai apmeklētāji kaut ko lejupielādēt, bet tas ir svarīgi, ja viņi to dara pieturieties, lai izlasītu kaut ko.
Veids, kā cilvēki lasa, ir ar lieliskas fotogrāfijas un āķīgs virsraksti. TNW to dara lieliski, un to izkārtojums ir būvēts, lai saglabātu cilvēku pārlūkošanu ar saistītām ziņu sīktēliem sānu joslā un pēc satura.
Katras vietnes apmeklētāji var būt dažādi. Bet jūs varat daudz uzzināt, pētot, ko dara citas veiksmīgas vietnes, un uzziniet, kā kopēt.
Uzticiet acis
Individuālās dizaina īpašības var izskaidrot analītiski, bet ieviešanas izmaiņas katrā vietā. Varonis attēls ar saiti “Ritināt tālāk” tas nedarbojas visās tīmekļa vietnēs.
Mācīšanās veidot ir ļoti a vizuālais process. Jūsu acu par dizainu ir vissvarīgākais aspekts. Tev vajag redzēt lietas pareizi to identificēt vizuālā hierarhija. Ja jūs to varat redzēt citās tīmekļa vietnēs, varat to atkārtot savā vietnē.
Labākais padoms man ir tikai uzticieties savām acīm. Izveidojiet savu iecienītāko vietņu sarakstu un 5 minūtes pārlūkojiet katru. Pierakstiet savus iecienītākos elementus lapā un to, kā tie ietekmē dizainu. Tas jums palīdzēs internalizēt šos jēdzienus no UI / UX viedokļa, nevis lietotāja perspektīvu.
Arī nebaidieties izmēģināt stuff! Neviens neguva labu dizainu tikai lasot rakstus par dizainu. Jā, viņi palīdz - viņi var daudz palīdzēt. Bet tu nepieciešamību uz izveidot sīkumus no nulles, lai uzzinātu, kas ir darbojas un kas nav.
Apmācīt acis, pētot vietnes izkārtojumus, kurus vēlaties, un atjaunot tos. Laika gaitā jūs savā prātā veidosiet rakstu bibliotēku, kas padara jaunu vietņu projektēšanu daudz vieglāku.
Iesaiņošana
Cerams, ka šie padomi sāks darboties un sniegs jums pamata ceļvedi. Tas nav viegli kļūt par web dizainers, bet pasaule nav nepieciešama talanta, un tas nekad nav bijis vieglāk iemācīt sev šos pamatjēdzienus.
Pētījums labākie tīmekļa vietņu piemēri, kuros jūs izmantojat lapas elementus. Vilciens acis, lai atpazītu attiecības, un jūs ātri attīstīties nepieciešamās prasmes atkārtot šīs attiecības savā darbā.
