СПОДЕЛИ

ColorsБои

COLOURlovers: Инспирација за палета на бои која е креирана и споделена од корисниците.

ColorPicker: Алатка за избирање на боја.

Color Hex: Бесплатна алатка за боја која ви обезбедува информации за секоја боја.

Flat UI Colors: Веб апликација која ви помага да копирате бои од рамен кориснички интерфејс.

Contrast Ratio: За лесно одредување на соодносот на контраст.

Color Safe: Палети на бои базирани на WCAG упатствата.

Color Contrast Checker: Проверете го контрастот на боја анализирајќи ја разликата помеѓу бојата на позадината и она што доаѓа над неа.

Colllor: Генератор на палети на боја.

Paletton: Алатка за креирање комбинации на бои.

Colorpeek: Набрзина прегледајте, споделете и конвертирајте една или повеќе CSS бои, вклучувајќи хексадецимални вредности, RGB, HSL, RGBA и клучни зборови за боја.

Colourcode: Алатка за дизајнери која ви дозволува интуитивно да комбинирате бои.

Chrome Daltonize!: Далтонизацијата е техника на прикажување детали на корисници кои не распознаваат бои, со што им се овозможува да го видат она што во спротивно не би можеле.

Flat UI Color Picker: Рамен избирач на бои кој ви дава одлични бои за рамни дизајни.

SassMe: Алатка за визуелизирање на SASS функции за боја.

HEX To RGB: Конвертирајте хексадецимални бои во RGB.

HSL to RGB: Конвертор на HSL во RGB / RGB во HSL.

Colour Scheme Calculator: Изберете почетна боја за да го пресметате нејзиното тркало на бои вклучувајќи тријада, комплеметарни бои и аналогни бои со варијации на заситеност и светлина.

 

CSS GeneratorsCSS генератори

Ultimate CSS Gradient Generator: Генератор на CSS прелевања.

Colorful CSS Gradient Background Generator: Генерирајте CSS позадина.

EnjoyCSS: Сé во едно CSS генератор.

CSS MenuMaker: Креирајте навигација на прилагодлив дизајн.

On/Off Flip switch: Генерирајте CSS3 прекинувачи за вклучување и исклучување.

CSSmatic: Генератор за прелевања, заоблени рабови, сенка на поле и текстура на шум.

Ajaxload: GIF генератор за Ajax вчитување

Ui Parade Live Tool: Креирајте копчиња, формулари, икони и ленти.

CSS Table: Генератор на CSS табели.

CSS Triangle: Генератор на CSS триаголници.

CSS Arrow Please: Генератор на CSS стрелки.

Patternify: Генератор на CSS мотиви и шари.

CSS3 Patterns Gallery: Галерија на CSS3 шари.

Critical Path CSS Generator: Забрзајте го времето на визуелно обработување на вашата страница.

Button Generator: Генератор на CSS копчиња.

Layout Generator: Креирајте CSS распоред.

Tridiv: Уредувач за креирање на 3D форми во CSS.

Trianglify: Генерирајте триаголни мрежи кои можете да ги искористите како SVG слики и CSS позадини.

Delaunay Triangle: Креирајте триаголни шари кои може да се искористат како позадини.

Bear CSS: Генерирајте CSS образец кој ги содржи сите HTML елементи и класи дефинирани во вашата ознака.

Stylie: Забавна алатка за CSS анимации.

 

Calculator & ConverterКалкулатори и конвертери

CSS2Less: Конвертирајте ги старите CSS датотеки во LESS датотеки.

PXtoEM: Конвертирајте пиксели во EM

RWD Calculator: Претворете го вашиот дизајн во прилагодлив.

DPI Love: Откријте ја DPI/PPI на секој екран.

CSS Inliner: Автоматски вметнете го CSS-от на вашата е-пошта.

Code Beautify: Разубавете го, валидизирајте го, минимизирајте го, анализирајте го, и конвертирајте го вашиот JSON, XML, JavaScript, CSS, HTML, Excel

Density Buckets: Конвертор на густина на екран за Android и iOS

Pixel Density Converter: Ви кажува како да скалирате графики во четири групи на густина.

Is This Retina?: Калкулатор за DPI/PPI приказ.

Specificity Calculator: Визуелен начин за да ја разберете CSS специфичноста/прецизноста.

NTH-Test: Тестер за н-то дете и н-ти тип.

Lessify: Конвертор на CSS во LESS и алатка за учење LESS.

 

Typography & FontТипографија и фонтови

Google Fonts: Open source веб фонтови.

