Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
www.npgroup.net
Modular Web Design
Pete Czech, CEO: New Possibilities Group, LLC
Welcome!
Today’s Agenda:
• Introductions
• Topic Overview
• About Web Templates
• About Modular Design
• Benefits
• Techno...
Introductions
Your Host: Pete Czech
CEO, New Possibilities Group
Co-founder of NPG in 2001
Background in custom web
develo...
What We Do
We are the experts in development of safe, secure custom content
management systems.
NPG focuses on custom web ...
Our Experience
Why You Are Here
You are here because maybe:
• You are tired of old school web design methodology.
• You are an early adap...
Overview of Modular Web Design
• A new way of looking at web design.
• Eliminates the template methodology prevalent today...
Some Background…
First, let’s review the theory.
According to Wikipedia:
Modular design, or "modularity in design", is a d...
Already Prevalent In Industry
Many Industries Already Use Modular
concepts!
Automobile Manufacturing
Universal
platforms increase
profitability via
streamlined
manufacturing.
All Similar, Different Logos
Construction
Prefabricated parts mean faster
construction, lower labor costs,
quicker time to market.
An Amazing Example
“Broad Sustainable
Building, a prefab
construction firm,
put up the
rectangular, glass
and steel Mini S...
The End Product
Furniture
LoveSac: Low cost, super-
comfortable furniture.
Buy parts, assemble as you
wish.
Similar models in
commercial o...
Commonalities
Highly Efficient.
Highly Profitable (or frugal).
Flexible for either consumer or
manufacturer – limited inpu...
Applied to Web Design
Template-Based Design
Basically what most CMS systems are based on today.
Ushered in with advent of CMS platforms.
Was a g...
Templates: The Pros
Allowed for large websites to be CMS driven easily.
Gave administrators options for page layouts.
Inte...
Templates: Cons
Templates are based on an old concept: Your CMS controls webpages, but
not content.
Templates are the lead...
Templates: Cons
With templates,
content must fit the
mold of the template.
Templates: A Digital
Commodity
Templates are bad for the web!
The ease of downloading and
installing templates has ushered...
Modular Web Design: The New Way
Imagine having parts with near limitless potential.
Benefit 1: Enhanced Control
Quick, easy continuous improvement.
Fast prototyping of new pages.
Less dependence on develope...
An Exercise
Pick a page on your website today.
Screenshot between the natural page breaks – creating “modules”.
Print the ...
An Exercise
An Exercise
Less = More
Benefit 2: Easier to Maintain
Maintaining parts is easier than maintaining templates.
Code changes, navigation changes – t...
Benefit 3: Politically Expedient
Approvals and revisions are
the biggest unknown factor
in a design project.
Easier buy-in...
Benefit 4: Cheaper to Iterate
Initial website design & development project can utilize few modules to get
live faster.
New...
Benefit 5: Quicker Development
Modular design also means a hierarchal, modular codebase.
Adding a new module uses existing...
Benefit 6: No More Redesigns
Targeted redesigns mean no
more global redesigns.
New focus: Continuous
Redesign & Improvemen...
Modular Tech Requirements
This approach does require the
proper tools.
Ideal Content Management
Architecture
The CMS Problem
Current CMS platforms are heavily focused on templates.
Modular plugins exist but fall short. There are fe...
The CMS of Today
The Ideal CMS
Organizes content into logical, understandable groups.
Understands that the website is just one possible met...
Your Website
It is only the front-end experience that speaks to the user.
It must be a merger of content and user experien...
Quick Review…
We now know:
Modular Design will help eliminate massive future
redesigns.
Focus is on reusable parts versus ...
How To Go Modular
Find appropriate plugins that properly integrate the modular approach.
Go with a customized solution.
WA...
Sample Modular Design
Sample Modular Design
Sample Modular Design
Sample Modular Design
Sample Modular Design
Sample Modular CMS Integration
Sample Modular CMS Integration
Q & A
Our Next Webcast
In Depth: How to Design and Deploy a Secure CMS Installation
Tuesday, February 28, 2017
2PM EST
Additional Resources
Our blog – www.npgroup.net/blog
Videos - www.npgroup.net/videos
E-Books – www.npgroup.net/resources
150 Clove Road
Little Falls, NJ 07424
1.855.NPGROUP
www.npgroup.net
our home away from home.
Where To Find Us
©2001-2016
Próxima SlideShare
Cargando en…5
×

