Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Visuals
Webdesign

Падтрымлівайце адзіны стыль афармлення вэб-сайта з дапамогай кіраўніцтва

by
Length:LongLanguages:
This post is part of a series called All About Style Guides.
50 Style Guide Tools, Articles, Books and Resources
Style Tiles: An Alternative to Full Design Comps

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

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

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

Што ўяўляе сабой кіраўніцтва па стылі?

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

  • Колеру брэндаў
  • Друкарня, напрыклад, шрыфты, памеры, асноўныя колеры і т.д.
  • Пазіцыянаванне лагатыпа і выкарыстанне ў розных сітуацыях. макет друку можа адрознівацца ад вэб-макета
  • Тон голасу

Тое, што змяшчаецца ў кіраўніцтве па брэнду / стылю, залежыць ад кампаніі. Гэта можа быць што заўгодна, і складацца як з дакумента з адной старонкай, так і маштабнага дакумента, такога як у канала English TV або Channel 4.

C4 style guide

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

Калі я магу выкарыстоўваць кіраўніцтва па стылі?

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

Напрыклад, гэта можа быць добрай ідэяй..

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

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

Цяпер, калі мы крыху разабраліся ў кіраўніцтве па стылі вэб-сайта, давайце зірнем на некаторыя прыклады.

Прыклады кіраўніцтваў па стылі сайта

Twitter Bootstrap

Twitter Bootstrap style guide

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

Github

Github style guide

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

MailChimp

Mailchimp style guide

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

Стварэнне кіраўніцтва па стылі вэб-сайта ў Photoshop

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

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

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

Савет: Вы можаце перамыкаць розныя віды стану ў Photoshop, выкарыстоўваючы Layer Comps. Паглядзіце наш нядаўні падручнік па гэтым пытанні.

Крок 1: Падрыхтоўка

У гэтым прыкладзе я збіраюся стварыць кіраўніцтва па стылі для блога. Кіраўніцтва па стылі ў блогу будзе складацца з наступных кампанентаў - такіх як:

  • Картка аўтара
  • Публікацыя
  • Каментар
  • Кнопкі
  • Рух старонак
  • Элементы формы
  • Табліцы

Я таксама буду выкарыстоўваць шэсць колераў:

  • сіні #a4d4e8 - будзе выкарыстоўвацца ў якасці асноўнага колеру
  • green #aee1a3 - будзе выкарыстоўвацца ў якасці другараднага колеру
  • red #f67f77 - будзе выкарыстоўвацца як другарадны колер і ў якасці папярэджанняў пра памылкі
  • чорны #474747 - будзе выкарыстоўвацца ў якасці асноўнага колеру тэксту
  • цёмна-шэры #919191 - будзе выкарыстоўвацца як воторстепенный колер тэксту
  • светла-шэры #e7e2de - будзе выкарыстоўвацца для контураў

Усе палі ўводу і кнопкі будуць выкарыстоўваць скругленая рамку радыусам 5px, у той час як усе фішкі кампанентаў будуць выкарыстоўваць скругленая рамку радыусам 0px, якая будзе рабіць іх прастакутнымі па форме.

Крок 2. Наладжвальны наш дакумент

Setting up photoshop grid

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

Я выкарыстоўваю дапаможную сетку (View > Show > Grid), каб дапамагчы мне трымаць усё упорядоченно ў маім дызайне. Я выкарыстоўваю сетку 20px x 20px з падзелам праз кожныя 10 пікселяў. Гэтыя налады можна змяніць, выбраўшы Preferences > Guides, Grid і Slices.

