DESIGNER WEAPONS

TOOLING AND RESOURCES FOR UI, UX, WEB DESIGN & PRODUCTIVITY


2018 season:

New prototyping tool
https://hadron.app/ 

Add e-commerce and shopping cart to any item

https://snipcart.com/#!/

Canvas print with delivery in Canada

https://posterjack.ca/ 

Amazing and clear CSS flexbox guide

https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac

React Course

https://scrimba.com/g/glearnreact 

Slide Models for Google Slides

https://slidemodel.com/google-slides/

Amazing and slick background wallpapers and colors

https://www.xmple.com

Designing prototypes with X code

https://www.youtube.com/watch?v=2WJ8Jjis-Ow

Largest collection of cutout free PNG

https://www.freepngs.com/

Connect Woocommerce with Amazon affiliate prods

https://mythemeshop.com/blog/add-amazon-products-woocommerce/

Sell digital products - billing service

https://paddle.com/pricing/

Icons material for iOS

https://google.github.io/material-design-icons/#icons-for-ios

Funnel DIagrams

https://app.funnelytics.io

Batch SoundCloud download:

https://theseotools.net/soundcloud-downloader

Audio Player collection for your use

https://freefrontend.com/css-music-players/

Voice changer online app:

https://voicechanger.io/

Toolkit for mac os

https://developer.apple.com/design/resources/ 

20+ blog types to generate powerful content

https://www.digitalmarketer.com/blog/blog-post-ideas/

Excellent info product title and marketing creativity

https://www.digitalmarketer.com/

Barba, JS transitions the cool way:

http://barbajs.org

Learn HTML,CSS and JS free

https://dash.generalassemb.ly/ 

Amazing 3d Car Visualizer

http://carvisualizer.plus360degrees.com/threejs/ 

Download all your Data from Docs -  Google Takeout

https://takeout.google.com/settings/takeout

Style Google Maps:

https://mapstyle.withgoogle.com 

How to use Adwords:

https://www.youtube.com/watch?v=zdiXrKXK5Xw

Software reviews and comparissons

https://www.softwareadvice.com 

Draggable - JS library for drag and drops, thick design
https://shopify.github.io/draggable/ 

Codepen Podcasts

https://blog.codepen.io/radio/

Free pictures

http://www.unsplash.com 

Online photoshop

https://www.photopea.com/

Sketch cards to design webbies and more

https://freebiesbug.com/sketch-freebies/flowchart-kit/

Curso de CSS grid excelente en Espanol:

https://www.youtube.com/watch?v=AxVXpS6PyRE

Amazing powerful 3d designs with tree.js

http://cabbi.bo/

Design in the browser - article

https://usersnap.com/blog/guide-designing-in-the-browser/

Article: HTML and CSS are design tools

https://usersnap.com/blog/html-css-design-tools/

Number augmenter scroller

http://demo.tinywall.net/numscroller/

Priority Guides

https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes 

Article Spinner

https://best-free-online-article-rewriter.fatsage.com/ 

CSS Grid Generator

https://cssgr.id/

https://blog.continuum.cl/every-ui-designer-needs-to-learn-react-heres-why-f2b8c2ff2c86?gi=edae1031c709

Capture images from youtube Video

http://www.youtubescreenshot.com/

Cool site for agency

https://valnetinc.com/en/get-in-touch

Inspiration from CSS design awards

https://www.cssdesignawards.com/

Frameworks Ranked by community votes

https://sitecake.com/resources/css-frameworks.html

Coding accessible for designers and artists
https://p5js.org/ 

Tutorials for web tech

https://hackr.io/

Format CSS Code. 1 Line per Style:

http://www.cssportal.com/format-css/index.php

Easing animation reference guide

http://easings.net/ 

Free Stock images for your projects

https://www.freepik.com/
http://www.picjumbo.com
https://pixabay.com/

Article on creating story frames, as starting point for pages that require storytelling.

https://uxdesign.cc/storyframes-before-wireframes-starting-designs-in-the-text-editor-ec69db78e6e4 

Amazing Designer Cheat Sheets:

https://websitesetup.org/html5-cheat-sheet/

QuickTips tooltips for your webs

https://speckyboy.com/free-css-tooltip-snippets/

Material Design Mix with Bootstrap sample template

