• Основен / Други

52 инструмента за уеб дизайн, които ще ви помогнат да работите по-умно през 2021 година

Страница 1 от 2: Страница 1

• Страница 1
• Страница 2

КЪМ:

• Пълни инструменти за проектиране
• Мокети и прототипи
• Проектиране на рамки и библиотеки

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

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

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

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

Пълни инструменти за проектиране

01. Студио InVision

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

Ако вече използвате InVision с инструменти като Sketch, има доста кросоувър във функциите. Силата на Studio обаче се крие в отдела за прототипиране, особено ако вашият дизайн включва анимация. Бързото прототипиране ще ви позволи да създадете сложни и въображаеми преходи, които ви позволяват наистина да постигнете желаното ниво на анимация. Просто разберете как искате вашият потребителски интерфейс да изглежда в началото на прехода му и след това да проектирате крайния резултат. InVision Studio работи за вас.

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

Когато приключите, експортирайте своите прототипи чрез InVision и поканете хората да си сътрудничат. Можете да разгледате проекта си на предвидената му платформа - чудесен начин да изследвате и тествате своя дизайн. След това клиентите ще могат да коментират направо дизайна.

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

02. Скица

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

Рори Бери, креативен директор в Superrb , направи преминаването към Sketch през 2017 г. и силно го препоръчва. „В сравнение с Photoshop сортирането на всичките ви документи и извършването на ревизии в Sketch е много по-лесно“, започва той. „Sketch има малки документи, докато Photoshop има големи. Поради това, че е векторно приложение, размерите на файловете са значително по-малки в сравнение с Photoshop. '

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

Общността предлага стотици Скица на приставки за да направите вашия работен процес по дизайн по-лесен и плавен.

Недостатъкът на Sketch е, че е достъпен само за Mac и не се планира да поддържа други операционни системи. Това е проблем, тъй като дизайнерите често искат да споделят .sketch файлове с разработчици, използващи Windows. За щастие вече има приложение „Sketch for Windows“, наречено Лудост което ще отвори и редактира .sketch файлове и ще премахне по-голямата част от тази болка - прочетете за това в Експортиране и конвертиране раздел на тази статия.

Не пропускайте нашите най-добрите съвети за използване на Sketch .

03. Adobe XD

Adobe XD предлага най-добрата среда за цифрови проекти в рамките на пакета Adobe Creative Cloud. Ако сте запален потребител на Adobe и сте нов в XD, може да не намерите интерфейса много „като Adobe“ за начало. Въпреки това, той се подрежда до другите водещи инструменти там. Това е скок, ако и вие сте проектирали в Photoshop от известно време, но много си заслужава за дизайна на потребителския интерфейс.

Този инструмент за векторно проектиране и изграждане на рамки продължава да се подобрява, с допълнения като поддръжка за гласово прототипиране гарантирайки, че инструментът може да е в крак с най-новите тенденции в UX. XD включва инструменти за рисуване, инструменти, които ви позволяват да дефинирате нестатични взаимодействия, мобилни и настолни визуализации и инструменти за споделяне за даване на обратна връзка за проекти. Тя ви позволява да изберете специфичен за устройството размер на монтажната плоча за стартиране на проект и дори можете да импортирате популярен комплект потребителски интерфейс, например Material Design на Google.

Важно е, че Adobe XD се интегрира с останалата част от Creative Cloud, което означава, че ще можете лесно да импортирате и да работите с активи от Photoshop или Illustrator. Ако вече използвате други приложения на Adobe, потребителският интерфейс ще се чувства добре и познат и не трябва да представя прекалено много крива на обучение.

Андрей Робу , дизайнерски директор в Robu Studio в Барселона, е сред феновете му. „За бързи макети е страхотно“, казва той. „Това е много лек интерфейс, с много заредени снимки и чудесен за дъски за настроение. Прототипирането е много полезно, за да покаже на клиентите как работят нещата, особено защото можете веднага да изпратите съдържанието онлайн. '

