Design in WordPress: Three files, unlimited layouts #wcstl
2 likes1,917 views
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.
![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.](https://image.slidesharecdn.com/threefilesunlimitedlayouts-wcstl-140301104709-phpapp02/85/Design-in-WordPress-Three-files-unlimited-layouts-wcstl-20-320.jpg)
Design in WordPress: Three files, unlimited layouts #wcstl
- 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!
- 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).
- 43. Underscores.
- 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
- 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.
- 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!