Style

Aesthetics

To merge to/from/with Aesthetics, Graphics#Resources

• http://www.hongkiat.com/blog/pixel-based-websites/

other

• http://en.wikipedia.org/wiki/Homogeneity_and_heterogeneity

• http://www.elasticspace.com/2013/03/no-to-no-ui

• http://webdesignledger.com/
  • http://webdesignledger.com/tips/web-design-trends-for-2010

• http://carsonified.com/toolkit/
• http://somerandomdude.com/work/

• https://github.com/adactio/Pattern-Primer

• http://www.brainpickings.org/index.php/2011/03/08/the-transformer-isotype/

• http://llgd.net/

• https://golden-layout.com/ [1]

Flat

• http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/ - shit, where did i put those other flat style links
• http://sachagreif.com/the-flat-sink/
• http://daringfireball.net/2013/01/the_trend_against_skeuomorphism
• http://news.ycombinator.com/item?id=5086991
• http://en.wikipedia.org/wiki/Metro_(design_language)
• http://www.matthewmooredesign.com/almost-flat-design/ [2]
• http://blog.wells.ee/less-aesthetic-more-design
• http://sachagreif.com/flat-pixels/
• http://fltdsgn.com/
• http://designmodo.com/flat-design-principles/
• http://www.smashingmagazine.com/2013/07/16/authentic-design/

• http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

• http://designmodo.com/flat-design-colors/
• http://flatuicolors.com/

• http://dev.hubspot.com/blog/flatten-the-web-with-this-bookmarklet [3]

Examples

• http://land-book.com/
• http://dribbble.com/
• http://forrst.com/

• http://panasonic.net/
• http://happycog.com/

• http://www.pcc-cic.org.uk/

• http://www.creativebloq.com/web-design/top-examples-css-912710

• http://vandelaydesign.com/blog/galleries/attention-to-detail/

• http://pitchfork.com/features/cover-story/reader/bat-for-lashes/

• http://www.webcreme.com/
• http://cssremix.com/
• http://www.cssmania.com/
• http://thethemelist.com/
• http://patterntap.com/

• http://www.behance.net/
• http://www.designkindle.com/
• http://www.premiumpixels.com/
• http://designmoo.com/

• http://capptivate.co/

• http://www.lingscars.com/ - er, attention grabbing
• http://themostamazingwebsiteontheinternet.com/

• http://randomwire.com/why-japanese-web-design-is-so-different [4]

Ratios

• http://retinart.net/graphic-design/secret-law-of-page-harmony/

• Applying the Golden Ratio to Your Web Designs - 19th Oct 2010
• tutsplus: Mathematics and Web Design: A Close Relationship - Nov 16th 2010

• Good stories, pity they're not true - On fact and fiction re the golden ratio.

Colour

• http://www.crockford.com/wrrrld/color.html
• http://www.w3.org/TR/css3-color/#svg-color
• http://blog.asmartbear.com/color-wheels.html

rgba(0, 0, 0, 0.2)

• http://colorhexa.com/
• http://bighugelabs.com/colors.php
• http://www.empiricalzeal.com/2012/06/05/the-crayola-fication-of-the-world-how-we-gave-colors-names-and-it-messed-with-our-brains-part-i/

• http://clrs.cc/

Software

• http://home.gna.org/colorscheme/ - agave
  • http://my.opera.com/area42/blog/sharing-color-palettes
  • http://my.opera.com/area42/blog/color-scheme-helper-for-gimp

• https://code.google.com/p/gpick/
  • http://libregraphicsworld.org/blog/entry/creating-color-schemes-with-gpick

• http://visionwidget.com/chrome-color-picker-generator.html - browser based

Tools

• http://colourco.de/

• http://color.hailpixel.com/

• http://colores.manugarri.com/ [5]

• Color Scheme Designer
• kuler
• Paletton [6]

• 0to255
• http://quick-pick.herokuapp.com/

• http://www.degraeve.com/color-palette/index.php - get palette from image

• http://mothereffinghsl.com/

• http://tools.medialab.sciences-po.fr/iwanthue/

• http://webcolourdata.com/

• http://www.colormonster.io/

• http://www.colormoo.com/ [7]

• http://pltts.me/

• http://clrs.cc/ [8]

• http://www.colorhexa.com/

• http://hex.colorrrs.com/

• http://colorhunt.co/

Articles

• http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/
• http://24ways.org/2006/cheating-color
• http://ianstormtaylor.com/design-tip-never-use-black/ [9]

• http://viget.com/inspire/color-contrast

Cultural

• http://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue

• http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
• http://www.empower-yourself-with-color-psychology.com/cultural-color.html
• http://www.color-wheel-artist.com/color-meanings.html
• http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm

Logos

• https://en.wikipedia.org/wiki/Logo

• http://en.wikipedia.org/wiki/Wordmark

• http://www.paul-rand.com/foundation/thoughts_logosflags

• github: octodex - play on a logo

• http://briandelaney.me/design-inspiration-negative-space-logos-and-symbols

• http://www.brandsoftheworld.com/

Borders

• http://webdesignerwall.com/tutorials/css-decorative-gallery

Shadows

• http://bmccreative.com/blog:subtle-css3-box-shadows
• http://der-auftritt.de/testcase/gradientshadow.html
• http://devblog.xing.com/frontend/a-flexible-shadow-with-background-size/

• https://coderwall.com/p/dw61mg - radial drop shadow

• http://sandbox.juan-i.com/longshadows/

Backgrounds

• http://bradjasper.com/subtle-patterns-bookmarklet/#

• http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
• http://designwoop.com/2012/02/30-examples-of-subtle-background-textures-in-web-design/
• http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/

• http://mudcu.be/bg/

Textures

• http://webdesign.tutsplus.com/tutorials/visuals/the-what-why-and-how-of-textures-in-webdesign/
• http://line25.com/articles/20-examples-of-subtle-texture-use-in-web-design

• http://rappdaniel.com/noisy/ - png generate

Patterns

• http://www.world-mysteries.com/sar_sage1.htm

• http://lea.verou.me/css3patterns/
  • http://24ways.org/2011/css3-patterns-explained/

• http://www.patternify.com/

• http://patterns.alistapart.com/

Ornamental flourishes

• http://vector.tutsplus.com/articles/web-roundups/250-free-vintage-graphics-flourish-vector-ornaments/
• http://all-silhouettes.com/flourishornaments/
• http://designshack.net/articles/freebies/weekly-freebies-flourishes-and-ornaments/
• http://moorstation.org/typoasis/ornaments/index.htm

Also; dingbat flourish fonts

• http://stackoverflow.com/questions/8903074/technique-for-adding-flourishes-to-div-corners-and-borders-css3-multiple-backgr

• http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-two-tone-horizontal-rule-in-pure-css/

Images

• http://xkcd.com/1264/

Buttons

• http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/ [10]

• http://css-tricks.com/circular-3d-buttons/

Icons

See Typography#Webfont icons and Graphics#Icons

Seperate icons for each menu or list item can be good.

common?;

• About - pages
• FAQ - ?
• Help/Support - !
• Blog - scroll?
• Contact - envelope
• Twitter
• Facebook
• Google+
• RSS

Social icons/brands

• Facebook deep blue; #3B5998
• Twitter blue; #4099FF
• Google plus red; #C85D42

• http://mattbrett.com/blog/design/2005/the-new-standard-feed-icon/

Canvas

• http://asserttrue.blogspot.ca/2012/01/procedural-textures-in-html5-canvas.html

Vector

See also Graphics#SVG

• http://danielmall.com/articles/svg-workflow-for-designers/