The document discusses web design using WordPress frameworks, highlighting the importance of themes and plugins for styling and functionality. It emphasizes the role of frameworks like Genesis and Underscores in creating customized designs and the significance of a structured workflow from planning to coding. The author shares insights on typography, layout choices, and design practices for effective branding and user experience.

1. Three files, unlimited
designs:
Make your site look like
anything in Genesis or
Underscores.

2. 30 years a designer.
My firm: Marginhancers.
Site = brand foundation.
Marketing : revenue as brand : margin.

3. Are you too old to learn to code?

4. Who’s here?

5. What does a WP site
look like?

14. Some themes will do
it for us.

17. Styling goes into themes.
Functionality goes into
plugins.

18. Let’s roll our own!

19. What’s a framework?

20. Two meanings:
A drop-in code library that
[helps us develop] a theme.
A standalone base/starter
theme that [we can either fork
into another theme, or use as a]
parent theme template.

21. The way I think of them:
Bland-looking parent themes that
actually do have most of the styles
defined.
We override with our designs - in
child themes.
Some, like Genesis, have a bunch
of child themes you can buy and
use – or even download for free.

22. PageLines.

23. Thesis.

24. Hybrid.

25. Genesis.

26. Underscores.

27. But mostly,
frameworks give us
secret superpowers.

28. A good framework is consistent.

38. Layout flexibility =
control (widgets + markup).

39. Three files.
template.php
functions.php
style.css

40. Home pages.
home.php
index.php
front-page.php
page_funky_layout.php

42. Three files.
template.php
functions.php
style.css

43. Underscores.

44. The Underscores demo.

45. And undressed.

46. From two widgets to three.

47. All lined up.

48. And dressed to play!

49. Let’s start by making the widget
areas.

50. index.php

51. front-page.php

55. Genesis.

57. “If you don’t know where
you’re going, chances are
you’ll end up somewhere else.”
– Yogi Berra

59. The Genesis default.

60. The visual reference.

62. and move.

64. Underscores:
Widgeted area with markup.

65. home.php

66. style.css

67. Widgets panel.

68. Things we didn’t cover,
but can.

69. Typography.

70. Why do I self-host my
type?

71. Choosing faces that
work together.

72. Laying out the header.
Different in the two
frameworks.
Especially since I made
different aesthetic choices:
buttons in Underscores,
sticky menu in Genesis.

73. The phone versions.

74. A formal Best Practices
workflow:

75. Planning: Strategy, design.
Message strategy/creative brief.
Visual texture.
PSD mockup
mood board,
Style Tiles,
whatever.

76. From visuals to code.
CSS defaults.
Colors
320 and up,
Icons
Foundation,
Buttons
Bootstrap …
Form fields
Elements:
And more.
Type

77. Build!

78. 13-Questions?

79. 14 - Thanks!