Елис Роджърс, графичен дизайнер в Рецепция ООД също го препоръчва. „Когато дизайнът / прототипът или каркасът завършат, Adobe XD ви позволява много бързо да избирате елементи и да създавате преходи на страници за работещ прототип, които могат да се споделят чрез връзка“, обяснява той. „Връзката също така ви позволява да събирате отзиви на страница, поддържайки всичко организирано. Връзката може да бъде актуализирана в рамките на Adobe XD, така че клиентът винаги може да види най-новата версия, без да се притеснява за неправилни версии. Абсолютна радост е да работите.

04. Чудо

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

05. Фигма

Фигма е инструмент за дизайн на интерфейс, който позволява на множество дизайнери да си сътрудничат в реално време. Това е много ефективно, когато имате множество заинтересовани страни в проекта, които участват във формирането на резултата. Наличен е в браузъра или в Windows, Mac или Linux и има както безплатни, така и платени версии в зависимост от това за какво го използвате.

Ето някои от изключителните му характеристики:

„Figma има подобен USP като Sketch, с изключение на това, че е междуплатформен“, обяснява дизайнерът на интерфейс Бенджамин Рийд . „Когато го използвах, за да създам няколко икони, открих, че работният процес е невероятно гладък. Не ми отне време да се науча и имах допълнителната полза от сътрудничеството: можете да споделяте графики с други хора в приложението. '

„Опитвам се да премина към Linux за моята работа и понякога използваме Windows, така че Figma има смисъл за мен от практическа гледна точка“, добавя той.

Писател на съдържание на свободна практика и художник Дейвид Истууд има и добри неща да каже за Фигма. „Това също беше наистина полезен инструмент, когато трябваше бързо да се подиграваме с MVT; понякога малки допълнения към съществуващо оформление. Харесва ни, че можете бързо да създавате дизайни за настолни компютри, таблети и мобилни устройства. '

06. Affinity Designer

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

„1 000 000 процента увеличение беше просто блаженство; това е особено полезно при работа с векторни изображения, тъй като наистина можете да се доближите. Функциите за отмяна и история също са много удобни: Affinity ви позволява да се върнете на повече от 8 000 стъпки! '

„Що се отнася до проектирането, потребителският интерфейс се чувства познат. Когато се премества от Photoshop, изглежда, че всеки иска да започне отначало, което може да представлява истинско предизвикателство. Това, което Affinity е направил, е да поддържа оформлението познато, като същевременно затяга всичко и скрива разсейките. Бях лесно да вляза направо и да започна да проектирам.

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

Не пропускайте нашите ръководства за използване на Пиксел човек , Лице за износ и Инструмент за писалка в Affinity Designer. Също така имайте предвид, че Serif също прави алтернатива на Photoshop, Афинитетна снимка и алтернатива на InDesign, Affinity Publisher ; всички те играят добре заедно.

Мокети и прототипи

07. UXPin

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

Има интегрирани библиотеки с елементи за iOS, Material Design и Bootstrap, както и стотици безплатни икони , за да ви помогне по пътя. UXPin също наскоро представи функции за достъпност, за да гарантира, че вашите дизайни остават в съответствие със стандартите WCAG, което ние приветстваме.

API Request е най-новото допълнение към възможностите за взаимодействие на UXPin. Функцията ви позволява да създадете прототип на приложение, което „говори“ с вашите продукти директно от вашия инструмент за проектиране - без нужда от код. Той работи, като ви позволява да изпращате HTTP заявки към външен API.

Можете да създадете първия си прототип в UXPin безплатно и ако е подходящо преминавате към платен месечен абонамент (налични са членства в екип). UXPin наскоро подобри интеграцията си със Sketch, така че може да бъде такъв, който да въведе в работния ви процес, ако сте фен на Sketch, който намира своите възможности за прототипиране ограничени.

08. Proto.io

Proto.io е най-доброто приложение, което позволява създаването на реалистични прототипи, които започват с груби идеи и завършват с напълно завършени дизайни. Инструментът ви предоставя и редица възможности за вашите проекти, включително подробни и персонализирани векторни анимации.

Можете да започнете с разработването на първоначални идеи с ръчно нарисуван стил, да ги преработите в телени рамки и да ги завършите с прототип с висока точност. Приставките Sketch и Photoshop помагат, ако искате да проектирате с други инструменти, но Proto.io се справя добре с процеса на проектиране от край до край. Други функции - например потребителско тестване - ще ви помогнат да потвърдите вашите проекти. Това е универсално решение с голям брой доверени марки, които вече го използват.

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

