Мазмун
- Жооптуу методология
- Мазмунду биринчи кезекте кантип сактайм?
- Неге?
- 01. Бизнес жана колдонуучу максаттарыңызды аныктаңыз
- 02. Ар бир мүмкүнчүлүктө аларга кайрылыңыз
- 03. Артка түртүүдөн коркпоңуз
- 04. Өз командаңызды да түртүп алыңыз
- 05. Мазмунуңуздун бардыгын алдын-ала аныктаңыз
- Презентациядан мазмунду кантип абстракттоого болот?
- Мазмун жөнүндө макет жөнүндө ойлоону токтотушубуз керек
- Кардарларыңызды алардын дизайнын көз карандысыз пландоого мажбур кылыңыз
- Дизайн алдында мазмунуңузду аягына чейин чыгарыңыз
- Чыныгы мазмунун колдонуу - ар бир жолу
- Ошентип, сим-кадрлар жооптуу дизайн долбоорлорунда кандайча иштешет?
- Эскиздөө
- Браузердин алкагы
- Аннотациялар
- Вирфреймдерде чыныгы мазмунду колдонуңуз
- Алгач кичинекей экрандарга кантип дизайн жасайм?
- Башында түзмөктөрдөн абстрактуу дизайн
- Style Tiles колдонуу
- Интерфейстин гармониясын түзүү
- Бардыгын браузерден көрүңүз
- Статикалык программалар менен тең салмактуулукту орнотуңуз
- Корутунду
Келгиле, ачык айтайын: дизайн, эгерде ал маселелердин тереңинде, бардык нерсенин артында эмне үчүн иштелип чыкса гана чечим болот. Катуу процесс ар дайым биздин ишибизге жетекчилик кылышы керек, бирок биз ийкемдүү нерсени кабыл алышыбыз керек. Акырында өзүбүздүн ортобуз суюктук экендигин далилдеди, андыктан биздин процессибиз туура эмеспи? Тутумдун дизайны жөнүндө ойлонуп көрсөңүз: сүрөттү толугу менен жана майда-чүйдө деталдарга чейин көрүү керек. Мүмкүн эмес? Андан алыс!
Фрэнк Чимеро “Дизайн формасы” аттуу китебинде ушуну сонун айткан: “Сүрөтчүнүн чыгармачылыгына жаңы көз караш менен ээ болуу үчүн мольберттен артка чегинген бөлүгү бар. Сүрөт жакынкы жана алыскы бөлүктөргө тең келет: жакын турганда сүрөтчү өзүнүн изин калтыруу үчүн талыкпай эмгектенет; алыс болгондо, ал анын сапаттарын талдоо максатында ишти баалайт. Ал чыгарма аны менен сүйлөшүп алышы үчүн артка кадам таштайт ».
Биздин ишибизге, ортобузга биз менен сүйлөшүүгө уруксат беришибиз керек. Ыкчам дизайндын көтөрүлүшү менен, биз акырында биздин чөйрөбүздү кучактайбыз: ал суюктук. Артка чегинүү жана ишти баалоо, анализдөө жана иштин жаңы ыкмасын, жаңы процессти өздөштүрүү үчүн эң сонун мезгил келди. Кодду түшүнбөгөн статикалык макеттердин жана веб-дизайнерлердин заманы артта калды. Жооптуу процесстин убактысы келди.
Жооптуу методология
Ушул макаланын башында катуу процесстин чоң сырын бермекчибиз. Себеби биз ушундай жинди болуп жатабыз. Даярсызбы? Жооптуу процесс - бул жооптуу процесс. Vague? Болушу мүмкүн. Акылсызбы? Жок. Желедеги стандарттардын кыймылына окшоп, жооптуу дизайн келечектеги достук ыкмалар менен вебди алдыга жылдырууда.
Ар кандай долбоорлоо процесси сыяктуу эле, мунун бардыгынын артында "эмне үчүн" көңүл буруу керек. Анда эмне үчүн веб-сайттар бар? Мазмунду жеткирүү. Бул тапшырмага негизделген, социалдык, маалыматтык болушу мүмкүн ... мааниге ээ эмес. Бардыгы ушундан келип чыгат: эмне үчүн, жакшы түзүлгөн структурадан жана маанилүү болгон өз ара аракеттенүүдөн баштаңыз.
Бул жерде биздин жооптуу дизайн жараяны жөнүндө көп уга турган суроолор бар.
Мазмунду биринчи кезекте кантип сактайм?
Долбоор башталганда баарыбыз ушунчалык оптимисттик көз караштабыз. "Адегенде мазмун!" Биз айтабыз. “Колдонуучунун максаттары! Маанилүү нерсени эсиңизден чыгарбаңыз! ” Бул чындык. Бирок бул эмнени билдирет? Мазмунду биринчи процессти кантип ишке ашырасыз?
Сиз билсеңиз да (же билем деп ойлойм), долбоор жүрүп жатканда унутуу оңой. Узак мөөнөттүү долбоорлор созулуп кетүү тенденциясына ээ (жана ... жана андан кийин ...). Эмнеге болгонун ойлонуудан баш тартып, кандайча көңүл бура баштайбыз. Биздин долбоорлорду өзүнчө "ачылыш" жана "өнүгүү" фазаларына бөлүп, өз алдынча жашай алабыз деп ойлойбуз.
Чындык, биз ар дайым эмне үчүн деп сурай беришибиз керек. Канчалык билсеңиз да, канчалык пландаштырсаңыз дагы - чечим кабыл алган сайын, баскычты иштеп чыккан сайын же аталышын жазганда, сурашыңыз керек ...
Неге?
Мен муну эмне үчүн кылып жатам? Бул ким үчүн? Бул менин кардарыма кандай бизнес максатка жетүүгө жардам берет? Менин колдонуучуларыма кайрылууга кандай жардам керек? Биринчи эле мазмунду сактап калбаңыз. Эмнеге биринчиден сактаңыз.
Бул оңой угулат. Бирок муну жакшы жасаш үчүн, түртүш керек болот. Биринчи кезекте эмне үчүн экендигин аныктоо үчүн кардарларыңызды жана командаңызды түртүп салыңыз. Жок, Лорем Ипсум, жок "буга кийинчерээк жетебиз". Үй тапшырмасын аткар! Сиздин бардык Hows эмне үчүн бекем баштоо керек. Yellow Pencil компаниясында бул долбоорлорду тандап алуу, баалоо, бюджетти түзүү жана пландаштыруу жолундагы чоң өзгөрүүлөрдү билдирет. Биз катуу изилдөө, стратегия жана пландаштыруу үчүн бюджетти жана убакытты талап кылганбыз. Сиз дагы мүмкүн. Бирок сиздин кардарларыңыз жана сиздин командаңыз мазмунду аныктоонун эбегейсиз зор артыкчылыктарын көрүп, алар эч качан артка кайрылышпайт.
Аларды тарбиялоо биздин милдетибиз. (Кардарлар менен иштөө жөнүндө көбүрөөк билгиңиз келсе, Майк Монтейронун Дизайн - бул Жумуш деген мыкты китебин окуп чыгыңыз.) Кардарлар ошол изилдөөлөрдүн бардыгын жана алдыда иштөөнүн маанилүүлүгүн түшүнүү кыйынга турушу мүмкүн. Алар эмне үчүн керек? Алар аягында эч нерсе ‘бүтпөйт’ - жана алар көбүнчө эсеп-фактура жана чоң ol ’Word документин алышат.
Бул алардын күнөөсү эмес - бул биздин күнөөбүз. Ошол баалуулукту көрсөтүү үчүн жакшыраак иш алып баруу биздин милдет. Ар бир кадам сайын, биз анын бардыгын маанилүү болгон нерсеге кайтарышыбыз керек.
Бул сезгич дизайн үчүн өзгөчө маанилүү. Жооптуу веб-сайт иштеп чыгууну талап кылбайт, бирок пландаштырууну билдирет. Чындыгында болсо да, биз бардык убакыт бою жасашыбыз керек болчу деп пландап жатат. Учурдагы ар бир үч жылда бир жасала турган долбоордун циклине күбө болуңуз. Ушуну уланта бергиңиз келеби? Биз ишенбейбиз.
Ошентип, долбоорду ишке ашырууда биринчи кезекте мазмунду сактоого үч кадам бар.
01. Бизнес жана колдонуучу максаттарыңызды аныктаңыз
Долбооруңуз үчүн бизнес жана колдонуучу максаттарынын артыкчылыктуу тизмесин түзүңүз. Сиздин колдонуучулар көбүнчө эмнени билгиси келет же эмне кылышат? Изилдөө жүргүзүңүз. Жапайы божомолдорду эмес, маалыматтуу корутундуларды жасаңыз. Бардык кызыкдар тараптарды макулдугун алыңыз.
02. Ар бир мүмкүнчүлүктө аларга кайрылыңыз
Чечим кабыл алган сайын, кимдир бирөө жаңы өзгөчөлүктү же дизайн элементин, же мазмундун барагын сунуш кылган сайын, алардан сурамды бизнеске жана колдонуучунун максатына ылайыкташтырыңыз. Бул функция кандай чыныгы муктаждыкты канааттандырат? Чыныгы себеби эмнеде? (Ишара: "Анткени мен каалайм" же "Мага чындыгында көк жакты" же "Фейсбукта бардыгы" эсепке алынбайт.)
03. Артка түртүүдөн коркпоңуз
Бул катуу болушу мүмкүн. Кардарлардын мамилеси назик болушу мүмкүн жана согушта жеңишке жетүү үчүн согуштан баш тартууга азгырылышы мүмкүн. Бирок, эсиңизде болсун, биз баарыбыз ушул нерсебиз! Бул бизнеске каршы колдонуучу эмес; биз менен аларга.
Колдонуучулардын муктаждыктарын канааттандыруу - бул бизнес муктаждыктарын канааттандыруунун мыкты жолу. Себеби биздин колдонуучуларсыз, бизде бизнес жок! Кардарлар (жакшы кардарлар) сизди баарына "ооба" деп айтууга чакырышкан жок. Демек, эгер кардарыңыз алардын максаттарына же колдонуучуларынын муктаждыктарына жооп бербей турган нерсени сураса, аларга каршы чыгуудан коркпоңуз. Кеп напсиге байланыштуу эмес. Бул мүмкүн болгон мыкты чечимди түзүү жөнүндө.
04. Өз командаңызды да түртүп алыңыз
Бул чыгармачыл топтун ичинде иштөөдө дагы кыйынчылыктарды жаратышы мүмкүн. Ролдорду бөлүү - визуалдык дизайн, колдонуучунун тажрыйбасы, маалымат архитектурасы, контент стратегиясы, контентти өндүрүү - туура эмес байланышка алып келиши мүмкүн. Биз бошобой, электрондук почталарга чөмүлүп калабыз. Башынан аягына чейин долбоор менен калуу кыйын, айрыкча ‘сиздин’ ишиңиз бүткөндөн кийин.
Сиздин командаңыздын мамилеси, жок эле дегенде, кардарлар менен болгон мамилеңиз сыяктуу эле маанилүү. Биз эмне үчүн кардарларыбыз сыяктуу эле, өзүбүздүн эсибизге салышыбыз керек. Кызматташуу маанилүү. Мазмундук планды, сим-кадрларды же дизайндарды жөн эле ‘өткөрүп бере албайсыз. Мүмкүн болушунча кол кармашып иштешибиз керек. Жеткирилген нерсени ‘бүтүрүп’, башка нерсеге өтүү оңой. Кыйынчылыктар жаралганда, долбоор менен калуу бир топ кыйыныраак.
Шаркыратманын чыгармачыл ишине болгон мамилеси жөн эле иштебейт. Топтун мүчөлөрүнүн ортосундагы шамдагай, биргелешкен иш жакшы натыйжаларды берет.
05. Мазмунуңуздун бардыгын алдын-ала аныктаңыз
Бул жерде бир нерсе бар: жооп берүүчү веб-сайттарды пландаштыруу узак убакытты талап кылат. Биз эми бир эле контекстти пландаштырып жаткан жокпуз. Биз азыр билген, кээ бирлери али жок болгон бардык жагдайларды пландап жатабыз.
Бирок ошол татаалдыктарды алдын-ала пландаштыруу үчүн, өзүңүз эске албаган өзгөчөлүктөрдү жана функцияларды калыбына келтирүүгө караганда, бир аз убакыт талап кылынат. Ошентип, убакытты / күчтү / бюджетиңизди сарптаңыз. Дизайнга киришүүдөн мурун, кардарларыңызды жана командаңызды алардын бардык мазмунун аныктоого (жана милдеттендирүүгө!) Аргасыз кылыңыз. Баракча таблицаларын колдонуңуз. Структураланган мазмунду колдонуңуз. Мазмунуңузду келечекти тастыктайлы! Же кийинчерээк ыйлагыла.
Презентациядан мазмунду кантип абстракттоого болот?
Муну интернет-чөйрөсүнөн көп угасыз. Бирок күтө тур, эмне? Жана күтүү - эмне үчүн?
Себеби презентация өзгөрүшү мүмкүн (жана болот). 15 жыл мурун веб-сайттарды кандайча иштеп чыккандыгыбыз, аларды азыр кандайча сунуштап жатканыбыздан дээрлик таанылгыс болуп калды. Бирок эмне өзгөрбөгөнүн билесиңби? Сөздөр. Биз дагы деле колдонобуз. Интернет негизинен (текстке негизделген) контент үчүн бар. Аны дагы деле болсо маалыматтык көйгөйлөрдү чечүүдө колдонобуз; тапшырмаларды аткаруу. Бирок сиздин мазмунуңуз презентация каражаттарынан көз каранды болсо (Flash кириш баракчалары, кимдир бирөө?) Чындыгында, ал бир нече жылдан кийин колдонулбай калат. Жана ал.
Мазмун жөнүндө макет жөнүндө ойлоону токтотушубуз керек
Биз (тармак катары) кардарларыбызды мазмунду макет боюнча ойлонууга үйрөттүк. "Каптал тилкесине салып кой" деп жатабыз. "Бул колонтитулга кириши керек." Токто! Токтот. Токтот. Бул жерде жайгашкан жери жөнүндө эмес. Бул приоритет жөнүндө. Колдонуучуларыңыз үчүн эң маанилүү мазмун кайсы? Себеби эмне деп ойлойсуз: макет контекстте өзгөрөт. Ал жерде (балким) сиздин кичинекей экрандын дизайны боюнча каптал тилкеси болбойт.
Сиздин кардарыңыз каалаган ири супер менюбу? Айфон менен учпайм.
Кардарларыңызды алардын дизайнын көз карандысыз пландоого мажбур кылыңыз
Макул, аларды мажбурлоонун кажети жок. Аларды бекемде. Күчтүү үндө. Бул үчүн баракчалардын таблицалары сонун. Эгер сиз аны окуй элек болсоңуз, анда аларды кандайча түзүү керектиги жөнүндө көбүрөөк маалымат алуу үчүн дароо Кристина Халворсон жана Мелисса Рачтын Интернеттеги Мазмун Стратегиясына өтүңүз. Аларды артыкчылыктуу тартипте уюштуруу. Жайгашкан жерди же схеманы көрсөтпөңүз. Бул сиздин кардарларыңызга алардын мазмуну жөнүндө жемиштүү ой жүгүртүүгө жардам берет, ошондой эле акыркы сим-кадрлар же дизайндар иштелип чыкканга чейин, контент түзүү процессин жылдырат.
Дизайн алдында мазмунуңузду аягына чейин чыгарыңыз
Макул, бул дайыма эле мүмкүн боло бербейт. Дизайнды баштоодон мурун канчалык белгисиздикти жоюп салсаңыз, ошончолук артка кайтып, кийинчерээк өзгөртө аласыз.
Чыныгы мазмунун колдонуу - ар бир жолу
Мүмкүн болсо, чоң көлөмдөгү контентти колдонуңуз - кардарларыңызга эң татаал баракчаларды, сүрөттөрдү жана менюларды көрсөтүңүз. Кийинчерээк, алар даяр продукциядагы эң чуулгандуу камтылгандарды көрүп, күтүлбөгөн окуялардан сактайт.
Функционалдык, браузердеги зым кадрлар айырмачылыктарды жаратат. Кардарларыңызга экрандын көлөмү боюнча алардын мазмунун жылып жана өзгөрүп жаткандыгын байкоого уруксат бериңиз. Вирфреймдерди тартуулап жатканда көрсөтүңүз (жеке презентацияларды өткөрүп жатасыз, туурабы?) Аларга экрандын чоңдугу боюнча алардын маалыматынын артыкчылыгы бирдей болуп, макети өзгөрүлүп жаткандыгын көрсөтүңүз.
Ошентип, сим-кадрлар жооптуу дизайн долбоорлорунда кандайча иштешет?
Биз RWD үчүн өз ара аракеттенүү дизайны браузерге тез жана тез-тез кирип турушу керек деп ишенебиз. Бардыгын сүрөттөй турган статикалык документти түзүү дээрлик мүмкүн эмес. Албетте, биз үч, төрт же беш тыныгуу пунктун көрсөткөн документ түзө алмакпыз, бирок бул окуянын бир аз гана бөлүгү. Чекит чекиттеринин ортосундагы бардык учурлар жөнүндө эмне айтууга болот? Бул браузерде болот.
Эскиздөө
Ошентсе да, өз идеяларыңызды биргелешип тез арада чиймелей алганыңыз жакшы. Бул кандайдыр бир белгилүү бир чөйрөдө болушу керек эмес, бирок кагазда карандаш жөнүндө бир нерсе бар. Бул жерде кеп идеяларды тез жана кайталап чыгаруу болуп саналат. Мүмкүн болушунча скетчбордду жакшы көрөбүз жана ал үчүн колдонмо дагы бар: UI Sketcher.
Браузердин алкагы
Мына биз үчүн чыныгы билет. Браузерде RWD көрсөткөндө биз үлгүлөрдү жана тутумдарды кайрадан колдонууну жакшы көрөбүз. Албетте, биз ар бир жолу өз системабызды нөлдөн баштап түзө алмакпыз, бирок бул бизге же биздин кардарларга жардам бербейт.
Биз ошондой эле Twitter'дин Bootstrap же Zurb's Foundation сыяктуу тез жооп берүүчү прототиптөө алкактарын колдонгубуз келет. Биз жеке өзүбүздүн фондубузга ыктайбыз, анткени ал биздин иштөө агымына туура келет. Экөө тең кичинекей экрандуу, өткөрмө жөндөмдүүлүгү төмөн биринчи ыкманы колдонсо жакшы болмок, бирок биз ушинтип тоголонуп отурабыз.
Аннотациялар
RWD сым кадрларына аннотациялар керек, бирок биз байкайбыз, көп учурда көз жаздымда калат. Катуу сүйлө: документ, документ, документ! Биз буга досторубуздан бир нече мисалдарды көрдүк жана жюри дагы деле болсо браузердеги жооптуу wireframeлерге аннотациялоо үчүн эң мыкты ыкманы колдонуп жатат деп ойлойбуз. Жогоруда айтылгандай, биз Foundation by Zurb программасын үзгүлтүксүз колдонобуз жана аннотацияларыбызды көрсөтүү үчүн анын Reveal кошумчасын колдонууну жактырабыз. Бул аннотациялар чоңураак экрандарда гана пайда болот жана идеалдуу күйгүзүп-өчүрсө болот.
Вирфреймдерде чыныгы мазмунду колдонуңуз
Лорем Ипсумдун айланасында сым кадрлары жана дизайн макеттери боюнча көптөгөн талаш-тартыштар болду, бирок эгер сизде кадрлардын чыныгы мазмуну жок болсо, анда сиз аны туура эмес кылып жатасыз. Мазмун өз ара аракеттенүү чечимдерин билдирет жана дизайн качан бузула тургандыгын билдирет. Кантип Лорем Ипсум муну кыла алат?
Алгач кичинекей экрандарга кантип дизайн жасайм?
Көп жылдар бою биз белгилүү бир чечимди эске алуу менен иштеп чыктык. Бул демейки жөндөө болгон. Ноутбуктарда эскиздерди тартуу, OmniGraffleде wireframing, Photoshopто иштөө же браузерде долбоорлоо, биз полотнонун көлөмү кандай болорун билчүбүз. Ал күндөр өттү. Биз биринчи кезекте кичинекей экранды иштеп чыгууга жана барган сайын өркүндөтүүгө абдан ишенебиз. Ошентип, дизайнер өзүнүн иш процессин туруктуу кенептин көлөмүнөн суюктукка кантип өзгөртө алат?
Башында түзмөктөрдөн абстрактуу дизайн
Эгерде биз белгилүү бир шайманды ойлоп таппасак, анда аппараттар жөнүндө ойлонуп, тажрыйба жөнүндө ойлоно башташыбыз керек. Төмөнкү ыкмалардын бардыгы дизайнерлерге тажрыйбаларын өркүндөтүүгө жардам берет, ошол эле учурда түзмөктүн агностикалык абалын сактап кала алышат (бир чекитке чейин).
Style Tiles колдонуу
Багыттаманы орнотуу жана тез кайталоо үчүн Style Tiles колдонуңуз. Style Tiles дизайнерге дизайн системасынын багытын өтө так көрсөтпөстөн аныктай алат. Алардын жаратуучусу Саманта Уоррен аларды мындайча сүрөттөйт:
“Style Tiles - бул маанайборд өтө эле бүдөмүк болуп, ал эми түзмөктө сөзмө-сөз берилгенде. Style Tiles түзүмүн аныктабастан, иш жүзүндө интерфейс элементтери менен түздөн-түз байланыш орнотот. ”
Интерфейстин гармониясын түзүү
Бардык визуалдык жана интерактивдүү элементтер бириктирилген холстту элестетип көрсөңүз. Белгилүү бир UI макетин көрүү үчүн эмес, бардык элементтердин кантип иштешин көрүү үчүн. Бул интерфейстин гармониялык полотносу. Интерфейстин шайкештик полотносу дизайнерге идеяларды бириктирип турууга мүмкүнчүлүк берет, бирок бир гана экран өлчөмүнө багытталбайт. Мындан тышкары, бул толук стилдеги колдонмону чыгаруунун ордуна, иштелип чыккан элементтерди натыйжалуу баарлашуунун жана документтештирүүнүн мыкты жолу.
Эгер сиз андан ары окууга кызыкдар болсоңуз, анда интерфейстин гармониясы боюнча эки мыкты макаланы ушул жерден жана бул жерден таба аласыз.
Бардыгын браузерден көрүңүз
Баарын браузерге чогултуу керек. Бул жерде UI дизайны чындыгында жашайт. Чыныгы мазмундун визуалдык элементтер менен өз ара байланышын көрүү өтө маанилүү. Статикалык чөйрөдө муну туура жасоонун эч кандай жолу жок. Сиз анын эне чөйрөсүндө кандай жооп берерин көрүшүңүз керек.
Статикалык программалар менен тең салмактуулукту орнотуңуз
Браузер менен Photoshop сыяктуу статикалык программалардын ортосунда агым бар. Дизайн системасын суюк жана табигый жол менен түзүүгө мүмкүндүк берген тең салмактуулук болушу керек. Албетте, бул Photoshopто болот, бирок дизайнер дизайнер браузерде да чыгармачыл ойлонууну үйрөнүшү керек.
Корутунду
Дагы бир жолу, сезим менен: эмне үчүн керектигин, жакшы түзүлгөн структуралык мазмундан жана өз ара аракеттенүүдөн баштаңыз. Алгач кичинекей экранга жана өткөрмө жөндөмдүүлүгүңүзгө көңүл буруп, сиздин концепцияңызды акырындык менен өркүндөтүңүз. Биздин орто жашыбыздан өтүп баратат. Бизде бир нерсени туура жүргүзүп, дүйнөнү өзгөртүү мүмкүнчүлүгү бар, бирден бир веб-долбоор.
Дизайнерлер үчүн эң мыкты 20 сим-рамка куралын табыңыз
Стив Фишер Канададагы Yellow Pencil изилдөө, талдоо, дизайн жана стратегияны координациялайт жана RWD, UX жана ачык булак сыяктуу темаларда сүйлөйт. Алейн Маккензи - Yellow Pencil компаниясынын контент-стратегу.
