Дызайн сайта

Аўтар: Judy Howell
Дата Стварэння: 25 Ліпень 2021
Дата Абнаўлення: 1 Ліпень 2024
Anonim
Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.
Відэа: Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.

Задаволены

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

Крок

Спосаб 1 з 2: 3 асноўныя правілы

  1. Правіла 1:Слухайце свайго кліента. Магчыма, вы ствараеце "найвялікшы ў свеце сайт у гісторыі Сусвету і за яго межамі" з насычаным чорным, вытанчанымі шрыфтамі і яркімі мастацкімі фарбамі для сайта, які крычыць "даследуй мяне зараз!" На жаль, ваш кліент хацеў аранжавую радок меню з ярка-ружовымі і аранжавымі літарамі. Вас звольнілі, і ваш лепшы вэб-сайт, на які мае права кліент, знаходзіцца дзе-небудзь на дыску рэзервовай копіі, і ніхто яго ніколі больш не ўбачыць.
    • Вывучыце фірмовы стыль вашага кліента. Няхай кліент пакажа вам некалькі сайтаў, якія яны любяць. Гэта не толькі дасць вам уяўленне пра тое, што ім падабаецца, але і дасць некалькі ідэй дызайну, пра якія вы, магчыма, і не думалі.
    • Калі вы думаеце, што мы жартуем з нагоды аранжавага і ружовага вэб-сайта, разгледзім гэты класны, вытанчаны сайт:
  2. Правіла №2:Ведайце сваю аўдыторыю і тое, што яна шукае, і адаптуйце ваш дызайн адпаведна. Прычына, па якой у людзей ёсць вэб-сайты, заключаецца ў тым, што яны хочуць, каб іх бачылі іншыя людзі. Ён можа быць інфарматыўным, камерцыйным альбо забаўляць пэўную мэтавую аўдыторыю. Ваша праца дызайнера - ведаць, для каго вы распрацоўваеце, і ўтрымліваць іх на старонцы, калі яны там прызямляюцца.
    • Можна падумаць: "Калі гэта выглядае добра, яны застануцца". Але гэта не абавязкова павінна быць так. Узяць, напрыклад, нерухомасць. Вось сайт з чыстым, вясёлым дызайнам. Тут шмат белага прасторы, якое надае адкрыты выгляд, яркія колеры і сучасны шырокаэкранны фармат са спасылкамі на бачным месцы:
    • Зараз паглядзім на гэты падыход да продажу нерухомасці ў тым самым раёне: мітусня і вельмі занятая, цьмяная расфарбоўка і рэклама.
    • Здагадайцеся, які з іх лепш працуе для тых, хто шукае дом? Правільна, той, дзе дамоў! Калі людзі шукаюць "дамы на продаж у Санта-Моніцы", ім усё роўна, як выглядае сайт. Яны не хочуць чытаць пра агента па нерухомасці альбо бачыць прыгожыя фатаграфіі горада. Яны хочуць бачыць дамы.
  3. Правіла № ​​3:Слухайце сябе. Вы разумееце, чаго хоча кліент, і ведаеце, што шукае ваш рынак. Цяпер нарэшце прыйшоў час звярнуць увагу на вас, дызайнер!
    • Стварыце шаблон у графічным праграмным забеспячэнні на ваш выбар. Рабіце элементы вашай старонкі на розных пластах (каб потым можна было наладзіць рэчы, не руйнуючы ўвесь шаблон). Гэтыя элементы могуць быць:
      • Загаловак. Гэта элемент, які аднолькавы на кожнай старонцы вашага сайта. Загаловак складаецца з загалоўка і лагатыпа сайта, а таксама спасылак на іншыя часткі сайта (напрыклад, пра "Інфармацыю", "Кантакт" і г.д.). Візуальна і практычна гэта звяжа ўсё разам. Добрай практыкай з'яўляецца прывязка першай кнопкі ў радку меню да галоўнай старонкі.
      • Напрыклад, давайце паглядзім на Apple:
      • Як і ў большасці рэчаў Apple, іх галоўная старонка мае вельмі чысты і зразумелы дызайн. Звярніце ўвагу на радок меню ўверсе з лагічнымі тэмамі для кожнай кнопкі, а таксама поле пошуку - заўсёды добра, калі ваш сайт гэта падтрымлівае. Зараз паглядзім на мэтавую старонку адной з кнопак iPad, каб убачыць некалькі элементаў:
      • Радок меню змяняецца толькі зацямненнем кнопкі iPad.
      • Тэма мэтавай старонкі адлюстроўваецца вялікімі чорнымі літарамі.
      • З'явіцца новае падменю, каб вы маглі даведацца больш пра прадукт. Калі вы націснеце на адну з гэтых кнопак, вы ўбачыце, што кожная старонка прапануе новы змест у залежнасці ад тэмы, але будзе аднолькавай па макеце і дызайне.
      • Часта кожная асноўная тэма ў радку меню будзе мець розныя падзагалоўкі, якія вы павінны запоўніць. Замест таго, каб ствараць другі радок меню, вы можаце выкарыстоўваць усплывальныя меню, як гэты прыклад ад "Музыканты-сябры":
      • Бакавая панэль. Гэта з'явіцца на многіх старонках вашага сайта, але не абавязкова на ўсіх - вызначае кантэкст. Аднак гэта вельмі важны элемент і павінен быць старанна распрацаваны, каб быць інтуітыўна зразумелым і не занадта загрувашчаным. У адрозненне ад радка меню, змест бакавой панэлі можа быць вельмі дынамічным. Праверце гэтыя дзве бакавыя панэлі ад прадаўца нерухомасці Trulia. Першая - для пакупнікоў:

Спосаб 2 з 2: Рэкамендацыі

  1. Распрацуйце добры карыстацкі інтэрфейс. Размяшчайце розныя элементы вэб-сайта, такія як загаловак, бакавыя панэлі, лагатыпы, малюнкі і тэкст, у адным і тым жа месцы на кожнай старонцы, каб зрабіць ваш сайт зручным і інтуітыўна зразумелым.
    • Захоўвайце аднолькавы загаловак уверсе кожнай старонкі. Незалежна ад таго, ці дазваляе змест вашага сайта шмат паўтаральных элементаў, пераканайцеся, што верхняя частка кожнай старонкі аднолькавая.
    • Выкарыстоўвайце логіку ў сваім дызайне. Элементы на адной старонцы павінны быць лагічна ўпарадкаваны па важнасці ці тэме; розныя старонкі на сайце павінны быць занадта.
  2. Стварыце паслядоўны стыль. Там, дзе макет павінен надаць вашаму сайту структурную кансістэнцыю, стыль павінен забяспечваць тэматычную гармонію.
    • Прытрымвайцеся двух-трох асноўных колераў і пераканайцеся, што яны добра спалучаюцца.
    • Пазбягайце выкарыстання занадта вялікай колькасці стыляў і памераў шрыфтоў; калі вы хочаце змяніць некалькі, выкарыстоўвайце іх аднолькава на кожнай старонцы.
    • Выкарыстоўвайце каскадныя табліцы стыляў (CSS) для падтрымання адзінага стылю і палягчэння змены элементаў на цэлым вэб-сайце без неабходнасці пераходзіць на кожную старонку асобна.
  3. Максімальная чытальнасць. Для палягчэння чытання тэксту вы можаце падзяліць яго на больш дробныя часткі.
    • Выкарыстоўвайце субтытры і правільны інтэрвал для падзелу кожнай з частак.
    • Выкарыстоўвайце тлустыя літары альбо розныя памеры, каб паказаць іерархію і важнасць тэм.
    • Звярніце ўвагу на тое, як вы ставіцеся да тэксту. Не рабіце шрыфт занадта маленькім і павялічвайце міжрадковы інтэрвал, каб зрабіць вялікія кавалкі тэксту лягчэй для чытання. Вялікія ўчасткі тэксту чытаць складаней; разбіць яго на меншыя абзацы.
  4. Зрабіце ваш сайт універсальным для чытання. Выкарыстоўвайце стандартны HTML і пазбягайце тэгаў, функцый і ўбудоў, даступных толькі для адной маркі альбо версіі браўзэра.
    • У той час як большасць сучасных браўзэраў і кампутараў могуць апрацоўваць складаныя выявы, усё будзе выглядаць згладжана, калі вы зменшыце і аптымізуеце выявы для Інтэрнэту. Параўнайце важнасць якасці з важнасцю хуткасці.
  5. Праверце свой сайт. Пераканайцеся ў гэтым кожная спасылка працуе як і варта было чакаць, і выявы выглядаюць правільна.
    • Магчыма, вы захочаце арганізаваць некаторыя выпрабаванні карыстальнікаў, прапанаваўшы членам вашай мэтавай аўдыторыі праверыць яснасць і прастату выкарыстання вашага дызайну, а таксама даць водгук пра свой вэб-сайт.
  6. Апублікуйце свой вэб-сайт. Купіце даменнае імя, калі вы яшчэ гэтага не зрабілі. Перыядычна правярайце, ці ўсё яшчэ працуюць спасылкі, і слухайце прапановы, якія наведвальнікі адпраўляюць вам па электроннай пошце.

Парады

  • Хоць вы можаце свабодна распрацоўваць макет, зыходзячы з уласнага бачання альбо рэчаў, якія вы бачылі на іншых сайтах, купіць гатовы дызайн можа быць прасцей.
  • Не бамбіце наведвальніка мілымі, адмысловымі малюнкамі. Флэш-анімацыя, яркія колеры, фоны з малюнкам і музыка, якая аўтаматычна прайграваецца пры загрузцы старонкі, былі вясёлымі эксперыментамі ў 90-я, але цяпер яны будуць адпужваць карыстальнікаў. Прытрымвайцеся простых фонаў, якія кантрастуюць з колерам тэксту для максімальнай разборлівасці.
  • Вы заўсёды можаце выкарыстоўваць CSS для аптымізацыі інтэрвалу паміж абзацамі.
  • Для наведвальнікаў з парушэннямі слыху ці зроку вы можаце субтытраваць відэа, транскрыбаваць аўдыя і дадаваць паведамленні пра даступнасць. Хоць табліцы могуць быць эфектыўным спосабам арганізацыі інфармацыі, наведвальнікі са слабым зрокам, якія выкарыстоўваюць праграму для чытання з экрана, могуць не пачуць матэрыял у правільным парадку.
  • Няхай вашы наведвальнікі захоўваюць чарніла: выкарыстоўвайце асобную табліцу стыляў для друку старонак.
    • Выключыце фонавыя выявы пры ўсталёўцы параметраў друку.
    • Выкарыстоўвайце чорны тэкст на белым фоне.
    • Прыбярыце радок меню і непатрэбныя выявы.

Папярэджанні

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