9 основни съвета за уеб дизайн за начинаещи начинаещи

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


Съвети за уеб дизайн за начинаещи

В наши дни е възможно всеки да бъде уеб дизайнер. Да, това е смело изявление – но с повишена достъпност до софтуер за проектиране с отворен код като ширит, и с платформи за самостоятелно изграждане на сайтове като Wix и Weebly, заливащи пазара, линията между любител и добросъвестни уеб дизайнер е станала много по-тънка и мътна от късно. Интересното в творчеството е, че никой не може да реши вместо вас, когато сте „готови“ да изпълните определена роля. Много рок звезди никога не са вземали уроци по музика; много успели художници никога не са изучавали човешката анатомия; и по-голямата част от уеб дизайнерите там нямат официална степен. Така че, ако сте създали уебсайта на вашия собствен бизнес, можете ли тогава уверено да кажете, че сте „уеб дизайнер“? Това трябва да определите.

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

Кликнете, за да щракнете

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

Какво е това ръководство (и какво не е)

За да е ясно, тук говорим за основите на уеб дизайна – и няма да навлизаме в по-напреднали теми като мрежови системи, JavaScript или CSS рамки. Това ръководство предполага също, че използвате някакъв конструктор на уебсайтове за влачене и пускане, за да можете да проектирате уебсайт без кодиране. Независимо дали използвате съществуващ шаблон от създателя на уебсайта си или започвате от нулата (по-амбициозна опция за начинаещи), това ръководство ще ви помогне с основните принципи и практики за уеб дизайн, които трябва да приложите към вашия уебсайт. Една-единствена статия за уеб дизайна няма да ви превърне незабавно в експерт, така че считайте това за първата си стъпка към по-голям свят.

БЪРЗ СЪВЕТ: Основните познания за HTML и CSS ще бъдат огромни ползи за всеки новоизграден уеб дизайнер. Ако наистина искате да получите ръцете си в кодирането, предлагам да проверите W3Schools за да научите повече за фондацията.

Основите на уеб дизайна за начинаещи

Нека да стигнем до него, нали? Ето някои от най-полезните тенденции и насоки, които трябва да знаете при създаването на първия си уебсайт:

1. Пуснете мишката, вземете молив

Вашият уебсайт вече може да съществува като красиво, цялостно цяло в съзнанието ви – поради което незабавно скачате във Photoshop (или по-лошо – браузър и HTML), за да го планирате. Уау, уаа – охладете си струи за секунда! Не слагайте количката пред коня. Първо, извадете молив и подложка от хартия и започнете да влагате идеите си в нещо лесно осезаемо. Това е важна фаза за очертаване на структурата на вашия сайт, като се използва нищо повече от правоъгълници, рисунки и вдъхновени идеи (често наричани wireframing). В този момент нещата могат да бъдат супер груби; никой няма да го види освен теб.

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

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

2. Следвайте йерархия

Факт е, че повечето уеб сърфисти са склонни само да сканират уеб страници, а не да отделят време, за да прочетат действително всичко. Трябва да сте готови за това от поставяйки на първо място най-важното съдържание. Това означава, че потребителят трябва да може да усвоява най-жизненоважната информация на страница, цялата в един екран при първоначално зареждане, без да се налага да увеличавате или превъртате. Това разбира се е много по-лесно, отколкото да се направи. Ето няколко съвета, които ще ви помогнат да разберете по-добре значението на тази теория на дизайна:

Съхранявайте съдържание „Над сгъването“

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

Използване на изображение „Герой“

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

Пример за изображение на герой / банер

„Сгъването“ може да се промени в зависимост от устройството

Ето къде нещата стават сложни – и защо не бива да се претоварвате, опитвайки се да поберат всичко над тази магическа линия. В зависимост от устройството на потребителя, размерите на екрана могат да варират значително. 5K дисплей с падаща челюст има вертикална резолюция от 2880 пиксела, докато iPhone 5 има по-малко от половината от това. Това означава, че потребителите на мобилни устройства просто няма да могат да влязат толкова съдържание в екранните си имоти. (Повече за това по-късно.)

БЪРЗ СЪВЕТ: Общото правило е да се гарантира, че съдържанието над горната част се вписва в най-ниския общ знаменател на размерите на екрана. Това обикновено се приема като 768 пиксела на вертикална резолюция.

3. Типографията е вашият дизайн

Освен ако не управлявате фотографски бизнес, текстът е най-важният елемент на всеки уебсайт, така че е важно да направите тази част правилно. Йерархията на вашата уеб страница зависи до голяма степен от избраната от вас типография: как заглавията, подзаглавията и основният текст следват естествен поток и остават визуално различими една от друга. За цялостен поглед върху типографията, разгледайте нашето ръководство за най-добри практики. Ето няколко важни начина:

  • Уверете се, че текстът е четлив (избягвайте цветните шрифтове!) и достатъчно голям (обикновено около 16 пиксела за тялото).
  • Придържайте се към не повече от два шрифта– и се уверете, че те се сдвояват добре!
  • Дайте на параграфите си малко място, за да дишате помежду си, и ги поставете достатъчно горна подплата или марж в заглавията си, за да означават ясни прекъсвания в съдържанието.
  • Избягвайте дългите редове текст. По-лесно е очите за абзаците да са приблизително не повече от 15 думи дълги– и малко по-малко от това за мобилните екрани.
  • извивка на буква шрифтовете обикновено са най-добри само при печат – освен ако не се използват в големи заглавия в мрежата.

4. Цветове & Контрастът е решаващ

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

Пример за цветове на уеб дизайнСиньото е цвят, който предизвиква увереност и доверие, популярен избор за уебсайтове, свързани с финанси.