In-Depth: Modular Web Design & CMS Integration

Modular web design is a new methodology that focuses on pieces or parts of a web page as opposed to the rigidity of templates. In this webinar, we will focus on how the next wave of web redesign projects should focus on individual parts that assemble the whole of a project as opposed to the old methodology of being template driven.

  • Sé el primero en comentar

In-Depth: Modular Web Design & CMS Integration

  1. 1. www.npgroup.net Modular Web Design Pete Czech, CEO: New Possibilities Group, LLC
  2. 2. Welcome! Today’s Agenda: • Introductions • Topic Overview • About Web Templates • About Modular Design • Benefits • Technology Considerations • Examples • Q&A • Wrap Up
  3. 3. Introductions Your Host: Pete Czech CEO, New Possibilities Group Co-founder of NPG in 2001 Background in custom web development, UI/UX. Contact: czech@npgroup.net
  4. 4. What We Do We are the experts in development of safe, secure custom content management systems. NPG focuses on custom web development & design to create websites and applications for clients with complex requirements.
  5. 5. Our Experience
  6. 6. Why You Are Here You are here because maybe: • You are tired of old school web design methodology. • You are an early adapter of new techniques. • You are undergoing or about to undergo a new design project. • You were inundated by emails from me. Thanks for coming!
  7. 7. Overview of Modular Web Design • A new way of looking at web design. • Eliminates the template methodology prevalent today. • Allows for faster, cheaper redesigns. • Will make your redesign / redevelopment projects last longer.
  8. 8. Some Background… First, let’s review the theory. According to Wikipedia: Modular design, or "modularity in design", is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems. Focus on Reusable Parts – Not Templates
  9. 9. Already Prevalent In Industry Many Industries Already Use Modular concepts!
  10. 10. Automobile Manufacturing Universal platforms increase profitability via streamlined manufacturing.
  11. 11. All Similar, Different Logos
  12. 12. Construction Prefabricated parts mean faster construction, lower labor costs, quicker time to market.
  13. 13. An Amazing Example “Broad Sustainable Building, a prefab construction firm, put up the rectangular, glass and steel Mini Sky City in the Hunan provincial capital of Changsha, assembling three floors a day using a modular method, the vice-president, Xiao Changgeng, said.”
  14. 14. The End Product
  15. 15. Furniture LoveSac: Low cost, super- comfortable furniture. Buy parts, assemble as you wish. Similar models in commercial office furniture and of course one of the most profitable companies in the world: IKEA.
  16. 16. Commonalities Highly Efficient. Highly Profitable (or frugal). Flexible for either consumer or manufacturer – limited inputs creat many different outputs.
  17. 17. Applied to Web Design
  18. 18. Template-Based Design Basically what most CMS systems are based on today. Ushered in with advent of CMS platforms. Was a great methodology back in the day. The vast majority of established CMSs still utilize this method.
  19. 19. Templates: The Pros Allowed for large websites to be CMS driven easily. Gave administrators options for page layouts. Integrated to most CMS systems easily or natively.
  20. 20. Templates: Cons Templates are based on an old concept: Your CMS controls webpages, but not content. Templates are the leading cause of customer dissatisfaction with their CMS. Templates are rigid by design. Templates are highly dependent. Templates ushered in our current state of sameness online.
  21. 21. Templates: Cons With templates, content must fit the mold of the template.
  22. 22. Templates: A Digital Commodity Templates are bad for the web! The ease of downloading and installing templates has ushered in a era of sameness. It has also commoditized web design: why hire a designer? Is a developer really a developer? But, the worst flaw: It’s rigid and unwavering.
  23. 23. Modular Web Design: The New Way Imagine having parts with near limitless potential.
  24. 24. Benefit 1: Enhanced Control Quick, easy continuous improvement. Fast prototyping of new pages. Less dependence on developers. Quicker development / deployment of pages. Marketers dream: Landing pages in minutes.
  25. 25. An Exercise Pick a page on your website today. Screenshot between the natural page breaks – creating “modules”. Print the modules out and trim them. Begin to contemplate how moving and mixing modules allows you freedom and control.
  26. 26. An Exercise
  27. 27. An Exercise
  28. 28. Less = More
  29. 29. Benefit 2: Easier to Maintain Maintaining parts is easier than maintaining templates. Code changes, navigation changes – these are all made into parts. Unlike templates, modules need not be dependent on other modules = less coding dependencies = less technical debt.
  30. 30. Benefit 3: Politically Expedient Approvals and revisions are the biggest unknown factor in a design project. Easier buy-ins from management. Old Cycle: Permanent = Scary! New Cycle: Flexible, changeable.
  31. 31. Benefit 4: Cheaper to Iterate Initial website design & development project can utilize few modules to get live faster. New features or pages? Either use existing modules or… Create new ones – a simple task. In the past: Develop a new template – either off an existing or from scratch. Hire a designer. Pay your developer.
  32. 32. Benefit 5: Quicker Development Modular design also means a hierarchal, modular codebase. Adding a new module uses existing CSS styles which means expedited development. Pages can be prototyped near instantly.
  33. 33. Benefit 6: No More Redesigns Targeted redesigns mean no more global redesigns. New focus: Continuous Redesign & Improvement where warranted. No more redesigns “because it’s time to do it”.
  34. 34. Modular Tech Requirements This approach does require the proper tools.
  35. 35. Ideal Content Management Architecture
  36. 36. The CMS Problem Current CMS platforms are heavily focused on templates. Modular plugins exist but fall short. There are few native solutions. Modular design starts with content & design – not technology. Available plugins still work the wrong way – technology first. You can’t use frameworks built with predetermined notions of content. Pages, posts, etc.
  37. 37. The CMS of Today
  38. 38. The Ideal CMS Organizes content into logical, understandable groups. Understands that the website is just one possible method of distribution. Allows for integration of content into modules both statically and dynamically. Allows for drag and drop manipulation of modules. Allows for creative, unique front-end experiences. Decoupling?
  39. 39. Your Website It is only the front-end experience that speaks to the user. It must be a merger of content and user experience. The modular administrative interface serves as the glue.
  40. 40. Quick Review… We now know: Modular Design will help eliminate massive future redesigns. Focus is on reusable parts versus templates. Problem: CMS limitations. But there are ways to do it…!
  41. 41. How To Go Modular Find appropriate plugins that properly integrate the modular approach. Go with a customized solution. WATCH OUR WEBCAST: CMS OF THE FUTURE!
  42. 42. Sample Modular Design
  43. 43. Sample Modular Design
  44. 44. Sample Modular Design
  45. 45. Sample Modular Design
  46. 46. Sample Modular Design
  47. 47. Sample Modular CMS Integration
  48. 48. Sample Modular CMS Integration
  49. 49. Q & A
  50. 50. Our Next Webcast In Depth: How to Design and Deploy a Secure CMS Installation Tuesday, February 28, 2017 2PM EST
  51. 51. Additional Resources Our blog – www.npgroup.net/blog Videos - www.npgroup.net/videos E-Books – www.npgroup.net/resources
  52. 52. 150 Clove Road Little Falls, NJ 07424 1.855.NPGROUP www.npgroup.net our home away from home. Where To Find Us
  53. 53. ©2001-2016

×