roachhd/roachhd.github.io

---
layout: post
title: "Path To Inspiration"
category: posts
---

Design in any web project can be a long and arduous process. Here's a collection of links to help you. 

Enjoy!

## Concept 
<h5>These sites are good to get a general idea of possible layouts and style paths to take.</h5>
* [TheBestDesigns](http://www.thebestdesigns.com/) - General list of hand picked sites from across the web.
* [Awwwards](http://www.awwwards.com/) - More awesome sites of various styles.
* [Dribbble](http://dribbble.com/) - Snaps of icons, doodles, sites, and more from a talented group of people.
* [MinimalSites](http://www.minimalsites.com/) - Another list of sites, but on the much simpler side.
* [Httpster](http://httpster.net/) - A curated list of the best sites around the Internet.
* [siteInspire](http://www.siteinspire.com/) - Get inspired.
* [Designer News](https://news.layervault.com/) - The best design / development links from the 'net.

## Creation
<h5>These sites are good for building a basic framework for the site.</h5>
* Color
  * [ColorPicker](http://www.colorpicker.com/) - Simple yet affective. The name says it all.
  * [Kuler](https://kuler.adobe.com) - Easily create or view a custom color swatch for your site.
  * [Spectral](http://jxnblk.github.io/Spectral/) - Minimal color swatch creation.
* [Unsemantic](http://unsemantic.com/) - Provides a good grid framework for small to large projects.
* [MDN](https://developer.mozilla.org/) - Documentation for HTML, CSS, JS, etc.
* [Bootstrap](http://getbootstrap.com/) - Very popular framework for building modern websites and web apps.
  * [Bootswatch](http://bootswatch.com/) - A list of free themes for Bootstrap.
* [Iconmonstr](http://iconmonstr.com/) - A collection of free, simple icons.
* [Ionicons](http://ionicons.com) - Another great collection of free icons.
* [Subtle Patterns](http://subtlepatterns.com/) - A massive archive of free backgrounds for your projects.
* [Google Fonts](https://www.google.com/fonts) - Tons of free, easy to use webfonts.
* [Text to ASCII](http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20) - Add some sexy Easter eggs in your source code.
* [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/#) - A collection of CSS3 animation snippets.
* [Flat UI](http://designmodo.github.io/Flat-UI/) - A superb HTML and CSS framework for flat design. It's the juice.
* [CSS2Stylus](http://css2stylus.com/) - Convert your CSS to Stylus.
* [YMNNJQ](http://youmightnotneedjquery.com/) - See jQuery functions in natural JS. No libraries.
* [User Inter Faces](http://uifaces.com/) - Get ipsum images for user images.

## Tools
<h5>Every painter needs a brush. Well... Most do.</h5>
* Sublime Text
  * Themes
    * [Flatron](https://github.com/Codingbean/Flatron) - It's flat, purple, and hella sexy.
* [FileZilla](https://filezilla-project.org/) - For those who fear FTP in the terminal.
* [WinSCP](http://winscp.net) - Upload files to a MEAN stack or VPS server.
* [Sketch](http://www.bohemiancoding.com/sketch/) [OS X only] - A professional vector graphics app.

## Collaborate
<h5>Working with a team? These links are for you.</h5>
* [Cloud9](https://c9.io/) - An awesome, zen way to work with others in the cloud.
* [Gist](https://gist.github.com/) - Share code and text with others fast. Like a mini repository.
* [Scratchpad.IO](http://scratchpad.io/) - A simple, RTC tool for coding and previewing websites.
* [Red Pen](https://redpen.io/) - Share your design and get feedback seamlessly.
* [Invoice Ninja](https://www.invoiceninja.com) - Open source invoicing platform.

## Backends
<h5>Every awesome web app needs an awesome backend.</h5>
* [Firebase](https://www.firebase.com/) - A real-time front-end database for your sites.
* [DigitalOcean](http://digitalocean.com) - A cheap and quality VPS hosting company.

## Testing
<h5>Before you launch, these are good tools to make sure your site is ready for stardom.</h5>
* [Placehold](http://placehold.it/) - Generate custom placeholder images of any size.
* [Browserling](https://browserling.com/) - Cross-browser test your website.
* [CodePen](http://codepen.io/) - A free web editor in your browser.
* [WooRank](http://www.woorank.com/) - A review tool for SEO elements, W3 validation, and numerous other variables. Free basic service.
* [Yslow](http://yslow.org/) - Tool for analyzing and finding fixes for multiple causes of slow site loading.
* [Hurl.it](http://www.hurl.it/) - Make HTTP requests in the browser.
* [Localtunnel](http://progrium.com/localtunnel/) - Open localhost ports to the world.

## Good Reads
<h5>Need something to read in your spare time?</h5>
* [Smashing Magazine](http://www.smashingmagazine.com/) - A magazine for all things digital design.
* [CSS-Tricks](http://css-tricks.com/) - Awesome blog on anything and everything related to CSS.
* [Codrops](http://tympanus.net/codrops/) - Great collection of design techniques for modern web developmers and designers.
* [Insert HTML](http://www.inserthtml.com/) - A blog covering current and upcoming techniques and technologies for web developers.
* [1stWebDesign](http://www.1stwebdesigner.com/blog/) - A good, simple blog on web development and design.
* [A List Apart](http://alistapart.com/) - Guest bloggers and full books on topics from coding to business practices.
* [GoodUI](http://goodui.org/) - It's definitely not bad.
* [Mentor](http://mentor.so) - Get random advice from other designers and developers.

:heart: &amp; :coffee:

Please see [original repo](https://github.com/NoahBuscher/Inspire)