09. Balsamiq

Ако тогава търсите бързо, ефективно телеграфно кадриране Balsamiq е силно предложение. Можете бързо да разработите структура и оформления за вашите проекти с лекота. Плъзгане и пускане на елементи улесняват живота и можете да свързвате бутони с други страници. Чрез кабелна рамка можете бързо да започнете да планирате вашите интерфейси и да ги споделяте с вашия екип или клиенти. Balsamiq работи от 2008 г. и се гордее с неговия бърз, фокусиран подход без глупости.

10. ProtoPie

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

Наскоро пуснатата версия 4.2 съдържа две нови силно изисквани функции: сега можете да добавяте редактируеми SVG към вашите сцени и да намирате разстоянието между два слоя незабавно при избора.

11. MockFlow

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

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

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

12. Adobe Comp

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

Невероятно е, че Adobe не сметна за подходящо да включи директен износ в XD - лудост! - въпреки дългогодишна молба това се преразглежда за това, което изглежда завинаги. Експортирането във Photoshop обаче е вградено (заедно с Illustrator и InDesign) и след като бъдат направени ощипвания към вашия макет в повсеместния редактор на изображения, можете да експортирате оттам в XD. Въпреки тази нежелана допълнителна стъпка в потребителското пътуване на отдадения на Adobe почитател, Comp напълно заслужава включването му в този списък с възможностите си за навсякъде, лекота на използване и впечатляващ потребителски интерфейс.

13. Флинто

Flinto е инструмент за проектиране, който ви позволява да създавате уникални взаимодействия в рамките на вашите проекти. Можете да използвате редица жестове и да правите лесни преходи, като проектирате състоянията преди и след. Флинто просто разработва разликите и анимира вместо вас - супер полезно.

Имайте предвид, че това е само iOS, но ще се почувства познато, когато започнете да го използвате. Има документация онлайн, която да ви помогне по пътя, а импортирането от Sketch и Figma също е лесно.

14. Axure

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

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

15. Justinmind

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

16. Течност

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

17. Взаимодействие

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

Проектиране на рамки и библиотеки

18. Bootstrap

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

По време на писането, последната версия (4.4.1, стартирана през ноември 2019 г.) въведе нови отзивчиви контейнери, които са плавни до определена точка на прекъсване, и нови отзивчиви класове .row-cols за ефективно определяне на броя на колоните в точките на прекъсване.

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

Намери най-добрите безплатни теми за Bootstrap в нашето ръководство .

19. Стартиране 3

Ако харесвате Bootstrap, но не искате да се потопите в суровото нещо, Startup 3 е най-лесният начин; това е онлайн приложение с вградени шаблони и теми за изграждане на уебсайтове, базирани на Bootstrap 4 с решетка от 12 колони. Можете да изградите сайта си, без да пишете код, като използвате интерфейса плъзгане и пускане, но ще ви трябват известни познания по HTML и CSS, за да завършите нещата.

20. Vue.js

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

Погледнете пример за код, взет от документите на Vue, който използва потребителския вход и демонстрира елегантността на библиотеката. Ще започнем с HTML:

{{ message }}

Reverse Message

Забележете персонализирания v-on манипулатор, който извиква reverseMessage метод. Ето JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

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

21. Pattern Lab

Pattern Lab е красив дизайнерски инструмент, създаден от Дейв Ойзен и Брад Фрост. Тя се основава на концепцията за Атомен дизайн , което казва, че трябва да разделите дизайна си на най-малките части - атоми - и да ги комбинирате, за да образувате по-големи компоненти за многократна употреба - молекули и организми - които след това могат да бъдат превърнати в използваеми шаблони.

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

22. Материален дизайн

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

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

Присъединете се към нас през април 2020 г. с нашия набор от суперзвезди на JavaScript в GenerateJS - конференцията, която ви помага да изградите по-добър JavaScript. Резервирайте сега на адрес genereconf.com

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

• 1
• две

Текуща страница: Страница 1

Следваща страница Страница 2