8 инструмента за уеб дизайн, които да използвате през 2018 г.

В съвременната уеб общност има много инструменти за уеб дизайн. Има класиците - графични редактори като Photoshop и Sketch - и програми, които съчетават дизайн и оформление.

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

Екипът на Outline2Design избра списък с най-интересните и полезни ресурси, за които се закачихме.

Бърз потребителски интерфейс

RapidUI е платформата за уеб дизайн, която позволява на дизайнерите да превърнат своите PSD и Sketch файлове в напълно функционални уебсайтове, без да пишат нито един ред код.

Предимства: автоматизирана разработка на интерфейс.

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

Недостатъци: остарял дизайн на интерфейса. Това обаче не е най-важното.

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

Webflow

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

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

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

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

Недостатъци: имате нужда от минимални познания по HTML / CSS, за да работите с този инструмент. От друга страна, не е толкова лошо

Атомно и прото

Смятаме, че тези инструменти са идентични по функционалност. Основната посока е прототипирането на множество устройства.

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

Атомната е безплатна. Той има неограничен брой прототипи и всички са безплатни.

Голямото предимство на Proto.io е интегрирането му с три платформи за тестване на потребители: Lookback, UserTesting и Validally, което го прави много по-удобно за целите на тестване на потребителите.

Недостатъци: Proto.io има свои приставки както за Sketch, така и за Photoshop, но за съжаление всички слоеве се експортират в статична графика, така че те не се редактират в Proto.io. Друг недостатък е, че за Proto.io трябва да плащате 24 долара месечно за един човек и до пет проекта.

Figma

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

Освен това и тук, както в Google Документи, е възможно да оставяте коментари директно върху работното поле, което е много удобно за работа в екип.

Вячеслав, старши UX / UI дизайнер вярва, че:

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

Предимства:

  • Актуализациите за този инструмент излизат доста често. Последният беше пуснат на 25 януари 2018 г. Екипът за разработка направи много промени, една от които е възможността да влачите Sketch файлове в отворен документ.
  • Не изисква знания за кодиране, за разлика от Webflow.
  • Дизайнът се преобразува автоматично в CSS код.

Прототипиране на хартия

„Повечето UX дизайнери започват процеса на проектиране със скици на хартия, само сега можете да тествате някои хипотези основно при създаването на интерактивен прототип. POP позволява на дизайнерите на етапа на скиците да създават работещи прототипи и ги споделя с екипа за тестване и идентифициране на грешни решения в началните етапи. Вярвам, че това приложение улеснява и ускорява процеса на проектиране на мобилни интерфейси и извежда стандартния процес на ново модерно ниво. “
Роман, старши UX / UI дизайнер в Outline2Design

Ако предпочитате старите училищни методи, когато прототипите са изготвени на ръка поради липсата на разнообразни съвременни инструменти, POP ще се превърне в истински приятел за вас.

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

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

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

Уеб инструменти за VR

Рамка

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

A-Frame е уеб рамка от Mozilla, която е създадена за лесното и мощно създаване на VR съдържание. Това е независим проект с отворен код, който има голяма VR общност. Има дори интерактивен курс за Web VR от A-Frame. В основата на инструмента е вградена мощна рамка на компонент, създадена от HTML.

Предимства:

  • Наистина мощен инструмент, който поддържа повечето VR слушалки като Vive, Rift, Daydream и т.н.
  • Cross-Platform VR: Създайте VR приложения за Vive, Rift, Daydream, GearVR и Cardboard с поддръжка за всички съответни контролери.
  • Съвместим с повечето библиотеки, рамки и инструменти, включително React, Preact, Vue.js, d3.js, Ember.js и jQuery.

Недостатъци: за работа с този инструмент се нуждаете от познания по HTML.

холограма

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

сцена

3D инструмент за визуален интерфейс, предназначен за тези, които не знаят нищо за 3D и VR. Той е лесен за използване и много интуитивен. Този интерфейс помага да се създаде 3D среда като първи етап, преди да преминете към кодиране и превръщане на 3D сцена в VR.

кодиране на стоките

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

актив

Този интерфейс ви позволява бързо да разглеждате активите на проекта и той е интегриран с Google Blocks, така че е лесно да използвате 3D обекти, създадени от тази общност.

Предимства: лесен за използване, приятен инструмент за създаване на VR. Не е необходимо много знания, за да започнете.

Недостатъци: анимацията за визуализация отнема много време.

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