Як стварыць збалансаваны макет старонкі

Аўтар: Peter Berry
Дата Стварэння: 16 Ліпень 2021
Дата Абнаўлення: 13 Травень 2024
Anonim
Как сделать ВНЖ на Северном Кипре сегодня | Жизнь на море |  Жизнь на северном кипре
Відэа: Как сделать ВНЖ на Северном Кипре сегодня | Жизнь на море | Жизнь на северном кипре

Задаволены

Асноўная мэта любога макета старонкі, які вы распрацоўваеце, няхай гэта будзе для друкаванай брашуры альбо найноўшага вэб-прыкладання, - дакладна і эфектыўна перадаваць інфармацыю чытачу. Адзін з лепшых спосабаў забяспечыць дастаўку ключавых паведамленняў чытачу - стварыць збалансаваны макет старонкі.

Дызайн старонкі-макета звычайна прадугледжвае шмат размяшчэння, перастаноўкі і фарматавання элементаў. Шматлікія дызайнеры падыходзяць да гэтага працэсу арганічна, адчуваючы шлях да прыемнага канчатковага выніку. Хоць гэта можа прывесці да выдатных шчаслівых няшчасных выпадкаў, існуе рызыка таго, што выкарыстанне метадалогіі ў свабоднай форме можа прывесці да адсутнасці візуальнага балансу на старонцы.

Добры склад старонкі павінен быць і прыемным для вока, і таксама дакладна перадаваць гэтыя ключавыя паведамленні мэтавай аўдыторыі. Мы сабралі некалькі галоўных парад, якія дапамогуць вам забяспечыць баланс дызайну макета вашай старонкі (добры канструктар сайтаў таксама дапаможа). Гэтыя падыходы будуць добра працаваць, каб забяспечыць структуру балансу, незалежна ад носьбіта, з якім вы працуеце.


Больш падрабязную інфармацыю пра Інтэрнэт глядзіце ў нашым кіраўніцтве па стварэнні ідэальных макетаў веб-сайтаў.

01. Карыстайцеся сеткай

Адзін з самых простых спосабаў забяспечыць баланс вашай старонкі - гэта выкарыстанне сеткавай сістэмы. Раней сеткі былі адзіным запаведнікам друкаванай старонкі, але за апошнія некалькі гадоў у Інтэрнэце было зроблена шмат працы, каб дапамагчы перанесці канцэпцыю сеткі на лічбавы носьбіт.

Выкарыстоўваючы сетку для паведамлення пра становішча розных элементаў на старонцы, вы створыце сувязь паміж рознымі элементамі, якія складаюць вашу старонку. Гэта можа дапамагчы забяспечыць пачуццё ўпарадкаванасці вашага макета, забяспечыць чытачу выразныя структурныя спасылкі, на якія можна вярнуцца, і павялічыць поспех вашай старонкі.

Гэта важна, бо калі ва ўсіх элементах вашай старонкі ўзнікае адчуванне сувязі паміж сабой, агульны эфект адчувае сябе больш зручным для чытача, дапамагае зрабіць яго зручным і палягчае доступ да важных рэчаў: зместу.


02. Абярыце адзінага фокуснага цэнтра

Адзін з найбольш эфектыўных спосабаў забяспечыць пачуццё раўнавагі - выбраць адзіны фокусны цэнтр для дызайну макета. Добрым прыкладам гэтага на практыцы з'яўляецца выкарыстанне вялікай выявы як найбольшага асобнага элемента на старонцы.

Моцны візуальны малюнак можа даць магутны спосаб прывесці чытача на вашу старонку (як і экспертны аналіз ідэальнай паслугі вэб-хостынгу), а таксама паставіць карысны структурны элемент, вакол якога можна размясціць астатняе змесціва ў вашым макеце. Калі ў вас некалькі візуальных элементаў, выкарыстоўвайце прынцып блізкасці Гештальт-тэорыі, каб згрупаваць іх, выраўноўваючы аднолькава.

Таксама варта мець на ўвазе, што вы можаце выкарыстаць загаловак альбо выцягнуць цытату такім жа чынам; добры загаловачны загаловак можа прапанаваць столькі ж візуальнай цікавасці, колькі выява, і пры гэтым забяспечваць структуру, якая дапаможа вам забяспечыць збалансаваны макет.


03. Выкарыстоўвайце правіла трэцяга

Адзін з лепшых спосабаў забяспечыць пачуццё раўнавагі - выкарыстаць любімае дызайнерам правіла трэцяга альбо Залатое сячэнне. Прасцей кажучы, правіла трэціх кажа, што калі вы падзяляеце старонку на трэці як па вертыкалі, так і па гарызанталі, кропкі, у якіх перасякаюцца лініі сеткі, забяспечваюць натуральныя фокусныя цэнтры кампазіцыі.

Сумясціўшы ключавыя элементы з гэтымі чатырма кропкамі, вы атрымаеце больш прыемную кампазіцыю, чым калі б вы, напрыклад, выдатна цэнтравалі элементы на сваёй старонцы.

Само па сабе правіла трэцяга чароўным чынам не забяспечыць балансу вашай макета, але, пашыраючы прынцып, лёгка выкарыстоўваць гэтую тэндэнцыю да натуральнага каардынацыйнага цэнтра, каб дапамагчы скласці баланс вашага макета.

