Style

Aesthetics

To merge to/from/with Graphics#Resources

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

• https://en.wikipedia.org/wiki/Aesthetics
• https://en.wikipedia.org/wiki/Category:Concepts_in_aesthetics

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

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

• https://en.wikipedia.org/wiki/Style_(visual_arts)

• https://en.wikipedia.org/wiki/Art
• https://en.wikipedia.org/wiki/Art_criticism
• https://en.wikipedia.org/wiki/Art_movement

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

• https://en.wikipedia.org/wiki/Aesthetic_interpretation
• https://en.wikipedia.org/wiki/Against_Interpretation

• https://en.wikipedia.org/wiki/Work_of_art
• frame, situation

• https://en.wikipedia.org/wiki/Performance_art - a performance presented to an audience, traditionally interdisciplinary. Performance may be either scripted or unscripted, random or carefully orchestrated; spontaneous or otherwise carefully planned with or without audience participation. The performance can be live or via media; the performer can be present or absent. It can be any situation that involves four basic elements: time, space, the performer's body, or presence in a medium, and a relationship between performer and audience. Performance art can happen anywhere, in any venue or setting and for any length of time. The actions of an individual or a group at a particular place and in a particular time constitute the work.

• https://en.wikipedia.org/wiki/Liberal_arts
• https://en.wikipedia.org/wiki/Martial_arts

• https://en.wikipedia.org/wiki/Medieval_art
• https://en.wikipedia.org/wiki/Gothic_architecture

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

• https://en.wikipedia.org/wiki/Mannerism
• https://en.wikipedia.org/wiki/Baroque
• https://en.wikipedia.org/wiki/Caravaggisti
• https://en.wikipedia.org/wiki/Classicism
• https://en.wikipedia.org/wiki/Dutch_Golden_Age_painting

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

• https://en.wikipedia.org/wiki/Neoclassicism
  • https://en.wikipedia.org/wiki/Neoclassical_architecture

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

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

• https://en.wikipedia.org/wiki/Realism_(arts)

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

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

• https://en.wikipedia.org/wiki/Truth_to_materials
• https://en.wikipedia.org/wiki/Form_follows_function
• https://en.wikipedia.org/wiki/Ornament_and_Crime

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

• https://en.wikipedia.org/wiki/Formalism_(art)

• https://en.wikipedia.org/wiki/Neo-Historism

• https://en.wikipedia.org/wiki/Expressionism
• https://en.wikipedia.org/wiki/Abstract_expressionism
• https://en.wikipedia.org/wiki/Surrealism

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

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

• YouTube: Paul Klee, Wilhelm Hausenstein, and the "Problem of Style" | Charles Mark Haxthausen

• https://en.wikipedia.org/wiki/Abstract_art
• https://en.wikipedia.org/wiki/Geometric_abstraction
• https://en.wikipedia.org/wiki/Contemporary_art

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

• https://en.wikipedia.org/wiki/Avant-garde
• https://en.wikipedia.org/wiki/Lettrism

• https://en.wikipedia.org/wiki/Situationism
• https://en.wikipedia.org/wiki/Situationism_(psychology)

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

• https://en.wikipedia.org/wiki/Artist's_Shit

• http://artybollocks.com/

• http://www.smbc-comics.com/?id=3204#comic
• post-modernism

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

• https://en.wikipedia.org/wiki/Anti-anti-art

• http://en.wikipedia.org/wiki/Framing_(social_sciences)

• http://en.wikipedia.org/wiki/Assemblage_(art)

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

• http://en.wikipedia.org/wiki/Shape_and_form_(visual_arts)

• https://en.wikipedia.org/wiki/Painterly
• https://en.wikipedia.org/wiki/Chiaroscuro
• https://en.wikipedia.org/wiki/Bokeh

• https://en.wikipedia.org/wiki/Wabi-sabi

• http://www.openculture.com/2013/10/david-lynch-presents-the-history-of-surrealist-film-1987.html

• http://www.artybollocks.com/

• http://aenism.com/good-taste/

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

• http://www.reddit.com/r/PostPoMo

misc

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

• http://www.metamute.org/editorial/articles/manifesto-theory-%E2%80%98new-aesthetic%E2%80%99

• http://infosthetics.com/

• http://en.wikipedia.org/wiki/Cool_(aesthetic)

• http://500letters.org/

• http://www.ieeeghn.org/wiki/index.php/First-Hand:Early_Digital_Art_At_Bell_Telephone_Laboratories,_inc

• http://ffffound.com/

• http://fffff.at/

• http://www.jwz.org/webcollage/
• http://infiniteglitch.com/
• http://cachemonet.com/
• https://news.ycombinator.com/item?id=7413106

• http://www.academia.edu/3279593/A_proposal_for_a_dualistic_ontology_of_art

• http://www.sito.org/synergy/

Art is never finished, only abandoned. Leonardo da Vinci

• http://www.ubuweb.com/

• http://adamferriss.com/nze/

• http://www.metacritic.com/

• http://monoskop.org/
• http://artcontext.org/
• http://web.archive.org/web/20081221113539/http://www.absurd.org/
• http://zombo.com/
• http://www.zoomquilt.org/

• http://hakim.se/experiments/html5/sketch/
• http://nnnnn.org.uk/

• http://www.yyyyyyy.info/

• http://bechdeltest.com/

• http://anasomnia.com/

• http://www.contextfreeart.org/ [1]

• http://www.arkadia.xyz/

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/ [2]

• https://dribbble.com/tags/logo

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/ [3]
• 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 [4]

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 [5]

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

• Paletton [6]

• Adobe Color CC

• ColorHexa - a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes).

• iWantHue - Colors for data scientists. Generate and refine palettes of optimally distinct colors.

• colourco.de - Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.

• Colordot - simple version of above

• 0to255 - a color tool for finding lighter and darker colors based on any color.

• Quick Pick - A quick color picker without any fiddly sliders.

• Color Monster - gives related lighter/darker clours

• Color Palette Generator - enter the URL of an image to get a color palette that matches the image.

• LolColors - Curated color palette inspiration.

• Color Hunt - a weekly palette to your inbox.

• MaterialUI - We've created some tools for rapid design & development.

• colors.css - a collection of skin classes to use while prototyping in the browser. [7]

• BADA55.io - about finding the most badass leet words for your CSS hex colors.

• Web Colour Data - the colour palettes of big websites

• BrandColors - The biggest collection of official brand color codes around

• Unique gradient generator - This tool helps you to generate beautiful blurry background images that you can use in any project. It doesn't use CSS3 gradients, but a rather unique approach. It takes a stock image, extracts a very small area (sample area) and scales it up to 100%. The browser's image smoothing algorithm takes care of the rest. You can then use the image as an inline, base64 encoded image in any HTML element's background, just click Generate CSS button at the bottom of the app. Select source images from the gallery or use yours, the possibilities are endless. [8]

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/

• https://news.ycombinator.com/item?id=13782611

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/

• http://www.fleen.org/

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/

• http://www.deepart.io/

• https://news.ycombinator.com/item?id=10993919

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/

Architecture

• https://news.ycombinator.com/item?id=12756925