Ръководство за разработчици на уеб дизайн за недизайнери

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

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

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

Превъзходният дизайн не е непременно този с най-много гласове на 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, span и inputs и оставяте браузъра да ги визуализира в нещо визуално. С инструментите за проектиране имате силата да пропуснете посредника и директно да използвате визуални елементи като форми и текст.

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

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

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

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

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

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

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

Текстов инструмент (абзац)

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

с определена ширина или

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

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

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

Инструмент за линия

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

Съвети и техники за проектиране

Оформление

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

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

Цветове

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

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

Типография

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

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

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

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

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

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

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

Вземане:

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

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

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

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

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

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

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

Примери: Twitter, буфер, DigitalOcean, Netlify, GitHub

Контейнер за течности

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

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

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

Вземане:

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

Обобщавайки

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

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

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

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