Font Squirrel: Рачно избрани, бесплатни веб фонтови.

Dafont: Архива на фонтови кои можете бесплатно да ги превземете.

Font Space: Превземете бесплатни фонтови.

Type Genius: Најдете ја совршената комбинација на фонтови.

Golden Ratio Typography Calculator: Откријте ја совршената типографија за вашиот веб сајт.

What Font Is: Идентификувајте фонт од слика.

Typetester: Споредете веб фонтови од Аdobe Edge, Google и Typekit

Tiff: Откријте ја разликата помеѓу Google фонтовите

Wordmark.it: Прегледајте го исписот на фонтови за селектиран збор.

TypeWonder: Тестирајте ги веб фонтовите на активен веб сајт.

Fit Text: jQuery додаток за веб текст.

 

Icons

Икони

Font Awesome: Скалабилни векторски икони кои може веднаш да се прилагодуваат.

Material Design Icons: Материјален дизајн-комлет на системски икони од Google Design

Iconogen: Генерирајте икони за Windows 8 Tiles, Apple Touch, Android и iOS.

Marka: Убави икони кои може да се трансформираат.

Maki: Сет на икони за веб картографија.

Batch: Повеќе од 300 икони за веб и дизајн на кориснички интерфејс.

Fontello: Генератор на фонт за икони.

Fontastic: Креирајте сопствен фонт за икони.

Icon Melon: Библиотека на SVG икони за веб.

Entypo: Комплет од 411 внимателно изработени, премиум пиктограми од Даниел Брус.

Gemicon: Сет од повеќе од 600 бесплатни икони. Доаѓа во три различни големини (16px, 32px, 64px)

Typicons: Бесплатни векторски икони вградени во веб фонт кои можете да ги употребите во вашиот кориснички ионтерфејс.

Iconmonstr: Голема колекција на икони на глифи од германски уметник.

Octicons: Фонт за икони лансиран од GitHub.

GlyphSearch: Пребарајте икони од Font Awesome, Glyphicons, IcoMoon, Ionicons, и Octicons.

 

Analyze Website Style

Анализирање стил на веб сајт

Stylify Me: Прегледајте го стилот на еден веб сајт, тука вклучувајќи ги боите, фонтовите, големината и празниот простор.

StyleStats: Едноставна алатка за собирање на CSS статистики на веб сајтот.

Colours: Откријте ја најчестата боја или нијанса на веб сајтот.

Type-o-matic: Екстензија на прелистувач која ги наоѓа сите фонтови на една страница.

SnappySnippet: Лесно извлечете ги CSS и HTML од селектираниот елемент.

 

EditorУредувачи

CodePen: Најнапредни техники со изворен код кој може да се уредува.

JSFiddle: Тестирајте и споделете  JavaScript, CSS, HTML или CoffeeScript на интернет.

JS Bin: Активен рastebin за HTML, CSS и JavaScript и претпроцесори.

CSSDeck: Колекција на Awesome CSS и JS Creations за frontend развивачи и дизајнери.

Dabblet: Интерактивна алатка за CSS и споделување.

Liveweave: Liveweave е HTML5, CSS3 и JavaScript за веб дизајнери и развивачи.

Adobe Edge Reflow: Алатка за дизајн која го надополнува вашиот работен тек за да ви помогне да креирате убави прилагодливи дизајни за сите големини на екран.

webflow: Алатка за градење на веб сајтови со повлечи и спушти опција.

Macaw: Обезбедува иста флексибилност како и вашиот омилен уредувач на слики, но пишува и семантичко HTML и многу концизно CSS.

 

Developer ToolsАлатки за развој

Chrome DevTools: Сет на вградени алатки во Google Chrome алатки наменети за креирање и дебагирање.

Grunt: JavaScript Task Runner за автоматизирање на задачите.

LiveReload: CSS уредувања и менување на слики со прилагодувања директно врз сликата без да мора да кликнете на копчето за освежување за да ги видите измените.

Bower: Решение на проблемот на front-end пакетот.

Yeoman: Екосистем на генератор, во основа додаток кој може да се извршува со `yo` команда за завршување на цели проекти или корисни делови.

Can I Use: Модерни табели за поддршка на прелистувач наменети за front-end веб технологии.

HTML5 Please: Погледнете во HTML5, CSS3 и откријте дали се подготвени за употреба.

CSS Values: CSS својства и вредности.

CSS Triggers: Непроценливо упатство за тоа како CSS влијае на изведбата.

 

TestingТестирање

W3C Markup Validation: Ја проверува валидноста на ознаките на веб документите во HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Го проверува HTML изворниот код и открива прекршувања на дефинираниот стандард на програмирање.

