# Best Web Design Resources


## General 

[Google Web Fundamentals](https://developers.google.com/web/fundamentals/principles/index?hl=en)

AIGA - http://www.aiga.org/

## Design for Developers or Non Designers 

[Design School for Developers](https://webdesign.tutsplus.com/series/design-school-for-developers--webdesign-13793)


[7 Rules for Creating Gorgeous UI part 1](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda#.fjht9pdht)



## Typography 


[ShayHowe Typography](http://learn.shayhowe.com/html-css/working-with-typography/)


[Ten Minute Typography](http://practicaltypography.com/typography-in-ten-minutes.html) - has further guides after covering 5 bullet points.


[Smashing magazine for Typography](http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/) - more of a survey

[Typeography for Developers](http://webdesign.tutsplus.com/articles/typography-basics-for-developers--webdesign-14025) - has advert modal, forewarned.

[The Elements of Typographic Style Applied to the Web ](http://webtypography.net/)


[Google Fonts for Typography](http://www.google.com/fonts)

[Font Squirrel for more fonts and how-to's with fonts](http://www.fontsquirrel.com/)

Golden Ratio - http://www.pearsonified.com/2011/12/golden-ratio-typography.php



## Color

[Smashing magazine for Color Theory](http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/)

[Basic Color Theory](http://www.colormatters.com/color-and-design/basic-color-theory)

[Color Theory Intro ](http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm)


## UI/UX

[Visual Hierarchy](http://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/)

[Information Architecture](http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/)

[good call to action buttons](http://www.uxbooth.com/articles/good-call-to-action-buttons/)

[10 tips for better UI](http://www.smashingmagazine.com/2008/12/10-useful-techniques-to-improve-your-user-interface-designs/)

[Layout - InDesign - Theory](http://www.slideshare.net/SherwinM/basic-layout-principles)

[google material design layouts](https://www.google.com/design/spec/layout/principles.html)

## Usability 

http://www.usabilityfirst.com/

[usability intro](http://www.nngroup.com/articles/usability-101-introduction-to-usability/)

[Accessibility](http://www.w3.org/standards/webdesign/accessibility)


## Grids 

[Five simple steps to designing grid systems](http://markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1)

[grids 101](http://www.mostinspired.com/blog/2008/03/24/grid-based-design-101/)

[grid theory](http://www.creativebloq.com/web-design/grid-theory-41411345)


## schools or trends 

[minimalism in design](http://www.nngroup.com/articles/roots-minimalism-web-design/)

[material design](https://www.google.com/design/spec/material-design/introduction.html)


[flat design ](http://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/)


[metro - Microsoft Design ](http://www.microsoft.com/en-us/stories/design/)


## Repsonsive Design

[tutsplus RWD](http://webdesign.tutsplus.com/articles/responsive-web-design--webdesign-15155)

[Google's Guide for RWD ](https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/index?hl=en)


## images 

[Guide for Images with Text](https://designschool.canva.com/blog/how-to-marry-text-and-images/)





## Some links to style guides  

http://brettjankord.com/projects/style-guide-boilerplate/

site to browse various guides for companies

http://styleguides.io/examples.html

I like lonelyplanet's layout: 

http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

http://rizzo.lonelyplanet.com/styleguide/ui-components/cards


Generators for style guides

https://github.com/davidhund/styleguide-generators