Difference between revisions of "Style"

From Things and Stuff Wiki
Jump to navigation Jump to search
(Blanked the page)
Tag: Blanking
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{menu}}
 
  
−
== 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/ [https://news.ycombinator.com/item?id=8400265]
 
−
 
−
 
−
 
−
=== 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]
 
−
 
−
== 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
 
−
* 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/ [https://news.ycombinator.com/item?id=8566971]
 
−
 
−
 
−
* [http://colorschemedesigner.com/ Color Scheme Designer]
 
−
* [http://kuler.adobe.com/ kuler]
 
−
* [http://www.paletton.com/ Paletton] [https://news.ycombinator.com/item?id=8074694]
 
−
 
−
 
−
* [http://0to255.com/ 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/ [https://news.ycombinator.com/item?id=7560341]
 
−
 
−
 
−
* http://pltts.me/
 
−
 
−
* http://clrs.cc/ [https://news.ycombinator.com/item?id=8120824]
 
−
 
−
 
−
* http://www.colorhexa.com/
 
−
 
−
* http://hex.colorrrs.com/
 
−
 
−
=== 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/ [http://news.ycombinator.com/item?id=4357002]
 
−
 
−
* 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
 
−
 
−
* [http://octodex.github.com/ 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/ [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/
 

Latest revision as of 02:19, 15 March 2021

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Style&oldid=57620"