http://trendytheme.net/demo/matrox/op-index-book.html

WaveSourfer sound cloud like soundwave for interface

https://wavesurfer-js.org/

Material Design Elements

https://bootsnipp.com/snippets/featured/material-design-tab-style

Official site for web components:

https://www.webcomponents.org

Admin Templates made in bootstrap and with material themes:

https://colorlib.com/wp/html-admin-templates/

This could be better..

Simple brutal applications

https://thiscouldbebetter.neocities.org/texteditor.html

All APIS you want to use:

https://www.programmableweb.com/

Google Express Layout - flat

https://express.google.com

CSS GRID course

https://cssgrid.io/

Brutalist art direction article on styl eguides and reference

http://redoctober.com/blog/styleguides-the-other-side-of-webdesign

Grid Layouts learn by example - professional samples, simple and effective with all you need

https://gridbyexample.com/

Wallies

http://thewallpaper.co/futuristic-world-digital-art-wallpaper-hd-wallpapers-download-amazing-artwork-pictures-samsung-phone-wallpapers-display-digital-photos-1920x1080/

3D models

https://3d.io/

Lorem Picsum - image fillers and placeholdwers

https://picsum.photos/ 

Excellent timpanus guide to grid

https://tympanus.net/codrops/css_reference/grid/

Very cool brutal minimal design tool

https://blot.im/

Grid Layouts

https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

Bootstrap Free Editor with sweet components:

https://mobirise.com/bootstrap-builder/

Super WebDesigner powers with CSS libs and here the directory to all the shit:
http://cssdb.co/

Snazzy maps for google

https://snazzymaps.com/

VUE guide by CSS Tricks

https://css-tricks.com/intro-to-vue-5-animations/

Vue Animations:
https://www.youtube.com/watch?v=Vp37fWKOlV4 


Vue Tutorials

https://vuejsexamples.com/

Angular exercises for designers

http://plnkr.co/users/simpulton/plunks/tagged/ng-designers

Sequence.js the modern slider:

https://www.sequencejs.com

Taggle: create tag boxes on text fields:
https://sean.is/poppin/tags 

Amazing microlib to make progress bars:
http://github.dixpix.de/progress.js/

MNircrolibs to accomoplish things in web front end
http://microjs.com/ 

Materialize CSS

http://materializecss.com/

Article on Sketch libraries vs UI Design Systems.

http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/

Resume OK, samples of resumes for tech people

https://www.resumeok.com/

Javascript Hero, mini class

http://www.jshero.net/

Push Sidebar in bootstrap 4 for your projects

https://bootstrapious.com/p/bootstrap-sidebar


Eye opener Software Dev Explainer:
https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea

A-frame GUI Examples:
https://rdub80.github.io/aframe-gui/examples/index.html

CarUX WebVR platform

http://www.plus360degrees.com/uxcars/

Renault Space Visualization in WebGL

http://renaultespace.littleworkshop.fr/

Web VR Resources

http://ottifox.com/resources.html

Bootstrap Material Design

https://mdbootstrap.com/layout/bootstrap-layout/#introduction 

Javascript for Cats | Easy to learn JS
http://jsforcats.com/

--------- 2017 session

Photosphere Viewer

http://photo-sphere-viewer.js.org/

Live designer canva alternative free

https://www.fotor.com/

Grab 360 images from flqr equirectasngular

https://www.flickr.com/groups/equirectangular/

Grab 360 panoramas out of Google StreetView

https://streetviewdownload.eu/ 

A-frame examples of WebVR
https://altspacevr.github.io/aframe/examples/ 

Fantastic Examples of Fonts against BG

http://tobiasahlin.com/typesource/

Animated Spinners and Loaders for your web page

http://tobiasahlin.com/spinkit/

Cloud Media Hosting Service

https://cloudinary.com/console/media_library

CSS new tutorial

http://learnlayout.com/

MAC Ios Design Guide

https://developer.apple.com/design/resources/#ios-apps

Webb VR buildup

https://vizor.io/

3d objects for sketchup

https://3dwarehouse.sketchup.com/ 

3d objects to build the 3d web
https://poly.google.com/ 

Brutalist Framework Massive library

http://www.brutalistframework.com/bfx

Behance Showcase and find Creative Work