Ако вече сте установили цветовете на марката си, използвайте тези на уебсайта си. Най-добре е обаче да го поддържате не повече от три цвята за вашия сайт; като шрифтове, не искате да прекалявате тук или сайтът ви може да се окаже с множество разстройства на личността. Също така внимавайте за твърде много пръски цвят на вашата уеб страница; очите ни са привлечени към тях като капани за мед и те биха могли да прекъснат естествения поток на съдържанието ви. Използвайте цвят само когато е най-необходим, например за връзки или бутони.

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

БЪРЗ СЪВЕТ: Най-добре е да избягвате пълно насищане с цветове в мрежата. Чисто червено (шестнадесетична стойност # ff0000) е малко прекалено осезаемо за очите. По същия начин, чисто черно (# 000000) за шрифтове има тенденция да вибрира прекалено силно за очите, докато леко намаленото черно (# 333333) улеснява четенето.

Освен това искате текстът ви да се появи на фоновите изображения. Използването на много натоварени снимки може да отвлече вниманието от текста, така че за да избегнете този проблем, или използвайте по-малко подробни снимки или използвайте наслагване, да речем, rgba (51,51,51,0.5), за да помогнете за омекотяване на изображението под текста.

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

Контрастът също играе роля за това как потребителите са привлечени към определени ключови елементи на вашия сайт. Вашите най-важни бутони за призив към действие трябва да грабнат окото чрез използване на контрастни цветове. Синьо „Купете сега!“ бутонът губи своята спешност и си струва, когато бъде погълнат от сайт, който използва синьо навсякъде – но червен бутон на същата страница привлича вниманието на потребителя, като крещи „Ей! Щракнете върху мен! “

6. Използване на снимки

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

Разбиране на типовете файлове & компресия

Има допълнителна стъпка, която трябва да се направи за използване на изображения в мрежата. Тези фантастични снимки, които получавате от сайтове като Shutterstock и iStock може да бъде доста масивна (5000+ хоризонтални пиксела и 10+ мегабайта), което е добре за печат, но те не са подходящи за уебсайтове. Не всеки има супер бърз Fiber Internet, така че трябва да намалите размера на вашите изображения, за да се настанят за време за зареждане (да не говорим за 40% от посетителите ще напуснат, ако сайтът отнеме повече от 3 секунди!). Обикновено искате да запазите всяко свое изображение на a максимум от 500 килобайта по размер, въпреки че вашият среден размер на файла вероятно трябва да е около 100 килобайта.

  • JPEG е стандартният формат за снимки. Това е загубен формат, което означава, че качеството му на изображението се намалява при компресиране. Ако използвате JPEG за фоново изображение с пълна ширина, препоръчвам да запазите хоризонталната му разделителна способност на не по-малко от 1200px. За общи цели, избягвайте използването на изображение с по-малко от 600px хоризонтална разделителна способност, тъй като вероятно ще изглежда замъглена на съвременните екрани.
  • PNG е предпочитаният избор за графика или за изображения, които изискват прозрачност. Това е формат без загуби, който е чудесен за запазване на качеството на изображението, но също така може да увеличи размерите на файловете. Като цяло ще използвате PNG графика за илюстрации, икони или по-малки изображения, които могат да бъдат подредени върху други елементи поради тяхната прозрачност. Рядко ще ви трябва PNG, за да е по-голям от 1000px.
  • SVG (Мащабируема векторна графика) е по-нов формат, който се заменя GIF и дори PNG в някои случаи. Красотата на SVG е, че той може да бъде толкова голям или толкова малък на екрана, колкото ви е необходим, като същевременно запазва перфектна яснота и отчетливост (и все още е малък размер на файла). Трябва да помислите да използвате SVG за всяко лого, икона или векторна графика на вашия уебсайт; тъй като високите DPI дисплеи вече стават нещо обичайно, остротата на SVG ще осигури най-доброто качество на изображението.

Примери за типа на изображението

6. Мобилен първи дизайн

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

По същество това означава, че по време на първоначалната си фаза на скициране и планиране на хартия е най-добре първо да се съсредоточите върху мобилното оформление на сайта. На по-малките екрани ще се показва само най-важното съдържание, необходимо за функционирането на вашия сайт. Това ви принуждава Опростете вашето оформление и изрежете всички разсейващи елементи още от самото начало. Помислете отново за съдържанието си „над сгъването“: ако първо се уверите, че цялата важна информация може да се побере в началния екран на телефона, тогава със сигурност ще знаете, че ще се побере на по-големи екрани. След като приковаете основното оформление за мобилни устройства, можете да започнете да добавяте украшения или по-големи изображения за екраните на работния плот.

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

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

БЪРЗ СЪВЕТ: Уверете се, че нито един елемент на вашия сайт, особено ако е интерактивен, е по-малък от 44px от 44px в размер. Защо? Това е най-малката цел, която може да бъде там, където пръстът все още може точно да я почука.

7. Поддържайте нещата подравнени

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

8. Поддържайте го просто

Често се казва, че най-добрият уеб дизайн остава незабелязан; само лошият дизайн привлича вниманието към себе си. Както споменахме по-рано, най-важният аспект на всеки уебсайт е просто неговият текст. Ако можете да предоставите изключителна типография, която е радост да четете, има вероятност да не е нужно да правите много повече. Опитът да се презададе вашия сайт просто ще претрупа и усложнява нещата.

Необходими ли са сенките на кутиите? Лудите, богато украсени модели? Десетките цветове? Вероятно не.

9. Големи отворени пространства

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

заключение

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

Ражда се дизайнер!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map