Difference between revisions of "Style"

From Things and Stuff Wiki
Jump to navigation Jump to search
(Blanked the page)
Tag: Blanking
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{menu}}
 
  
== 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: [https://www.youtube.com/watch?v=bC9OuHH9_gY 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/  [https://news.ycombinator.com/item?id=9285245]
 
 
* 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/ [https://news.ycombinator.com/item?id=8400265]
 
 
 
* https://dribbble.com/tags/logo
 
 
 
* http://rotary-system.tumblr.com
 
 
=== 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/ [http://news.ycombinator.com/item?id=5104964]
 
* 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 [https://news.ycombinator.com/item?id=6690242]
 
 
=== 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 [https://news.ycombinator.com/item?id=6718067]
 
 
=== Brutalism ===
 
* [https://www.nngroup.com/articles/brutalism-antidesign/ Brutalism and Antidesign] -
 
 
=== Glitch ===
 
 
 
* https://github.com/osromusic/Glitch-Arts-Resources - A curated list of resources for all arts glitch.
 
 
== Ratios ==
 
* http://retinart.net/graphic-design/secret-law-of-page-harmony/
 
 
* [http://designshack.net/articles/graphics/applying-the-golden-ratio-to-your-web-designs/ Applying the Golden Ratio to Your Web Designs] - 19th Oct 2010
 
* tutsplus: [http://webdesign.tutsplus.com/articles/design-theory/mathematics-and-web-design-a-close-relationship/ Mathematics and Web Design: A Close Relationship] - Nov 16th 2010
 
 
* [http://www.maa.org/devlin/devlin_06_04.html Good stories, pity they're not true] - On fact and fiction re the golden ratio.
 
 
== Colour ==
 
* [http://www.crockford.com/wrrrld/color.html CSS Color Names]
 
** http://www.w3.org/TR/css3-color/#svg-color
 
 
* [https://www.smashingmagazine.com/2012/10/the-code-side-of-color Hex Color – The Code Side Of Color]
 
 
 
* [http://viget.com/inspire/color-contrast Color Contrast for Better Readability]
 
 
* [http://ianstormtaylor.com/design-tip-never-use-black Design Tip: Never Use Black] [http://news.ycombinator.com/item?id=4357002]
 
 
* [http://24ways.org/2006/cheating-color Cheating Color]
 
 
 
* [http://blog.asmartbear.com/color-wheels.html Color Wheels are wrong? How color vision actually works] - Jason Cohen
 
 
* [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/ The crayola-fication of the world: How we gave colors names, and it messed with our brains (part I)]
 
 
 
* http://www.informationisbeautiful.net/visualizations/colours-in-cultures
 
 
* http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm
 
 
* http://www.empower-yourself-with-color-psychology.com/cultural-color.html
 
 
 
=== Software ===
 
==== Agave ====
 
* [https://web.archive.org/web/20170502022928/http://home.gna.org/colorscheme/ Agave] - a very simple application for the GNOME desktop that allows you to generate a variety of colorschemes from a single starting color. It is free software licensed under the open-source GPL License.
 
 
==== Gpick ====
 
* [https://code.google.com/p/gpick Gpick] - an application that allows you to sample any color from anywhere on the desktop, and use it to create palettes (i.e. collections of colors) for use in graphic design applications. Gpick also has other features that help in the creation of color palettes, such as: The ability to create a palette from an imported image, Automatic naming of colors, Color scheme generator, Import and export from various file formats
 
** http://libregraphicsworld.org/blog/entry/creating-color-schemes-with-gpick
 
 
=== Web tools ===
 
* [https://colorsupplyyy.com/app Color Picker] [https://news.ycombinator.com/item?id=19455441]
 
 
 
* [http://www.paletton.com/ Paletton] [https://news.ycombinator.com/item?id=8074694]
 
 
* [https://color.adobe.com Adobe Color CC]
 
 
* [http://www.colorhexa.com/ 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).
 
 
* [http://tools.medialab.sciences-po.fr/iwanthue/ iWantHue] - Colors for data scientists. Generate and refine palettes of optimally distinct colors.
 
 
 
* [http://colourco.de colourco.de] - Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.
 
 
* [http://color.hailpixel.com/ Colordot] - simple version of above
 
 
 
* [http://0to255.com/ 0to255] - a color tool for finding lighter and darker colors based on any color.
 
 
* [http://quick-pick.herokuapp.com/ Quick Pick] - A quick color picker without any fiddly sliders.
 
 
* [http://colormonster.io Color Monster] - gives related lighter/darker clours
 
 
 
* [http://www.degraeve.com/color-palette Color Palette Generator] - enter the URL of an image to get a color palette that matches the image.
 
 
 
* [https://www.webdesignrankings.com/resources/lolcolors/ LolColors] - Curated color palette inspiration.
 
 
* [http://colorhunt.co/ Color Hunt] - a weekly palette to your inbox.
 
 
* [https://www.materialui.co MaterialUI] - We've created some tools for rapid design & development.
 
 
* [http://clrs.cc colors.css] - a collection of skin classes to use while prototyping in the browser. [https://news.ycombinator.com/item?id=8120824]
 
 
* [http://bada55.io/ BADA55.io] - about finding the most badass leet words for your CSS hex colors.
 
 
 
* [http://webcolourdata.com/ Web Colour Data] - the colour palettes of big websites
 
 
* [http://brandcolors.net/ BrandColors] - The biggest collection of official brand color codes around
 
 
==== Gradient ====
 
 
* [https://pinetools.com/gradient-generator Online Gradient generator]
 
 
* [https://meyerweb.com/eric/tools/color-blend Color Blender]
 
 
== Logos ==
 
* https://en.wikipedia.org/wiki/Logo
 
 
* http://en.wikipedia.org/wiki/Wordmark
 
 
* http://www.paul-rand.com/foundation/thoughts_logosflags
 
 
* [http://octodex.github.com/ 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/
 
 
* https://www.toptal.com/designers/subtlepatterns/
 
** https://github.com/atlemo/SubtlePatterns
 
** 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/ [http://news.ycombinator.com/item?id=4742535]
 
 
* 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
 

Latest revision as of 02:19, 15 March 2021