Затым вы ўбачыце экран ніжэй. Тут вы можаце змяніць інтэрвал сеткі на любое значэнне, якое вы вылучыце, але я лічу, што сетка 20px з падзелам, усталяванымі на 2, падыходзіць. Я таксама стварыў некалькі накіроўвалых ліній, шырынёй 460 пікселяў па абодва бакі ад майго дакумента, каб мне было лягчэй працаваць. У дадатак да гэтага можа быць карысна ўключыць «snap», выбраўшы View > Snap. Гэта гарантуе, што вашыя элементы апынуцца ў дакладнай адпаведнасці з пікселямі і ня будуць знаходзіцца на межпиксельном прасторы.

photoshop preferences grid

Крок 3: Картка аўтара

author component web site style guide

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

Для пачатку абярыце прыладу фігуры і ўсталюйце белы колер, як колер для пярэдняга плана. Зрабіўшы гэта, стварыце прастакутнік памерам 380x250px. Пасля гэтага, пстрыкніце правай кнопкай мышы на пласце фігуры і абярыце 'blending options'. Цяпер павінна з'явіцца панэль параметраў змешвання. З левага бакавой панэлі ўсплывае акна выберыце «Stroke» і ўсталюеце памер 1px. Колер, які мы збіраемся выкарыстаць, - светла-шэры #e7e2de, узяты з нашага набору колераў.

Зараз абярыце «Outer glow» і ўсталюйце колер вонкавага святлення на той жа колер, але паменшыце яго празрыстасць да 80. Устанавіце роскід святлення да 100%, а памер да 4. Гэта надасць нашаму кампаненту мяжы з густым свячэннем, замаскіраваным пад мяжу.

Photoshop layer styles

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

Для аватара аўтара вазьміце прыклад фатаграфіі і зменіце яе памер да 75px x 75px. Затым абярыце прыладу «Elliptical marquee» і перацягнуць курсор па-над малюнка, пачынаючы з верхняга левага кута ўніз да ніжняга правага. Ўтрымлівайце shift, пакуль вы робіце гэта, каб захаваць прапорцыі і стварыць ідэальны круг. Затым, як толькі вы стварылі вылучэнне на малюнку, скапіруйце яго, а затым устаўце ў свой дакумента кіраўніцтва па стылі. Скапіюйце і ўстаўце элемент «стыль асноўнага пласта», а затым адрэдагуйце стыль і выдаліце ​​абводку.

Каб стварыць тры блокі статыстыкі, спачатку стварыце тры белых прамавугольніка, якія можна размеркаваць раўнамерна на 380px. Як толькі вы гэта зробіце, вазьміце адзін з іх і зноў адкрыйце панэль стыляў слаёў, пстрыкнуўшы правай кнопкай мышы на пласце. Затым выберыце «Унутраная цень». Пераканайцеся, што рэжым змешвання усталяваны ў нармальны рэжым, а празрыстасць на 100%. Усталюйце кут «-90» і зменіце адлегласць на 5 пікселяў. У якасці колеру выкарыстоўвайце наш асноўны сіні колер #a4d4e8. Затым паспрабуйце гэты працэс на іншых 2 блоках, але на гэты раз зменіце іх унутраныя колеру ценяў на нашы другарадныя колеру; зялёны # aee1a3 і чырвоны #f67f77. Затым дадайце тэкст для кожнага блока. У маім выпадку я вырашыў паказаць колькасць падпісчыкаў, падпісак і паведамленняў.

Photoshop inner shadow style

Каб дадаць тэкст і біяграфію аўтара, я вырашыў выкарыстоўваць шрыфт «Droid Sans», даступны ў выглядзе шрыфта Google.

Каб стварыць маленькі куток у правым верхнім куце карткі аўтара стварыце квадрат 50 пікселяў x 50 пікселяў з нашым асноўным сінім колерам, а затым выберыце «полигональный інструмент ласо». Намалюйце прамую лінію ад верхняга левага кута квадрата да ніжняга правага краю, а затым абвядзіце левую частку квадрата. Пасля гэтага абярыце Layer > Layer Mask > Hide Selection, і трохкутнік будзе створаны.

