WEBDESIGN BASICS
INTRODUCTION TO WEBDESIGN
Design course in form of articles: https://hackdesign.org/lessons
Learn more about flat design: http://www.webdesignerdepot.com/2013/12/infographic-flat-design-vsskeuomorphism/
TYPOGRAPHY
Google fonts: tons of free, easy to use webfonts: https://www.google.com/fonts
Fonts for free download: http://www.fontsquirrel.com/
List of best free fonts for designers: http://www.crea.vebloq.com/graphic-design-.ps/best-free-fonts-fordesigners-1233380
Very good for finding good font combinations: http://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html
Find even more good font combinations: http://fontpair.co/
Learn even more about typography: http://www.typogui.de/
COLORS
Cool Flat UI colors: http://flatuicolors.com/
Even more cool colors: http://getuicolors.com/
Find variations of colors (very good): http://www.0to255.com/
Adobe Color CC, play around with colors: https://color.adobe.com/create/color-wheel/
Paletton, play around with colors: http://paletton.com
Beautiful gradients for webdesign: http://uigradients.com/
Learn about colors: http://www.rocket-design.fr/color-template/
Learn even more about colors: http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-webdesigners–webdesign-1437
WORKING WITH IMAGES
Basically all free images in one place: http://thestocks.im/
Images from many sources: http://www.pexels.com/
Unsplash, a must see: https://unsplash.com/
Food images: http://foodiesfeed.com/
A curated collection of free resources: http://www.imcreator.com/free
Huge pattern library: http://thepatternlibrary.com/
Subtle patterns: http://subtlepatterns.com/
Free videos: http://mazwai.com/
Techniques for working with images in CSS: http://css-tricks.com/design-considera.ons-text-images/
WORKING WITH ICONS
Beautiful icon font: http://ionicons.com/
Another beautiful icon set: http://entypo.com/
Font awesome icons: http://fontawesome.io/icons/
Big collection of SVG fonts: http://iconmonstr.com/
Yet another icon font: http://icon-works.com/
USER EXPERIENCE
UX crash course in 31 days: http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals
UI tricks that can lead to higher conversion rates: http://www.goodui.org/
GETTING INSPIRED
Find beautiful websites: http://www.siteinspire.com/
Dribble, show and tell for designers: https://dribbble.com/
Behance: https://www.behance.net/
Inspiration for one-page websites: https://onepagelove.com/
Even more webdesign inspiration: http://www.admiretheweb.com/
Flat design inspiration: http://flatdsgn.com/
Collection of specific design elements and patterns: http://patterntap.com/
Another collection of design elements: http://calltoidea.com/
Google fonts inspiration: http://femmebot.github.io/google-type/
Some amazing designers on Dribble:
https://dribbble.com/victorerixon
https://dribbble.com/benske
https://dribbble.com/peterfinlan
https://dribbble.com/Radium
EVEN MORE RESOURCES
Huge list of front-end development resources: https://github.com/dypsilon/frontend-dev-bookmarks
Curated resources for everything creative: http://oozled.com/
DIVE INTO HTML
The best text editor for front-end web development in the world: http://brackets.io/
Complete HTML reference: http://www.w3schools.com/html
HTML special characters: https://css-tricks.com/snippets/html/glyphs/
FORMATTING WITH CSS
Complete CSS reference (this is really good): http://tympanus.net/codrops/css_reference/
Important CSS selectors: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–
net-16048
Cool things you can do with Google Chrome Developer Tools: http://www.labnol.org/solware/chrome-dev-tools-tutorial/28131/
THE KILLER WEBSITE PROJECT
REAL-WORLD STEPS TO A FUNCTIONAL WEBSITE
- Define your project (goal and audience)
- Plan out everything
- Sketch your ideas before you start designing
- Design and develop your website with HTML and CSS
- It’s not done yet: optimization
- Launch the masterpiece
- Site maintenance
Periodic table of web design process: http://www.newdesigngroup.ca/blog/web-design-process-infographic/
LINKS USED IN OUR PROJECT
Free, simple and easy-to-use fluid grid: http://www.responsivegridsystem.com/
Get random user profiles: http://randomuser.me/
Subtle hover effects: http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
Up-to-date browser support tables for CSS and HTML: http://caniuse.com/
Using Internet Explorer on a Mac: https://www.modern.ie
Social network colors: http://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
LET’S ADD SOME COOL EFFECTS
LINKS USED IN THE COURSE
Animate.css: http://daneden.github.io/animate.css/
COOL JQUERY PLUGINS
Webappers, huge list of plugins: http://www.webappers.com/category/components/tool.ps/
jQuery Rain, another huge list of plugins: http://www.jqueryrain.com/
Magnific popup: http://dimsemenov.com/plugins/magnific-popup/
Tooltipster: http://iamceege.github.io/tool.pster/#demos
Maplace.js, google maps plugin: http://maplacejs.com/
Typer, a plugin that types: http://cosmos.layervault.com/typer-js.html
OnePageScroll: http://www.thepetedesign.com/demos/onepage_scroll_demo.html
OPTIMIZING AND LAUNCHING OUR WEBSITE
Favicon Generator: http://realfavicongenerator.net/
Compress images: http://op.mizilla.com/
Minify CSS code: http://www.minifycss.com/css-compressor/
Minify JavaScript code: http://www.minifyjavascript.com/
HTML valida.on: http://validator.w3.org/
Preview your website on multiple mobile devices at once: http://www.responsinator.com/
SEO checklist: http://webdesign.tutsplus.com/ar.cles/a-web-designers-seo-checklist-includingportable-formats–webdesign-10740
Google analytics: http://www.google.com/analytics/
KEEPING UP WITH THE WEB INDUSTRY
Treehouse show, weekly video about new things in webdesign and development: http://teamtreehouse.com/library/the-treehouse-show
Sidebar: the 5 best design links, every day: http://sidebar.io/
Codrops, webdesign blog with lots of freebies: http://tympanus.net/codrops/
Webdesignerdepot, webdesign blog: http://www.webdesignerdepot.com/
Smashing magazine, webdesign blog: http://www.smashingmagazine.com/
1st webdesigner, webdesign blog: http://www.1stwebdesigner.com/
Hey designer, curated list of webdesign articles: http://heydesigner.com/
Sitepoint, learn HTML, CSS and more: http://www.sitepoint.com/
