Съдържание
Тази статия се появи за първи път в брой 229 на списание .net - най-продаваното списание в света за уеб дизайнери и разработчици.
Едно от най-важните неща, върху които можете да се съсредоточите, когато става въпрос за оформяне на страница в HTML / CSS, е вертикалният ритъм - визуалният модел, в който се оформят блоковете от тип или линии от типа, докато сканирате надолу по страницата.
Други неща могат да повлияят на този ритъм, като заглавия, елементи от списъка, изображения и т.н. Наличието на добър вертикален ритъм е от първостепенно значение, защото помага за четливостта и способността за сканиране на вашите страници.
Има доста страхотни уроци (Вижте тук и тук, например) в мрежата, където можете да намерите как технически да постигнете правилен вертикален ритъм, като използвате ems за височината на линията си и научите какво да поддържате вашия тип „във фаза“ означава.
Йерархия
Основните неща, на които трябва да се обърне голямо внимание, са височината на линията между елементите и цялостната визуална йерархия на страницата. Задаването на правилни пропорции на височината на линията може да е свързано с упражнение за проектиране, но е важно да се овладеете. Йерархията също е важна, тъй като изображенията и текстовите елементи трябва да са в хармония един с друг визуално - най-важните неща обикновено са по-големи и са на първо място на страницата.
Дизайнерите на печат се занимават с идеята за вертикален ритъм в продължение на много години и само в близкото минало уеб дизайнерите трябваше наистина да влязат в тези неща. С непрекъснато нарастващата необходимост от изграждане на уебсайтове с помощта на мрежови оформления и обръщане на внимание на адаптивни внедрения, за да се приспособят множество ширини на екрана, сега е по-важно от всякога от гледна точка на визуалния дизайн, вероятно повече, отколкото просто технически.
Пет примера за проверка
1. Елементите на типографския стил Тази книга на Робърт Брингхърст е стандартът за изследване на типографията. Прочетете го, консумирайте го, изсипете го в мозъка си, както можете.
2. Франк Химеро Освен че е абсолютно невероятен като цяло, скорошният редизайн на личния уебсайт на дизайнера Франк Чимеро показва превъзходен вертикален ритъм. Той използва ефект на паралакс, за да помогне на ритъма да се прибере вкъщи, докато и вие превъртате страницата надолу.
3. Дан Седерхолм За добър пример за страхотен типографски вертикален ритъм, разгледайте блога на Дан Седерхолм. Височината на реда на копието и заглавията е в перфектно съотношение.
4. Фокус лаборатория Фирмата за уеб дизайн и брандиране Focus Lab използва ловко йерархия, за да помогне да се комуникира най-важното за посетителя.
5. Typofonderie Уебсайтът на Typography Studio Typofonderie има страхотен вертикален ритъм със своите изображения и текст. Разстоянието между елементите е пропорционално на целия уебсайт и йерархията между основното изображение и вторичните изображения / раздели е перфектна.
Открийте 10 невероятни примера за експериментален дизайн в Creative Bloq.
