Съдържание
- Отзивчива методология
- Как да запазя първо съдържанието?
- Защо?
- 01. Определете своите бизнес и потребителски цели
- 02. Препращайте към тях всеки шанс, който получите
- 03. Не се страхувайте да отблъснете
- 04. Натиснете и вашия собствен екип
- 05. Определете предварително всичките си потребности от съдържание
- Как да абстрахирам съдържание от презентация?
- Трябва да спрем да мислим за съдържание по отношение на оформлението
- Принудете клиентите си да планират съдържанието си независимо от дизайна
- Завършете съдържанието си преди дизайн
- Използвайте реално съдържание - всеки път
- И така, как работят телените рамки за отзивчиви дизайнерски проекти?
- Скициране
- В рамките на браузъра
- Анотации
- Използвайте реално съдържание в телени рамки
- Как да проектирам първо за малки екрани?
- Абстрактни дизайни от устройства в началото
- Използвайте стилни плочки
- Създайте хармония на интерфейса
- Вижте всичко в браузъра
- Направете баланс със статични програми
- Заключение
Нека бъдем ясни: дизайнът е решението само ако се фокусира върху по-дълбоките проблеми, защо е всичко. Един солиден процес винаги трябва да ръководи нашата работа, но трябва да прегърнем нещо по-гъвкаво. Нашата среда най-накрая се доказа като флуидна, така че не трябва ли и процесът ни? Помислете за дизайна на системата: трябва да видите както цялата картина, така и малките детайли. Невъзможен? Далеч от това!
Франк Химеро го представя красиво в книгата си „Формата на дизайна“: „Има част, в която художникът отстъпва от статива, за да придобие нова перспектива за работата. Рисуването е равни части отблизо и далеч: когато е близо, художникът работи усилено, за да направи своя белег; когато е далеч, той оценява работата, за да анализира нейните качества. Той отстъпва назад, за да остави работата да му говори. “
Трябва да оставим нашата работа, нашия медиум да ни говори. С възхода на отзивчивия дизайн, ние най-накрая приемаме нашата среда, каквато трябваше да бъде: флуид. Това е брилянтно време да се отдръпнете и да оцените работата, да анализирате и да възприемете нов начин на правене на нещата, нов процес. Отминаха дните на статични макети и уеб дизайнери, които не разбират кода. Време е за реагиращ процес.
Отзивчива методология
Ще издадем голямата тайна за солиден процес в началото на тази статия. Защото сме луди така. Готов? Отзивчивият процес е отговорен процес. Неясно? Може би. Глупаво? Не. Подобно на движението на уеб стандартите преди него, отзивчивият дизайн тласка мрежата напред с благоприятни за бъдещето методи.
Както всеки процес на проектиране, той трябва да се фокусира върху „защо“ зад всичко това. И така, защо съществуват уебсайтове? Да доставя съдържание. Това може да бъде основано на задачи, социално, информационно ... няма значение. Всичко се свежда до това: започнете с важното защо, добре структурирано съдържание и взаимодействия.
Ето въпросите, които чуваме най-често за нашия реагиращ процес на проектиране.
Как да запазя първо съдържанието?
Всички сме толкова оптимистични в началото на проекта. „Съдържание първо!“ ние казваме. „Потребителски цели! Не забравяйте какво е важно! " Вярно е. Но какво означава това? Как прилагате процес, основан на съдържание?
Дори да знаете (или да мислите, че знаете), лесно е да забравите с напредването на проекта. Дългосрочните проекти имат тенденция да се влачат и продължават (и нататък ... и нататък ...). Спираме да мислим защо, и започваме да се фокусираме върху как. Ние се заблуждаваме да мислим, че нашите проекти могат да бъдат разделени на отделни фази „откриване“ и „разработване“, които могат да съществуват независимо.
Истината е, че непрекъснато трябва да продължаваме да питаме защо. Колкото и да мислите, че знаете, независимо колко планиране сте направили - всеки път, когато вземете решение, всеки път, когато проектирате бутон или напишете заглавие, трябва да попитате ...
Защо?
Защо правя това? За кого е? Каква бизнес цел ще помогне на клиента ми да постигне? Каква нужда ще помогне на моите потребители да се обърнат? Не просто пазете съдържанието първо. Запазете първо защо.
Това го прави лесно. Но за да го направите добре, ще трябва да натиснете. Натиснете вашите клиенти и вашия екип да определят първо техните причини. Няма Lorem Ipsum, няма ‘ще стигнем до това по-късно’. Напиши си домашното! Всичките ви хау трябва да започнат със солидно защо. В Yellow Pencil това означава големи промени в начина, по който представяме, прогнозираме, бюджетираме и планираме проекти. Трябваше да настояваме за бюджет и време, за да направим солидни изследвания, стратегия и планиране. Може и вие. Но след като вашите клиенти и екипите ви видят огромните ползи от определянето на нуждите от съдържание отпред, те никога няма да погледнат назад.
И нашата работа е да ги образоваме. (Прочетете отличната книга на Майк Монтейро „Дизайнът е работа“, ако искате да научите повече за общуването с клиенти.) Клиентите трудно могат да разберат стойността на това изследване и да работят предварително. И защо трябва? Те не получават нищо „завършено“ в края - и твърде често получават само фактура и голям стар документ на Word.
Това не е тяхна вина - ние сме виновни. Наша отговорност е да се справим по-добре с демонстрирането на тази стойност. На всяка стъпка от пътя трябва да върнем всичко към най-важното защо.
Това е особено важно за отзивчивия дизайн. Отзивчивият уебсайт не изисква много повече усилия за разработка, но означава много повече планиране. Наистина обаче планираме да го правим през цялото време. Станете свидетел на текущия цикъл на проектиране на всеки три години. Искате ли да продължите да правите това? Ние със сигурност не го правим.
Ето три стъпки за запазване на съдържанието на първо място в процеса на вашия проект.
01. Определете своите бизнес и потребителски цели
Съставете приоритетен списък на бизнес и потребителски цели за вашия проект. Какво най-много искат да знаят или правят вашите потребители? Направете вашето проучване. Правете информирани изводи, а не диви предположения. Накарайте всички заинтересовани страни да се съгласят.
02. Препращайте към тях всеки шанс, който получите
Всеки път, когато взимате решение, всеки път, когато някой предложи нова функция или елемент от дизайна или страница със съдържание, накарайте ги да прикачат заявката към бизнес и потребителска цел. На какви реални нужди ще отговаря тази функция? Каква е истинската причина? (Съвет: „Защото искам“ или „Наистина харесвам синьото“ или „всички са във Facebook“ не се броят.)
03. Не се страхувайте да отблъснете
Това може да е трудно. Взаимоотношенията с клиенти могат да бъдат деликатни и може да бъде изкушаващо да се откажете от битката, за да спечелите войната. Но не забравяйте, че всички сме заедно в това! Това не е бизнес срещу потребител; ние срещу тях.
Покриването на нуждите на потребителите е най-добрият начин за задоволяване на бизнес нуждите. Защото без нашите потребители нямаме бизнес! Клиентите (добри клиенти) не ви наемат, за да кажете „да“ на всичко. Така че, ако вашият клиент поиска нещо, което няма да отговаря на техните цели или нуждите на потребителите им, не се страхувайте да ги предизвикате. Не става дума за его. Става въпрос за създаване на възможно най-доброто решение.
04. Натиснете и вашия собствен екип
Това може да бъде предизвикателство и при работа в творчески екип. Разделянето на ролите - визуален дизайн, потребителски опит, информационна архитектура, стратегия за съдържание, производство на съдържание - може да доведе до неразбиране на съобщенията. Заемаме се, затрупваме се с имейли. Трудно е да останеш с проект от началото до края, особено след като свършиш „твоята“ работа.
Връзката на вашия екип е поне толкова важна, колкото и връзката с клиента. Трябва да си припомним защо, точно както правим нашите клиенти. Сътрудничеството е от ключово значение. Не можете просто да „предадете“ план за съдържание, рамки или дизайн. Доколкото е възможно, трябва да работим ръка за ръка. Лесно е да „завършите“ резултат и да преминете към нещо друго. Много по-трудно е да останеш с проект, когато протичането е трудно.
Подходът на водопада към творческата работа просто не работи. Пъргавата, съвместна работа между членовете на екипа води до по-добри резултати.
05. Определете предварително всичките си потребности от съдържание
Ето какво е: адаптивните уебсайтове отнемат повече време за планиране. Вече не планираме само един контекст. Планираме за всички контексти, за които знаем сега, и някои, които все още не съществуват.
Но отнема много по-малко време за планиране на всички тези сложности отпред, отколкото за връщане назад и преоборудване на функции и функции, които не сте отчели. Така че прекарвайте времето / усилията / бюджета. Принудете клиентите и екипа си да дефинират (и да се ангажират!) Цялото им съдържание, преди да влезете в дизайна. Използвайте таблици на страници. Използвайте структурирано съдържание. Бъдещо доказателство за вашето съдържание сега! Или плачете по-късно.
Как да абстрахирам съдържание от презентация?
Чувате това много в интернет-сферата. Но чакай, какво? И чакайте - защо?
Тъй като презентацията може (и ще) се промени. Начинът, по който проектирахме уебсайтове преди 15 години, е почти неразпознаваем от начина, по който ги представяме сега. Но знаете ли какво не се е променило? Думи. Все още ги използваме. Интернет съществува предимно за (текстово) съдържание. Все още го използваме за решаване на информационни проблеми; за изпълнение на задачи. Но ако съдържанието ви зависи от средство за презентация (встъпителни страници с Flash, някой?), Съществува реална вероятност то да не бъде използваемо след няколко години. И това е гадно.
Трябва да спрем да мислим за съдържание по отношение на оформлението
Ние (като индустрия) сме обучили нашите клиенти да мислят за съдържанието от гледна точка на оформлението. „Поставете го в страничната лента“, казваме ние. „Това трябва да е в долния колонтитул.“ Спри се! Спри. Спри се. Не става въпрос за местоположение. Става въпрос за приоритет. Кое е най-важното съдържание за вашите потребители? Защото познайте какво: оформлението се променя в контексти. (Вероятно) няма да има странична лента на дизайна на вашия малък екран.
Гигантското супер-меню, което вашият клиент иска? Няма да лети на iPhone.
Принудете клиентите си да планират съдържанието си независимо от дизайна
Добре, не е нужно да ги насилвате. Насърчавайте ги. Силно насърчавайте. Страничните таблици са чудесни за това. Ако още не сте го прочели, преминете незабавно към Стратегията за съдържание на Кристина Халворсън и Мелиса Рач за мрежата за повече информация как да ги създадете. Организирайте ги в приоритетен ред. Не посочвайте местоположението или оформлението. Това ще помогне на вашите клиенти да мислят за тяхното съдържание по по-продуктивен начин, а също така ще задвижи процеса на създаване на съдържание, преди финализирани каркаси или дизайн.
Завършете съдържанието си преди дизайн
Добре, това не винаги е възможно. Но колкото повече несигурност можете да премахнете, преди да започнете да проектирате, толкова по-малко ще трябва да се върнете и да промените нещата по-късно.
Използвайте реално съдържание - всеки път
Ако е възможно, използвайте съдържание на крайни калъфи - покажете на клиентите си най-сложните страници, изображения и менюта. Това ще избегне изненади по-късно в процеса, когато те видят най-неопетненото си съдържание в крайния продукт.
Функционалните жични рамки в браузъра правят нещо различно. Позволете на клиентите си да наблюдават как тяхното съдържание се движи и променя в различни размери на екрана. Посочете го, докато представяте своите телени рамки (правите лични презентации, нали?) Демонстрирайте им как приоритетът на тяхната информация остава същият при различните размери на екрана, докато оформлението се променя.
И така, как работят телените рамки за отзивчиви дизайнерски проекти?
Ние сме твърдо убедени, че дизайнът на взаимодействието за RWD трябва да влезе в браузъра бързо и често. Почти е невъзможно да се създаде статичен документ, който да описва всичко. Разбира се, бихме могли да създадем документ, който демонстрира три, четири или пет точки на прекъсване, но това е само част от историята. Ами всички моменти между точките на прекъсване? Това се случва в браузъра.
Скициране
Все пак е добре да можете бързо да начертаете идеите си съвместно. Това не е необходимо да се случва в някакъв конкретен носител, но има само нещо за молив върху хартия. Целият смисъл тук е да извадите идеи бързо и итеративно. Обичаме да скицираме, когато е възможно, и дори има приложение за това: UI Sketcher.
В рамките на браузъра
Ето истинския билет за нас. Обичаме да използваме повторно модели и системи, когато демонстрираме RWD в браузъра. Разбира се, всеки път бихме могли да създадем собствена система, но това не помага на нас или на нашите клиенти.
Също така обичаме да използваме рамки за бързо реагиране на прототипи, като Bootstrap на Twitter или Zurb’s Foundation. Ние лично клоним към Фондацията, защото тя отговаря на нашия работен процес. Би било чудесно, ако някой от тях използва подход с малък екран, първо с ниска честотна лента, но точно така се движим.
Анотации
Анотациите за каркасите на RWD са от съществено значение, но според нас често се пренебрегват. Кажете го на глас: документация, документация, документация! Видяхме няколко примера за това от приятели и смятаме, че журито все още е на „най-добрия“ начин за правилно анотиране на отзивчиви рамки в браузъра. Както бе споменато по-горе, ние редовно използваме Foundation by Zurb и обичаме да използваме добавката му Reveal, за да показваме нашите анотации. Тези пояснения се появяват само за по-големи екрани и в идеалния случай могат да се включват и изключват.
Използвайте реално съдържание в телени рамки
Имаше много дебати около Lorem Ipsum в телени рамки и дизайнерски макети, но ако нямате реално съдържание във вашите рамки, правите го погрешно. Съдържанието информира решенията за взаимодействие и ви казва кога дизайнът ще се счупи. Как може Lorem Ipsum да направи това?
Как да проектирам първо за малки екрани?
В продължение на години проектирахме с конкретна резолюция предвид. Това беше настройка по подразбиране. Независимо дали скицираме в тетрадки, изграждаме рамки в OmniGraffle, работим в Photoshop или проектираме в браузъра, ние знаехме какъв ще бъде размерът на нашето платно. Тези дни ги няма. Ние много вярваме в първоначалното проектиране за малкия екран и постепенно подобряване. И така, как дизайнерът променя работния си процес от фиксиран размер на платно на плавен?
Абстрактни дизайни от устройства в началото
Освен ако не проектираме за конкретно устройство, от съществено значение е да спрем да мислим за устройства и да започнем да мислим за преживявания. Всички следващи техники помагат на дизайнерите да изработят своя опит, като същевременно могат да останат агностични на устройството (до определена точка).
Използвайте стилни плочки
Използвайте Style Tiles, за да установите посоката и бързо да итерирате. Стилните плочки позволяват на дизайнера да посочи посоката на системата за проектиране, без да става твърде конкретен. Създателят им Саманта Уорън ги описва по следния начин:
„Стилните плочки са предназначени, когато настроението е твърде неясно, а компютърът е твърде буквален. Style Tiles установяват директна връзка с действителните елементи на интерфейса, без да определят оформлението. "
Създайте хармония на интерфейса
Представете си платно с всички визуални и интерактивни елементи, събрани заедно. Не за да видите конкретно оформление на потребителския интерфейс, а за да видите как всички елементи работят заедно. Това е платно за хармония на интерфейса. Платното за хармония на интерфейса позволява на дизайнера да поддържа идеи заедно, но не и да се фокусира върху нито един размер на екрана. Плюс това е чудесен начин за ефективно общуване и документиране на проектирани елементи, вместо да се изготви пълен справочник по стил.
Ако се интересувате от по-нататъшно четене, тук и тук можете да намерите две отлични статии по темата за хармонията на интерфейса.
Вижте всичко в браузъра
Всичко трябва да се събере в браузъра. Това е мястото, където дизайнът на потребителския интерфейс наистина оживява. Виждането как реалното съдържание взаимодейства с визуалните елементи е от решаващо значение. Няма начин да направите това правилно в статична среда. Трябва да видите как ще реагира в родния носител.
Направете баланс със статични програми
Има поток между браузъра и статичните програми като Photoshop. Трябва да има баланс, който позволява системата за проектиране да бъде създадена по течен и естествен начин. Разбира се, това ще се случи във Photoshop, но дизайнерът, който проектира отзивчиво, трябва да се научи как да мисли творчески и в браузъра.
Заключение
Още веднъж, с усещане: започнете с защо, с добре структурирано съдържание и взаимодействия, които имат значение. Фокусирайте се първо върху малкия екран и ниската честотна лента и постепенно подобрявайте отзивчивите си концепции. Нашият медиум навършва пълнолетие. Имаме шанса да направим нещата правилно и да променим света, един уеб проект в даден момент.
Открийте най-добрите 20 инструмента за каркасно проектиране на дизайнери
Стив Фишър координира изследвания, анализи, дизайн и стратегия в Yellow Pencil в Канада и говори по теми като RWD, UX и отворен код. Алейн Макензи е стратег по съдържанието в Yellow Pencil.
