Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DAA Web Design and WordPress

Will Moyer
April 19, 2013
Design
1
180

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/

Will Moyer

April 19, 2013
Tweet

More Decks by Will Moyer

See All by Will Moyer
Writing For The Web
moyer
0
130

Other Decks in Design

See All in Design
モデル・デザイン入門
akitsugu7935
0
460
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
「これをゲームにしたい！」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
1人歩きする営業資料作成
yutoshukuya
0
140
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
プロダクトデザイン部 組織紹介（デザイナー向け）
chatwork_hr
1
230
#コムデナ vol.2 「初めてのデザインカンファレンス協賛！共有したい3つのやらかし」
kiyoshifuwa
1
330
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
220
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
250

Featured

See All Featured
The Mythical Team-Month
searls
216
42k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Become a Pro
speakerdeck
PRO
11
4.5k
Why Our Code Smells
bkeepers
PRO
331
56k
How to name files
jennybc
65
93k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Six Lessons from altMBA
skipperchong
21
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k

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