Што трэба і чаго нельга рабіць у выдатным вэб-дызайне

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

Працэс вялікага вэб-дызайну Проста каб пераканацца, што мы ўсе на адной старонцы, давайце пачнем з асноўнага вызначэння «вэб-дызайну». Згодна з Вікіпедыяй, вэб-дызайн - гэта:

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

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

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

Этап 1: Канцэптуалізацыя і планаванне
Гэты этап прапускаецца часцей, чым два іншых. Большасць пісьменнікаў не любяць ствараць схемы для навуковых прац, і большасць вэб-дызайнераў таксама не любяць ствараць блок-схемы. Не ленавацца. Калі вы прыкладзеце намаганні і сплануеце свой вэб-сайт, вы ўбачыце, што працэс вэб-дызайну будзе праходзіць гладка і з меншай колькасцю памылак.

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

• мозг
• ручка і папера
• (неабавязкова) праграмнае забеспячэнне для блок-схем
• агульнае ўяўленне аб розных раздзелах вашага сайта

Для пачатку вазьміце ручку і паперу або запусціце ваша любімае праграмнае забеспячэнне для блок-схем. Мы выкарыстоўваем OmniGraffle Professiona для Mac OS X, якая каштуе 150 долараў за ліцэнзію, але яна таго вартая, калі вы ствараеце вэб-сайты на рэгулярнай аснове. Калі вы карыстаецеся ПК, то SmartDraw - выдатная БЯСПЛАТНАЯ частка праграмнага забеспячэння для блок-схем, якую вы можаце выкарыстоўваць. Аднак ручка і папера працуюць нармальна.

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

Праглядзіце блок-схему, якую мы стварылі пры канцэптуалізацыі храматычных сайтаў. (1) У верхняй частцы блок-схемы мы паказваем назву нашага сайта. (2) Далей мы ўключаем кожны асноўны раздзел нашага вэб-сайта: Галоўная, Аб і Паслугі. Гэтыя раздзелы з'яўляюцца асноўнай навігацыяй вашага сайта. Назвы кожнага раздзела цалкам залежаць ад зместу вашага сайта. Паспрабуйце выкарыстоўваць як мага менш раздзелаў, каб вашы наведвальнікі не былі перагружаныя падчас навігацыі па вашым сайце.

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

Dos

• Менш значыць больш; звядзіце колькасць першасных секцый да мінімуму. Мы выкарыстоўваем 6 раздзелаў на нашым сайце, што больш чым дастаткова
• Незалежна ад таго, выкарыстоўваеце вы ручку і паперу або праграмнае забеспячэнне для блок-схем, трымайце рэчы як мага больш чыстымі і арганізаванымі. Нягледзячы на ​​тое, што вы (і ўсе, хто працуе з вамі) адзіныя, хто будзе выкарыстоўваць блок-схему, яна ўсё роўна павінна мець сэнс - Вашы асноўныя раздзелы павінны выкарыстоўваць больш шырокія тэрміны, а другасныя і трэцярадныя тэрміны павінны быць больш апісальнымі

Донцы
Стварэнне блок-схемы даволі простае; аднак ёсць некалькі памылак, якія можна лёгка зрабіць:

• Не выкарыстоўвайце вельмі апісальныя тэрміны ў вашай асноўнай навігацыі, калі ўвесь ваш вэб-сайт не сканцэнтраваны на адной вузкай тэме. Не спрабуйце аб'яднаць некалькі тэм на адной старонцы. Стварыце агульны раздзел для гэтых тэм і з гэтага раздзела стварыце падраздзелы. Гэта зробіць вэб-старонкі падраздзела (апісальнага) з большай верагоднасцю лепшага рэйтынгу ў пошукавых сістэмах (Google, Yahoo, MSN, Ask). Пасля таго, як вы стварылі кароткую і апісальную блок-схему, вы гатовыя перайсці да другога этапу працэсу вэб-дызайну:

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

• лагатып
• навігацыйнае меню
• змест
• выявы, відэа

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

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

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

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

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

Што рабіць

• макет ўсіх унікальных старонак
• уключыце важныя элементы (лагатып, навігацыя, размяшчэнне змесціва, размяшчэнне малюнкаў/відэа) -пачніце зверху і рухайцеся ўніз -спасылайцеся на блок-схему, створаную на этапе 1, каб не забываць ствараць макеты старонак -захоўвайце, захоўвайце, захаванне - як і ва ўсім на кампутары, захоўвайце свой макет(ы) кожныя 10 хвілін або каля таго
• засяродзьцеся на чыстых, зручных для карыстальніка макетах - пазначайце свае элементы, каб не забываць, што яны сабой уяўляюць, калі спасылаецеся на іх на этапе 3, выкананне - выкарыстоўвайце іншыя вэб-сайты ў якасці натхнення; няма нічога дрэннага ў тым, каб браць элементы з іншых сайтаў і рабіць іх сваімі ўласнымі (гл. «Чы не рабіць»)

Dont's

