Мазмұны
- Сезімтал әдістеме
- Алдымен мазмұнды қалай сақтаймын?
- Неліктен?
- 01. Сіздің бизнес және пайдаланушы мақсаттарыңызды анықтаңыз
- 02. Сізге кез келген мүмкіндікке сілтеме жасаңыз
- 03. Артқа қарай итеруден қорықпаңыз
- 04. Өз командаңызды да итеріңіз
- 05. Барлық мазмұнды алдын-ала анықтаңыз
- Презентациядан мазмұнды қалай абстракттауға болады?
- Мазмұнды жоспарлау тұрғысынан ойлауды тоқтату керек
- Клиенттеріңізді олардың мазмұнын дизайннан тәуелсіз жоспарлауға мәжбүр етіңіз
- Мазмұнды жобалаудан бұрын аяқтаңыз
- Нақты мазмұнды қолданыңыз - әр уақытта
- Сымсыз кадрлар жауап беретін дизайнерлік жобалар үшін қалай жұмыс істейді?
- Нобай салу
- Браузердің шеңбері
- Аннотация
- Сымсыз кадрларда нақты мазмұнды қолданыңыз
- Алдымен кішігірім экрандарға қалай дизайн жасаймын?
- Бастапқыда құрылғылардан жасалған абстрактілі дизайн
- Стиль плиткаларын қолданыңыз
- Интерфейс үндестігін жасаңыз
- Браузерде бәрін қарау
- Статикалық бағдарламалармен тепе-теңдік орнатыңыз
- Қорытынды
Айқын болайық: дизайн - бұл шешілетін мәселе, егер ол терең мәселелерге назар аударса, неге бәрінің артында. Қатты процесс біздің жұмысымызды әрдайым басқаруы керек, бірақ біз икемді нәрсені қабылдауымыз керек. Біздің орта ақыр соңында өзін сұйық екенін дәлелдеді, солай емес пе? Жүйенің дизайны туралы ойланыңыз: сізге суретті де, ұсақ бөлшектерді де көру керек. Мүмкін емес? Алыс!
Фрэнк Чимеро өзінің «Дизайн формасы» деген кітабында: «Суретшінің шығармаға жаңа көзқараспен қарау үшін мольберттен шегінетін бөлігі бар. Кескіндеме - бұл жақын және алыс бөліктердегі тең бөліктер: жақын болған кезде суретші өз ізін қалдыру үшін көп жұмыс істейді; алыс болған кезде, ол оның сапасын талдау үшін жұмысты бағалайды. Ол шығарманың оған сөйлеуі үшін кері шегінеді ».
Біздің жұмысымызға, біздің ортаға бізбен сөйлесуіне мүмкіндік беруіміз керек. Жауапты дизайнның жоғарылауымен біз ақырында біздің ортаны қабылдаймыз, ол келесідей болды: сұйық. Бұл артқа шегінуге және жұмысты бағалауға, талдауға және істің жаңа тәсілін, жаңа процесті қабылдауға керемет уақыт. Кодты түсінбейтін статикалық макеттер мен веб-дизайнерлердің заманы өтті. Жауапты процестің уақыты келді.
Сезімтал әдістеме
Біз мақаланың басында қатты процестің үлкен құпиясын береміз. Себебі біз осылай ессізбіз. Дайынсыз ба? Жауапты процесс - бұл жауапты процесс. Анық емес пе? Мүмкін. Ақымақ? Жоқ. Оның алдындағы веб-стандарттар қозғалысы сияқты, жауап беретін дизайн болашақта қолайлы әдістермен вебті алға шығарады.
Кез-келген дизайн процесі сияқты, мұның барлығында «неге» назар аудару керек. Сонымен, неге веб-сайттар бар? Мазмұнды жеткізу. Бұл тапсырмаға негізделген, әлеуметтік, ақпараттық болуы мүмкін ... маңызды емес. Барлығы осыған келіп тіреледі: неге, жақсы құрылымдалған мазмұннан және маңызды өзара әрекеттесуден бастаңыз.
Міне, біздің жауап беру процесі туралы жиі еститін сұрақтар.
Алдымен мазмұнды қалай сақтаймын?
Жобаның басталуында бәріміз оптимистпіз. «Алдымен мазмұн!» біз айтамыз. «Пайдаланушы мақсаттары! Ненің маңызды екенін ұмытпаңыз! » Бұл рас. Бірақ бұл нені білдіреді? Алғашқы мазмұнды қалай жүзеге асырасыз?
Сіз білсеңіз де (немесе білемін деп ойласаңыз), жоба жүріп жатқан кезде ұмытып кету оңай. Ұзақ мерзімді жобалар ұзаққа созылу үрдісіне ие (және ... және одан ...). Біз неге екені туралы ойлауды тоқтатып, қалай екеніне назар аудара бастаймыз. Біз өз жобаларымызды жеке «ашылу» және «даму» фазаларына бөлуге болады деп өзімізді алдаймыз.
Шынында, біз әрдайым не үшін сұрай беруіміз керек. Сіз қанша білесіз деп ойласаңыз да, қанша жоспарласаңыз да - шешім қабылдаған сайын, батырманы безендіргенде немесе тақырып жазған сайын сізден сұрау керек ...
Неліктен?
Мен мұны неге істеймін? Бұл кім үшін? Бұл менің клиентіме қандай іскерлік мақсатқа жетуге көмектеседі? Бұл менің пайдаланушыларыма қандай қажеттілікке көмектеседі? Алдымен мазмұнды сақтамаңыз. Бірінші неге екенін сақтаңыз.
Бұл оңай естіледі. Бірақ мұны жақсы орындау үшін сізге итермелеу керек болады. Алдымен олардың себептерін анықтау үшін өз клиенттеріңізді және командаңызды итеріңіз. Жоқ Лорем Ипсум, жоқ ‘біз бұған кейінірек жетеміз’. Үй тапсырмасын орында! Сіздің барлық қадамдарыңыз неліктен бастау керек. Сары қарындашта бұл жобаларды жоспарлау, бағалау, жоспарлау және жоспарлау тәсілдеріне үлкен өзгерістер енгізу керек дегенді білдірді. Біз сенімді зерттеулер, стратегия және жоспарлау үшін бюджет пен уақытты бөлуге мәжбүр болдық. Сіз де мүмкін. Бірақ сіздің клиенттеріңіз бен сіздің топтарыңыз мазмұнды анықтаудың орасан зор пайдасын көргенде, олар ешқашан артқа қарамайды.
Оларды тәрбиелеу біздің міндетіміз. (Егер сіз клиенттермен қарым-қатынас жасау туралы көбірек білгіңіз келсе, Майк Монтейроның «Дизайн - бұл жұмыс» деген керемет кітабын оқыңыз.) Клиенттерге барлық осы зерттеулерді жүргізудің және алдын-ала жұмыс істеудің құндылығын түсіну қиынға соғады. Неге олар керек? Соңында олар ‘аяқталған’ ештеңе алмайды - және көбіне олар тек шот-фактура мен үлкен құжатты алады.
Бұл олардың кінәсі емес - бұл біздің кінәміз. Біздің құндылығымыз осы құнды көрсету үшін жақсырақ жұмыс жасау. Әрбір қадам сайын біз мұның бәрін маңызды неге қайтаруымыз керек.
Бұл әсіресе жауапты дизайн үшін өте маңызды. Жауапты веб-сайт әзірлеу үшін көп күш жұмсауды қажет етпейді, бірақ жоспарлауды білдіреді. Шынында да, біз барлық уақытта істеу керек деп жоспарлап отырмыз. Ағымдағы қайта жобалаудың үш-үш жыл сайынғы циклына куә болыңыз. Осылай жасай бергіңіз келе ме? Әрине, жоқ.
Сонымен, жобаның мазмұнын бірінші ұстауға арналған үш қадам бар.
01. Сіздің бизнес және пайдаланушы мақсаттарыңызды анықтаңыз
Сіздің жобаңызға арналған бизнес және пайдаланушы мақсаттарының басым тізімін жасаңыз. Сіздің қолданушыларыңыз не көбірек білгісі келеді немесе жасағысы келеді? Зерттеулеріңізді жасаңыз. Қатерлі болжамдар емес, ақпаратпен қорытынды жасаңыз. Барлық мүдделі тараптарды келісуге шақырыңыз.
02. Сізге кез келген мүмкіндікке сілтеме жасаңыз
Шешім қабылдаған сайын, біреу жаңа функция немесе дизайн элементін немесе мазмұн бетін ұсынған сайын, оларды сұранысты бизнес пен пайдаланушының мақсатына сәйкестендіруге мәжбүр етіңіз. Бұл функция нақты қандай қажеттілікті қанағаттандырады? Шынайы себеп неде? (Нұсқау: ‘Өйткені мен қалаймын’ немесе ‘маған көк өте ұнайды’ немесе ‘Facebook-тағы барлығы’ есепке алынбайды.)
03. Артқа қарай итеруден қорықпаңыз
Бұл қатал болуы мүмкін. Клиенттермен қарым-қатынас нәзік болуы мүмкін және соғысты жеңу үшін шайқастан бас тартуға азғыруы мүмкін. Бірақ есіңізде болсын, біз бәріміз бірге! Бұл қолданушыға қарсы іскерлік емес; біз оларға қарсы.
Пайдаланушылардың қажеттіліктерін қанағаттандыру - бұл бизнес қажеттіліктерін қанағаттандырудың ең жақсы тәсілі. Біздің қолданушыларсыз бізде бизнес жоқ! Клиенттер (жақсы клиенттер) сізді бәріне «иә» деп айтуға шақырмайды. Сондықтан сіздің клиентіңіз өз мақсаттарына немесе пайдаланушылардың қажеттіліктеріне сәйкес келмейтін нәрсе сұраса, оларға қарсы тұрудан қорықпаңыз. Бұл эго туралы емес. Бұл мүмкін болатын ең жақсы шешімді жасау туралы.
04. Өз командаңызды да итеріңіз
Бұл шығармашылық топта жұмыс істеу кезінде қиындық тудыруы мүмкін. Рөлдерді бөлу - көрнекі дизайн, пайдаланушының тәжірибесі, ақпараттық архитектура, мазмұн стратегиясы, мазмұнды өндіру - қате байланысқа әкелуі мүмкін. Біз бос емеспіз, электронды пошта арқылы басымыз қатады. Жобаны басынан аяғына дейін ұстау қиын, әсіресе «сіздің» жұмысыңыз аяқталғаннан кейін.
Сіздің командаңыздың қарым-қатынасы, кем дегенде, сіздің клиенттің қарым-қатынасы сияқты маңызды. Неліктен біз өз клиенттеріміз сияқты өзімізді еске түсіруіміз керек. Ынтымақтастық маңызды. Сіз контент жоспарын, сымсыз кадрларды немесе дизайндарды жай ғана тапсыра алмайсыз. Мүмкіндігінше біз қоян-қолтық жұмыс жасауымыз керек. Жеткілікті «аяқтау» және басқа нәрсеге көшу оңай. Қиын болған кезде жобамен бірге болу әлдеқайда қиын.
Шығармашылық жұмысқа сарқырама тәсілі нәтиже бермейді. Топ мүшелері арасындағы ептілік, бірлескен жұмыс жақсы нәтижелерге қол жеткізеді.
05. Барлық мазмұнды алдын-ала анықтаңыз
Міне, мәселе: жауап беретін веб-сайттарды жоспарлау ұзаққа созылады. Біз енді тек бір контексті жоспарлап қоймаймыз. Біз қазір білетін, ал кейбіреулері әлі жоқ барлық контексттерді жоспарлап отырмыз.
Алдыңғы жағынан барлық осы қиындықтарды жоспарлау үшін артқа қайтуға және сіз ескермеген функциялар мен функцияларды жаңартуға қарағанда аз уақыт кетеді. Сондықтан уақытты / күш-жігерді / бюджетті жұмсаңыз. Дизайнға кіріспес бұрын сіздің клиенттеріңіз бен командаңызды олардың барлық мазмұнын анықтауға (және міндеттеңіз!) Мәжбүр етіңіз. Бет кестелерін қолданыңыз. Құрылымдық мазмұнды қолданыңыз. Мазмұныңызды болашаққа дәл қазір! Немесе кейінірек жылаңыз.
Презентациядан мазмұнды қалай абстракттауға болады?
Мұны сіз Интернет-o-сферасында көп естисіз. Бірақ күте тұрыңыз, не? Күте тұрыңыз - неге?
Себебі презентация өзгеруі мүмкін (және өзгереді). Осыдан 15 жыл бұрын веб-сайттарды қалай жасағанымызды қазір қалай ұсынатынымыздан танылмайды. Бірақ сіз не өзгермегенін білесіз бе? Сөздер. Біз әлі күнге дейін ‘em. Интернет негізінен (мәтіндік) мазмұнға арналған. Біз оны әлі де ақпараттық мәселелерді шешу үшін қолданамыз; тапсырмаларды орындау. Егер сіздің мазмұныңыз презентация құралымен байланысты болса (Flash кіріспе парақтары, кім?) Бірнеше жыл ішінде оны қолдану мүмкін болмай қалуы мүмкін. Және бұл сорады.
Мазмұнды жоспарлау тұрғысынан ойлауды тоқтату керек
Біз (сала ретінде) өз клиенттерімізді мазмұнды жоспарлау тұрғысынан ойлауға үйреттік. «Оны бүйірлік тақтаға салыңыз», - дейміз. «Бұл төменгі колонтитулға енуі керек». Тоқта! Тоқтат. Тоқта. Бұл орналасқан жер туралы емес. Бұл басымдылық туралы. Сіздің қолданушыларыңыз үшін ең маңызды мазмұн қандай? Себебі не ойлайсыз: контекст бойынша орналасу өзгереді. Кішкентай экран дизайнында бүйірлік тақта болмайды (мүмкін).
Сіздің клиенттің алып супер мәзірі? Айфонға ұша алмаймын.
Клиенттеріңізді олардың мазмұнын дизайннан тәуелсіз жоспарлауға мәжбүр етіңіз
Жарайды, оларды мәжбүрлеудің қажеті жоқ. Оларды жігерлендір. Қатты жігерлендіріңіз. Бұл үшін парақ кестелері өте жақсы. Егер сіз оны әлі оқып үлгермеген болсаңыз, оларды қалай жасау керектігі туралы көбірек ақпарат алу үшін дереу Кристина Хальворсон мен Мелисса Рачтың Интернеттегі мазмұндық стратегиясына өтіңіз. Оларды кезекпен реттеңіз. Орналасқан жері мен орналасуына сілтеме жасамаңыз. Бұл сіздің клиенттеріңізге өз мазмұны туралы неғұрлым өнімді түрде ойлауға көмектеседі, сонымен қатар контейнер құру процесі аяқталған сымдарға немесе дизайнға дейін қозғалады.
Мазмұнды жобалаудан бұрын аяқтаңыз
Жарайды, бұл әрдайым мүмкін емес. Жобалауды бастамас бұрын сенімсіздік қаншалықты жойылатын болса, соғұрлым артқа қайтуға және кейінірек заттарды өзгертуге тура келмейді.
Нақты мазмұнды қолданыңыз - әр уақытта
Мүмкін болса, кіші регистр мазмұнын қолданыңыз - клиенттеріңізге ең күрделі беттерді, суреттер мен мәзірлерді көрсетіңіз. Бұл кейінірек, егер олар дайын өнімдегі ең бейресми мазмұнын көргенде, тосын сыйларды болдырмайды.
Браузердегі функционалды сымсыз кадрлар әлемді өзгертеді. Клиенттеріңізге олардың экран көлемінің өзгеріп, өзгеріп жатқанын байқауға мүмкіндік беріңіз. Сымды кадрларды ұсынған кезде көрсетіңіз (сіз жеке презентация жасап жатырсыз ба?) Оларға экранның өлшемдері бойынша олардың ақпаратының басымдығы қалай өзгеретінін көрсетіңіз, ал макеті өзгереді.
Сымсыз кадрлар жауап беретін дизайнерлік жобалар үшін қалай жұмыс істейді?
Біз RWD үшін өзара әрекеттесу дизайны браузерге тез және жиі енуі керек деген сенімдіміз. Барлығын сипаттайтын статикалық құжат жасау мүмкін емес. Әрине, біз үш, төрт немесе бес үзіліс нүктелерін көрсететін құжат жасай аламыз, бірақ бұл оқиғаның бір бөлігі ғана. Ажырату нүктелерінің арасындағы барлық сәттер туралы не деуге болады? Бұл браузерде болады.
Нобай салу
Сіздің идеяларыңызды бірлесіп тез құра білу жақсы. Бұл қандай да бір ортада болуы қажет емес, бірақ қағазда қарындаш туралы бір нәрсе бар. Мұндағы мақсат идеяларды тез және итеративті түрде шығару болып табылады. Біз мүмкіндігінше эскиз тақтасын ұнатамыз, бұл үшін қосымша да бар: UI Sketcher.
Браузердің шеңбері
Міне, біз үшін нақты билет. Біз браузерде RWD-ді көрсету кезінде үлгілер мен жүйелерді қайта қолданғанды ұнатамыз. Әрине, біз әрқашан нөлден өз жүйемізді құра алатын едік, бірақ бұл бізге де, клиенттерге де көмектеспейді.
Біз сондай-ақ Twitter's Bootstrap немесе Zurb's Foundation сияқты жылдам жауап беретін прототиптік құрылымдарды қолданғанды ұнатамыз. Біз жеке қорға сүйенеміз, өйткені ол біздің жұмыс үрдісімізге сәйкес келеді. Өте жақсы болар еді, егер екіншісі де кішігірім экранды, төмен өткізу қабілеттілігі бойынша бірінші тәсілге жүгінсе, бірақ біз дәл осылай айналдырамыз.
Аннотация
RWD сым кадрларының аннотациясы өте маңызды, бірақ біз жиі байқамаймыз. Мұны дауыстап айтыңыз: құжаттама, құжаттама, құжаттама! Біз достарымыздың бірнеше мысалын көрдік және қазылар алқасы жауап беретін сымсыз кадрларға түсініктеме берудің ең жақсы тәсілін қолданады деп ойлаймыз. Жоғарыда айтылғандай, біз Foundation by Zurb-ді үнемі қолданамыз және аннотацияларды көрсету үшін оның Reveal қосымшасын қолданғанды ұнатамыз. Бұл аннотациялар тек үлкен экрандарда пайда болады және оларды қосуға және өшіруге болады.
Сымсыз кадрларда нақты мазмұнды қолданыңыз
Лорем Ипсумның айналасында сымды кадрлар мен дизайнерлік макеттерде көптеген пікірталастар болды, бірақ егер сізде сым кадрларыңызда нақты мазмұн болмаса, сіз оны дұрыс жасамайсыз. Мазмұн өзара әрекеттесу туралы шешімдерді хабарлайды және дизайн қашан бұзылатынын айтады. Лорем Ипсум мұны қалай істей алады?
Алдымен кішігірім экрандарға қалай дизайн жасаймын?
Бірнеше жыл бойы біз белгілі бір шешімді ескере отырып жасадық. Бұл әдепкі параметр болды. Дәптерлерде эскиз жасау, OmniGraffle-да сымсыз кадр құру, фотошопта жұмыс жасау немесе браузерде жобалау болсын, біз кенептің өлшемі қандай болатынын білдік. Ол күндер өтті. Біз бірінші кезекте кішігірім экранды жобалауға және біртіндеп жақсартуға сенеміз. Сонымен, дизайнер өзінің жұмыс процесін кенептің бекітілген мөлшерінен сұйықтыққа қалай өзгертеді?
Бастапқыда құрылғылардан жасалған абстрактілі дизайн
Егер біз белгілі бір құрылғыны жобаламасақ, құрылғылар туралы ойлауды тоқтату және тәжірибе туралы ойлауды бастау қажет. Төмендегі әдістердің барлығы дизайнерлерге агностикалық (бір нүктеге дейін) бола отырып, өз тәжірибелерін жасауға көмектеседі.
Стиль плиткаларын қолданыңыз
Бағытты орнату және жылдам қайталану үшін стиль плиткаларын пайдаланыңыз. Стиль плиткалары дизайнерге жобалау жүйесінің бағытын ерекше анықтамай анықтауға мүмкіндік береді. Олардың жаратушысы Саманта Уоррен оларды осылай сипаттайды:
«Стиль плиткалары көңіл-күй тақтасы тым бұлыңғыр болған кезде және компутер сөзбе-сөз болғанда арналған. Стиль плиткалары интерфейстің нақты элементтерімен орналасуды анықтамай тікелей байланыс орнатады. ”
Интерфейс үндестігін жасаңыз
Барлық көрнекі және интерактивті элементтер біріктірілген кенепті елестетіп көріңіз. Белгілі бір интерфейстің орналасуын көру үшін емес, барлық элементтердің қалай жұмыс істейтінін көру үшін. Бұл интерфейс гармонының кенептері. Интерфейс гармонының кенептері дизайнерге идеяларды біріктіруге мүмкіндік береді, бірақ экранның кез-келген өлшеміне бағытталмайды. Сонымен қатар, бұл толық стиль бойынша нұсқаулық шығарудан гөрі жобаланған элементтерді тиімді байланыстырудың және құжаттаудың тамаша тәсілі.
Егер сіз әрі қарай оқығыңыз келсе, интерфейстің үйлесімділігі туралы екі керемет мақаланы мына жерден таба аласыз.
Браузерде бәрін қарау
Барлығын браузерге жинау керек. Бұл жерде UI дизайны шынымен өмірге келеді. Нақты мазмұнның визуалды элементтермен өзара әрекеттесуін көру өте маңызды. Статикалық ортада мұны дұрыс жасауға ешқандай мүмкіндік жоқ. Сіз оның жергілікті ортада қалай жауап беретінін көруіңіз керек.
Статикалық бағдарламалармен тепе-теңдік орнатыңыз
Браузер мен Photoshop сияқты тұрақты бағдарламалар арасында ағын бар. Жобалау жүйесін сұйық және табиғи түрде жасауға мүмкіндік беретін тепе-теңдік болуы керек. Әрине, бұл Photoshop-та болады, бірақ дизайнер дизайнер шолғышта да креативті ойлауды үйренуі керек.
Қорытынды
Тағы да, сезіммен: неліктен, құрылымдалған мазмұннан және маңызды өзара әрекеттенуден бастаңыз. Алдымен шағын экранға және төмен өткізу қабілеттілігіне назар аударып, жауап беретін тұжырымдамаларды біртіндеп жақсартыңыз. Біздің орта жасымызға келеді. Бізде бәрін дұрыс жасауға және әлемді өзгертуге мүмкіндік бар, бір уақытта бір веб-жоба.
Дизайнерлер үшін ең жақсы 20 сым сызғыш құралын табыңыз
Стив Фишер зерттеуді, талдауды, дизайн мен стратегияны Канададағы Yellow Pencil-де үйлестіреді және RWD, UX және ашық дереккөздер сияқты тақырыптарда сөйлейді. Алейн Маккензи - сары қарындаштың контент-стратегі.
