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.comPancho 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 belongs to them”

Build with ContentFrom 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 this new business era …”

Designing for webWhere 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´t help

• Mobile first ?

• WebFont

• Font icons vs Vector vs Sprite

• Responsive vs / or Adaptative

desktop - tablet -mobile

mobile - tablet -desktop

tablet - mobile -desktop

Assembling the layersAtomized, 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 options

Customizer options

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

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

Theme production

Page templates

Blog templates

CPT single & archives

TAX archives

/page-titlepage.php

templage-SLUG.phpabout.php

front-page.php

/blog /post-titleindex.phpsingle.php

CPT-SLUG/CPT-titlesingle-CPT-SLUG.php

/CPT-SLUGarchive-CPT-SLUG.php

/TAX-SLUGtaxonomy-TAX-SLUG.php

taxonomy-TAX-SLUG-term.php

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

Examples

Gracis, Gracias, Thanx :)@lonchbox