10 концепции за дизайн, които всеки уеб разработчик трябва да знае
През последните няколко години преподавах уъркшоп по основи на визуалния дизайн, предназначен за разработчици. Както при повечето неща в мрежата, открих разнообразно ниво на познания и интерес от дизайна както от учениците, които са взели моята работилница, така и от разработчиците, с които съм работил.
Този списък е предназначен да бъде кратък списък на концепциите, които бих искал разработчиците, с които работя, да разберат относно дизайна. Той има за цел да насочи разработчиците в правилната посока като въведение в мисленето и общуването относно дизайна.
01. Дизайнът не е само визуален
Дизайнът не е само фасадата; това е личността отдолу. По някаква причина дизайнът има клеймо като единствено визуалната част на уебсайта. Това не може да бъде по-фалшиво или погрешно разбрано. Дизайнът е цялостното изживяване от момента, в който потребителите влязат във вашия сайт, след като са напуснали.
Дизайнът е „как“ и „защо“ хората искат да използват сайта; скоростта, с която се зарежда сайтът; взаимодействието между задържане, щракване и докосване; и темпото, с което предоставяте нови функции и съдържание. Всички тези концепции включват дизайн.
Тъй като дизайнът е повече от визуални аспекти и засяга цялото преживяване, всеки човек в даден проект е дизайнер. Всеки член на екипа, който има за цел да открие как потребителят взаимодейства със сайта, е дизайнер. Интерфейсът, бекендът и управлението на проекти трябва да мислят за дизайн.
02. Бъдете ориентирани към потребителя
Потребителите са от първостепенно значение и винаги трябва да бъдат начело на всяко решение относно вашия сайт или приложение. Проектите трябва да позволят на вашите потребители да постигат целите си с бързина, ефективност и най-важното удоволствие.
В моята работилница карам учениците да създадат първоначално кратко описание на дизайна, след като са избрали проект, по който да работят. Въпреки че им давам прости насоки, които да следват, в по-голямата си част те са фокусирани върху потребителя: кои са те, какво правят на вашия сайт и какво е усещането, което искате да имат, когато посещават, както и кога тръгват си?
Въпреки че това работи добре за малките проекти на семинара, когато става въпрос за по-големи проекти, трябва да мислите за тази основа в по-голям мащаб. Дизайнерите използват персони, разказване на истории и други, за да посочат кои са потребителите на сайта и какво искат да правят на сайта. Разровете се в тези насоки под каквато и форма да вземат за вашия проект и ги използвайте, за да повлияете на всички ваши дизайнерски решения.
Дизайнерът не трябва да се нагърбва с целия потребителски опит; дизайнерите трябва просто да го ръководят. Вместо това опитът трябва да бъде споделен от целия екип (ако такъв съществува). Има много случаи, в които разчитах на разработчиците да ми помогнат да разбера най-добрия начин за създаване на най-доброто потребителско изживяване. Те не само познават по-добре своите граници, но и имат по-ясна представа за всички възможности.
03. Дизайнът е в детайли
Детайлите могат да направят 'добър' дизайн 'страхотен'. Вниманието към детайлите в потребителското изживяване може да бъде разликата между доволен и раздразнен потребител. Наличието на правилния нюанс на синьото или обвиването на връзката около определен текст наистина има значение. Проблемът с детайлите е, че е лесно да ги хванете. Фокусирането върху детайлите твърде рано е ненужно и може да забави процеса. Важно е да знаете кога да се съсредоточите върху конкретни детайли или кога е полезно да визуализирате цялата, по-голяма картина.
04. Когато проектирате, скицирайте често
Ползите на скициране на потребителски преживявания са добре документирани . Скицирането ви помага да мислите за съдържанието, йерархията и потока между другите аспекти. Скиците са евтини, лесни за изпълнение и много бързи. Трябва да можете да създавате една нова идея на всеки тридесет секунди. Скицирането също е един от най-добрите начини за комуникация на идеи за оформление, потребителски опит и потребителски поток за даден сайт.
Първият ми професор от колежа ми вкорени това, когато бях студент. Тя не ни позволяваше да използваме компютъра, докато не видя страници след страници със скици. Младите дизайнери са склонни да пестят скиците или да ги пропускат изобщо. Все още виждам много дизайнери да преминават твърде рано от скици към дизайн с по-висока точност, без първо да проучат всички възможни решения.
Най-добрата част от скицирането е, че всеки може да го направи. Всеки знае как да рисува кутии, изкривени линии и стрелки. Това са основните инструменти, които трябва да започнете да проектирате - наистина е толкова просто. Не търсим безценни произведения на изкуството и със сигурност не се нуждаете от изискана художествена степен. Просто трябва да можете ясно да комуникирате вашите скици и мисловния процес зад тях.
05. Използвайте празно пространство
Изглежда, че концепцията е най-трудната за разбиране от разработчиците: най-голямата полза от наличието на подходящо количество празно пространство дава почивка на потребителя. Прекъсванията са важни за обработката на информация, особено когато има достатъчно количество за обработка. Ето защо имаме абзаци и изречения вместо само един, дълъг блок от работещ текст.
Ключът е да се гарантира, че празното пространство има връзка с други обекти на страницата, включително другото пространство. Ако имате една колона празно пространство, уверете се, че има друга единична колона бяло пространство, за да го балансирате.
За вертикално пространство просто използвайте части от размера на шрифта на тялото. Склонен съм да улеснявам нещата и да използвам скала от .25, но има няколко други везни, които можете да използвате . Например, ако размерът на основния шрифт е 16px (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Това дава възможност за избор на размер на шрифта, като просто се движите нагоре и надолу по мащаба, както I искате по-голям или по-малък тип.
06. Мрежите не са само CSS рамки
Луд, нали? Решетките за първи път намериха известност в дизайна в това, което сега се нарича Международен типографски стил .
Решетка трябва да се използва за:
- Създаване на връзки между обекти
- Осигурете основна система за визуално подравняване
- Помогнете за създаването на хоризонтален и вертикален ритъм
- Помогнете за създаването на оптичен баланс
Всички тези концепции работят заедно, за да ви позволят най-добре да създадете по-добра визуална система за вашите потребители. Избраната от вас мрежа влияе върху единството на дизайна; изборът на мрежа, въз основа на която е най-лесно да се приложи, не е непременно най-добрият избор на дизайн за вашето съдържание и потребители. В крайна сметка това все още е само инструмент и ще бъде толкова добър, колкото човекът, който го притежава.
07. Когато всичко има акцент, нищо не го прави
Това е като да проведете разговор с група хора, които всички ви крещят едновременно, за да правите различни неща. Само един елемент трябва да има акцент върху страницата: най-важният. Поставянето на акцент върху един елемент и наличието на ясна йерархия осигурява поток за читателите и трябва да ги насочи в желаната посока.
08. Запазете папка за вдъхновение
Запазете галерия с всички неща, които ви вдъхновяват визуално. Това могат да бъдат снимки, видеоклипове, плакати, тениски и уебсайтове; всичко, което може да предизвика идеи за решение на конкретния проблем с дизайна, с който се сблъсквате.
Това не само действа като отправна точка, но и ви принуждава постоянно да търсите и оценявате дизайна. Лесният процес на избор на части от дизайна и запазването им в папка ви принуждава да използвате тези мускули за анализ на дизайна.
09. Дизайнът е свързан с решаването на проблеми
Трябва да подходите към дизайна като набор от проблеми, които изискват решения. Всичко на страницата трябва да има причина да бъде там и да решава конкретен проблем за потребителя или дизайна. Имам тенденцията да премахвам функции от набора от функции, докато проблемът, който решавам, стане много очевиден.
Понякога ни е трудно да формулираме проблемите, вместо да се стремим към решение. Работата назад е наистина полезно за това. Когато решавате дали нещо трябва да е червено, например, спрете и помислете за причините, поради които първо сте искали червено. Запитайте се: какво се опитвам да постигна, като го направя червен? Какъв беше моят мисловен процес? Може да се окажете там, където сте започнали, но ще разберете по-добре защо и какво правите.
10. Умейте да говорите и да критикувате дизайна
Сигурен начин да досадите на дизайнера е да им кажете, че червеният блок трябва да е син, че част от текста трябва да се премести или да увеличи логото. Мисля, че схващате идеята.
Най-добрият начин да дадете конструктивна обратна връзка е да насочите вниманието към проблемите с дизайна. Имайте доказателства, базирани на потребителите, потока на сайта, целите на дизайна и визуалните принципи, за да подкрепите проблемите, които виждате с дизайна. Тогава това подкрепя вашето мнение за това какво трябва да се промени и предоставя силна основа за успеха на потребителя, както и на дизайна.
Тогава, надяваме се, дизайнерът ще работи с вас, за да формира решение на проблема. Това е вашата възможност да предложите решение; просто не искайте да увеличите логото.
Ресурси и работилница
Ако това ви е било интересно, можете да разгледате моето дизайн за ресурси за разработчици и проектиране на учебни пътеки . Бих се радвал да те видя и в двата онлайн версия или в версия лице в лице на работилницата.
Думи: Кайл Фидлър
Кайл Фидлър е дизайнер в thinkbot, помага за изграждането на Rails и iOS приложения. Той проектира и разработва, под някаква форма, от дот-ком бума (и пропадането) и оттогава не спира.
Тази статия първоначално се появи в нетно списание брой 244.
Хареса ли ви това? Прочетете тези!
- Полезен картографиране на ума инструменти за дизайнери
- Ръководство на дизайнера за Златно сечение
- Професионални съвети за перфектното оформление на уебсайта
Имате чудесен съвет за дизайн? Споделете го в коментарите!
