The document outlines the process of transitioning from design to project management in web development, emphasizing the importance of involvement at all stages. It details the steps involved in content creation and management, varying content types, and approaches for responsive design across different devices. Additionally, it mentions key frameworks and options for theme production and customization within WordPress.

1. Del Disseny
al Tema
El camí del Cap de Projecte

2. Del Diseño
al Tema
El camino del Jefe de Proyecto

3. From Design to
a Theme
The Project Manager Journey

4. lonchbox.com
Pancho Pérez — Technical Designer
@lonchbox
lonchbox@gmail.com
Founder and COO of @33themes

5. – Cate Blanchett
“When you're directing something,
you absolutely have to be involved in
all layers of the process.”

6. Theme
Layers
Publishing
Administration
Frequency
Source
Content

7. – Unknown. I don't remember if I said ;)
“We build the interface and
functionalities of the website for the
client but it belongs to them”

8. Build with Content
From a Wishlist to Reality
nebulafire.deviantart.com

9. The content process
1. Brief
2. Workshop
3. Sitemap
4. Media (Photos & Images)
5. Texts & Translations

10. Sources of content
‣ Internal
‣ External
‣ Dynamic
‣ Static

11. Frequency of publication
‣ Sporadically
‣ Once a month
‣ Frequently

12. Managing content
‣ Group content
‣ Sections
‣ Content position
‣ Dynamic content
‣ “Static” content

13. Content Creation
‣ Dashboard editor
‣ Publishing client
‣ Mobile / Tablet App
‣ Social networks
‣ Third party
integrations

14. – Scott Belsky
“… As for Designers, they are the
biggest winners of all. Designers
become the most important leaders of
this new business era …”

15. Designing for web
Where things grow and move
Amazon

16. Theme concept design
• Don´t fear the scroll
• Text is not static, every word can be a different size
• Fixed height does´t help
• Mobile first ?
• WebFont
• Font icons vs Vector vs Sprite
• Responsive vs / or Adaptative

17. desktop - tablet -mobile

18. mobile - tablet -desktop

19. tablet - mobile -desktop

20. Assembling the layers
Atomized, unified and interlaced
Iron Man 3 : Marvel

21. Theme content structure
Core
Post
Page
Category & tag
Comments
Media
New
Custom post types
Custom Fields
Custom taxonomies
Theme options
Customizer options

22. Theme content position
Backend
New menu position
New section
Sidebars
Theme options
Settings New menu
Frontend
Menu areas
Loop areas
Widgets
“Static” content
Featured content

23. Theme production
Header
Footer
Menus
Sidebars
header.php
/inc/custom-header.php
footer.php
functions.php
/inc/custom-menus.php
functions.php
/inc/sidebars.php

24. Theme production
Page templates
Blog templates
CPT single & archives
TAX archives
/page-title
page.php
templage-SLUG.php
about.php
front-page.php
/blog /post-title
index.php
single.php
CPT-SLUG/CPT-title
single-CPT-SLUG.php
/CPT-SLUG
archive-CPT-SLUG.php
/TAX-SLUG
taxonomy-TAX-SLUG.php
taxonomy-TAX-SLUG-term.php

25. Theme frameworks
Structure
Custom content
Template
Theme options
/src/less
/src/bootstrap
/src/js
Plugin: Pods Framework
/inc/wp-bootstrap-menu-walker.php
Plugin: Pods or Redux

26. Examples

27. Gracis, Gracias, Thanx :)
@lonchbox