Направление на визуалното съдържание Какво трябва да знаете
Най- визуална посока на съдържанието е по-малко обсъждан, но решаващ аспект на високо-конвертиращия уеб дизайн. Всеки посетител "попива" нов сайт на първата страница - независимо дали го правят съзнателно или не.
Естетиката играе роля, но това е повече за цялостното усещане за дизайна. Това чувство може да бъде повлияно от празно пространство, типография, симетрия, но най-вече взаимоотношения между елементите на страницата.
Дизайнерите искат посетители останете на страницата и продължавайте да превъртате като привлече вниманието им и ги запази в сайта. Принципите на проектиране трябва винаги да се съсредоточават на функция преди форма. Това означава, че дизайнът трябва допълват съдържанието, не го вкарвам като мисъл.
В тази публикация бих искал да ви покажа някои съвети за това как можете подобряване на оформлението и потоците визуално съдържание на сайта си.
Съсредоточете се върху композицията
Всяка част от уеб сайт се изгражда върху цялостното оформление. Това цялостно оформление създава композиция, която следва правилата на гещалтската теория, която гласи това цялото винаги е по-голямо от сбора на частите.
Отделните области на страницата се събират заедно образуват едно цяло. Елементи на дизайна трябва да се изгради a гравитационно привличане относно съдържанието; всичко на страницата трябва естествено насочвайте посетителите надолу, докато стигнат до дъното на страницата.
Ето защо връзките между различните части на съдържанието (визуализации, текст, бутони и т.н.) имат голямо значение за проектирането.
Вашата цел трябва да бъде насърчаване на хората да разглеждате сайта от собствения си наклон. По-лесно е да се каже, отколкото да се направи, но можете да научите много изучаване на реални примери.
Началната страница на Monkop е чудесен пример за визуална йерархия текст и визуализации. Много елементи се използват между елементите, а типографията допълва марковите векторни илюстрации.
Докато превъртате, ще забележите прави хоризонтални страници разделени по цветове, граници и графики. Те са изградени с дизайн модели в ума предлага последователност в цялата страница.
Към дъното ще откриете разделянето на две колони с изображения от едната страна, текст от другата. Изображенията също суап страни с образец дясно-ляво-дясно-ляво. Това привлича вниманието и разбива монотонността на типичната страница, докато все още поддържане на естествен поток в съдържанието.
А подобен естетичен дизайн може да се намери на уебсайта на Picjumbo, целева страница за фото аддон за потребители на Photoshop и Sketch.
Началната страница поставя акцент върху логото и видеото за предварителен преглед. Докато превъртате, ще забележите персонализирани анимации, които се движат из цялата страница. Тази анимация наистина улавя вниманието, и получава зрителя заинтересовани да продължат да се придвижват.
Като цяло, страницата се чувства отворен и лесен за разглеждане. Съдържанието е разделени на хоризонтални блокове с ясна типография и чисти икони.
Помислете за начина, по който различните елементи на страницата баланс заедно, пространството между елементите, контрастът между цветовете и различните форми. Всички тези неща играят роля в цялостната композиция. Всеки сайт естествено привлича определена тежест върху съдържанието.
Няма абсолютен отговор, защото е различен за всеки сайт. Например, някои навигационни връзки изглеждат по-добре, когато са големи и извънгабаритни. Други се вписват по-добре, когато са малки с главни букви.
Предлагам ви да изучавате други уебсайтове във вашата ниша. Наистина анализирайте как са събрани. Дори опитайте да възстановите оформленията, за да видите кои елементи най-накрая правят дизайна "съвместен".
Тип дизайн въпроси
Начинът, по който ще проектирате вашата типография засяга посоката на съдържанието на сайта си. Това е свързано с типа йерархия и стилове на проектиране на различни елементи на страницата като параграфи, заглавия, списъци с маркирани знаци, кавички и специални елементи на оформлението като колони или таблици.
визуализации също може да повлияе на оформлението, така че е добра идея да проектирате съдържание с естествена прогресия. Пишете съдържание по начин, който изтича надолу по страницата, и кара хората да четат чрез всеки параграф.
Най-голямото средство, с което разполагате, е окото ви за дизайн. Научете се да разпознавате различията в типографските елементи и как те са свързани с други елементи на страницата. Създавайте връзки между разделите на страницата, за да различавате области от съдържанието.
Някои неща, които може да помислите:
- Размер на текста
- Шрифтово семейство
- Цветен контраст
- Връзки между секциите на страницата
- Височина на линията и полета на параграфите
- Разстояние между буквите и горна / малка
Погледнете например началната страница на Монитора на кампанията. Горните навигационни връзки използват всички капачки с малки букви. Други заглавки на страницата следвайте същия дизайн на всички капачки който създава чувство за еднаквост.
Други по-големи заглавия на сайта са много по-забележими, и те наистина скочат от страницата. Само като се погледне типичен дизайн на заглавната част, трябва да е лесно кажи разликата между заглавието и неговото парно тяло.
Стиловете за типографски дизайн на монитора на кампанията са изискани и те смеси естествено в оформлението. Необходима е практика да се постигне такъв резултат, но колкото повече се опитвате, толкова по-лесно ще бъде.
За да научите малко повече, препоръчвам следните връзки:
- Принципи на проектиране: визуално тегло и посока
- Работа с визуалното тегло във вашите проекти
- 19 Фактори, които влияят на съставния баланс
Водещо съдържание
Разбери това различни видове уебсайтове имам различни методи за насочване на посетителите през сайта. Например целевите страници искат да насочват посетителите информация, малки икони, снимки на екрани, и Отзиви.
Други сайтове като блогове обикновено не водят хората до началната страница наведнъж. Повечето хора земя на страница на статия, така че оформлението на блога е предназначено подчертайте заглавието, и привличайте хора по-нататък в съдържанието. Това е мястото, където качеството на писане на текст влиза в игра, защото искате читателите да висят на всяка дума.
Необходими са социални мрежи и уеб приложения качествено потребителско изживяване, така че това е малко по-различна тема, но помислете как е предназначена фуражът във Facebook насърчаване на превъртането и взаимодействието с потребителите.
Методите за проектиране, които използвате, за да пазят хората, които сърфират в сайта, ще да се променят с времето. Но като цяло целта ви е да посетители с посока на визуалното съдържание.
Нека да разгледаме a целевата страница и a дизайн на блога да забележите разликите.
Cactus е статичен генератор на сайтове за OS X. Началната им страница следва внимателно дизайна на Apple - изобилие от празно пространство и тънки шрифтове без сериф.
Съдържанието е организирано в колони, блокове и парчета текст с прости графики. Същите тези естетики са често с продуктите на Apple, така потребителите на Mac ще се насладят на този стил на дизайн.
Информация за продукта - включително функциите и настройките - са изброени точно на началната страница. Самата страница насърчава превъртането чрез уникално съдържание, основни икони и променлив шаблон на колони от блокове от ляво / дясно съдържание.
Целта тук е да се предостави информация на съществуващите потребители, и да продава нови потребители идеята за Кактус.
Сега сравнете този дизайн с началната страница на The Next Web. Съдържанието е много по-спорадично на началната страница на блога, защото има много различни теми за публикации.
Правоъгълниците създават мрежова система, която капсулира множество публикации в едно оформление. Целта тук е да получавате потребителите да четат съдържание на сайта. Няма значение дали посетителите изтеглят нещо, но няма значение дали те дръжте се, за да прочетете нещо.
Начинът, по който хората да четат, е с страхотни снимки и закачливи заглавия. TNW върши чудесна работа и тяхното оформление е построен, за да поддържа сърфирането на хората със сродни миниатюри на публикации в страничната лента и след съдържанието.
Насочването на посетители към конкретно действие е различно за всеки сайт. Но можете да научите много от изучаването на други успешни сайтове и да научите как да ги копирате.
Доверете се на очите си
Индивидуалните свойства на дизайна могат да бъдат обяснени аналитично, но промените в изпълнението за всеки сайт. Героидно изображение с връзка "Превъртане по-нататък" не изпълнява същото на всички уебсайтове.
Обучението за дизайн е много визуален процес. Вашето око за дизайн е най-важният аспект. Ти трябва да виждам нещата правилно да се идентифицира това визуална йерархия. Ако можете да го видите на други уебсайтове, ще можете да го възпроизведете на собствените си сайтове.
Най-добрият съвет, който имам, е да просто вярвай на очите си. Създайте списък с любимите си уебсайтове и прекарайте 5 минути в браузъра. Запишете любимите си елементи на страницата и как те влияят върху дизайна. Това ще ви помогне интернализирайте тези концепции от гледна точка на UI / UX, по-скоро от гледна точка на потребителя.
Също така не се страхувайте да опитате нещо! Никой не се справя добре с дизайна просто чрез четене на статии за дизайна. Да, те помагат - те наистина могат да помогнат много. Но ти трябва да се създавайте неща от нулата, за да научите какво върши работа и какво не.
Тренирайте очите си, като изучавате оформленията на уебсайтовете, които харесвате, и ги пресъздавайте. С течение на времето ще изградите библиотека с образци, която прави проектирането на нови сайтове много по-лесно.
Обобщавайки
Надяваме се, че тези съвети ще ви помогнат да започнете и ще ви дадат основна пътна карта, която да следвате. Не е лесно да станете уеб дизайнер, но светът се нуждае от талант и никога не е било по-лесно да се научиш на тези основни понятия.
проучване най-добрите примери за уебсайтове с елементи на страницата, на които се наслаждавате. Влак окото ви да разпознава връзките и бързо развият необходимите умения репликира тези отношения във вашата собствена работа.