W3C CSS Validation: Ги проверува (CSS) и (X)HTML документите со листи на стилови.

CSS Lint: Ги посочува проблемите со вашиот CSS код.

JS Lint: JavaScript програма која бара проблеми во JavaScript програми.

Pesticide: Дебагирање на CSS распоред.

PhantomCSS: Визуелно/CSS тестирање со PhantomJS

CSS Critic: Регресивно тестирање на CSS

DiagnostiCSS: Визуелно детектирање на потенцијално бевалидни или непристапни HTML ознаки.

QUnit: JavaScript работна рамка за тестирање.

Dromaeo: JavaScript тестирање на изведба.

Browsershots: Тест за тестирање на повеќе прелистувачи.

Responsinator: Проверете како вашиот сајт ќе изгледа на најпопуларните уреди.

Opera Mobile Classic Emulator: Употребете го селекторот на профил за да создадете повеќе Opera Mobile Classic инстанци со дефинирана резолуција, густина на пиксели и кориснички интерфејс.

 

PerformanceПерформанси

Pingdom Website Speed Test: Тестирајте го и анализирајте го времето на вчитување на една активна страница.

WebPagetest: Тест за брзина на веб сајтови од различни локации низ светот.

PageSpeed Insights: Го анализира веб сајтот и предложува начини како да го направите побрз.

GTmetrix: Ја оценува изведбата на сајтот и обезбедува препораки за решавање на проблемите.

YSlow: Анализира и нуди предлози за подобрување на изведбата на страницата.

Perfmap: Мапа на изведба на ресурси вчитани во прелистувачот.

 

OptimizationОптимизација

CSSCSS: Ви помага да откриете кои сетови со правила имаат дупликат декларации.

Helium: Јavascript алатка за скенирање на вашиот сајт и прикажување на неупотребениот CSS.

CSS Tidy: Open source CSS парсер и оптимизатор.

CSS Compressor: Компресирајте го вашето CSS за да ја подобрите брзината на вчитување.

CSS Dig: Погледнете ги сите ваши CSS својства, нивната фрекфенција и варијации.

JavaScript Minifier: Минимизирајте ја вашата JavaScript

FF Subsetter: Намалете ја големината на датотеката за фонт за да ја оптимизирате употребата на ширината на опсегот.

Compressor.io: Намалете ја големината на вашите слики, притоа задржувајќи го високиот квалитет.

Prefix free: Додадете го моменталниот префикс на прелистувач на CSS кодот по потреба.

Sprite Cow: Генерирајте CSS за листи со мали сликички (спрајт листи).

TinyPNG: Напредна компресија со загуба за PNG слики.

Adaptive Images: Ја одредува големината на екранот на вашиот корисник и автоматски креира, кешира и испорачува соодветни верзии на слики.

 

FeedbackФидбек

Bounce: Додадете фидбек на дизајн и споделете го.

Marqueed: Сликајте, обележувајте и дискутирајте слики.

Design Drop: Алатка за собирање фидбек за дизајн.

Peek: Погледнете 5 минутно видео за тоа како еден човек го употребува вашиот веб сајт.

 

InspirationИнспирација

Call To Idea: Примери, дизајни, компоненти, идеи, шари, јазичиња, приклучници, регистри, листи, галерии, новини.

Land Book: Одлична галерија на страници на пристигнување.

UX Archive: Најинтересните кориснички текови од iPhone 4S и iPhone 5.

UI Parade: Каталог за инспирација за дизајн на кориснички интерфејс.

ZURB U: Најдете инспирација за дизајн на кориснички интерфејс.

UX Porn: Модели на дизајн за кориснички интерфејс и образци на жичени модели.

UI Patterns: Модели на дизајн за кориснички интерфејс.

Pttrns: Колекција на модели за мобилен кориснички интерфејс.

TabPattern: Модели на кориснички интерфејс за таблет.

UICloud: Пребарувач за дизајн на кориснички интерфејс.

Use Your Interface: Библиотека на интерфејс за премин и модели на дизајн на интеракција.

Niice: Пребарувач за инспирација за дизајн.

 

Wireframes, Mockups & PrototypesЖичани модели, модели и прототипи

Origami: Бесплатна алатка за дизајнирање на модерен кориснички интерфејс креиран од Facebook.

Cacoo: Креирајте дијаграми, мапи на сајт, дијаграми на тек, мапи на ум, жичени модели, UML дијаграми и мрежни дијаграми.

