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

направим

Цял екран

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

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

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

Паралакс

Ясен избор беше популярният ефект на превъртане на паралакс, който исках да се опитам да проектирам дълго време.

Създаваме ефект Паралакс, така че обектите, които са на преден план в мрежата, да се движат по-бързо от фона по време на превъртане.

По този начин нашият мозък възприема съдържанието като обект, който е по-близо до очите ни от фона, което създава впечатление за 3D ефект. Въпреки че знаем, че екранът е плосък.

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

Наслояването на снимка, поставянето на текст и създаването на самия ефект ще отнеме време, но крайният резултат си заслужава.

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

Този път превъртам мрежата и се замислям какво още му липсва. Ще направя пауза над раздела Галерия. където виждам красива уводна снимка с момче край огъня. Но не чувам огън.

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

Типография

Големи шрифтове, празни области, прости векторни елементи, изображения само там, където е необходимо (и може би изобщо). Ако количеството съдържание и комуникация на клиента го позволява, защо не?

Композицията обаче е много важна в такива уеб концепции. Именно това, включително цветовата палитра, решава как ще изглежда крайният изход.

И като говорим за цветове, аз съм много вкусен за уебсайтовете, които са малко тъмни.

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

Кутии

Понякога, когато чувах кутиите с думи, си представях шаблон. Съотборникът Čaky ме убеди, че иначе може да е по негово мнение за уеб проекти.

Когато взема като пример уебсайта Lalala Kidscafé, виждам стандартни раздели на кутии, но обработени нестандартно.

Когато се отървем от типичната композиция на шаблона, ние наблягаме на фона и включването на графичен елемент, като шаблон, можем да използваме кутиите без уеб търсещия шаблон.

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

Това обаче е тема за отделна статия, така че някъде следващия път.

Малко вдъхновение преди края

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

Творчески уеб проекти

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

Сред първите бих споменал страницата Awwwards, където ще намерите редица креативни уеб проекти от цял ​​свят.

Предимството е, че всички сайтове, които намерите там, вече са кодирани и работят. Така че няма миниатюри от Pinterest или Instagram, където можем да намерим много вдъхновение, но никой не знае кой от тях наистина може да бъде направен от гледна точка на разработчика.

Цветни палитри

Много обичам да използвам color.adobe.com при избора на цветове. Другарите от Adobe създадоха тази перфектна страница, която ще ни помогне да създадем мечтана цветова палитра от допълващи се цветове или да изберем една от хилядите цветови палитри от колеги от цял ​​свят.

Шрифт

Отидете на шрифта. Изборът на правилните шрифтове е едно от най-важните решения при създаването на уебсайтове. Не можем обаче да позволим на посетителя на сайта да не може да чете текст въз основа на грешен или твърде малък шрифт.

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

Можете да намерите вдъхновение за качествени безплатни шрифтове и акценти в статия на нашия бивш колега Lukáš.

Фотография

Със снимки и графики помагаме на посетителите да разберат уеб съдържанието по-лесно и бързо.

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

Какво да не забравя

Накрая ще ви напиша още няколко реда за това за какво да внимавате при избора на концепция и проектирането на уебсайт.

Ние, дизайнерите, трябва да имаме предвид, че хората днес идват на уебсайтове предимно от мобилни телефони. Така че първо да проектирате мобилен телефон? Лично това ми улеснява мобилната версия след настолната версия.

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

Не искаме обаче нашите колеги разработчици да ни гледат криво поради факта, че сме проектирали секции, над които те трябва да прекарват дълги часове.

Разбира се, важен е и износът, който ще достави всичко необходимо на разработчика. Успех със следващия ви проект.:)