Агульны падыход - размяшчэнне найбольш важных элементаў вашай старонкі ў верхняй (альбо ніжняй) трэці старонкі з выраўноўваннем асноўнага фокуснага цэнтра ў адпаведнасці з адным з скрыжаванняў. У вас ёсць шмат актываў, якія можна захаваць для вашага сайта? Праверце гэтыя параметры воблачнага захоўвання.

04. Выкарыстоўвайце прабел

Пачаткоўцы дызайнеры звычайна выкарыстоўваюць кожны біт прасторы на старонцы, запаўняючы змест, пакуль кожны прабел не будзе запоўнены. Больш дасведчаныя ведаюць, што часам лепшы дызайн прадугледжвае пакіданне элементаў, а не абутак.

У друкаваным носьбіце найбольш распаўсюджаным спосабам карыстацца прабелам з'яўляецца павелічэнне палёў старонкі і жолабаў. У Інтэрнэце проста прадастаўленне шмат месца для дыхання вакол элементаў можа дапамагчы зрабіць ваш дызайн макета адчувальным і збалансаваным.

Выкарыстанне адмоўнага прабелу працуе лепш за ўсё, калі ў вас ёсць выразная структура, якая злучае змесціва разам (напрыклад, сетка), бо рызыка з'яўлення прабелаў можа выклікаць пачуццё раз'яднанасці паміж элементамі старонкі, калі ён будзе ўнесены выпадкова.

05. Паўтарыце элементы дызайну

Паўтарэнне таксама можа даць адчуванне звязанага дызайну і балансу кампазіцыі. Ідэя заключаецца ў тым, што, вызначыўшы і паўторна выкарыстоўваючы матыў альбо дызайнерскую апрацоўку на працягу ўсяго макета, вы можаце даць спасылку чытачу, каб розныя вобласці адчувалі сувязь і ўваходзілі ў адну і тую ж агульную кампазіцыю.

Вы таксама можаце выкарыстоўваць гэты прыём, каб забяспечыць каардынацыйны цэнтр у сваім дызайне, захоўваючы пры гэтым агульны баланс, наўмысна парушаючы ўзор падабенства, уведзены праз паўтарэнне.

06. Выкарыстоўвайце іерархію

Адным з ключавых падыходаў да дасягнення нірваны макета старонкі з'яўляецца дакладнае адчуванне структуры і іерархіі. Мы ўжо закраналі структуру, але важна таксама перадаць адносную важнасць розных частак змесціва на вашай старонцы. Напрыклад, загаловак амаль заўсёды павінен быць больш візуальна важным, чым змест тэксту.

Паглядзіце на розныя элементы, якія складаюць ваш дызайн макета, і вырашыце, які элемент з'яўляецца найбольш важным. Выкарыстоўвайце гэты элемент, каб забяспечыць структурны кручок для астатніх элементаў на старонцы, захоўваючы яго самым важным.

07. Выкарыстоўвайце маштаб, кантраст і гармонію

Нарэшце, выкарыстанне шкалы можа стаць вельмі эфектыўным метадам для дасягнення добрага візуальнага балансу ў макеце. Зрабіўшы некаторыя элементы большымі за іншыя, узнікне пачуццё парадку і іерархіі. Гэта дапамагае стварыць зручны макет, таму што глядач аўтаматычна спачатку праглядае большыя элементы ў макеце, пераходзячы да дробных элементаў па меры іх чытання.

Гэты прынцып таксама працуе з падвышанай кантраснасцю, так што, ізалюючы элемент на старонцы праз кантраст, вока сфакусуецца ў першую чаргу на гэтай кропцы. Гэта забяспечвае пранікненне на старонку і зноў дае карысную структуру для распрацоўкі макета.

І маштаб, і кантраст працуюць лепш за ўсё, калі яны прымяняюцца да аднаго элемента, робячы яго вылучальным сярод іншых частак вашага макета. Выкарыстоўвайце прынцыпы гармоніі, каб астатнія адчувалі сувязь і падкрэслівалі фокусную ўвагу.

Найбольш Чытанне
Дызайн пустынных выспаў: Бэн Ілюстратар
Чытаць

Дызайн пустынных выспаў: Бэн Ілюстратар

З улікам гэтага мы пагаварылі з дызайнерамі з усяго свету, каб даведацца, без якіх прадметаў яны не маглі б жыць ...У паведамленні пра дызайн пустынных выспаў на гэтым тыдні знаходзіцца Бэн О'Браэ...
13 творчых бясплатных прыкладанняў для iPhone для дызайнераў
Чытаць

13 творчых бясплатных прыкладанняў для iPhone для дызайнераў

Лепшыя бясплатныя дадаткі для iPhone азначаюць, што можна захоўваць крэатыўнасць, нават знаходзячыся па-за межамі надзейнага Mac. Існуе дадатак, каб выканаць усе вашы жаданні, і хаця даступна мноства ...
15 самых цікавых праектаў з адкрытым зыходным кодам у Інтэрнэце
Чытаць

15 самых цікавых праектаў з адкрытым зыходным кодам у Інтэрнэце

Мы пастаянна дзівімся ўсім крутым новым праектам з адкрытым зыходным кодам; амаль заўсёды ёсць асляпляльная альтэрнатыва з адкрытым зыходным кодам для любога прафесійнага праграмнага забеспячэння, неа...