Задаволены
- Адаптыўная метадалогія
- Як мне захаваць кантэнт у першую чаргу?
- Чаму?
- 01. Вызначце бізнес і мэты карыстальнікаў
- 02. Спасылайцеся на іх пры кожным шанцы
- 03. Не бойцеся адціскацца
- 04. Націсніце сваю ўласную каманду таксама
- 05. Вызначце ўсе вашы патрэбы ў змесце загадзя
- Як абстрагаваць змест ад прэзентацыі?
- Нам трэба перастаць думаць пра змест з пункту гледжання макета
- Прымусіце кліентаў планаваць змест незалежна ад дызайну
- Дапрацуйце свой змест перад распрацоўкай
- Выкарыстоўвайце рэальны змест - кожны раз
- Такім чынам, як каркасныя каркасы працуюць для дызайнерскіх праектаў, якія рэагуюць на іх?
- Эскіз
- Унутры-аглядальнік
- Анатацыі
- Выкарыстоўвайце рэальны змест у каркасах
- Як мне стварыць дызайн для маленькіх экранаў?
- Абстрактныя дызайны з прылад у самым пачатку
- Выкарыстоўвайце стыль
- Стварэнне гармоніі інтэрфейсу
- Прагледзець усё ў браўзэры
- Навядзіце баланс пры дапамозе статычных праграм
- Выснова
Давайце зразумеем: дызайн - гэта рашэнне, толькі калі яно сканцэнтравана на больш глыбокіх праблемах, чаму і за чым. Цвёрды працэс заўсёды павінен кіраваць нашай працай, але нам трэба прыняць штосьці больш гнуткае. Наша асяроддзе нарэшце зарэкамендавала сябе вадкасцю, таму наш працэс не павінен? Падумайце аб дызайне сістэмы: вам трэба ўбачыць як усю карціну, так і драбнюткія дэталі. Немагчыма? Далёка не так!
Фрэнк Хімэра выдатна гэта сцвярджае ў сваёй кнізе "Форма дызайну": "Ёсць частка, у якой мастак адступае ад мальберта, каб атрымаць новы погляд на працу. Жывапіс - роўныя часткі блізкага і далёкага: калі побач, мастак шмат працуе, каб зрабіць след; калі далёка, ён ацэньвае працу, каб прааналізаваць яе якасці. Ён адступае, каб дазволіць працы размаўляць з ім ».
Мы павінны дазволіць нашай працы, нашаму медыюму размаўляць з намі. З ростам адаптыўнага дызайну мы, нарэшце, узялі на ўзбраенне наша асяроддзе, якое яно павінна было быць: вадкасць. Гэта цудоўны час, каб зрабіць крок назад і ацаніць працу, прааналізаваць і прыняць новы спосаб рабіць рэчы, новы працэс. Прайшлі часы статычных макетаў і вэб-дызайнераў, якія не разумеюць код. Час рэагаваць на працэс.
Адаптыўная метадалогія
Мы збіраемся раскрыць вялікі сакрэт цвёрдага працэсу ў самым пачатку гэтага артыкула. Таму што мы такія шалёныя. Гатовы? Адказны працэс - гэта адказны працэс. Невыразна? Можа быць. Па-дурному? Не. Як і рух перад вэб-стандартамі, спагадны дызайн штурхае Інтэрнэт з выкарыстаннем зручных для будучых метадаў.
Як і любы працэс дызайну, ён павінен засяроджвацца на тым, чаму ўсё гэта стаіць. Дык чаму існуюць сайты? Для дастаўкі кантэнту. Гэта можа быць заснавана на задачы, сацыяльна, інфармацыйна ... усё роўна. Усё зводзіцца да гэтага: пачніце з важнага значэння, добра структураванага зместу і ўзаемадзеяння.
Вось пытанні, якія мы часцей за ўсё чуем пра наш дынамічны працэс дызайну.
Як мне захаваць кантэнт у першую чаргу?
Мы ўсе настолькі аптымістычныя ў пачатку праекта. "Змест у першую чаргу!" мы кажам. «Мэты карыстальнікаў! Памятайце, што важна! " Гэта праўда. Але што гэта значыць? Як рэалізаваць працэс, які ўтрымлівае змест?
Нават калі вы ведаеце (ці думаеце, што ведаеце), з ходам праекта пра яго лёгка забыцца. Доўгатэрміновыя праекты маюць тэндэнцыю зацягвацца і працягвацца (і далей ... і далей ...). Мы перастаем думаць пра тое, чаму, і пачынаем засяроджвацца на тым, як. Мы падманваем сябе думкай, што нашы праекты можна падзяліць на асобныя фазы "адкрыцця" і "распрацоўкі", якія могуць існаваць незалежна.
Праўда ў тым, што мы павінны ўвесь час пытацца, чаму. Незалежна ад таго, наколькі вы думаеце, што ведаеце, незалежна ад таго, колькі планавання вы зрабілі - кожны раз, калі вы прымаеце рашэнне, кожны раз, калі вы распрацоўваеце кнопку альбо пішаце загаловак, вы павінны спытаць ...
Чаму?
Навошта я гэта раблю? Для каго гэта прызначана? Якую бізнес-мэту ён дапаможа дасягнуць кліенту? Што трэба, каб гэта дапамагло маім карыстальнікам звярнуцца? Не проста ўтрымліваць змесціва ў першую чаргу. Захоўвайце "чаму".
Гэта дазваляе лёгка гучаць. Але каб зрабіць гэта добра, вам трэба будзе націснуць. Націсніце кліентаў і вашу каманду на тое, каб вызначыць, чаму яны спачатку. Няма Lorem Ipsum, няма «мы да гэтага дабярэмся пазней». Рабі хатняе заданне! Усе вашы хау павінны пачынацца з цвёрдай прычыны. Для "Жоўтага алоўка" гэта азначае вялікія змены ў тым, як мы выстаўляем, ацэньваем, складаем бюджэт і плануем праекты. Нам прыйшлося падштурхнуць бюджэт і час, каб правесці трывалыя даследаванні, стратэгію і планаванне. Вы маглі б таксама. Але як толькі вашы кліенты і вашы каманды ўбачаць велізарныя перавагі вызначэння патрэб у змесце, яны ніколі не азірнуцца.
І наша задача іх выхоўваць. (Прачытайце выдатную кнігу Майка Мантэйру "Дызайн - гэта праца", калі вы хочаце даведацца больш пра зносіны з кліентамі.) Кліенты могуць з цяжкасцю зразумець каштоўнасць усіх гэтых даследаванняў і працы наперад. А навошта ім? Яны не атрымліваюць нічога "скончанага" ў канцы - і занадта часта яны проста атрымліваюць рахунак-фактуру і вялікі стары дакумент Word.
Гэта не іх віна - мы вінаватыя. Гэта наш абавязак зрабіць лепшую працу, каб прадэманстраваць гэтую каштоўнасць. На кожным кроку нам трэба вярнуць усё да галоўнага, чаму.
Гэта асабліва важна для спагадлівага дызайну. Спагадны вэб-сайт не патрабуе значна больш намаганняў для распрацоўкі, але гэта азначае нашмат больш планавання. Сапраўды, мы плануем рабіць гэта ўвесь час. Станьце сведкамі бягучага перапрацоўкі праекта кожныя тры гады. Вы хочаце працягваць гэта рабіць? Мы ўпэўнены, што не.
Такім чынам, вось тры этапы, каб захаваць змест першым у працэсе праекта.
01. Вызначце бізнес і мэты карыстальнікаў
Складзіце прыярытэтны спіс дзелавых і карыстальніцкіх мэтаў для вашага праекта. Што вашы карыстальнікі больш за ўсё хочуць ведаць ці рабіць? Зрабіце сваё даследаванне. Рабіце абгрунтаваныя высновы, а не дзікія здагадкі. Паспрабуйце пагадзіцца з усімі зацікаўленымі бакамі.
02. Спасылайцеся на іх пры кожным шанцы
Кожны раз, калі вы прымаеце рашэнне, кожны раз, калі хто-небудзь прапануе новую функцыю альбо элемент дызайну, альбо старонку зместу, прымушайце іх супаставіць запыт з мэтай бізнесу і карыстальніка. Якія рэальныя патрэбы задаволіць гэтая функцыя? У чым сапраўдная прычына? (Падказка: "Таму што я хачу", "Мне вельмі падабаецца сіні" ці "усе ў Facebook", не лічыцца.)
03. Не бойцеся адціскацца
Гэта можа быць складана. Узаемаадносіны з кліентамі могуць быць далікатнымі і спакусіць адмовіцца ад бітвы, каб выйграць вайну. Але памятайце, мы ўсе ў гэтым разам! Гэта не бізнес супраць карыстальніка; нас супраць іх.
Задавальненне патрэб карыстальнікаў - лепшы спосаб задаволіць патрэбы бізнесу. Таму што без нашых карыстальнікаў у нас няма бізнесу! Кліенты (добрыя кліенты) не наймаюць вас, каб сказаць усім "так". Таму, калі ваш кліент просіць чагосьці, што не будзе адпавядаць яго мэтам або патрэбам карыстальнікаў, не бойцеся кінуць ім выклік. Справа не ў эга. Гаворка ідзе пра стварэнне найлепшага магчымага рашэння.
04. Націсніце сваю ўласную каманду таксама
Гэта таксама можа стаць праблемай пры працы ў творчым калектыве. Падзел роляў - візуальны дызайн, карыстацкі досвед, інфармацыйная архітэктура, стратэгія зместу, вытворчасць кантэнту - можа прывесці да няправільнай камунікацыі. Мы становімся занятымі, нас забіваюць электроннымі лістамі. Цяжка заставацца з праектам ад пачатку да канца, асабліва пасля таго, як "ваша" праца скончана.
Адносіны вашай каманды не менш важныя, чым адносіны з кліентам. Мы павінны нагадаць сабе пра тое, чаму, як і нашы кліенты. Супрацоўніцтва з'яўляецца ключавым. Вы не можаце проста "аддаць" план змесціва, каркасныя карціны альбо дызайн. Наколькі гэта магчыма, нам даводзіцца працаваць рука аб руку. Лёгка «скончыць» вынік і перайсці да чагосьці іншага. Значна складаней заставацца з праектам, калі ўсё становіцца цяжка.
Падыход вадаспаду да творчай працы проста не працуе. Рухомая сумесная праца паміж членамі каманды дазваляе палепшыць вынікі.
05. Вызначце ўсе вашы патрэбы ў змесце загадзя
Тут справа ў тым, што адаптацыя вэб-сайтаў займае больш часу, каб планаваць. Мы ўжо не проста плануем адзіны кантэкст. Мы плануем усе кантэксты, пра якія мы ведаем зараз, і некаторыя, якія яшчэ не існуюць.
Але для планавання ўсіх гэтых складанасцей патрабуецца значна менш часу, чым для таго, каб вярнуцца да рэканструкцыі функцый і функцый, якія вы не ўлічвалі. Так што марнуйце час / намаганні / бюджэт. Прымусіце сваіх кліентаў і вашу каманду вызначыць (і здзейсніць!) Увесь іх змест, перш чым займацца дызайнам. Карыстайцеся табліцамі старонак. Выкарыстоўвайце структураваны змест. Пераканайцеся, што ваш змест зараз! Ці плакаць пазней.
Як абстрагаваць змест ад прэзентацыі?
Вы шмат чуеце гэта вакол Інтэрнэт-сферы. Але пачакайце, што? І пачакай - чаму?
Таму што прэзентацыя можа (і будзе) мяняцца. Тое, як мы распрацоўвалі вэб-сайты 15 гадоў таму, амаль не пазнаецца з таго, як мы прадстаўляем іх зараз. Але вы ведаеце, што не змянілася? Словы. Мы па-ранейшаму карыстаемся імі. Інтэрнэт існуе ў першую чаргу для (тэкставага) зместу. Мы па-ранейшаму выкарыстоўваем яго для вырашэння інфармацыйных праблем; для выканання задач. Але калі ваш змест залежыць ад спосабу прэзентацыі (уступныя старонкі Flash, хто-небудзь?), Ёсць верагоднасць, што ён не будзе выкарыстаны праз некалькі гадоў. І гэта адстой.
Нам трэба перастаць думаць пра змест з пункту гледжання макета
Мы (як галіна) навучылі нашых кліентаў думаць пра змест з пункту гледжання макета. "Пакладзіце яго ў бакавую панэль", - кажам мы. "Гэта павінна ісці ў калантытуле". Спыніцеся! Хопіць. Спыніцеся. Справа не ў месцазнаходжанні. Гаворка ідзе пра прыярытэт. Які найбольш важны кантэнт для вашых карыстальнікаў? Таму што адгадайце: макет змяняецца ў розных кантэкстах. На вашым дызайне маленькага экрана (верагодна) не будзе бакавой панэлі.
Гіганцкае супер-меню, якое хоча ваш кліент? Не збіраюся лётаць на iPhone.
Прымусіце кліентаў планаваць змест незалежна ад дызайну
Добра, не трэба прымушаць іх. Заахвочвайце іх. Моцна заахвочваю. Табліцы старонак выдатна для гэтага падыходзяць. Калі вы яго яшчэ не чыталі, неадкладна перайдзіце да стратэгіі ўтрымання Інтэрнэту Крысціны Халворсан і Мелісы Рах для атрымання дадатковай інфармацыі пра тое, як іх стварыць. Арганізуйце іх у прыярытэтным парадку. Не спасылайцеся на месцазнаходжанне або макет. Гэта дапаможа вашым кліентам больш прадуктыўна думаць пра свой змест, а таксама прывядзе ў рух працэс стварэння кантэнту да канчатковага каркаса або дызайну.
Дапрацуйце свой змест перад распрацоўкай
Добра, гэта не заўсёды магчыма. Але чым больш няўпэўненасці вы зможаце ліквідаваць, перш чым пачаць займацца распрацоўкай, тым менш вам прыйдзецца вяртацца і змяняць рэчы пазней.
Выкарыстоўвайце рэальны змест - кожны раз
Калі магчыма, выкарыстоўвайце кантэнт краявога корпуса - паказвайце сваім кліентам самыя складаныя старонкі, выявы і меню. Гэта дазволіць пазбегнуць сюрпрызаў у далейшым, калі яны ўбачаць сваё самае бязладнае ўтрыманне ў гатовым прадукце.
Функцыянальныя каркасы ў браўзэры ўносяць розніцу. Дазвольце сваім кліентам назіраць, як іх змесціва рухаецца і змяняецца ў дыяпазоне памераў экрана. Указвайце на гэта, прадстаўляючы каркасы (вы робіце асабістыя прэзентацыі, праўда?) Прадэманструйце ім, як прыярытэт іх інфармацыі застаецца аднолькавым для розных памераў экрана, у той час як макет мяняецца.
Такім чынам, як каркасныя каркасы працуюць для дызайнерскіх праектаў, якія рэагуюць на іх?
Мы цвёрда верым у тое, што дызайн узаемадзеяння для RWD павінен трапляць у браўзэр хутка і часта. Стварыць статычны дакумент, які б усё апісаў, практычна немагчыма. Вядома, мы маглі б стварыць дакумент, які дэманструе тры, чатыры ці пяць кропак прарыву, але гэта толькі частка гісторыі. А як наконт усіх момантаў паміж пунктамі прарыву? Гэта адбываецца ў браўзэры.
Эскіз
Тым не менш, добра мець магчымасць хутка накідаць свае ідэі сумесна. Гэта не павінна адбывацца ў любым канкрэтным носьбіце, але ёсць проста нешта пра аловак на паперы. Уся справа ў тым, каб хутка і ітэратыўна выводзіць ідэі. Мы любім маляваць, калі гэта магчыма, і для гэтага ёсць нават дадатак: UI Sketcher.
Унутры-аглядальнік
Вось сапраўдны білет для нас. Мы любім паўторна выкарыстоўваць шаблоны і сістэмы пры дэманстрацыі RWD у браўзэры. Вядома, мы маглі б кожны раз ствараць уласную сістэму з нуля, але гэта не дапамагае ні нам, ні нашым кліентам.
Мы таксама хацелі б выкарыстоўваць хутка рэагуючыя структуры прататыпавання, такія як Bootstrap Twitter або Zurb's Foundation. Мы асабіста схіляемся да Фонду, бо ён адпавядае нашаму рабочаму працэсу. Было б цудоўна, калі б хто-небудзь з іх выкарыстаў падыход да малога экрана з нізкай прапускной здольнасцю, але менавіта так мы і рухаемся.
Анатацыі
Анатацыі да каркасных рамак вельмі важныя, але, як мы лічым, часта ігнаруюцца. Скажыце ўслых: дакументацыя, дакументацыя, дакументацыя! Мы бачылі некалькі прыкладаў гэтага ад сяброў, і мы лічым, што журы па-ранейшаму выбірае "лепшы" спосаб правільна анатаваць адаптыўныя каркасы ў браўзэры. Як ужо згадвалася вышэй, мы рэгулярна выкарыстоўваем Foundation by Zurb і любім выкарыстоўваць яго надбудову Reveal для адлюстравання нашых анатацый. Гэтыя анатацыі з'яўляюцца толькі на вялікіх экранах і ў ідэале могуць уключацца і выключацца.
Выкарыстоўвайце рэальны змест у каркасах
Шмат спрэчак вакол Lorem Ipsum было ў каркасах і дызайнерскіх макетах, але калі ў вашым каркасе няма рэальнага зместу, вы робіце гэта няправільна. Змест паведамляе пра рашэнні аб узаемадзеянні і паведамляе, калі дызайн парушыцца. Як гэта можа зрабіць Lorem Ipsum?
Як мне стварыць дызайн для маленькіх экранаў?
На працягу многіх гадоў мы распрацоўвалі з улікам канкрэтнай рэзалюцыі. Гэта была налада па змаўчанні. Незалежна ад таго, накід у нататнікі, каркаснае афармленне ў OmniGraffle, праца ў Photoshop альбо распрацоўка ў браўзэры, мы ведалі, якім будзе наш палатно. Гэтыя дні мінулі. Мы верым у тое, што ў першую чаргу распрацоўваем маленькі экран і паступова яго ўдасканальваем. Такім чынам, як дызайнер змяняе працоўны працэс з фіксаванага памеру палатна на вадкі?
Абстрактныя дызайны з прылад у самым пачатку
Калі мы не распрацоўваем канкрэтную прыладу, вельмі важна, каб мы перасталі думаць пра прылады і пачалі думаць пра досвед. Усе наступныя метады дапамагаюць дызайнерам ствараць свой вопыт, маючы магчымасць захоўваць агностыку прылады (да пэўнай ступені).
Выкарыстоўвайце стыль
Выкарыстоўвайце стыльныя пліткі, каб усталяваць кірунак і хутка ітэраваць. Стыльныя пліткі дазваляюць дызайнеру вызначыць кірунак дызайнерскай сістэмы, не атрымліваючы занадта канкрэтных слоў. Іх стваральнік Саманта Уорэн апісвае іх так:
«Стылёвая плітка прызначана для тых выпадкаў, калі дошка для настрою занадта расплывістая, а камп’ютэр занадта літаральны. Стыль-пліткі ўсталёўваюць прамую сувязь з рэальнымі элементамі інтэрфейсу, не вызначаючы макет ».
Стварэнне гармоніі інтэрфейсу
Уявіце сабе палатно, дзе сабраны ўсе візуальныя і інтэрактыўныя элементы. Не для таго, каб убачыць пэўны макет карыстацкага інтэрфейсу, а для таго, каб убачыць, як усе элементы працуюць разам. Гэта палатно гармоніі інтэрфейсу. Палатно гармоніі інтэрфейсу дазваляе дызайнеру захоўваць ідэі разам, але не арыентуючыся на нейкі памер экрана. Акрамя таго, гэта выдатны спосаб эфектыўнага зносін і дакументавання распрацаваных элементаў, а не поўнае кіраўніцтва па стылі.
Калі вам цікава чытаць далей, тут і тут можна знайсці два выдатныя артыкулы на тэму гармоніі інтэрфейсу.
Прагледзець усё ў браўзэры
Усё трэба сабраць у браўзэры. Тут сапраўды ажывае дызайн карыстацкага інтэрфейсу. Бачыць, як рэальны змест узаемадзейнічае з візуальнымі элементамі, мае вырашальнае значэнне. Гэта немагчыма зрабіць правільна ў статычным асяроддзі. Трэба паглядзець, як гэта адгукнецца ў роднай асяроддзі.
Навядзіце баланс пры дапамозе статычных праграм
Паміж браўзэрам і статычнымі праграмамі, такімі як Photoshop, існуе паток. Павінен быць баланс, які дазваляе ствараць дызайнерскую сістэму вадкасцю і натуральнасцю. Вядома, гэта адбудзецца ў Photoshop, але дызайнеру, які займаецца дызайнам, неабходна навучыцца творча думаць і ў браўзэры.
Выснова
Яшчэ раз, з пачуццямі: пачніце з "чаму", з добра структураванага зместу і ўзаемадзеянняў, якія важныя. У першую чаргу засяродзьцеся на маленькім экране і малой прапускной здольнасці, і паступова ўдасканальвайце свае спагадныя канцэпцыі. Наш медыум паўналетні. У нас ёсць шанец зрабіць усё правільна і змяніць свет, адзін веб-праект за адзін раз.
Адкрыйце для сябе лепшыя 20 інструментаў для абрамлення каркаса для дызайнераў
Стыў Фішэр каардынуе даследаванні, аналіз, дызайн і стратэгію ў Yellow Pencil у Канадзе і выступае на такія тэмы, як RWD, UX і адкрыты зыходны код. Ален Макензі - стратэг па змесце ў Yellow Pencil.
