View
30
Download
0
Category
Preview:
Citation preview
www.npgroup.net
Modular Web DesignPete Czech, CEO: New Possibilities Group, LLC
Welcome!
Today’s Agenda:
• Introductions• Topic Overview• About Web Templates• About Modular Design• Benefits• Technology Considerations• Examples• Q&A• Wrap Up
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
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.
Our Experience
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!
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.
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
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 Sky City in the Hunan provincial capital of Changsha, assembling three floors a day using a modular method, the vice-president, Xiao Changgeng, said.”
The End Product
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.
Commonalities
Highly Efficient.
Highly Profitable (or frugal).
Flexible for either consumer or manufacturer – limited inputs creat many different outputs.
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 great methodology back in the day.
The vast majority of established CMSs still utilize this method.
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.
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.
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 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.
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 developers.
Quicker development / deployment of pages.
Marketers dream: Landing pages in minutes.
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.
An Exercise
An Exercise
Less = More
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.
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.
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.
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.
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”.
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 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.
The CMS of Today
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?
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.
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…!
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!
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, 20172PM EST
Additional Resources
Our blog – www.npgroup.net/blog
Videos - www.npgroup.net/videos
E-Books – www.npgroup.net/resources
150 Clove RoadLittle Falls, NJ 07424 1.855.NPGROUP www.npgroup.net
our home away from home.
Where To Find Us
Recommended