Как да овладеете решетката за проектиране

Курс за крах за проектиране на цифрови неща с помощта на мрежова система

Вземете този файл със скици тук

През последната година преподавах UX и продуктов дизайн на Общото събрание тук в Торонто. Научих много тон, а студентите, които влизат през вратата, са пълни с вълнение, надежда и ентусиазъм за изграждането на продуктите и услугите на утрешния ден.

Няколко пъти виждах, че вълнението, надеждата и ентусиазмът изтичат от лицата им и ги оставя да се давят в басейн отчаяние. Причината? Всемогъщата решетка.

В опит да помогна на онези от вас, които тепърва стартират в UX / UI Design, да преодолеят паниката и объркването, които понякога заобикалят мрежата, аз съставих удобен курс за катастрофа, така че можете да атакувате мрежата като шампион и да получите напукване върху вашите идеи, променящи света. Тук ще разгледаме няколко различни теми, включително:

  1. The Grid Guts - от какво е изградена решетката?
  2. Проектиране на решетката - как всъщност да се поставят нещата върху мрежата.
  3. Творческа гъвкавост - да знаете как да огънете решетката по своя воля
  4. Основата - Другата част от мрежовата система, която прави чудеса за вертикален ритъм.

Препоръка - Това ръководство е насочено повече към отзивчивия уеб дизайн и се върти около течна мрежа с 12 колони, но принципите на мрежата могат да се прилагат при всяко цифрово нещо, което проектирате. Нека се потопим.

The Grid Guts

Решетката е съставена от два основни компонента - колони и улуци. Заедно те съставят хоризонталната ширина на вашия екран и работят заедно, но има няколко правила, които трябва да знаете.

Основното е, че колоните са щастливо място, където вашите дизайнерски елементи могат да започнат и завършат, а улукът е опасна пропаст, която искате да избегнете. Достатъчно просто, нали?

Сега, когато извадихме основите на мрежата, нека да влезем в действително проектирането върху нея.

Проектиране на решетката

За да се „приведе в съответствие с решетката“, която се отнася до хоризонталната мрежа от колони и улуци, обектите и типографията извън родителския контейнер винаги трябва да започват и да завършват на ръба на колоната. В това първо изображение тези правоъгълници изглеждат достатъчно невинни.

О, просто ги погледни Просто са правоъгълници.

Но когато разкрием наслояването на решетката в Sketch, ОХ СЪЗДАВАНЕТО. Нашият приятел, малкият правоъгълник не е в мрежата. Както можете да видите по-горе, левият и десният ръб на малкия правоъгълник започват и завършват в улука, докато по-големите краища на правоъгълника започват и завършват в колона. Този правоъгълник знае какво има.

КАК СМЕЕШ.

Творческа гъвкавост

Знам, че някои от вас може би си мислят, че мрежата изглежда доста ограничаваща и със сигурност има правила, но има и начини да ги ограничите малко, което може да бъде изключително освобождаващо. Ето един от любимите ми цитати, който ми каза г-жа Вивона, моята учителка по драматична гимназия:

„Не можете да действате, докато не знаете вашите линии.“

Винаги е казвала, че всъщност не можем да бъдем актьори, докато не научим нашите линии студени. Как бихме могли да бъдем наистина креативни и да вкараме нашите личности в роля, ако винаги сме мислили какво да кажем по-нататък?

За решетките това означава, че не можете да започнете да експериментирате, да натискате границите или да влагате свой собствен стил във вашите дизайни, докато не научите ограниченията. Така че станете безумни и проектирайте сърцата си, но имайте предвид правилата.

Когато става въпрос за огъване на тези правила, помнете това - Докато вашият родителски контейнер е на решетката, нещата вътре в този контейнер могат да имат известна гъвкавост. Ето какво имам предвид:

Виж го? В горния пример и двата конструктивни елемента са технически в мрежата. Самият текст не е на хоризонталната мрежа, но родителският му контейнер е, което го прави добре.

Основната мрежа

В допълнение към хоризонталния ритъм, който създавате с колони и улуци, има вертикално подравняване и ритъм, които трябва да създадете, като използвате основна мрежа.

Базова линия е предварително измерена, инкрементална височина, към която трябва да бъдат подравнени всички обекти и типография. Във Filament използваме базова линия 7px, тъй като за нас 28px е удобна, четена височина на линията за 16pt основен шрифт. Други използват 8px или 5px базова линия в зависимост от предпочитанията си или платформата, за която са проектирани. Според нашия опит, 7px или 8px базова линия работи чудесно.

Изравняването на дизайнерски елементи като изображения или контейнери към базовата линия означава, че височините им са кратни на основната стойност - в този случай 7px. За типография това означава, че височината на линията на този шрифт е кратна на основната стойност - така че височината на линията може да бъде 7, 14, 21, 28, 35 и т.н. Важно е да се отбележи, че размерът на шрифта не трябва да да бъде кратно на основната линия, само височината на линията

Вървете напред и дизайн

Мрежите не трябва да предизвикват паника. Всъщност те могат да бъдат доста невероятни, след като разберете основите за това как да ги използвате и колкото повече работите с решетката, толкова по-добре ще бъдете да я огъвате по своя воля. Имаш това. Очаквам с нетърпение да чуя в коментарите историите ви за успех на мрежата.

Последвай ме в Туйтър
Намери ли това полезно? по-долу ще помогне на другите също да го намерят.

Първоначално тази публикация се появи в блога на филамента