https://www.behance.net/

Brutalist Inspiration

http://brutalistwebsites.com/


Brutalist Pictures

View pictures of brutalist Design

Brutalism Inspiration:

https://www.carbonbeauty.com/ 

A-Frame, Web VR:

https://aframe.io/

Annotate Websites, comment etc

https://web.hypothes.is/

About brutalism and anti design

https://www.nngroup.com/articles/brutalism-antidesign/ 

Free high quality stock pics:

https://unsplash.com/

Dev Reference Handbook

/www.alvit.de/handbook/index.php

Free Video Covers

http://www.coverr.co/#code

Make Custom Mailforms Forms Easy

https://formspree.io/?email+=

HTML dog with examples

www.htmldog.com

Amazing experiment of experiments

http://Fff.cmiscm.com   

Create pages like a pro right away with this dragger

www.snappages.com

Unit Conversion

http://www.unit-conversion.info/

Map based charts for your website

https://developers.arcgis.com/

Capture Heatmaps from users and identify patterns.

http://www.hotjar.com

Create lists and tasks
http://trello.com

Online marketing collateral designer

http://canva.com

Screen Capture

http://screencastomatic.com

Print Screen

http://prnt.sc/

Create Google Doc

http://docs.google.com/document

Optical Character Recognition

http://www.onlineocr.com 

How to Do email sniper and extract - mail hunter + snagit

https://www.youtube.com/watch?v=nS3ur2cEy6I 

Word counter with amazing break down

https://wordcounter.io/

Free Videos for your projects

https://videos.pexels.com/ 

Free Images for your projects

https://www.pexels.com/ 

Ionic Creator

https://creator.ionic.io/app/dashboard

WebFlow - web builder for bootstrap

https://webflow.com/designer 

Bootstrap cheatsheet for version 4

https://hackerthemes.com/bootstrap-cheatsheet/#card__bg-primary 

Booty Color Selector:

http://bootstrap-colorselector.flaute.com/ 

Bootstrap Color Picker

https://farbelous.github.io/bootstrap-colorpicker/ 

WORD COUNTER JAVASCRIPT

https://jsfiddle.net/deepumohanp/jZeKu/ 

SLIDEOUT MENU:

https://slideout.js.org/ 

CUSTOM BOX FOR MODAL STYLES

http://dixso.github.io/custombox/ 

SLIP.JS FOR REORDERING LISTS

https://kornel.ski/slip/ 

 

BOOTY $ STARTER TEMPLATE

https://rundiz.github.io/bootstrap4-basic-template/ 

SOME DISTRESS RELAX:

http://onelinefun.com/puns/ 

MOTION DESIGN UI IN CSS

http://waaark.com/ 

PARTICLE LIB

https://github.com/VincentGarreau/particles.js/ 

NEWER - fun template sampler

http://themebang.com/templates/neuer-v1.2/# 

SUPERCOOL TEMPLATE FOR COMPANY PORTFOLIO

http://themetorium.net/demo/html/wrapbootstrap/red/v1.4/theme/index.html# 

ANIMSITION -  transitions

http://git.blivesta.com/animsition/ 

CROSSCOVER - amazing slider with cool new way effects

http://git.blivesta.com/crosscover/ 

Clonable: Grid Portfolio simple cool

https://madg.com/work/ 

Angular Book to start, from novice to ninja:

https://play.google.com/books/reader?id=37CjBgAAQBAJ&printsec=frontcover&output=reader&hl=en&pg=GBS.PP1 

Animation Libraries & Tools

https://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html 

Amazing Angular Plunks to learn and get started

http://plnkr.co/users/simpulton/plunks/tagged/ng-designers 

Learning Angular for Designers

https://www.youtube.com/watch?v=2rA9oAvpqDY 

Origami Prototyper

http://origami.design/documentation/ 

amazing tool to make sites based on html5 up

https://carrd.co/build 

skekl framework used in html5 up sites:

https://github.com/ajlkn/skel 

Animated Libs for Dersignerd and devs:

https://codegeekz.com/15-best-javascript-animation-libraries-for-developers/ 

Interactive Video framework:

https://h5p.org/getting-started 

Video Sources:

https://www.videvo.net/ 

Slider with no deps:

https://pawelgrzybek.com/siema/ 

