Design101: Използване на силни привеждане в съответствие
Днес ще разгледаме един от най-основните принципи в дизайна: подравняване. Тази измамно проста тема всъщност е доста сложна и е сред най-забележимо липсващите познания на дизайнерите днес.
Силното разбиране за това как и кога да използвате определени подравнения веднага ще ви направи по-добър дизайнер и ще остане основополагащ градивен елемент за всичко, което създавате през останалата част от кариерата си.
Разгледайте елементи Envato
Въведение в привеждане в съответствие
За мнозина дискусията за привеждане в съответствие може да звучи като произволно упражнение. Такава основна теория на дизайна със сигурност е само за хора, които никога не са проектирали нищо в живота си, а не за професионалната общност, която посещава сайтове като тези. Така ли е?
Самият аз бих изтъкнал аргумента, че подобна дискусия е за начинаещи, като заявява, че солидното разбиране на визуалното привеждане в съответствие е непобедима основа за всички видове дизайн. Това е вид знания, които веднъж схванати, ще използвате за всяко едно оформление, което създавате като дизайнер.
Въпреки идеята, че тези концепции лежат в основата на това, което ние като дизайнерите правим, подравняването изглежда е основен източник на повечето от лошия дизайн, който виждам в интернет днес.
Самоподготвените дизайнери често разбират интуитивно как да използват подравнявания, но това може и не се проваля без изрични знания, които да го подкрепят.
Подреждане на нещата нагоре
Съществената идея за привеждане в съответствие е ума изчерпателно проста: да се подредят нещата. Извън органичния дизайн, който е изцяло различна тема, всеки елемент, който поставяте на страница, трябва да бъде придружен от логически мисловен процес по отношение на нейното позициониране.
Отново това са основни неща нали? Всички вече правят това ... нали? Грешен. Помислете за следния сайт, който наскоро беше представен в нашата галерия CSS. Използвам това не като средно одухотворен пример, а инструмент за преподаване. Дизайнерът е страхотен човек, който тепърва започва. Ежедневно усъвършенства уменията си и няма търпение да се учи.
Този пример е изключително типичен и е точно такъв вид, който виждаме всеки ден в нашите галерии. Естетичната стойност тук не е лоша. Ярките цветове и интересните текстури привличат вниманието ви доста добре. Изравняването тук обаче наистина пропусна маркировката.
Проблемите тук могат да бъдат трудни за забелязване на много хора. Поради тази причина винаги препоръчвам да се опрости дизайн, за да се проучат основните форми. Ще ме видите как го правя в няколко от статиите, които пиша за дизайн и определено трябва да го изпробвате в няколко от вашите собствени дизайни.
Сега, когато виждаме графичните обекти в опростено състояние, можем по-добре да анализираме обема на пространството, което заемат, и да адресираме всички проблеми с подравняването.
Забележете, че изведнъж елементите на страницата изглеждат разпръснати. Основната област на съдържанието в долната част не съответства нито на висящия банер в горната лява част, нито на разпръснатите елементи в горната дясна част. Освен това логото на Facebook изглежда малко и се откъсва от само себе си, а заглавието се отклонява от ръба на навигацията, който се отклонява от ръба на съдържанието.
Въпреки че този дизайн се чувстваше доста приличен, когато просто го усещахме, сега виждаме, че може да използва много преструктуриране. От тук има две ключови неща, които трябва да адресирате: Подравняване и отрицателно пространство.
Тези понятия са изключително тясно свързани помежду си. Работата с отрицателното пространство има много общо с фокусирането върху пропуските и прилагането на основна симетрия. За повече информация относно правилния ход на действие по отношение на отрицателното пространство, прочетете моето Ръководство за отрицателното пространство в шест редакции.
В тази статия ще продължим, като се съсредоточим повече върху това как да използвате основните подравнения, с които сте запознати в сложни оформления.
Центрово подравняване
Централизираните оформления са метод за избор на почти всеки човек на планетата ... с изключение на дизайнерите. По някаква причина центрирането на елементи на страницата просто изглежда като това, което трябва да правите. Със сигурност основната работа на дизайнера е просто да центрира артикулите!
Аз се сблъсках с този проблем преди няколко години, когато раздадох дизайн, който бях създал на програмист, който да кодира. Когато ми показа готовата версия, всичко беше преместено от ляво подравнено към центъра! Той просто обясни, че винаги е предпочитал да изравнява всичко, така че да изглежда добре.
Реалността е, че центрирането на всеки елемент е най-слабият избор за подравняване, който можете да направите.
Няма твърди ръбове, които да следвате, така че очите ви трябва да свършат много повече работа, за да заемат както цялостното оформление, така и да усвоят специфичното съдържание.
Кога да използвате
Това изобщо не означава, че винаги трябва да се избягва изравняването в центъра. Аз самият съм ги използвал на демонстрации за този много сайт. Ключът е да знаете кога да ги използвате.
Намирам, че най-добрият възможен сценарий за подравняване по центъра е, когато има много малко на страница. Колкото по-сложно е разположението, толкова по-малко работят центровете в центъра. Ако дадена страница не се случва много, изравненията в центъра могат да направят мощно изявление.
Ляво привеждане в съответствие
Левите подравнения, макар и може би скучни, са скални и трябва да бъдат по подразбиране, отидете на подравняване за голяма част от работата, която вършите.
Свикнали сме да виждаме съдържание, организирано по левия начин. Отворете книга или вестник и ще намерите много леви подравнения. Прегледайте рекламите във вашата нежелана поща, отново, много леви подравнения. Ще ги видите във Facebook, резултатите от търсенето с Google, потоците в Twitter и всеки друг основен уебсайт.
Левите подравнения управляват света или поне тези общества, които четат отляво надясно. Не бива да зависите напълно от лявото подравняване за всичко, просто знайте, че това е безопасният маршрут.
Кога да използвате
Използвайте във всякакви ситуации, но особено когато има много текст. Просто погледнете страницата, която четете сега. Ако това беше в центъра, това би бил кошмар.
Обърнете внимание, че особено в мрежата, подравняването на ляво нещо не означава, че не можете да го центрирате. Например, HTML div често съдържа куп лево подравнени абзаци и изображения, но след това е центриран на страницата с помощта на CSS.
Дясно подравняване
Десните подравнения вероятно са най-редките. Тъй като четем отляво надясно, просто ни се струва странно нещо да се придържа към десния ръб.
Това обаче е перфектно силно подравняване, което може да се използва старателно във вашите дизайни, особено в печата (обикновено е още по-неочаквано онлайн).
Кога да използвате
Често, макар и не винаги, правилното подравняване ще предаде усещане за уникалност. Ако проектирате нещо, което трябва да се откроява и да се чувствате различно, правилното подравняване е чудесно място за начало.
Оправдаване на подравненията в мрежата
Изравняването, което оставихме, очевидно е оправдано. Това влиза в игра силно, когато свържете цял сайт заедно като идеен елемент.
Интересното при проектирането в мрежата е, че той често включва смес от подравнения. Вероятно сте чували дизайнери да предлагат никога да не смесват подравнения, но този съвет просто не работи в реалния свят.
Вместо това трябва да вземате решения както за елементите в една страница, така и за елементите на страницата като цяло. Забележете как започнах тази дискусия, като разгледах пример за разглеждане на подравняването на даден сайт като цяло, но след това пристъпих към обсъждане на индивидуални подравнения на артикули.
След като се установите за подравняване на текста и изображенията на вашата страница, поставянето им всичко заедно често включва изхвърляне на всичко на страницата в обосновано подравняване. Въпреки че можете да имате дрипав ръб, оправдаването на всичко може да добави онова завършващо подреждане, което липсваше в оригиналния пример.
Забележете как в сайта по-горе има силно ляво подравняване, но всичко от дясната страна също е подплатено, за да създадете сплотен обоснован вид. Малкият бутон за вход се подрежда с изображенията на браузъра, които се подреждат с дясната страна на иконата на календара.
Това е изчистен, професионален дизайн. Може да не е подходящ за всички проекти, но често мога да видя дизайнери, които се опитват да го достигнат и да се провалят и исках да се спра на някои от вероятните причини.
Това е една от причините мрежовите системи да са толкова популярни. Хвърлянето на всичко върху решетка гарантира, че подравняванията ви са строги и лесни за следване.
заключение
За да обобщите, когато е възможно, използвайте силни подравнения, които улесняват окото ви да следи потока от информация. Подравняванията в центъра са приемливи, но стават по-трудни за правилно изпълнение, тъй като съдържанието на страница се увеличава.
Не забравяйте, че подравняването се отнася до конкретни елементи на дадена страница, както и подредбата на обектите като цяло. Прекарайте време във всеки дизайн, като се уверите, че всичките ви елементи се подреждат правилно с всичко на страницата. Това се прилага вертикално и хоризонтално по всички краища на дизайна.
