Ръководство за програмисти за уеб дизайн за не-дизайнери

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

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

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

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

Не става въпрос за талант

Когато бях по-млад, играех много Minecraft. Видях всички тези страхотни сгради, които хората правят. Но когато направих нещо, изглеждаше като кутия. Грозна и без стил. Как дори правите нещо хубаво в Minecraft, нали?

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

Дизайнът е умение и като всяко друго умение може да се научи.

Избор на подходящия инструмент за работата

В програмирането можете да използвате Notepad и да напишете приложение, което е толкова добро, сякаш е написано в пълноцветна IDE ... въпреки че животът ви може да е доста нещастен да го правите и вероятно ще отнеме значително повече време. В света на уеб дизайна MS Paint би поел ролята на Notepad и подобно на Notepad, малко хора реално решават да проектират с него ... Надявам се.

Най-популярните дизайнерски инструменти в мрежата са:

  • Sketch, единствен за MacOS инструмент, който, подобно на React, изглежда твърдо кодиран във всеки списък на работа. $ 99 / година.
  • Adobe XD, безплатен за използване, кросплатформен инструмент, който влиза в ролята на Vue. Има по-малка общност, но е много лесно да започнете.
  • Adobe Photoshop, швейцарският нож за всяка дизайнерска задача, известна на всички. Намерено е мястото ... познахте, jQuery. $ 9.99 / месец.

Почти няма разлика дали използвате Sublime или VS код за писане на приложения. Или дали използвате React или Vue за фронта. Това е просто въпрос на предпочитание. Същото важи и за инструментите за дизайн, тъй като всеки от тях има своите плюсове и минуси.

Използвам Adobe XD. Основната причина за мен е, че тя е крос-платформа, така че не съм заложник на екосистемата на Apple. Той също е подкрепен от Adobe, така че ще бъде тук известно време. Най-доброто нещо за новодошлите е, че от май 2018 г. Adobe XD е свободен да използва само с няколко ограничения (които е малко вероятно да се спънете така или иначе).

Настройка на вашето мислене

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

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

Учене на инструментите

Когато кодирате, използвате HTML елементи като divs, spans и inputs и оставяте браузъра да ги превърне в нещо визуално. С инструментите за дизайн имате силата да пропуснете посредника и да използвате визуални елементи като форми и текст директно.

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

Инструмент за правоъгълник

Правоъгълниците са най-универсалната форма. Ще намерите себе си през цялото време. Мислете за това като за div. Полезно е за всякакви неща, от създаване на текстови въвеждания до контейнери.

Текстов инструмент (етикет)

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

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

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

Текстов инструмент (параграф)

Второто състояние е текстов контейнер със специфичен размер, който се държи като

със специфична ширина или

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

Изберете инструмент

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

Линия инструмент

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

Съвети и техники за дизайн

оформление

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

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

Цветове

За да ви помогнем да намерите идеалния цвят за следващия си проект, помислете за съобразяването с психологията на цветовете (colorpsychology.org). Полезен инструмент за намиране на перфектната цветова комбинация въз основа на основния ви цвят е Paletton.

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

книгопечатане

Typeface до голяма степен влияе на брандирането на вашия проект, така че изберете разумно. Премиум шрифтовете изглеждат по-добре от тези в Google Fonts, но когато едва започвате, не купувайте такива. Дори в Google Fonts има някои скрити скъпоценни камъни.

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

Проектиране на начална страница (или целева страница)

Винаги се опитвам да избягвам изкушението да проектирам модерни елементи и след това да натъпча посланието си в него. По-скоро измислям предимства (не функции), поставям ги в история и разказвам тази история от визуално привлекателна страница.

След като установя какво искам да кажа, обикновено търся някакво вдъхновение. Чудесен ресурс за това е land-book.com, обширна директория от страхотни целеви страници, за които хората могат да гласуват. Друга страхотна страница с дизайнерско вдъхновение е interfaces.pro, където можете да филтрирате по категории като цени, 404 или за нас. Просто разглеждам, докато намеря достатъчно сайтове, които ми харесват и съответстват на желания от мен стил.

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

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

храна за вкъщи:

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

Проектиране на уеб приложение (или табло)

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

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

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

Фиксиран контейнер

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

Примери: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Контейнер с течност

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

Примери: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

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

храна за вкъщи:

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

Обобщавайки

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

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

Също така, вие ще бъдете първият, който ще бъде информиран за следващия ми пост, в който ще споделя 69 дни напредък, постигнат в Sidemail - проект на SaaS, върху който работя. В него ще бъдат включени неща като броя на абонатите, посещения на сайтове, разходи и дизайнерски чернови. Трябва да мине, без да казвам, но гарантирам абсолютно никакъв спам. Дори нямам време за тази глупост.

Моите Twitter DM са отворени, така че ако се забиете в изработката на дизайна си или имате допълнителни въпроси, не се колебайте да ме ударите.