Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Del Disseny
al Tema
El camí del Cap de Projecte
Del Diseño
al Tema
El camino del Jefe de Proyecto
From Design to
a Theme
The Project Manager Journey
lonchbox.com
Pancho Pérez — Technical Designer
@lonchbox
lonchbox@gmail.com
Founder and COO of @33themes
– Cate Blanchett
“When you're directing something,
you absolutely have to be involved in
all layers of the process.”
Theme
Layers
Publishing
Administration
Frequency
Source
Content
– Unknown. I don't remember if I said ;)
“We build the interface and
functionalities of the website for the
client but it ...
Build with Content
From a Wishlist to Reality
nebulafire.deviantart.com
The content process
1. Brief
2. Workshop
3. Sitemap
4. Media (Photos & Images)
5. Texts & Translations
Sources of content
‣ Internal
‣ External
‣ Dynamic
‣ Static
Frequency of publication
‣ Sporadically
‣ Once a month
‣ Frequently
Managing content
‣ Group content
‣ Sections
‣ Content position
‣ Dynamic content
‣ “Static” content
Content Creation
‣ Dashboard editor
‣ Publishing client
‣ Mobile / Tablet App
‣ Social networks
‣ Third party
integrations
– Scott Belsky
“… As for Designers, they are the
biggest winners of all. Designers
become the most important leaders of
th...
Designing for web
Where things grow and move
Amazon
Theme concept design
• Don´t fear the scroll
• Text is not static, every word can be a different size
• Fixed height does´...
desktop - tablet -mobile
mobile - tablet -desktop
tablet - mobile -desktop
Assembling the layers
Atomized, unified and interlaced
Iron Man 3 : Marvel
Theme content structure
Core
Post
Page
Category & tag
Comments
Media
New
Custom post types
Custom Fields
Custom taxonomies...
Theme content position
Backend
New menu position
New section
Sidebars
Theme options
Settings New menu
Frontend
Menu areas
...
Theme production
Header
Footer
Menus
Sidebars
header.php
/inc/custom-header.php
footer.php
functions.php
/inc/custom-menus...
Theme production
Page templates
Blog templates
CPT single & archives
TAX archives
/page-title
page.php
templage-SLUG.php
a...
Theme frameworks
Structure
Custom content
Template
Theme options
/src/less
/src/bootstrap
/src/js
Plugin: Pods Framework
/...
Examples
Gracis, Gracias, Thanx :)
@lonchbox
Upcoming SlideShare
Loading in …5
×

WordCamp Barcelona 2015 : From Design to a Theme

934 views

Published on

The project manager journey.
What to take care and analyze the a web design production into a WordPress Theme.
Learn the different types of content sources and administration and organice the development of that design in a way that content creator can understand how the Theme works.
It helps you to calculate the time and effort of a project.

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

WordCamp Barcelona 2015 : From Design to a Theme

  1. 1. Del Disseny al Tema El camí del Cap de Projecte
  2. 2. Del Diseño al Tema El camino del Jefe de Proyecto
  3. 3. From Design to a Theme The Project Manager Journey
  4. 4. lonchbox.com Pancho Pérez — Technical Designer @lonchbox lonchbox@gmail.com Founder and COO of @33themes
  5. 5. – Cate Blanchett “When you're directing something, you absolutely have to be involved in all layers of the process.”
  6. 6. Theme Layers Publishing Administration Frequency Source Content
  7. 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. 8. Build with Content From a Wishlist to Reality nebulafire.deviantart.com
  9. 9. The content process 1. Brief 2. Workshop 3. Sitemap 4. Media (Photos & Images) 5. Texts & Translations
  10. 10. Sources of content ‣ Internal ‣ External ‣ Dynamic ‣ Static
  11. 11. Frequency of publication ‣ Sporadically ‣ Once a month ‣ Frequently
  12. 12. Managing content ‣ Group content ‣ Sections ‣ Content position ‣ Dynamic content ‣ “Static” content
  13. 13. Content Creation ‣ Dashboard editor ‣ Publishing client ‣ Mobile / Tablet App ‣ Social networks ‣ Third party integrations
  14. 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. 15. Designing for web Where things grow and move Amazon
  16. 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. 17. desktop - tablet -mobile
  18. 18. mobile - tablet -desktop
  19. 19. tablet - mobile -desktop
  20. 20. Assembling the layers Atomized, unified and interlaced Iron Man 3 : Marvel
  21. 21. Theme content structure Core Post Page Category & tag Comments Media New Custom post types Custom Fields Custom taxonomies Theme options Customizer options
  22. 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. 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. 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. 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. 26. Examples
  27. 27. Gracis, Gracias, Thanx :) @lonchbox

×