AlvaroTrigo: developer with few JUI libraries such as fullpage.js

http://alvarotrigo.com/ 

Video Background Easy JS

http://vodkabears.github.io/vide/ 

Venn Js - library to make venns

https://github.com/benfred/venn.js 

Bootstrap CheatSheet:

https://hackerthemes.com/bootstrap-cheatsheet/ 

Free, fast Webhost to test your work on the webz:

https://www.000webhost.com/members/website/list 

3d Bold Nav:

https://codyhouse.co/demo/3d-bold-navigation/index.html 

NavNav examples of navigation:

http://navnav.co/ 

Ditto: inspiring layout page to clone

http://www.dittodc.com/ 

Nav Pusher

https://chrisyee.ca/pushy/# 

Reveal JS - Slide Framework:

http://lab.hakim.se/reveal-js/#/ 

Swedish JS developer amazing portfolio site

http://lab.hakim.se/meny/?u=http://hakim.se 

Flowtime

Online presentation framework for slides

Fullpage JS - lib for ful page animations

https://www.javascripting.com/view/fullpage-js 

Anime JS for sick animations on the web

http://anime-js.com/documentation/ 

Howler JS for fantastic audio players

https://howlerjs.com/ 

Khan academy, the world of js libraries:

https://www.khanacademy.org/computing/computer-programming/html-css-js/using-js-libraries-in-your-webpage/a/the-world-of-js-libraries 

Coverr

http://www.coverr.co/#code

The world of javascript libraries to power up your webs:

https://www.javascripting.com/ 

chart maker simple

https://www.meta-chart.com/area#/display 

Kindling Framework:

https://timothylong.com/kindling/ 

Hover FX library to use on buttons

http://ianlunn.github.io/Hover/ 

Hi Charts Color Reference:

http://api.highcharts.com/highcharts/chart.events 

Hi Charts visual editor:

https://cloud.highcharts.com 

Framer:

www.framer.com 

Principle:

http://principleformac.com/ 

Sketch Resources

https://www.sketchappsources.com/resource/download-2592.html 

Wireframe CC tool:

https://wireframe.cc 

Comparison of Charts

http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries 

AnyChart

http://www.anychart.com/ 

Social Compare - excellent tool to compare resources

http://socialcompare.com/ 

Full Screen Navigation:

http://codepen.io/danbhala/pen/EKoNrO 

AmCharts

https://www.amcharts.com/ 

Chart Comparisons:

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks 

CSS Tricks:

https://css-tricks.com/semantic-class-names/ 

Babylon JS - 3d objects in Web GL

http://www.babylonjs.com/ 

CDN for Javascript libs, plenty of resources:
No more localfiles, go to the world of external resource

https://cdnjs.com 

D3 Graphics

Create Data visualization graphics that will blow you away

https://d3js.org/   

Examples of Data Visualizations

http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/ 

Best data visualization libraries for Using in Web Projects

https://thenextweb.com/dd/2015/06/12/20-best-javascript-chart-libraries/#.tnw_xzwwtsvR 

Amazing Dashboard Designs for Inspiration:

http://designrfix.com/design/dashboard-design 

**Customizables Examples of General Charts from Chartist

http://gionkunz.github.io/chartist-js/examples.html 

Google Charts for Reference and Sampling

https://developers.google.com/chart/interactive/docs/gallery 

Colored Google Maps for Designing Geo Data Driven UI

https://snazzymaps.com/ 

Bootstrap Sidebar

https://blackrockdigital.github.io/startbootstrap-simple-sidebar/# 

15 amazing javascript chart libraries to use in your projects

https://www.sitepoint.com/15-best-javascript-charting-libraries/ 

HighCharts: Dynamic fantastic charts to use in your projects

http://www.highcharts.com/demo 

Amazing Polar clock graphic

http://bl.ocks.org/mbostock/1096355 

Zingcharts amazing powerful and beautiful includes venn and others

https://www.zingchart.com/docs/getting-started/your-first-chart/ 

Graphics and charts , Recommended by software director

https://www.tableau.com/ 

Tools to embed charts online:

http://www.addictivetips.com/web/3-tools-to-create-embed-graphs-online/ 

Chartblocks online chart builder

http://www.chartblocks.com/en/