Стилни плочки: Хвърлената страна на телените рамки
Стилевите плочки осигуряват свеж и продуктивен начин да се подходи към процеса на проектиране. Те ви позволяват да се фокусирате върху личността и настроението на проекта, без да се притеснявате за конкретни решения за оформление.
Днес ще ви покажем какво точно представляват Style Tiles, защо трябва да ги използвате и как да ги включите в процеса на проектиране. Следвайте и вие може просто да промените начина, по който проектирате завинаги.
Какво представляват стиловите плочки?
Style Tiles са начин за разработване на визуална идентичност на сайта, независимо от сложната логистика, която влиза в игра, когато всъщност се опитвате да разработите пълноправен макет. Идеята идва от Саманта Уорън, изключително талантлив дизайнер и блогър от Badass Ideas.
Вместо да бием около храста, нека прескочим право в това, как изглежда стилната плочка. Трудно е да се опише, така че ето пример от уебсайта Style Tiles.
Ако сте водени от визуален дизайн, веднага трябва да можете да видите полезността на този инструмент. И двете са забележително прости и невероятно полезни. Тук са взети много важни решения за типография, цвят, стайлинг на бутони и други. Ако създавахме уебсайт, базиран на този съвет, щяхме да имаме солидна представа за визуалната посока, която бихме следвали.
Страната на обръщането на телените рамки
Уебсайтът Style Tiles ги описва като нещо средно между табло за настроение, което е прекалено неясно и пълно макет, което е твърде прецизно. Аз лично мисля за тях малко по-различно: като обратната страна на телените рамки.
Помислете за това, целта ви с телените рамки е да се съсредоточите върху оформлението, празно в стила. Вие просто мислите как да бъде структурирана страницата, какви ще бъдат съотношенията на размерите между елементите и т.н. Използването на опростена телена рамка ви позволява бързо да развиете много идеи, защото не се разсейвате от неща като цветове, сенки, модели, шрифтове и изображения.
Стилова плочка е обратното на това, което означава, че осигурява перфектно допълнение към този процес. Тук можете да изоставите представите за оформлението и напълно да се съсредоточите върху това, което би могло да се счита за „усещането на марката“, тези конкретни дизайнерски решения, които дават на сайта уникална идентичност.
Три причини за използване на стилни плочки
Сега, когато добре разбирате какви са стиловите плочки, нека да разгледаме някои от основните причини, които трябва да помислите за включването им в работния си процес.
Бързо визуално развитие на идеи
Първата причина, че стиловите плочки са страхотни, е, че трябва да можете да разрушите няколко от тях за сравнително кратък период от време. Пълните макети могат да отнемат часове или дори дни, за да се произведат, но тези дъски са просто малки вкусове от по-големия дизайн и трябва да ви отнемат само част от времето.
Това означава, че можете лесно да създадете три до пет уникални идеи за личността на вашия сайт, след което да изберете коя работи най-добре или да смесвате и съпоставяте елементи от всеки.
Клиентската обратна връзка е по-лесна за интегриране
Когато сте прекарали една седмица в разработването на първия поглед на клиента на даден проект и той ви изпраща обратно към чертожната дъска, това може да бъде отчайващо изживяване. Цялото това време и усилия, които сте отделили за проекта, бяха заличени в една среща и сте останали отново на площад.
Със Style Tiles можете да включите клиента си в процеса на проектиране на ранен етап. Покажете няколко различни плочки и те веднага ще получат усещане за случващото се и вероятно ще харесат възможността да влязат и да предоставят обратна връзка.
На този етап е невероятно лесно да направите малки ощипвания или дори мащабни глобални промени, без да усещате, че сте пропиляли половината от времето и бюджета си.
Перфектен за отзивчив работен процес
Тъй като отзивчивият уеб дизайн става все по-популярен, дизайнерите са принудени да преосмислят работните си процеси. Разработването на статични компи за дизайн, който непрекъснато се адаптира, е трудно и може би дори безплодно начинание.
Като алтернатива, Style Tiles ви позволява да ноктите външния вид на вашите елементи, без да се притеснявате за конкретни размери на устройството или точки на прекъсване. След като разберете, можете да ги включите в адаптивна мрежа.
Нека направим едно
Разговорът е евтин, нека да видим дали всъщност можем да използваме този процес, за да измислим нещо ценно. Ако искате да започнете от нулата, чудесно. Но ако търсите добра отправна точка, не забравяйте да изтеглите безплатния шаблон от уебсайта Style Tiles. Ето как изглежда:
Както можете да видите, има няколко елемента, които да ви помогнат да получите усещане за общо оформление, както и видовете елементи, за които трябва да мислите на тази фаза на процеса на проектиране. Обърнете внимание, че в долния десен ъгъл на този шаблон има много важен съвет: „Бъдете креативни, не използвайте само този шаблон такъв, какъвто е!“
Съблазнително е просто да стартирате с това, което ви е дадено тук, но не позволявайте този инструмент да наруши креативността ви, всъщност е предназначен да го подобри.
Като примерен проект, нека създадем стилова плочка за любимото ми място за бурито: Chipotle. Ще се преструваме, че или нямат сайт или зависят от нас, за да създадем преразгледан вид.
Logo
Първата стъпка, която ще направим, е да включим лого. Точно от бухалката се сблъскваме с необходимостта да променим шаблона за собствените си цели. Контейнерът на логото отгоре е правоъгълен, а логото на Chipotle е кръгло. За щастие, PSD шаблонът е много добре организиран, така че е достатъчно лесно за мен да изключите всички елементи на заглавката и да попадна на кръглото ни лого.
Заден план
Няма определен ред, който да следвате за актуализиране на елементите, просто отскачайте от парче на парче, докато идеите ви идват. Логична следваща стъпка за мен беше предисторията. Тъй като Chipotle е закуска в югозападния стил, създадох усещане за стар свят.
Ние сме само на две стъпки и вече направихме драматично въздействие върху шаблона. Ясно можем да видим ръководството за стил, оформящо се като личност на марката.
Цветове
Сега, когато имаме лого и фон на място, можем да започнем да виждаме малко цветна идентичност. Ще се възползвам от съществуващата цветова зона, за да разширя това в пълна палитра.
книгопечатане
След цветовете продължавам да скачам наоколо и се приземявам върху типографията. Наистина ми харесва, че шаблонът не само ви дава място да посочите някакъв тип пример, но също така има и малко етикети, така че можете да правите бележки за шрифтовете, които използвате.
Готовият продукт
Натискайки напред, аз просто продължих да се повтаря и да се ощипвам, докато не кацнах върху нещо, което можех да считам за завършена плочка. По пътя пуснах съветите за промяна на шаблона за добро използване и напълно преформатирах оформлението, като запазвам секциите, които намерих за полезни. Ето какво измислих:
Както виждате, това е далеч от оригиналния шаблон. Използвах предоставения PSD като изходна точка за моите идеи, а не патерица. Сега имам солидна основа, от която да започна, когато започна да съединявам оформление и стил заедно в завършен продукт.
Заключение: Дишане на чист въздух
Напоследък доста ме хванаха лъскави нови модни думи като CSS3, HTML5 и отзивчив дизайн. В резултат на това не бях влязъл в чист дизайн от известно време и проучването на полезността на Style Tiles беше само напомнянето, че имах нужда, че точно тук се крие истинската ми страст.
Абсолютно обичах да имам свободата да развивам визуален стил, без да се притеснявам дали началната страница трябва да бъде с три или четири колони. Доста освежаващо е да можете да се съсредоточите върху конкретни части от процеса на проектиране, без да бъдете сплашвани или разсейвани от по-големия обхват на целия проект.
Огромна благодарност отправя към Саманта Уорън за споделянето на процеса и началния шаблон. Мисля, че стиловите плочки ще бъдат много важна част от моя процес от тук нататък.
Оставете коментар по-долу и ни кажете какво мислите. Използвате ли дъски за настроение, телени рамки или други подобни инструменти в процеса на проектиране? Би ли въвеждането на Style Tiles да подобри начина ви на работа? Искаме да знаем!
Кадър с любезно предоставяне на Джо Кроуфорд .