Marvel: Претворете ги вашите Dropbox или десктоп слики во прототипи за веб и мобилни апликации за многу уреди и добијте фидбек.

Placeit: Креирајте модели на iPhone и iPad.

MockFlow:Услуги на интернет за планирање, креирање и споделување работи за дизајнер.

Justinmind: Интерактивни жичени модели за веб и мобилен.

Wireframe.cc: Бесплатна, минимална алатка за правење жичени модели.

 

Design News & CommunityНовости и Заедница

/r/web_design: Веб дизајн subreddit.

/r/design: Дизајн subreddit.

/r/usability: Subreddit за корисничко искуство, дизајн на интерфејс или човечки фактор.

/r/userexperience: Subreddit за дизајн на корисничко искуство.

Stack Exchange: Graphic Design: Прашања и одговори за професионалци, студенти и ентузијасти за графички дизајн.
Stack Exchange: User Experience: Прашања и одговори за стручњаци за корисничко искуство.

Front-end Front: Место каде front-end развивачите може да поставуваат прашања, да споделуваат интересни линкови и да ја прикажуваат сопствената работа на остатокот од остатокот на заедницата.

Pineapple: Архива на туторијали, алатки и средства за развивачи и дизајнери.

Lockerdome: Социјална мрежа.

Designer News: Заедница на дизајнери и развивачи.

DesignFloat: Новости и совети за веб дизајн.

The Web Blend: Заедница на дизајнери и развивачи.

Design News: Сајт на кој изобилува со текстови, ресурси и туторијали напишани од дизајнери и развивачи.

 

PortfolioПортфолио

Behance: Водечка платформа на интернет за да прикажете и откриете креативна работа.

Dribbble: Место на кое можете да го покажете, раскажете, промовирате, откривате и истражувате дизајнот.

Cargo: Платформа за лични објавувања која има за цел да креира пристапни алатки и контекст за подобрување на изложеноста на талентираните поединци на интернет.

DeviantArt: Заедница на интернет која прикажува најразлични форми на уметност креирана од корисникот.

 

WordPress ThemesWordPress теми

Optimizer: Лесна и прилагодлива тема за повеќе намени за луѓе кои не сакаат да програмираат.

Pinnacle: Модерен рамен дизајн со целосно прилагодлива тема.

Customizr: Прилагодлива тема со рамен дизајн. Добро документирана и лесно проширлива.

Asteria: Чиста прилагодлива тема со убав лизгач, и опции Narrow и Wide Layout.

Storefront: Дизајнирана и развиена од WooThemes за WooCommerce проекти.

 

ResourcesРесурси

Microjs: Откријте ги микро-работните рамки и микро-библиотеките.

Vector Open Stock: Бесплатни вектор графики.

Buttons: Библиотека со CSS копчиња изградена со Sass и Compass.

Bootflat: Open source комплет за рамен кориснички интерфејс базиран на работната рамка Bootstrap 3.3.0.

Animate.css: Библиотека за CSS анимации.

CSS Shake: CSS графики и икони за вашата страница или апликација.

Subtle Patterns: Бесплатни шари со текстури за поплочување.

Placehold.it: Полиња за слики.

Holder.js: Полиња за слики од клиентска страна.

Hammer.js: Додадете гестикулации со повеќе допири за вашата веб страница.

Textillate: Едноставен додаток за CSS3 анимации за текст.

Timeline JS: Убаво изработени временски ленти кои се лесни и интуитивни за употреба.

Modernizr: JavaScript библиотека која открива HTML5 и CSS3 опции во прелистувачот на корисникот.

Isotope: Креирајте портфолио кое се филтрира за вашиот веб сајт.

Polymer: Со него можете да креирате копчиња за комплетна апликација на десктоп и мобилен.

CodyHouse: Бесплатна библиотека на HTML, CSS и JS.

Cheetyr: Колекција на листи за помош и кратенки за дизајнери и развивачи.

Leaflet: Open-Source JavaScript библиотека за интерактивни мапи за мобилен.

Modest Maps: Бесплатна библиотека на интерактивни мапи.

Templated: Колекција на 846 бесплатни CSS и HTML5 образци за сајт, дизајнирани и креирани од Cherry + AJ.

GraphicBurger: Ресурси за дизајн кои се нудат бесплатно на заедницата.

Највредниот дар кој го поседуваат луѓето е грижата и споделувањето.
Споделете го тоа што го имате, грижете се за тие кои ги имате.

Ако ти се допадна статијава, сподели ја со своите пријатели.
Ќе ги израдуваш и нив и нас.

Ти се допадна овој напис?
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.