Save 37% off PRO during our Black Friday Sale! »

DAA Web Design and WordPress

76c99937a15274efb23b04361cc29ee0?s=47 Will Moyer
April 19, 2013

DAA Web Design and WordPress

# References

## Text Editors
- http://macromates.com/
- http://notepad-plus-plus.org/
- http://www.sublimetext.com/2
- http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/
- http://www.barebones.com/products/bbedit/index.html?utm_source=thedeck&utm_medium=banner&utm_campaign=bbedit

## HTML/CSS
- https://developer.mozilla.org/en-US/
- http://www.dontfeartheinternet.com/
- http://learn.shayhowe.com/html-css/
- http://learnlayout.com/
- http://learncss.tutsplus.com/
- http://www.codecademy.com/tracks/web

## Color Theory
- http://www.quora.com/Color-and-Colors/Is-there-a-science-to-picking-the-colors-that-work-well-together-in-a-design-or-is-it-just-subjective
- http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
- https://kuler.adobe.com/
- http://www.colourlovers.com/

## Gestalt Principles
- http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
- http://www.andyrutledge.com/gestalt-principles-2-similarity.php
- http://www.andyrutledge.com/gestalt-principles-3.php
- http://www.andyrutledge.com/common-fate.php
- http://www.andyrutledge.com/closure.php

## Typography
- http://markboulton.co.uk/journal/five-simple-steps-to-better-typography
- http://webtypography.net/
- http://www.informationarchitects.jp/en/100e2r/
- http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
- http://willmoyer.com/double-spacing-after-periods/
- http://quotesandaccents.com/
- http://copypastecharacter.com/
- http://www.google.com/fonts/

## Markdown
- http://en.wikipedia.org/wiki/Markdown
- http://daringfireball.net/projects/markdown/basics

## WordPress
- http://themeforest.net/
- http://www.elegantthemes.com/gallery/

76c99937a15274efb23b04361cc29ee0?s=128

Will Moyer

April 19, 2013
Tweet

Transcript

  1. <web design> <wordpress> and

  2. Who am I?

  3. Will Moyer (good at design, not at shaving)

  4. So, the internet?

  5. It's pretty much just pictures of cats, right?

  6. None
  7. Wikipedia Servers

  8. Web Browsers

  9. None
  10. None
  11. hypertext markup language HTML

  12. cascading style sheets CSS

  13. Don't be scared, but here's some HTML.

  14. Are you kidding me? OMGWTFHTML.

  15. <html> <body> <h1>DAA Web Design Workshop</h1> <p>You're currently in the

    workshop right now! And you're reading HTML without freaking out. You go, Glen Coco!</p> <p>Just a reminder: your instructor accepts tips in the form of beers and burritos.</p> </body> </html>
  16. I don't practice Santeria, I ain't got no crystal ball.

    Sublime Text
  17. <code>

  18. <html> <body> <h1>DAA Web Design Workshop</h1> <p>You're currently in the

    workshop right now! And you're reading HTML without freaking out. You go, Glen Coco!</p> <p>Just a reminder: your instructor accepts tips in the form of beers and burritos.</p> </body> </html>
  19. </code>

  20. Now we need to make it pretty.

  21. body { background: black; color: white; text-align: center; font-family: sans-serif;

    } h1 { margin-top: 100px; margin-bottom: 50px; font-size: 60px; } .note { font-size: 12px; }
  22. <p class="note">blah blah blah</p>

  23. <h1 id="title">DAA Workshop</h1>

  24. ID => Class => Element #title .note h1

  25. <code>

  26. <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>DAA Web Design

    Workshop</h1> <p>You're currently in the workshop right now! And you're reading HTML without freaking out. You go, Glen Coco!</p> <p class="note">Just a reminder: your instructor accepts tips in the form of beers and burritos.</p> </body> </html>
  27. body { background: black; color: white; text-align: center; font-family: sans-serif;

    } h1 { margin-top: 100px; margin-bottom: 50px; font-size: 60px; } .note { font-size: 12px; }
  28. </code>

  29. Break Time!!!

  30. Let's get real.

  31. None
  32. <code>

  33. http://workshop.willmoyer.com/example-3/

  34. </code>

  35. Break Time!!!

  36. Would you please pass the Gestalt

  37. Figure/Ground

  38. None
  39. None
  40. None
  41. Similarity

  42. None
  43. None
  44. Proximity

  45. None
  46. Uniform Connectedness

  47. None
  48. Good Continuation

  49. None
  50. Color Theory

  51. None
  52. None
  53. None
  54. None
  55. Tints Shades

  56. Tools for choosing combining colors: Good Ol' Complement Adobe Kuler

    Colour Lovers
  57. Break Time?

  58. Typography Beautiful

  59. Sans-serif Serif

  60. Slab Serif Old Style Didone Grotesque Geometric Sans Script Display

  61. “Anything from 45 to 75 characters is widely regarded as

    a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.” ❧ROBERT BRINGHURST
  62. line-height: 1.5;

  63. font-size: 16px;

  64. Set text ragged right, not justified. Lorem ipsum dolor sit

    amet, consectetur adipiscing elit. Praesent magna tellus, faucibus sed dapibus at, adipiscing sed urna. Nam lacinia libero in turpis imperdiet eu vulputate diam pellentesque. Proin at nunc erat. In lorem arcu, facilisis sed molestie quis, blandit in magna. Nam interdum semper commodo. Donec vestibulum, risus in ultrices dignissim, tellus tellus rutrum metus, id pretium enim erat in nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent magna tellus, faucibus sed dapibus at, adipiscing sed urna. Nam lacinia libero in turpis imperdiet eu vulputate diam pellentesque. Proin at nunc erat. In lorem arcu, facilisis sed molestie quis, blandit in magna. Nam interdum semper commodo. Donec vestibulum risus in ultrices dignissim, tellus tellus rutrum metus, id pretium enim erat in nulla.
  65. Use a single space between sentences. No double-spacing after periods.

  66. Establish a typographic hierarchy. Use the gestalt principles and vary

    size, weight, color, and spacing.
  67. <code>

  68. Go set some type.

  69. </code>

  70. Hey, have you met Markdown

  71. ### Markdown Markdown a code shorthand, a formatting syntax. It

    allows you to write *readable* plain text that can then be converted into HTML (and other formats like PDF). You can read more about Markdown [here](http://en.wikipedia.org/wiki/Markdown).
  72. </web design> </wordpress> and