Каб стварыць зорку абярыце прыладу постаць «Палігон». Пераканайцеся, што ў верхнім меню ўстаноўлена значэнне «5». Затым абярыце маленькую стрэлку, размешчаную побач са словам «Бакі». Выберыце зорку і «водступы» устанавіце на 50%. Затым намалюйце белую зорку уверсе трыкутніка і змесціце яе ў верхні правы кут карткі аўтара.

Крок 4: Кампанент запісу блога

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

Blog post component

Затым я ўжываю «стыль асноўнага пласта». Мініяцюра памерам 70px x 70px змяшчаецца ўнутр сдева. Я стварыў тры розных стылю тэксту; асноўны загаловак, дата і тэкст параграфа. Унізе справа я дадаў кнопку «чытаць далей». Крок 6 для стварэння кнопак.

Крок 5: Кампанент каментарыяў

Каб стварыць «бурбалка» каментароў, стварыце прастакутнік з прастакутнікам памерам 316 пікселяў x 90 пікселяў і ўжыеце да яго «стыль асноўнага пласта».

Blog comment component

Стварыце квадратную форму 15px x 15px і павярніце яе Edit > Transform Path > Rotate, затым у меню опцый павярніце яго на 45 градусаў. Абярыце актыўны пласт і перайдзіце ў раздзел Edit > Copy, затым перайдзіце да вялікага скругленымі прамавугольніка, які мы толькі што стварылі. Пераканайцеся, што квадрат выраўнаваны па тым месцы, дзе вы хочаце, каб праходзіў дыялог. Затым перайдзіце ў раздзел Edit > Paste, і гэта дзеянне аб'яднае дзве постаці. Ўжыеце стыль асноўнага пласта, і ваш «бурбалка» дыялогу гатовы!

rotate shape photoshop

Я вырашыў дадаць два варыянты каментароў; адзін з іх з'яўляецца стандартным каментаром, а другі з'яўляецца каментарыем аўтара. Для аўтара я змяніў абводку на асноўнай сіні колер.

Крок 6: Кнопкі

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

Blog button component

Каб стварыць вялікую кнопку, абярыце прыладу «закруглены прастакутнік». На панэлі «Параметры» пераканайцеся, што радыус усталяваны на «5px» і намалюйце сіні прастакутнік 125px x 40px. Затым дадайце тэкст па вашаму выбару. Прадублюйце пласт, пстрыкнуўшы правай кнопкай мышы на пласце і выбраўшы «Дубляваць пласт». Пасля таго, як вы зрабілі гэта, зменіце свой колер на адзін з нашых другарадных кветак. Паспрабуйце гэты працэс для кнопкі з іншым колерам. Таксама, паспрабуйце гэты працэс для маленькіх кнопак, але на гэты раз стварыце прастакутнікі 30px x 105px і для кнопкі «call to action», зрабіце яе памерам 374px x 40px.

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

Для групы кнопак стварыце скруглены прастакутнік памерам 380px x 30px у шырыню, а затым падзеліце яго на чатыры кнопкі з аднолькавым памерам. Вы можаце зрабіць гэта намаляваўшы лінію алоўкам 1px, альбо шляхам выразання секцый з дапамогай інструмента «прастакутная вобласць» памерам 1px.

Крок 7: Разбіццё на старонкі

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

Крок 8: Формы

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

Blog form component

Палі ўводу і тэкставыя палі для гэтага набору ствараюцца з выкарыстаннем метадаў, якія мы выкарыстоўвалі раней. Для палёў уводу намалюйце прастакутнік памерам 380px x 40px і ўжыеце колер абводкі. Павялічце вышыню тэкставага поля прыкладна да 90 пікселяў. Для таго, каб засяродзіцца на элементах, я выкарыстаў наш «стыль асноўнага пласта» і дадаў дадатковы элемент для паведамленняў пра памылкі і паспяховым выніку.

Выснова

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

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

Дадатковыя спасылкі для чытання і іншыя рэсурсы

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.