• не ўключайце графіку або колеры (гэта для наступнага этапу) -не рабіце свае макеты занадта «занятымі»; засяродзьцеся на чыстых, добра арганізаваных, зручных для карыстальніка макетах - не прапускайце гэты этап; гэта гэтак жа важна, як і першае, і апошняе - калі вы бераце элементы з іншых вэб-сайтаў, пераканайцеся, што вы не плагіят; ёсць розніца паміж тым, каб натхніцца іншым вэб-сайтам на стварэнне пэўных элементаў вашага дызайну і нахабным зрываннем іх макета і колераў

Этап 3: Выкананне
На трэцім і апошнім этапе, выкананні, планаванне з этапаў 1 і 2 аб'ядноўваецца, каб дапамагчы ў стварэнні жывога інтэрактыўнага вэб-сайта.
Трэці этап займае найбольшую колькасць часу, паколькі вы будзеце 1) ствараць графіку, 2) ствараць кантэнт і, нарэшце, 3) пераўтвараць вэб-дызайн з малюнкаў у код, які вэб-браўзеры выкарыстоўваюць для прадстаўлення вашага сайта свету.

Да моманту дасягнення трэцяй стадыі вы павінны мець дакладнае ўяўленне аб:

• як вашыя наведвальнікі будуць перамяшчацца з аднаго месца ў іншае (этап 1, блок-схема) - як будуць размешчаны вашыя вэб-старонкі (этап 2, каркасныя макеты)

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

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

Звычайна мы спачатку пачынаем ствараць «хатнюю» старонку (індэкс). Выкарыстоўвайце каркасы, якія вы стварылі на этапе 2, у якасці шаблону для кожнай са старонак, якія вы ствараеце. Аднак замест суцэльных рамак выкарыстоўвайце графіку, колеры і тэкст. Кожная старонка павінна выглядаць менавіта так, як вы хочаце, каб яна выглядала ў Інтэрнэце, бо гэта апошні этап працэсу дызайну.

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

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

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

Dos

• спасылкі на свае шаблоны, якія былі створаны на этапе 2; хоць адхіляцца ад зыходнага макета можна, але вам не трэба
• правесці некаторыя даследаванні, перш чым ствараць свой рэальны дызайн; атрымаць ідэі з іншых сайтаў і зрабіць іх сваімі (без плагіяту)
• уключыце колер і графіку для стварэння канчатковага выгляду вашых вэб-старонак -выкарыстоўвайце CSS (каскадныя табліцы стыляў) для пераўтварэння вашых дызайнаў з малюнкаў у разметку, зразумелую вэб-браўзерам -спасылайцеся на блок-схему з этапу 1 пры кадзіраванні старонак з дапамогай гіперспасылак; лепш выкарыстоўваць выпадальнае меню, якое змяшчае ўсе (ці большасць) спасылак на вашым сайце на кожнай старонцы; гэта дазволіць палегчыць навігацыю, а таксама палегчыць сканаванне вашых старонак, калі павукі пошукавых сістэм спыняюцца; выдатнае месца, каб атрымаць выпадаючыя меню CSS, знаходзіцца на DynamicDrive.com - дапрацуйце свой дызайн, працуючы ў Photoshop або любой праграме для рэдагавання малюнкаў, якой вы карыстаецеся; можа быць цяжка ўносіць змены ў ваш дызайн пасля таго, як ён ператворыцца ў разметку (код)

Донцы

• не ўключайце тэкст у меню навігацыі пры пераўтварэнні ў CSS; замест тэксту выявы выкарыстоўвайце звычайны тэкст, які чытаюць павукі пошукавых сістэм
• не выкарыстоўваць табліцы пры пераўтварэнні; нават калі вам спатрэбіцца купіць кнігу па CSS, гэта таго варта; сталы мёртвыя
• не прапускайце першыя два этапы, каб зэканоміць час; ваш сайт БУДЗЕ лепш, калі вы пачнеце з пачатку працэсу вэб-дызайну (а не ў канцы)
• не забывайце сціскаць выявы, калі яны разразаюцца для CSS; няма нічога горш, чым павольная загрузка вэб-сайта з-за вялікіх файлаў малюнкаў; У Photoshop ёсць опцыя «Захаваць, аптымізаванае для Інтэрнэту» (CS3 — «Захаваць для Інтэрнэту і прылад»).

Працэс робіць дасканалым
Прытрымліваючыся працэсу вэб-дызайну, падобнага таму, што паказана ў гэтым артыкуле, вы павялічваеце шанцы стварыць вэб-сайт, які будзе добра арганізаваным, простым у навігацыі і вельмі зручным для карыстальнікаў. Давайце паглядзім праўдзе ў вочы: калі наведвальнікі заблудзіліся або заблыталіся, спрабуючы праглядаць ваш вэб-сайт, яны могуць націснуць кнопку "Назад" і пашукаць больш зручны вэб-сайт. Людзі не любяць думаць, калі справа даходзіць да таго, каб арыентавацца на вэб-сайтах. Не прымушайце іх думаць. Вы думаеце, плануючы свой вэб-сайт ад этапу 1 да этапу 3, і вы ўбачыце, што больш людзей будуць атрымліваць асалоду ад наведвання вашага сайта.