Ако тражите мреже за дизајн веб страница, дошли сте на право место. У овом посту смо разговарали о 5 различитих мрежа за дизајн веб страница.
Мреже су окосница дизајна; помажу вам у успостављању реда и организовању садржаја вашег дизајна. Разговараћемо о томе шта је мрежа, зашто бисте је требали користити у веб дизајну и како је направити у овом посту.
Отворите жељену апликацију за дизајн и ево је, празно платно које гледа у вас. Понекад је то застрашујуће.
Како почињеш? Коју позицију дајете наслову? Где постављате своја уметничка дела и фотографије? Мрежа је све што је потребно за почетак.
Мрежа је структура која се користи за организовање садржаја дизајна; успоставља усклађеност и ред.
Без обзира да ли дизајнирате изглед за штампу, као што је часопис, или спајате фотографије и текст да бисте направили одредишну страницу, мрежа ће вам помоћи у доношењу избора дизајна и пружању позитивног корисничког искуства.
Размислите како овај дизајн одредишне странице користи мрежу од 12 колона да организује своје компоненте. Коришћење мреже уклања могућност доношења насумичних одлука.
Уместо да насумично позиционирате делове, правилним коришћењем мреже, тачно ћете знати где да поставите елементе као што су логотип, ставке менија, наслов, садржај тела и фотографије. Поред тога, то ће помоћи у убрзању вашег процеса дизајна.
У овом чланку ћу вам рећи све што треба да знате о томе како да користите мрежу у веб дизајну. Дакле, остани са мном до краја.
Садржај
- Одакле долазе мреже?
- Зашто су мреже важне у веб дизајну?
- 5 различитих типова мрежа
- 4 најбоље праксе коришћења мрежа у веб дизајну
- Анатомија мреже – шта морате знати?
- Често постављана питања: Мреже за дизајн веб страница 2024
- 👉 Која је најбоља мрежа за веб дизајн?
- ✅ Шта је веб локација са распоредом мреже?
- 👉 Како функционишу мреже веб локација?
- 👀 Како распоред мреже побољшава веб дизајн?
- ✅ Зашто дизајнери користе мреже?
- 👉 Колико колона треба да има мрежа у веб дизајну?
- 💁 Зашто користимо мрежу од 12 колона?
- ✔ Шта је мрежа од 12 колона?
- 👉 Како користите шаблоне мреже?
- Закључак: Мреже за дизајн веб страница 2024
Одакле долазе мреже?
Пре него што пређемо на то како мреже утичу на веб дизајн данас, хајде да укратко погледамо историју мрежа и како су биле коришћене. Мреже су неопходне за организацију типографије.
Мреже су у почетку биле коришћене у изгледима рукописа према врсти наруџбине. Размислите како је ово ширење наређено са прве текстуалне странице.
За детаљнији поглед на историју штампања, погледајте наш есеј о историји графичког дизајна.
Брзо напред ка индустријској револуцији и појави масовне производње, током које су се новине, постери, огласи и други штампани производи производили у великим количинама.
Дизајнери воле Јан Тсцхицхолд Јосеф Муллер-Броцкманн створио нове мрежне системе у двадесетом веку, који су еволуирали у оно што је сада познато као швајцарски стил или међународни типографски стил.
Успоставили су модуларну структуру са довољно размака.
Зашто су мреже важне у веб дизајну?
У смислу његове примене у процесу веб дизајна, систем мреже помаже у поравнању компоненти странице користећи узастопне колоне и редове.
Када се ова хијерархијска основа успостави, можемо уредити текст, графику и практично било који други елемент дизајна унутар интерфејса на доследан, уређен начин.
Када дизајнирамо за веб и мобилне уређаје, странице или интерфејси које развијамо имају за циљ да олакшају различите токове корисника.
Мреже олакшавају процес дизајнирања жичаних оквира, шаблона или стандардизованих распореда за упоредиве сајтове, пошто се кориснички токови често састоје од неколико екрана или прозора који понављају сличне шеме дизајна и распореде.
Мреже омогућавају хоризонталну и вертикалну поделу страница кроз редове и колоне. Мрежни системи су систематска техника која омогућава дизајнерима да распореде ставке на уредан начин и да развију компоненте за неколико страница или распореда на модуларни начин.
Поред тога, мреже успостављају стандардизовани скуп фиксних јединица мере које одређују величину, размак и поравнање сваког елемента дизајна.
Мрежни распореди су настали у дизајну штампе када су коришћени у комбинацији са типографијом за организовање рукописа на папиру, посебно у књигама и новинама.
Рекавши то, многи аспекти савременог дизајна се ослањају на распореде засноване на мрежи и напредују на њима. Ово обухвата веб дизајн, дизајн интерфејса и, што је најважније, респонзивни дизајн.
Пре него што удубимо у то како и зашто су распореди засновани на мрежи тако непроцењив алат за наш процес дизајна као веб програмери, хајде да поближе погледамо физичке компоненте које чине мрежни систем.
5 различитих типова мрежа
Мреже су класификоване у пет различитих категорија. Иако су неки прикладнији за веб дизајн од других, скоро сигурно сте користили свих пет у неком тренутку током своје креативне каријере.
1. Хијерархијска мрежа:
Најчешћа употреба хијерархијске мреже је у веб дизајну. Циљ ових мрежа је да се ставе приоритети. Можда су прилагодљивији, али се и даље ослањају на колоне, редове и модуле за организовање.
Они су природно конструисани тако што се прво распоређују најзначајнији елементи на страници, а затим их окружују мрежом.
Вести и веб-сајтови везани за медије често користе овај стил мреже како би помогли да се скрене пажња на одређене чланке и постове. Размотрите како Тхе Њујорк тајмс' почетна страница користи хијерархијску мрежу.
2. Модуларна мрежа:
Модуларне мреже су сличне мрежама колона, али укључују редове. Док новине и часописи често користе модуларне мреже за распоређивање материјала, оне се такође могу користити у дизајну веб локација и апликација, на пример, у одељку мреже производа.
Размотрите како Еверлане организује своју колекцију тексаса користећи модуларну мрежу. Тхе ИоуТубе почетна страница је још један пример сајта који користи модуларну мрежу.
Иако укључују леву бочну траку за честе везе као што су одељци о трендовима и претплатама, сав видео материјал је структуиран у модуларну мрежу од четири колоне како би се максимизирао број видео записа које гледалац може да прегледа док претражује нешто за гледање.
3. Мрежа колона:
Мреже колона помажу у организацији текста, слика и графика. За веб локације, број колона које покривају ширину одредишне странице може да се креће од две до дванаест или чак шеснаест.
Текст и графика могу бити садржани унутар једне колоне или обухватају више колона. Олуци су размаци између стубова; требало би да буду уједначене по величини у свим деловима.
Мреже колона не морају бити симетричне. На пример, можете користити асиметричну мрежу колона у којој су одређене колоне уже од других, што може бити корисно у зависности од хијерархије вашег дизајна.
Асиметричне мреже колона се често користе на веб сајтовима блогова, где је примарни материјал укључен у већи контејнер од две трећине изгледа, док мања трећина може да приказује информације о блогу и његовом аутору.
Размислите о томе како почетна страница овог блога користи асиметричну мрежу колона.
4. Рукопис Гирд:
Све књиге, новине и периодика су изграђене на мрежи рукописа. Додатно назван и мрежа са једном колоном, ово је један од најједноставнијих шаблона мреже и добро је погодан за огромне непрекидне блокове текста и графике.
У суштини, то је огроман правоугаони простор унутар странице који делује као гранични оквир за текст.
5. Основна мрежа:
Основна мрежа је мало техничкија; утврђује се по локацији текста. У суштини, то се односи на водећи или размак између основних линија.
Ова мрежа помаже у пружању позитивног искуства читања за читаоца, посебно када има пуно садржаја за читање. Иако је од виталног значаја за дизајн штампе, као што су изгледи књига, подједнако је критичан и за онлајн дизајн.
Размотрите утицај прореда на читљивост одредишне странице. Ако је текст превише згуснут, корисник може у потпуности да напусти сајт. Одржавајте одговарајућу комбинацију текста и белог простора.
4 најбоље праксе коришћења мрежа у веб дизајну
Постоји неколико речи и идеја са којима се треба упознати и разумети у домену веб дизајна, али ништа више од значаја мрежа у веб дизајну.
Између неколико компоненти које се састоје од структуре мреже, бројних доступних типова мреже и когнитивни процеси укључени у одређивање типа мреже који најбоље одговара вашем садржају и дизајну, постоји много тога да се узме у обзир.
1. Поштујте правило трећине:
Још један концепт веб дизајна је Руле оф Тхирдс, који помаже дизајнерима у креирању естетски избалансираних распореда мреже и постављања слика.
Овај приступ прекрива мрежу која дели област дизајна хоризонтално и вертикално на трећине. Ово дели било коју слику или одељак/простор странице на девет једнаких сегмената дефинисаних пресецима линија.
Према правилу трећине, стављање „објеката од интереса“ на „трећине“ слике усмераваће пажњу корисника на њих на снажнији, естетски привлачнији начин.
У веб дизајну, дизајнери често користе правило трећине како би им помогли да донесу неке од најкритичнијих избора мреже и изгледа.
2. Поштујте златни однос:
Бројни дизајнери користе концепт познат као Златни однос да би оптимизовали размеру, равнотежу и распоред својих дизајна мреже. Тхе Златни однос је пропорција која је једнака 1.6180 у свом најједноставнијем облику.
Златни правоугаоник је правоугаоник чија је дужина 1.6180 пута већа од ширине на основу златног пресека. Ово означава да ако је ширина елемента 100пк, дужина ће бити 161.80пк.
Ово важи за ширину и дужину суседних слика, објеката или облика, као и за развој једног облика или елемента.
Користећи Златни однос, дизајнери могу одредити како да поделе расположиви хоризонтални простор на страници и колико простора да се дозволи за и око сваког дела, између осталог.
Један случај у којем се то може десити је развој одељка хероја на веб локацији. Ако изаберете изглед пуне ширине и поделите га вертикално на два дела: слику јунака и текст хероја.
Поред тога, мораћете да одлучите о величини слике, величини текста и тако даље у овој процедури микро дизајна.
Међутим, прво морате да одлучите за однос колона, који ће вас водити у одређивању величине ваше слике и слова, као и на које елементе желите да нагласите више или мање, или ако желите да поставите једнак фокус на сваки.
Тада долази до одлуке о томе како поделити део јунака у смислу тога која компонента треба да буде већа или истакнутија. Овде је златни однос користан.
Ова смерница узима у обзир различите елементе, укључујући ширину странице, величину садржаја и број и величину модула који ће садржају бити потребни на мрежи.
Што се тиче приступачности, Златни однос усмерава пажњу корисника на одређене тачке или локације на екрану, што је управо оно што дизајнери желе да ураде када успостављају и имплементирају своју хијерархију садржаја и шеме дизајна.
3. Направите места за бели простор:
Као веб дизајнери, разумемо колико је бели простор критичан у погледу читљивости, хијерархије информација, скалабилности и општег простора за дисање око и између компоненти дизајна.
С обзиром на виталну улогу белог простора у дизајну изгледа, природно је да га веб-сајт и мреже распореда користе.
Распореди мреже су, у суштини, одређени не само ширином и висином њихових колона и редова, већ и ширином и висином белог простора између њих, који се назива размаком.
На пример, једна метода дизајна заснована на мрежи коју веб дизајнери често користе је позната као 8пт Грид Систем, појам успостављен Гугловим смерницама за дизајн материјала.
Метода дизајна материјала користи мрежу 8 пута 8 пт. Сваки елемент на веб страници ће у пракси бити вишекратник/дељив са осам.
Фасцинантно је то што се ово правило примењује не само на ставке мреже као што су фотографије, дугмад или текст, већ и на јединице белог простора, које морају бити вишеструке од осам.
Стога, док размишљате о томе како да размакнете своје колоне или редове, морате такође квантификовати и навести количину белог простора, у овом случају у више од осам.
Ово показује колико је бели простор критичан у дизајну мреже, до те мере да су његове димензије и захтеви једнако критични као и колоне и редови.
Почетна страница Елементор Екпертс илуструје колико моћан може бити бели простор, посебно на почетној страници веб странице.
Пошто је крајња сврха почетне странице да примора гледаоце да делују и уче о платформи стручњака, бели простор подржава овај процес тако што даје приоритет информацијама.
Ово имплицира да пошто је вредносном предлогу платформе дат такав значај и „време да заблиста“ на почетној страници, посетиоци веб локације одмах разумеју повећану вредност коју ће искусити.
4. Поштујте респонзивни дизајн:
Прилагодљиви дизајн се односи на могућност да се изглед и садржај странице или сајта прилагоде вишеструким уређајима и величинама претраживача. То значи да када се величина екрана разликује, број колона и, наравно, њихова ширина, такође ће варирати.
Међутим, постоји суштинска разлика између мрежа стандардног дизајна и мрежа које реагују.
Док су дизајнерске мреже постављене на основну мрежу, мреже које реагују су флексибилне, омогућавајући колонама мреже да мењају величину и позиционирају се у зависности од корисничког прозора за приказ.
Са фиксном мрежом, смањење величине екрана ће вас аутоматски довести до следеће тачке прекида, а бочне маргине ће се такође аутоматски смањити док се не достигне следећа тачка прекида.
Мрежа која реагује, или флуидна мрежа, је оно што видите када се ставке динамички мењају као одговор на смањење прегледача/екрана. Прилагодљиве мреже ће се логички ускладити и логички организовати ваш материјал.
Ово имплицира да када се оквир за приказ смањи, плочице и садржај мреже ће се такође пропорционално смањити.
Анатомија мреже – шта морате знати?
Све мреже у дизајну веб страница, без обзира на њихову величину или сложеност, имају одређене компоненте које их карактеришу као распореде мреже:
1. Маргине:
Маргине су негативни простор између формата и спољне границе садржаја, понекад познат као „спољни олуци“. На мобилним уређајима, бочне маргине су обично широке 20-30 пиксела и значајно се разликују између десктопа и мобилног уређаја.
Маргина можда познаје ХТМЛ и ЦСС језик, где се користи као својство за генерисање простора око елемента дизајна или контејнера. Имајте на уму да величина маргине не утиче на величину суседног текста.
Он само специфицира количину простора око елемента, који се у контексту мрежа распореда експлицитно односи на простор између формата и спољне границе садржаја.
2. Олуци:
Олуци су линије које деле колоне и редове на појединачне јединице. 20 пиксела је прилично типична величина олука. Сврха олука је да обезбеде негативан простор (било које величине) између колона и редова.
У најједноставнијем смислу, олуци су простор између колона и редова. Олуци су посебно важни код зидања, где је ширина олука један од најкритичнијих елемената.
3. Модули:
Модули су јединице које испуњавају простор формиране спојем редова и колона. Модули или модули садржаја, како се често називају, су градивни блокови странице, пошто се сваки елемент дизајна (текст, графика и дугмад, на пример) уклапа у модуле произведене од правоугаоних шаблона у мрежи.
4. Редови:
Као што можете претпоставити, редови су хоризонтални делови мреже. Изненађујуће, веб дизајн често занемарује важност редова у мрежи. Међутим, то није сјајна пракса.
5. Колоне:
Колоне су вертикални делови који обухватају висину области садржаја и сматрају се „грађевинским блоковима“ мреже. Оно што колоне чини карактеристичним је да што је више колона у мрежи, то мрежа постаје флексибилнија.
Ускоро ћемо се о томе детаљније позабавити. Док ширине колона увек зависи од дизајнера, уобичајене праксе налажу да се 12 колона користи на десктопу, 8 на таблету и 4 на мобилном уређају.
Већина мрежа има ширину колона од 60–80 пиксела. Ширина колоне има значајан утицај на ширину вашег стварног садржаја.
Често постављана питања: Мреже за дизајн веб страница 2024
👉 Која је најбоља мрежа за веб дизајн?
Боотстрап је углађен, директан и моћан фронт-енд оквир за мобилне уређаје који чини развој веба бржим и једноставнијим. За нас је ово најпопуларнији избор. Често дванаест колона са увлакама. Стандардизован и једноставан метод.
✅ Шта је веб локација са распоредом мреже?
Мрежа веб странице је техника за сређивање и поравнавање материјала на страници. Он служи као скелет или основни оквир вашег корисничког интерфејса. Мреже веб локација помажу дизајнерима да направе избор дизајна и стварају позитивно корисничко искуство.
👉 Како функционишу мреже веб локација?
Мрежни системи су невидљиви оквири који се користе у веб дизајну који групишу све компоненте на страници заједно. Мрежа делује као оквир или арматура око које дизајнер може да распореди визуелне компоненте (слике, глифове, пасусе, итд.) на логичан начин који се лако апсорбује.
👀 Како распоред мреже побољшава веб дизајн?
Мреже могу значајно скратити и побољшати ваше време дизајна тако што ће вам служити као водич за постављање, позиционирање и скалирање објеката. Уместо да самовољно стављате делове док не добијете пријатну композицију, мрежа би требало да вам помогне у проналажењу природног решења.
✅ Зашто дизајнери користе мреже?
Мреже олакшавају дизајнерима да сарађују на идејама наводећи где треба да буду постављени делови. Мрежни системи помажу у раздвајању рада на дизајну интерфејса тако што дозвољавају неколико дизајнера да раде на различитим компонентама изгледа док остају сигурни да ће њихов рад бити глатко интегрисан и конзистентан.
👉 Колико колона треба да има мрежа у веб дизајну?
Иако не постоји формална потреба за бројем колона, већина мрежних архитектура веб локација користи мрежу од 12 колона. Поред тога, мрежа веб странице садржи редован простор између колона, који се назива олуцима, а размак изван мреже се назива маргинама.
💁 Зашто користимо мрежу од 12 колона?
Већина Боотстрап верзија захтева само 12 колона да би се прилагодиле следећем: Креирање распореда је поједностављено. Изглед прилагођен мобилним уређајима. Пропорционални блокови за одржавање симетрије.
✔ Шта је мрежа од 12 колона?
За веб странице, дизајнери могу користити између две и дванаест, или чак шеснаест колона да покрију ширину одредишне странице. Они могу да распореде текст и графику у једној колони или у више колона.
👉 Како користите шаблоне мреже?
Атрибут грид-темплате-ареас дефинише области распореда мреже. Ставке мреже можете именовати тако што ћете их референцирати у својству грид-темплате-ареас кроз својство грид-ареа. Апострофи означавају сваки регион. Да бисте упућивали на објекат мреже који нема име, користите симбол тачке.
Линкови:
Закључак: Мреже за дизајн веб страница 2024
Сада када разумете зашто су мреже критичне у веб дизајну и како да их користите на својој веб локацији, време је да почнете да мерите и усклађујете.
Имајте на уму да се овај принцип примењује на сваки елемент дизајна: поравнавање виџета и компоненти хоризонтално и вертикално, поравнавање елемената текста са основном линијом и правилно центрирање сваке врсте садржаја на веб локацији.
Ваш процес дизајна и финални производ ће бити веома цењени, а ми смо нестрпљиви да видимо шта имате у продавници.
